/* ====== Alssaa News — Article & inner pages ====== */

/* ARTICLE HEADER */
/* The page is two surfaces: head (crumbs, title, meta) on white, then a cream
   band holding the lead image and the body. The lead image straddles the edge
   so the eye reads a colour change, not a rule — and when the next article is
   appended, the same white/cream rhythm is the only seam between them. */
.article-top,
.article-band {
  --article-inset: 40px;
  /* start-edge inset that aligns the lead image with the body text column
     below (share-rail 64px + gap 24px + no band pad) */
  --hero-gutter: 88px;
  /* shared widths for the reading column / lead image and the most-read rail */
  --read-w: 900px;
  --side-w: 280px;
  /* how far the lead image reaches up into the white head */
  --seam-overlap: 96px;
}
.article-top {
  background: white;
  padding: 28px 0 calc(var(--seam-overlap) + 16px);
}
.article-band {
  background: var(--surface-2);
  /* own formatting context so the lead's negative margin doesn't collapse through */
  display: flow-root;
}
.article-top .crumbs {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 18px;
}

.article-top .crumbs a {
  color: var(--ink);
  text-decoration: none;
}
.article-top .crumbs a:hover { color: var(--primary); }
/* current category (last crumb) — the most prominent step */
.article-top .crumbs a:last-of-type {
  color: var(--primary);
  font-weight: 700;
}
.article-top .crumbs .sep { margin: 0 8px; color: var(--muted); opacity: .6; }
/* Lead block: the hero image + byline, right-anchored to align with the body text.
   Its width tracks the reading column exactly — the min() mirrors how the body
   grid sizes its middle track (fills to --read-w, shrinks with the viewport). */
.article-lead {
  margin-top: calc(-1 * var(--seam-overlap));
  margin-inline-start: var(--hero-gutter);
  width: min(var(--read-w), calc(100% - var(--hero-gutter) - 24px - var(--side-w)));
  max-width: 100%;
}
/* Lead image — natural 3:2 frame (headline no longer overlaid) */
.article-hero {
  position: relative;
  margin: 0;
  aspect-ratio: 16 / 9;
  border-radius: 16px;
  overflow: hidden;
  /* soft grounding shadow so the image settles into the page */
  box-shadow: 0 16px 36px -26px rgba(7, 10, 28, .45);
}
.article-hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.article-hero.is-placeholder {
  background: linear-gradient(115deg, var(--navy-900) 0%, var(--navy) 55%, var(--navy-700) 100%);
}
/* Header block: category kicker + title + meta, all stacked ABOVE the lead
   image (asharq-style) with generous space before the image below. */
.article-head {
  margin-bottom: 26px;
}
/* Category kicker — colored tag, sits inline in the meta row below the title */
.article-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 800;
  color: var(--primary);
  text-decoration: none;
  transition: color .15s;
}
/* diamond marker — same identity as the homepage section headers */
.article-kicker::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 3px;
  transform: rotate(45deg);
  background: currentColor;
  flex-shrink: 0;
}
.article-kicker:hover { color: var(--navy); }
/* Meta block — two stacked rows: (1) tag + share button, (2) author + date */
.article-headmeta {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 16px;
  font-size: 14px;
  color: var(--muted);
}
.article-headmeta__row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.article-headmeta__row--top {
  gap: 14px;
}
.article-headmeta__row--info > * + *::before {
  content: "";
  display: inline-block;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--line-2);
  margin: 0 12px;
  vertical-align: middle;
}
.article-headmeta__author { font-weight: 700; color: var(--ink); }
.article-headmeta__time,
.article-headmeta__upd { font-variant-numeric: tabular-nums; }
/* Header share button — pinned to the end (left) edge of the meta row */
.article-share {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all .15s;
}
.article-share svg { width: 16px; height: 16px; }
.article-share:hover { border-color: var(--primary); color: var(--primary); transform: translateY(-1px); }
.article-share.copied { border-color: #16a06a; color: #16a06a; }

/* read-bar: source (right) + font-size controls (left), atop the body column */
.article-col { min-width: 0; }
/* shared measure box: read-bar and body share one width so the font-size
   controls (pushed to the end edge) line up with the end of the text, and the
   source label lines up with the start of the text — at every viewport */
.article-measure { max-width: none; }
/* let the body fill the shared measure box (its own 68ch cap is for templates
   without the wrapper, e.g. article/show) so text fills the column edge-to-edge */
.article-measure .article-body { max-width: none; }
.article-readbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 18px;
}
.article-readbar__src {
  /* size/weight matched to اخترنا لك via shared .article-label rule below */
  color: var(--ink);
}
.fontsize {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-inline-start: auto;
}
.fontsize__lbl {
  font-size: 13px;
  color: var(--muted);
}
.fontsize__btn {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all .15s;
}
.fontsize__btn:hover { border-color: var(--primary); color: var(--primary); }
/* Headline banner (dark on white) — spans the full content width */
.article-top h1,
.article-title {
  font-family: var(--f-display);
  font-size: calc(40px * var(--density));
  line-height: 1.25;
  font-weight: 700;
  margin: 0 0 4px;
  max-width: none;
  text-wrap: balance;
  color: var(--ink);
}
.article-top .dek {
  font-size: calc(17px * var(--density));
  line-height: 1.6;
  color: var(--muted);
  max-width: 78ch;
  margin: 8px 0 0;
}

.article-top .article-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 13px;
  color: var(--muted);
}
.article-top .article-meta li + li::before {
  content: "";
  display: inline-block;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--line-2);
  margin: 0 10px;
  vertical-align: middle;
}
.article-top .article-meta time { font-variant-numeric: tabular-nums; }

.article-body-wrap {
  /* re-declared here because this block lives in <main>, not inside .article-top */
  --read-w: 900px;
  --side-w: 280px;
  display: grid;
  /* middle track fills to --read-w then shrinks; the lead image mirrors it */
  grid-template-columns: 64px minmax(0, var(--read-w)) var(--side-w);
  gap: 24px;
  /* pack the column block to the start (right) edge; leftover space pools on
     the end (left) so the widened image/body align with the container edge */
  justify-content: start;
  padding: 14px 0 40px;
  padding-inline-start: 0;
}
/* Rail of share buttons */
.share-rail {
  position: sticky; top: 160px;
  display: flex; flex-direction: column; gap: 10px;
  height: fit-content;
  align-items: center;
}
.share-rail .lbl { font-size: 11px; color: var(--muted); writing-mode: vertical-rl; margin-bottom: 6px; }
.share-rail button {
  width: 44px; height: 44px; border-radius: 999px;
  background: white; border: 1px solid var(--line);
  color: var(--ink); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all .15s;
}
.share-rail button:hover { border-color: var(--primary); color: var(--primary); transform: translateY(-2px); }
.share-rail .count { font-size: 11px; color: var(--muted); font-family: var(--f-num); }

.article-body {
  max-width: 68ch;
  font-size: calc(18px * var(--density) * var(--reader-scale, 1));
  line-height: 1.9;
  color: #232741;
}
.article-body > p {
  margin: 0 0 22px;
}
.article-body h2 {
  font-family: var(--f-display);
  font-size: calc(26px * var(--density));
  margin: 38px 0 14px;
  line-height: 1.3;
  color: var(--ink);
  font-weight: 700;
}
.article-body h3 {
  font-family: var(--f-display);
  font-size: calc(21px * var(--density));
  margin: 28px 0 10px;
}
.article-body blockquote {
  margin: 28px 0;
  padding: 6px 22px;
  border-inline-start: 4px solid var(--primary);
  font-family: var(--f-display);
  font-size: calc(22px * var(--density));
  line-height: 1.55;
  color: var(--ink);
  font-weight: 500;
}
.article-body blockquote cite {
  display: block; margin-top: 10px;
  font-size: 13px; color: var(--muted);
  font-style: normal; font-weight: 500;
}
.article-body figure {
  margin: 28px 0; padding: 0;
}
.article-body figure .thumb {
  aspect-ratio: 16/9; border-radius: var(--r-md);
  overflow: hidden; margin-bottom: 10px;
}
.article-body figcaption {
  font-size: 13px; color: var(--muted);
  text-align: center; line-height: 1.6;
}
.article-body ul {
  margin: 0 0 22px; padding-inline-start: 20px;
}
.article-body ul li { margin-bottom: 8px; }
.article-body .pullout {
  background: var(--surface-2);
  border-radius: var(--r-md);
  padding: 22px 26px;
  margin: 28px 0;
  font-size: calc(15px * var(--density));
  border-inline-start: 4px solid var(--cyan);
}
.article-body .pullout h4 {
  margin: 0 0 10px; font-size: 14px;
  color: var(--cyan);
  letter-spacing: .04em;
  font-weight: 700;
}

/* Article sidebar */
.article-side {
  display: flex; flex-direction: column; gap: 22px;
  position: sticky; top: 160px;
  align-self: start;
  height: fit-content;
  /* drop the most-read down so its top lines up with the article's first line
     (clears the read-bar that sits above the body text) */
  margin-top: 46px;
}
.article-side .box {
  background: white;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 20px;
}
.article-side .box h4 {
  margin: 0 0 14px;
  font-size: 13px; font-weight: 700;
  color: var(--ink);
  padding-bottom: 10px;
  border-bottom: 2px solid var(--primary);
  display: flex; justify-content: space-between; align-items: center;
}

.article-side .related .r {
  padding: 12px 0;
  border-bottom: 1px dashed var(--line);
  display: grid; grid-template-columns: 1fr 80px;
  gap: 12px; align-items: center;
}
.article-side .related .r:last-child { border-bottom: 0; }
.article-side .related h5 {
  font-size: 13.5px; line-height: 1.45;
  margin: 0 0 4px; font-weight: 600;
}
.article-side .related .t { font-size: 11.5px; color: var(--muted); }
.article-side .related .thumb {
  aspect-ratio: 1/1; border-radius: 4px; overflow: hidden;
}
.article-side .related .thumb.is-info {
  aspect-ratio: 3 / 4;
  border: 1px solid var(--line);
}

