/* ====== Alssaa News — Homepage styles ====== */

/* ---------- Hero row ---------- */
.hero {
  padding: 28px 0 10px;
}
.hero .grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  gap: 28px;
}
.hero .lead .thumb {
  aspect-ratio: 16/10; border-radius: var(--r-lg);
  overflow: hidden;
  margin-bottom: 18px;
}
.hero .lead .cat {
  display: inline-block;
  font-size: 12px; font-weight: 700;
  color: var(--primary);
  margin-bottom: 10px;
  letter-spacing: .02em;
}
.hero .lead h1 {
  font-family: var(--f-display);
  font-size: calc(38px * var(--density));
  line-height: 1.2;
  margin: 0 0 14px;
  color: var(--ink);
  font-weight: 700;
  letter-spacing: -.01em;
  text-wrap: balance;
}
.hero .lead { transition: transform .2s ease; }
.hero .lead:hover { transform: translateY(-4px); }
.hero .lead .dek {
  font-size: calc(17px * var(--density));
  color: var(--muted);
  line-height: 1.65;
  margin: 0 0 12px;
  max-width: 62ch;
}
.hero .lead .byline {
  font-size: 13px; color: var(--muted);
  display: flex; gap: 10px; align-items: center;
}
.hero .lead .byline .author {
  color: var(--ink); font-weight: 600;
}

.hero .mid {
  border-inline-start: 1px solid var(--line);
  border-inline-end: 1px solid var(--line);
  padding: 0 28px;
  display: flex; flex-direction: column; gap: 22px;
}
.hero .mid .item {
  padding-bottom: 22px;
  border-bottom: 1px dashed var(--line);
}
.hero .mid .item:last-child { border-bottom: 0; padding-bottom: 0; }
.hero .mid .item .thumb {
  aspect-ratio: 16/10; border-radius: var(--r-md);
  overflow: hidden; margin-bottom: 12px;
}
.hero .mid .item .cat {
  font-size: 11.5px; font-weight: 700;
  color: var(--primary); margin-bottom: 6px;
  display: inline-block;
}
.hero .mid .item h3 {
  font-family: var(--f-display);
  font-size: calc(18px * var(--density));
  line-height: 1.35;
  margin: 0 0 6px;
  font-weight: 700;
}
.hero .mid .item .meta { font-size: 12px; color: var(--muted); }

.hero .side {
  display: flex; flex-direction: column; gap: 2px;
}
.hero .side .head {
  font-size: 13px; font-weight: 700;
  color: var(--ink);
  padding-bottom: 10px;
  border-bottom: 2px solid var(--primary);
  margin-bottom: 6px;
  display: flex; align-items: center; gap: 8px;
}
.hero .side .head .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--primary);
}
.hero .side .item {
  padding: 14px 0;
  border-bottom: 1px dashed var(--line);
  display: grid;
  grid-template-columns: 1fr 86px;
  gap: 14px;
  align-items: center;
}
.hero .side .item:last-child { border-bottom: 0; }
.hero .side .item h4 {
  margin: 0; font-size: 14px;
  line-height: 1.4; font-weight: 600;
}
.hero .side .item .time {
  font-size: 11px; color: var(--muted);
  font-weight: 700;
  display: inline-flex; align-items: center; gap: 4px;
  margin-top: 6px;
}
.hero .side .item .thumb {
  aspect-ratio: 1/1; border-radius: var(--r-sm);
  overflow: hidden;
}

/* ---------- A1 Cinematic Hero ---------- */
.a1-hero {
  padding: 0;
  margin-inline: -28px;
}

.a1-hero__grid {
  display: grid;
  grid-template-columns: 400px 1fr;
  gap: 0;
  min-height: 520px;
}

/* ── News feed column ── */
.a1-hero__feed {
  border-inline-start: 1px solid var(--line);
  padding: 18px 22px;
}
.a1-hero__feed-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 14px;
  border-bottom: 3px solid var(--primary);
  margin-bottom: 4px;
}
.a1-hero__feed-bar {
  width: 4px; height: 20px;
  background: var(--primary);
  border-radius: 2px;
  flex-shrink: 0;
}
.a1-hero__feed-head h2 {
  margin: 0;
  font-family: var(--f-display);
  font-size: 18px;
  font-weight: 800;
  color: var(--ink);
}
/* Feed items */
.a1-hero__feed-item {
  display: grid;
  grid-template-columns: 1fr 88px;
  gap: 14px;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  transition: transform .15s ease;
}
.a1-hero__feed-item:last-child { border-bottom: 0; }
.a1-hero__feed-item:hover { transform: translateX(4px); }

.a1-hero__feed-body { min-width: 0; }
.a1-hero__feed-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
  font-size: 12px;
}
.a1-hero__feed-cat {
  font-weight: 700;
  color: var(--primary);
}
.a1-hero__feed-dot { color: var(--muted); }
.a1-hero__feed-time {
  color: var(--muted);
  font-weight: 500;
}
.a1-hero__feed-title {
  margin: 0;
  font-family: var(--f-display);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--ink);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color .15s;
}
.a1-hero__feed-item:hover .a1-hero__feed-title { color: var(--primary); }

.a1-hero__feed-thumb {
  width: 88px; height: 68px;
  border-radius: 6px;
  overflow: hidden;
  background: var(--surface-3);
  flex-shrink: 0;
}
.a1-hero__feed-thumb img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}

/* ── Lead hero image ── */
.a1-hero__lead {
  position: relative;
  min-height: 520px;
}
.a1-hero__lead-link {
  display: block;
  height: 100%;
}
.a1-hero__lead-img {
  position: relative;
  width: 100%; height: 100%;
  overflow: hidden;
}
.a1-hero__lead-img > img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.a1-hero__lead-grad {
  position: absolute; inset: 0;
  z-index: 1;
  background:
    linear-gradient(to top, rgba(0,0,0,.85) 0%, rgba(0,0,0,.35) 40%, transparent 65%),
    linear-gradient(to right, rgba(0,0,0,.2) 0%, transparent 30%);
}
.a1-hero__lead-overlay {
  position: absolute;
  bottom: 0; right: 0; left: 0;
  padding: 32px 36px;
  z-index: 2; color: #fff;
}
.a1-hero__lead-tag {
  display: inline-block;
  background: rgba(255,255,255,.18);
  color: #fff;
  font-size: 12px; font-weight: 700;
  padding: 4px 12px; border-radius: 4px;
  margin-bottom: 10px;
  backdrop-filter: blur(6px);
}
.a1-hero__lead-overlay h1 {
  font-family: var(--f-display);
  font-size: 32px; line-height: 1.35;
  font-weight: 700; margin: 0;
  color: #fff;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-shadow: 0 2px 16px rgba(0,0,0,.3);
}

/* A1 responsive */
@media (max-width: 1060px) {
  .a1-hero__grid {
    grid-template-columns: 1fr;
    min-height: auto;
  }
  .a1-hero__lead { min-height: 380px; order: -1; }
  .a1-hero__feed {
    border-inline-start: 0;
    padding: 18px 0;
  }
}
@media (max-width: 640px) {
  .a1-hero__lead { min-height: 280px; }
  .a1-hero__lead-overlay { padding: 22px 20px; }
  .a1-hero__lead-overlay h1 { font-size: 22px; -webkit-line-clamp: 2; }
  .a1-hero__feed-item { grid-template-columns: 1fr 68px; gap: 10px; }
  .a1-hero__feed-thumb { width: 68px; height: 52px; }
  .a1-hero__feed-title { font-size: 14px; }
}

/* ---------- A2 Cinematic TOP STORY Hero ---------- */
.a2-hero {
  /* Full-bleed: span the whole viewport width regardless of the container.
     Overrides the `section { max-width: 100% }` rule from tokens.css. */
  position: relative;
  width: 100vw;
  max-width: 100vw;
  inset-inline-start: 50%;
  margin-inline-start: -50vw;
  margin-inline-end: 0;
}
.a2-hero__stage {
  position: relative;
  min-height: 560px;
  height: 62vh;
  max-height: 640px;
  overflow: hidden;
  background: var(--navy-900);
  cursor: grab;
  touch-action: pan-y;
}
.a2-hero__stage.a2-hero--grabbing { cursor: grabbing; }
.a2-hero__stage.a2-hero--grabbing * { user-select: none; }

/* Slides */
.a2-hero__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity .6s ease;
}
.a2-hero__slide.is-active {
  opacity: 1;
  visibility: visible;
}
.a2-hero__media {
  position: absolute;
  inset: 0;
  display: block;
}
.a2-hero__media > img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.a2-hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(to top, rgba(7,10,28,.92) 0%, rgba(7,10,28,.45) 38%, rgba(7,10,28,.12) 60%, transparent 80%),
    linear-gradient(to bottom, rgba(7,10,28,.55) 0%, transparent 28%);
}

/* TOP STORY eyebrow (top-start corner) */
.a2-hero__eyebrow {
  position: absolute;
  top: 26px;
  inset-inline-start: 32px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: start;
  color: #fff;
  pointer-events: none;
}
.a2-hero__eyebrow-en {
  font-family: var(--f-num);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .32em;
  text-transform: uppercase;
  opacity: .92;
}
.a2-hero__eyebrow-ar {
  font-family: var(--f-display);
  font-size: 13px;
  font-weight: 500;
  opacity: .72;
  margin-top: 4px;
}

/* Overlay story text (bottom, right-aligned over image) */
.a2-hero__card {
  position: absolute;
  z-index: 3;
  bottom: 48px;
  inset-inline-start: 40px;
  width: min(840px, calc(100% - 80px));
  text-align: start;
  color: #fff;
}
.a2-hero__tag {
  position: absolute;
  z-index: 3;
  top: 24px;
  left: 32px;
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border-radius: 8px;
  background: var(--primary);
  font-size: 12px;
  font-weight: 800;
  color: #fff;
  white-space: nowrap;
}
.a2-hero__more {
  position: absolute;
  z-index: 3;
  bottom: 48px;
  left: 32px;
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  transition: opacity .15s;
}
.a2-hero__more:hover { opacity: .75; }
.a2-hero__card-title {
  margin: 0;
  font-family: var(--f-display);
  font-size: 30px;
  line-height: 1.4;
  font-weight: 700;
  color: #fff;
  text-align: start;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-shadow: 0 2px 18px rgba(0,0,0,.35);
}
.a2-hero__card-title a { color: inherit; }

/* Side nav arrows */
.a2-hero__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 4;
  width: 44px; height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 50%;
  background: rgba(10,14,35,.42);
  color: #fff;
  cursor: pointer;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition: background .15s, transform .15s;
}
.a2-hero__nav:hover { background: rgba(10,14,35,.78); }
.a2-hero__nav--prev { inset-inline-start: 18px; }
.a2-hero__nav--next { inset-inline-end: 18px; }

/* Dots */
.a2-hero__dots {
  position: absolute;
  z-index: 4;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
}
.a2-hero__dot {
  width: 8px; height: 8px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(255,255,255,.4);
  cursor: pointer;
  transition: width .25s, background .25s;
}
.a2-hero__dot.is-active {
  width: 22px;
  background: #fff;
}

/* 4-card row under the hero */
.a2-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 28px;
}
.a2-card { transition: transform .2s ease; }
.a2-card:hover { transform: translateY(-4px); }
.a2-card__media {
  position: relative;
  display: block;
  width: 100%;
  height: 190px;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--navy);
  margin-bottom: 12px;
}
.a2-card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.a2-card__badge {
  position: absolute;
  top: 12px;
  inset-inline-start: 12px;
  background: var(--primary);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 11px;
  border-radius: 999px;
}
.a2-card__title {
  margin: 0 0 10px;
  font-family: var(--f-display);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.45;
  color: var(--ink);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.a2-card__title a { color: inherit; transition: color .15s; }
.a2-card:hover .a2-card__title a { color: var(--primary); }
.a2-card__meta {
  font-size: 12px;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 8px;
}
.a2-card__dot {
  width: 3px; height: 3px;
  border-radius: 99px;
  background: #c8c5be;
  flex: 0 0 3px;
}

/* A2 responsive */
@media (max-width: 1060px) {
  .a2-hero__stage { min-height: 460px; height: 54vh; }
  .a2-hero__card { bottom: 44px; inset-inline-start: 28px; }
  .a2-hero__card-title { font-size: 24px; }
  .a2-cards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .a2-hero__stage { min-height: 380px; height: 64vh; }
  .a2-hero__eyebrow { top: 16px; inset-inline-start: 18px; }
  .a2-hero__card {
    width: calc(100% - 32px);
    bottom: 40px;
    inset-inline-start: 16px;
  }
  .a2-hero__card-title { font-size: 20px; }
  .a2-hero__nav { width: 38px; height: 38px; }
  .a2-hero__nav--prev { inset-inline-start: 10px; }
  .a2-hero__nav--next { inset-inline-end: 10px; }
  .a2-card__media { height: 160px; }
}

/* ---------- Hero Zone v2 (hz) ---------- */
.hz { padding: 28px 0 10px; }

.hz__head {
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 22px;
}
.hz__bar {
  width: 4px; height: 22px;
  background: var(--primary); border-radius: 2px;
  flex-shrink: 0;
}
.hz__head h2 {
  font-family: var(--f-display);
  font-size: 22px; font-weight: 800;
  margin: 0; color: var(--ink);
  white-space: nowrap;
}
.hz__rule {
  flex: 1; height: 1px;
  background: var(--line);
}

.hz__dot {
  display: inline-block;
  width: 3px; height: 3px;
  border-radius: 99px;
  background: #c8c5be;
  vertical-align: middle;
}

.hz__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  align-items: stretch;
}

/* ── Lead image ── */
.hz__lead-link {
  display: block;
  transition: transform .2s ease;
}
.hz__lead-link:hover { transform: translateY(-4px); }
.hz__lead-img {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  aspect-ratio: 3/2;
}
.hz__lead-img > img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.hz__lead-grad {
  position: absolute; inset: 0;
  z-index: 1;
  background: linear-gradient(to top, rgba(0,0,0,.82) 0%, rgba(0,0,0,.4) 45%, transparent 70%);
}
.hz__lead-overlay {
  position: absolute;
  bottom: 0; right: 0; left: 0;
  padding: 28px 32px;
  z-index: 2; color: #fff;
}
.hz__lead-tag {
  display: inline-block;
  background: rgba(255,255,255,.18); color: #fff;
  font-size: 11px; font-weight: 700;
  padding: 3px 10px; border-radius: 3px;
  margin-bottom: 8px;
  letter-spacing: .02em;
  backdrop-filter: blur(6px);
}
.hz__lead-overlay h1 {
  font-family: var(--f-display);
  font-size: 30px; line-height: 1.35;
  font-weight: 700; margin: 0 0 10px;
  color: #fff;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.hz__lead-overlay p {
  font-size: 15px; line-height: 1.55;
  color: rgba(255,255,255,.82);
  margin: 0 0 10px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.hz__lead-meta {
  font-size: 12px;
  color: rgba(255,255,255,.55);
  display: flex; align-items: center; gap: 8px;
}
.hz__lead-meta .hz__dot { background: rgba(255,255,255,.35); }

/* ── Lead column wrapper ── */
.hz__lead-col {
  display: flex;
  flex-direction: column;
}

/* ── Recent articles list ── */
.hz__timeline {
  margin-top: 12px;
  border-top: 3px solid var(--primary);
}
.hz__timeline-item {
  display: block;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  direction: rtl;
  transition: transform .2s ease;
}
.hz__timeline-item:hover { transform: translateY(-3px); }
.hz__timeline-item:last-child { border-bottom: 0; }
.hz__timeline-item:hover .hz__timeline-title { color: var(--primary); }
.hz__timeline-title {
  font-family: var(--f-display);
  font-size: 15px; font-weight: 700;
  line-height: 1.5;
  color: var(--ink);
  display: block;
  margin-bottom: 6px;
  transition: color .15s;
}
.hz__timeline-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  direction: rtl;
}
.hz__timeline-cat {
  font-size: 11px; font-weight: 700;
  color: #fff;
  background: var(--navy);
  padding: 3px 10px;
  border-radius: var(--r-sm);
  white-space: nowrap;
}
.hz__timeline-time {
  font-size: 12px; font-weight: 500;
  color: var(--muted);
  white-space: nowrap;
}

/* ── Side wrapper (nested 2-col inside the 1fr column) ── */
.hz__side-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  align-items: start;
}

/* ── Mid column (image article cards) ── */
.hz__mid {
  border-inline-end: 1px solid var(--line);
  padding-inline-end: 20px;
  display: flex; flex-direction: column; gap: 14px;
}
.hz__mid-item {
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
  transition: transform .2s ease;
}
.hz__mid-item:hover { transform: translateY(-3px); }
.hz__mid-item:last-child { border-bottom: 0; padding-bottom: 0; }
.hz__mid-thumb {
  display: block;
  position: relative;
  aspect-ratio: 16/9;
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 8px;
  background: var(--navy);
}
.hz__mid-thumb img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.hz__mid-cat {
  position: absolute;
  bottom: 8px; inset-inline-start: 8px;
  font-size: 11px; font-weight: 700;
  color: #fff;
  background: rgba(0,0,0,.6);
  padding: 2px 8px; border-radius: 3px;
  backdrop-filter: blur(4px);
}
.hz__mid-item h3 {
  font-family: var(--f-display);
  font-size: 15px; line-height: 1.35;
  font-weight: 700; margin: 0 0 5px;
  color: var(--ink);
}
.hz__mid-meta {
  font-size: 11px; color: var(--muted);
  display: flex; align-items: center; gap: 6px;
}

/* ── Latest news sidebar ── */
.hz__latest {
  display: flex; flex-direction: column; gap: 2px;
}
.hz__latest-head {
  font-size: 13px; font-weight: 700;
  color: var(--ink);
  padding-bottom: 10px;
  border-bottom: 2px solid var(--primary);
  margin-bottom: 6px;
  display: flex; align-items: center; gap: 8px;
}
.hz__latest-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--primary);
}
.hz__latest-item {
  padding: 10px 0;
  border-bottom: 1px dashed var(--line);
  display: grid;
  grid-template-columns: 1fr 64px;
  gap: 10px;
  align-items: center;
  transition: transform .2s ease;
}
.hz__latest-item:hover { transform: translateY(-3px); }
.hz__latest-item:last-child { border-bottom: 0; }
.hz__latest-item h4 {
  margin: 0; font-size: 13px;
  line-height: 1.4; font-weight: 600;
  color: var(--ink);
}
.hz__latest-time {
  font-size: 11px; color: var(--muted);
  font-weight: 700;
  display: inline-block;
  margin-top: 3px;
}
.hz__latest-thumb {
  aspect-ratio: 1/1; border-radius: 6px;
  overflow: hidden; display: block;
}
.hz__latest-thumb img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}

