/* R40/R41 - the 'Noto Serif Bengali' @font-face declarations moved out of this
   file to assets/css/noto-serif-bengali.css when the face went site-wide. */
/* R40 — the hero band, ported from npbnews.com so the design is the same one,
   not an approximation of it. Every number below is either read straight out of
   the reference's own stylesheet (templates/web-view/css/style.css) or measured
   from the reference rendered at innerWidth 1414. The reference runs Bootstrap at
   a 1400px container; this site runs Tailwind at max-w-7xl (1248px), so the
   column split is the reference's and the gutters are its 24px, but the absolute
   pixel values are used as-is.

   Reference values carried over verbatim:
     separators   2px solid #a3a1a1, margin 15px 0
     card h2      22px / 26px / 600 / #2d3134      (kicker plain, headline red)
     red accent   #b72126, 700
     thumb h3     20px / 24px / 600 / #2d3134, margin-bottom 10px
     two-col h4   20px / 24px / 600 / #2d3134, margin-bottom 8px
     two-col copy 16px / 20px / 400 / #555555
     rail h3/h4   20px / 24px / 600 / #2d3134
     images       5px radius, except the two-col pair which is square

   R43 replaced the reference's lead+card pair (`.gbn-lead*` / `.gbn-card*`, both
   now deleted) with a headline SLIDER at the top of the main column. The slider
   keeps the reference's type scale and its 5px image radius; the slide is an
   overlay, so its headline is 600 white on a bottom-up scrim rather than the
   reference's #121212 on white.

   Plain class names throughout, never a data-purpose attribute, so the @media
   overrides below win on source order rather than losing on specificity. */

.gbn-hero{
  background:#fff;
  border:1px solid #e8e8ea;
  border-radius:10px;
  padding:14px 0 16px;
  font-family:'Noto Serif Bengali',serif;
  font-size:16px;
  line-height:20px;
  color:#212529;
}
.gbn-hero *,.gbn-hero *::before,.gbn-hero *::after{box-sizing:border-box}
.gbn-hero img{display:block;max-width:100%}
/* :where() keeps this reset at (0,1,0) so the .gbn-*-title rules below — which
   are also (0,1,0) but come later — can still set their own margins. Written as
   `.gbn-hero h3` this would be (0,1,1) and would silently zero every margin. */