/* Sidebar video — open layout (not boxed) */
.article-side .box.side-videos {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
}
.article-side .box.side-videos::before,
.article-side .box.side-videos::after {
  content: none;
  display: none;
}
.article-side .box.side-videos h4 {
  border-bottom: 0;
  padding-bottom: 0;
  gap: 12px;
}
.side-videos h4 .side-videos__title {
  display: inline-flex; align-items: center; gap: 7px;
  flex-shrink: 0;
  text-decoration: none;
  transition: color .15s;
}
.side-videos h4 .side-videos__title:hover { color: var(--primary); }
.side-videos h4 .side-videos__title svg { width: 1em; height: 1em; flex-shrink: 0; }
/* thick navy separator — extends full width beside the title */
.side-videos__rule {
  flex: 1;
  min-width: 0;
  height: 3px;
  background: var(--navy);
  border-radius: 2px;
}
/* 2×2 grid — thumbnail with title below, no separators between videos */
.side-videos__list {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px 12px;
}
.side-vid {
  display: flex; flex-direction: column; gap: 7px;
  text-decoration: none;
}
.side-vid__thumb {
  position: relative; aspect-ratio: 16/10;
  border-radius: 6px; overflow: hidden; background: #1a2752;
}
.side-vid__thumb img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .25s ease;
}
.side-vid:hover .side-vid__thumb img { transform: scale(1.06); }
.side-vid__play {
  position: absolute; inset: 0; display: flex;
  align-items: center; justify-content: center;
  opacity: .85; transition: opacity .15s;
}
.side-vid__play svg { width: 32px; height: 32px; }
.side-vid:hover .side-vid__play { opacity: 1; }
.side-vid__title {
  font-size: 12px; line-height: 1.4; font-weight: 600;
  color: var(--ink);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.side-vid:hover .side-vid__title { color: var(--primary); }

/* Most read — beige card, centred title over a navy underline, then a ranked
   list. Each row is one link: headline block (start/right), ghosted rank
   numeral, landscape thumbnail (end/left). Rows carry no divider rules; the
   13px row padding does the separating.

   Geometry is the "3a" design scaled to fit the 280px rail: its spec (170px
   thumb, 66px numeral, 26px padding) only resolves on a ~470px card. Every
   value below is that spec at ~0.6x, so the proportions hold. */
.article-side .box.most-read {
  background: var(--surface-3);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 16px;
}
.most-read__head { text-align: center; }
.most-read__title {
  margin: 0;
  font-family: var(--f-display);
  font-size: 20px; font-weight: 700; line-height: 1.25;
  color: var(--ink);
}
/* the underline is the design's one accent — navy, never red */
.most-read__head::after {
  content: "";
  display: block;
  width: 34px; height: 3px;
  margin: 9px auto 0;
  border-radius: 2px;
  background: var(--navy);
}

.most-read__list { list-style: none; margin: 8px 0 0; padding: 0; }
.most-read .mr__link {
  display: grid;
  /* RTL: 1fr = headline (right), auto = numeral, 88px = thumb (left) */
  grid-template-columns: 1fr auto 88px;
  gap: 10px;
  align-items: start;
  padding: 13px 0;
  text-decoration: none;
}
.most-read .mr__body { min-width: 0; }
.most-read .mr__cat {
  display: block; margin-bottom: 4px;
  font-size: 11px; font-weight: 700; line-height: 1.3;
  color: #9aa0ab;
}
.most-read .mr__txt {
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical;
  overflow: hidden;
  font-family: var(--f-display);
  font-size: 14.5px; line-height: 1.55; font-weight: 700;
  color: var(--ink);
  transition: color .15s ease;
}
.most-read .mr__rank {
  font-family: var(--f-num);
  font-feature-settings: "tnum";
  font-size: 42px; font-weight: 800; line-height: 1;
  letter-spacing: -.02em;
  /* drop the numeral so its cap-height starts on the headline's first line,
     clearing the category label above it (line-height:1 puts the cap ~6px
     below the box top, so this nets to the headline's 19px offset) */
  margin-top: 10px;
  color: #cfd3e6;
  transition: color .15s ease;
}
.most-read .mr__thumb {
  display: block;
  /* deliberate departure from the site-wide 16:9 default — the "3a" spec
     calls for 3/2, and at 88px wide 16:9 leaves the thumb only 50px tall */
  aspect-ratio: 3 / 2;
  border-radius: 6px;
  overflow: hidden;
  /* warm neutral so the no-image fallback doesn't punch a cool grey hole in
     the beige card */
  background: #e8e4da;
}
.most-read .mr__thumb img {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
}
.most-read .mr__link:hover .mr__txt { color: var(--primary); }
.most-read .mr__link:hover .mr__rank { color: #b6bcda; }

/* End-of-article Telegram CTA — centered under the body */
.tg-end {
  max-width: 68ch;
  margin: 48px 0 0;
  text-align: center;
}
.tg-end__lead {
  font-size: calc(16px * var(--density));
  font-weight: 600; color: var(--ink);
  margin: 0 0 14px;
}
.tg-end__btn {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 11px 26px; border-radius: 999px;
  background: linear-gradient(135deg, #2aabee, #229ed9);
  color: #fff; text-decoration: none;
  font-size: 16px; font-weight: 700;
  box-shadow: 0 6px 16px rgba(34,158,217,.3);
  transition: transform .15s ease, box-shadow .15s ease;
}
.tg-end__btn svg { width: 22px; height: 22px; }
.tg-end__btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(34,158,217,.4);
  color: #fff;
}

/* Selected articles (اخترنا لك) — below content */
.selected-articles {
  margin: 40px 0 30px;
  /* pull the whole block in from the 872px body column so it reads as
     secondary, not a second lead. Sits on the section (not just the grid) so
     the heading rule ends where the cards do. */
  max-width: 776px;
}
.selected-articles__head {
  display: flex; align-items: center; gap: 22px; margin-bottom: 18px;
}
/* Article section labels — shared typography */
.selected-articles__head h3,
.article-readbar__src,
.side-videos h4 .side-videos__title {
  font-family: var(--f-display);
  font-weight: 700;
  color: var(--ink);
}
/* Smaller labels: source line */
.article-readbar__src {
  font-size: calc(18px * var(--density));
}
/* Larger labels: اخترنا لك + فيديو */
.selected-articles__head h3,
.side-videos h4 .side-videos__title {
  font-size: calc(22px * var(--density));
}
.selected-articles__head h3 {
  margin: 0;
  flex-shrink: 0;
  display: inline-flex; align-items: center; gap: 10px;
}
/* diamond marker — same identity as the homepage section headers */
.selected-articles__head h3::before {
  content: "";
  width: 12px; height: 12px;
  border-radius: 3px;
  transform: rotate(45deg);
  background: var(--navy);
  flex-shrink: 0;
}
/* short, thick navy separator inline with the title */
.selected-articles__rule {
  flex: 1;
  height: 3px;
  background: var(--navy);
  border-radius: 2px;
}
.selected-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 16px;
}
.sel-card { display: flex; flex-direction: column; text-decoration: none; }
.sel-card__thumb {
  aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden;
  margin-bottom: 10px;
}
.sel-card__thumb img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .3s ease;
}
.sel-card:hover .sel-card__thumb img { transform: scale(1.05); }
.sel-card__body { display: flex; flex-direction: column; gap: 3px; }
.sel-card__title {
  font-size: 14.5px; line-height: 1.5; font-weight: 700; color: var(--ink);
  transition: color .15s;
}
.sel-card:hover .sel-card__title { color: var(--primary); }

@media (max-width: 900px) {
  .selected-grid { gap: 12px; }
}

.article-tags-row {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin: 40px 0 0;
}
.article-tags-row .lbl {
  font-size: 13px; color: var(--muted); margin-inline-end: 6px;
}