/* ── Opinion sidebar (matches hero .side style) ── */
.hz__editors {
  display: flex; flex-direction: column; gap: 2px;
}
.hz__editors-head {
  font-size: 16px; font-weight: 700;
  color: var(--ink);
  padding-bottom: 10px;
  border-bottom: 2px solid var(--primary);
  margin-bottom: 6px;
  display: flex; align-items: center; gap: 8px;
}
.hz__editors-head h4 {
  font-size: 16px; font-weight: 700;
  color: var(--ink);
  margin: 0;
}
.hz__editors-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--primary);
}
.hz__editors-item {
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  display: grid;
  grid-template-columns: 1fr 86px;
  gap: 14px;
  align-items: center;
  transition: transform .2s ease;
}
.hz__editors-item:hover { transform: translateY(-3px); }
.hz__editors-item:last-child { border-bottom: 0; }
.hz__editors-body { min-width: 0; }
.hz__editors-title {
  margin: 0;
  font-family: var(--f-display);
  font-size: 14px; line-height: 1.4; font-weight: 600;
}
.hz__editors-title a {
  color: var(--ink);
  text-decoration: none;
  transition: color .15s;
}
.hz__editors-title a:hover { color: var(--primary); }
.hz__editors-time {
  font-size: 11px; font-weight: 700;
  color: var(--muted);
  display: inline-flex; align-items: center; gap: 4px;
  margin-top: 6px;
}
.hz__editors-thumb {
  position: relative;
  display: block;
  aspect-ratio: 1/1;
  border-radius: var(--r-sm);
  overflow: hidden;
  background: var(--line);
}
.hz__editors-thumb img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.hz__editors-thumb .ph-tag {
  position: absolute;
  bottom: 6px;
  right: 6px;
  z-index: 2;
  background: rgba(0,0,0,.6);
  color: #fff;
  padding: 2px 8px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 700;
  backdrop-filter: blur(4px);
  margin: 0;
  letter-spacing: 0;
  left: auto;
  top: auto;
}
/* hz responsive */
@media (max-width: 1060px) {
  .hz__grid { grid-template-columns: 1fr; }
  .hz__lead-img { aspect-ratio: 16/9; }
  .hz__lead { order: -1; }
}
@media (max-width: 640px) {
  .hz__lead-img { aspect-ratio: 4/3; }
  .hz__lead-overlay { padding: 20px 18px; }
  .hz__lead-overlay h1 { font-size: 20px; -webkit-line-clamp: 2; }
  .hz__lead-overlay p { display: none; }
  .hz__side-wrap { grid-template-columns: 1fr; }
  .hz__mid { border: 0; padding: 0; }
  .hz__mid-item h3 { font-size: 14px; }
  .hz__latest-item { grid-template-columns: 1fr 50px; }
}

/* ============================================================
   B1 HERO (/v3) — featured carousel + 3 cards (start/right)
                    · آخر الأخبار live list (end/left)
   ============================================================ */
.b1-hero {
  padding: 28px 0 10px;
  position: relative;
  overflow: hidden; /* clips the ghosted watermark bleeding past the edges */
}

.b1-hero__grid {
  display: grid;
  grid-template-columns: 1.85fr 1fr;
  gap: 26px;
  align-items: stretch;
  /* lift content above the ::before watermark */
  position: relative;
  z-index: 1;
}

/* shared tiny dot separator */
.b1-dot {
  display: inline-block;
  width: 3px; height: 3px;
  border-radius: 99px;
  background: var(--line-2);
  flex-shrink: 0;
}

/* ── Main column ── */
.b1-hero__main { min-width: 0; }

/* ── Featured carousel ── */
.b1-feature { min-width: 0; }
.b1-feature__viewport {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--r-lg);
  overflow: hidden;
  /* Dark well so a 1px seam during a slide reads as photo, not a cream band. */
  background: #121722;
  cursor: grab;
  touch-action: pan-y;
}
.b1-feature__viewport.b1-feature--grabbing { cursor: grabbing; }
.b1-feature__viewport.b1-feature--grabbing * { user-select: none; }
.b1-feature__img {
  position: absolute;
  inset: 0;
  display: block;
  opacity: 0;
  z-index: 0;
  pointer-events: none;
  /* Stay in the stacking context so outgoing/incoming can overlap (true
     crossfade). visibility:hidden on the outgoing slide was instant and
     flashed the viewport background between photos. */
  transition: opacity .45s ease;
}
.b1-feature__img.is-active {
  opacity: 1;
  z-index: 1;
  pointer-events: auto;
}
.b1-feature__img.is-peek {
  opacity: 1;
  z-index: 0;
}
.b1-feature--no-fade .b1-feature__img { transition: none; }
.b1-feature__viewport.b1-feature--grabbing .b1-feature__img.is-active img,
.b1-feature__viewport.b1-feature--grabbing:hover .b1-feature__img.is-active img {
  transform: none;
}
.b1-feature__img img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: var(--card-zoom-t);
}
.b1-feature__viewport:hover .b1-feature__img.is-active img { transform: scale(var(--card-zoom)); }
.b1-feature__tag {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 3;
  font-size: 12px; font-weight: 700;
  color: #fff;
  background: var(--primary);
  padding: 5px 12px;
  border-radius: 8px;
  box-shadow: var(--sh-1);
}
/* arrows (top-end / left in RTL) */
.b1-feature__arrows {
  flex: 0 0 auto;
  display: flex;
  gap: 8px;
}
.b1-feature__arrow {
  width: 34px; height: 34px;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  border-radius: 8px;
  color: var(--ink);
  background: var(--surface-2);
  border: 1px solid var(--line);
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.b1-feature__arrow:hover {
  background: var(--primary);
  color: var(--primary-ink);
  border-color: var(--primary);
}
/* prev/next chevrons (bottom-left over image) */
.b1-feature__nav {
  position: absolute;
  bottom: 14px; left: 14px;
  z-index: 3;
  display: flex;
  gap: 4px;
  padding: 4px;
  border-radius: 99px;
  background: rgba(0, 0, 0, .5);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.b1-feature__chev {
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; cursor: pointer;
  border-radius: 50%;
  color: #fff;
  background: transparent;
  transition: background .15s ease;
}
.b1-feature__chev svg { width: 18px; height: 18px; }
.b1-feature__chev:hover { background: rgba(255, 255, 255, .22); }

.b1-feature__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 16px;
}
.b1-feature__captions { position: relative; flex: 1 1 auto; min-width: 0; }
.b1-feature__caption { display: none; }
.b1-feature__caption.is-active { display: block; }
.b1-feature__title {
  font-family: var(--f-display);
  font-size: 27px; line-height: 1.35;
  font-weight: 800; margin: 0;
  color: var(--ink);
}
.b1-feature__title a {
  color: inherit; text-decoration: none;
  transition: color .15s ease;
}
.b1-feature__title a:hover { color: var(--primary); }

/* Title overlaid on the featured image (root/baseline hero) */
.b1-feature__viewport::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(to bottom,
    rgba(8,13,24,.5), rgba(8,13,24,0) 24%, rgba(8,13,24,0) 56%, rgba(8,13,24,.62));
}
.b1-feature__overlay {
  position: absolute; inset-inline: 0; bottom: 0; z-index: 3;
  padding: 24px 20px 18px;
}
.b1-feature__overlay .b1-feature__title { color: #fff; text-shadow: 0 1px 14px rgba(0,0,0,.4); }
.b1-feature__overlay .b1-feature__title a { color: #fff; }
.b1-feature__overlay .b1-feature__title a:hover { color: #fff; opacity: .9; }

/* ── 3 horizontal cards under the featured story ── */
.b1-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 24px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}
.b1-card {
  display: flex;
  gap: 12px;
  align-items: stretch;
  min-width: 0;
}
.b1-card__body {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column;
}
.b1-card__cat {
  font-size: 12px; font-weight: 800;
  color: var(--primary);
  margin-bottom: 5px;
}
.b1-card__title {
  font-family: var(--f-display);
  font-size: 14px; line-height: 1.45;
  font-weight: 700; margin: 0 0 6px;
  color: var(--ink);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.b1-card__title a {
  color: inherit; text-decoration: none;
  transition: color .15s ease;
}
.b1-card__title a:hover { color: var(--primary); }
.b1-card__time {
  margin-top: auto;
  font-size: 11px; color: var(--muted-2);
  font-family: var(--f-num);
}
.b1-card__thumb {
  flex-shrink: 0;
  width: 96px; height: 72px;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--surface-3);
  align-self: flex-start;
}
.b1-card__thumb img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform .3s ease;
}
.b1-card:hover .b1-card__thumb img { transform: scale(1.05); }

/* ── آخر الأخبار live list (end / left) ── */
/* mobile-only "more" link under the latest list; shown at <=768px in home.mobile.css */
.b1-latest__seemore { display: none; }
.b1-latest {
  min-width: 0;
  /* stretches to the featured story height; list scrolls inside */
  display: flex;
  flex-direction: column;
  min-height: 0;
  /* full-height divider between the main article (right) and this list (left) */
  border-inline-start: 1px solid var(--line);
  padding-inline-start: 26px;
}
/* scroll viewport: fills the space under the head, list scrolls within it.
   absolutely-positioned inner keeps the aside from driving the row height,
   so the featured column defines the height and this matches it. */
.b1-latest__scroll {
  position: relative;
  flex: 1 1 0;
  min-height: 0;
}
.b1-latest__list {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--line-2) transparent;
  padding-inline-start: 8px; /* gap so rows don't sit under the scrollbar */
}
.b1-latest__list::-webkit-scrollbar { width: 6px; }
.b1-latest__list::-webkit-scrollbar-thumb {
  background: var(--line-2); border-radius: 99px;
}
.b1-latest__head {
  position: relative;
  display: flex; align-items: center; gap: 8px;
  padding: 0 0 14px;
  /* full-width hairline runs to the end; a short navy bar accents the title */
  border-bottom: 1px solid var(--line);
}
.b1-latest__head::after {
  content: ""; position: absolute; bottom: -1px; right: 0; left: auto;
  width: 110px; height: 3px; background: var(--primary); border-radius: 3px;
}
.b1-latest__dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--primary); flex-shrink: 0;
}
.b1-latest__title {
  font-family: var(--f-display);
  font-size: 17px; font-weight: 800;
  margin: 0; color: var(--ink);
  white-space: nowrap;
}
.b1-latest__title .rd-head-link {
  color: inherit; text-decoration: none;
  display: inline-flex; align-items: center; gap: 8px;
}
body.home-main .b1-latest__title .rd-head-link:hover { color: var(--navy); }
.b1-latest__item {
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid var(--line-2);
  text-decoration: none;
  transition: transform .2s ease;
}
.b1-latest__item:last-child { border-bottom: 0; }
.b1-latest__item:hover { transform: translateX(-3px); }
.b1-latest__item:hover .b1-latest__hl { color: var(--primary); }
.b1-latest__thumb {
  position: relative;
  flex-shrink: 0;
  /* height only bites on /v2 and /v3 — home-main zeroes it via --ar-photo */
  width: var(--thumb-row); height: 92px;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: linear-gradient(150deg, var(--c1, #2E7CE4), var(--c2, #1A4FA8));
}
.b1-latest__thumb img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.b1-latest__thumb::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to top, rgba(0,0,0,.5) 0%, rgba(0,0,0,0) 48%);
}
.b1-latest__cat {
  position: absolute; left: 10px; bottom: 8px; z-index: 2;
  font-family: var(--f-display);
  font-size: 11px; font-weight: 700; line-height: 1;
  color: #fff;
}
.b1-latest__text {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column;
}
.b1-latest__hl {
  font-family: var(--f-display);
  font-size: 16px; line-height: 1.55;
  font-weight: 700; color: var(--ink);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color .15s ease;
}
.b1-latest__time {
  margin-top: 7px;
  display: inline-flex; align-items: center; gap: 5px;
  /* BBC card-metadata treatment: weight 400, neutral grey, tight tracking */
  font-size: 12px; color: var(--meta);
  font-family: var(--f-body); font-weight: 400; letter-spacing: -0.12px;
}
.b1-latest__time::before {
  content: "•"; color: var(--meta);
  font-size: 15px; line-height: 1;
}

/* ── B1 responsive ── */
@media (max-width: 1060px) {
  .b1-hero__grid { grid-template-columns: 1fr; }
  /* stacked layout is image-dense — the watermark just adds noise */
  .b1-hero::before { display: none; }
  .b1-feature__title { font-size: 23px; }
  /* stacked layout: latest list flows normally, no inner scroll, no divider */
  .b1-latest { display: block; border-inline-start: 0; padding-inline-start: 0; }
  .b1-latest__scroll { position: static; }
  .b1-latest__list { position: static; overflow: visible; padding-inline-start: 0; }
}
@media (max-width: 640px) {
  .b1-cards { grid-template-columns: 1fr; gap: 0; }
  .b1-card { padding: 12px 0; border-bottom: 1px solid var(--line); }
  .b1-card:last-child { border-bottom: 0; }
  .b1-card__title { -webkit-line-clamp: 2; font-size: 15px; }
  .b1-card__thumb { width: 110px; height: 78px; }
  .b1-feature__title { font-size: 20px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   HERO REDESIGNS — Option C (v2) & Option B (v3)
   Both keep the b1-hero structure (main article + آخر الأخبار list); only the
   article switcher and the list scroll-cue differ. Ported from the design
   handoff (design_handoff_news_block), mapped onto our tokens.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Shared legibility scrim + category badge (Option B / v3) ── */
.new-home-v3 .b1-feature__viewport::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(to bottom,
    rgba(8,13,24,.5), rgba(8,13,24,0) 24%, rgba(8,13,24,0) 56%, rgba(8,13,24,.62));
}
.new-home-v3 .b1-feature__tag {
  top: 16px; left: auto; right: 16px;
  font-size: 13px; font-weight: 600;
  padding: 8px 14px; border-radius: 9px;
  box-shadow: 0 4px 14px rgba(8,13,24,.3);
}
.new-home-v3 .b1-feature__title {
  font-size: 26px; font-weight: 700; line-height: 1.55;
}

/* ───────────────────────── Option B (v3) ───────────────────────── */
/* Switcher: hover edge arrows + center dots */
.b1-edge {
  position: absolute; top: 46%; transform: translateY(-50%); z-index: 4;
  width: 44px; height: 44px; border-radius: 99px;
  display: grid; place-items: center;
  background: rgba(12,19,33,.42);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  color: #fff; border: 0; cursor: pointer;
  opacity: 0; transition: opacity .2s ease, background .15s ease;
}
.b1-feature:hover .b1-edge { opacity: 1; }
.b1-edge:hover { background: rgba(12,19,33,.72); }
.b1-edge svg { width: 20px; height: 20px; }
.b1-edge--prev { right: 14px; }   /* RTL: previous on the right */
.b1-edge--next { left: 14px; }

.b1-dots {
  position: absolute; left: 0; right: 0; bottom: 16px; z-index: 4;
  display: flex; justify-content: center; gap: 7px;
}
.b1-dots__dot {
  width: 8px; height: 8px; border-radius: 99px; padding: 0; border: 0;
  background: rgba(255,255,255,.55); cursor: pointer;
  transition: width .28s ease, background .28s ease;
}
.b1-dots__dot.is-active { width: 28px; background: #fff; }

.b1-latest__fade {
  position: absolute; left: 0; right: 0; bottom: 0; height: 78px; z-index: 3;
  background: linear-gradient(to top, var(--surface) 14%, rgba(255,255,255,0));
  pointer-events: none; transition: opacity .25s ease;
}
.b1-latest__more {
  position: absolute; left: 50%; bottom: 10px; z-index: 4;
  width: 40px; height: 40px; border-radius: 99px;
  display: grid; place-items: center;
  background: var(--primary); color: #fff; border: 0; cursor: pointer;
  box-shadow: 0 8px 20px rgba(16,24,40,.32);
  transform: translateX(-50%);
  transition: opacity .25s ease, background .15s ease;
  animation: b1-nudge 1.7s ease-in-out infinite;
}
.b1-latest__more svg { width: 18px; height: 18px; }
.b1-latest__more:hover { background: var(--navy-700); }
@keyframes b1-nudge {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%      { transform: translateX(-50%) translateY(4px); }
}
@media (prefers-reduced-motion: reduce) { .b1-latest__more { animation: none; } }

/* Switcher: top progress bars (autoplay) + thumbnail rail */
.b1-bars {
  position: absolute; top: 0; left: 0; right: 0; z-index: 4;
  display: flex; gap: 5px; padding: 13px 14px;
}
.b1-bars__bar {
  flex: 1; height: 3px; border-radius: 99px; overflow: hidden;
  background: rgba(255,255,255,.4);
}
.b1-bars__fill {
  height: 100%; width: 0; border-radius: 99px; background: #fff;
}
.b1-bars__fill.is-done { width: 100%; }
.b1-bars__fill.is-active { animation: b1-fillbar 5s linear forwards; }
@keyframes b1-fillbar { from { width: 0; } to { width: 100%; } }

.b1-rail { position: relative; display: flex; gap: 12px; margin-top: 16px; }
.b1-rail__item {
  position: relative; z-index: 1; flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; gap: 8px;
  padding: 6px; border: 0; background: transparent; cursor: pointer; text-align: start;
}
.b1-rail__thumb {
  position: relative; display: block; width: 100%; aspect-ratio: 16 / 10;
  border-radius: 8px; overflow: hidden; background: var(--surface-3);
}
.b1-rail__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: var(--card-zoom-t); }
.b1-rail__item:hover .b1-rail__thumb img { transform: scale(var(--card-zoom)); }
.b1-rail__title {
  font-family: var(--f-display);
  font-size: 13px; font-weight: 600; line-height: 1.45; color: var(--ink);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  transition: color .2s ease;
}
.b1-rail__item.is-active .b1-rail__title { color: var(--primary); }
/* single highlight box that slides/resizes to sit over the active card */
.b1-rail__hl {
  position: absolute; top: 0; left: 0; z-index: 0; opacity: 0;
  border: 2px solid var(--primary); border-radius: 12px;
  background: color-mix(in oklab, var(--primary) 7%, white);
  pointer-events: none;
  transition: transform .35s cubic-bezier(.4,0,.2,1),
              width .35s cubic-bezier(.4,0,.2,1),
              height .35s cubic-bezier(.4,0,.2,1),
              opacity .25s ease;
}
.b1-rail__hl.is-ready { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .b1-rail__hl { transition: opacity .25s ease; } }

/* v3 latest: no category chips on thumbnails */
.new-home-v3 .b1-latest__cat { display: none; }
.new-home-v3 .b1-latest__thumb::after { display: none; }

/* Scroll cue: side progress track */
.new-home-v3 .b1-latest__head { justify-content: space-between; }
.new-home-v3 .b1-latest__head .b1-latest__titlewrap {
  display: flex; align-items: center; gap: 8px; min-width: 0;
}
.b1-latest__count {
  flex: 0 0 auto;
  font-size: 12.5px; font-weight: 600; color: var(--primary);
  background: color-mix(in oklab, var(--primary) 9%, white);
  padding: 4px 11px; border-radius: 99px;
}
.new-home-v3 .b1-latest__list {
  scrollbar-width: none; padding-inline-start: 0; padding-left: 20px;
}
.new-home-v3 .b1-latest__list::-webkit-scrollbar { display: none; }
.new-home-v3 .b1-latest__dot { background: var(--navy); }
/* Root (v1) latest list: swap the native scrollbar for v3's navy side track */
.home-main .b1-latest__list {
  scrollbar-width: none; padding-inline-start: 0; padding-left: 20px;
  overscroll-behavior: auto; /* hit the bottom → continued scroll flows into the page (root only) */
}
.home-main .b1-latest__list::-webkit-scrollbar { display: none; }
.b1-vtrack {
  position: absolute; left: 2px; top: 6px; bottom: 6px; width: 5px; z-index: 3;
  border-radius: 99px; background: var(--surface-3);
}
.b1-vthumb {
  position: absolute; left: 0; width: 5px; border-radius: 99px;
  background: var(--primary); transition: top .08s linear;
}

/* ---------- Category strip (colored tiles) ---------- */
.catstrip { padding: 32px 0 8px; }
.catstrip .grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 14px;
}
.catstrip a.tile {
  aspect-ratio: 1/1;
  border-radius: var(--r-md);
  padding: 18px;
  display: flex; flex-direction: column;
  justify-content: space-between;
  color: white;
  position: relative;
  overflow: hidden;
  transition: transform .2s ease;
}
.catstrip a.tile:hover { transform: translateY(-2px); }
.catstrip a.tile .name {
  font-family: var(--f-display);
  font-size: 18px; font-weight: 700;
  margin: 0;
}
.catstrip a.tile .count {
  font-size: 11.5px; opacity: .85;
  font-family: var(--f-num);
}
.catstrip a.tile .ic {
  align-self: flex-end;
  width: 28px; height: 28px;
  opacity: .9;
}

