/*---------------------------------
  Phase 4: tablets, phablets and phones
  Phones (screen <= 768px) are still redirected to m.imvahonshya.co.rw for now,
  but the aim is one responsive site, so every width down to 320px is covered.
  Loaded last. Uses the same four breakpoints as tokens.css.
-----------------------------------*/

/* ===== Laptop / large tablet: 992-1199px ===== */
@media (max-width: 1199px) {
  /* feed | main sections; the ad rail moves to a full-width row below */
  .news-col-wrap .news-col-one { width: calc(40% - 12px); }
  .news-col-wrap .news-col-two { width: calc(60% - 12px); }
  .news-col-wrap .news-col-three {
    width: 100%;
    margin-top: var(--space-6);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    gap: var(--space-4);
  }
  /* one height for every advert, each at its own width (nothing cropped), so the row's
     tops and bottoms line up; the ads are 2:5 to 1:3 skyscrapers */
  .news-col-wrap .news-col-three .promo-img { margin: 0; width: auto; max-width: 100%; }
  .news-col-wrap .news-col-three .promo-img img { display: block; height: 600px; width: auto; max-width: 100%; object-fit: contain; }
  .news-col-wrap .news-col-three br { display: none; }

  /* Inkuru Zigezweho small cards: thumbnail above text instead of beside */
  .imv-highligh ~ .news-card-three { flex-direction: column; }
  .imv-highligh ~ .news-card-three .imv-news-card-img { width: 100%; }
  .imv-highligh ~ .news-card-three .imv-news-card-img img { width: 100%; height: 90px; object-fit: cover; border-radius: 6px; }
  .imv-highligh ~ .news-card-three .imv-news-card-info { width: 100%; margin: var(--space-2) 0 0; }

  /* story sections: list thumbnails a bit smaller */
  .news-col-two .imv-tab-sect-sc .news-card-three .imv-all-card-img img { width: 76px; height: 52px; }

  /* Inkuru Zigezweho: smaller type while it shares the row with the slider */
  .imv-top-lead { padding-right: var(--space-4); }
  .imv-top-side { padding-left: var(--space-4); }
  .imv-top-lead h2 { font-size: 23px; }
  .imv-top-excerpt { font-size: 14px; }
  .imv-top-more ul { gap: var(--space-4); }
  .imv-top-more li { padding-left: 17px; }
  .imv-top-more li:before { width: 9px; height: 9px; }
  .imv-top-more li a { font-size: 13.5px; overflow-wrap: break-word; }
  /* the three columns are ~135px wide here: drop the clock so the date fits on one line */
  .imv-top-more .imv-top-time { font-size: 11.5px; white-space: nowrap; }
  .imv-top-more .imv-top-time i { display: none; }
}

/* "Andi makuru" / "Autres titres" dates: 1200-1279px is a little short for the clock too, and below 1140px a long date
   is wider than its column, so there it wraps (under itself, see .imv-top-time) rather than overflow */
@media (min-width: 1200px) and (max-width: 1279px) {
  .imv-top-more .imv-top-time i { display: none; }
}
@media (min-width: 992px) and (max-width: 1139px) {
  .imv-top-more .imv-top-time { white-space: normal; }
}