/* Writers / columnist listing */
.writers-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
  margin-top: 22px;
}
.writers-grid .card .meta {
  /* inherits BBC .meta from tokens; keep spacing only */
  margin-top: auto;
  padding-top: 8px;
}
.pagination-wrap {
  margin: 36px 0 16px;
}
.pagination-wrap .pag-nav {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.pagination-wrap .pag-summary {
  font-size: 13px;
  color: var(--muted, #6c757d);
  margin: 0;
  text-align: center;
}
.pagination-wrap .pag-summary .fw-semibold {
  font-weight: 700;
  color: var(--ink, #1a1a2e);
}
.pagination-wrap .pagination {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  list-style: none;
  padding: 0;
  margin: 0;
}
.pagination-wrap .page-item .page-link {
  padding: 8px 14px;
  border-radius: 8px;
  border: 1px solid var(--line, #e2e8f0);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink, #1a1a2e);
  background: white;
  text-decoration: none;
  display: block;
  min-width: 40px;
  text-align: center;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.pagination-wrap .page-item .page-link:hover {
  background: var(--primary, #1a2d5a);
  color: white;
  border-color: var(--primary, #1a2d5a);
}
.pagination-wrap .page-item.active .page-link {
  background: var(--primary, #1a2d5a);
  color: white;
  border-color: var(--primary, #1a2d5a);
}
.pagination-wrap .page-item.disabled .page-link {
  color: var(--muted, #6c757d);
  background: var(--surface-2, #f8f9fa);
  opacity: 0.6;
  pointer-events: none;
}
@media (max-width: 640px) {
  .pagination-wrap .page-item .page-link {
    padding: 6px 10px;
    font-size: 13px;
    min-width: 34px;
  }
}

/* Legacy CMS markup inside article body */
.article-body.post-p,
.article-body.post-p * {
  max-width: 100%;
  box-sizing: border-box;
}
/* Legacy CMS markup hardcodes inline font-size (e.g. <span style="font-size:14pt">),
   which overrides the scalable body size and breaks the reader font-size control.
   Force text elements to inherit the reader-scaled size; leave headings to their own rules. */
.article-body.post-p *:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) {
  font-size: inherit !important;
}
.article-body.post-p img,
.article-body.post-p iframe,
.article-body.post-p video {
  max-width: 100% !important;
  height: auto !important;
}
.article-body.post-p img {
  border-radius: var(--r-md);
  margin: 18px 0;
}
.article-body.post-p table {
  width: 100%;
  border-collapse: collapse;
  margin: 22px 0;
  font-size: 15px;
}
.article-body.post-p table td,
.article-body.post-p table th {
  border: 1px solid var(--line);
  padding: 10px 12px;
}
.article-body.post-p .title,
.article-body.post-p .green-line,
.article-body.post-p .content-sec,
.article-body.post-p .time {
  display: none;
}
.article-body.post-p p {
  margin: 0 0 22px;
  line-height: 1.9;
}
.article-body.post-p a {
  color: var(--primary);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.article-body.post-p h2,
.article-body.post-p h3,
.article-body.post-p h4 {
  font-family: var(--f-display);
  color: var(--ink);
  margin: 28px 0 12px;
  line-height: 1.35;
}
.article-side .related .thumb.ph {
  width: 80px;
  aspect-ratio: 1/1;
  margin: 0;
}
.article-side .related .thumb.ph .ph-img {
  border-radius: 4px;
}

/* Comments */
.comments {
  max-width: 68ch;
  margin-top: 30px;
}
.comments h3 {
  font-family: var(--f-display);
  font-size: 22px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--primary);
  margin: 0 0 20px;
  display: flex; justify-content: space-between; align-items: baseline;
}
.comments h3 .ct {
  font-size: 13px; color: var(--muted); font-weight: 500;
  font-family: var(--f-body);
}
.comments .composer {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 16px;
  margin-bottom: 28px;
  display: grid; grid-template-columns: 44px 1fr; gap: 12px;
}
.comments .composer .av {
  width: 44px; height: 44px; border-radius: 999px;
  background: var(--line-2); color: white; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.comments .composer textarea {
  width: 100%; border: 1px solid var(--line);
  background: white; border-radius: var(--r-sm);
  padding: 10px; resize: vertical; min-height: 70px;
  font: inherit;
}
.comments .composer .submit {
  margin-top: 8px; display: flex; justify-content: flex-end; gap: 8px;
}
.comments .composer .submit button {
  background: var(--primary); color: white;
  border: 0; padding: 8px 18px;
  border-radius: 999px; font-weight: 600; cursor: pointer;
  font-size: 13px;
}

.comments .c {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 12px;
  padding: 16px 0;
  border-bottom: 1px dashed var(--line);
}
.comments .c:last-child { border-bottom: 0; }
.comments .c .av {
  width: 40px; height: 40px; border-radius: 999px;
  font-weight: 700; color: white;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px;
}
.comments .c .body .head {
  display: flex; gap: 10px; align-items: center;
  font-size: 13px; margin-bottom: 4px;
}
.comments .c .body .name { font-weight: 700; color: var(--ink); }
.comments .c .body .time { color: var(--muted); font-size: 12px; }
.comments .c .body .txt { font-size: 14.5px; line-height: 1.65; color: var(--ink-2); }
.comments .c .body .actions {
  display: flex; gap: 16px; margin-top: 10px;
  font-size: 12px; color: var(--muted);
}
.comments .c .body .actions button {
  background: transparent; border: 0; cursor: pointer;
  color: var(--muted); font: inherit;
  display: inline-flex; align-items: center; gap: 4px;
}
.comments .c .body .actions button:hover { color: var(--primary); }
.comments .c.reply { margin-inline-start: 40px; padding-inline-start: 14px; border-inline-start: 2px solid var(--line); }

/* SECTION PAGE */
.section-top {
  padding: 24px 0 26px;
}
.section-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 28px;
  border-radius: 16px;
  padding: 30px 36px;
  color: #fff;
  background:
    radial-gradient(120% 150% at 88% -30%, rgba(255,255,255,.16), transparent 55%),
    linear-gradient(115deg, var(--navy-900) 0%, var(--navy) 55%, #28306e 100%);
}
/* faint grid overlay */
.section-hero::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background-image:
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 26px 26px;
  mix-blend-mode: overlay; opacity: .5;
}
/* concentric arc accent behind the title */
.section-hero::after {
  content: "";
  position: absolute; z-index: -1;
  inset-inline-start: -130px; top: 50%;
  transform: translateY(-50%);
  width: 360px; height: 360px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 0 0 44px rgba(255,255,255,.04), 0 0 0 96px rgba(255,255,255,.03);
}
.section-hero__id { flex-shrink: 0; }
.section-hero .crumbs {
  font-size: 13px; color: rgba(255,255,255,.7); margin-bottom: 6px;
}
.section-hero .crumbs a { color: rgba(255,255,255,.7); text-decoration: none; }
.section-hero .crumbs a:hover { color: #fff; }
.section-hero .crumbs span { color: #fff; }
.section-hero h1 {
  font-family: var(--f-display);
  font-size: 42px; line-height: 1; margin: 0;
  letter-spacing: -.02em; color: #fff;
}
.section-hero__desc {
  flex: 1 1 auto;
  font-size: 15px; line-height: 1.6; color: rgba(255,255,255,.82);
  max-width: 56ch; margin: 0;
  padding-inline-start: 24px;
  border-inline-start: 1px solid rgba(255,255,255,.18);
}
.section-hero .tabs {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-inline-start: auto; flex-shrink: 0;
}
.section-hero .tabs a {
  padding: 8px 18px; border-radius: 999px;
  font-size: 14px; font-weight: 600;
  color: rgba(255,255,255,.85);
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.18);
  text-decoration: none; white-space: nowrap;
  transition: background .15s, color .15s, border-color .15s;
}
.section-hero .tabs a:hover {
  background: rgba(255,255,255,.16); color: #fff;
}
.section-hero .tabs a.active {
  background: #fff; color: var(--navy); border-color: #fff;
}

/* Section starters ("أبرز ملفات …", "كل المقالات") carry the same diamond
   identity as the homepage section headers — a small rotated navy square
   instead of the default vertical bar. Loads after home.css so it wins. */
.rd-section-head .bar {
  width: 13px; height: 13px;
  border-radius: 3.5px;
  transform: rotate(45deg);
  background: var(--navy);
  margin-inline: 3px;
}

/* ===== Category body: mosaic + most-read band ===== */
.cat-rest-t { margin-top: 44px; margin-bottom: 24px; }
.cat-rest-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 34px 28px;
}
@media (max-width: 960px) { .cat-rest-grid { grid-template-columns: repeat(2, 1fr); gap: 28px 22px; } }
@media (max-width: 600px) { .cat-rest-grid { grid-template-columns: 1fr; } }

.section-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 44px;
  padding: 36px 0 0;
}
.section-grid .main h2.sec-t {
  font-family: var(--f-display);
  font-size: 22px;
  margin: 10px 0 18px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--primary);
}
.section-grid .main .row2 {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 28px; margin-bottom: 28px;
}

/* LIVE PAGE */
.live-hero {
  background: var(--navy-900);
  color: white;
  padding: 40px 0;
}
.live-hero .grid {
  display: grid; grid-template-columns: 1.6fr 1fr;
  gap: 32px;
}
.live-hero .player-big {
  aspect-ratio: 16/9;
  background: linear-gradient(135deg, #1a2060, #0b0e24);
  border-radius: var(--r-lg);
  position: relative; overflow: hidden;
  border: 1px solid rgba(255,255,255,.1);
}
.live-hero .player-big .badge {
  position: absolute; top: 18px; inset-inline-start: 18px;
  background: var(--red); color: white;
  padding: 6px 14px; border-radius: 4px;
  font-size: 12px; font-weight: 700;
  display: inline-flex; align-items: center; gap: 8px;
}
.live-hero .player-big .badge .dot { width: 7px; height: 7px; border-radius: 50%; background: white; animation: livepulse 1.2s infinite; }
.live-hero .player-big .viewers {
  position: absolute; top: 18px; inset-inline-end: 18px;
  background: rgba(0,0,0,.5); color: white;
  padding: 6px 14px; border-radius: 4px;
  font-size: 12px; font-weight: 600;
  backdrop-filter: blur(8px);
}
.live-hero .player-big .center {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  flex-direction: column; gap: 14px;
}
.live-hero .player-big .btn-play {
  width: 84px; height: 84px; border-radius: 999px;
  background: rgba(255,255,255,.95); color: var(--navy-900);
  display: flex; align-items: center; justify-content: center;
  border: 0; cursor: pointer;
}
.live-hero .player-big .btn-play svg { width: 34px; height: 34px; margin-inline-start: 4px; }
.live-hero .player-big .title-low {
  position: absolute; bottom: 0; left: 0; right: 0;
  background: linear-gradient(transparent, rgba(0,0,0,.85));
  padding: 30px 24px 20px;
}
.live-hero .player-big .title-low h2 {
  font-family: var(--f-display); font-size: 22px;
  margin: 0 0 6px;
}
.live-hero .player-big .title-low .meta { font-size: 13px; opacity: .7; }

.live-hero .controls {
  display: flex; gap: 10px; margin-top: 18px;
  align-items: center;
}
.live-hero .controls button {
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12);
  color: white; width: 40px; height: 40px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.live-hero .controls .quality {
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12);
  color: white; padding: 8px 14px; border-radius: 999px;
  font-size: 12px; font-weight: 600;
}

.live-schedule h3 {
  margin: 0 0 14px; font-size: 14px; letter-spacing: .04em;
  color: rgba(255,255,255,.75); font-weight: 700;
  padding-bottom: 10px; border-bottom: 1px solid rgba(255,255,255,.12);
}
.live-schedule .ep {
  display: grid; grid-template-columns: 82px 1fr auto;
  gap: 14px; padding: 14px 0;
  border-bottom: 1px dashed rgba(255,255,255,.1);
  align-items: center;
}
.live-schedule .ep:last-child { border-bottom: 0; }
.live-schedule .ep .t {
  font-family: var(--f-num); font-weight: 600;
  color: rgba(255,255,255,.85);
}
.live-schedule .ep .t .state { display:block; font-size: 10px; color: var(--red); margin-top: 3px; font-weight: 700;}
.live-schedule .ep .t .state.next { color: var(--orange); }
.live-schedule .ep h4 { margin: 0 0 2px; font-size: 14px; color: white; }
.live-schedule .ep .who { font-size: 12px; opacity: .65; }
.live-schedule .ep.on { background: rgba(220,89,80,.12); margin: 0 -14px; padding: 14px; border-radius: 8px; border-bottom: 1px solid transparent; }

.live-updates {
  padding: 36px 0;
}
.live-updates .grid {
  display: grid; grid-template-columns: 2.3fr 1fr;
  gap: 36px;
}
.live-updates h2.sec-t {
  font-family: var(--f-display); margin: 0 0 20px;
  font-size: 22px; padding-bottom: 10px;
  border-bottom: 2px solid var(--primary);
  display: flex; justify-content: space-between; align-items: baseline;
}
.live-updates h2.sec-t small {
  font-family: var(--f-body); font-size: 13px;
  color: var(--muted); font-weight: 500;
}
.live-updates .feed {
  list-style: none; padding: 0; margin: 0;
  position: relative;
}
.live-updates .feed::before {
  content: ""; position: absolute;
  inset-inline-start: 10px; top: 8px; bottom: 8px;
  width: 2px; background: var(--line);
}
.live-updates .feed .u {
  position: relative;
  padding: 0 36px 24px 0;
  padding-inline-start: 36px; padding-inline-end: 0;
}
.live-updates .feed .u::before {
  content: ""; position: absolute;
  inset-inline-start: 4px; top: 4px;
  width: 14px; height: 14px;
  border-radius: 999px; background: white;
  border: 3px solid var(--primary);
}
.live-updates .feed .u.breaking::before {
  background: var(--red); border-color: var(--red);
  box-shadow: 0 0 0 4px rgba(220,89,80,.15);
}
.live-updates .feed .u .time {
  font-family: var(--f-num);
  font-size: 12px; color: var(--muted);
  font-weight: 600;
}
.live-updates .feed .u .time.breaking {
  color: var(--red); font-weight: 700;
}
.live-updates .feed .u h3 {
  font-family: var(--f-display);
  font-size: 17px; line-height: 1.4;
  margin: 4px 0 6px;
  font-weight: 600;
}
.live-updates .feed .u p { font-size: 14px; color: var(--ink-2); line-height: 1.65; margin: 0; }
.live-updates .feed .u .src { font-size: 12px; color: var(--muted); margin-top: 8px; }

.live-chat h3 {
  margin: 0 0 14px; font-size: 14px;
  padding-bottom: 10px; border-bottom: 2px solid var(--primary);
}
.live-chat .msgs { display: grid; gap: 10px; max-height: 420px; overflow-y: auto; padding-inline-end: 8px; }
.live-chat .m {
  display: grid; grid-template-columns: 32px 1fr;
  gap: 10px; font-size: 13px;
}
.live-chat .m .av {
  width: 32px; height: 32px; border-radius: 999px;
  background: linear-gradient(135deg, var(--cyan), var(--navy));
  color: white; font-weight: 700; font-size: 11px;
  display: flex; align-items: center; justify-content: center;
}
.live-chat .m .b { background: var(--surface-2); padding: 8px 12px; border-radius: 12px; border-top-right-radius: 4px; }
.live-chat .m .b .name { font-weight: 700; font-size: 12px; color: var(--primary); }
.live-chat .m .b .txt { margin-top: 2px; line-height: 1.5; }
.live-chat .box-form {
  margin-top: 14px; display: flex; gap: 8px;
  border-top: 1px solid var(--line); padding-top: 14px;
}
.live-chat .box-form input {
  flex: 1; border: 1px solid var(--line); border-radius: 999px;
  padding: 10px 14px; font: inherit; font-size: 13px;
  outline: none;
}
.live-chat .box-form input:focus { border-color: var(--primary); }
.live-chat .box-form button {
  background: var(--primary); color: white;
  border: 0; border-radius: 999px; padding: 0 20px;
  font: inherit; font-weight: 600; cursor: pointer;
  font-size: 13px;
}

/* ===== MULTIMEDIA LANDING (video / podcast / infographic) =====
   Banner is the shared .section-hero component (see "SECTION PAGE" above) —
   only the body below it is page-specific: one large hero, then a grid. */
.video-featured {
  padding: 26px 0 34px;
}
.video-featured .wrap {
  display: grid; grid-template-columns: 1.6fr 1fr;
  gap: 30px;
  align-items: center;   /* hero art is tall; centre the text beside it rather
                            than stranding it at the top of a stretched cell */
}
.video-featured .main-player {
  display: block; position: relative;
  aspect-ratio: 16/9;
  border-radius: var(--r-lg);
  overflow: hidden;
}
.video-featured .main-player img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
/* Image-less frames: .ph paints the gradient, .mm-cap writes the title across it
   so the tile never reads as an empty box. Deliberately NOT .ph-title — that
   class has two competing definitions (tokens.css text node vs. home.css
   absolute-fill wrapper), so this page keeps its own caption. */
.mm-cap {
  position: absolute; inset: auto 0 0 0; z-index: 1;
  padding: 26px 30px;
  color: #fff;
}
.mm-cap__t {
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  font-family: var(--f-display); font-weight: 700;
  text-shadow: 0 2px 18px rgba(0,0,0,.35);
}
.video-featured .main-player .mm-cap__t { font-size: 30px; line-height: 1.3; }
/* bottom scrim: keeps the play button readable over a bright frame */
.video-featured .main-player .scrim {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.42), rgba(0,0,0,0) 55%);
}
.video-featured .main-player .play {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
}
.video-featured .main-player .play .btn {
  width: 76px; height: 76px; border-radius: 999px;
  background: rgba(255,255,255,.95);
  box-shadow: 0 6px 24px rgba(0,0,0,.28);
  display: flex; align-items: center; justify-content: center;
  transition: transform .18s ease, background .18s ease;
}
.video-featured .main-player .play .btn svg {
  width: 30px; height: 30px; margin-inline-start: 4px;
  color: var(--navy);
}
.video-featured .main-player:hover .play .btn { transform: scale(1.08); background: #fff; }
.video-featured .main-player img { transition: transform .4s ease; }
.video-featured .main-player:hover img { transform: scale(1.03); }

.video-featured .main-info .cat {
  font-size: 12px; font-weight: 700; letter-spacing: .04em;
  color: var(--navy); margin-bottom: 10px; display: inline-block;
}
.video-featured .main-info h2 {
  font-family: var(--f-display);
  font-size: 28px; line-height: 1.28;
  margin: 0 0 14px;
}
.video-featured .main-info h2 a { color: inherit; text-decoration: none; }
.video-featured .main-info h2 a:hover { color: var(--navy); }
.video-featured .main-info p {
  font-size: 15px; line-height: 1.7; color: var(--excerpt); margin: 0 0 18px;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
.video-featured .main-info .meta {
  font-size: 12px; color: var(--meta); font-weight: 400; letter-spacing: -0.12px;
  display: flex; gap: 14px;
}

/* Photo-count badge — the album equivalent of the video play mark: says "this
   card opens a stack of N images" without borrowing the play affordance. */
.mm-count {
  position: absolute; inset-block-end: 14px; inset-inline-end: 14px;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 13px; border-radius: 999px;
  background: rgba(11,17,58,.78); backdrop-filter: blur(6px);
  color: #fff; font-size: 13px; font-weight: 700; line-height: 1;
}
.mm-count svg { width: 15px; height: 15px; flex-shrink: 0; }
.mm-count--sm {
  inset-block-end: 8px; inset-inline-end: 8px;
  padding: 5px 9px; gap: 5px; font-size: 12px;
}
.mm-count--sm svg { width: 13px; height: 13px; }

/* Featured album carousel — one photo at a time on the listing hero when the
   album has more than one shot. The album rules below drop the 16:9 frame. */
.mm-car { cursor: default; }
.mm-car__slide {
  position: absolute; inset: 0;
  display: block; margin: 0;
  opacity: 0; visibility: hidden;
  pointer-events: none;
  transition: opacity .32s ease;
  z-index: 0;
}
.mm-car__slide.is-active {
  opacity: 1; visibility: visible; z-index: 1;
  pointer-events: auto;
}
.mm-car__slide img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
/* Don't borrow the video-hero zoom — arrows need a still frame to aim at. */
.video-featured .main-player.mm-car:hover img { transform: none; }
.mm-car .scrim,
.mm-car .mm-count,
.mm-car__nav { z-index: 2; }

.mm-car__nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; border-radius: 999px;
  border: 0; cursor: pointer; padding: 0;
  background: rgba(11, 17, 58, .58); backdrop-filter: blur(8px);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  transition: background .16s ease, transform .16s ease, opacity .2s ease;
}
.mm-car__nav svg { width: 20px; height: 20px; }
.mm-car__nav:hover { background: var(--navy); transform: translateY(-50%) scale(1.07); }
.mm-car__nav:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; opacity: 1; }
/* Physical left/right — same reason as .gal__nav: RTL + LTR counter must not
   flip logical insets into the same corner. */
.mm-car__nav--prev { right: 12px; }
.mm-car__nav--next { left: 12px; }
@media (hover: hover) {
  .mm-car__nav { opacity: 0; }
  .mm-car:hover .mm-car__nav,
  .mm-car:focus-within .mm-car__nav { opacity: 1; }
}
/* Counter is numeric ("1 / 6") — isolate LTR so RTL doesn't flip it. */
.mm-car .mm-count {
  direction: ltr; unicode-bidi: isolate;
  font-family: var(--f-num);
}
@media (prefers-reduced-motion: reduce) {
  .mm-car__slide { transition: none; }
}
@media (max-width: 640px) {
  .mm-car__nav { width: 36px; height: 36px; }
  .mm-car__nav svg { width: 17px; height: 17px; }
  .mm-car__nav--prev { right: 8px; }
  .mm-car__nav--next { left: 8px; }
}

.video-list .g {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 28px 20px;
}
.video-list .vid { display: block; text-decoration: none; color: inherit; }
.video-list .vid .thumb {
  display: block; position: relative;
  width: 100%; aspect-ratio: 16/9;
  border-radius: var(--r-md); overflow: hidden;
  margin-bottom: 12px;
}
/* image-less tile: same caption, tile-sized (see the .mm-cap note above) */
.video-list .vid .thumb .mm-cap { padding: 12px 14px; }
.video-list .vid .thumb .mm-cap__t { font-size: 16px; line-height: 1.4; }
.video-list .vid .thumb img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .4s ease;
}
.video-list .vid:hover .thumb img { transform: scale(1.05); }

/* Album photos are not video frames. Show each shot at its own ratio
   instead of cropping it into 16:9. */
.video-featured.is-album .wrap { align-items: start; }
.video-featured.is-album .main-player {
  aspect-ratio: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  background: transparent;
}
.video-featured.is-album .main-player img,
.video-featured.is-album .mm-car__slide img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: min(70vh, 640px);
  object-fit: contain;
}
.video-featured.is-album .mm-car__slide.is-active {
  position: relative;
  inset: auto;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.video-featured.is-album .main-player .scrim { display: none; }
.video-featured.is-album .main-player:hover img { transform: none; }
.video-list.is-album .vid .thumb {
  aspect-ratio: auto;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
}
.video-list.is-album .vid .thumb img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 220px;
  object-fit: contain;
}
.video-list.is-album .vid:hover .thumb img { transform: none; }

/* Infographics are tall posters, not 16:9 video frames. Cover + the video
   scrim was cropping and darkening the type. Show the whole graphic. */
.video-featured.is-info .wrap {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
}
.video-featured.is-info .main-player {
  aspect-ratio: auto;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  width: max-content;
  max-width: 100%;
  background: #fff;
  border: 1px solid var(--line);
}
.video-featured.is-info .main-player img {
  width: auto;
  height: auto;
  /* 420px is the header, banner and a small gap, so the whole poster
     sits inside the first screen. */
  max-width: min(100%, 640px);
  max-height: calc(100vh - 420px);
  object-fit: contain;
}
.video-featured.is-info .main-player .scrim { display: none; }
.video-featured.is-info .main-player:hover img { transform: none; }
.video-list.is-info .vid .thumb {
  /* Poster ratio, not the site-wide 16:9. These graphics are portrait. */
  aspect-ratio: 3 / 4;
  background: #fff;
  border: 1px solid var(--line);
}
.video-list.is-info .vid .thumb img { object-fit: contain; }
.video-list.is-info .vid:hover .thumb img { transform: none; }
.video-list .vid .play-sm {
  position: absolute; inset-block-end: 8px; inset-inline-end: 8px;
  width: 30px; height: 30px; border-radius: 999px;
  background: rgba(11,17,58,.72);
  display: flex; align-items: center; justify-content: center;
}
.video-list .vid .play-sm svg {
  width: 14px; height: 14px; margin-inline-start: 2px; color: #fff;
}
/* on the image-less tile the caption occupies the bottom edge, so the play mark
   moves to the top corner instead of sitting on top of the title */
.video-list .vid .thumb.ph .play-sm {
  inset-block: 8px auto;
  background: rgba(255,255,255,.18);
  backdrop-filter: blur(6px);
}
.video-list .vid h4 {
  margin: 0 0 8px; font-size: 17px; line-height: 1.45; font-weight: 700;
  color: var(--ink);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.video-list .vid:hover h4 { color: var(--navy); }
.video-list .vid .meta {
  display: block;
  font-size: 12px; color: var(--meta); font-weight: 400; letter-spacing: -0.12px;
}

/* GENERIC EMPTY/STATES */
.empty-state {
  text-align: center;
  padding: 48px 16px;
  color: var(--muted);
  border: 1px dashed var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
}

/* STATIC PAGES (about/contact/policy/terms) */
.static-page {
  padding: 30px 0 56px;
}
.static-layout {
  display: grid;
  grid-template-columns: 1.8fr 1fr;
  gap: 26px;
}
.static-card {
  background: white;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 22px;
}
.static-card h2 {
  font-family: var(--f-display);
  margin: 0 0 16px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--primary);
  font-size: 22px;
}
.static-content {
  font-size: 16px;
  line-height: 1.9;
  color: var(--ink-2);
}
.static-content p { margin: 0 0 14px; }

/* Ported policy-page content. The source markup comes from an editor, so
   numbered section headings arrive as <ol><li><h2>…</h2></li></ol>. */
.static-content h2 {
  font-family: var(--f-display);
  font-size: 20px;
  line-height: 1.55;
  color: var(--ink);
  margin: 26px 0 12px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--primary);
}
.static-content h3 {
  font-family: var(--f-display);
  font-size: 17px;
  color: var(--ink);
  margin: 20px 0 10px;
}
.static-content ul,
.static-content ol { margin: 0 0 16px; padding-inline-start: 22px; }
.static-content ul { list-style: disc; }
.static-content ol { list-style: decimal; }
.static-content li { margin: 0 0 8px; }
.static-content li > p { margin: 0 0 8px; }
.static-content li > p:last-child { margin-bottom: 0; }
.static-content li > h2 { margin-top: 6px; }
.static-content a { color: var(--primary); text-decoration: underline; }
.static-content strong { font-weight: 700; color: var(--ink); }
.static-content .table-wrap { overflow-x: auto; margin: 0 0 18px; }
.static-content table { width: 100%; border-collapse: collapse; font-size: 15px; }
.static-content td,
.static-content th {
  border: 1px solid var(--line);
  padding: 10px 12px;
  vertical-align: top;
}
.static-content td > p { margin: 0; }
.static-content tr:nth-child(odd) td { background: var(--surface); }
.static-form {
  display: grid;
  gap: 12px;
}
.static-form input,
.static-form textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 12px 14px;
  font: inherit;
  font-size: 14px;
}
.static-form textarea { min-height: 130px; resize: vertical; }
.static-form button {
  border: 0;
  border-radius: 999px;
  background: var(--primary);
  color: white;
  font-weight: 700;
  min-height: 44px;
  padding: 0 22px;
  width: fit-content;
  cursor: pointer;
}
.static-note {
  font-size: 13px;
  color: var(--muted);
}

/* MULTIMEDIA DETAIL */
.media-detail {
  padding: 30px 0 56px;
}
.media-layout {
  display: grid;
  grid-template-columns: 1.8fr 1fr;
  gap: 28px;
}
.media-player {
  background: white;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
}
.media-player .frame {
  aspect-ratio: 16/9;
  background: var(--surface-3);
}
.media-player .frame iframe,
.media-player .frame img {
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: cover;
}
/* Detail page: the infographic is the story, so it keeps its own ratio
   instead of being cropped into the video player's 16:9 frame. */
.media-player .frame.is-info {
  aspect-ratio: auto;
  display: flex;
  justify-content: center;
  background: #fff;
}
.media-player .frame.is-info img {
  width: auto;
  height: auto;
  max-width: 100%;
  /* Same first-screen cap as the listing: the banner above the poster
     is about 390px, plus a little air at the bottom. */
  max-height: calc(100vh - 420px);
  object-fit: contain;
}
/* Infographic detail: the graphic is the story, so it is not fitted into
   16:9 and not shrunk to one screen. The reader scrolls the full poster. */
.info-shots { background: #fff; }
.info-shot { margin: 0; }
.info-shot + .info-shot { border-top: 1px solid var(--line); }
.info-shot img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}
.info-shot__cap {
  margin: 0;
  padding: 12px 18px 16px;
  text-align: center;
  font-size: 16px;
  line-height: 1.75;
  color: var(--ink);
  white-space: pre-line;
}
.media-player .body {
  padding: 20px;
}
.media-player h1 {
  margin: 0 0 12px;
  font-family: var(--f-display);
  font-size: 30px;
  line-height: 1.25;
}
.media-player .meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  color: var(--meta);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: -0.12px;
}
.media-player .description {
  margin-top: 12px;
  color: var(--ink-2);
  line-height: 1.8;
}
.media-audio {
  width: 100%;
  margin-top: 14px;
}
.media-gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-top: 14px;
}
.media-gallery .thumb {
  aspect-ratio: 1/1;
  border-radius: var(--r-sm);
  overflow: hidden;
  border: 1px solid var(--line);
}
.media-gallery .thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Media detail pages (video/infographic) put the full content title into the
   shared section-hero — those titles run long, so trade the banner's display
   size for real leading; two or three lines stay readable. */