/* ---------- title-on-gradient placeholder ---------- */
.ph-title {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  text-align: center;
  z-index: 1;
}
.ph-title span {
  font-family: var(--f-display);
  font-size: 16px;
  font-weight: 700;
  color: rgba(255,255,255,.92);
  line-height: 1.65;
  text-shadow: 0 1px 4px rgba(0,0,0,.25);
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.lead .ph-title span { font-size: 22px; }
.side .thumb .ph-title span { font-size: 11px; -webkit-line-clamp: 2; line-height: 1.4; }

/* ---------- 3-col story grid ---------- */
.storygrid { padding: 6px 0; }
.storygrid .wrap {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px 28px;
}

/* ---------- Two-column: feature + sidebar ---------- */
.feature-split {
  display: grid;
  grid-template-columns: 2.3fr 1fr;
  gap: 44px;
  padding: 0;
}
.feature-split aside {
  background: white;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  padding: 22px;
  height: fit-content;
  position: sticky;
  top: 160px;
}
.feature-split aside .hdr {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: 10px; margin-bottom: 6px;
  border-bottom: 2px solid var(--primary);
}
.feature-split aside .hdr h3 {
  margin: 0; font-size: 15px;
  font-family: var(--f-display);
}

/* ---------- Opinion row ---------- */
.opinion { background: white; padding: 36px 0; border-radius: var(--r-md); }
.opinion .wrap {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
}
.opinion .op-card {
  display: flex; flex-direction: column;
  border-inline-end: 1px solid var(--line);
  padding-inline-end: 24px;
}
.opinion .op-card:last-child { border-inline-end: 0; padding-inline-end: 0; }
.opinion .op-card .author-row {
  display: flex; gap: 12px; align-items: center;
  margin-bottom: 14px;
}
.opinion .op-card .avatar {
  width: 52px; height: 52px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--cyan), var(--navy));
  color: white; font-weight: 700; font-size: 18px;
  flex-shrink: 0;
}
.opinion .op-card .author .name {
  font-size: 14.5px; font-weight: 700; color: var(--ink);
  margin: 0;
}
.opinion .op-card .author .role {
  font-size: 12px; color: var(--muted);
  margin-top: 2px;
}
.opinion .op-card h3 {
  font-family: var(--f-display);
  font-size: 17px; line-height: 1.4;
  margin: 0 0 8px;
  font-weight: 700;
}
.opinion .op-card p {
  font-size: 13.5px; color: var(--muted);
  line-height: 1.65; margin: 0;
}
.opinion .op-card .time {
  font-size: 12px; color: var(--muted-2);
  margin-top: 10px;
}

/* ---------- Live strip ---------- */
.livestrip {
  background: var(--navy-900);
  color: white;
  border-radius: var(--r-lg);
  padding: 28px 32px;
  position: relative;
  overflow: hidden;
  margin-top: 10px;
}
.livestrip::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(500px 260px at 85% 30%, rgba(220,89,80,.25), transparent);
}
.livestrip .wrap {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 32px;
  align-items: center;
}
.livestrip .label {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 700; letter-spacing: .06em;
  color: var(--red);
  margin-bottom: 14px;
}
.livestrip .label .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--red); animation: livepulse 1.2s infinite;
}
.livestrip h2 {
  font-family: var(--f-display);
  font-size: 30px; line-height: 1.25;
  margin: 0 0 14px; font-weight: 700;
}
.livestrip p { opacity: .82; margin: 0 0 20px; line-height: 1.65; max-width: 42ch; }
.livestrip .cta {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 20px; border-radius: 999px;
  background: var(--red); color: white; font-weight: 700;
  font-size: 14px;
}
.livestrip .cta svg { width: 14px; height: 14px; }
.livestrip .stats {
  display: flex; gap: 24px; margin-top: 20px;
  font-size: 13px;
}
.livestrip .stats .s { display: flex; flex-direction: column; gap: 2px; }
.livestrip .stats .s .num-v {
  font-family: var(--f-num); font-size: 22px;
  font-weight: 700; color: white;
}
.livestrip .stats .s .lbl { color: rgba(255,255,255,.6); font-size: 12px; }
.livestrip .player {
  aspect-ratio: 16/9;
  border-radius: var(--r-md);
  overflow: hidden;
  background: linear-gradient(135deg, #2b348a, #0b0e24);
  position: relative;
  border: 1px solid rgba(255,255,255,.1);
}
.livestrip .player .play {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.livestrip .player .play .btn {
  width: 72px; height: 72px; border-radius: 999px;
  background: rgba(255,255,255,.92); color: var(--navy-900);
  display: flex; align-items: center; justify-content: center;
  transition: transform .2s; box-shadow: 0 8px 28px rgba(0,0,0,.3);
}
.livestrip .player .play:hover .btn { transform: scale(1.08); }
.livestrip .player .play .btn svg { width: 28px; height: 28px; margin-inline-start: 4px; }
.livestrip .player .badge-live {
  position: absolute; top: 14px; inset-inline-start: 14px;
  background: var(--red); color: white;
  padding: 4px 10px; border-radius: 4px;
  font-size: 11px; font-weight: 700; letter-spacing: .05em;
  display: inline-flex; align-items: center; gap: 6px;
}
.livestrip .player .badge-live .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: white; animation: livepulse 1.2s infinite;
}
.livestrip .player .ticker-low {
  position: absolute; bottom: 0; left: 0; right: 0;
  background: rgba(0,0,0,.55); color: white;
  padding: 10px 16px; font-size: 13px;
  backdrop-filter: blur(6px);
  border-top: 1px solid rgba(255,255,255,.08);
}

/* ---------- Video grid ---------- */
.videogrid .wrap {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.videogrid .vid {
  position: relative;
}
.videogrid .vid .thumb {
  aspect-ratio: 16/10; border-radius: var(--r-md);
  overflow: hidden; margin-bottom: 10px;
}
.videogrid .vid .play {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, calc(-50% - 18px));
  width: 48px; height: 48px; border-radius: 999px;
  background: rgba(255,255,255,.92);
  display: flex; align-items: center; justify-content: center;
  color: var(--navy);
  box-shadow: 0 6px 18px rgba(0,0,0,.3);
}
.videogrid .vid .play svg { width: 18px; height: 18px; margin-inline-start: 3px; }
.videogrid .vid .dur {
  position: absolute; top: 14px; inset-inline-end: 14px;
  background: rgba(0,0,0,.7); color: white;
  padding: 3px 8px; border-radius: 4px;
  font-size: 11px; font-weight: 600;
  font-family: var(--f-num);
}
.videogrid .vid h4 {
  font-family: var(--f-display);
  font-size: 14.5px; line-height: 1.4;
  margin: 0 0 4px; font-weight: 600;
}
.videogrid .vid .meta { font-size: 12px; color: var(--meta); font-weight: 400; letter-spacing: -0.12px; }

/* ---------- Weather + markets widget ---------- */
.widget {
  background: white;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 18px 20px;
}
.widget h4 {
  font-size: 13px; margin: 0 0 12px; font-weight: 700;
  color: var(--ink);
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
  display: flex; justify-content: space-between; align-items: center;
}
.widget h4 small { color: var(--muted); font-weight: 500; }

.mk-table {
  display: grid; gap: 0;
  font-size: 13px;
}
.mk-table .r {
  display: grid; grid-template-columns: 1fr auto auto;
  gap: 12px; padding: 10px 0;
  border-bottom: 1px dashed var(--line);
  align-items: center;
}
.mk-table .r:last-child { border-bottom: 0; }
.mk-table .r .sym { font-weight: 600; color: var(--ink); }
.mk-table .r .val { font-family: var(--f-num); font-weight: 600; }
.mk-table .r .chg {
  font-family: var(--f-num); font-size: 12px;
  padding: 2px 8px; border-radius: 4px;
  font-weight: 600;
}
.mk-table .r .chg.up   { color: #0a7f4f; background: #e6f7ef; }
.mk-table .r .chg.down { color: #b9342b; background: #fce8e6; }

/* ---------- Tags row ---------- */
.tagsrow {
  display: flex; flex-wrap: wrap; gap: 8px;
  padding: 18px 0;
}

/* ---------- Video Reels section ---------- */
.reels-section { margin-top: 32px; }

.reels-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}
.reels-controls {
  display: flex; align-items: center; gap: 10px;
}
.reels-more {
  font-size: 13px; font-weight: 600;
  color: var(--primary);
}
.reels-more:hover { text-decoration: underline; }
.rnb {
  width: 36px; height: 36px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: white;
  color: var(--ink);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: all .15s;
  flex-shrink: 0;
}
.rnb svg { width: 16px; height: 16px; }
.rnb:hover:not(:disabled) { background: var(--primary); border-color: var(--primary); color: white; }
.rnb:disabled { opacity: .3; cursor: default; }

.reels-viewport {
  overflow-x: auto;
  overflow-y: visible;
  scrollbar-width: none;
  cursor: grab;
  -webkit-overflow-scrolling: touch;
}
.reels-viewport::-webkit-scrollbar { display: none; }
.reels-viewport.dragging { cursor: grabbing; user-select: none; }

.reels-track {
  display: flex;
  gap: 16px;
}

.reel-card {
  /* 6 visible: (100% - 5 gaps) / 6 */
  flex: 0 0 calc((100% - 80px) / 6);
  display: flex; flex-direction: column;
  text-decoration: none;
  transition: transform .2s ease;
}
.reel-card:hover { transform: translateY(-4px); }
.reel-thumb {
  aspect-ratio: 9/16;
  border-radius: var(--r-lg);
  position: relative;
  overflow: hidden;
  margin-bottom: 12px;
  transition: transform .22s ease;
}
.reel-card:hover .reel-thumb { transform: scale(1.025); }

.reel-thumb .ph-inner { padding: 14px 14px 0; }

.reel-play-btn {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
}
.reel-play-btn svg {
  width: 56px; height: 56px;
  color: white;
  filter: drop-shadow(0 4px 14px rgba(0,0,0,.45));
  opacity: .9;
  transition: transform .18s ease, opacity .18s;
}
.reel-card:hover .reel-play-btn svg { transform: scale(1.13); opacity: 1; }

.reel-dur {
  position: absolute;
  bottom: 12px; inset-inline-start: 12px;
  background: rgba(0,0,0,.72);
  color: white;
  padding: 3px 8px; border-radius: 4px;
  font-size: 11px; font-weight: 600;
  font-family: var(--f-num);
  backdrop-filter: blur(4px);
}
.reel-platform {
  position: absolute;
  bottom: 12px; inset-inline-end: 12px;
  padding: 3px 8px; border-radius: 4px;
  font-size: 11px; font-weight: 800;
  letter-spacing: .03em;
}
.reel-platform.yt { background: #ff0000; color: white; }
.reel-platform.x  { background: #000;    color: white; }

.reel-info h4 {
  font-family: var(--f-display);
  font-size: 14px; line-height: 1.45;
  margin: 0 0 4px; font-weight: 600;
  color: var(--ink);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color .15s;
}
.reel-meta { font-size: 12px; color: var(--muted); }

/* Reels responsive */
@media (max-width: 960px) {
  /* 3 visible: (100% - 2 gaps) / 3 */
  .reel-card { flex: 0 0 calc((100% - 32px) / 3); }
}
@media (max-width: 640px) {
  /* 2 visible: (100% - 1 gap) / 2 */
  .reel-card { flex: 0 0 calc((100% - 16px) / 2); }
  .reels-head { flex-wrap: wrap; gap: 10px; }
}

/* ---------- End Reels ---------- */

/* ---------- Redesign v2: section-head bar ---------- */
.rd-section-head {
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 22px;
}
.rd-section-head .bar {
  width: 4px; height: 22px; border-radius: 2px;
  background: var(--primary);
  flex-shrink: 0;
}
.rd-section-head h3 {
  margin: 0; font-size: 22px; font-weight: 800;
  color: var(--ink);
  font-family: var(--f-display);
  white-space: nowrap;
}
.rd-section-head .rule { flex: 1; height: 1px; background: var(--line); }
.rd-section-head .more {
  font-size: 13px; font-weight: 600; color: var(--muted);
  display: flex; align-items: center; gap: 6px;
  white-space: nowrap;
}
.rd-section-head .more:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Clickable section title: the <a> wraps the title text (and any icon). Renders
   identical to the old plain <h3> by default — affordance/chevron are layered on
   per-context below so the v2/v3 demos stay visually unchanged. */
.rd-section-head .rd-head-link {
  color: inherit; text-decoration: none;
  display: inline-flex; align-items: center; gap: 10px;
}
.rd-head-chev { display: none; }   /* hidden everywhere by default (desktop + v2/v3) */

/* Root route only (body.home-main): desktop keeps the "view all" pill and adds a
   hover tint on the title; mobile drops the pill + the inline hairline and marks
   the title with a chevron affordance (no divider above the header). */
body.home-main .rd-section-head .rd-head-link:hover { color: var(--accent, var(--primary)); }
@media (max-width: 640px) {
  /* BBC-style section separator: a thick rule across the top of each section
     header (their 2px near-black, ported to navy). Marks where one section
     ends and the next begins. The v3x-dark video band opts out below. */
  body.home-main .rd-section-head {
    border-top: 2px solid var(--navy);
    padding-top: 18px;
  }
  body.home-main .rd-section-head .more,
  body.home-main .rd-section-head .rule { display: none; }
  body.home-main .rd-section-head .rd-head-chev {
    display: inline-flex; align-items: center;
    color: var(--accent, var(--primary));
    font-size: 0;   /* hide the legacy "←" glyph; the chevron is drawn below */
  }
  body.home-main .rd-section-head .rd-head-chev::before {
    content: ""; display: inline-block;
    width: 6px; height: 6px;
    border: solid currentColor; border-width: 0 2px 2px 0;
    transform: rotate(135deg);   /* RTL: chevron points left, toward "more" */
  }
  /* Video band on mobile: drop the hairline entirely and pull the "فيديو"
     title up so the strip itself owns more of the band. Desktop keeps the
     inline rule (untouched — this is mobile-only). */
  body.home-main .v3x-dark .rd-section-head {
    border-top: none;
    padding-top: 0;
    margin-bottom: 14px;
  }
  body.home-main .v3x-dark .rd-section-head .rd-head-chev { color: rgba(255, 255, 255, .9); }
  /* Tighten the band's vertical padding so videos take more of the section. */
  body.home-main .v3x-dark .rd-section { padding-top: 22px; padding-bottom: 26px; }
}

/* ---------- Redesign v2: 4-col category grid ---------- */
.rd-cat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
/* Must stay above the breakpoints below, which reset the track count. */
.rd-cat-grid--3 { grid-template-columns: repeat(3, 1fr); }
.rd-cat-grid article .thumb {
  width: 100%; height: 170px;
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 12px;
  position: relative;
  background: var(--navy);
}
.rd-cat-grid article .thumb img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.rd-cat-grid article h4 {
  font-family: var(--f-display);
  margin: 0 0 10px; font-size: 17px;
  font-weight: 700; line-height: 1.45;
  color: var(--ink);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  min-height: calc(1.45em * 2); /* reserve 2 lines so meta baselines match across the row */
}
.rd-cat-grid article {
  display: flex; flex-direction: column; height: 100%;
  transition: transform .2s ease;
}
.rd-cat-grid article:hover { transform: translateY(-4px); }
.rd-cat-grid article .meta {
  margin-top: auto;
  font-size: 12px; color: var(--meta); font-weight: 400; letter-spacing: -0.12px;
  display: flex; align-items: center; gap: 8px;
}
.rd-cat-grid article .meta .dot {
  width: 3px; height: 3px; border-radius: 99px;
  background: #c8c5be; flex: 0 0 3px;
}

/* ---------- v3: Podcasts grid (audio episodes) ---------- */
.rd-podcast-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.pod-card { display: block; transition: transform .2s ease; }
.pod-card:hover { transform: translateY(-4px); }
.pod-card__art {
  position: relative;
  width: 100%; aspect-ratio: 1 / 1;
  border-radius: 8px; overflow: hidden;
  margin-bottom: 12px;
  background: var(--navy);
}
.pod-card__art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pod-card__art::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(0,0,0,.45) 100%);
}
.pod-card__badge {
  position: absolute; bottom: 10px; inset-inline-end: 10px;
  z-index: 1;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: 99px;
  background: var(--primary); color: #fff;
  box-shadow: 0 4px 14px rgba(0,0,0,.28);
  transition: transform .2s ease;
}
.pod-card:hover .pod-card__badge { transform: scale(1.08); }
.pod-card__badge svg { width: 18px; height: 18px; margin-inline-start: 2px; }
.pod-card__title {
  font-family: var(--f-display);
  margin: 0 0 8px; font-size: 16px;
  font-weight: 700; line-height: 1.45;
  color: var(--ink);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.pod-card .meta {
  font-size: 12px; color: var(--meta); font-weight: 400; letter-spacing: -0.12px;
  display: flex; align-items: center; gap: 8px;
}
.pod-card .meta .dot {
  width: 3px; height: 3px; border-radius: 99px;
  background: #c8c5be; flex: 0 0 3px;
}

/* ---------- v3: Infographics grid (visual explainers) ---------- */
.rd-info-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.info-card { display: block; transition: transform .2s ease; }
.info-card:hover { transform: translateY(-4px); }
.info-card__frame {
  position: relative;
  width: 100%; aspect-ratio: 4 / 3;
  border-radius: 8px; overflow: hidden;
  margin-bottom: 12px;
  background: var(--surface-3);
  border: 1px solid var(--line);
}
.info-card__frame img { width: 100%; height: 100%; object-fit: contain; display: block; transition: transform .4s ease; }
.info-card:hover .info-card__frame img { transform: scale(1.03); }
.info-card__badge {
  position: absolute; top: 12px; inset-inline-start: 12px;
  z-index: 1;
  font-size: 11px; font-weight: 700;
  color: #fff; background: var(--primary);
  padding: 4px 10px; border-radius: 99px;
}
.info-card__title {
  font-family: var(--f-display);
  margin: 0; font-size: 17px;
  font-weight: 700; line-height: 1.5;
  color: var(--ink);
}

/* ================================================================
   v3 category verticals — varied layouts so the page isn't one
   repeated 4-up grid: lead+list, mosaic, dense headlines, people.
   ================================================================ */

/* ---- Layout: lead + headline list ---- */
.rd-lead { display: grid; grid-template-columns: 1.6fr minmax(0, 1fr); gap: 30px; align-items: start; }
.rd-lead__hero { min-width: 0; }
.rd-lead__media {
  display: block; width: 100%; aspect-ratio: 16 / 9;
  border-radius: 8px; overflow: hidden; background: var(--navy);
  margin-bottom: 15px;
}
.rd-lead__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: var(--card-zoom-t); }
.rd-lead__hero:hover .rd-lead__media img { transform: scale(var(--card-zoom)); }
.rd-lead__title {
  font-family: var(--f-display);
  margin: 0; font-size: 27px; line-height: 1.34; font-weight: 800; color: var(--ink);
}
.rd-lead__title a { color: inherit; }
.rd-lead__title a:hover { color: var(--primary); }
.rd-lead__excerpt { display: none; margin: 8px 0 0; font-size: 15px; line-height: 1.6; color: var(--excerpt); /* BBC-style near-black subtext */ }
.rd-lead__sep { display: none; }   /* separator between lead + rest; root-mobile only */
.rd-lead .meta { font-size: 12px; color: var(--meta); font-weight: 400; letter-spacing: -0.12px; display: flex; align-items: center; gap: 8px; }
.rd-lead .meta .dot { width: 3px; height: 3px; border-radius: 99px; background: #c8c5be; flex: 0 0 3px; }
.rd-lead__list { list-style: none; margin: 0; padding: 0; min-width: 0; }
.rd-lead__item { border-bottom: 1px solid var(--line); min-width: 0; }
.rd-lead__item:last-child { border-bottom: 0; }

/* The list column is sized to exactly the lead PHOTO's height, so the four
   thumbnails form a band that lines up top-and-bottom with the main image —
   instead of stretching to the full hero (photo + headline) and letting the
   last thumb spill down past the photo, beside the headline.

   The photo is 16:9 and the columns are 1.6fr : 1fr, so
     photo_height = list_width × (1.6 × 9/16) = list_width × 0.9,
   which makes the list's own ratio 1 / 0.9 = 10 / 9. Recompute this if the
   column ratio or the photo ratio ever changes. align-self falls back to
   `start` (from .rd-lead) so the aspect-ratio drives the height rather than
   stretching to the taller hero. Below 960px the columns stack and the rows
   go back to natural height. */
@media (min-width: 961px) {
  .rd-lead__list { aspect-ratio: 10 / 9; display: flex; flex-direction: column; }
  /* min-height:0 lets the rows shrink to the aspect-ratio height; without it
     each row's content floor (min-height:auto) keeps the list taller than the
     photo and the band overshoots again. */
  .rd-lead__item { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; justify-content: center; }
}
.rd-lead__link {
  display: flex; gap: 13px; padding: 13px 0; align-items: center;
  min-width: 0; overflow: hidden;
}
.rd-lead__item:first-child .rd-lead__link { padding-top: 0; }
.rd-lead__lthumb { flex: 0 0 84px; width: 84px; height: 60px; border-radius: 6px; overflow: hidden; background: var(--navy); }
/* Desktop list thumbs run much larger. Width only — the height follows from the
   16:9 aspect-ratio in the body.home-main block, which zeroes the 60px above.
   Must stay after the base rule: @media adds no specificity, so source order decides. */
@media (min-width: 961px) {
  .rd-lead__lthumb { flex: 0 0 var(--thumb-row-lg); width: var(--thumb-row-lg); }
}
.rd-lead__lthumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rd-lead__lbody { min-width: 0; flex: 1; overflow: hidden; }
.rd-lead__ltitle {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  max-width: 100%;
  overflow: hidden;
  font-family: var(--f-display); font-size: 15px; font-weight: 700; line-height: 1.5; color: var(--ink);
  transition: color .15s ease;
}
.rd-lead__link:hover .rd-lead__ltitle { color: var(--primary); }
/* Card-metadata treatment (shared): weight 400, neutral grey, tight tracking */
.rd-lead__ltime { display: block; margin-top: 5px; font-size: 12px; color: var(--meta); font-weight: 400; letter-spacing: -0.12px; }

/* ---- Layout: mosaic (lead tile + overlay tiles) ---- */
.rd-mosaic { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 152px; gap: 14px; }
.rd-mosaic__tile { position: relative; border-radius: 8px; overflow: hidden; background: var(--navy); display: block; }
.rd-mosaic__tile--lead { grid-column: span 2; grid-row: span 2; }
.rd-mosaic__img { position: absolute; inset: 0; }
.rd-mosaic__img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: var(--card-zoom-t); }
.rd-mosaic__tile:hover .rd-mosaic__img img { transform: scale(var(--card-zoom)); }
.rd-mosaic__shade { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 38%, rgba(0,0,0,.8) 100%); }
.rd-mosaic__cap { position: absolute; inset-inline: 0; bottom: 0; padding: 14px; z-index: 1; }
.rd-mosaic__cat {
  display: inline-block; margin-bottom: 7px; font-size: 11px; font-weight: 700;
  color: #fff; background: var(--primary); padding: 3px 9px; border-radius: 99px;
}
.rd-mosaic__title {
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  font-family: var(--f-display); color: #fff; font-weight: 700; line-height: 1.4; font-size: 14px;
  text-shadow: 0 1px 8px rgba(0,0,0,.55);
}
.rd-mosaic__tile--lead .rd-mosaic__cap { padding: 20px; }
.rd-mosaic__tile--lead .rd-mosaic__title { font-size: 23px; line-height: 1.35; }

/* ---- Layout: dense headline list (2-col) ---- */
.rd-headlines { display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px; }
.rd-headline { display: flex; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--line); align-items: center; }
.rd-headline__thumb { flex: 0 0 78px; width: 78px; height: 62px; border-radius: 6px; overflow: hidden; background: var(--navy); }
.rd-headline__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rd-headline__body { min-width: 0; flex: 1; }
.rd-headline__title {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  font-family: var(--f-display); font-size: 15px; font-weight: 700; line-height: 1.5; color: var(--ink);
  transition: color .15s ease;
}
.rd-headline:hover .rd-headline__title { color: var(--primary); }
.rd-headline__time { display: block; margin-top: 5px; font-size: 12px; color: var(--meta); font-weight: 400; letter-spacing: -0.12px; }

