/* ============================================================
   The Balochistan Post — homepage sections
   Enqueued on the front page only. Depends on tokens.css + app.css.
   Sections (DOM order): hero · videos · trending+feature · featured
   reports · interviews · editorials · investigation · opinion+
   newsletter · press/desk+ad · sections-row.
   Plus the front-page "tweaks" (accent / architecture / voice).
   ============================================================ */

/* ── Shared: section title bar (AJ hairline rule, no tick) ───── */
.secbar { display: flex; align-items: baseline; gap: 12px; margin-bottom: 24px; padding-top: 16px; }
.secbar h2 { font-family: var(--tbp-ff-sec, var(--font-urdu)); font-weight: 700; font-size: calc(20px * var(--tbp-fsx-sec, 1)); line-height: calc(1.2 * var(--tbp-lhx-sec, 1)); margin: 0; color: var(--ink-900); letter-spacing: -0.005em; }
.secbar h2::before { display: none; }
.secbar .more { margin-inline-start: auto; font-family: var(--font-urdu); font-weight: 500; font-size: 13px; color: var(--red); }
.secbar .more:hover { color: var(--red-strong); }
.live-pill, .live-dot { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-urdu); font-weight: 600; font-size: 12px; color: var(--tbp-live); }

/* ═══ I. HERO — "Featured & Live" module (design import) ═════════════
   Photo + solid red headline band; latest rail (uniform, hairline dividers);
   live state swaps in the LIVE screen + an updates timeline. Font: IBM Plex
   Sans Arabic (700 titles / 400 body). Light + dark via theme tokens. */
.hero { padding: 4px 0 34px; } /* rail above provides the top gap — was 30px, made 26/74 lopsided */
/* (hero module heading removed 2026-07-04 — the lead story speaks for itself;
   in live mode the on-screen براہ راست tag + updates head carry the signal) */


.hero .hgrid { display: grid; grid-template-columns: minmax(0, 1fr) 296px; gap: 32px; align-items: start; }
.hero .hmain { min-width: 0; }

/* Featured / live lead card — whole card links via .card-link on top */
.hero .feature { position: relative; }
.hero .feature .card-link { position: absolute; inset: 0; z-index: 3; }
.hero .feat-media { position: relative; border-radius: 8px 8px 0 0; overflow: hidden; height: 438px; background: var(--thumb, #000) center/cover no-repeat; }
.hero .feat-band { position: relative; background: linear-gradient(120deg, var(--red-strong) 0%, var(--red) 75%); border-radius: 0 0 8px 8px; padding: 18px 30px; overflow: hidden; min-height: 132px; display: flex; flex-direction: column; justify-content: center; box-sizing: border-box; }
.hero .feat-band::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(120% 150% at 92% -30%, rgba(255,255,255,.13), transparent 55%); }
.hero .feat-kk { position: relative; z-index: 2; font-family: var(--font-ar); font-weight: 700; font-size: 13px; color: rgba(255,255,255,.85); margin: 0 0 7px; }
.hero .feat-h { position: relative; z-index: 2; margin: 0; color: #fff; font-family: var(--font-ar); font-weight: 700; font-size: 30px; line-height: 1.45; letter-spacing: -.01em; text-wrap: pretty; }
.hero .feat-date { position: relative; z-index: 2; display: block; margin-top: 11px; text-align: right; font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; color: rgba(255,255,255,.78); direction: ltr; }
.hero .feature:hover .feat-h { text-decoration: underline; text-underline-offset: 3px; }

/* Latest rail — uniform items, hairline dividers, thumb on the inline-end */
.hero .rail-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.hero .rail-head .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--red); animation: hpulse 1.8s ease-out infinite; }
@keyframes hpulse { 0% { box-shadow: 0 0 0 0 rgba(var(--red-rgb), .55); } 100% { box-shadow: 0 0 0 9px rgba(var(--red-rgb), 0); } }
.hero .rail-head h3 { font-family: var(--font-ar); font-weight: 700; font-size: 20px; margin: 0; color: var(--tbp-text); white-space: nowrap; }
.hero .rail-item { display: grid; grid-template-columns: 1fr 86px; gap: 14px; align-items: start; padding: 15px 0; border-bottom: 1px solid var(--tbp-line); text-decoration: none; transition: transform .18s; }
.hero .rail-item:first-of-type { padding-top: 4px; }
.hero .rail-item:hover { transform: translateX(-3px); }
.hero .rail-meta { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.hero .rail-kk { font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--red); font-weight: 500; }
.hero .rail-time { font-family: var(--font-mono); font-size: 10px; color: var(--tbp-text-3); direction: ltr; }
.hero .rail-h { font-family: var(--font-ar); font-weight: 500; font-size: 15px; line-height: 1.7; margin: 0; color: var(--tbp-text-2); transition: color .15s; }
.hero .rail-item:hover .rail-h { color: var(--tbp-text); }
.hero .rail-thumb { width: 86px; height: 64px; border-radius: 5px; overflow: hidden; background: var(--paper-sunken) center/cover no-repeat; }
.hero .rail-more { display: flex; align-items: center; gap: 9px; margin-top: 16px; white-space: nowrap; font-family: var(--font-ar); font-weight: 700; font-size: 14px; color: var(--tbp-text); text-decoration: none; }
.hero .rail-more .arr { color: var(--red); font-size: 16px; transition: transform .18s; }
.hero .rail-more:hover .arr { transform: translateX(-5px); }
/* Measure-&-fit equalizer: without JS only the first 5 rail items show (the
   classic static look). With JS, .js-fit takes over and the script clips whole
   items so the rail's bottom ends flush with the .hmain column in every mode
   (static / live×1 update / live×6). Off below the 1024px single-column break. */
.hero .rail-item:nth-of-type(n+6) { display: none; }
.hero .rail.js-fit .rail-item { display: grid; }
.hero .rail.js-fit .rail-item.is-clipped { display: none; }

/* Hero BLOCK rail: count is authoritative (no app.js equalizer). Beats the
   nth-of-type clamp above so exactly rail_count items show on any page. */
.hero .rail--fixed .rail-item { display: grid; }

/* Hero layout variants (Studio-selectable). Default (lead-rail) is the base .hero. */
.hero--rail-lead .hgrid { grid-template-columns: 1fr 1.55fr; }
.hero--rail-lead .hmain { order: 2; }
.hero--rail-lead .rail  { order: 1; }
.hero--banner-row .hgrid { grid-template-columns: 1fr; gap: 20px; }
.hero--banner-row .rail  { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.hero--banner-row .rail-item { border-bottom: 0; }
@media (max-width: 720px){ .hero--banner-row .rail { grid-template-columns: 1fr; } }

/* Live screen overlays */
.hero .live-media { position: relative; border-radius: 8px 8px 0 0; overflow: hidden; }
.hero .live-screen { position: relative; aspect-ratio: 16/9; background: #000 center/cover no-repeat; }
.hero .live-screen::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to bottom, rgba(0,0,0,.5) 0%, transparent 26%); }
.hero .live-tag { position: absolute; top: 15px; left: 15px; z-index: 4; display: inline-flex; align-items: center; gap: 8px; background: var(--red); color: #fff; font-family: var(--font-ar); font-weight: 700; font-size: 13px; padding: 6px 13px; border-radius: 4px; box-shadow: 0 6px 22px rgba(var(--red-rgb), .45); }
.hero .live-tag .bd { width: 8px; height: 8px; border-radius: 50%; background: #fff; animation: livedot 1.6s ease-out infinite; }
@keyframes livedot { 0% { box-shadow: 0 0 0 0 rgba(255,255,255,.7); } 70%, 100% { box-shadow: 0 0 0 6px rgba(255,255,255,0); } }
.hero .live-brand { position: absolute; top: 14px; right: 16px; z-index: 4; direction: ltr; font-family: var(--font-display); font-weight: 800; font-style: italic; font-size: 17px; letter-spacing: -.02em; color: rgba(255,255,255,.92); text-shadow: 0 2px 8px rgba(0,0,0,.5); }
.hero .live-progress { position: absolute; bottom: 0; inset-inline: 0; height: 3px; background: var(--red); z-index: 5; }

/* Live updates timeline */
.hero .feed-head { display: flex; align-items: center; justify-content: space-between; margin: 22px 0 6px; padding-bottom: 6px; }
.hero .feed-head .ttl { display: flex; align-items: center; gap: 9px; }
.hero .feed-head .ttl .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--red); animation: hpulse 1.8s ease-out infinite; }
.hero .feed-head h3 { font-family: var(--font-ar); font-weight: 700; font-size: 20px; margin: 0; color: var(--red); white-space: nowrap; }
.hero .feed-head .count { font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; color: var(--tbp-text-3); direction: ltr; white-space: nowrap; }
/* Urdu variant of the counter: house Naskh, RTL, no mono letter-spacing. */
.hero .feed-head .count.count-ur { font-family: var(--font-urdu); font-size: 13px; letter-spacing: 0; direction: rtl; }
.hero .feed { position: relative; }
/* Hairline spine — thin + light, centred on the dot axis (centre = 9.5px), and
   softly faded at both ends so it doesn't hard-cut at the first/last marker. */