/* ===== Tablet: 768-991px ===== */
@media (max-width: 991px) {
  /* top row: slider full width, Inkuru Zigezweho full width below */
  .container-fluid > .row > .imv-slider-col { flex: 0 0 100%; max-width: 100%; width: auto; }
  .container-fluid > .row > .col-lg-6.col-md-6.col-6:is(:has(.imv-highligh), .imv-top-col) { flex: 0 0 100%; max-width: 100%; width: auto; margin-top: var(--space-5); }
  .imv-highligh ~ .news-card-three { flex-direction: row; }
  /* Inkuru Zigezweho is full width here: back to full-size type */
  .imv-top-lead h2 { font-size: 30px; }
  .imv-top-excerpt { font-size: 16px; }
  .imv-top-more li a { font-size: 15px; }
  .imv-top-more .imv-top-time { font-size: 12px; }
  .imv-top-more .imv-top-time i { display: inline; }
  .imv-highligh ~ .news-card-three .imv-news-card-img { width: 110px; flex: none; }
  .imv-highligh ~ .news-card-three .imv-news-card-img img { height: 72px; }
  .imv-highligh ~ .news-card-three .imv-news-card-info { margin: 0 0 0 var(--space-3); }

  /* main sections first, then the feed as a two-column grid, then ads */
  .news-col-wrap { display: flex; flex-direction: column; }
  .news-col-wrap .news-col-one,
  .news-col-wrap .news-col-two,
  .news-col-wrap .news-col-three { width: 100%; }
  .news-col-wrap .news-col-two { order: 1; display: block; }
  .news-col-wrap .news-col-one {
    order: 2;
    margin-top: var(--space-6);
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: var(--space-5);
    align-content: start;
  }
  .news-col-wrap .news-col-one > * { min-width: 0; }
  .news-col-wrap .news-col-one > .imv-header-nav,
  .news-col-wrap .news-col-one > nav,
  .news-col-wrap .news-col-one > .imv-all-cat { grid-column: 1 / -1; }
  .news-col-wrap .news-col-one .imv-all-cat .news-card-two .news-card-img img { height: 260px; }
  .news-col-wrap .news-col-three { order: 3; }
  /* nothing to balance once the columns stack */
  .imv-fill { display: none !important; }

  /* story sections: overlay cards in a row, list below them */
  .news-col-two .section .row > .col-md-7,
  .news-col-two .section .row > .col-md-5 { flex: 0 0 100%; max-width: 100%; }
  .news-col-two .col-md-7.imv-bord-news { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
  .news-col-two .col-md-7.imv-bord-news .news-card-four.imv-section { margin: 0; }
  .news-col-two .imv-tab-sect-sc {
    height: auto;
    max-height: none;
    overflow: visible;
    margin-top: var(--space-4);
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: var(--space-5);
    -webkit-mask-image: none;
            mask-image: none;
  }
  .news-col-two .imv-tab-sect-sc .news-card-three:last-child { margin-bottom: var(--space-3); }

  /* article page: sidebar ads below the story */
  .imv-article-page .col-lg-9,
  .imv-article-page .col-lg-3 { flex: 0 0 100%; max-width: 100%; }
  .imv-article-page .col-lg-3 .sidebar { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-4); margin-top: var(--space-6); }
  .imv-article-page .col-lg-3 .promo-img { width: auto; max-width: 100%; margin: 0; }
  .imv-article-page .col-lg-3 .promo-img img { display: block; height: 600px; width: auto; max-width: 100%; object-fit: contain; }
  .imv-article-page .col-lg-3 br { display: none; }

  /* search page the same */
  .imv-search-page .col-lg-9,
  .imv-search-page .col-lg-3 { flex: 0 0 100%; max-width: 100%; }
  .imv-search-page .col-lg-3 .sidebar { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-4); margin-top: var(--space-6); }
  .imv-search-page .col-lg-3 .promo-img { width: auto; max-width: 100%; margin: 0; }
  .imv-search-page .col-lg-3 .promo-img img { display: block; height: 600px; width: auto; max-width: 100%; object-fit: contain; }
  .imv-search-page .col-lg-3 br { display: none; }

  /* e-paper hero */
  .imv-ep-hero { grid-template-columns: 220px 1fr; gap: var(--space-6); padding: var(--space-5); }
}