.section-hero--media h1 {
  font-size: 30px;
  line-height: 1.3;
  letter-spacing: -.01em;
}
@media (max-width: 960px) {
  .section-hero--media h1 { font-size: 24px; }
}

/* "More videos" grid under the player — same .video-list the listing uses */
.media-more { margin-top: 44px; }

/* Player facade: the video's poster + the site's play button; the YouTube
   iframe mounts on click. Same visual language as .video-featured .play. */
.media-player .frame-facade {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: #000;
  cursor: pointer;
  overflow: hidden;
  text-align: initial;
}
.media-player .frame-facade img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .4s ease;
}
.media-player .frame-facade:hover img { transform: scale(1.03); }
.media-player .frame-facade .play {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
}
.media-player .frame-facade .play .btn {
  width: 76px; height: 76px; border-radius: 999px;
  background: rgba(255,255,255,.95);
  box-shadow: 0 6px 24px rgba(0,0,0,.28);
  display: flex; align-items: center; justify-content: center;
  transition: transform .18s ease, background .18s ease;
}
.media-player .frame-facade .play .btn svg {
  width: 30px; height: 30px; margin-inline-start: 4px;
  color: var(--navy);
}
.media-player .frame-facade:hover .play .btn { transform: scale(1.08); background: #fff; }
.media-player .frame-facade:focus-visible { outline: 3px solid var(--navy); outline-offset: -3px; }

/* 404 */
.not-found-wrap {
  min-height: 52vh;
  display: grid;
  place-items: center;
  padding: 40px 0 30px;
}
.not-found-card {
  width: min(680px, 100%);
  text-align: center;
  background: white;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 36px 26px;
}
.not-found-card h1 {
  margin: 0 0 8px;
  font-family: var(--f-display);
  font-size: 64px;
  color: var(--primary);
}
.not-found-card h2 {
  margin: 0 0 10px;
  font-family: var(--f-display);
  font-size: 28px;
}
.not-found-card p {
  margin: 0 0 18px;
  color: var(--muted);
}
.not-found-card .actions {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}
.not-found-card .actions a {
  padding: 10px 20px;
  border-radius: 999px;
  border: 1px solid var(--line);
  font-weight: 600;
}
.not-found-card .actions a.primary {
  background: var(--primary);
  color: white;
  border-color: var(--primary);
}

/* Mobile: the body stacks, so the lead image goes full-width and the
   most-read rail drops its first-line offset. */
@media (max-width: 960px) {
  .article-body-wrap { grid-template-columns: 1fr; }
  .article-lead { margin-inline-start: 0; width: 100%; }
  .selected-articles { transform: none; }
  .share-rail { flex-direction: row; position: static; }
  .share-rail .lbl { display: none; }
  .article-side { position: static; margin-top: 0; }
  .section-grid { grid-template-columns: 1fr; }
  .section-grid .main .row2 { grid-template-columns: 1fr; }
  .writers-grid { grid-template-columns: 1fr; }
  .live-hero .grid { grid-template-columns: 1fr; }
  .live-updates .grid { grid-template-columns: 1fr; }
  .video-featured .wrap,
  .video-featured.is-info .wrap { grid-template-columns: 1fr; }
  .video-featured.is-info .main-player { width: 100%; }
  .video-featured.is-info .main-player img { max-height: calc(100vh - 390px); }
  .media-player .frame.is-info img { max-height: calc(100vh - 480px); }
  .video-list .g { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .article-top h1 { font-size: 30px; }
  .section-hero h1 { font-size: 34px; }
  .media-layout,
  .static-layout { grid-template-columns: 1fr; }
  .media-player h1 { font-size: 24px; }
  .media-gallery { grid-template-columns: repeat(3, 1fr); }
  .writers-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .article-top {
    padding: 24px 0 calc(var(--seam-overlap) + 16px);
    --article-inset: 28px;
  }
  .article-top .crumbs {
    overflow-x: auto;
    white-space: nowrap;
    padding-bottom: 4px;
  }
  .article-top h1 {
    font-size: 28px;
    line-height: 1.3;
    max-width: none;
  }
  .article-top .dek {
    font-size: 15.5px;
    line-height: 1.65;
    margin-bottom: 12px;
  }
  .article-top .article-meta {
    margin-top: 14px;
  }
  .article-hero-band {
    margin-top: 14px;
  }
  /* Full-bleed lead image on mobile — breaks out of the container's 16px
     inset so the image runs edge-to-edge with the screen. */
  .article-lead {
    margin-inline: -16px;
    width: calc(100% + 32px);
    max-width: none;
  }
  .article-hero {
    border-radius: 0;
    box-shadow: none;
  }
  .article-body-wrap {
    grid-template-columns: minmax(0, 1fr);
    gap: 22px;
    padding: 24px 0 30px;
  }
  .share-rail {
    overflow-x: auto;
    justify-content: flex-start;
    padding-bottom: 4px;
  }
  .share-rail button {
    width: 40px;
    height: 40px;
    flex: 0 0 auto;
  }
  .article-body {
    max-width: none;
    font-size: 16px;
    line-height: 1.85;
  }
  .article-body h2 {
    font-size: 22px;
  }
  .article-body blockquote,
  .article-body .pullout,
  .article-side .box {
    padding: 16px;
  }
  .article-side {
    display: grid;
    gap: 16px;
  }
  .section-top {
    padding: 16px 0 20px;
  }
  .section-hero {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    padding: 22px 20px;
  }
  .section-hero h1 {
    font-size: 30px;
  }
  .section-hero__desc {
    font-size: 14px;
    max-width: none;
    padding-inline-start: 0;
    border-inline-start: 0;
  }
  .section-hero .tabs {
    margin-inline-start: 0;
    align-self: stretch;
    flex-wrap: nowrap;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
  }
  .section-hero .tabs::-webkit-scrollbar { display: none; }
  .section-grid .main .lead,
  .section-grid .main .row2,
  .video-featured .wrap,
  .live-hero .grid,
  .live-updates .grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
  }
  .section-grid .main .lead {
    grid-template-columns: 1fr;
  }
  .live-hero {
    padding: 26px 0;
  }
  .player-big {
    min-height: 280px;
    border-radius: var(--r-md);
  }
  .player-big .title-low h2 {
    font-size: 20px;
  }
  .controls {
    flex-wrap: wrap;
    gap: 8px;
  }
  .live-schedule,
  .live-chat {
    padding: 16px;
  }
  .live-schedule .ep {
    grid-template-columns: 62px 1fr;
  }
  .live-schedule .ep > :last-child {
    display: none;
  }
  .live-updates h2.sec-t {
    align-items: flex-start;
    flex-direction: column;
    gap: 6px;
    font-size: 20px;
  }
  .live-chat .box-form {
    flex-direction: column;
  }
  .live-chat .box-form button {
    min-height: 42px;
  }
  .video-featured {
    padding: 18px 0 26px;
  }
  .video-featured .main-info h2 {
    font-size: 22px;
  }
  .video-featured .main-info .meta {
    flex-wrap: wrap;
    gap: 8px 12px;
  }
  .video-list .g {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px 14px;
  }
  .video-list .vid h4 { font-size: 16px; }
  .media-detail,
  .static-page { padding: 24px 0 40px; }
  .media-player .body,
  .static-card { padding: 16px; }
  .media-gallery { grid-template-columns: repeat(2, 1fr); }
  .not-found-card h1 { font-size: 46px; }
  .not-found-card h2 { font-size: 24px; }
}

@media (max-width: 700px) {
  /* Deliberate departure from the site-wide 16:9 default. On a full-bleed
     phone hero 16:9 is only ~219px tall, which crowds the overlaid title on
     front/article/show.blade.php (it shares this class). A ratio rather than
     a fixed height because a fixed height crops hard from the sides and can
     push an off-center subject half out of frame; a ratio crops top/bottom
     instead, keeping subjects centered. */
  .article-hero {
    aspect-ratio: 3 / 2;
  }
  /* Stronger gradient so overlaid text stays readable on the shorter hero */
  .article-hero__overlay {
    background: linear-gradient(to top, rgba(7,10,28,.96) 0%, rgba(7,10,28,.6) 50%, rgba(7,10,28,.15) 90%);
  }
  .article-top {
    --article-inset: 20px;
  }
  .article-hero__text {
    padding-block: 22px;
  }
  .article-top h1 {
    font-size: 26px;
    line-height: 1.3;
  }
  .article-top .dek {
    font-size: 15px;
  }
}

/* ============================================================
   OPINION LANDING (/articles) — matches Opinion Landing mockups
   ============================================================ */
.op-landing {
  padding: 36px 0 64px;
}
.op-landing__head {
  margin-bottom: 28px;
}
.op-landing__head h1 {
  font-family: var(--f-display);
  font-size: 40px;
  font-weight: 800;
  line-height: 1.15;
  color: var(--ink);
  margin: 0 0 8px;
  letter-spacing: -.02em;
}
.op-landing__dek {
  margin: 0;
  font-size: 15px;
  color: var(--muted);
  line-height: 1.5;
}

.op-landing__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(260px, 0.7fr);
  gap: 48px;
  align-items: start;
}