/* ---- Layout: wide list cards (big thumb + excerpt, 2-col) ---- */
.rd-list { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 30px; position: relative; z-index: 1; }
.rd-list__card { display: flex; gap: 22px; align-items: stretch; position: relative; z-index: 1; }
.rd-list__thumb {
  /* Big landscape photo — ~half the card, so it reads close to the موسوعة
     (encyclopedia) card photos while the card keeps its horizontal
     image-beside-text layout. A percentage (not the shared --thumb-row-lg
     token, which cat-lead's dense headline rows still use at 160px) keeps it
     proportional to the card across widths. Height follows from the 16:9
     aspect-ratio in the home-main block; the 116px is the pre-16:9 fallback.
     Below 640px the card stacks and the thumb goes full-width (see @640).
     Held a touch under half (42%) so the text column stays wide enough to read
     as a real summary rather than a squished ribbon — image still prominent. */
  flex: 0 0 42%; width: 42%; height: 116px;
  border-radius: 8px; overflow: hidden; background: var(--navy);
}
.rd-list__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: var(--card-zoom-t); }
.rd-list__card:hover .rd-list__thumb img { transform: scale(var(--card-zoom)); }
.rd-list__body { min-width: 0; display: flex; flex-direction: column; }
.rd-list__title {
  font-family: var(--f-display); font-size: 19px; font-weight: 700; line-height: 1.4; color: var(--ink);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  transition: color .15s ease;
}
.rd-list__card:hover .rd-list__title { color: var(--primary); }
.rd-list__excerpt {
  margin-top: 8px; font-size: 14.5px; color: var(--excerpt); line-height: 1.65; /* BBC-style near-black subtext */
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
.rd-list__time { margin-top: auto; padding-top: 8px; font-size: 12px; color: var(--meta); font-weight: 400; letter-spacing: -0.12px; }
/* Closing "more" button: mobile only — desktop already has the header's more link */
.rd-list__seemore { display: none; }

/* ---- Layout: people rail (circular portraits) ---- */
.rd-people { display: flex; gap: 28px; overflow-x: auto; padding: 6px 2px 16px; scrollbar-width: none; }
.rd-people::-webkit-scrollbar { display: none; }
.person-chip { flex: 0 0 auto; width: 172px; display: flex; flex-direction: column; align-items: center; gap: 13px; text-align: center; }
.person-chip__avatar {
  width: 156px; height: 156px; border-radius: 50%; overflow: hidden;
  background: var(--navy); border: 3px solid var(--line);
  transition: border-color .2s ease, transform .2s ease;
}
.person-chip:hover .person-chip__avatar { border-color: var(--primary); transform: translateY(-3px); }
.person-chip__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.person-chip__name { font-family: var(--f-display); font-size: 15px; font-weight: 800; color: var(--ink); line-height: 1.3; }
.person-chip:hover .person-chip__name { color: var(--primary); }
.person-chip__role { font-size: 11.5px; color: var(--muted); line-height: 1.45; }

/* ---- "scroll for more" lazy feed ---- */
.rd-feed__sentinel { height: 1px; }
.rd-feed__sentinel.is-loading {
  height: 56px; position: relative;
}
.rd-feed__sentinel.is-loading::after {
  content: ''; position: absolute; left: 50%; top: 50%;
  width: 26px; height: 26px; margin: -13px 0 0 -13px;
  border: 3px solid var(--line); border-top-color: var(--primary);
  border-radius: 50%; animation: rd-feed-spin .7s linear infinite;
}
@keyframes rd-feed-spin { to { transform: rotate(360deg); } }

/* ---------- Redesign v2: 3-col video grid ---------- */
.rd-video-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.rd-video-grid article .vid-thumb {
  position: relative; width: 100%; height: 200px;
  border-radius: 6px; overflow: hidden;
  background: var(--navy);
}
.rd-video-grid article .vid-thumb img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.rd-video-grid .vid-play {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center; z-index: 3;
}
.rd-video-grid .vid-play span {
  width: 56px; height: 56px; border-radius: 99px;
  background: rgba(34,41,99,.88);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 16px rgba(0,0,0,.4);
}
.rd-video-grid .vid-dur {
  position: absolute; bottom: 10px; left: 10px; z-index: 3;
  padding: 2px 8px; background: rgba(0,0,0,.75);
  color: #fff; font-size: 11px; font-weight: 600; border-radius: 3px;
}
.rd-video-grid article h4 {
  font-family: var(--f-display);
  margin: 12px 0 8px; font-size: 16px;
  font-weight: 700; line-height: 1.45;
  color: var(--ink);
}
.rd-video-grid article { transition: transform .2s ease; }
.rd-video-grid article:hover { transform: translateY(-4px); }
.rd-video-grid article .meta {
  font-size: 12px; color: var(--meta); font-weight: 400; letter-spacing: -0.12px;
  display: flex; align-items: center; gap: 8px;
}
.rd-video-grid article .meta .dot {
  width: 3px; height: 3px; border-radius: 99px;
  background: #c8c5be; flex: 0 0 3px;
}

/* ---------- Redesign v2: Most-read with sidebar ---------- */
.rd-most-read {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 28px;
}
/* No vertical ad → the articles take the whole row as a 4-up, so the
   reserved 340px column doesn't sit empty on the left. */
.rd-most-read--full { grid-template-columns: 1fr; }
.rd-most-read--full .rd-most-read__articles { grid-template-columns: repeat(4, 1fr); }
.rd-most-read__articles {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
.rd-most-read article {
  display: flex; flex-direction: column; height: 100%;
}
.rd-most-read article .thumb {
  width: 100%; height: 180px;
  border-radius: 6px; overflow: hidden;
  margin-bottom: 12px; position: relative;
  background: var(--navy);
}
.rd-most-read article .thumb img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: var(--card-zoom-t);
}
.rd-most-read article:hover .thumb img { transform: scale(var(--card-zoom)); }
.rd-most-read article .kicker {
  display: inline-block; font-size: 12px;
  font-weight: 700; color: var(--primary); letter-spacing: .02em;
}
.rd-most-read article h4 {
  font-family: var(--f-display);
  margin: 6px 0 10px; font-size: 17px;
  font-weight: 700; line-height: 1.45; color: var(--ink);
  transition: color .15s ease;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  min-height: calc(1.45em * 2); /* reserve 2 lines so meta baselines match across the row */
}
.rd-most-read article:hover h4 { color: var(--primary); }
.rd-most-read article .meta {
  margin-top: auto;
  /* BBC card-metadata treatment: weight 400, neutral grey, tight tracking */
  font-size: 12px; color: var(--meta); font-weight: 400; letter-spacing: -0.12px;
  display: flex; align-items: center; gap: 8px;
}
.rd-most-read article .meta .dot {
  width: 3px; height: 3px; border-radius: 99px;
  background: #c8c5be; flex: 0 0 3px;
}
/* The lead summary is a mobile-only promo line (.rd-dj, home.mobile.css) */
.dj-excerpt { display: none; }

.rd-trending {
  background: var(--bg-card, var(--surface-2));
  border-radius: 6px; padding: 20px;
  align-self: start;
}
.rd-trending .hdr {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px;
}
.rd-trending .hdr h4 { margin: 0; font-size: 16px; font-weight: 800; }
.rd-trending .hdr span { font-size: 11px; color: var(--muted); }
.rd-trending ol {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column;
}
.rd-trending li {
  display: grid; grid-template-columns: 28px 1fr;
  gap: 12px; padding: 10px 0;
  align-items: flex-start;
}
.rd-trending li + li { border-top: 1px solid var(--line); }
.rd-trending li .n {
  font-size: 22px; font-weight: 800;
  font-family: var(--f-display); line-height: 1;
}
.rd-trending li:nth-child(-n+3) .n { color: var(--primary); }
.rd-trending li:nth-child(n+4) .n { color: var(--muted); }
.rd-trending li a {
  font-family: var(--f-display);
  font-size: 14px; font-weight: 600; line-height: 1.5;
  color: var(--ink);
  transition: color .15s ease;
}
.rd-trending li:hover a { color: var(--primary); }
.rd-trending .tags-section { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
.rd-trending .tags-label { font-size: 12px; color: var(--muted); margin-bottom: 8px; }
.rd-trending .tags-wrap { display: flex; gap: 6px; flex-wrap: wrap; }
.rd-trending .chip {
  padding: 4px 10px; background: #fff;
  border: 1px solid var(--line); border-radius: 99px;
  font-size: 12px; font-weight: 600; color: var(--ink);
}

/* ---------- Vertical ad slot (auto-hidden when no ad is booked) ---------- */
.rd-ad--vertical { align-self: stretch; }
.rd-ad--placeholder {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 8px;
  height: 100%; min-height: 600px; padding: 24px; text-align: center;
  border: 1.5px solid rgba(34, 41, 99, 0.30); border-radius: 6px;
  color: var(--navy);
  background: linear-gradient(150deg,
    rgba(34, 41, 99, 0.18) 0%,
    rgba(34, 41, 99, 0.07) 50%,
    rgba(34, 41, 99, 0.18) 100%);
}
.rd-ad__tag { font-size: 15px; font-weight: 800; color: var(--navy); letter-spacing: .02em; }
.rd-ad__size { font-size: 12px; font-weight: 600; opacity: .75; }
.rd-ad__note { font-size: 11px; line-height: 1.5; max-width: 200px; opacity: .7; }

/* ---------- Top billboard ad — full-width band above the masthead ---------- */
.top-ad {
  display: block;
  width: 100%;
  background: var(--surface-3);
  border-bottom: 1px solid var(--line);
}
.top-ad__inner {
  max-width: 1320px;
  margin: 0 auto;
  padding: 16px 28px;
  display: flex;
  justify-content: center;
}
.top-ad__slot {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 6px;
  width: 100%; max-width: 970px; min-height: 250px;
  padding: 20px; text-align: center;
  border: 1.5px solid rgba(34, 41, 99, 0.30); border-radius: 6px;
  color: var(--navy);
  background: linear-gradient(150deg,
    rgba(34, 41, 99, 0.18) 0%,
    rgba(34, 41, 99, 0.07) 50%,
    rgba(34, 41, 99, 0.18) 100%);
}
@media (max-width: 900px) {
  .top-ad__inner { padding: 12px 16px; }
}
@media (max-width: 640px) {
  .top-ad__slot { min-height: 100px; max-width: 336px; padding: 14px; }
  .top-ad__size { font-size: 11px; }
}

/* ---------- Redesign v2: Opinion cards (magazine strip) ---------- */
.rd-opinion-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.rd-opinion-grid .op-card {
  display: flex; flex-direction: column;
  border-radius: 12px;
  text-decoration: none;
  background: #fff;
  border: 1px solid var(--line);
  padding: 18px 18px 14px;
  transition: border-color .2s ease;
}
.rd-opinion-grid .op-card:hover {
  border-color: #cfcabf;
}

/* Author header (avatar + name/role) */
.op-card__head { display: flex; align-items: center; gap: 11px; margin-bottom: 14px; }
.op-card__avatar {
  flex: 0 0 44px; width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--a1, #6E43A6), var(--a2, #3A1E63));
  color: #fff; font-family: var(--f-display); font-weight: 800; font-size: 15px;
  letter-spacing: .02em;
  overflow: hidden;
}
.op-card__avatar:has(img) {
  background: transparent;
  background-image: none;
  color: transparent;
}
.op-card__avatar img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.op-card__meta { min-width: 0; display: flex; flex-direction: column; }
.op-card__author-name { font-size: 14px; font-weight: 700; color: var(--ink); line-height: 1.3; }
.op-card__author-role { font-size: 11.5px; color: var(--muted); line-height: 1.3; margin-top: 2px; }

/* Body */
.op-card__body { flex: 1; }
.op-card__body h4 {
  font-family: var(--f-display);
  margin: 0 0 9px; font-size: 17px;
  font-weight: 700; line-height: 1.45;
  color: var(--ink);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.op-card:hover .op-card__body h4 { color: var(--primary); }
.op-card__body p {
  margin: 0; font-size: 13px;
  color: var(--excerpt); line-height: 1.6; /* BBC-style near-black subtext (matches cat-list) */
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}

/* Footer */
/* ---------- Redesign v2: Tech + Poll 2-col ---------- */
.rd-tech-poll {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 28px;
  align-items: start;
}
/* No poll sidebar → articles span the full width as a 4-up row */
.rd-tech-poll--full { grid-template-columns: 1fr; }
.rd-tech-poll--full .rd-tech-articles { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 860px) {
  .rd-tech-poll--full .rd-tech-articles { grid-template-columns: repeat(2, 1fr); }
}

/* ── Tech article cards ── */
.rd-tech-articles {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
.rd-tech-card {
  display: flex; flex-direction: column; height: 100%;
}
.rd-tech-card:hover .rd-tech-thumb img { transform: scale(var(--card-zoom)); }
.rd-tech-thumb {
  width: 100%; height: 170px;
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 12px;
  background: var(--navy);
}
.rd-tech-thumb img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: var(--card-zoom-t);
}
.rd-tech-card h4 {
  font-family: var(--f-display);
  margin: 0 0 10px; font-size: 17px;
  font-weight: 700; line-height: 1.45;
  color: var(--ink);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  min-height: calc(1.45em * 2); /* reserve 2 lines so meta baselines match across the row */
}
.rd-tech-card h4 a:hover { color: var(--primary); }
.rd-tech-card .meta {
  margin-top: auto;
  font-size: 12px; color: var(--meta); font-weight: 400; letter-spacing: -0.12px;
  display: flex; align-items: center; gap: 8px;
}
.rd-tech-card .meta .dot {
  width: 3px; height: 3px; border-radius: 99px;
  background: #c8c5be; flex: 0 0 3px;
}

/* ── Poll sidebar ── */
.rd-poll {
  background: var(--bg-card, var(--surface-2));
  border-radius: 8px;
  padding: 22px 20px;
}
.rd-poll__head {
  display: flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 700; color: var(--primary);
  padding-bottom: 14px;
  border-bottom: 2px solid var(--primary);
  margin-bottom: 16px;
}
.rd-poll__question {
  font-family: var(--f-display);
  font-size: 17px; font-weight: 700;
  line-height: 1.55; color: var(--ink);
  margin: 0 0 18px;
}
.rd-poll__options {
  display: flex; flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}
.rd-poll__option {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 6px;
  cursor: pointer;
  transition: all .15s;
}
.rd-poll__option:hover {
  border-color: var(--primary);
  background: color-mix(in oklab, var(--primary) 4%, white);
}
.rd-poll__option input[type="radio"] {
  accent-color: var(--primary);
  width: 16px; height: 16px;
  flex-shrink: 0;
}
.rd-poll__option span {
  font-size: 14px; font-weight: 600;
  color: var(--ink); cursor: pointer;
  flex: 1;
}
.rd-poll__submit {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%;
  background: var(--primary); color: #fff;
  border: 0; border-radius: 6px;
  padding: 11px 20px;
  font-size: 14px; font-weight: 700;
  cursor: pointer;
  transition: background .15s;
}
.rd-poll__submit:hover { background: var(--navy-900); }
.rd-poll__meta {
  margin-top: 12px;
  font-size: 12px; color: var(--muted);
  text-align: center;
}

/* Responsive */
@media (max-width: 960px) {
  .rd-tech-poll { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .rd-tech-articles { grid-template-columns: 1fr; }
  .rd-poll { padding: 18px 16px; }
  .rd-poll__question { font-size: 15px; }
}

/* ---------- Opinion Poll section (poll2) ----------
   Same 1.6fr / 1fr sizes as سياسة (.rd-lead), flipped: choices on the
   right (1fr), lead photo on the left (1.6fr × 16:9, same box as
   .rd-lead__media). Areas keep mobile stacking as photo then choices. */
.poll2 {
  --poll-navy:       #1f2a5c;
  --poll-opt-bg:     var(--surface-2);
  --poll-opt-border: #e6e2d6;
  --poll-muted:      #5f6273;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 1.6fr;
  grid-template-areas: "panel hero";
  gap: 30px;
  align-items: start;
  font-family: 'Tajawal', system-ui, sans-serif;
  direction: rtl;
}
.poll2--no-img {
  grid-template-columns: 1fr;
  grid-template-areas: "panel";
}

.poll2__hero { grid-area: hero; min-width: 0; }
.poll2__media {
  display: block; width: 100%; aspect-ratio: 16 / 9;
  border-radius: var(--r-photo, 8px); overflow: hidden; background: var(--navy);
  position: relative;
}
.poll2__img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.poll2__media--ph { background: #efece2; }
.poll2__ph {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  background: repeating-linear-gradient(135deg, #e7e3d7 0 14px, #efece4 14px 28px);
}
.poll2__ph span { color: #a8a496; font-size: 14px; font-weight: 500; }

.poll2__panel {
  grid-area: panel;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.poll2__q {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 22px;
  line-height: 1.35;
  color: var(--ink);
  margin: 0;
}
.poll2__desc {
  color: var(--poll-muted);
  font-size: 14.5px;
  line-height: 1.7;
  margin: 0;
}

.poll2__options {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 4px 0 0;
}
.poll2__opt {
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: 12px;
  width: 100%; text-align: start;
  background: var(--poll-opt-bg);
  border: 1px solid var(--poll-opt-border);
  border-radius: 8px;
  padding: 12px 14px;
  font-family: 'Tajawal', system-ui, sans-serif;
  font-size: 15px; font-weight: 600; color: #2a2e45;
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.poll2__opt:hover { border-color: #cfcab9; }
.poll2__opt:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--poll-navy);
}
.poll2__opt.is-selected {
  border-color: var(--poll-navy);
  box-shadow: inset 0 0 0 1px var(--poll-navy);
  background: #fff;
}
.poll2__opt-dot {
  flex: 0 0 16px; width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid #b9b6ab; position: relative; z-index: 1;
  transition: border-color .15s;
}
.poll2__opt.is-selected .poll2__opt-dot { border-color: var(--poll-navy); }
.poll2__opt.is-selected .poll2__opt-dot::after {
  content: ''; position: absolute; inset: 3px; border-radius: 50%;
  background: var(--poll-navy);
}
.poll2__opt-label { flex: 1 1 auto; position: relative; z-index: 1; min-width: 0; }
.poll2__opt-pct {
  font-family: var(--f-display); font-weight: 700; font-size: 14px;
  color: var(--poll-navy); position: relative; z-index: 1;
  opacity: 0; transition: opacity .35s ease .15s; white-space: nowrap;
}
.poll2.is-revealed .poll2__opt-pct { opacity: 1; }
.poll2__opt-bar {
  position: absolute; top: 0; bottom: 0; inset-inline-start: 0;
  width: 0; z-index: 0;
  background: rgba(31,42,92,.10);
  transition: width .8s cubic-bezier(.25,.8,.3,1);
}

.poll2__vote {
  margin-top: auto;
  width: 100%;
  background: var(--poll-navy); color: #fff;
  font-family: 'Tajawal', system-ui, sans-serif; font-weight: 700; font-size: 15px;
  border: 0; border-radius: 8px; padding: 12px 28px; cursor: pointer;
  transition: opacity .15s, background .15s;
}
.poll2__vote:disabled { opacity: .45; cursor: not-allowed; }
.poll2__vote.is-locked { opacity: 1; background: #2a3566; cursor: default; }
.poll2__thanks {
  margin: 10px 0 0; color: var(--poll-navy);
  font-family: 'Tajawal', system-ui, sans-serif; font-weight: 700; font-size: 14px;
}

/* Same idea as .rd-lead__list: stretch the choices column to the photo
   so the vote button sits on the image baseline. */
@media (min-width: 961px) {
  .poll2:not(.poll2--no-img) { align-items: stretch; }
  .poll2:not(.poll2--no-img) .poll2__panel { min-height: 0; }
}

@media (max-width: 960px) {
  .poll2 {
    grid-template-columns: 1fr;
    grid-template-areas: "hero" "panel";
    gap: 18px;
  }
  .poll2__media--ph { display: none; }
  .poll2__q { font-size: 20px; }
}

/* ---------- Redesign v2: Newsletter ---------- */
.rd-newsletter {
  background: var(--navy); color: #fff;
  padding: 48px 0; margin-top: 24px;
}
.rd-newsletter .inner {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 48px; align-items: center;
  max-width: 1280px;
  margin: 0 auto; padding: 0 24px;
}
.rd-newsletter h2 {
  font-family: var(--f-display);
  margin: 0; font-size: 28px; font-weight: 700; line-height: 1.4;
}
.rd-newsletter h2 .hl { color: var(--orange); }
.rd-newsletter > .inner > div > p {
  margin: 14px 0 0; color: rgba(255,255,255,.7);
  font-size: 15px; line-height: 1.7;
}
.rd-newsletter .features {
  display: flex; gap: 18px; margin-top: 22px; flex-wrap: wrap;
}
.rd-newsletter .feat {
  display: flex; gap: 10px; align-items: flex-start;
  flex: 1 1 200px;
}
.rd-newsletter .feat .ic {
  width: 28px; height: 28px; border-radius: 99px;
  background: rgba(245,134,47,.15); color: var(--orange);
  display: flex; align-items: center; justify-content: center;
  flex: 0 0 28px; font-size: 14px;
}
.rd-newsletter .feat strong { color: #fff; font-size: 14px; }
.rd-newsletter .feat .sub {
  color: rgba(255,255,255,.55); font-size: 12px; margin-top: 2px;
}
.rd-newsletter .form-box {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 8px; padding: 28px;
}
.rd-newsletter .form-box label {
  display: block; font-size: 13px;
  color: rgba(255,255,255,.7); margin-bottom: 8px;
}
.rd-newsletter .form-row {
  display: flex; gap: 10px;
}
.rd-newsletter .form-row input {
  flex: 1; background: #fff; border: 0;
  border-radius: 6px; padding: 14px 16px;
  font-size: 14px; color: var(--ink);
}
.rd-newsletter .form-row button {
  background: var(--orange); color: #fff; border: 0;
  border-radius: 6px; padding: 0 28px;
  font-weight: 800; font-size: 15px; cursor: pointer;
}
.rd-newsletter .form-box .disclaimer {
  margin: 14px 0 0; font-size: 12px;
  color: rgba(255,255,255,.5); line-height: 1.6;
}
.rd-newsletter .form-box .disclaimer a { color: #fff; text-decoration: underline; }

/* ---------- Redesign v2: white/beige alternating bg ---------- */
.rd-bg-white { background: #fff; }
.rd-bg-beige { background: var(--surface-3); }
.rd-section { padding: 32px 0; }
.rd-section .container { max-width: 1280px; margin: 0 auto; padding: 0 24px; }

/* ============================================================
   v3 SECTION BANDS — warm beige alternation + one navy anchor.
   Scoped to .new-home-v3 so v1/v2 are untouched. The band wrappers
   carry inline `margin:0 -24px; padding:0 24px`; we override that to
   a true full-viewport bleed and re-align the inner content to the
   container width (1320 − 56 = 1264 → half-width 632).
   ============================================================ */
.new-home-v3 .rd-bg-white {
  position: relative;
  max-width: none;
  width: 100vw;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  padding-left: max(28px, calc(50vw - 632px)) !important;
  padding-right: max(28px, calc(50vw - 632px)) !important;
}

/* Partial wrappers use inline -24px breakout; align to container (28px) on v3 */
.new-home-v3 main.container > div[style*="margin: 0 -24px"] {
  max-width: none;
  width: 100vw;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  padding-left: max(28px, calc(50vw - 632px)) !important;
  padding-right: max(28px, calc(50vw - 632px)) !important;
}

/* Banded sections read warm beige (the tint already used by the
   trending/poll sidebars), so "band" finally differs from white. */
.new-home-v3 .rd-bg-white { background: var(--surface-3); }

/* ============================================================
   v3 SECTION HEADERS — accent diamond + kufi title + double rule.
   One identity shared by custom zones, partials, and feed batches.
   Per-section tint comes from --accent (inline on the element).
   Scoped to .new-home-v3 so v1/v2 keep the old plain header.
   ============================================================ */
.new-home-v3 .rd-section-head {
  gap: 15px;
  margin-bottom: 26px;
}

/* Small rotated-square tick beside the title */
.new-home-v3 .rd-section-head .bar {
  width: 13px;
  height: 13px;
  border-radius: 3.5px;
  transform: rotate(45deg);
  background: var(--navy);
  margin-inline: 3px;
  flex-shrink: 0;
}

.new-home-v3 .rd-section-head h3 {
  font-family: 'Noto Kufi Arabic', var(--f-display);
  background: none;
  color: var(--ink);
  padding: 0;
  font-size: 23px;
  font-weight: 800;
  line-height: 1.4;
}
.new-home-v3 .rd-section-head h3 svg { color: var(--accent) !important; }

/* connecting double rule (newspaper) + quiet "more" link with sliding arrow */
.new-home-v3 .rd-section-head .rule {
  height: 1px;
  background: var(--line);
  border: none;
}
.new-home-v3 .rd-section-head .more {
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 700;
}
.new-home-v3 .rd-section-head .more span {
  display: inline-block;
  transition: transform .2s ease;
}
.new-home-v3 .rd-section-head .more:hover {
  color: var(--navy);
  text-decoration: none;
}
.new-home-v3 .rd-section-head .more:hover span { transform: translateX(-4px); }

/* ── شخصيات: auto-scroll marquee (RTL — items travel right, appear from left) ── */
/* Auto-scrolling people rail. This is now a REAL horizontal scroll container:
   JS gently drifts scrollLeft for the "cool" auto-scroll, and because it's a
   native scroller the reader can also swipe/drag to jump straight to a specific
   person (important on mobile, where the strip is long and waiting for the auto
   loop is slow). direction:ltr keeps the scrollLeft math standard (0 = start);
   the Arabic chip text still renders RTL inside each chip. Auto-scroll pauses
   while the reader interacts and resumes after a short idle (see cat-people JS).
   prefers-reduced-motion is honoured in JS — manual scrolling still works. */
.rd-people-marquee {
  direction: ltr;
  overflow-x: auto;
  overflow-y: hidden;
  padding-block: 8px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}
.rd-people-marquee::-webkit-scrollbar { display: none; }
.rd-people-marquee__track {
  display: flex;
  width: max-content;
  gap: 32px;
}

/* People section: pull the title up a touch (less dead space above it) and,
   on mobile, shrink the chips so ~3 portraits show at once with a peek of the
   next (was only ~2). Desktop chip size is unchanged. */
.rd-section--people { padding-top: 18px; }
.new-home-v3 .rd-section--people .rd-section-head { margin-bottom: 18px; }
@media (max-width: 640px) {
  body.home-main .rd-section--people .rd-section-head { padding-top: 0; }
  /* Full-bleed the rail to the viewport edges: the section sits inside the page
     container + band padding, which otherwise clips the chips at beige gutters
     instead of at the screen edge. calc(50% - 50vw) pulls the scroller out past
     all that inset; the inline padding keeps a small resting gutter while chips
     still scroll all the way off the screen edge. Header stays page-aligned. */
  .rd-section--people .rd-people-marquee {
    margin-inline: calc(50% - 50vw);
    padding-inline: 16px;
  }
  .rd-section--people .rd-people-marquee__track { gap: 16px; }
  .rd-section--people .person-chip { width: 142px; gap: 11px; }
  .rd-section--people .person-chip__avatar { width: 130px; height: 130px; }
  .rd-section--people .person-chip__name { font-size: 14px; }
  .rd-section--people .person-chip__role { font-size: 11px; }
}

/* Mobile */
@media (max-width: 960px) {
  .hero .grid { grid-template-columns: 1fr; }
  .hero .mid { border: 0; padding: 0; }
  .catstrip .grid { grid-template-columns: repeat(3, 1fr); }
  .storygrid .wrap { grid-template-columns: 1fr 1fr; }
  .feature-split { grid-template-columns: 1fr; }
  .feature-split aside { position: static; }
  .videogrid .wrap { grid-template-columns: 1fr 1fr; }
  .livestrip .wrap { grid-template-columns: 1fr; }
  .opinion .wrap { grid-template-columns: 1fr 1fr; }
  .opinion .op-card { border: 0; padding: 0; }
  .newsletter .inner { grid-template-columns: 1fr; }
  .rd-cat-grid { grid-template-columns: 1fr 1fr; }
  .rd-video-grid { grid-template-columns: 1fr 1fr; }
  .rd-podcast-grid { grid-template-columns: 1fr 1fr; }
  .rd-info-grid { grid-template-columns: 1fr 1fr; }
  .rd-lead { grid-template-columns: 1fr; gap: 22px; }
  .rd-headlines { grid-template-columns: 1fr; gap: 0; }
  .rd-list { grid-template-columns: 1fr; gap: 18px 0; }
  .rd-mosaic { grid-auto-rows: 132px; }
  .rd-most-read { grid-template-columns: 1fr; }
  .rd-most-read__articles,
  .rd-most-read--full .rd-most-read__articles { grid-template-columns: 1fr 1fr; }
  .rd-opinion-grid { grid-template-columns: 1fr 1fr; }
  .rd-photo-grid { grid-template-columns: 1fr 1fr; }
  .rd-newsletter .inner { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  /* Wide-list cards: on phones a fixed 168px thumb crushes the text column,
     chopping both the headline and the excerpt. Stack instead — image on top,
     text full-width below — so long Arabic headlines and the subtext can breathe. */
  .rd-list__card { flex-direction: column; gap: 10px; }
  .rd-list__thumb { flex: none; width: 100%; height: auto; aspect-ratio: 16 / 9; }
  .rd-list__title { font-size: 18px; -webkit-line-clamp: 3; }
  .rd-list__excerpt { font-size: 14px; -webkit-line-clamp: 3; }
  .rd-list__time { padding-top: 6px; }
  .rd-cat-grid { grid-template-columns: 1fr; }
  .rd-video-grid { grid-template-columns: 1fr; }
  .rd-podcast-grid { grid-template-columns: 1fr 1fr; }
  .rd-info-grid { grid-template-columns: 1fr; }
  .rd-mosaic { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 122px; }
  .rd-mosaic__tile--lead { grid-column: span 2; grid-row: span 1; }
  .rd-mosaic__tile--lead .rd-mosaic__title { font-size: 18px; }
  .rd-lead__title { font-size: 24px; line-height: 1.28; }
  body.home-main .rd-lead__excerpt { display: block; line-height: 1.6; }
  body.home-main .rd-lead__sep {
    /* BBC-style lighter rule: separates a section's lead article from its
       sub-article list. 1px, a soft navy tint (echoes BBC's light grey rule
       but on-brand) so it clearly reads lighter than the 2px section rule. */
    display: block; height: 1px;
    background: color-mix(in oklab, var(--navy) 38%, #fff);
    margin: 16px 0 4px;
  }
  /* BBC-style headline list: 2-line wrap + timestamp. Center the text block
     against the 137x77 thumb: a 2-line title + timestamp (~71px) is shorter
     than the image, so top-aligning left the image edge dangling ~6px below
     the text (worse for 1-line titles) and read as unbalanced. Centering
     matches the desktop rows (.rd-lead__link align-items: center). */
  body.home-main .rd-lead__link { align-items: center; padding: 15px 0; gap: 14px; }
  /* Small list-row thumb: 137x77 (16:9). Unified with آخر الأخبار + the
     switcher rail + data-journalism cards so every small mobile thumb is one
     size — a deliberate scale, not a set of near-misses. */
  body.home-main .rd-lead__lthumb { flex: 0 0 var(--thumb-row-sm); width: var(--thumb-row-sm); height: 77px; }
  body.home-main .rd-lead__item { border-bottom: 0; }
  body.home-main .rd-lead__item:first-child .rd-lead__link { padding-top: 4px; }
  body.home-main .rd-lead__ltitle {
    white-space: normal;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; text-overflow: ellipsis;
    font-size: 16px; line-height: 1.45;
  }
  body.home-main .rd-lead__ltime { margin-top: 6px; }
  .rd-most-read { grid-template-columns: 1fr; }
  .rd-most-read__articles { grid-template-columns: 1fr; }
  .rd-ad--placeholder { min-height: 280px; }
  .rd-opinion-grid { grid-template-columns: 1fr; }
  .rd-newsletter .form-row { flex-direction: column; }
  .rd-newsletter .form-row button { width: 100%; padding: 14px; }
}

@media (max-width: 900px) {
  .hero {
    padding-top: 18px;
  }
  .hero .grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 22px;
  }
  .hero .lead,
  .hero .mid,
  .hero .side,
  .storygrid .wrap > *,
  .videogrid .wrap > *,
  .opinion .wrap > * {
    min-width: 0;
  }
  .hero .lead .thumb {
    aspect-ratio: 4/3;
    border-radius: var(--r-md);
    margin-bottom: 14px;
  }
  .hero .lead h1 {
    font-size: 28px;
    line-height: 1.22;
    margin-bottom: 10px;
  }
  .hero .lead .dek {
    font-size: 15px;
    line-height: 1.65;
  }
  .hero .lead .byline {
    flex-wrap: wrap;
    gap: 6px 10px;
  }
  .hero .mid {
    gap: 16px;
  }
  .hero .mid .item {
    padding-bottom: 16px;
  }
  .hero .side .item {
    grid-template-columns: 1fr 72px;
    gap: 12px;
  }
  .catstrip {
    padding-top: 22px;
  }
  .catstrip .grid {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .catstrip a.tile {
    aspect-ratio: auto;
    min-height: 118px;
    padding: 14px;
  }
  .storygrid .wrap,
  .videogrid .wrap,
  .opinion .wrap {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
  }
  .feature-split {
    grid-template-columns: minmax(0, 1fr);
  }
  .feature-split {
    gap: 26px;
  }
  .feature-split aside {
    padding: 16px;
  }
  .card.big[style] {
    display: block !important;
    grid-column: auto !important;
  }
  .card.big[style] .thumb {
    aspect-ratio: 16/10 !important;
    margin-bottom: 14px !important;
  }
  .card.big[style] .ph-title[style] {
    font-size: 18px !important;
    line-height: 1.35 !important;
    max-width: 100% !important;
  }
  .card.big[style] h3[style] {
    font-size: 22px !important;
    line-height: 1.35 !important;
    margin-bottom: 10px !important;
  }
  .livestrip {
    padding: 24px 18px;
    border-radius: var(--r-md);
  }
  .livestrip h2 {
    font-size: 24px;
  }
  .livestrip .stats {
    flex-wrap: wrap;
    gap: 14px 20px;
  }
  .livestrip .player .play .btn {
    width: 58px;
    height: 58px;
  }
  .livestrip .player .ticker-low {
    font-size: 12px;
    padding: 8px 10px;
  }
  .newsletter {
    margin-top: 40px;
    padding: 26px 18px;
    border-radius: var(--r-md);
  }
  .newsletter .inner {
    gap: 22px;
  }
  .newsletter h3 {
    font-size: 22px;
  }
  .newsletter .form {
    flex-direction: column;
    align-items: stretch;
    border-radius: var(--r-md);
    padding: 8px;
  }
  .newsletter input {
    min-height: 42px;
  }
  .newsletter button {
    width: 100%;
    min-height: 44px;
  }
}

/* ========== Video Strip (vstrip) ========== */
.vstrip {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
}
.vstrip__viewport {
  overflow-x: auto;
  overflow-y: visible;
  scrollbar-width: none;
  cursor: grab;
  flex: 1;
  /* Deliberately no touch-action: the default is exactly what's wanted here —
     a horizontal pan scrolls this strip, a vertical one scrolls the page. The
     `pan-x` that used to be here permitted ONLY horizontal panning, so a
     vertical swipe starting anywhere on the rail was rejected outright and the
     page didn't move: a dead zone the size of the whole strip, on the one
     breakpoint where the arrow buttons are hidden and touch is the only way to
     move it. */
}
.vstrip__viewport::-webkit-scrollbar { display: none; }
.vstrip__viewport.dragging { cursor: grabbing; user-select: none; }

.vstrip__track {
  display: flex;
  gap: 14px;
}

.vstrip__card {
  flex: 0 0 calc((100% - 98px) / 8);
  min-width: 150px;
  text-decoration: none;
  display: flex;
  flex-direction: column;
}

.vstrip__thumb {
  aspect-ratio: 9/16;
  border-radius: 10px;
  position: relative;
  overflow: hidden;
  background: var(--navy, #1a1d3a);
}

.vstrip__thumb img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: var(--card-zoom-t);
}
.vstrip__card:hover .vstrip__thumb img { transform: scale(var(--card-zoom)); }

.vstrip__play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity .2s;
}
.vstrip__play svg { width: 48px; height: 48px; }
.vstrip__card:hover .vstrip__play { opacity: 1; }

.vstrip__title-overlay {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 32px 12px 12px;
  background: linear-gradient(to top, rgba(0,0,0,.8) 0%, transparent 100%);
}
.vstrip__title-overlay span {
  color: #fff;
  font-family: var(--f-display);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.vstrip__label {
  font-family: var(--f-display);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--ink);
  margin: 8px 0 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.vstrip__btn {
  width: 38px; height: 38px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: all .15s;
  z-index: 2;
}
.vstrip__btn:hover { background: var(--primary); border-color: var(--primary); color: #fff; }

/* Strip responsive */
@media (max-width: 1200px) {
  .vstrip__card { flex: 0 0 calc((100% - 70px) / 6); }
}
@media (max-width: 960px) {
  .vstrip__card { flex: 0 0 calc((100% - 42px) / 4); }
  .vstrip__btn { display: none; }
}
@media (max-width: 640px) {
  /* Bigger videos: ~2.2 cards in view so each thumbnail is large, with a peek
     of the next to signal the strip scrolls. */
  .vstrip__card { flex: 0 0 calc((100% - 24px) / 2.2); min-width: 0; }
  .vstrip__title-overlay span { font-size: 11px; -webkit-line-clamp: 2; }
  .vstrip__label { font-size: 13px; }
}

/* ========== Video Modal (vmodal) — vertical snap reel ==========
   The player is a native scroll-snap container, one slide per video. That is
   deliberate and load-bearing: YouTube's player is a cross-origin iframe, so a
   swipe aimed at the video never reaches any JS listener of ours — but native
   scroll still chains out of it. Handing the gesture to the browser is the only
   model that works on the video surface itself, and it brings touch, trackpad,
   wheel and keyboard along for free.

   Every control sits OUTSIDE .vmodal__frame. YouTube owns the video surface —
   its own chrome lives at that box's edges, so anything overlaid on it collides.

   Explicit left/right rather than inset-inline-*: this document is dir="rtl",
   where inset-inline-start resolves to the RIGHT, the same corner YouTube puts
   its settings/CC/mute row in.

   Closed state is display:none (via [hidden]), not opacity:0 + pointer-events:
   a full-screen fixed box that is merely transparent is still in the layout and
   its touch-action still has to be reasoned about. This one is simply gone.
   ========== */
.vmodal {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  opacity: 0;
  transition: opacity .2s ease;
}
.vmodal.active { display: block; opacity: 1; }
.vmodal[hidden] { display: none; }

.vmodal__backdrop { position: absolute; inset: 0; background: #000; }
/* Desktop: let the homepage show through behind the player rather than a full
   black-out. Mobile keeps the opaque fill for full immersion. */
@media (min-width: 861px) {
  .vmodal__backdrop { background: rgba(0,0,0,.88); }
}

.vmodal__reel {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  overflow-x: hidden;
  scroll-snap-type: y mandatory;
  overscroll-behavior: contain;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.vmodal__reel::-webkit-scrollbar { display: none; }

.vmodal__slide {
  height: 100%;
  scroll-snap-align: center;
  /* Without this a fast flick skips several videos at once. */
  scroll-snap-stop: always;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 72px 0;
}

/* The video box. Deliberately no aspect-ratio: the sources are a genuine mix
   (9:16, 4:5, 4:3) and nothing in the data says which is which, so we give
   YouTube one sane box and let it letterbox inside — exactly what youtube.com
   does. Width is what matters on desktop: a narrow frame is what clipped
   YouTube's own title bar. */
.vmodal__frame {
  position: relative;
  width: min(96vw - 136px, 860px);
  height: 100%;
  max-height: 720px;
  background: #000;
  border-radius: 12px;
  overflow: hidden;
}
.vmodal__frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
/* Inactive slides carry the card's own thumbnail instead of a player, so the
   reel reads as full while only one iframe exists at a time. */
.vmodal__poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
}
.vmodal__frame.is-playing .vmodal__poster { display: none; }

.vmodal__close {
  position: absolute;
  left: 16px;                      /* visual left, deliberately not logical */
  top: calc(14px + env(safe-area-inset-top, 0px));
  z-index: 3;
  width: 44px; height: 44px;
  border-radius: 999px;
  border: none;
  background: rgba(0,0,0,.5);
  backdrop-filter: blur(2px);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .15s;
}
.vmodal__close:hover { background: rgba(0,0,0,.75); }
.vmodal__count {
  position: absolute;
  right: 18px;                     /* visual right */
  top: calc(14px + env(safe-area-inset-top, 0px));
  z-index: 3;
  height: 44px;
  display: flex;
  align-items: center;
  font-family: var(--f-display);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  /* "1 / 11" is a counter, not prose — in an RTL context bidi reorders it to
     read "11 / 1". Force the run LTR so it reads the way it counts. */
  direction: ltr;
  color: rgba(255,255,255,.75);
}
.vmodal__close:focus-visible,
.vmodal__nav-btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* One-side stack: the reel scrolls vertically, so the arrows sit together on
   the counter (visual-right) column, pointing up/down. */
.vmodal__nav {
  position: absolute;
  right: 16px;                     /* visual right, same column as .vmodal__count */
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.vmodal__nav-btn {
  width: 52px; height: 52px;
  border-radius: 999px;
  background: rgba(255,255,255,.12);
  border: none;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .15s, opacity .15s;
}
.vmodal__nav-btn svg { width: 24px; height: 24px; }
.vmodal__nav-btn:hover { background: rgba(255,255,255,.28); }
.vmodal__nav-btn:disabled { opacity: .28; cursor: default; }

/* Modal responsive — on touch widths the reel IS the navigation, so the arrows
   go away and the video takes the space they were using. The top band is
   load-bearing, not padding: it is what keeps our X clear of YouTube's
   mute/CC/settings row, which sits at the frame's top edge. */
@media (max-width: 860px) {
  .vmodal__nav { display: none; }
  .vmodal__slide {
    padding: calc(62px + env(safe-area-inset-top, 0px)) 0
             calc(16px + env(safe-area-inset-bottom, 0px));
  }
  .vmodal__frame {
    width: 100%;
    max-height: none;
    border-radius: 0;
  }
}

/* ====================================================================
   A1 Cinematic Hero — root (/) homepage body. Single full-width hero
   + 4-card row. Uses the root navy theme (no cobalt). Namespace: .a1c-
   ==================================================================== */
.a1c { padding: 22px 0 28px; }

/* ── Cinematic lead ── */
.a1c__lead {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  height: 540px;
  box-shadow: 0 1px 0 rgba(14,31,78,.04), 0 18px 38px -22px rgba(14,31,78,.45);
}
/* carousel — horizontal sliding track */
.a1c__track {
  display: flex;
  direction: ltr;            /* lay slides in index order; inner text restored to rtl below */
  flex-direction: row-reverse; /* RTL: slide 0 sits at the right; advancing moves track right (new slide enters from the left) */
  height: 100%;
  transition: transform .6s cubic-bezier(.4, 0, .2, 1);
  will-change: transform;
}
.a1c__lead { touch-action: pan-y; cursor: grab; }
.a1c__lead.a1c--grabbing { cursor: grabbing; }
.a1c__lead.a1c--grabbing,
.a1c__lead.a1c--grabbing * { user-select: none; }
.a1c__slide {
  position: relative;
  flex: 0 0 100%;
  width: 100%; height: 100%;
  direction: rtl;
}
.a1c__lead-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.a1c__lead-grad {
  position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(9,22,56,.94) 0%, rgba(9,22,56,.55) 38%, rgba(9,22,56,.05) 68%);
}
.a1c__lead-link {
  position: absolute; inset: 0;
  z-index: 1;
}
/* top-right badges */
.a1c__lead-badges {
  position: absolute; top: 24px; left: 24px;
  display: flex; align-items: center; gap: 10px;
  z-index: 2;
}
.a1c__lead-badges .a1c__chip { border-radius: 8px; }
.a1c__chip {
  display: inline-block;
  background: var(--navy); color: #fff;
  font-size: 12.5px; font-weight: 700; letter-spacing: .02em;
  padding: 5px 12px; border-radius: var(--r-sm);
  line-height: 1.2;
}
.a1c__chip.sm { font-size: 11px; padding: 3px 9px; }
.a1c__lead-kicker {
  display: inline-flex; align-items: center; gap: 5px;
  color: #fff; font-size: 12px; opacity: .85;
}
.a1c__lead-kicker .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--navy);
  box-shadow: 0 0 0 4px rgba(34,41,99,.32);
}
/* bottom overlay text */
.a1c__lead-body {
  position: absolute; right: 28px; left: 28px; bottom: 32px;
  color: #fff; z-index: 2;
}
.a1c__lead-meta {
  display: flex; align-items: center; gap: 12px;
  font-size: 13px; opacity: .86; margin-bottom: 16px;
}
.a1c__lead-meta .sep { opacity: .4; }
.a1c__lead-meta .strong { font-weight: 600; }
.a1c__lead-body h1 {
  font-family: var(--f-display);
  font-size: calc(40px * var(--density));
  line-height: 1.22; font-weight: 700;
  letter-spacing: -.01em;
  margin: 0; max-width: 1000px;
  text-wrap: pretty;
  color: #fff;
}
.a1c__lead-body h1 a { color: #fff; }
.a1c__lead-dek {
  font-size: 16.5px; line-height: 1.75;
  opacity: .86; margin: 16px 0 0; max-width: 900px;
  display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden;
}
.a1c__lead-foot {
  margin-top: 22px;
  display: flex; align-items: center; justify-content: space-between;
}
.a1c__dots { display: flex; gap: 6px; }
.a1c__dots span {
  width: 8px; height: 4px; border-radius: 2px;
  background: rgba(255,255,255,.4);
}
.a1c__dots span.on { width: 22px; background: #fff; }
/* functional carousel dots (buttons) */
.a1c__dot {
  width: 8px; height: 4px; padding: 0; border: 0;
  border-radius: 2px; background: rgba(255,255,255,.4);
  cursor: pointer; transition: width .25s, background .25s;
}
.a1c__dot.on { width: 22px; background: #fff; }
/* carousel side arrows — match A2 hero nav */
.a1c__nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  z-index: 4; width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255,255,255,.22); border-radius: 50%;
  background: rgba(10,14,35,.42); color: #fff; cursor: pointer;
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  transition: background .15s;
}
.a1c__nav:hover { background: rgba(10,14,35,.78); }
.a1c__nav--prev { inset-inline-start: 18px; }
.a1c__nav--next { inset-inline-end: 18px; }
.a1c__nav svg { width: 22px; height: 22px; }
.a1c__more {
  display: inline-flex; align-items: center; gap: 6px;
  color: #fff; font-size: 13px; font-weight: 700;
}
.a1c__more svg { width: 14px; height: 14px; }

/* ── Four-card row ── */
.a1c__cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px; margin-top: 22px;
}
.a1c__card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease;
}
.a1c__card:hover {
  transform: translateY(-4px);
  box-shadow: var(--sh-2);
}
.a1c__card-thumb {
  position: relative; height: 168px;
  overflow: hidden; background: var(--surface-3);
}
.a1c__card-thumb img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.a1c__card-thumb .a1c__chip {
  position: absolute; top: 10px; right: 10px;
}
.a1c__card-body { padding: 14px 16px 16px; }
.a1c__card-body h3 {
  font-family: var(--f-display);
  font-size: 16px; line-height: 1.45;
  font-weight: 600; margin: 0;
  color: var(--ink); text-wrap: pretty;
  display: -webkit-box; -webkit-line-clamp: 3;
  -webkit-box-orient: vertical; overflow: hidden;
}
.a1c__card-meta {
  margin-top: 12px;
  display: flex; align-items: center; justify-content: space-between;
  font-size: 12px; color: var(--muted);
}
.a1c__card-meta .src { font-size: 11px; color: var(--muted-2); }

/* ── A1 cinematic responsive ── */
@media (max-width: 1060px) {
  .a1c__lead { height: 460px; }
  .a1c__lead-body h1 { font-size: calc(32px * var(--density)); }
  .a1c__cards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .a1c__lead { height: 380px; }
  .a1c__lead-body { right: 18px; left: 18px; bottom: 20px; }
  .a1c__lead-body h1 {
    font-size: calc(24px * var(--density));
    display: -webkit-box; -webkit-line-clamp: 3;
    -webkit-box-orient: vertical; overflow: hidden;
  }
  .a1c__lead-dek { display: none; }
  .a1c__lead-badges { top: 16px; left: 16px; }
  .a1c__cards { grid-template-columns: 1fr; }
  .a1c__card-thumb { height: 200px; }
}

/* ====================================================================
   v3 REDESIGN — below-hero zones (June 2026)
   The page reads as acts, not repeated bands:
   desk (broadsheet spread) → most-read numerals band → dark video band
   → world mosaic → opinion quote columns → sport|culture split board
   → cinematic reports file → encyclopedia+poll → people marquee → feed.
   All classes are v3x-* and the page is scoped by body.new-home-v3.
   ==================================================================== */

/* ── shared: full-bleed band (container 1320/28 → content 1264, half 632) ── */
.new-home-v3 .v3x-band {
  /* tokens.css sets section { max-width: 100% } — override so 100vw bleed works */
  max-width: none;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding-left: max(28px, calc(50vw - 632px));
  padding-right: max(28px, calc(50vw - 632px));
}

/* ── shared: column header (desk columns / duo halves) ── */
.v3x-colhead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 2px solid var(--ink);
  padding-bottom: 9px;
  margin-bottom: 16px;
}
.v3x-colhead__t {
  margin: 0;
  font-family: 'Noto Kufi Arabic', var(--f-display);
  font-size: 17px;
  font-weight: 800;
  color: var(--ink);
  line-height: 1.4;
  display: inline-flex;
  align-items: center;
  gap: 9px;
}
.v3x-colhead__t::before {
  content: '';
  width: 9px;
  height: 9px;
  border-radius: 2.5px;
  transform: rotate(45deg);
  background: var(--navy);
  flex-shrink: 0;
}
.v3x-colhead__t a { transition: color .15s ease; }
.v3x-colhead__t a:hover { color: var(--navy); }
.v3x-colhead__more {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--muted);
  white-space: nowrap;
  transition: color .15s ease;
}
.v3x-colhead__more span { display: inline-block; transition: transform .2s ease; }
.v3x-colhead__more:hover { color: var(--navy); }
.v3x-colhead__more:hover span { transform: translateX(-3px); }

/* ── shared: timestamp + text wire list ── */
.v3x-time { display: block; margin-top: 6px; font-size: 11.5px; color: var(--muted-2); }

.v3x-wire { list-style: none; margin: 0; padding: 0; }
.v3x-wire li + li { border-top: 1px solid var(--line); }
.v3x-wire--joined { border-top: 1px solid var(--line); margin-top: 15px; }
.v3x-wire a { display: block; padding: 13px 0; min-width: 0; overflow: hidden; }
.v3x-wire li:last-child a { padding-bottom: 0; }
.v3x-wire__title {
  display: block;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: var(--f-display);
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.55;
  color: var(--ink);
  transition: color .15s ease;
}
.v3x-wire a:hover .v3x-wire__title { color: var(--primary); }
.v3x-wire--sec li:first-child .v3x-wire__title { font-size: 16px; }

/* ════ Zone: the desk — broadsheet spread (سياسة · اقتصاد · أمنية) ════ */
.v3x-desk {
  margin-top: 36px;
  border-top: 3px double var(--line-2);
  padding-top: 28px;
}
.v3x-desk__grid {
  display: grid;
  grid-template-columns: 1.55fr .95fr .8fr;
}
.v3x-desk__col {
  min-width: 0;
  padding-inline: 26px;
  border-inline-start: 1px solid var(--line);
}
.v3x-desk__col:first-child { padding-inline-start: 0; border-inline-start: 0; }
.v3x-desk__col:last-child { padding-inline-end: 0; }

/* politics lead */
.v3x-desk__lead-media {
  display: block;
  aspect-ratio: 16 / 9;
  border-radius: 8px;
  overflow: hidden;
  background: var(--navy);
}
.v3x-desk__lead-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: var(--card-zoom-t); }
.v3x-desk__lead:hover .v3x-desk__lead-media img { transform: scale(var(--card-zoom)); }
.v3x-desk__lead-title {
  margin: 15px 0 0;
  font-family: var(--f-display);
  font-size: 26px;
  font-weight: 800;
  line-height: 1.4;
  color: var(--ink);
}
.v3x-desk__lead-title a { transition: color .15s ease; }
.v3x-desk__lead:hover .v3x-desk__lead-title a { color: var(--primary); }
.v3x-desk__lead-ex {
  margin: 9px 0 0;
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* politics secondary 2×2 */
.v3x-desk__pair {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  margin-top: 18px;
  border-top: 1px solid var(--line);
}
.v3x-desk__pair-item { display: block; min-width: 0; padding: 14px 0 4px; overflow: hidden; }
.v3x-desk__pair-item:nth-child(odd) { border-inline-end: 1px solid var(--line); padding-inline-end: 24px; }
.v3x-desk__pair-item:nth-child(even) { padding-inline-start: 24px; }
.v3x-desk__pair-item:nth-child(n+3) { border-top: 1px solid var(--line); }
.v3x-desk__pair-title {
  display: block;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: var(--f-display);
  font-size: 15.5px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--ink);
  transition: color .15s ease;
}
.v3x-desk__pair-item:hover .v3x-desk__pair-title { color: var(--primary); }

/* economy: live dollar-rate chip */
.v3x-rate {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 9px 13px;
  margin-bottom: 16px;
}
.v3x-rate__label { font-size: 12px; font-weight: 700; color: var(--muted); }
.v3x-rate__value { font-size: 16px; font-weight: 700; color: var(--ink); margin-inline-start: auto; }
.v3x-rate__dir { font-size: 11.5px; font-weight: 700; }
.v3x-rate__dir--up { color: var(--green); }
.v3x-rate__dir--down { color: var(--red); }
.v3x-rate__dir--flat { color: var(--muted-2); }

/* economy lead card */
.v3x-desk__econ-lead { display: block; }
.v3x-desk__econ-media {
  display: block;
  aspect-ratio: 16 / 9;
  border-radius: 8px;
  overflow: hidden;
  background: var(--navy);
}
.v3x-desk__econ-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: var(--card-zoom-t); }
.v3x-desk__econ-lead:hover .v3x-desk__econ-media img { transform: scale(var(--card-zoom)); }
.v3x-desk__econ-title {
  display: block;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 11px;
  font-family: var(--f-display);
  font-size: 16.5px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--ink);
  transition: color .15s ease;
}
.v3x-desk__econ-lead:hover .v3x-desk__econ-title { color: var(--primary); }

/* ════ Zone: الأكثر قراءة — typographic numerals band ════ */
.new-home-v3 .v3x-mostread {
  background: var(--surface-3);
  margin-top: 44px;
  padding-top: 32px;
  padding-bottom: 32px;
}
.v3x-mostread__grid {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 26px;
  align-items: stretch;
}
.v3x-mostread__label {
  background: var(--navy);
  color: #fff;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 18px;
  font-family: 'Noto Kufi Arabic', var(--f-display);
  font-weight: 800;
  font-size: 20px;
  line-height: 1.55;
}
.v3x-mostread__label svg { width: 22px; height: 22px; margin-bottom: 10px; color: rgba(255, 255, 255, .88); }

/* ── Most-read label: final direction (C1) ── */
.v3x-mostread__label.lbl--final {
  position: relative;
  overflow: hidden;
  justify-content: flex-start;   /* override default center */
  align-items: flex-start;
}
.lbl--final .f-cap    { position: relative; z-index: 1; font-size: 22px; font-weight: 800; line-height: 1.3; }
.lbl--final .f-kicker { position: relative; z-index: 1; font-size: 11px; font-weight: 600; opacity: .72; margin-top: 6px; letter-spacing: .03em; }

.lbl--final .wm-foil {
  position: absolute; right: -22px; bottom: -22px;
  width: 128px; height: 128px;   /* C1 = medium */
  margin: 0;                     /* cancel home.css svg margin-bottom */
  z-index: 0; pointer-events: none; user-select: none;
}
.lbl--final .wm-foil path { fill: url(#foilGrad); }

/* ── Root: square C2-style most-read navy box ── */
/* square box (C2 look): aspect-ratio 1/1, centered against the shorter list;
   top-aligned title/kicker, larger low-slung foil watermark */
:is(.home-main, .v3x-mostread--home) .v3x-mostread__grid { grid-template-columns: 178px 1fr; align-items: center; }
:is(.home-main, .v3x-mostread--home) .v3x-mostread__label { padding: 18px 22px; gap: 6px; aspect-ratio: auto; height: 154px; justify-content: flex-start; }
:is(.home-main, .v3x-mostread--home) .lbl--final .f-cap { font-size: 26px; font-weight: 800; line-height: 1.2; }
/* c2 look: larger watermark whose top nearly reaches the top edge of the (shorter) box */
:is(.home-main, .v3x-mostread--home) .lbl--final .wm-foil { width: 178px; height: 178px; right: -30px; bottom: -34px; }
/* kicker — "الأعلى تفاعلاً خلال آخر 7 أيام" inside the navy box (C2 legibility) */
:is(.home-main, .v3x-mostread--home) .v3x-mostread__sub {
  display: block;
  position: relative;
  z-index: 1;
  margin-top: 0;
  max-width: 15ch;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.6;
  color: rgba(255, 255, 255, .82);
}
.v3x-mostread__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
}
.v3x-mostread__list li { min-width: 0; flex: 1 1 0; max-width: 220px; border-inline-start: 1px solid #ddd8cd; }
.v3x-mostread__list li:first-child { border-inline-start: 0; }
.v3x-mostread__list a { display: flex; gap: 13px; padding: 4px 18px; align-items: flex-start; height: 100%; }
.v3x-mostread__list li:first-child a { padding-inline-start: 0; }
.v3x-mostread__list li:last-child a { padding-inline-end: 0; }
.v3x-mostread__num {
  font-size: 54px;
  font-weight: 800;
  line-height: .95;
  letter-spacing: -.03em;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(34, 41, 99, .42);
  flex-shrink: 0;
  transition: color .15s ease, -webkit-text-stroke-color .15s ease;
}
.v3x-mostread__body { min-width: 0; }
.v3x-mostread__cat { display: block; font-size: 11px; font-weight: 700; color: var(--navy); margin-bottom: 5px; }
.v3x-mostread__title {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-family: var(--f-display);
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--ink);
  transition: color .15s ease;
}
.v3x-mostread__list a:hover .v3x-mostread__title { color: var(--primary); }
.v3x-mostread__list a:hover .v3x-mostread__num {
  color: var(--navy);
  -webkit-text-stroke-color: var(--navy);
}
.v3x-mostread__count { display: block; margin-top: 7px; font-size: 11px; color: var(--muted); }

/* ════ Zone: فيديو — cinematic dark band (vstrip + restyled header) ════ */
.new-home-v3 .v3x-dark {
  background: radial-gradient(120% 130% at 85% -10%, #1b2c66 0%, #0e1f4e 48%, #0a1737 100%);
}
.new-home-v3 .v3x-dark .rd-section { padding: 38px 0 44px; }
.home-main .v3x-dark { margin-top: 44px; }
.v3x-dark + .v3x-mostread { margin-top: 0; }
.v3x-dark .rd-section-head h3 { color: #fff; }
.v3x-dark .rd-section-head h3 svg { color: rgba(255, 255, 255, .92) !important; }
.v3x-dark .rd-section-head .rule { background: rgba(255, 255, 255, .13); }
.v3x-dark .rd-section-head .more { color: rgba(255, 255, 255, .8); }
.v3x-dark .rd-section-head .more:hover { color: #fff; }
/* Video title hover: navy accent is invisible on the dark band, so keep the
   word white and mark hover with a white underline instead. */
body.home-main .v3x-dark .rd-section-head .rd-head-link:hover {
  color: #fff;
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, .9);
  text-underline-offset: 5px;
  text-decoration-thickness: 1.5px;
}
/* Drop the diamond tick for the video section only (the play glyph already
   marks it); other sections keep their diamond via the .new-home-v3 rule. */
.v3x-dark .rd-section-head .bar { display: none; }
.v3x-dark .vstrip__label { color: rgba(255, 255, 255, .92); }
.v3x-dark .vstrip__thumb { background: #1a2752; }
.v3x-dark .vstrip__btn {
  background: rgba(255, 255, 255, .08);
  border-color: rgba(255, 255, 255, .22);
  color: #fff;
}
.v3x-dark .vstrip__btn:hover { background: #fff; border-color: #fff; color: var(--navy); }

/* Root video band (desktop only): the band had a big empty navy area above the
   strip. Reclaim the top padding + header gap and let the thumbnails grow taller
   so the videos own more of the band. Band height stays ~the same — space is
   traded from padding/header into thumbnail height. Mobile (≤640) is tuned
   separately above and left untouched. */
@media (min-width: 641px) {
  body.home-main .v3x-dark .rd-section { padding-top: 28px; padding-bottom: 44px; }
  body.home-main .v3x-dark .rd-section-head { margin-bottom: 14px; }
  /* Drop the header hairline — it only accentuated the empty gap above the strip. */
  body.home-main .v3x-dark .rd-section-head .rule { background: transparent; }
  body.home-main .v3x-dark .vstrip__thumb { aspect-ratio: 1 / 2; }
}

/* Root video band: reels a notch larger than the v2/v3 demo strips — one fewer
   card per row than the global default (8→6 on wide desktop, 6→5 mid), which
   with the small extra .rd-section padding gives a slightly taller band without
   the oversized 5-up look we tried first. Scoped to home-main so v2/v3 keep the
   original strip; higher specificity than the global .vstrip__card rules, so it
   wins at every width. Tablet (≤960) and mobile (≤640) keep the global counts. */
@media (min-width: 1201px) {
  body.home-main .v3x-dark .vstrip__card { flex: 0 0 calc((100% - 5 * 14px) / 6); }
}
@media (min-width: 961px) and (max-width: 1200px) {
  body.home-main .v3x-dark .vstrip__card { flex: 0 0 calc((100% - 4 * 14px) / 5); }
}

/* ════ Zone: آراء وأقلام — quote columns ════ */
.v3x-op {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 36px 0 40px;
  margin-top: 8px;
}
.v3x-op__grid {
  display: grid;
  grid-template-columns: 250px 1fr 1fr 1fr;
}
.v3x-op__intro {
  padding-inline-end: 30px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.v3x-op__mark {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 84px;
  line-height: .75;
  color: var(--navy);
  opacity: .16;
  user-select: none;
}
.v3x-op__name {
  margin: 6px 0 8px;
  font-family: 'Noto Kufi Arabic', var(--f-display);
  font-size: 24px;
  font-weight: 800;
  color: var(--ink);
}
.v3x-op__blurb { margin: 0 0 18px; font-size: 13.5px; line-height: 1.75; color: var(--muted); }
.v3x-op__all {
  font-size: 13px;
  font-weight: 700;
  color: var(--navy);
  border: 1.5px solid color-mix(in oklab, var(--navy) 30%, #fff);
  border-radius: 999px;
  padding: 8px 18px;
  transition: all .15s ease;
}
.v3x-op__all span { display: inline-block; transition: transform .2s ease; }
.v3x-op__all:hover { background: var(--navy); color: #fff; border-color: var(--navy); }
.v3x-op__all:hover span { transform: translateX(-3px); }
.v3x-op__card {
  border-inline-start: 1px solid var(--line);
  padding-inline: 26px;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.v3x-op__card:last-child { padding-inline-end: 0; }
.v3x-op__q {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 36px;
  line-height: .8;
  color: var(--navy);
  opacity: .35;
  margin-bottom: 8px;
  user-select: none;
}
.v3x-op__title {
  margin: 0 0 9px;
  font-family: var(--f-display);
  font-size: 17px;
  font-weight: 800;
  line-height: 1.5;
  color: var(--ink);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color .15s ease;
}
.v3x-op__card:hover .v3x-op__title { color: var(--primary); }
.v3x-op__ex {
  margin: 0 0 18px;
  font-size: 13px;
  line-height: 1.75;
  color: var(--muted);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.v3x-op__foot { margin-top: auto; display: flex; align-items: center; gap: 10px; }
.v3x-op__avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  background: linear-gradient(135deg, var(--a1), var(--a2));
  flex-shrink: 0;
}
.v3x-op__who { display: flex; flex-direction: column; min-width: 0; }
.v3x-op__who-name { font-size: 13px; font-weight: 800; color: var(--ink); }
.v3x-op__who-role { font-size: 11.5px; color: var(--muted); }

/* ════ Zone: رياضة | ثقافة — split board on paper band ════ */
.new-home-v3 .v3x-duo {
  background: var(--surface-3);
  margin-top: 42px;
  padding-top: 36px;
  padding-bottom: 40px;
}
.v3x-duo__grid { display: grid; grid-template-columns: 1fr 1fr; }
.v3x-duo__half {
  min-width: 0;
  padding-inline: 34px;
  border-inline-start: 1px solid #ddd8cd;
}
.v3x-duo__half:first-child { padding-inline-start: 0; border-inline-start: 0; }
.v3x-duo__half:last-child { padding-inline-end: 0; }
.v3x-duo__lead { display: block; }
.v3x-duo__media {
  display: block;
  aspect-ratio: 16 / 8;
  border-radius: 8px;
  overflow: hidden;
  background: var(--navy);
}
.v3x-duo__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: var(--card-zoom-t); }
.v3x-duo__lead:hover .v3x-duo__media img { transform: scale(var(--card-zoom)); }
.v3x-duo__title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: 12px;
  font-family: var(--f-display);
  font-size: 18.5px;
  font-weight: 800;
  line-height: 1.45;
  color: var(--ink);
  transition: color .15s ease;
}
.v3x-duo__lead:hover .v3x-duo__title { color: var(--primary); }
.v3x-duo .v3x-wire--joined { border-top-color: #ddd8cd; }
.v3x-duo .v3x-wire li + li { border-top-color: #ddd8cd; }

/* ════ Zone: تقارير — cinematic file ════ */
.v3x-reports { padding: 40px 0 10px; }
.v3x-reports__lead {
  position: relative;
  display: block;
  height: clamp(280px, 34vw, 410px);
  border-radius: 12px;
  overflow: hidden;
  background: var(--navy);
}
.v3x-reports__lead img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: var(--card-zoom-t);
}
.v3x-reports__lead:hover img { transform: scale(var(--card-zoom)); }
.v3x-reports__shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(10deg, rgba(7, 12, 38, .88) 20%, rgba(7, 12, 38, .3) 55%, transparent 80%);
}
.v3x-reports__cap { position: absolute; inset-inline: 0; bottom: 0; padding: 26px 30px; z-index: 1; }
.v3x-reports__kicker {
  display: inline-block;
  font-size: 11.5px;
  font-weight: 800;
  color: #2a1a00;
  background: var(--yellow);
  padding: 4px 12px;
  border-radius: 4px;
}
.v3x-reports__title {
  display: block;
  margin-top: 12px;
  font-family: var(--f-display);
  font-size: clamp(22px, 2.6vw, 30px);
  font-weight: 800;
  line-height: 1.4;
  color: #fff;
  max-width: 860px;
  text-shadow: 0 2px 16px rgba(0, 0, 0, .4);
}
.v3x-reports__ex {
  display: block;
  margin-top: 8px;
  font-size: 14.5px;
  line-height: 1.7;
  color: rgba(255, 255, 255, .85);
  max-width: 700px;
}
.v3x-reports__row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0 30px;
  margin-top: 18px;
}
.v3x-reports__item {
  display: block;
  min-width: 0;
  border-top: 1px solid var(--line);
  padding: 14px 0 0;
}
.v3x-reports__item:hover .v3x-wire__title { color: var(--primary); }

/* ════ v3x responsive ════ */
@media (max-width: 1080px) {
  .v3x-desk__grid { grid-template-columns: 1.45fr 1fr; }
  .v3x-desk__col--sec {
    grid-column: 1 / -1;
    border-inline-start: 0;
    padding-inline: 0;
    border-top: 1px solid var(--line);
    margin-top: 24px;
    padding-top: 24px;
  }
  .v3x-desk__col--sec .v3x-wire { display: grid; grid-template-columns: 1fr 1fr; gap: 0 30px; }
  .v3x-desk__col--sec .v3x-wire li { border-top: 1px solid var(--line); }
  .v3x-desk__col--sec .v3x-wire li:nth-child(-n+2) { border-top: 0; }
  .v3x-desk__col--sec .v3x-wire li:nth-child(-n+2) a { padding-top: 0; }

  .v3x-mostread__grid { grid-template-columns: 1fr; gap: 18px; }
  .v3x-mostread__label { flex-direction: row; align-items: center; gap: 12px; padding: 12px 18px; font-size: 17px; }
  .v3x-mostread__label svg { margin-bottom: 0; }
  .v3x-mostread__label br { display: none; }
  .v3x-mostread__list { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .v3x-mostread__list::-webkit-scrollbar { display: none; }
  .v3x-mostread__list li { flex: 0 0 250px; max-width: none; scroll-snap-align: start; }

  .v3x-op__grid { grid-template-columns: 1fr 1fr 1fr; }
  .v3x-op__intro {
    grid-column: 1 / -1;
    padding-inline-end: 0;
    border-bottom: 1px solid var(--line);
    padding-bottom: 20px;
    margin-bottom: 24px;
  }
  .v3x-op__mark { display: none; }
  .v3x-op__card:nth-child(2) { border-inline-start: 0; padding-inline-start: 0; }
}

/* ── Most-read, mobile card (root): a self-contained white card floating on
   the section band — navy header (title + subtitle + left chevron foil) over a
   clean vertical ranked list with big ghost numerals. Scoped to .home-main to
   beat the .home-main desktop 2-col / square-box rules above. ── */
.v3x-mostread__sub { display: none; }   /* mobile-only card subtitle */

@media (max-width: 640px) {
  /* tighten the full-bleed band's gutters so the card sits ~16px from screen edges */
  :is(.home-main, .v3x-mostread--home) .v3x-mostread {
    padding-left: 16px;
    padding-right: 16px;
    padding-top: 22px;
    padding-bottom: 26px;
  }

  /* the grid IS the card: header + list stack, clipped to a rounded white panel */
  :is(.home-main, .v3x-mostread--home) .v3x-mostread__grid {
    display: block;
    gap: 0;
    background: var(--surface-3);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 6px 22px rgba(20, 22, 50, .10);
  }

  /* navy header — full-bleed top of the card, text to the right (RTL) */
  :is(.home-main, .v3x-mostread--home) .v3x-mostread__label {
    aspect-ratio: auto;
    height: auto;   /* drop the desktop fixed 154px so the header hugs its text (logo may clip — ok) */
    display: block;
    border-radius: 0;
    padding: 20px 22px;
    text-align: right;
    background: linear-gradient(105deg, var(--navy-700) 0%, var(--navy) 58%, var(--navy-900) 100%);
  }
  :is(.home-main, .v3x-mostread--home) .lbl--final .f-cap { font-size: 22px; line-height: 1.2; }
  :is(.home-main, .v3x-mostread--home) .v3x-mostread__sub {
    display: block;
    position: relative;
    z-index: 1;
    margin-top: 6px;
    max-width: none;
    font-size: 12px;
    font-weight: 600;
    color: rgba(255, 255, 255, .60);
  }
  /* chevron foil watermark — moved to the left edge, vertically centred,
     flipped to point inward (left) and dialled back to a subtle sheen */
  :is(.home-main, .v3x-mostread--home) .lbl--final .wm-foil {
    right: auto;
    left: -18px;
    bottom: auto;
    top: 50%;
    transform: translateY(-50%) scaleX(-1);
    width: 128px;
    height: 128px;
    opacity: .5;
  }

  /* vertical ranked list — no scroll */
  :is(.home-main, .v3x-mostread--home) .v3x-mostread__list {
    display: flex;
    flex-direction: column;
    overflow: visible;
    padding: 2px 20px 6px;
  }
  :is(.home-main, .v3x-mostread--home) .v3x-mostread__list li {
    flex: none;
    max-width: none;
    border-inline-start: 0;
    border-top: 1px solid #ddd8cd;
  }
  :is(.home-main, .v3x-mostread--home) .v3x-mostread__list li:first-child { border-top: 0; }
  /* number to the right (RTL start), text block filling to the left */
  :is(.home-main, .v3x-mostread--home) .v3x-mostread__list a {
    flex-direction: row;
    padding: 16px 0;
    gap: 16px;
    align-items: center;
    height: auto;
  }
  :is(.home-main, .v3x-mostread--home) .v3x-mostread__body { flex: 1; min-width: 0; }
  /* outlined ghost numerals — same treatment as desktop (transparent fill,
     navy stroke, navy on hover; inherited from the base .v3x-mostread__num) */
  :is(.home-main, .v3x-mostread--home) .v3x-mostread__num {
    font-size: 46px;
    min-width: 42px;
    text-align: center;
  }
  :is(.home-main, .v3x-mostread--home) .v3x-mostread__cat { color: var(--muted-2); font-size: 11.5px; margin-bottom: 4px; }
  :is(.home-main, .v3x-mostread--home) .v3x-mostread__title { -webkit-line-clamp: 2; font-size: 15.5px; line-height: 1.45; }
}

@media (max-width: 760px) {
  .v3x-desk__grid { grid-template-columns: 1fr; }
  .v3x-desk__col { padding-inline: 0; border-inline-start: 0; }
  .v3x-desk__col--econ {
    border-top: 1px solid var(--line);
    margin-top: 24px;
    padding-top: 24px;
  }
  .v3x-desk__lead-title { font-size: 21px; }
  .v3x-desk__pair { grid-template-columns: 1fr; }
  .v3x-desk__pair-item { padding: 14px 0; }
  .v3x-desk__pair-item:nth-child(odd) { border-inline-end: 0; padding-inline-end: 0; }
  .v3x-desk__pair-item:nth-child(even) { padding-inline-start: 0; }
  .v3x-desk__pair-item:nth-child(n+2) { border-top: 1px solid var(--line); }
  .v3x-desk__col--sec .v3x-wire { display: block; }
  .v3x-desk__col--sec .v3x-wire li { border-top: 0; }
  .v3x-desk__col--sec .v3x-wire li + li { border-top: 1px solid var(--line); }

  .v3x-mostread__list li { flex: 0 0 230px; max-width: none; }
  .v3x-mostread__num { font-size: 42px; }

  .v3x-op__grid { grid-template-columns: 1fr; }
  .v3x-op__card { border-inline-start: 0; padding-inline: 0; border-top: 1px solid var(--line); padding-top: 20px; margin-top: 20px; }
  .v3x-op__card:nth-child(2) { border-top: 0; margin-top: 0; }

  .v3x-duo__grid { grid-template-columns: 1fr; }
  .v3x-duo__half { padding-inline: 0; border-inline-start: 0; }
  .v3x-duo__half + .v3x-duo__half { border-top: 1px solid #ddd8cd; margin-top: 28px; padding-top: 28px; }

  .v3x-reports__cap { padding: 18px; }
  .v3x-reports__ex { display: none; }
  .v3x-reports__row { grid-template-columns: 1fr; gap: 0; }
  .v3x-reports__item { padding: 14px 0; }
}

/* ============================================================
   Browse-all (gateway) page — /posts/all
   ============================================================ */
.browse-head { padding: 30px 0 6px; }
.browse-head .crumbs { font-size: 15px; color: var(--muted); margin-bottom: 16px; font-weight: 600; }
.browse-head .crumbs a { color: var(--muted); text-decoration: none; }
.browse-head .crumbs a:hover { color: var(--primary); }
.browse-head .crumbs span { color: var(--navy); font-weight: 800; }
.browse-head .eyebrow {
  margin: 0 0 6px; font-size: 12px; font-weight: 700; letter-spacing: .04em;
  color: var(--primary);
}
.browse-head h1 {
  margin: 0 0 8px; font-family: var(--f-display);
  font-size: 34px; font-weight: 800; color: var(--ink);
}
.browse-head .sub { margin: 0; font-size: 15px; color: var(--muted); max-width: 640px; }

/* gateway tiles — hover-reveal: at rest only the name shows over a clean photo;
   on hover/focus a solid navy panel slides up to reveal the latest headline */
.browse-cats a.tile {
  text-decoration: none;
  padding: 0;                      /* label + panel position themselves */
}
.browse-cats a.tile:hover { transform: none; }   /* zoom the image, not the tile */

/* zooming image layer (fills the tile, scales on hover) */
.browse-cat__img {
  position: absolute; inset: 0; z-index: 0;
  background-size: cover; background-position: center;
  transition: var(--card-zoom-t);
}
.browse-cats a.tile:hover .browse-cat__img { transform: scale(var(--card-zoom)); }

/* permanent bottom gradient so the resting name reads over a busy photo */
.browse-cat__scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, transparent 38%, rgba(11,14,21,.62));
}

/* soft-cornered rotated square — same shape as the "كل الأخبار" tick. Navy at
   rest, flips to solid white once it sits on the navy reveal panel. */
.browse-cat__dia {
  width: 11px; height: 11px; flex: none;
  border-radius: 3px; transform: rotate(45deg);
}
.browse-cat__rest .browse-cat__dia { background: var(--navy); }
.browse-cat__panel-top .browse-cat__dia { background: var(--navy); }

/* resting label — diamond + name pinned to the bottom-start (right in RTL) */
.browse-cat__rest {
  position: absolute; z-index: 2;
  inset-inline-start: 0; inset-block-end: 0;
  display: flex; align-items: center; gap: 8px;
  padding: 14px;
}
.browse-cats a.tile .name {
  display: block; margin: 0;
  font-family: var(--f-display);
  font-size: 15px; font-weight: 700; color: #fff;
  text-shadow: 0 1px 4px rgba(0,0,0,.5);
}

/* reveal panel — solid navy, sits below the tile and slides up over everything */
.browse-cat__panel {
  position: absolute; inset: 0; z-index: 3;
  display: flex; flex-direction: column;
  padding: 15px;
  background: color-mix(in srgb, var(--surface-3) 80%, transparent);   /* beige (most-read strip), translucent frosted glass */
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  transform: translateY(101%);
  transition: transform .28s cubic-bezier(.4,.2,.2,1);
}
.browse-cats a.tile:hover .browse-cat__panel,
.browse-cats a.tile:focus-within .browse-cat__panel { transform: translateY(0); }

.browse-cat__panel-top {
  display: flex; align-items: center; gap: 7px;
}
.browse-cat__cat {
  font-family: var(--f-display);
  font-size: 11px; font-weight: 700; color: var(--navy);
}
.browse-cat__headline {
  margin-top: 9px;
  font-size: 13.5px; font-weight: 600; line-height: 1.5; color: var(--navy);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
}
.browse-cat__enter {
  margin-top: auto;
  display: flex; align-items: center; gap: 6px;
  font-family: var(--f-display);
  font-size: 12px; font-weight: 700; color: var(--navy);
}
.browse-cat__enter svg { width: 15px; height: 15px; }

/* magazine feed */
.browse-feed { margin-top: 4px; }
/* "كل الأخبار" heading — navy diamond tick + title + navy hairline strip,
   all on one level (the site's shared section-header identity) */
.browse-feed-head {
  display: flex; align-items: center; gap: 14px;
  margin: 6px 0 20px;
}
.browse-feed-head .diamond {
  width: 13px; height: 13px; border-radius: 3.5px;
  transform: rotate(45deg);
  background: var(--navy);
  flex-shrink: 0;
}
.browse-feed-head h1 {
  margin: 0; font-family: var(--f-display);
  font-size: 28px; font-weight: 800; color: var(--ink);
  white-space: nowrap;
}
.browse-feed-head .rule { flex: 1; height: 1px; background: var(--line); }
/* landing only: breathing room above, to clear the most-read band */
.browse-feed-head.is-spaced { margin-top: 32px; }
.browse-feed__top {
  display: grid; grid-template-columns: 1.7fr 1fr; gap: 22px; margin-bottom: 24px;
}

/* lead card */
.browse-lead {
  position: relative; display: block; text-decoration: none;
  border-radius: var(--r-md); overflow: hidden; min-height: 360px;
}
.browse-lead__img {
  position: absolute; inset: 0; background-size: cover; background-position: center;
  transition: var(--card-zoom-t);
}
.browse-lead:hover .browse-lead__img { transform: scale(var(--card-zoom)); }
.browse-lead::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(10,12,40,.92) 0%, rgba(10,12,40,.45) 45%, rgba(10,12,40,0) 78%);
}
.browse-lead__body {
  position: relative; z-index: 1; height: 100%;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 26px; color: #fff;
}
.browse-lead__chip {
  align-self: flex-start; margin-bottom: 12px;
  background: var(--primary); color: #fff; font-size: 12px; font-weight: 700;
  padding: 4px 12px; border-radius: 999px;
}
.browse-lead h2 {
  margin: 0 0 10px; font-family: var(--f-display);
  font-size: 28px; font-weight: 800; line-height: 1.35; color: #fff;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.browse-lead .dek {
  margin: 0 0 12px; font-size: 15px; line-height: 1.6; color: rgba(255,255,255,.85);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.browse-lead .time { font-size: 13px; color: rgba(255,255,255,.72); font-family: var(--f-num); }

/* side horizontal cards (next 3) */
.browse-side { display: flex; flex-direction: column; gap: 16px; }
.browse-hcard {
  display: grid; grid-template-columns: 1fr 92px; gap: 12px; align-items: start;
  text-decoration: none; padding-bottom: 16px; border-bottom: 1px solid var(--line);
}
.browse-side .browse-hcard:last-child { border-bottom: 0; padding-bottom: 0; }
.browse-hcard__thumb {
  display: block;
  width: 92px; height: 92px; border-radius: var(--r-sm, 8px); overflow: hidden;
  background-size: cover; background-position: center; flex-shrink: 0;
}
.browse-hcard__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: var(--card-zoom-t); }
.browse-hcard:hover .browse-hcard__thumb img { transform: scale(var(--card-zoom)); }
/* plain-text kicker (override the global .kicker pill so it doesn't overlap the thumb) */
.browse-hcard .kicker {
  display: block; background: none; padding: 0; border-radius: 0;
  font-size: 12px; font-weight: 700; color: var(--primary);
}
.browse-hcard h3 {
  margin: 5px 0 6px; font-size: 15px; font-weight: 700; line-height: 1.5;
  color: var(--ink); font-family: var(--f-display);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.browse-hcard:hover h3 { color: var(--primary); }
.browse-hcard .time { display: block; font-size: 12px; color: var(--meta); font-weight: 400; letter-spacing: -0.12px; font-family: var(--f-body); }

/* bottom 3-col grid (next 6) */
.browse-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.browse-card { display: block; text-decoration: none; }
.browse-card__thumb {
  display: block;
  aspect-ratio: 16/10; border-radius: var(--r-md); overflow: hidden;
  background-size: cover; background-position: center; margin-bottom: 12px;
}
.browse-card__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: var(--card-zoom-t); }
.browse-card:hover .browse-card__thumb img { transform: scale(var(--card-zoom)); }
/* plain-text kicker (override the global .kicker pill so it doesn't overlap the thumb) */
.browse-card .kicker {
  display: block; background: none; padding: 0; border-radius: 0;
  font-size: 12px; font-weight: 700; color: var(--primary);
}
.browse-card h3 {
  margin: 6px 0 8px; font-size: 17px; font-weight: 700; line-height: 1.5;
  color: var(--ink); font-family: var(--f-display);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.browse-card:hover h3 { color: var(--primary); }
.browse-card .time { display: block; font-size: 12px; color: var(--meta); font-weight: 400; letter-spacing: -0.12px; font-family: var(--f-body); }

@media (max-width: 980px) {
  .browse-feed__top { grid-template-columns: 1fr; }
  .browse-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .browse-head h1 { font-size: 26px; }
  .browse-grid { grid-template-columns: 1fr; }
  .browse-lead { min-height: 300px; }
  .browse-lead h2 { font-size: 22px; }
}



/* ============================================================
   Square photo corners (root homepage only)
   ------------------------------------------------------------
   Every photo on the homepage meets its box with a hard corner,
   the way BBC News does. Rounded media reads as "app card"; sharp
   media reads as "newspaper", and it lets adjacent photos in a
   grid line up on a true edge instead of on a curve.

   Scoped to `body.home-main`, which only the root route carries
   (/v2 and /v3 use their own body classes), so the frozen demo
   routes and every article page keep their rounded thumbs.

   `.person-chip__avatar` deliberately stays round: a circular
   portrait is a distinct form, not a rounded box. So do the poll's
   option rows and vote button — those are controls, not media.

   One knob, `--r-photo`: every photo corner on the page reads from
   it, so the whole set retunes together instead of drifting back
   into the 6/8/10/14px spread this replaced. Photos that bleed to
   the screen edge on mobile override it back to 0 (home.mobile.css)
   — a curve has nothing to sit against out there.
   ============================================================ */
body.home-main { --r-photo: 8px; }

body.home-main .b1-feature__viewport,
body.home-main .b1-rail__thumb,
body.home-main .b1-latest__thumb,
body.home-main .rd-lead__media,
body.home-main .rd-lead__lthumb,
body.home-main .rd-list__thumb,
body.home-main .rd-mosaic__tile,
body.home-main .rd-headline__thumb,
body.home-main .rd-tech-thumb,
body.home-main .vstrip__thumb,
body.home-main .thumb,
body.home-main .poll2__media,
/* traces the active rail card, so it has to follow the photo's corner */
body.home-main .b1-rail__hl {
  border-radius: var(--r-photo);
}

/* ============================================================
   One photo ratio (root homepage only)
   ------------------------------------------------------------
   Size carries hierarchy — a 778px hero next to a 96px sidebar
   thumb is the page saying which story matters. Shape carries
   nothing, so it shouldn't vary: BBC renders four different photo
   sizes and every one of them is 16:9.

   Ours had drifted to seven ratios (1.04, 1.40, 1.45, 1.71, 1.90,
   2.31, 16:10), none of them chosen — each fell out of a hardcoded
   width/height pair. Because the images are `object-fit: cover`,
   every off-ratio box was cropping the source differently: a face
   framed for the 16:9 lead lost its forehead in the near-square
   sidebar box.

   Dropping the fixed heights for `aspect-ratio` also makes these
   boxes respond to their column instead of pinning a pixel height.

   Two ratios stay on purpose: `.vstrip__thumb` (9:16 portrait —
   vertical video, where the shape IS the message) and the circular
   avatars. Scoped to `body.home-main` so /v2 and /v3 are untouched.

   The poll photo (`.poll2__media`) is the same 16:9 lead box as
   `.rd-lead__media` — one size, shared with سياسة.
   ============================================================ */
body.home-main { --ar-photo: 16 / 9; }

body.home-main .b1-rail__thumb,
body.home-main .b1-latest__thumb,
body.home-main .rd-lead__lthumb,
body.home-main .rd-list__thumb,
body.home-main .rd-headline__thumb,
body.home-main .rd-tech-thumb,
body.home-main .rd-cat-grid article .thumb,
body.home-main .rd-most-read article .thumb,
body.home-main .rd-mosaic__tile {
  height: auto;
  aspect-ratio: var(--ar-photo);
}

/* .rd-list__card is a flex row with `align-items: stretch`, so the thumb was
   being pulled to the full height of the text column beside it (4:3) and its
   own aspect-ratio never applied. Let it size itself. */
body.home-main .rd-list__thumb { align-self: flex-start; }

/* The mosaic's rows were pinned at 152px, which is what forced its tiles to
   ~1.90. Let the rows size to their 16:9 content instead: the 2x2 lead and the
   1x1 tiles then both resolve to 1.778. */
body.home-main .rd-mosaic { grid-auto-rows: auto; }