/* ===== Narrow windows: < 768px ===== */
@media (max-width: 767px) {
  /* Inkuru Zigezweho: one card per row */
  .container-fluid > .row > .col-lg-6.col-md-6.col-6:has(.imv-highligh) > .row > .col-lg-6 { flex: 0 0 100%; max-width: 100%; }
  /* slider headline stays visible (Bootstrap hides captions below 768px) */
  #carouselExampleDark .carousel-caption.d-none { display: flex !important; flex-direction: column-reverse; align-items: flex-start; gap: 6px; padding: var(--space-5) var(--space-3) var(--space-3); }
  #carouselExampleDark .carousel-caption .imv-sl-news-categ { position: static; }
  #carouselExampleDark .carousel-caption h1 { min-height: 0; margin: 0; font-size: 16px; }
  .imv-article-body > p:first-of-type { font-size: 18px; }
  .imv-article-body, .imv-article-body p { font-size: 17px; line-height: 1.7; }
  #carouselExampleDark .carousel-item { height: 260px; }
  #carouselExampleDark .carousel-indicators [data-bs-target] { height: 40px; }

  .imv-highligh ~ .news-card-three .imv-news-card-img { width: 96px; }
  .imv-highligh ~ .news-card-three .imv-news-card-img img { height: 64px; }

  .news-col-wrap .news-col-one { grid-template-columns: 1fr; }
  .news-col-wrap .news-col-one .imv-all-cat .news-card-two .news-card-img img { height: 200px; }
  .news-col-two .col-md-7.imv-bord-news,
  .news-col-two .imv-tab-sect-sc { grid-template-columns: 1fr; }
  .news-card-four.imv-section img { height: 220px; }
  .page-nav li, nav.pagination li { margin: 0 2px; }
  .page-nav li a, .page-nav li span.page-numbers { width: 30px; height: 30px; font-size: 12px; }

  .imv-tab-content .row > .col-md-6 { flex: 0 0 100%; max-width: 100%; }

  .imv-related-grid { grid-template-columns: 1fr !important; }
  .imv-article-card { padding: var(--space-4) var(--space-3); }
  .imv-byline { flex-wrap: wrap; }
  .imv-latest-list { grid-template-columns: 1fr; }

  .imv-cat-head-inner { padding-left: var(--space-3); }
  .imv-ep-hero { grid-template-columns: 1fr; text-align: center; }
  .imv-ep-hero-cover { max-width: 200px; margin: 0 auto; }
  .imv-ep-actions, .imv-ep-kicker { justify-content: center; }
  .imv-404-grid { grid-template-columns: 1fr 1fr !important; }
}

/* Below 992px the page uses the whole screen: responsive.css capped the container at 540px
   (576-767) and 720px (768-991), which left wide empty margins on 7-inch tablets, the
   Surface (960px) and landscape phones */
@media (max-width: 991px) {
  .container-fluid { max-width: none; }
}
@media (max-width: 575px) {
  /* two adverts per row on a phone */
  .news-col-wrap .news-col-three { gap: var(--space-3); }
  .news-col-wrap .news-col-three .promo-img img,
  .imv-article-page .col-lg-3 .promo-img img,
  .imv-search-page .col-lg-3 .promo-img img { height: 420px; }
  .imv-article-page .col-lg-3 .sidebar,
  .imv-search-page .col-lg-3 .sidebar { gap: var(--space-3); }
}

/* Inkuru Zigezweho: lead story, then the ad box, then "Andi makuru" as a one-column list */
@media (max-width: 767px) {
  /* the two 650x100 top banners: one per row, full width, so each stays legible */
  .navbar-area .header-top .row > .col-6 { flex: 0 0 100%; max-width: 100%; }
  .navbar-area .header-top .row > .col-6 + .col-6 { margin-top: var(--space-2); }
  .imv-top-more ul { grid-template-columns: 1fr; gap: 0; }
  .imv-top-more li { padding: var(--space-3) 0 var(--space-3) 20px; border-bottom: 1px solid var(--line); }
  .imv-top-more li:last-child { border-bottom: 0; }
  .imv-top-more li:before { top: calc(var(--space-3) + 5px); width: 9px; height: 9px; }
  .imv-top-more li a { font-size: 15px; -webkit-line-clamp: 2; }
}