/* Circular author initial — deliberate departure from 16:9 (avatar, not photo) */
.op-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--navy);
  color: #fff;
  font-family: var(--f-display);
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
  flex-shrink: 0;
  text-decoration: none;
  overflow: hidden;
}
.op-avatar:has(img) {
  background: transparent;
  color: transparent;
}
.op-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Article-feed author initials — larger than the shared .op-avatar baseline */
.op-item__avatar {
  width: 72px;
  height: 72px;
  font-size: 28px;
}
.op-avatar--sm {
  width: 36px;
  height: 36px;
  font-size: 15px;
}

/* ---- Feed items ---- */
.op-feed {
  display: flex;
  flex-direction: column;
}
.op-item {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
}
.op-item:first-child { padding-top: 0; }
.op-item__body { min-width: 0; flex: 1; }
.op-item__title {
  margin: 0 0 8px;
  font-family: var(--f-display);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--ink);
}
.op-item__title a {
  color: inherit;
  text-decoration: none;
}
.op-item__title a:hover { color: var(--navy); }

.op-item__excerpt {
  margin: 0 0 12px;
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--excerpt); /* matches homepage أمنية / تقارير long subtext */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.op-item__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--meta);
  font-weight: 400;
  letter-spacing: -0.12px;
}
.op-item__author {
  color: var(--navy);
  font-weight: 600;
  text-decoration: none;
}
.op-item__meta time { color: var(--meta); }
.op-item__author:hover { text-decoration: underline; }
.op-item__dot { opacity: .55; }

.op-feed__more {
  display: flex;
  justify-content: center;
  padding: 32px 0 8px;
}
.op-feed__more-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: min(100%, 320px);
  padding: 14px 28px;
  border: 1.5px solid var(--navy);
  border-radius: var(--r-md);
  background: #fff;
  color: var(--navy);
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  transition: background .15s, color .15s;
}
.op-feed__more-btn:hover {
  background: var(--navy);
  color: #fff;
}

/* ---- Writers (sidebar + mobile rail) ---- */
.op-writers__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}
.op-writers__head h2 {
  margin: 0;
  font-family: var(--f-display);
  font-size: 18px;
  font-weight: 800;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 8px;
}
.op-writers__head h2::before {
  content: "";
  width: 3px;
  height: 1em;
  background: var(--navy);
  border-radius: 2px;
}
.op-writers__more {
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  text-decoration: none;
  white-space: nowrap;
}
.op-writers__more:hover { color: var(--navy); }

.op-writers--side {
  background: var(--surface-3);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 18px 18px 4px;
  margin-bottom: 28px;
}
.op-writers__grid {
  list-style: none;
  margin: 0;
  padding: 0;
}
.op-writers__grid li {
  border-bottom: 1px solid var(--line);
}
.op-writers__grid li:last-child {
  border-bottom: 0;
}
.op-writers__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  text-decoration: none;
  padding: 14px 0;
  width: 100%;
}
/* Avatar on the visual right (RTL start) — matches writers mock */
.op-writers__row .op-writer-photo { order: -1; }
.op-writers__row:hover .op-writers__name { color: var(--navy); }

/* Circular photo — deliberate departure from 16:9 (portrait avatar) */
.op-writer-photo {
  flex-shrink: 0;
  width: 68px;
  height: 68px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--navy);
  color: #fff;
  font-family: var(--f-display);
  font-size: 26px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.op-writer-photo:has(img) {
  background: transparent;
  color: transparent;
}
.op-writer-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.op-writers__row .op-writers__name,
.op-writers__chip .op-writers__name {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.op-writers--side .op-writers__name {
  font-size: 19px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--ink);
  flex: 1;
  min-width: 0;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  display: -webkit-box;
}

/* Mobile 2-col writers card — hidden on desktop; sits below articles on phone */
.op-writers--mobile {
  display: none;
  margin-top: 36px;
  margin-bottom: 8px;
  background: var(--surface-3);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 16px 14px 6px;
}
.op-writers__cols {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.op-writers__cols li {
  border-bottom: 1px solid var(--line);
  min-width: 0;
}
/* Drop border on the last row (1 or 2 cells) */
.op-writers__cols li:nth-last-child(1),
.op-writers__cols li:nth-last-child(2):nth-child(odd) {
  border-bottom: 0;
}
.op-writers__cell {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 6px;
  text-decoration: none;
  min-width: 0;
  height: 100%;
}
.op-writers__cell .op-writers__name {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.op-writers__cell:hover .op-writers__name { color: var(--navy); }
.op-writer-photo--sm {
  width: 44px;
  height: 44px;
  font-size: 16px;
}

/* ---- Most read ---- */
.op-mostread__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  flex-wrap: nowrap;
}
.op-mostread__head h2 {
  margin: 0;
  font-family: var(--f-display);
  font-size: 18px;
  font-weight: 800;
  color: var(--ink);
  min-width: 0;
}
.op-mostread__tabs {
  display: inline-flex;
  border-radius: 999px;
  background: var(--surface-3);
  padding: 3px;
  gap: 2px;
  flex-shrink: 0;
}
.op-mostread__tabs button {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: 999px;
  cursor: pointer;
  font-family: inherit;
  line-height: 1.2;
}
.op-mostread__tabs button.is-active {
  background: var(--navy);
  color: #fff;
}
.op-mostread__list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-inline-start: 2px solid var(--line);
}
.op-mostread__list.is-hidden,
.op-mostread__list[hidden] { display: none; }
.op-mostread__list li + li { border-top: 1px solid var(--line); }
.op-mostread__list a {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px 0 12px 0;
  padding-inline-start: 14px;
  text-decoration: none;
}
.op-mostread__num {
  flex-shrink: 0;
  font-family: var(--f-display);
  font-size: 22px;
  font-weight: 800;
  line-height: 1.15;
  color: #c5cad6;
  min-width: 1.1em;
  text-align: center;
}
.op-mostread__txt {
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.45;
  color: var(--ink);
}
.op-mostread__list a:hover .op-mostread__txt { color: var(--navy); }
.op-mostread__list a:hover .op-mostread__num { color: var(--navy); }