.hero .feed::before { content: ""; position: absolute; inset-inline-start: 9px; top: 18px; bottom: 22px; width: 1px; background: var(--tbp-line); -webkit-mask-image: linear-gradient(to bottom, transparent, #000 14px, #000 calc(100% - 14px), transparent); mask-image: linear-gradient(to bottom, transparent, #000 14px, #000 calc(100% - 14px), transparent); }
.hero .feed-item { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: start; padding: 16px 0; padding-inline-start: 24px; text-decoration: none; }
/* Every update is live → calm red marker centred on the spine with a slow, gentle
   breath (staggered so they don't blink in unison). */
.hero .feed-item::after { content: ""; position: absolute; inset-inline-start: 5px; top: 21px; width: 9px; height: 9px; border-radius: 50%; background: var(--red); z-index: 2; animation: feeddot 3s ease-in-out infinite; }
.hero .feed-item:nth-child(2n)::after { animation-delay: 1.5s; }
@keyframes feeddot { 0%, 100% { opacity: 1; } 50% { opacity: .58; } }
/* Newest update = the live edge: slightly larger, a soft steady halo, no breath. */
.hero .feed-item:first-child::after { width: 11px; height: 11px; inset-inline-start: 4px; box-shadow: 0 0 0 4px rgba(var(--red-rgb), .13); animation: none; }
.hero .feed-item.brk { background: rgba(var(--red-rgb), .05); border-radius: 8px; }
.hero .feed-item.brk::after { width: 11px; height: 11px; inset-inline-start: 4px; box-shadow: 0 0 0 4px rgba(var(--red-rgb), .14); animation: none; }
.hero .fi-side { display: flex; align-items: center; gap: 8px; min-width: 58px; padding-top: 1px; }
.hero .fi-time { font-family: var(--font-mono); font-weight: 700; font-size: 13px; color: var(--tbp-text); direction: ltr; }
.hero .chip { font-family: var(--font-ar); font-weight: 700; font-size: 10px; padding: 2px 9px; border-radius: 20px; white-space: nowrap; }
.hero .chip-brk { background: var(--red); color: #fff; }
.hero .chip-up { background: var(--paper-sunken); color: var(--tbp-text-2); }
.hero .fi-text { font-family: var(--font-ar); font-weight: 500; font-size: 15px; line-height: 1.85; margin: 0; color: var(--tbp-text); }
.hero .fi-text b { font-weight: 700; }
/* Media indicator — themed inline icon in place of a raw URL in a live update */
.hero .fi-media { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 6px; background: var(--paper-sunken); color: var(--tbp-text-2); vertical-align: -6px; margin-inline-start: 7px; transition: color .15s, background .15s; }
.hero .fi-media svg { width: 14px; height: 14px; }
.hero .fi-media--youtube { color: #e0000b; }
.hero .feed-item:hover .fi-media { background: rgba(var(--red-rgb), .1); }
.hero .fi-media.is-play { cursor: pointer; }
.hero .fi-media.is-play:hover { background: rgba(var(--red-rgb), .12); color: var(--red); }

/* Hero lead: native media play overlay + inline player */
.hero .tbp-play { position: absolute; inset: 0; margin: auto; width: 66px; height: 66px; border-radius: 50%; border: none; background: rgba(var(--red-rgb), .92); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 5; box-shadow: 0 8px 30px rgba(0,0,0,.35); transition: transform .15s, background .15s; }
.hero .tbp-play svg { width: 28px; height: 28px; margin-inline-start: 3px; }
.hero .tbp-play--audio svg { margin-inline-start: 0; }
.hero .tbp-play:hover { transform: scale(1.06); background: var(--red); }
.hero .is-playing .tbp-play, .hero .is-playing .live-tag, .hero .is-playing .live-brand { display: none; }
.hero .tbp-inline-player { position: absolute; inset: 0; z-index: 6; width: 100%; height: 100%; background: #000; border: 0; object-fit: cover; }
.hero .tbp-inline-player.tbp-mp-audiowrap { display: flex; align-items: flex-end; background: transparent; }
.hero .tbp-mp-audiowrap .tbp-mp-audio { width: 100%; }

/* Shared media lightbox (live-feed videos) */
.tbp-lb { position: fixed; inset: 0; z-index: 9999; display: none; align-items: center; justify-content: center; }
.tbp-lb.open { display: flex; }
.tbp-lb-bd { position: absolute; inset: 0; background: rgba(0,0,0,.82); }
.tbp-lb-box { position: relative; z-index: 1; width: min(920px, 92vw); }
.tbp-lb-x { position: absolute; top: -42px; inset-inline-end: 0; width: 34px; height: 34px; border: 0; border-radius: 8px; background: rgba(255,255,255,.14); color: #fff; font-size: 22px; line-height: 1; cursor: pointer; }
.tbp-lb-x:hover { background: rgba(255,255,255,.26); }
.tbp-lb-body { position: relative; aspect-ratio: 16/9; background: #000; border-radius: 10px; overflow: hidden; }
.tbp-lb-body .tbp-mp-iframe, .tbp-lb-body .tbp-mp-video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.tbp-lb-body .tbp-mp-audiowrap { display: flex; align-items: center; justify-content: center; height: 100%; padding: 20px; }
.tbp-lb-body .tbp-mp-audio { width: 100%; }
.hero .feed-more { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; white-space: nowrap; font-family: var(--font-ar); font-weight: 700; font-size: 14px; color: var(--red); text-decoration: none; }
.hero .feed-more .arr { transition: transform .18s; }
.hero .feed-more:hover .arr { transform: translateX(-5px); }

/* Mobile: stack the rail under the lead, shrink the photo + headline */
@media (max-width: 860px) {
  .hero .hgrid { grid-template-columns: 1fr; gap: 26px; }
  .hero .feat-media { height: 240px; }
  .hero .feat-h { font-size: 23px; }
}

/* ── Premium: refined card hover (headline tint + subtle image lift) ── */
.report-card .img, .reports-lead .img, .sec-card .feature .img, .press-lead .img { transition: filter .3s ease; }
.report-card:hover .img, .reports-lead:hover .img, .sec-card .feature:hover .img, .press-lead:hover .img { filter: brightness(1.05) saturate(1.04); }
.report-card h4, .sec-card .feature h4, .press-lead h3, .reports-lead h3 { transition: color .15s ease; }
.report-card:hover h4, .sec-card .feature:hover h4, .press-lead:hover h3, .reports-lead:hover h3 { color: var(--red-strong); }

/* ═══ I-b. DOSSIER RAIL ══════════════════════════════════════ */
/* Circular "ongoing themes" rail under the masthead. Red story-ring (system accent). */
.dossier-rail { position: relative; padding: 16px 0 0; }
.dossier-row { display: flex; justify-content: safe center; gap: 22px; overflow-x: auto; padding: 10px 2px; scrollbar-width: none; scroll-snap-type: x proximity; }
.dossier-row::-webkit-scrollbar { display: none; }
.dossier { flex: none; display: flex; flex-direction: column; align-items: center; gap: 9px; width: 76px; text-decoration: none; scroll-snap-align: start; }
.dossier .d-img { width: 64px; height: 64px; border-radius: 50%; background-size: cover; background-position: center; box-shadow: 0 0 0 2px var(--tbp-paper), 0 0 0 4px var(--red); transition: transform .22s ease, box-shadow .22s ease; display: flex; align-items: center; justify-content: center; }
/* Imageless dossier → monogram initial (see dossier-rail.php), never a blank disc. */
.dossier .d-init { font-family: var(--font-urdu); font-weight: 700; font-size: 26px; line-height: 1; color: rgba(255,255,255,.92); text-shadow: 0 1px 2px rgba(0,0,0,.25); }
.dossier .d-label { font-family: var(--font-urdu); font-weight: 700; font-size: 12.5px; line-height: 1.3; color: var(--ink-800); text-align: center; }
.dossier:hover .d-img { transform: translateY(-2px); box-shadow: 0 0 0 2px var(--tbp-paper), 0 0 0 4px var(--tbp-red); }
.dossier:hover .d-label { color: var(--red); }
.dos-arrow { position: absolute; top: 30px; z-index: 3; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--tbp-line-2); background: var(--tbp-paper); color: var(--ink-700); display: none; align-items: center; justify-content: center; cursor: pointer; }
.dos-arrow svg { width: 15px; height: 15px; }
.dos-arrow.prev { inset-inline-start: -6px; }
.dos-arrow.next { inset-inline-end: -6px; }
/* Arrows appear only when the row actually overflows (7+ dossiers), not on hover. */
.dossier-rail.has-overflow .dos-arrow { display: flex; }
html[dir="rtl"] .dos-arrow svg { transform: scaleX(-1); }
/* Overflow (7+): start-aligned scroll with a soft fade on both ends so it reads as more. */
.dossier-rail.has-overflow .dossier-row { justify-content: flex-start; -webkit-mask-image: linear-gradient(to right, transparent, #000 46px, #000 calc(100% - 46px), transparent); mask-image: linear-gradient(to right, transparent, #000 46px, #000 calc(100% - 46px), transparent); }
/* Single (1): a labelled, start-aligned "featured topic" so one circle reads intentionally. */
.dossier-rail.is-single { display: flex; align-items: center; gap: 16px; }
.dossier-rail.is-single .dossier-row { justify-content: flex-start; }
.dossier-kicker-rail { flex: 0 0 auto; font-family: var(--font-urdu); font-weight: 700; font-size: 13px; color: var(--red); }
@media (max-width: 700px) { .dossier .d-img { width: 56px; height: 56px; } .dossier { width: 68px; } .dos-arrow { display: none !important; } .dossier-row { justify-content: flex-start; } }
/* Editor-selectable card shape (Settings → Dossiers). Default = the 50% circle
   above; these override only when a non-default shape is chosen. Radius is
   size-independent, so the same rules also cover the mobile (56px) circles. */
.dossier[data-shape="rounded"] .d-img { border-radius: 14px; }
.dossier[data-shape="square"] .d-img { border-radius: 4px; }

/* ═══ II. VIDEO CAROUSEL ═════════════════════════════════════ */
/* Video rail — AJ reels style: portrait 9:16 cards, clean title BELOW the
   card (not overlaid), white circle arrows riding the rail edge. */
.videos-band { padding: 36px 0 40px; }
.video-carousel { display: grid; grid-auto-flow: column; grid-auto-columns: 158px; gap: 16px; overflow-x: auto; overflow-y: visible; padding: 4px 0 14px; scroll-snap-type: x proximity; scrollbar-width: none; }
.video-carousel::-webkit-scrollbar { display: none; }
.video-card { display: block; text-decoration: none; scroll-snap-align: start; cursor: pointer; }
.vc-media { position: relative; display: block; aspect-ratio: 9/16; border-radius: 12px; overflow: hidden; background: linear-gradient(135deg, var(--ink-700), var(--ink-950)) center/cover no-repeat; }
.vc-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 64%, rgba(0,0,0,.5) 100%); }
.vc-media .play { position: absolute; bottom: 10px; inset-inline-start: 10px; width: 34px; height: 34px; border-radius: 50%; background: rgba(0,0,0,.55); backdrop-filter: blur(4px); border: 1px solid rgba(255,255,255,.3); display: flex; align-items: center; justify-content: center; z-index: 2; transition: background .15s, border-color .15s; }
.vc-media .play svg { width: 13px; height: 13px; color: var(--white); transform: translateX(1px); }
html[dir="rtl"] .vc-media .play svg { transform: scaleX(-1) translateX(-1px); }
.video-card:hover .play { background: var(--red); border-color: var(--red); }
.vc-media .dur { position: absolute; top: 10px; inset-inline-end: 10px; z-index: 2; background: rgba(0,0,0,.65); color: var(--white); font-family: var(--font-mono); font-size: 10px; padding: 2px 6px; border-radius: 3px; }
.vc-title { font-family: var(--font-urdu); font-weight: 600; font-size: 14px; line-height: 1.7; margin: 10px 2px 0; color: var(--ink-800); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; transition: color .15s; }
.video-card:hover .vc-title { color: var(--red); }
html.dark .vc-title { color: var(--tbp-text-2); }
.carousel-wrap { position: relative; }
/* Arrows: white circles with a soft shadow, centered on the MEDIA (158px wide
   9:16 card ≈ 281px tall → center ≈ 144px incl. top padding). */
.car-arrow { position: absolute; top: 144px; transform: translateY(-50%); width: 38px; height: 38px; border-radius: 50%; background: var(--white); border: 1px solid var(--tbp-line); box-shadow: 0 2px 10px rgba(0,0,0,.14); display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 4; color: var(--ink-800); transition: all .15s; }
.car-arrow:hover { background: var(--red); border-color: var(--red); color: var(--white); }
.car-arrow svg { width: 15px; height: 15px; }
.car-arrow.prev { inset-inline-end: -14px; }
.car-arrow.next { inset-inline-start: -14px; }
html[dir="rtl"] .car-arrow svg { transform: scaleX(-1); }
html.dark .car-arrow { background: #1c1c1c; border-color: #333; color: var(--tbp-text); }
/* Video lightbox */
.tbp-vlb { position: fixed; inset: 0; z-index: 500; display: flex; align-items: center; justify-content: center; }
.tbp-vlb .vlb-back { position: absolute; inset: 0; background: rgba(0,0,0,.88); }
.tbp-vlb .vlb-box { position: relative; z-index: 2; width: min(920px, 92vw); aspect-ratio: 16/9; background: #000; border-radius: 10px; overflow: hidden; box-shadow: 0 30px 80px rgba(0,0,0,.6); }
.tbp-vlb.is-portrait .vlb-box { width: auto; height: min(86vh, 820px); aspect-ratio: 9/16; }
.tbp-vlb iframe, .tbp-vlb video { width: 100%; height: 100%; border: 0; display: block; }
.tbp-vlb .vlb-x { position: absolute; top: 10px; inset-inline-end: 10px; z-index: 3; width: 36px; height: 36px; border-radius: 50%; border: 0; background: rgba(0,0,0,.6); color: #fff; font-size: 22px; line-height: 1; cursor: pointer; }
.tbp-vlb .vlb-x:hover { background: var(--red); }
.vc-media.v1 { background: linear-gradient(135deg, #3a4452, #161c24); }

/* ═══ PHOTO ESSAY (custom "gallery" layout) ══════════════════════ */
/* Photo-forward image grid: bigger tiles than the card grid, a title caption
   overlaid on each tile, subtle hover zoom. Tiles open the image lightbox. */
.tbp-blk-gallery .secbar { margin-bottom: 14px; }
.tbp-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.tbp-gtile { position: relative; display: block; aspect-ratio: 4/3; border-radius: 12px; overflow: hidden; text-decoration: none; background: var(--paper-sunken); box-shadow: 0 1px 3px rgba(0,0,0,.10); }
.tbp-gimg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
.tbp-gtile:hover .tbp-gimg { transform: scale(1.06); }
.tbp-gtile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 42%, rgba(0,0,0,.72) 100%); }
.tbp-gcap { position: absolute; inset-inline: 0; bottom: 0; z-index: 2; display: flex; flex-direction: column; gap: 4px; padding: 14px; }
.tbp-gcap .kk { font-family: var(--font-ar); font-weight: 700; font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--red-lift); }
.tbp-gcap .t { font-family: var(--font-naskh); font-weight: 700; font-size: 16px; line-height: 1.5; color: #fff; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 860px) { .tbp-gallery { grid-template-columns: repeat(2, 1fr); gap: 10px; } }
@media (max-width: 520px) { .tbp-gallery { grid-template-columns: 1fr; } }

/* Image lightbox (photo-essay) — namespaced .tbp-glx (distinct from .tbp-vlb) */
.tbp-glx { position: fixed; inset: 0; z-index: 600; display: none; align-items: center; justify-content: center; }
.tbp-glx.open { display: flex; }
.tbp-glx .glx-back { position: absolute; inset: 0; background: rgba(0,0,0,.9); }
.tbp-glx .glx-box { position: relative; z-index: 2; margin: 0; max-width: min(1040px, 94vw); display: flex; flex-direction: column; }
.tbp-glx .glx-img { max-width: 100%; max-height: 80vh; object-fit: contain; border-radius: 10px; background: #000; box-shadow: 0 30px 80px rgba(0,0,0,.6); }
.tbp-glx .glx-cap { margin-top: 14px; text-align: center; }
.tbp-glx .glx-t { display: block; font-family: var(--font-naskh); font-weight: 700; font-size: 18px; line-height: 1.6; color: #fff; }
.tbp-glx .glx-read { display: inline-block; margin-top: 8px; font-family: var(--font-ar); font-weight: 700; font-size: 14px; color: var(--red-lift); text-decoration: none; }
.tbp-glx .glx-read:hover { color: #fff; }
.tbp-glx .glx-x { position: absolute; top: -42px; inset-inline-end: 0; z-index: 3; width: 36px; height: 36px; border-radius: 50%; border: 0; background: rgba(255,255,255,.14); color: #fff; font-size: 22px; line-height: 1; cursor: pointer; }
.tbp-glx .glx-x:hover { background: var(--red); }

/* ═══ MEDIA STORY (custom "mediastory" layout) ═══════════════════ */
/* An inline audio/video PLAYER + a clickable PLAYLIST. Player on the start side,
   playlist on the end side (desktop); stacks on mobile. RTL-safe (logical props). */
.tbp-blk-media .secbar { margin-bottom: 14px; }
.tbp-ms { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(240px, 1fr); gap: 18px; align-items: start; }
.tbp-ms-player { min-width: 0; }
.tbp-ms-stage { position: relative; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: #000; box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.tbp-ms-stage video, .tbp-ms-stage iframe, .tbp-ms-video, .tbp-ms-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; background: #000; }
.tbp-ms-video { object-fit: contain; }
.tbp-ms-audio { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; background-size: cover; background-position: center; background-color: var(--ink-800); }
.tbp-ms-audio::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,22,28,.35), rgba(20,22,28,.85)); }
.tbp-ms-badge { position: absolute; top: 50%; inset-inline-start: 50%; transform: translate(-50%, -50%); width: 60px; height: 60px; color: #fff; opacity: .92; }
.tbp-ms-badge svg { width: 100%; height: 100%; }
.tbp-ms-aud { position: relative; z-index: 2; width: calc(100% - 24px); margin: 12px; }
.tbp-ms-meta { padding: 12px 2px 0; }
.tbp-ms-meta .kk { font-family: var(--font-ar); font-weight: 700; font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--red); }
.tbp-ms-title { font-family: var(--font-naskh); font-weight: 700; font-size: 19px; line-height: 1.5; margin: 4px 0 6px; color: var(--ink-900); }
.tbp-ms-read { font-family: var(--font-ar); font-weight: 700; font-size: 13px; color: var(--red); text-decoration: none; }
.tbp-ms-read:hover { text-decoration: underline; }
.tbp-ms-list { display: flex; flex-direction: column; gap: 8px; max-height: 480px; overflow: auto; }
.tbp-ms-row { display: flex; align-items: center; gap: 10px; width: 100%; text-align: start; padding: 8px; border: 0; border-radius: 10px; background: var(--paper-sunken); cursor: pointer; font: inherit; color: inherit; }
.tbp-ms-row:hover { background: var(--paper-card); box-shadow: inset 0 0 0 1px var(--tbp-line); }
.tbp-ms-row.is-active { background: var(--paper-card); box-shadow: inset 0 0 0 1px var(--red); }
.tbp-ms-thumb { position: relative; flex: 0 0 auto; width: 64px; height: 44px; border-radius: 8px; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.tbp-ms-thumb::after { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.30); }
.tbp-ms-ic { position: relative; z-index: 2; width: 22px; height: 22px; color: #fff; display: flex; }
.tbp-ms-ic svg { width: 100%; height: 100%; }
.tbp-ms-rtitle { font-family: var(--font-naskh); font-weight: 600; font-size: 14px; line-height: 1.5; color: var(--ink-800); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 860px) { .tbp-ms { grid-template-columns: 1fr; } .tbp-ms-list { max-height: none; } }

.vc-media.v2 { background: linear-gradient(135deg, #44484f, #181a1e); }
.vc-media.v3 { background: linear-gradient(135deg, #3a4858, #151b24); }
.vc-media.v4 { background: linear-gradient(135deg, #3a4a4a, #141d1d); }
.vc-media.v5 { background: linear-gradient(135deg, #3f4258, #16182a); }
.vc-media.v6 { background: linear-gradient(135deg, #42455c, #181a2a); }
.vc-media.v7 { background: linear-gradient(135deg, #3f4852, #161c22); }
.vc-media.v8 { background: linear-gradient(135deg, #44484f, #181a1e); }

/* Aspect-ratio variants for the editable Videos block (Site Editor sidebar):
   portrait (default 9/16) · square 1/1 · wide 16/9 (YouTube). Wider cards for the
   wider ratios so thumbnails stay legible. */
.video-carousel.ar-square { grid-auto-columns: 208px; }
.video-carousel.ar-square .vc-media { aspect-ratio: 1/1; }
.video-carousel.ar-wide { grid-auto-columns: 288px; }
.video-carousel.ar-wide .vc-media { aspect-ratio: 16/9; }

/* ═══ III. TRENDING + FEATURE ════════════════════════════════ */
.trending-band { padding: 32px 0 40px; }
.tr-grid { display: flex; gap: 40px; align-items: start; }
.trending { background: transparent; border-radius: 0; padding: 0; flex: 0 0 340px; }
.trending .secbar { margin-bottom: 6px; }
.tr-item { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 18px; align-items: center; padding: 15px 0; border-bottom: 1px solid var(--tbp-line); }
.tr-item:last-child { border-bottom: 0; }
.tr-item h4 { font-family: var(--font-urdu); font-weight: 600; font-size: 15px; line-height: 1.55; margin: 0; color: var(--ink-800); transition: color .15s ease; }
.tr-item:hover h4 { color: var(--red-strong); }
.tr-item .n { font-family: var(--font-display); font-weight: 700; font-size: 38px; line-height: 1; text-align: center; color: var(--red); font-variant-numeric: tabular-nums; }
.tr-item:first-child .n { color: var(--tbp-red); }
/* Ranks use the system red in both modes (gold retired). */
html.dark .tr-item .n { color: var(--red); }
html.dark .tr-item:first-child .n { color: var(--tbp-red); }
.feature-stack { display: flex; flex-direction: column; gap: 18px; flex: 1; min-width: 0; }
.feature-hero { position: relative; border-radius: var(--r-card-lg); overflow: hidden; aspect-ratio: 21/9; background: linear-gradient(135deg, #2a3a4a, #0a1218); }
.feature-hero::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 40% at 50% 70%, rgba(150,170,200,0.15) 0%, transparent 60%), linear-gradient(180deg, transparent 40%, rgba(0,0,0,.6) 100%); }
.feature-hero .secbar { position: absolute; top: 18px; inset-inline-start: 22px; z-index: 2; margin: 0; border-top: 0; padding-top: 0; }
.feature-hero .secbar h2 { color: var(--white); font-size: 24px; }
.feature-hero .secbar h2::before { background: var(--tbp-red); }
.feature-hero .label { position: absolute; bottom: 22px; inset-inline-start: 22px; z-index: 2; color: var(--white); font-family: var(--font-urdu); font-weight: 700; font-size: 28px; letter-spacing: -0.01em; }
.feature-hero .photo-meta { position: absolute; bottom: 14px; inset-inline-end: 22px; z-index: 2; font-family: var(--font-mono); font-size: 10px; color: rgba(255,255,255,.7); letter-spacing: 0.08em; text-transform: uppercase; }
.feature-split { background: transparent; border: 1px solid var(--tbp-line); border-radius: var(--r-card); overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0; }
.feature-split .left { padding: 22px 26px; display: flex; flex-direction: column; border-inline-start: 1px solid var(--tbp-line); }
.feature-split .left .stories { display: flex; flex-direction: column; gap: 12px; }
.feature-split .left .story { display: grid; grid-template-columns: 60px 1fr; gap: 12px; padding: 10px 0; align-items: start; border-bottom: 1px solid var(--tbp-line); }
.feature-split .left .story:last-child { border-bottom: 0; padding-bottom: 0; }
.feature-split .left .story .img { width: 60px; height: 60px; border-radius: 6px; background: linear-gradient(135deg, var(--ink-300), var(--ink-600)); }
.feature-split .left .story h4 { font-family: var(--font-urdu); font-weight: 600; font-size: 13px; line-height: 1.55; margin: 0; color: var(--ink-900); }
.feature-split .left .story .meta { font-family: var(--font-mono); font-size: 9px; color: var(--ink-500); letter-spacing: 0.04em; margin-top: 4px; }
.feature-split .right { padding: 22px 26px; background: var(--paper-sunken); display: flex; flex-direction: column; justify-content: space-between; }
.feature-split .right .ttl { font-family: var(--font-urdu); font-weight: 700; font-size: 22px; line-height: 1.4; color: var(--ink-900); margin: 0 0 12px; letter-spacing: -0.01em; }
.feature-split .right p { font-family: var(--font-urdu); font-weight: 500; font-size: 14px; line-height: 1.75; color: var(--ink-700); margin: 0; }
.feature-split .right .img { margin-top: 16px; aspect-ratio: 5/3; border-radius: 8px; background: linear-gradient(135deg, var(--ink-300), var(--ink-600)); }

/* Hide either half independently (TBP Studio: Most read / Editor's Pick).
   flex .tr-grid lets the remaining column take the full width. */
.tbp-col--trending[hidden], .tbp-col--editors-pick[hidden] { display: none; }

/* ═══ VIII. FEATURED REPORTS ═════════════════════════════════ */
/* Special-report package (Asharq reference): full-bleed hero carrying the lead
   report's headline, with a white card overlapping its bottom — related rows
   on one side, a featured sub-report on the other. */
.reports-band { padding: 36px 0 44px; }
.sp-report { position: relative; }
.spr-hero { display: block; position: relative; aspect-ratio: 21/8; min-height: 340px; border-radius: 12px; overflow: hidden; background: linear-gradient(135deg, var(--ink-400), var(--ink-800)) center/cover no-repeat; text-decoration: none; }
.spr-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,.55) 78%); }
.spr-badge { position: absolute; top: 20px; inset-inline-start: 22px; z-index: 2; display: inline-flex; align-items: center; gap: 7px; background: var(--red); color: var(--white); font-family: var(--font-urdu); font-weight: 700; font-size: 12.5px; padding: 6px 14px; border-radius: 4px; }
.spr-hero h3 { position: absolute; top: auto; bottom: 150px; inset-inline-start: 22px; inset-inline-end: 22px; z-index: 2; transform: none; max-width: 90%; margin: 0; font-family: var(--font-urdu); font-weight: 700; font-size: clamp(20px, 2.2vw, 30px); line-height: 1.4; color: var(--white); text-shadow: 0 2px 14px rgba(0,0,0,.55); text-wrap: balance; transition: text-decoration-color .15s; }
.spr-hero:hover h3 { text-decoration: underline; text-underline-offset: 4px; }
.spr-card { position: relative; z-index: 3; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 48px; background: var(--paper-card); border-radius: 12px; box-shadow: 0 22px 60px rgba(0,0,0,.14); margin: -120px 44px 0; padding: 28px 34px 30px; }
html.dark .spr-card { background: #161616; box-shadow: 0 22px 60px rgba(0,0,0,.5); border: 1px solid #262626; }
/* Rows stretch to the featured column's height — fewer related reports never
   leave a void at the card's bottom. */
.spr-list { display: flex; flex-direction: column; min-width: 0; }
.spr-item { flex: 1 1 auto; display: grid; grid-template-columns: minmax(0, 1fr) 118px; gap: 14px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--tbp-line); text-decoration: none; }
.spr-item:last-child { border-bottom: 0; }
.spr-item .t { font-family: var(--font-urdu); font-weight: 600; font-size: 14px; line-height: 1.7; color: var(--ink-800); transition: color .15s; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.spr-item:hover .t { color: var(--red); }
.spr-item .thumb { width: 118px; height: 82px; border-radius: 6px; overflow: hidden; background: var(--paper-sunken) center/cover no-repeat; }
.spr-feat { display: flex; flex-direction: column; min-width: 0; text-decoration: none; }
/* Image grows to fill the column so the left panel isn't left half-empty. */
.spr-feat .img { display: block; flex: 1 1 auto; min-height: 240px; border-radius: 8px; overflow: hidden; background: var(--paper-sunken) center/cover no-repeat; margin-bottom: 14px; }
.spr-feat .by { display: block; font-family: var(--font-urdu); font-size: 12px; color: var(--ink-400); margin-bottom: 6px; }
.spr-feat h4 { font-family: var(--font-urdu); font-weight: 700; font-size: 19px; line-height: 1.65; margin: 0 0 8px; color: var(--ink-900); transition: color .15s; }
.spr-feat:hover h4 { color: var(--red); }
.spr-feat p { font-family: var(--font-urdu); font-weight: 400; font-size: 13.5px; line-height: 1.9; color: var(--ink-600); margin: 0; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
html.dark .spr-item .t, html.dark .spr-feat h4 { color: var(--tbp-text); }
@media (max-width: 900px) {
  .spr-hero { aspect-ratio: auto; height: 300px; }
  .spr-hero h3 { max-width: 86%; top: auto; bottom: 130px; transform: none; }
  .spr-card { grid-template-columns: 1fr; gap: 26px; margin: -90px 14px 0; }
}

/* ═══ IX. INTERVIEWS ═════════════════════════════════════════ */
.interviews-band { padding: 40px 0 44px; }
.iv-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.iv-card { position: relative; border-radius: var(--r-card-lg); overflow: hidden; aspect-ratio: 3/4; cursor: pointer; background: linear-gradient(135deg, #42454c, #15171c); display: flex; flex-direction: column; justify-content: flex-end; }
.iv-card.c2 { background: linear-gradient(135deg, #3f4a4a, #101a1a); }
.iv-card.c3 { background: linear-gradient(135deg, #4a4253, #161220); }
.iv-card::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(0,0,0,.05) 28%, rgba(0,0,0,.5) 58%, rgba(0,0,0,.92) 100%); }
.iv-card .tag { position: absolute; top: 16px; inset-inline-start: 16px; z-index: 2; background: var(--tbp-red); color: var(--white); font-family: var(--font-urdu); font-weight: 700; font-size: 11px; padding: 4px 11px; border-radius: 4px; }
.iv-card .photo-meta { position: absolute; top: 18px; inset-inline-end: 16px; z-index: 2; font-family: var(--font-mono); font-size: 9px; color: rgba(255,255,255,.6); letter-spacing: 0.08em; text-transform: uppercase; }
.iv-card .content { position: relative; z-index: 2; padding: 22px 22px 24px; color: var(--white); }
.iv-card .quote-mark { font-family: var(--font-display); font-weight: 700; font-size: 56px; line-height: 0.4; color: var(--tbp-red); display: block; height: 24px; }
.iv-card .quote { font-family: var(--font-urdu); font-weight: 700; font-size: 19px; line-height: 1.6; margin: 0 0 16px; color: var(--white); text-shadow: 0 1px 3px rgba(0,0,0,.5); }
.iv-card .who { display: flex; align-items: center; gap: 11px; }
.iv-card .who .av { width: 38px; height: 38px; border-radius: 50%; flex: none; background: linear-gradient(135deg, var(--ink-300), var(--ink-600)); border: 2px solid rgba(255,255,255,.35); }
.iv-card .who .name { font-family: var(--font-urdu); font-weight: 700; font-size: 14px; color: var(--white); line-height: 1.3; }
.iv-card .who .role { font-family: var(--font-mono); font-size: 9px; color: rgba(255,255,255,.7); letter-spacing: 0.06em; text-transform: uppercase; margin-top: 3px; }
.iv-card .more { margin-top: 14px; display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-urdu); font-weight: 600; font-size: 13px; color: var(--white); opacity: 0.92; }

/* ═══ X. EDITORIALS ══════════════════════════════════════════ */
/* Editorials — the paper's own voice: broadsheet opinion treatment. Thick ink
   rule over a quiet card, Nastaliq display headline, restrained sign-off; the
   list beside it is whole-row links with large quiet serif numerals. */
.editorial-band { padding: 40px 0 48px; }
/* Columns stretch together: the list's rows share the leftover height so its
   last row ends flush with the lead card's bottom — no dead corner. */
.ed-shell { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 48px; align-items: stretch; }
.ed-lead { background: var(--paper-sunken); border-top: 3px solid var(--ink-900); border-radius: 0 0 var(--r-card) var(--r-card); padding: 30px 36px 28px; position: relative; }
html.dark .ed-lead { border-top-color: var(--tbp-text); }
.ed-lead .stamp { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 10px; color: var(--tbp-text-3); letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 16px; }
.ed-lead .stamp b { color: var(--tbp-red); font-weight: 600; }
/* Featured image bleeds to the card edges, under the ink rule. */
.ed-img { display: block; margin: -30px -36px 24px; height: 280px; background: var(--paper-card) center/cover no-repeat; }
.ed-lead-link { text-decoration: none; color: inherit; }
/* House headline voice: bold upright Naskh (Nastaliq display retired here —
   it fought the sitewide headline system). */
.ed-lead h3 { font-family: var(--font-urdu); font-weight: 700; font-size: 26px; line-height: 1.6; margin: 0 0 14px; color: var(--tbp-text); letter-spacing: -0.01em; transition: color .15s; }
.ed-lead-link:hover h3 { color: var(--red); }
.ed-lead p { font-family: var(--font-urdu); font-weight: 500; font-size: 16px; line-height: 1.95; color: var(--tbp-text-2); margin: 0 0 14px; }
.ed-lead p:last-of-type { margin-bottom: 0; }
.ed-lead .sign { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--tbp-line); font-family: var(--font-urdu); font-weight: 700; font-size: 14px; color: var(--tbp-text); display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.ed-lead .sign span { font-family: var(--font-mono); font-weight: 400; font-size: 9.5px; color: var(--tbp-text-3); letter-spacing: 0.12em; }
.ed-list { display: flex; flex-direction: column; }
.ed-list .secbar { margin-bottom: 6px; flex: none; }
/* Thumb rides the reading edge (inline-start) with the text right beside it —
   short titles leave their slack at the row's END, not as a hole in the middle. */
.ed-item { flex: 1 1 auto; display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: 16px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--tbp-line); text-decoration: none; }
.ed-item:last-child { border-bottom: 0; }
.ed-thumb { width: 128px; height: 88px; border-radius: 6px; overflow: hidden; background: var(--paper-sunken) center/cover no-repeat; }
.ed-txt { min-width: 0; }
.ed-item h4 { font-family: var(--font-urdu); font-weight: 700; font-size: 16.5px; line-height: 1.7; margin: 0 0 6px; color: var(--tbp-text); letter-spacing: -0.005em; transition: color .15s; }
.ed-item:hover h4 { color: var(--red); }
.ed-item .meta { font-family: var(--font-mono); font-size: 10px; color: var(--tbp-text-3); letter-spacing: 0.04em; }


/* ═══ IV. INVESTIGATION (dark band) ══════════════════════════ */
.invest { background: var(--ink-950); color: var(--white); padding: 56px 0; margin: 8px 0; position: relative; }
.invest::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--red-lift); }
.invest-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 48px; align-items: center; }
.invest .img { aspect-ratio: 4/3; background: linear-gradient(135deg, var(--ink-700), var(--ink-950)); border-radius: var(--r-card-lg); position: relative; overflow: hidden; }
.invest .img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(0,0,0,.5) 100%); }
.invest .img .meta { position: absolute; top: 14px; inset-inline-start: 14px; z-index: 2; font-family: var(--font-mono); font-size: 10px; color: rgba(255,255,255,.85); background: rgba(0,0,0,.55); padding: 4px 8px; border-radius: 3px; letter-spacing: 0.08em; text-transform: uppercase; }
.invest .kick { font-family: var(--font-mono); font-size: 11px; color: var(--red-lift); letter-spacing: 0.18em; text-transform: uppercase; margin: 0 0 16px; }
.invest h2 { font-family: var(--font-urdu); font-weight: 700; font-size: 36px; line-height: 1.35; margin: 0 0 18px; color: var(--white); letter-spacing: -0.015em; }
.invest .deck { font-family: var(--font-urdu); font-weight: 500; font-size: 16px; line-height: 1.75; color: var(--ink-300); margin: 0 0 22px; }
.invest-stats { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid #1f1f1f; border-bottom: 1px solid #1f1f1f; padding: 18px 0; margin-bottom: 22px; }
.invest-stats .s { border-inline-end: 1px solid #1f1f1f; padding-inline-end: 12px; }
.invest-stats .s:last-child { border-inline-end: 0; }
.invest-stats .s .n { font-family: var(--font-display); font-weight: 700; font-size: 30px; color: var(--white); line-height: 1; font-variant-numeric: tabular-nums; }
.invest-stats .s .l { font-family: var(--font-urdu); font-size: 12px; color: var(--ink-400); margin-top: 4px; }
.invest .reporters { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; font-family: var(--font-mono); font-size: 10px; color: var(--ink-400); letter-spacing: 0.06em; text-transform: uppercase; }
.invest .reporters .avs { display: flex; }
.invest .reporters .av { width: 26px; height: 26px; border-radius: 50%; background: linear-gradient(135deg, #444, #1a1a1a); border: 2px solid var(--ink-950); margin-inline-start: -6px; }
.invest .reporters .av:first-child { margin-inline-start: 0; }
.invest .cta { display: inline-flex; align-items: center; gap: 8px; background: var(--red); color: var(--white); padding: 13px 22px; border-radius: var(--btn-radius, var(--r-pill)); font-family: var(--font-urdu); font-weight: 700; font-size: 14px; }

/* ═══ V. OPINION + NEWSLETTER ════════════════════════════════ */
/* Opinion (مقالاتِ رائے) — the busiest section after news: a featured op-ed
   lead, then an author-forward two-column grid. */
.opinion-band { padding: 40px 0; }
.op-shell { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 40px; align-items: start; }
.op-lead { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 26px; align-items: center; padding-bottom: 24px; margin-bottom: 10px; border-bottom: 1px solid var(--tbp-line); text-decoration: none; }
.op-lead .img { display: block; aspect-ratio: 16/10; border-radius: 8px; overflow: hidden; background: var(--paper-sunken) center/cover no-repeat; }
.op-lead .body { min-width: 0; }
.op-lead .kk { display: inline-block; font-family: var(--font-urdu); font-weight: 700; font-size: 12px; color: var(--red); margin-bottom: 10px; }
.op-lead h3 { font-family: var(--font-urdu); font-weight: 700; font-size: 23px; line-height: 1.65; margin: 0 0 10px; color: var(--ink-900); transition: color .15s; }
.op-lead:hover h3 { color: var(--red); }
.op-lead p { font-family: var(--font-urdu); font-weight: 400; font-size: 14.5px; line-height: 1.9; color: var(--ink-600); margin: 0 0 12px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.op-lead .by { display: flex; align-items: baseline; gap: 10px; font-family: var(--font-urdu); font-size: 13px; }
.op-lead .by b { font-weight: 700; color: var(--ink-800); }
.op-lead .by .d { font-family: var(--font-mono); font-size: 10px; color: var(--ink-400); }
html.dark .op-lead h3 { color: var(--tbp-text); }
html.dark .op-lead .by b { color: var(--tbp-text-2); }
.opinion-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 40px; }
.op-card { display: grid; grid-template-columns: minmax(0, 1fr) 96px; gap: 14px; padding: 16px 0; align-items: start; border-bottom: 1px solid var(--tbp-line); text-decoration: none; }
.op-thumb { width: 96px; height: 70px; border-radius: 6px; overflow: hidden; background: var(--paper-sunken) center/cover no-repeat; }
.op-txt { min-width: 0; }
.op-card h4 { font-family: var(--font-urdu); font-weight: 700; font-size: 15.5px; line-height: 1.65; margin: 0 0 6px; color: var(--ink-900); letter-spacing: -0.005em; transition: color .15s; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.op-card:hover h4 { color: var(--red); }
.op-meta { display: flex; align-items: baseline; gap: 10px; }
.op-card .author { font-family: var(--font-urdu); font-weight: 600; font-size: 12.5px; color: var(--red); }
.op-meta .d { font-family: var(--font-mono); font-size: 10px; color: var(--ink-400); }
html.dark .op-card h4 { color: var(--tbp-text); }
.newsletter-card { background: var(--paper-sunken); border: 1px solid var(--tbp-line); border-radius: var(--r-card); padding: 24px 22px 22px; text-align: center; position: relative; }
.newsletter-card::before { content: ""; display: block; width: 60px; height: 3px; background: var(--tbp-red); margin: 0 auto 14px; border-radius: 2px; }
.newsletter-card .ttl { font-family: var(--font-urdu); font-weight: 600; font-size: 15px; color: var(--ink-700); margin-bottom: 8px; }
.newsletter-card h3 { font-family: var(--font-urdu); font-weight: 700; font-size: 22px; line-height: 1.4; color: var(--ink-900); margin: 0 0 14px; letter-spacing: -0.01em; }
.newsletter-card p { font-family: var(--font-urdu); font-weight: 500; font-size: 13px; line-height: 1.7; color: var(--ink-600); margin: 0 0 18px; }
.newsletter-card input { width: 100%; padding: 12px 16px; background: var(--white); border: 1px solid var(--tbp-line-2); border-radius: 999px; font-family: var(--font-urdu); font-size: 14px; color: var(--ink-800); margin-bottom: 10px; box-sizing: border-box; }
.newsletter-card button { width: 100%; padding: 12px 16px; background: var(--ink-950); color: var(--white); border: 0; border-radius: var(--btn-radius, 999px); font-family: var(--font-urdu); font-weight: 700; font-size: 14px; cursor: pointer; }
.newsletter-card button:hover { background: var(--tbp-red); }
.newsletter-card .privacy { margin-top: 12px; font-family: var(--font-urdu); font-size: 11px; color: var(--ink-500); line-height: 1.6; }
.newsletter-card .privacy a { color: var(--tbp-red); }
html.dark .newsletter-card { background: var(--paper-sunken); }
html.dark .newsletter-card h3, html.dark .newsletter-card .ttl { color: var(--tbp-text); }
/* Standalone widget zone (e.g. homepage bottom strip) — center the card(s) */
.tbp-wzone { margin: 8px auto 40px; }
.tbp-wzone-inner { max-width: 440px; margin: 0 auto; display: flex; flex-direction: column; gap: 20px; }
/* WhatsApp-join widget (a swap-in type for the newsletter card slot) */
.tbp-widget--whatsapp .wa-join { display: inline-flex; align-items: center; justify-content: center; gap: 9px; width: 100%; padding: 12px 16px; box-sizing: border-box; background: #1eb15a; color: #fff; border-radius: var(--btn-radius, 999px); font-family: var(--font-urdu); font-weight: 700; font-size: 14px; text-decoration: none; transition: background .15s; }
.tbp-widget--whatsapp .wa-join:hover { background: #17924a; }
.tbp-widget--whatsapp .wa-join svg { flex: 0 0 auto; }
html.dark .newsletter-card p { color: var(--tbp-text-2); }
html.dark .newsletter-card input { background: #0a0a0a; border-color: var(--tbp-line-2); color: var(--tbp-text); }
/* Button base is background:var(--ink-950) — inverts to #fff in dark mode → white
   text on a white button (invisible). Use the brand red CTA on dark instead. */
html.dark .newsletter-card button { background: var(--red); color: #fff; }
html.dark .newsletter-card button:hover { background: var(--red-lift); }

/* ═══ VI. PRESS / DESK + AD ══════════════════════════════════ */
.press-band { padding: 36px 0 44px; }
.press-shell { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 32px; }
.press-main { background: transparent; border-radius: 0; padding: 0; }
.press-main .secbar { margin-bottom: 18px; }
.press-lead { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 22px; align-items: stretch; padding-bottom: 18px; border-bottom: 1px solid var(--tbp-line); margin-bottom: 4px; }
.press-lead .img { aspect-ratio: 16/10; border-radius: var(--r-card); background: linear-gradient(135deg, var(--ink-400), var(--ink-700)); position: relative; }
.press-lead .img .photo-meta { position: absolute; bottom: 10px; inset-inline-start: 10px; font-family: var(--font-mono); font-size: 9px; color: rgba(255,255,255,.85); background: rgba(0,0,0,.5); padding: 3px 7px; border-radius: 3px; }
.press-lead .body { display: flex; flex-direction: column; justify-content: center; gap: 12px; }
.press-lead h3 { font-family: var(--font-urdu); font-weight: 700; font-size: 24px; line-height: 1.4; margin: 0; color: var(--ink-900); letter-spacing: -0.01em; }
.press-lead p { font-family: var(--font-urdu); font-weight: 500; font-size: 14px; line-height: 1.75; color: var(--ink-600); margin: 0; }
.press-lead .meta { display: flex; gap: 10px; align-items: center; padding-top: 6px; font-family: var(--font-mono); font-size: 10px; color: var(--ink-500); letter-spacing: 0.04em; }
.press-lead .meta .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--ink-300); }
.press-list .item { display: grid; grid-template-columns: 100px 1fr; gap: 18px; padding: 14px 0; align-items: center; border-bottom: 1px solid var(--tbp-line); }
.press-list .item:last-child { border-bottom: 0; }
.press-list .item .img { width: 100px; height: 70px; border-radius: 8px; background: linear-gradient(135deg, var(--ink-300), var(--ink-600)); }
.press-list .item h4 { font-family: var(--font-urdu); font-weight: 700; font-size: 15px; line-height: 1.55; margin: 0; color: var(--ink-900); letter-spacing: -0.005em; }
.press-list .item .meta { font-family: var(--font-mono); font-size: 10px; color: var(--ink-500); letter-spacing: 0.04em; margin-top: 4px; }
.press-main .more-link { display: inline-block; margin-top: 16px; padding: 10px 0; font-family: var(--font-urdu); font-weight: 600; font-size: 14px; color: var(--tbp-red); }
.ad-slot { background: var(--white); border: 1px solid var(--tbp-line); border-radius: var(--r-card); padding: 12px; text-align: center; }
.ad-slot .lbl { font-family: var(--font-urdu); font-size: 11px; color: var(--ink-500); margin-bottom: 8px; }
.ad-slot .placeholder { background: repeating-linear-gradient(45deg, var(--ink-100) 0, var(--ink-100) 8px, var(--ink-50) 8px, var(--ink-50) 16px); border-radius: 6px; aspect-ratio: 1/1; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 6px; font-family: var(--font-mono); font-size: 11px; color: var(--ink-500); letter-spacing: 0.08em; text-transform: uppercase; }
.ad-slot .placeholder b { color: var(--ink-700); }
html.dark .ad-slot { background: var(--tbp-card); }
html.dark .ad-slot .placeholder { background: repeating-linear-gradient(45deg, #1a1a1a 0, #1a1a1a 8px, #222 8px, #222 16px); color: var(--tbp-text-3); }
.follow-card { margin-top: 18px; background: transparent; border: 1px solid var(--tbp-line); border-radius: var(--r-card); padding: 16px; }
.follow-card .img { aspect-ratio: 16/10; border-radius: 8px; background: linear-gradient(135deg, var(--ink-200), var(--ink-500)); margin-bottom: 12px; }
.follow-card h4 { font-family: var(--font-urdu); font-weight: 700; font-size: 17px; line-height: 1.45; color: var(--ink-900); margin: 0 0 8px; letter-spacing: -0.005em; }
.follow-card p { font-family: var(--font-urdu); font-weight: 500; font-size: 13px; line-height: 1.7; color: var(--ink-600); margin: 0; }

/* ═══ VII. SECTIONS ROW ══════════════════════════════════════ */
/* No band-level top rule — each column's secbar already draws one; the doubled
   hairlines read as an empty dead strip (worst in dark mode). */
.sections-band { padding: 10px 0 44px; }
.sec-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; }
.sec-card { background: transparent; border-radius: 0; padding: 0; display: flex; flex-direction: column; }
/* Header: red bar + title, "تمام →" on the far side — no full-width rule. */
.sec-card .secbar { margin-bottom: 16px; border-top: 0; padding-top: 0; gap: 8px; }
.sec-card .secbar h2 { display: inline-flex; align-items: center; gap: 9px; }
.sec-card .secbar h2::before { display: inline-block; content: ""; width: 4px; height: 19px; border-radius: 1px; background: var(--tbp-red); flex: none; }
.sec-card .feature .img { aspect-ratio: 16/10; border-radius: var(--r-card); background: linear-gradient(135deg, var(--ink-200), var(--ink-500)); margin-bottom: 14px; }
.sec-card .feature .kk { font-family: var(--font-urdu); font-weight: 700; font-size: 12px; color: var(--tbp-red); margin-bottom: 6px; }
.sec-card .feature h4 { font-family: var(--font-urdu); font-weight: 700; font-size: 17px; line-height: 1.45; margin: 0 0 12px; color: var(--ink-900); letter-spacing: -0.005em; }
/* Lists stretch: a desk with fewer stories spreads its rows so all four
   columns in a row end flush — no void under a short desk. */
.sec-card .list { flex: 1; display: flex; flex-direction: column; }
.sec-card .list .li { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; padding: 11px 0; border-top: 1px solid var(--tbp-line); }
.sec-card .list .li:first-child { border-top: 0; }
.sec-card .list .li h5 { font-family: var(--font-urdu); font-weight: 600; font-size: 14px; line-height: 1.55; margin: 0; color: var(--ink-800); }
.sec-card .list .li .meta { display: flex; align-items: baseline; gap: 6px; margin-top: 5px; color: var(--ink-500); }
.sec-card .list .li .meta .c { font-family: var(--font-urdu); font-weight: 600; font-size: 11.5px; color: var(--ink-600); }
.sec-card .list .li .meta .dot { color: var(--ink-400); }
.sec-card .list .li .meta .t { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.04em; }

/* ═══ FRONT-PAGE TWEAKS (data attrs on <html>) ═══════════════ */
/* 1 · accent recolor */
html[data-accent="indigo"] { --tbp-red:#2840c0; --tbp-red-d:#1f37a8; --tbp-blue:#6675e0; }
html[data-accent="pine"]   { --tbp-red:#0e7a4f; --tbp-red-d:#0a5e3c; --tbp-blue:#3f9b6f; }
html[data-accent="ink"]    { --tbp-red:#2f2f2f; --tbp-red-d:#101010; --tbp-blue:#7a7a7a; }
html.dark[data-accent="ink"] { --tbp-red:#c8c8c8; --tbp-red-d:#9a9a9a; --tbp-blue:#7a7a7a; }
/* 2 · architecture: portal → broadsheet */
html[data-arch="broadsheet"] { --r-card:0; --r-card-lg:0; --r-pill:0; --tbp-paper:#f1ede2; --tbp-card:#fbf9f3; --tbp-card-2:#f3efe4; }
html.dark[data-arch="broadsheet"] { --tbp-paper:#0a0a0a; --tbp-card:#141414; --tbp-card-2:#161616; }
html[data-arch="broadsheet"] .mast-logo-mark { border-radius: 0; }
html[data-arch="broadsheet"] .trending,
html[data-arch="broadsheet"] .feature-split,
html[data-arch="broadsheet"] .feature-hero,
html[data-arch="broadsheet"] .press-main,
html[data-arch="broadsheet"] .sec-card,
html[data-arch="broadsheet"] .follow-card,
html[data-arch="broadsheet"] .newsletter-card,
html[data-arch="broadsheet"] .reports-lead,
html[data-arch="broadsheet"] .report-card,
html[data-arch="broadsheet"] .iv-card,
html[data-arch="broadsheet"] .ed-lead,
html[data-arch="broadsheet"] .vc-media { border: 1px solid var(--tbp-line-2); }
html[data-arch="broadsheet"] .secbar { border-top: 2px solid var(--ink-900); padding-top: 10px; }
html[data-arch="broadsheet"] .secbar h2::before { display: none; }
html[data-arch="broadsheet"] .feature-hero .secbar { border-top: 0; padding-top: 0; }
html[data-arch="broadsheet"] .sec-grid { gap: 16px; }
html[data-arch="broadsheet"] .newsletter-card input,
html[data-arch="broadsheet"] .newsletter-card button { border-radius: 0; }
/* 3 · headline voice: modern → nastaliq */
html[data-voice="nastaliq"] .secbar h2,
html[data-voice="nastaliq"] .feature-hero .label,
html[data-voice="nastaliq"] .feature-split .right .ttl,
html[data-voice="nastaliq"] .invest h2,
html[data-voice="nastaliq"] .op-card h4,
html[data-voice="nastaliq"] .press-lead h3,
html[data-voice="nastaliq"] .sec-card .feature h4,
html[data-voice="nastaliq"] .follow-card h4,
html[data-voice="nastaliq"] .reports-lead h3,
html[data-voice="nastaliq"] .report-card h4,
html[data-voice="nastaliq"] .iv-card .quote,
html[data-voice="nastaliq"] .ed-item h4,
html[data-voice="nastaliq"] .newsletter-card h3 { font-family: var(--font-urdu-disp); font-weight: 400; line-height: 2.0; letter-spacing: 0; }
html[data-voice="nastaliq"] .invest h2 { line-height: 1.85; }

/* ═══ Responsive ═════════════════════════════════════════════ */
@media (max-width: 900px) {
  /* .tr-grid is FLEX (not grid): stack the columns, and clear .trending's
     340px flex-basis — in column direction it would become a forced HEIGHT
     while the feature stack collapsed to 0 width (invisible on phones). */
  .tr-grid { flex-direction: column; align-items: stretch; }
  .trending { flex: 0 0 auto; }
  .invest-grid { grid-template-columns: 1fr; }
  .invest .img { display: none; }
  .op-shell { grid-template-columns: 1fr; }
  .press-shell { grid-template-columns: 1fr; }
  .press-shell aside { display: none; }
  .sec-grid { grid-template-columns: 1fr; }
  .opinion-grid { grid-template-columns: 1fr; }
  .feature-split { grid-template-columns: 1fr; }
  .feature-split .left { border-inline-start: 0; border-top: 1px solid var(--tbp-line); }
  .reports-lead { grid-template-columns: 1fr; }
  .reports-lead .img { min-height: 220px; }
  .reports-row, .iv-grid { grid-template-columns: 1fr; }
  .ed-shell { grid-template-columns: 1fr; gap: 28px; }
}
@media (max-width: 640px) {
  .invest h2 { font-size: 26px; }
  .invest-stats { grid-template-columns: repeat(2, 1fr); }
  .press-lead { grid-template-columns: 1fr; }
  .video-carousel { grid-auto-columns: 132px; }
  .car-arrow { top: 121px; }
}
/* Phones: the heavy card grids become swipe rails (scroll-snap) instead of
   tall stacks — same breadth, a fraction of the vertical scroll. RTL-native
   (logical overflow direction). Must sit AFTER the 900px 1fr rules above. */
@media (max-width: 700px) {
  .reports-row, .iv-grid { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 80%; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding-bottom: 6px; scrollbar-width: thin; }
  .reports-row > *, .iv-grid > * { scroll-snap-align: start; }
}

/* ═══ XII. STORY READER — rebuilt 2026-06-26; styles moved to
   assets/story-reader.css. The old .sr-* rules were removed: they collided
   with the new component (e.g. old .sr-cat{bottom:14px} + new .sr-cat{top:24px}
   stretched the category pill to the full card height). ═══ */

/* ── Lens rail (homepage photojournalism section) ─────────────────────── */
.lens-band { margin: 8px 0; }
.lens-rail { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; scrollbar-width: none; }
.lens-rail::-webkit-scrollbar { display: none; }
.lens-rcard { flex: 0 0 264px; scroll-snap-align: start; text-decoration: none; color: inherit; }
.lr-media { position: relative; display: block; aspect-ratio: 4 / 3; border-radius: 10px; background: var(--ink-800) center / cover no-repeat; overflow: hidden; }
.lr-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.02), rgba(0,0,0,.4)); }
.lr-cam { position: absolute; inset-block-start: 10px; inset-inline-start: 10px; z-index: 2; width: 28px; height: 28px; display: grid; place-items: center; color: #fff; background: rgba(0,0,0,.42); border-radius: 7px; }
.lr-cam svg { width: 16px; height: 16px; }
.lr-count { position: absolute; inset-block-end: 10px; inset-inline-end: 10px; z-index: 2; background: var(--red); color: #fff; font-family: var(--font-mono); font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; }
.lr-title { font-family: var(--font-urdu); font-weight: 700; font-size: 15px; line-height: 1.5; color: var(--ink-900); margin: 10px 0 0; transition: color .15s; }
.lens-rcard:hover .lr-title { color: var(--red); }
html.dark .lr-title { color: var(--tbp-text); }
html.dark .lr-media { background-color: var(--tbp-card); }