@media (max-width: 575px) {
  .imv-top { grid-template-columns: 1fr; }
  .imv-top-lead { padding-right: 0; }
  .imv-top-lead h2 { font-size: 24px; -webkit-line-clamp: 5; }
  .imv-top-excerpt { font-size: 15px; }
  /* the ad keeps its 4:5 shape at its designed 300px width */
  .imv-top-side { padding: var(--space-4) 0 0; margin-top: var(--space-4); border-left: 0; border-top: 1px solid var(--line); align-items: center; }
  .imv-top-side > * { width: 100%; max-width: 300px; }

  .imv-404-grid { grid-template-columns: 1fr !important; }
  /* article: on a phone the page gutter is enough, so the card loses its frame and the
     story gets the full width (it lost ~30px a side to card padding) */
  .imv-article-card,
  .theme-dark .imv-article-card { padding: var(--space-2) 0 0; border: 0; border-radius: 0; box-shadow: none; background: none; }
  .news-details-wrap .imv-article-title { font-size: 25px; }
  .imv-ep-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ===== Drawer menu (tablets and narrow windows) ===== */
/* Above the WordPress admin bar (z-index 99999), which otherwise hides the header and close button */
.imv-drawer.offcanvas { z-index: 100001; width: min(360px, 90vw); border: 0; background: #fff; display: flex; flex-direction: column; box-shadow: -12px 0 32px rgba(20, 27, 43, .18); }
.offcanvas-backdrop { z-index: 100000; }
.offcanvas-backdrop.show { opacity: .55; }
.imv-drawer-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: 14px var(--space-4); background: var(--brand-700); }
/* the La Nouvelle logo has a solid background (a white filter turns it into a blank box): show it as-is on a white card, like the footer */
.imv-drawer-head a { display: inline-flex; padding: 6px 10px; border-radius: 8px; background: #fff; }
.imv-drawer-head img { height: 30px; width: auto; }
.imv-drawer-close { flex: none; width: 40px; height: 40px; display: grid; place-items: center; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .16); color: #fff; font-size: 22px; line-height: 1; transition: background-color .2s; }
.imv-drawer-close:hover, .imv-drawer-close:focus-visible { background: rgba(255, 255, 255, .28); color: #fff; }
.imv-drawer-search { position: relative; margin: var(--space-4) var(--space-4) var(--space-2); }
.imv-drawer-search i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--brand-700); line-height: 1; }
.imv-drawer-search input {
  width: 100%; height: 44px; padding: 0 14px 0 40px;
  border: 1px solid var(--line); border-radius: 999px; background: #F4F6FA;
  font-family: var(--secondaryFont); font-size: 15px; color: var(--ink); outline: 0;
}
.imv-drawer-search input:focus { border-color: var(--brand-600); background: #fff; box-shadow: 0 0 0 3px var(--brand-50); }
.imv-drawer-nav { flex: 1 1 auto; overflow-y: auto; padding: var(--space-2) var(--space-3) var(--space-4); }
.imv-drawer-menu, .imv-drawer-menu ul { margin: 0; padding: 0; list-style: none; }
.imv-drawer-menu { display: flex; flex-wrap: wrap; gap: 2px 8px; }
.imv-drawer-menu > li { flex: 0 0 100%; }
.imv-drawer-menu li { float: none !important; }
.imv-drawer-menu a {
  position: relative; display: block; padding: 11px 12px; border-radius: 8px;
  font-family: var(--secondaryFont); font-size: 14px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase;
  color: var(--ink); transition: background-color .15s, color .15s;
}
.imv-drawer-menu a:hover { background: #F4F6FA; color: var(--brand-800); }
.imv-drawer-menu .imv-active > a { background: var(--brand-50); color: var(--brand-800); }
.imv-drawer-menu .imv-active > a:before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 2px; background: var(--brand-600); }
.imv-drawer-menu .menu-item-has-children > a:after {
  content: ""; position: absolute; right: 16px; top: 50%; width: 7px; height: 7px; margin-top: -5px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform .2s;
}
.imv-drawer-menu .menu-item-has-children.is-open > a:after { transform: rotate(225deg); margin-top: -1px; }
/* IZINDI sub-sections open as a wrap of chips */
.imv-drawer-menu .dropdown-menu {
  position: static !important; display: none; float: none; width: auto; margin: 4px 0 var(--space-2); padding: 0 4px;
  border: 0; border-radius: 0; box-shadow: none; background: none;
  opacity: 1 !important; visibility: visible !important; transform: none !important;
}
.imv-drawer-menu .is-open > .dropdown-menu { display: flex; flex-wrap: wrap; gap: 6px; }
.imv-drawer-menu .dropdown-menu a { padding: 7px 12px; border: 1px solid var(--line); border-radius: 999px; font-size: 12px; font-weight: 600; letter-spacing: .02em; color: var(--text); }
.imv-drawer-menu .dropdown-menu a:hover { border-color: var(--brand-600); background: var(--brand-50); }
.imv-drawer-menu .dropdown-menu .imv-active > a { border-color: var(--brand-600); }
.imv-drawer-menu .dropdown-menu .imv-active > a:before { content: none; }
/* E-PAPER and KINYARWANDA close the list as two buttons side by side */
.imv-drawer-menu > .imv-nav-epaper, .imv-drawer-menu > .imv-drawer-fr { flex: 1 1 0; margin-top: var(--space-3); }
.imv-drawer-menu > .imv-nav-epaper > a, .imv-drawer-menu > .imv-drawer-fr > a { padding: 12px 8px; text-align: center; font-size: 13px; color: #fff; }
.imv-drawer-menu > .imv-nav-epaper > a { background: var(--brand-700); }
.imv-drawer-menu > .imv-nav-epaper > a:hover, .imv-drawer-menu > .imv-nav-epaper.imv-active > a { background: var(--brand-800); color: #fff; }
.imv-drawer-menu > .imv-nav-epaper.imv-active > a:before { content: none; }
.imv-drawer-menu > .imv-drawer-fr > a { background: var(--imv-green); }
.imv-drawer-menu > .imv-drawer-fr > a:hover { background: var(--imv-green); color: #fff; filter: brightness(.9); }
.imv-drawer-menu a[href*="e-paper"]:before { content: none; }
.imv-drawer-foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px 12px; padding: 14px var(--space-4); border-top: 1px solid var(--line); background: #F6F8FC; font-size: 13px; color: var(--muted); }
.imv-drawer-foot a { color: var(--brand-800); font-weight: 600; }

/* ===== Imvaho TV across the middle and ad columns (inc/imvaho-tv.php) =====
   The TV block sits in the column wrapper, before the middle column, so from 992px up
   the wrapper becomes a grid: the feed runs down the left, TV takes the first row on the
   right, and the middle column and ad rail start together under it (the rail's first
   advert lines up with the Amatangazo heading). The second row is 1fr so a long feed
   never stretches the TV row. Below 992px everything stacks, TV first. */
@media (min-width: 1200px) {
  .news-col-wrap {
    display: grid;
    width: 100%;
    grid-template-columns: calc(35% - 10px) calc(50% - 10px) calc(15% - 10px);
    grid-template-rows: auto 1fr;
    justify-content: space-between;
  }
  .news-col-wrap > .news-col-one { grid-column: 1; grid-row: 1 / 3; width: auto; }
  .news-col-wrap > .imv-tv { grid-column: 2 / 4; grid-row: 1; min-width: 0; }
  .news-col-wrap > .news-col-two { grid-column: 2; grid-row: 2; width: auto; min-width: 0; }
  .news-col-wrap > .news-col-three { grid-column: 3; grid-row: 2; width: auto; min-width: 0; }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .news-col-wrap {
    display: grid;
    width: 100%;
    grid-template-columns: calc(40% - 12px) calc(60% - 12px);
    grid-template-rows: auto 1fr auto;
    justify-content: space-between;
  }
  .news-col-wrap > .news-col-one { grid-column: 1; grid-row: 1 / 3; width: auto; }
  .news-col-wrap > .imv-tv { grid-column: 2; grid-row: 1; min-width: 0; }
  .news-col-wrap > .news-col-two { grid-column: 2; grid-row: 2; width: auto; min-width: 0; }
  .news-col-wrap > .news-col-three { grid-column: 1 / -1; grid-row: 3; width: auto; }
}
@media (max-width: 991px) {
  /* stacked: the latest stories (the desktop's left column) come first, straight under
     Inkuru Zigezweho, then Imvaho TV, the middle column and the ads */
  .news-col-wrap > .news-col-one { order: 1; margin-top: 0; }
  .news-col-wrap > .imv-tv { order: 2; width: 100%; margin-top: var(--space-6); }
  .news-col-wrap > .news-col-two { order: 3; margin-top: var(--space-6); }
  .news-col-wrap > .news-col-three { order: 4; }
  .news-col-wrap .news-col-one > .imv-span,
  .news-col-wrap .news-col-one > .imv-feed-more { grid-column: 1 / -1; }
}
@media (max-width: 991px) {
  /* responsive.css stacks compact cards below 992px (info 100% wide, 20px top margin), which
     left the headline touching the photo; keep the thumbnail beside the headline with a gap */
  .news-card-three { flex-wrap: nowrap !important; }
  .news-card-three .news-card-info,
  .news-card-three .imv-news-card-info,
  .news-col-one .news-card-three .news-card-info,
  .news-col-two .news-card-three .news-card-info,
  .news-col-three .news-card-three .news-card-info { width: auto !important; flex: 1 1 auto; min-width: 0; margin: 0 0 0 var(--space-3) !important; }
  .news-card-three .news-card-img,
  .news-col-one .news-card-three .news-card-img,
  .news-col-two .news-card-three .news-card-img { width: auto !important; flex: none; }

  /* Sobanukirwa, Inkuru Zamamaza, Imikino, Imyidagaduro: their one photo card takes the whole
     row (it sat in the left half of a two-column grid with the right half empty) */
  .news-col-two .imv-one-card .col-md-7.imv-bord-news { grid-template-columns: 1fr; }
  .news-col-two .imv-one-card .news-card-four.imv-section img { height: 340px; }
}
/* two-column story lists (768-991px): an odd last story would sit beside an empty cell,
   so the lists show an even number (all of them again once they are one column) */
@media (min-width: 768px) and (max-width: 991px) {
  .news-col-two .imv-tab-sect-sc > .news-card-three:last-child:nth-child(odd) { display: none !important; }
}
@media (max-width: 767px) {
  .news-col-two .imv-one-card .news-card-four.imv-section img { height: 230px; }
}

/* Amatangazo / Cyamunara on touch screens: no box scrolling inside the page. Each tab
   shows its latest 5 notices and the "Reba … yandi" button below leads to the rest. */
@media (max-width: 991px) {
  .imv-tab-content .tab-pane > .row { height: auto; overflow: visible; padding-right: 0; }
  .imv-tab-content .tab-pane > .row > .imv-tab-sc + .imv-tab-sc { display: none; }
  .imv-tab-content .tab-pane > .row > .imv-tab-sc .list li:nth-child(n+6) { display: none; }
}
.imv-feed-more { display: none; }
@media (max-width: 991px) {
  .imv-feed-more {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    width: 100%; min-height: 46px; margin: var(--space-2) 0 var(--space-4); padding: 10px 16px;
    border: 1px solid var(--green-600); border-radius: 999px; background: #fff;
    font: 700 14px/1.2 var(--secondaryFont); color: var(--green-800);
  }
  .imv-feed-more:hover, .imv-feed-more:focus-visible { background: var(--green-50); }
  .imv-feed-more[hidden] { display: none; }
  .imv-feed-more i { font-size: 20px; line-height: 1; }
}