/* Mobile most-read duplicate — hidden on desktop */
.op-mostread--mobile {
  display: none;
  margin-top: 40px;
  padding-top: 8px;
}

@media (max-width: 960px) {
  .op-landing__grid {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .op-landing__side { display: none; }
  .op-writers--mobile { display: block; }
  .op-mostread--mobile { display: block; }
  .op-landing__head h1 { font-size: 32px; }
  .op-item__title { font-size: 18px; }
  .op-avatar { width: 44px; height: 44px; font-size: 18px; }
  .op-item__avatar { width: 60px; height: 60px; font-size: 24px; }
  .op-item { gap: 14px; padding: 18px 0; }
}

@media (max-width: 640px) {
  .op-landing { padding: 22px 0 48px; }
  .op-landing__head { margin-bottom: 22px; }
  .op-landing__head h1 { font-size: 28px; }
  .op-item__excerpt { -webkit-line-clamp: 3; font-size: 14px; }
  .op-feed__more-btn { width: 100%; min-width: 0; }
}

/* ============================================================
   OPINION ARTICLE (/articles/{id}) — matches Opinion Article mockups
   ============================================================ */
.op-article-page {
  background: #f4f5f7;
}
.op-article {
  padding: 28px 0 64px;
}

.op-article__layout {
  display: grid;
  /* RTL: first col = right (author), center = article, last = left (writers) */
  grid-template-columns: minmax(220px, 260px) minmax(0, 1fr) minmax(240px, 280px);
  gap: 28px;
  align-items: start;
}

.op-article__main {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 32px 36px 40px;
  box-shadow: var(--sh-1);
  min-width: 0;
}

.op-article__kicker {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}
.op-article__kicker::before {
  content: "";
  width: 3px;
  height: 1em;
  background: var(--navy);
  border-radius: 2px;
}
.op-article__kicker a {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  text-decoration: none;
}
.op-article__kicker a:hover { color: var(--navy); }

.op-article__title {
  margin: 0 0 20px;
  font-family: var(--f-display);
  font-size: clamp(28px, 3.2vw, 40px);
  font-weight: 800;
  line-height: 1.25;
  color: var(--ink);
  letter-spacing: -.02em;
}

/* ---- Desktop author card (sidebar) ---- */
.op-article__author-col {
  position: sticky;
  top: 88px;
}
.op-author-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 28px 22px 22px;
  text-align: center;
  box-shadow: var(--sh-1);
}
/* Circular avatar — deliberate departure from 16:9 */
.op-author-card__avatar-wrap {
  position: relative;
  display: inline-block;
  margin-bottom: 14px;
}
.op-author-card__avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: var(--navy);
  color: #fff;
  font-family: var(--f-display);
  font-size: 36px;
  font-weight: 700;
  overflow: hidden;
  text-decoration: none;
}
.op-author-card__avatar:has(img) {
  background: transparent;
  color: transparent;
}
.op-author-card__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.op-author-card__plus {
  position: absolute;
  bottom: 2px;
  /* Visual left of avatar (mock) — physical left, not inline-start in RTL */
  left: 2px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--navy);
  color: #fff;
  border: 2px solid #fff;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}
.op-author-card__name {
  margin: 0 0 8px;
  font-family: var(--f-display);
  font-size: 18px;
  font-weight: 800;
  line-height: 1.3;
}
.op-author-card__name a {
  color: var(--ink);
  text-decoration: none;
}
.op-author-card__name a:hover { color: var(--navy); }
.op-author-card__bio {
  margin: 0 0 16px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--muted);
}
.op-author-card__follow {
  display: block;
  width: 100%;
  padding: 11px 16px;
  border-radius: 10px;
  background: var(--navy);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  text-align: center;
  transition: background .15s;
}
.op-author-card__follow:hover { background: var(--navy-700); color: #fff; }
.op-author-card__stats {
  display: flex;
  justify-content: center;
  gap: 24px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.op-author-card__stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: center;
}
.op-author-card__stat strong {
  font-family: var(--f-display);
  font-size: 18px;
  font-weight: 800;
  color: var(--ink);
  line-height: 1.2;
}
.op-author-card__stat span {
  font-size: 12px;
  color: var(--muted);
}

/* ---- Mobile inline author card ---- */
.op-author-inline {
  display: none;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  margin-bottom: 18px;
  background: #fff;
}
.op-author-inline__avatar-wrap {
  position: relative;
  flex-shrink: 0;
  text-decoration: none;
}
.op-author-inline__avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--navy);
  color: #fff;
  font-family: var(--f-display);
  font-size: 24px;
  font-weight: 700;
  overflow: hidden;
}
.op-author-inline__avatar:has(img) {
  background: transparent;
  color: transparent;
}
.op-author-inline__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.op-author-inline__plus {
  position: absolute;
  bottom: -1px;
  left: -1px; /* visual left of avatar — matches mock */
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--navy);
  color: #fff;
  border: 2px solid #fff;
  font-size: 13px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
}
.op-author-inline__text { min-width: 0; flex: 1; }
.op-author-inline__name {
  display: block;
  font-size: 15px;
  font-weight: 800;
  color: var(--ink);
  text-decoration: none;
  margin-bottom: 4px;
  line-height: 1.3;
}
.op-author-inline__name:hover { color: var(--navy); }
.op-author-inline__bio {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---- Toolbar: byline + actions ---- */
.op-article__toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 0;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}
/* Font-size control row — mirrors the normal article page. Sits below the hairline. */
.op-article__readbar {
  display: flex;
  margin-top: 14px;
  margin-bottom: 24px;
}
.op-article__byline {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1;
  order: 0;
}
.op-article__byline-date {
  font-size: 13.5px;
  color: var(--muted);
  white-space: nowrap;
}

.op-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.op-actions--share { order: 1; }

.op-action {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  text-decoration: none;
  padding: 0;
  transition: border-color .15s, color .15s, background .15s;
}
.op-action:hover {
  border-color: var(--navy);
  color: var(--navy);
}
.op-action.is-active {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
}
.op-action--mobile { display: none; }

.op-article__body {
  max-width: none;
  font-size: calc(17px * var(--reader-scale, 1));
  line-height: 1.9;
  color: var(--ink-2);
}
/* Editor content often pins inline font-sizes (e.g. 12pt spans on sub-headings),
   which override the container size and break the reader font-scale. Force them to
   inherit so --reader-scale governs every line. */
.op-article__body [style*="font-size"] { font-size: inherit !important; }
.op-article__body > p:first-child {
  font-weight: 600;
  color: var(--ink);
}
.op-article__body > p {
  margin: 0 0 1.15em;
}
.op-article__body img {
  max-width: 100%;
  height: auto;
  border-radius: var(--r-md);
}

.op-article__side .op-writers--side {
  margin-bottom: 24px;
}
.op-article__side .op-writers__name {
  font-size: 15px;
}
.op-article__side .op-writer-photo {
  width: 52px;
  height: 52px;
  font-size: 20px;
}

/* ---- Responsive ---- */
@media (max-width: 1100px) {
  .op-article__layout {
    grid-template-columns: minmax(200px, 230px) minmax(0, 1fr);
  }
  .op-article__side { display: none; }
  .op-article__main { padding: 28px 28px 36px; }
  /* Side rail drops out here, so its mobile stand-ins take over from 1100px
     down (the opinion landing switches at 960px — different layout). */
  .op-article-page .op-writers--mobile { display: block; }
  .op-article-page .op-mostread--mobile { display: block; }
}

@media (max-width: 860px) {
  .op-article-page { background: #fff; }
  .op-article { padding: 18px 0 48px; }
  .op-article__layout {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .op-article__author-col,
  .op-article__side { display: none; }
  .op-article__main {
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 8px 0 24px;
    background: transparent;
  }
  .op-article__title {
    font-size: 28px;
    margin-bottom: 16px;
  }
  .op-author-inline { display: flex; }

  .op-article__toolbar {
    flex-wrap: wrap;
    justify-content: space-between;
    margin-bottom: 12px;
  }
  .op-actions--share { order: 1; }
  .op-action--desktop { display: none; }
  .op-action--mobile { display: inline-flex; }
  .op-action { width: 38px; height: 38px; }

  .op-article__body {
    font-size: calc(16px * var(--reader-scale, 1));
    line-height: 1.95;
  }
}

@media (max-width: 480px) {
  .op-article__title { font-size: 24px; }
  .op-action { width: 36px; height: 36px; }
}

/* ============================================================
   AUTHOR / WRITER PAGE (/authors/{title}) — clean rebuild
   ============================================================ */
.au-page { background: #f4f5f7; }
.au { padding: 26px 0 64px; }

/* ---- Breadcrumb ---- */
.au-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 18px;
}
.au-crumbs a { color: var(--muted); text-decoration: none; }
.au-crumbs a:hover { color: var(--navy); }
.au-crumbs span[aria-hidden] { opacity: .5; }
.au-crumbs__current { color: var(--ink); font-weight: 600; }

/* ---- Profile header ---- */
.au-profile {
  display: flex;
  gap: 28px;
  align-items: flex-start;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
  padding: 28px 30px;
  margin-bottom: 34px;
}
/* Rounded-square avatar — deliberate departure from 16:9 (author portrait / initials) */
.au-profile__avatar {
  flex-shrink: 0;
  width: 132px;
  height: 132px;
  border-radius: var(--r-lg);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.au-profile__avatar span {
  font-family: var(--f-display);
  font-size: 52px;
  font-weight: 700;
  color: rgba(255,255,255,.9);
  letter-spacing: 1px;
}
.au-profile__avatar:has(img) {
  background: transparent !important;
}
.au-profile__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }

.au-profile__body { flex: 1; min-width: 0; }
.au-profile__name {
  margin: 0;
  font-family: var(--f-display);
  font-size: 30px;
  font-weight: 800;
  line-height: 1.2;
  color: var(--ink);
  letter-spacing: -.01em;
}
.au-profile__job {
  margin: 6px 0 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--navy);
}
.au-profile__meta {
  list-style: none;
  margin: 16px 0 0;
  padding: 15px 0 0;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 12px 30px;
}
.au-profile__meta li {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
}
.au-profile__meta li span {
  font-size: 11.5px;
  font-weight: 500;
  color: var(--muted);
}
.au-profile__bio {
  margin: 16px 0 0;
  font-size: 15px;
  line-height: 1.75;
  color: var(--ink-2);
}
.au-profile__bio p { margin: 0 0 8px; }
.au-profile__bio p:last-child { margin-bottom: 0; }
.au-profile__share {
  display: flex;
  gap: 10px;
  margin-top: 18px;
}
.au-profile__share a {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-3);
  color: var(--ink-2);
  text-decoration: none;
  transition: background .15s, color .15s;
}
.au-profile__share a:hover { background: var(--navy); color: #fff; }

/* ---- Content grid ---- */
.au-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(258px, 0.8fr);
  gap: 40px;
  align-items: start;
}
.au-main { min-width: 0; }
.au-side { min-width: 0; }

/* ---- Section head ---- */
.au-sec-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 22px;
}
.au-sec-head h2 {
  margin: 0;
  font-family: var(--f-display);
  font-size: 22px;
  font-weight: 800;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 10px;
}
.au-sec-head h2::before {
  content: "";
  width: 4px;
  height: 20px;
  background: var(--navy);
  border-radius: 2px;
}
.au-sec-head__count {
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
  background: var(--surface-3);
  border-radius: 999px;
  padding: 3px 12px;
}