.gbn-hero :where(h1,h2,h3,h4,h5,h6){margin:0;font-weight:600}
.gbn-hero p{margin:0}
.gbn-hero a{color:inherit;text-decoration:none}
.gbn-hero article:hover h1,
.gbn-hero article:hover h2,
.gbn-hero article:hover h3,
.gbn-hero article:hover h4{color:#b72126}

/* ── skeleton: 3/4 main + 1/4 rail, divider on the main's right edge ───────── */
.gbn-row{display:grid;grid-template-columns:1fr}
.gbn-main{padding:0 12px}
.gbn-rail{padding:0 12px}

/* ══ the top band — the headline slider (R43) ══════════════════════════════
   A transform track rather than a scroll container: the slides are exactly one
   container wide, so translateX(-index*100%) is exact at every width and no
   card-width arithmetic has to be kept in sync with a gap. */
.gbn-top{padding:0 12px}

.gbn-slider{position:relative;overflow:hidden;border-radius:5px;background:#0b1220}
.gbn-track{display:flex;transition:transform .6s cubic-bezier(.4,0,.2,1)}
.gbn-slide{position:relative;flex:0 0 100%;min-width:0;aspect-ratio:16/9;overflow:hidden}
.gbn-slide-media{position:absolute;inset:0}
/* 35% rather than centre: news photography puts faces above the middle, and the
   slide is far wider than 16:9 once the >=768px fixed heights below kick in. */
.gbn-slide-media img{width:100%;height:100%;object-fit:cover;object-position:center 35%}
.gbn-slide-shade{
  position:absolute;inset:0;
  background:linear-gradient(to top,rgba(8,12,22,.94) 0%,rgba(8,12,22,.76) 32%,
    rgba(8,12,22,.28) 62%,rgba(8,12,22,0) 100%);
}
.gbn-slide-body{position:absolute;left:0;right:0;bottom:0;padding:18px 20px 20px;color:#fff}
/* category kicker removed — user does not want a category name on the slider (R55) */
.gbn-slide-title{
  font-size:19px;line-height:26px;font-weight:600;color:#fff;margin-top:9px;
  text-shadow:0 1px 10px rgba(0,0,0,.5);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.gbn-slide-sum{
  font-size:14px;line-height:20px;font-weight:400;color:rgba(255,255,255,.88);
  margin-top:6px;max-width:720px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
/* the band's hover-to-red (0,2,2) would fight the white overlay type — beat it
   on specificity, not on source order */
.gbn-hero article.gbn-slide:hover h1,
.gbn-hero article.gbn-slide:hover h2{color:#fff}

.gbn-nav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  width:38px;height:38px;padding:0;border:0;border-radius:50%;
  background:rgba(10,14,24,.5);color:#fff;font-size:14px;line-height:1;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  opacity:0;transition:opacity .25s ease,background-color .25s ease;
}
.gbn-nav--prev{left:12px}
.gbn-nav--next{right:12px}
.gbn-slider:hover .gbn-nav,.gbn-nav:focus-visible{opacity:1}
.gbn-nav:hover{background:#b72126}
/* a touch device never hovers, so the arrows would be permanently invisible
   there — keep them at rest-visible instead (swipe and the dots still work) */
@media (hover:none){
  .gbn-nav{opacity:.85}
}

/* Top-right, not bottom-right: the slide body owns the bottom edge and its
   summary would run under a bottom-anchored dot row at narrow widths. */
.gbn-dots{
  position:absolute;top:14px;right:14px;z-index:3;
  display:flex;align-items:center;gap:6px;
  background:rgba(8,12,22,.42);padding:6px 9px;border-radius:999px;
}
.gbn-dot{
  width:8px;height:8px;padding:0;border:0;border-radius:50%;
  background:rgba(255,255,255,.55);cursor:pointer;
  transition:background-color .25s ease,width .25s ease;
}
.gbn-dot.is-active{background:#fff;width:22px;border-radius:4px}

/* ── the rules ────────────────────────────────────────────────────────────── */
.gbn-sep{border-top:2px solid #a3a1a1;margin:15px 0}

/* ── the 4-up thumbnail strip ─────────────────────────────────────────────── */
/* R61 - the four captions must sit on one line. Two things can move a caption
   off that line, and both are neutralised here:
   1. a column wider than its neighbours - `1fr` means `minmax(auto,1fr)`, so a
      single long unbreakable Bengali word can widen one track, which widens its
      photo and pushes its caption down. minmax(0,1fr) makes every track exactly
      the same width, so every photo is exactly the same height.
   2. a photo box whose height comes from `aspect-ratio` - if that property is
      not honoured (older webviews), each photo falls back to its intrinsic
      ratio and the captions land at four different heights. The padding-bottom
      box gives the same 16:9 frame with no aspect-ratio dependency at all.
   The caption itself then hangs from the bottom of the card (margin-top:auto),
   so even a one-pixel difference in a photo can no longer stagger the labels. */
.gbn-thumbs{display:grid;grid-template-columns:minmax(0,1fr);gap:18px;padding:0 12px}
.gbn-thumb-media{position:relative;height:0;padding-bottom:56.25%;overflow:hidden;border-radius:5px;margin-bottom:8px}
.gbn-thumb-media img{position:absolute;top:0;left:0;display:block;width:100%;height:100%;object-fit:cover}
.gbn-thumb-title{
  font-size:17px;line-height:21px;font-weight:600;color:#2d3134;
  margin:auto 0 10px;
}

/* ── the 2x2 block: headline + copy left, square photo right ──────────────── */
.gbn-two{display:grid;grid-template-columns:minmax(0,1fr);padding:0 12px}
.gbn-two-art{padding:0 12px}
.gbn-two-inner{display:flex;align-items:flex-start}
.gbn-two-body{flex:1 1 auto;min-width:0}
.gbn-two-title{font-size:17px;line-height:21px;font-weight:600;color:#2d3134;margin-bottom:8px}
.gbn-two-sum{font-size:15px;line-height:20px;font-weight:400;color:#555555}
.gbn-two-media{flex:0 0 40%;aspect-ratio:20/13;margin-left:10px;overflow:hidden}
.gbn-two-media img{width:100%;height:100%;object-fit:cover}
.gbn-two-sep{border-top:2px solid #a3a1a1;margin:15px 0}

/* ── the rail: one photo-top card then three title+thumb rows ─────────────── */
.gbn-rail-card-media{overflow:hidden;border-radius:5px}
.gbn-rail-card-media img{width:100%;aspect-ratio:16/9;object-fit:cover}
.gbn-rail-card-title{font-size:17px;line-height:21px;font-weight:600;color:#2d3134;margin:8px 0 10px}
.gbn-rail-row{display:flex;align-items:flex-start}
.gbn-rail-row-title{flex:1 1 auto;min-width:0;font-size:17px;line-height:21px;font-weight:600;color:#2d3134;margin-bottom:10px}
.gbn-rail-row-media{flex:0 0 28%;aspect-ratio:9/8;margin-left:10px;overflow:hidden;border-radius:5px}
.gbn-rail-row-media img{width:100%;height:100%;object-fit:cover}

/* ── equal-height cards ──────────────────────────────────────────────────────
   Every headline/summary below is data-driven, so its line count varies and a
   row of cards would otherwise end raggedly. Each is clamped to the line count
   its slot is designed for AND reserves that full height, so a short title still
   occupies its full block and every card in a row is exactly the same height.
   Clamping is -webkit-box, the mechanism the slide already uses.

   The reserved height is in **em**, not px: below 1024px the R45 responsive
   layer (responsive.blade.php) re-sets these titles' line-height to a UNITLESS
   1.4 (1.45 for the two-up copy) so it tracks the 17/18px Bengali face, and an
   em reservation tracks that automatically — 3 lines = 3×1.4 = 4.2em. From
   1024px up the line-height goes back to a fixed px value, so the min-heights
   are re-stated in px inside those media queries. Images already carry a fixed
   aspect-ratio, so they are uniform by construction — only the text needed this. */
.gbn-thumb,.gbn-two-art{display:flex;flex-direction:column;height:100%}
/* the rail card is a stacked block in the rail column, NOT a grid cell — it
   must keep its natural height or height:100% would resolve against the
   stretched column and blow the card up to the full column height */
.gbn-rail-card{display:flex;flex-direction:column}
.gbn-thumb-media,.gbn-two-inner,.gbn-rail-card-media{flex:0 0 auto}
/* the 2-up rule is pinned to the card's bottom edge so both cards in a row
   break on the same line however their copy differs */
.gbn-two-sep{margin-top:auto}

/* R85 — the 1px inset is deliberate. `height` alone is not enough: when the
   block's top edge lands on a fractional device pixel (a 1280px window at 150%
   scaling, a card at y=822.75), the clip boundary rounds UP by up to one device
   pixel and the top of the NEXT line's matra shows through as a thin black rule
   under the last line. Pulling the box 1px short keeps the boundary inside the
   line box, where the descenders leave several px of clearance. */
.gbn-thumb-title{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;height:calc(4.2em - 1px)}
.gbn-two-title{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;height:calc(2.8em - 1px)}
/* R65/R65b: the 2-up copy. It was 3 lines of 14/15/16px; the user first asked
   for "1 line kore aro baro" (R65 shipped clamp:1 at the bigger size), then
   reversed it: "1 na ami cacci 4 line discription thakbe". So it is now FOUR
   lines at the stepped-up size — keep the bigger type, since "aro baro" was
   never retracted, only the line count. `min-height` is 4 lines: 4×1.45em
   below 1024 (the R45 unitless line-height), the fixed px above. Four lines
   at ~15-18px is roughly a full paragraph, so it balances the 20/13 photo:
   at 1440px the copy block and the photo come out within a few px of each
   other, and `.gbn-two-sep{margin-top:auto}` still pins the rule flush. */
.gbn-two-sum{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;height:calc(4.35em - 1px)}
.gbn-rail-card-title{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;height:calc(2.8em - 1px)}
.gbn-rail-row-title{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;height:calc(4.2em - 1px)}

/* ══ 640px — the strip goes 2-up ═══════════════════════════════════════════ */
@media (min-width:640px){
  .gbn-thumbs{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:24px}
}

/* <=767px — mobile: the hero keeps the standard 16px page gutter (like the
   জাতীয় section) instead of the old edge-to-edge full-bleed. The card
   border/radius stay flattened and the inner padding stays zeroed so the
   band reads as page content with side margins, not a slab. Title-only
   slides and 2x2 thumbnails are unchanged from R55. */
@media (max-width:767.98px){
  .gbn-hero{margin-left:0;margin-right:0;border:0;border-radius:0}
  .gbn-main,.gbn-top,.gbn-thumbs,.gbn-two{padding-left:0;padding-right:0}
  .gbn-slider{border-radius:0}
  .gbn-slide-sum{display:none}
  .gbn-thumbs{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:14px}
}

/* ══ 768px — the reference's md: main+rail beside each other, 8/12 + 4/12,
   the strip still 2-up (Bootstrap only takes it to 4-up at lg). The slider
   leaves its 16:9 box for a fixed band height: at this width a 16:9 slide
   would be 550px+ tall and swallow the whole first screen. ═══════════════ */
@media (min-width:768px){
  .gbn-row{grid-template-columns:3fr 1fr}
  .gbn-main{border-right:2px solid #a3a1a1}
  .gbn-slide{aspect-ratio:auto;height:330px}
  .gbn-two{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .gbn-two-art:nth-child(odd){border-right:2px solid #a3a1a1}
  .gbn-thumb-title,.gbn-two-title,.gbn-rail-card-title,.gbn-rail-row-title{font-size:18px;line-height:22px}
  .gbn-two-sum{font-size:16px;line-height:21px}
  /* no min-height re-statement here: below 1024px the R45 layer keeps the
     line-height unitless, so the em reservation in the base rules still holds */
}

/* ══ 1024px — the reference's lg: the strip goes 4-up and the type steps up ══ */
@media (min-width:1024px){
  .gbn-thumbs{grid-template-columns:repeat(4,minmax(0,1fr))}
  .gbn-slide-title{font-size:21px;line-height:29px}
  .gbn-two-sum{font-size:17px;line-height:22px}
  /* from here the R45 layer no longer applies, so the line-heights are the
     fixed px set above — the reservation must be re-stated in px
     (3×24 / 2×22 / 4×22 — the two-up copy is four lines).
     `height`, not `min-height`: the block is pinned to exactly N line boxes so
     nothing (a taller fallback line box, sub-pixel rounding) can open up room
     for the top of the next line to show through. */
  /* 1px short of 3×22 / 2×22 — see the R85 note on the base rules */
  .gbn-thumb-title{height:65px}
  .gbn-two-title{height:43px}
  .gbn-two-sum{height:65px}
  .gbn-rail-card-title{height:43px}
  .gbn-rail-row-title{height:65px}
}

/* ══ 1280px — the site's container is at its 1248px max here, so from this
   point the reference's own numbers are used unmodified. ═════════════════ */
@media (min-width:1280px){
  .gbn-slide{height:380px}
  .gbn-slide-body{padding:22px 24px 24px}
  .gbn-slide-title{font-size:24px;line-height:33px}
  .gbn-slide-sum{font-size:15px;line-height:21px;max-width:760px}
  /* the 8px gap above a thumb caption lives on .gbn-thumb-media (R61), so it is
     not repeated here - a second margin-top would double the gap at >=1280 only */
  .gbn-thumb-title{font-size:20px;line-height:24px}
  .gbn-two-title{font-size:20px;line-height:24px;margin-bottom:8px}
  .gbn-two-sum{font-size:18px;line-height:24px}
  .gbn-rail-card-title{font-size:20px;line-height:24px;margin:8px 0 10px}
  .gbn-rail-row-title{font-size:20px;line-height:24px;margin-bottom:10px}
  /* 1px short of 3×24 / 2×24 — see the R85 note on the base rules */
  .gbn-thumb-title{height:71px}
  .gbn-two-title{height:47px}
  .gbn-two-sum{height:71px}
  .gbn-rail-card-title{height:47px}
  .gbn-rail-row-title{height:71px}
}

@media (prefers-reduced-motion:reduce){
  .gbn-hero *{transition:none !important}
}