/* ═══════════════════════════════════════════════════════════════
   MKNews Hub — banners.css
   Точни димензии според ценовникот. Вклучи го овој фајл (<link>)
   или залепи го внатре во постоечкиот <style> блок на секоја
   страница каде се користи render_banner().
   ═══════════════════════════════════════════════════════════════ */

.mkn-banner-slot{display:flex;flex-direction:column;align-items:center;margin:1.2rem auto}
.mkn-banner-slot .mkn-label{font:600 9px system-ui,sans-serif;color:var(--ink3,#888);letter-spacing:.06em;
  text-transform:uppercase;margin-bottom:4px;align-self:flex-start}

/* Header Banner (Leaderboard) — 728×90 */
.mkn-slot-header{max-width:728px;width:100%}
.mkn-banner-header{display:block;width:100%;max-width:728px;aspect-ratio:728/90;overflow:hidden;border-radius:4px}
.mkn-banner-header img{width:100%;height:100%;object-fit:cover;display:block}

/* In-article — 300×250 */
.mkn-slot-inarticle{margin:1.6rem auto}
.mkn-banner-inarticle{display:block;width:300px;max-width:100%;aspect-ratio:300/250;overflow:hidden;border-radius:4px}
.mkn-banner-inarticle img{width:100%;height:100%;object-fit:cover;display:block}

/* Sidebar — 300×250, фиксен/ексклузивен */
.mkn-slot-sidebar{margin:0 0 1rem}
.mkn-banner-sidebar{display:block;width:100%;aspect-ratio:300/250;overflow:hidden;border-radius:6px;box-shadow:0 1px 3px rgba(0,0,0,.08)}
.mkn-banner-sidebar img{width:100%;height:100%;object-fit:cover;display:block}

/* Мобилен леплив банер — 320×50, залепен на дното на екранот */
.mkn-slot-mobile{display:none}
@media(max-width:760px){
  .mkn-slot-mobile{
    display:flex;position:fixed;left:0;right:0;bottom:0;z-index:400;
    background:#fff;box-shadow:0 -2px 8px rgba(0,0,0,.12);
    padding:6px env(safe-area-inset-right,0) calc(6px + env(safe-area-inset-bottom,0)) env(safe-area-inset-left,0);
    margin:0;
  }
  .mkn-banner-mobile{width:320px;max-width:100%;aspect-ratio:320/50}
  .mkn-banner-mobile img{width:100%;height:100%;object-fit:cover;display:block}
  /* Остави простор на дното на страницата за да не покрива содржина */
  body{padding-bottom:62px}
}

/* Видео-банер во статија — responsive 16:9 */
.mkn-slot-video_inarticle{margin:1.6rem auto;max-width:100%}
.mkn-banner-video{position:relative;width:100%;max-width:640px;aspect-ratio:16/9;margin:0 auto;
  border-radius:6px;overflow:hidden;background:#000}
.mkn-banner-video video,.mkn-banner-video iframe{width:100%;height:100%;display:block;border:none}
.mkn-banner-video-link{position:absolute;bottom:8px;right:8px;background:rgba(0,0,0,.75);color:#fff;
  font:600 12px system-ui,sans-serif;padding:5px 12px;border-radius:4px;text-decoration:none}
.mkn-banner-video-link:hover{background:rgba(0,0,0,.9)}