/* ---- Article cards ---- */
.au-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px 24px;
}
.au-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--sh-1);
  transition: box-shadow .18s ease, transform .18s ease;
}
.au-card:hover {
  box-shadow: 0 8px 22px rgba(17,20,40,.10);
  transform: translateY(-2px);
}
.au-card__thumb {
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  position: relative;
  background: linear-gradient(135deg, var(--navy-900, #12163a), var(--navy));
}
.au-card__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.au-card__thumb-ph {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  padding: 14px;
  color: rgba(255,255,255,.95);
  font-family: var(--f-display);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.45;
}
.au-card__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 15px 18px 18px;
  flex: 1;
}
.au-card__title {
  margin: 0;
  font-family: var(--f-display);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.4;
}
.au-card__title a { color: var(--ink); text-decoration: none; }
.au-card__title a:hover { color: var(--navy); }
.au-card__dek {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.au-card__meta {
  margin-top: auto;
  padding-top: 4px;
  font-size: 12px;
  color: var(--meta);
}

/* ---- Sidebar: other articles ---- */
.au-widget {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
  padding: 20px 20px 8px;
  position: sticky;
  top: 88px;
}
.au-widget__head { margin-bottom: 4px; }
.au-widget__head h2 {
  margin: 0;
  font-family: var(--f-display);
  font-size: 18px;
  font-weight: 800;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 8px;
}
.au-widget__head h2::before {
  content: "";
  width: 3px;
  height: 1em;
  background: var(--navy);
  border-radius: 2px;
}
.au-more { list-style: none; margin: 0; padding: 0; }
.au-more__item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}
.au-more__item:last-child { border-bottom: 0; }
.au-more__num {
  flex-shrink: 0;
  font-family: var(--f-display);
  font-size: 18px;
  font-weight: 800;
  line-height: 1.4;
  color: #c5cad6;
  min-width: 1.1em;
  text-align: center;
}
.au-more__link { text-decoration: none; min-width: 0; }
.au-more__title {
  display: -webkit-box;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.45;
  color: var(--ink);
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.au-more__link:hover .au-more__title { color: var(--navy); }
.au-more__by {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  color: var(--muted);
}

.au-empty {
  padding: 34px 24px;
  text-align: center;
  color: var(--muted);
  background: #fff;
  border: 1px dashed var(--line-2);
  border-radius: var(--r-lg);
}

/* ---- Responsive ---- */
@media (max-width: 900px) {
  .au-grid { grid-template-columns: 1fr; gap: 38px; }
  .au-widget { position: static; }
}
@media (max-width: 640px) {
  .au { padding: 16px 0 48px; }
  .au-profile {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 18px;
    padding: 24px 20px;
    margin-bottom: 28px;
  }
  .au-profile__avatar { width: 104px; height: 104px; }
  .au-profile__avatar span { font-size: 40px; }
  .au-profile__name { font-size: 24px; }
  .au-profile__meta { justify-content: center; }
  .au-profile__bio { text-align: right; }
  .au-profile__share { justify-content: center; }
  .au-cards { grid-template-columns: 1fr; gap: 20px; }
  .au-sec-head h2 { font-size: 20px; }
}

/* ==========================================================================
   SEARCH PAGE  (/search)
   --------------------------------------------------------------------------
   The field is the page header: it sits inside the navy .section-hero band
   every other landing page uses, so search reads as part of the site rather
   than as a utility screen bolted on.

   Results are ROWS, not cards. A search result is judged by its headline and
   the matched sentence — the photo is only there to confirm the story. Rows
   fit 12 results in the space a 3-column card grid gives 6, and they keep one
   scan line per result instead of a zigzag.
   ========================================================================== */

/* ---- band ---- */
.srch-hero {
  flex-wrap: wrap;
  gap: 20px 28px;
}
.srch-hero__id { flex: none; }
.srch-hero .crumbs { font-size: 13px; color: rgba(255,255,255,.7); margin-bottom: 6px; }
.srch-hero .crumbs a { color: rgba(255,255,255,.7); text-decoration: none; }
.srch-hero .crumbs a:hover { color: #fff; }
.srch-hero h1 {
  font-family: var(--f-display);
  font-size: 38px; line-height: 1; margin: 0;
  letter-spacing: -.02em; color: #fff;
}

/* The field takes the rest of the band — on a search page the field IS the
   content, so it gets the width. The hint under it says what search covers,
   which is also what keeps the band from reading as one long empty trough. */
.srch-hero__seek { flex: 1 1 380px; min-width: 0; }
.srch-hero__hint {
  margin: 10px 0 0; padding-inline-start: 20px;
  font-size: 13px; color: rgba(255,255,255,.62);
}
.srch-field {
  width: 100%;
  display: flex; align-items: center; gap: 10px;
  padding-inline: 18px 6px;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.34);
  border-radius: 999px;
  transition: background .15s, border-color .15s, box-shadow .15s;
}
.srch-field:focus-within {
  background: #fff;
  border-color: #fff;
  box-shadow: 0 0 0 4px rgba(255,255,255,.16);
}
.srch-field__icon { display: flex; flex: none; color: rgba(255,255,255,.7); transition: color .15s; }
.srch-field__icon svg { display: block; width: 19px; height: 19px; }
.srch-field:focus-within .srch-field__icon { color: var(--muted); }
.srch-field__input {
  flex: 1; min-width: 0;
  padding: 13px 0;
  background: none; border: 0; outline: none;
  font-family: var(--f-body);
  font-size: 16px;   /* 16px keeps iOS Safari from zooming on focus */
  font-weight: 600;
  color: #fff;
}
.srch-field__input::placeholder { color: rgba(255,255,255,.6); font-weight: 500; }
.srch-field:focus-within .srch-field__input { color: var(--ink); }
.srch-field:focus-within .srch-field__input::placeholder { color: var(--muted-2); }
.srch-field__go {
  flex: none;
  padding: 10px 26px; border: 0; border-radius: 999px;
  background: #fff; color: var(--navy);
  font-family: var(--f-display); font-size: 14.5px; font-weight: 700;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.srch-field:focus-within .srch-field__go { background: var(--primary); color: #fff; }
.srch-field__go:hover { background: var(--navy-700); color: #fff; }

.srch-main { padding-bottom: 56px; }

/* ---- summary + sort ---- */
.srch-bar {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 12px 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}
.srch-bar__count { margin: 0; font-size: 14.5px; color: var(--muted); }
.srch-bar__count strong { color: var(--ink); font-weight: 800; font-size: 17px; }
.srch-bar__term { color: var(--ink); font-weight: 700; }

/* segmented control — one line, the active option filled navy */
.srch-sort {
  display: flex; flex: none;
  padding: 3px; border-radius: 999px;
  background: var(--surface-3);
}
.srch-sort__opt {
  padding: 7px 16px; border-radius: 999px;
  font-family: var(--f-display); font-size: 13px; font-weight: 700;
  color: var(--muted); text-decoration: none; white-space: nowrap;
  transition: background .15s, color .15s;
}
.srch-sort__opt:hover { color: var(--ink); }
.srch-sort__opt.is-on { background: var(--primary); color: #fff; }

/* ---- category facets ---- */
.srch-facets {
  display: flex; flex-wrap: wrap; gap: 8px;
  padding: 16px 0 4px;
}
.srch-facet {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 14px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--surface);
  font-size: 13.5px; font-weight: 600; color: var(--ink-2);
  text-decoration: none;
  transition: border-color .15s, color .15s, background .15s;
}
.srch-facet:hover { border-color: var(--primary); color: var(--primary); }
.srch-facet.is-on {
  background: var(--primary); border-color: var(--primary); color: #fff;
}
.srch-facet__n { font-size: 12px; opacity: .62; font-feature-settings: "tnum"; }

/* ---- result rows ---- */
.srch-results { margin-top: 18px; border-top: 1px solid var(--line); }
.srch-row + .srch-row { border-top: 1px solid var(--line); }
.srch-row__link {
  display: grid; grid-template-columns: 1fr 200px; gap: 22px; align-items: start;
  padding: 20px 0;
  text-decoration: none;
}
.srch-row__txt { min-width: 0; }
.srch-row__cat {
  display: block; margin-bottom: 5px;
  font-family: var(--f-display);
  font-size: 12px; font-weight: 700; color: var(--primary);
}
.srch-row__title {
  margin: 0 0 7px;
  font-family: var(--f-display);
  font-size: 20px; font-weight: 700; line-height: 1.45;
  color: var(--ink);
  transition: color .15s;
}
.srch-row__link:hover .srch-row__title { color: var(--primary); }
.srch-row__dek {
  margin: 0 0 8px;
  font-size: 14.5px; line-height: 1.65; color: var(--excerpt);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.srch-row__time { font-size: 12.5px; color: var(--meta); }
.srch-row__thumb {
  width: 200px; aspect-ratio: 16 / 9;
  border-radius: var(--r-md); overflow: hidden;
  background: var(--surface-3) center / cover no-repeat;
}
.srch-row__thumb img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: var(--card-zoom-t);
}
.srch-row__link:hover .srch-row__thumb img { transform: scale(var(--card-zoom)); }
/* No photo on the post — a flat navy wash beats an empty grey hole, and it
   keeps the row's rhythm instead of collapsing the column. */
.srch-row__thumb.is-empty {
  background: linear-gradient(135deg, var(--navy-700), var(--navy-900));
  opacity: .16;
}

/* the matched term, in both headline and excerpt */
.srch-row__title mark,
.srch-row__dek mark {
  background: color-mix(in srgb, var(--yellow) 42%, transparent);
  color: inherit; border-radius: 2px; padding: 0 2px;
}

/* ---- empty / guidance state ---- */
.srch-none {
  padding: 54px 20px 44px;
  text-align: center;
}
.srch-none strong {
  display: block; margin-bottom: 8px;
  font-family: var(--f-display);
  font-size: 23px; font-weight: 800; color: var(--ink);
}
.srch-none span {
  display: block; max-width: 46ch; margin: 0 auto;
  font-size: 15px; line-height: 1.7; color: var(--muted);
}

.srch-pop-head { margin-bottom: 20px; }
.srch-pop {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 28px 24px;
  padding-bottom: 20px;
}
.srch-pop__card { display: block; text-decoration: none; }
.srch-pop__thumb {
  display: block; margin-bottom: 11px;
  aspect-ratio: 16 / 9;
  border-radius: var(--r-md);
  background: var(--surface-3) center / cover no-repeat;
  transition: var(--card-zoom-t);
}
.srch-pop__thumb.is-empty {
  background: linear-gradient(135deg, var(--navy-700), var(--navy-900));
  opacity: .16;
}
.srch-pop__card:hover .srch-pop__thumb { transform: scale(1.015); }
.srch-pop__cat {
  display: block; margin-bottom: 4px;
  font-family: var(--f-display);
  font-size: 12px; font-weight: 700; color: var(--primary);
}
.srch-pop__title {
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  font-family: var(--f-display);
  font-size: 16.5px; font-weight: 700; line-height: 1.5; color: var(--ink);
}
.srch-pop__card:hover .srch-pop__title { color: var(--primary); }

/* ==========================================================================
   SEARCH PAGE — tablet / phone
   The band stacks (title over field), the sort control scrolls sideways
   rather than wrapping into a ragged block, and the result thumb shrinks to
   a confirming stamp beside the headline.
   ========================================================================== */
@media (max-width: 900px) {
  .srch-hero { gap: 16px; }
  .srch-hero h1 { font-size: 27px; }
  .srch-hero__seek { flex-basis: 100%; }
  .srch-hero__hint { margin-top: 9px; padding-inline-start: 16px; font-size: 12.5px; }
  .srch-field { padding-inline: 15px 5px; }
  .srch-field__go { padding: 9px 18px; font-size: 14px; }

  .srch-bar { align-items: flex-start; flex-direction: column; gap: 12px; }
  /* Full-bleed side-scroll: the three sort options don't fit a phone width, and
     wrapping them under the count reads as a broken control. */
  .srch-sort {
    align-self: stretch;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .srch-sort::-webkit-scrollbar { display: none; }
  .srch-sort__opt { flex: 1 0 auto; text-align: center; }

  /* One swipeable row instead of three wrapped ones — same treatment the
     category band's section tabs get, and it keeps ~110px of a phone screen
     for actual results. */
  .srch-facets {
    gap: 7px; padding-top: 14px;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .srch-facets::-webkit-scrollbar { display: none; }
  .srch-facet { flex: 0 0 auto; padding: 6px 12px; font-size: 12.5px; }

  .srch-row__link {
    grid-template-columns: 1fr var(--thumb-row-sm, 137px);
    gap: 14px;
    padding: 16px 0;
  }
  .srch-row__title { font-size: 16.5px; line-height: 1.5; }
  /* The excerpt is the first thing to go on a phone: the headline plus the
     category already answer "is this the story I meant?". */
  .srch-row__dek { display: none; }
  .srch-row__thumb { width: var(--thumb-row-sm, 137px); border-radius: var(--r-sm); }

  .srch-none { padding: 38px 8px 32px; }
  .srch-none strong { font-size: 20px; }
  .srch-pop { grid-template-columns: 1fr 1fr; gap: 22px 16px; }
  .srch-pop__title { font-size: 15px; -webkit-line-clamp: 3; }
}

@media (max-width: 560px) {
  .srch-hero h1 { font-size: 24px; }
  .srch-pop { grid-template-columns: 1fr; gap: 18px; }
  .srch-pop__card { display: grid; grid-template-columns: 1fr var(--thumb-row-sm, 137px); gap: 14px; align-items: start; }
  .srch-pop__thumb { order: 2; width: var(--thumb-row-sm, 137px); margin: 0; border-radius: var(--r-sm); }
  .srch-pop__cat, .srch-pop__title { grid-column: 1; }
  .srch-pop__thumb { grid-column: 2; grid-row: 1 / span 2; }
}

/* ===== ALBUM GALLERY (/albums/{id}) =====
   One photo on stage at a time + a thumbnail rail to pick from. Every slide is
   in the DOM at once and switching only moves .is-active, so there is no image
   re-fetch and no flicker between steps. */
.gal { padding: 26px 0 10px; }

.gal__stage {
  position: relative;
  /* Not 16:9. Album shots are mixed portrait and landscape, and a shared
     frame would crop or letterbox them. The active photo sets the height. */
  aspect-ratio: auto;
  border-radius: var(--r-lg);
  user-select: none;
}

.gal__slide {
  position: absolute; inset: 0; margin: 0;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden;
  pointer-events: none;
  transition: opacity .32s ease;
}
.gal__slide.is-active {
  position: relative;
  inset: auto;
  opacity: 1; visibility: visible;
  pointer-events: auto;
}

/* The old 16:9 stage used a blurred copy to fill the bars. The photo now
   is the frame, so that fill is unused. */
.gal__bg { display: none; }
.gal__photo {
  position: relative; z-index: 1;
  display: block;
  width: auto; height: auto;
  max-width: 100%;
  max-height: 78vh;
  object-fit: contain;
  border-radius: var(--r-lg);
  box-shadow: 0 16px 44px rgba(0, 0, 0, .42);
}

/* Edge scrims — keep the round controls legible over a blown-out sky. */
.gal__stage::before,
.gal__stage::after {
  content: ""; position: absolute; inset-block: 0; width: 108px;
  z-index: 2; pointer-events: none;
  opacity: 0; transition: opacity .2s ease;
}
.gal__stage::before { right: 0; background: linear-gradient(to left,  transparent, rgba(11, 17, 58, .5)); }
.gal__stage::after  { left: 0;  background: linear-gradient(to right, transparent, rgba(11, 17, 58, .5)); }
.gal__stage:hover::before,
.gal__stage:hover::after { opacity: 1; }

.gal__nav {
  position: absolute; z-index: 3; top: 50%; transform: translateY(-50%);
  width: 52px; height: 52px; border-radius: 999px;
  border: 0; cursor: pointer;
  background: rgba(11, 17, 58, .58); backdrop-filter: blur(8px);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  transition: background .16s ease, transform .16s ease, opacity .2s ease;
}
.gal__nav:hover { background: var(--navy); transform: translateY(-50%) scale(1.07); }
.gal__nav:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; opacity: 1; }
.gal__nav svg { width: 24px; height: 24px; }
/* Physical left/right on purpose, not inset-inline-*. The page is RTL and the
   counter below carries its own `direction: ltr`, which silently flips how a
   logical inset resolves on that element — mixing the two here put two controls
   in the same corner. Content flows right-to-left, so "previous" is the right
   edge (chevron pointing right) and "next" is the left edge. */
.gal__nav--prev { right: 16px; }
.gal__nav--next { left: 16px; }
/* Fade the arrows back on desktop so the photo owns the frame; on touch there
   is no hover, so they stay put. */
@media (hover: hover) {
  .gal__nav { opacity: 0; }
  .gal__stage:hover .gal__nav,
  .gal:focus-within .gal__nav { opacity: 1; }
}

/* Top-corner chrome: counter on the RTL reading-start edge (right), tools
   opposite it (left). Physical properties — see the .gal__nav note above. */
.gal__counter {
  position: absolute; z-index: 3;
  top: 14px; right: 14px;
  padding: 6px 13px; border-radius: 999px;
  background: rgba(11, 17, 58, .72); backdrop-filter: blur(6px);
  color: #fff; font-family: var(--f-num); font-size: 13px; font-weight: 700;
  /* "1 / 21" is a numeric pair, not prose — without an LTR isolate the RTL
     paragraph direction flips it on screen to "21 / 1". */
  direction: ltr; unicode-bidi: isolate;
}

.gal__tools {
  position: absolute; z-index: 3;
  top: 14px; left: 14px;
  display: flex; gap: 8px;
}
.gal__tool {
  width: 38px; height: 38px; border-radius: 999px;
  border: 0; cursor: pointer; padding: 0;
  background: rgba(11, 17, 58, .58); backdrop-filter: blur(8px);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  transition: background .16s ease, color .16s ease;
}
.gal__tool svg { width: 18px; height: 18px; }
.gal__tool:hover { background: var(--navy); }
.gal__tool:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
.gal__tool.is-on { background: var(--cyan); color: var(--navy-900); }
/* the play/pause pair swaps by state rather than by re-rendering the icon */
.gal__tool [data-icon-pause] { display: none; }
.gal__tool.is-on [data-icon-play] { display: none; }
.gal__tool.is-on [data-icon-pause] { display: block; }

/* Position rail along the bottom edge — doubles as the slideshow timer. */
.gal__progress {
  position: absolute; z-index: 3; inset-inline: 0; inset-block-end: 0;
  height: 3px; background: rgba(255, 255, 255, .18);
}
.gal__progress i {
  display: block; height: 100%; width: 0;
  background: var(--cyan);
  transition: width .32s ease;
}

/* Caption sits under the photo, not over it. */
.gal__caption {
  margin: 14px 0 0;
  padding: 12px 18px;
  border-radius: var(--r-sm);
  background: #f4f6f8;
  color: var(--ink);
  font-size: 16px;
  line-height: 1.75;
  text-align: center;
  white-space: pre-line;
}

.gal__thumbs {
  display: flex; gap: 10px;
  margin-top: 14px; padding-bottom: 6px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
  /* soft fade on both ends so a 21-shot rail reads as "there is more here"
     rather than ending flush at the container edge */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 28px, #000 calc(100% - 28px), transparent);
          mask-image: linear-gradient(to right, transparent, #000 28px, #000 calc(100% - 28px), transparent);
}
.gal__thumb {
  flex: 0 0 auto; padding: 0; cursor: pointer;
  width: auto; height: 84px;
  /* Same reason as the stage: a thumb is a small copy of the shot, not a 16:9 crop. */
  aspect-ratio: auto;
  border-radius: var(--r-sm); overflow: hidden;
  border: 2px solid transparent;
  background: transparent;
  scroll-snap-align: center;
  opacity: .5;
  transition: opacity .16s ease, border-color .16s ease, transform .16s ease;
}
.gal__thumb img { width: auto; height: 100%; object-fit: contain; display: block; }
.gal__thumb:hover { opacity: .85; transform: translateY(-2px); }
.gal__thumb.is-active { opacity: 1; border-color: var(--cyan); transform: translateY(-2px); }
.gal__thumb:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; opacity: 1; }

/* Native fullscreen: the photo fits the viewport at its own ratio, with the
   rail pinned under it. */
.gal:fullscreen {
  padding: 0; background: #0b0f24;
  display: flex; flex-direction: column; justify-content: center;
}
.gal:fullscreen .gal__stage {
  flex: 1 1 auto; aspect-ratio: auto; border-radius: 0; min-height: 0;
  width: 100%;
  display: flex; align-items: center; justify-content: center;
}
.gal:fullscreen .gal__slide.is-active { height: 100%; width: 100%; }
.gal:fullscreen .gal__photo { max-height: 100%; border-radius: 0; }
.gal:fullscreen .gal__caption {
  flex: 0 0 auto;
  margin: 0;
  border-radius: 0;
  background: #0b0f24;
  color: #fff;
}
.gal:fullscreen .gal__thumbs {
  flex: 0 0 auto; margin: 0; padding: 12px 16px;
  background: #0b0f24;
}
.gal:fullscreen .gal__photo { box-shadow: none; }

.gal__share {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
  margin: 22px 0 4px; padding-top: 18px;
  border-top: 1px solid var(--line);
}
.gal__share-lbl {
  font-size: 13px; font-weight: 700; color: var(--meta);
  margin-inline-end: 2px;
}
.gal__share-btn {
  padding: 7px 16px; border-radius: 999px;
  border: 1px solid var(--line); background: #fff;
  font-size: 13px; font-weight: 600; color: var(--ink-2);
  text-decoration: none;
  transition: background .15s, color .15s, border-color .15s;
}
.gal__share-btn:hover { color: #fff; }
.gal__share-btn--fb:hover { background: #1877f2; border-color: #1877f2; }
.gal__share-btn--x:hover  { background: #000;    border-color: #000; }
.gal__share-btn--tg:hover { background: #229ed9; border-color: #229ed9; }
.gal__share-btn--wa:hover { background: #25d366; border-color: #25d366; }
.gal__more { margin-top: 40px; }

.section-hero__desc .dot { opacity: .5; margin: 0 6px; }

@media (prefers-reduced-motion: reduce) {
  .gal__slide, .gal__progress i, .gal__thumb, .gal__nav { transition: none; }
}

@media (max-width: 640px) {
  .gal { padding: 14px 0 6px; }
  .gal__nav { width: 40px; height: 40px; }
  .gal__nav svg { width: 19px; height: 19px; }
  .gal__nav--prev { right: 8px; }
  .gal__nav--next { left: 8px; }
  .gal__counter { top: 10px; right: 10px; padding: 5px 11px; font-size: 12px; }
  .gal__tools { top: 10px; left: 10px; gap: 6px; }
  .gal__tool { width: 34px; height: 34px; }
  .gal__tool svg { width: 16px; height: 16px; }
  .gal__thumb { height: 64px; width: auto; }
  .gal__stage::before, .gal__stage::after { display: none; }
}

/* ====== Continuous reading (article page) ====== */
/* Each appended article is skipped by layout/paint once scrolled past; the
   intrinsic size keeps the scrollbar honest before a block is first rendered. */
.cont-article {
  content-visibility: auto;
  contain-intrinsic-size: auto 1800px;
}
/* Seam label — takes the crumbs slot at the top of each appended head. No band,
   no rule: the previous article's cream body ending against this white head is
   the separator; the label just names what follows. */
.cont-sep {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  font-size: 13.5px;
  line-height: 1.4;
}
.cont-sep__lbl {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--f-display);
  font-weight: 800;
  color: var(--navy);
  white-space: nowrap;
}
/* diamond marker — same identity as the section headers */
.cont-sep__lbl::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 2px;
  transform: rotate(45deg);
  background: var(--navy);
  flex-shrink: 0;
}
.cont-sep__cat {
  font-weight: 700;
  color: var(--muted);
  white-space: nowrap;
}
.cont-sep__cat::before { content: "·"; margin-inline-end: 10px; opacity: .6; }
/* Appended articles include the same read-bar, so the cloned rail keeps the
   first-line offset from .article-side rather than sitting flush with the bar. */
/* Status row under the last loaded article: spinner / retry button / end note */
.cont-sentinel { min-height: 1px; }
.cont-sentinel.is-loading,
.cont-sentinel.is-manual,
.cont-sentinel.is-end {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 20px 16px 36px;
  font-size: 14px;
  color: var(--muted);
}
.cont-spinner {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid var(--line-2);
  border-top-color: var(--navy);
  animation: cont-spin .8s linear infinite;
}
@keyframes cont-spin { to { transform: rotate(360deg); } }
.cont-btn {
  padding: 10px 22px;
  border-radius: 999px;
  border: 1px solid var(--navy);
  background: white;
  color: var(--navy);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.cont-btn:hover { background: var(--navy); color: #fff; }
@media (prefers-reduced-motion: reduce) {
  .cont-spinner { animation: none; }
}
@media (max-width: 960px) {
  /* single column: the rail already follows the first article; don't repeat it after every block */
  .cont-article .article-side { display: none; }
}


/* =========================================================
   ALSSAA Interactive Journalism — full reading width
   ========================================================= */

.article-body .alssaa-interactive-embed {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 28px 0 !important;
    padding: 0 !important;
}

.article-body .alssaa-interactive-frame {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
}

/* Prevent editor-generated empty paragraphs from affecting the block */
.article-body .alssaa-interactive-embed + p:empty {
    display: none;
}

/* Mobile */
@media (max-width: 960px) {
    .article-body .alssaa-interactive-embed,
    .article-body .alssaa-interactive-frame {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }
}

/* =========================================================
   ALSSAA Interactive Journalism — dynamic iframe height
   Override the generic article iframe height:auto !important
   ========================================================= */

.article-body.post-p iframe.alssaa-interactive-frame {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 100% !important;

    /* Height is controlled dynamically by postMessage */
    height: 600px !important;

    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
}

@media (max-width: 960px) {
    .article-body.post-p iframe.alssaa-interactive-frame {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }
}