/* ============================================================================
   SADER — SECTION: NEWSROOM  (#newsroom)  · LIGHT world
   Reference: Porsche Newsroom. The standalone newsroom centrepiece — a hero
   band with a prominent brass-underlined search + data-driven filter pills, a
   chronological teaser grid with "Load more", and an image-free "Sader in the
   News" ledger of outbound links to third-party coverage.
   Reuses tokens + .eyebrow / .section-head / .card / .pill / .btn--ghost /
   .btn--text / .divider / .rail-label. Bespoke CSS below is layout-only.
   All properties logical (no left/right) so RTL flips for free.
   ============================================================================ */

.s-newsroom {
  position: relative;
  overflow: hidden;
}

/* A barely-there brass vignette from the block-start to give the parchment
   ground depth behind the masthead — never a flat fill. */
.s-newsroom__hero {
  position: relative;
  /* A small, tidy gap below the search before the "Latest stories" header. */
  padding-block-end: clamp(var(--space-6), 3vw, var(--space-7));
  background-image:
    radial-gradient(120% 80% at 100% 0%,
      rgba(17, 17, 17, 0.06) 0%,
      transparent 58%);
  background-repeat: no-repeat;
}

/* ==========================================================================
   HERO BAND — eyebrow + monumental serif title + lead, then the search/filter.
   ========================================================================== */
.s-newsroom__masthead {
  max-inline-size: 60rem;
}
.s-newsroom__title {
  font-family: var(--font-display);
  font-size: var(--fs-display-2);
  font-weight: var(--fw-semi);
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-display);
  color: var(--text);
  margin-block-start: var(--space-5);
}
.s-newsroom__lead {
  font-family: var(--font-body);
  font-size: var(--fs-lead);
  line-height: var(--lh-body);
  color: var(--text-muted);
  max-inline-size: 44rem;
  margin-block-start: var(--space-5);
}
[dir="rtl"] .s-newsroom__lead { line-height: var(--lh-body-ar); }

/* ---- Search field with a brass underline (Porsche-clean) --------------- */
.s-newsroom__search {
  position: relative;
  margin-block-start: clamp(var(--space-8), 5vw, var(--space-10));
  max-inline-size: 100%;
}
.s-newsroom__search-field {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-4);
  border-block-end: 1px solid var(--line-strong);
  transition: border-color var(--dur-base) var(--ease);
}
.s-newsroom__search-field:focus-within { border-block-end-color: var(--accent); }
/* The brass underline that grows under the field on focus. */
.s-newsroom__search-field::after {
  content: "";
  position: absolute;
  inset-block-end: -1px;
  inset-inline-start: 0;
  inline-size: 0;
  block-size: 2px;
  background-color: var(--accent);
  transition: inline-size var(--dur-slow) var(--ease);
}
.s-newsroom__search-field:focus-within::after { inline-size: 100%; }

.s-newsroom__search-icon {
  flex: 0 0 auto;
  inline-size: 22px;
  block-size: 22px;
  color: var(--accent);
}
.s-newsroom__search-input {
  flex: 1 1 auto;
  min-inline-size: 0;
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--text);
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1.0rem + 1vw, 1.75rem);
  font-weight: var(--fw-regular);
  line-height: 1.2;
  padding-block: var(--space-4);
  padding-inline: 0;
}
.s-newsroom__search-input::placeholder {
  color: var(--text-faint);
  font-style: italic;
  opacity: 1;
}
[dir="rtl"] .s-newsroom__search-input::placeholder { font-style: normal; }
.s-newsroom__search-input:focus { outline: none; }
.s-newsroom__search-input:focus-visible { outline: none; }

/* ---- Filter pills row --------------------------------------------------- */
.s-newsroom__filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-block-start: clamp(var(--space-6), 3vw, var(--space-7));
}

/* ==========================================================================
   NEWSROOM HERO — unified with the site's full-viewport dark heroes
   (archive / services / about): filtered image backdrop + layered scrim +
   eyebrow kicker + monumental serif headline. Here the backdrop IS the
   popular-news carousel: images crossfade, a story panel rotates with
   them where other heroes carry their lead, and a rail along the bottom
   holds the 01/05 counter, timed progress bars and hairline arrows.
   Autoplay pauses on hover/focus and under prefers-reduced-motion.
   ========================================================================== */
.s-newsroom-hero {
  position: relative;
  min-block-size: 100svh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background-color: #080808;
  color: var(--text);
  touch-action: pan-y;
}

/* ---- Rotating backdrops (one per popular story) -------------------------- */
.s-newsroom-hero__backdrops {
  position: absolute;
  inset: 0;
  z-index: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
.s-newsroom-hero__backdrop {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity var(--dur-slower) var(--ease);
}
.s-newsroom-hero__backdrop.is-active { opacity: 1; }
/* Two layers: a blurred cover fill behind, and the photo shown IN FULL
   (object-fit: contain — never cropped or zoomed) on top of it. */
.s-newsroom-hero__backdrop-blur {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  filter: blur(32px) saturate(1.1) brightness(0.4);
  transform: scale(1.12);   /* hides the blur's soft edges */
}
.s-newsroom-hero__backdrop-img {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  /* Full colour, dimmed just enough for the white type to stay readable —
     the scrim carries the rest of the legibility work. */
  filter: saturate(1.05) brightness(0.72);
}
.s-newsroom-hero:not(.is-ready) .s-newsroom-hero__backdrop,
.s-newsroom-hero.is-dragging .s-newsroom-hero__backdrop { transition: none; }

/* Ghost edition numeral — echoes the services-page watermark. */
.s-newsroom-hero__ghost {
  position: absolute;
  inset-block-start: calc(var(--header-h) + var(--space-7));
  inset-inline-end: var(--gutter);
  font-family: var(--font-display);
  font-size: clamp(6rem, 15vw, 14rem);
  font-weight: var(--fw-light);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(244, 244, 244, 0.14);
  pointer-events: none;
  user-select: none;
}

/* Layered scrim — identical recipe to the archive hero. */
.s-newsroom-hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(to top, #080808 2%, rgba(8,8,8,0.20) 48%, rgba(8,8,8,0.55) 100%),
    linear-gradient(to right, rgba(8,8,8,0.80) 0%, transparent 62%);
  pointer-events: none;
}
[dir="rtl"] .s-newsroom-hero__scrim {
  background:
    linear-gradient(to top, #080808 2%, rgba(8,8,8,0.20) 48%, rgba(8,8,8,0.55) 100%),
    linear-gradient(to left, rgba(8,8,8,0.80) 0%, transparent 62%);
}

/* ---- Content column ------------------------------------------------------ */
.s-newsroom-hero__inner {
  position: relative;
  z-index: 2;
  inline-size: min(var(--container), 100% - 2 * var(--gutter));
  margin-inline: auto;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  /* Shared hero offset: eyebrow starts at header-h + space-9 from the top. */
  padding-block-start: calc(var(--header-h) + var(--space-9));
  padding-block-end: 0;
}
.s-newsroom-hero__kicker {
  color: rgba(255, 255, 255, 0.55);
  margin-block-end: var(--space-6);
}
.s-newsroom-hero__headline {
  font-family: var(--font-display);
  font-size: clamp(3.25rem, 1.4rem + 7.6vw, 8.5rem);
  font-weight: var(--fw-light);
  line-height: 0.96;
  letter-spacing: var(--tracking-display);
  color: var(--text);
  margin: 0;
}
.s-newsroom-hero__headline em {
  font-style: italic;
  font-weight: var(--fw-regular);
  color: var(--text);
}
[dir="rtl"] .s-newsroom-hero__headline { line-height: 1.12; }
[dir="rtl"] .s-newsroom-hero__headline em { font-style: normal; }

/* ---- Rotating story panel (sits where other heroes put their lead) ------ */
.s-newsroom-hero__stories {
  position: relative;
  margin: 0;
  margin-block-start: auto;
  padding: 0;
  padding-block-start: var(--space-7);
  list-style: none;
  min-block-size: clamp(11rem, 24vh, 15rem);
}
.s-newsroom-hero__story {
  position: absolute;
  inset: 0;
  inset-block-start: var(--space-7);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-slow) var(--ease),
              visibility 0s linear var(--dur-slow);
}
.s-newsroom-hero__story.is-active {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--dur-slow) var(--ease);
}
.s-newsroom-hero:not(.is-ready) .s-newsroom-hero__story,
.s-newsroom-hero.is-dragging .s-newsroom-hero__story { transition: none; }

.s-newsroom-hero__story-link {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  max-inline-size: 46rem;
  color: inherit;
  text-decoration: none;
}
.s-newsroom-hero__story-kicker { color: rgba(255, 255, 255, 0.55); }
.s-newsroom-hero__story-title {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: var(--fw-semi);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--text);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}
.s-newsroom-hero__story-meta {
  font-family: var(--font-body);
  font-size: var(--fs-small);
  color: var(--text-faint);
}
.s-newsroom-hero__story-cta { margin-block-start: var(--space-1); }

/* Staggered text reveal on story change. */
.s-newsroom-hero__story-kicker,
.s-newsroom-hero__story-title,
.s-newsroom-hero__story-meta,
.s-newsroom-hero__story-cta {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--dur-reveal) var(--ease),
              transform var(--dur-reveal) var(--ease);
}
.s-newsroom-hero__story.is-active .s-newsroom-hero__story-kicker { transition-delay: 100ms; }
.s-newsroom-hero__story.is-active .s-newsroom-hero__story-title  { transition-delay: 180ms; }
.s-newsroom-hero__story.is-active .s-newsroom-hero__story-meta   { transition-delay: 260ms; }
.s-newsroom-hero__story.is-active .s-newsroom-hero__story-cta    { transition-delay: 340ms; }
.s-newsroom-hero__story.is-active .s-newsroom-hero__story-kicker,
.s-newsroom-hero__story.is-active .s-newsroom-hero__story-title,
.s-newsroom-hero__story.is-active .s-newsroom-hero__story-meta,
.s-newsroom-hero__story.is-active .s-newsroom-hero__story-cta {
  opacity: 1;
  transform: none;
}

/* ---- Rail — counter · progress bars · arrows ----------------------------- */
.s-newsroom-hero__rail {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: clamp(var(--space-5), 4vw, var(--space-8));
  padding-block: var(--space-4);
  margin-block-start: clamp(var(--space-5), 4vh, var(--space-8));
  border-block-start: 1px solid rgba(244, 244, 244, 0.16);
}
.s-newsroom-hero__count {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-2);
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  color: var(--text);
  min-inline-size: 4.5rem;
}
.s-newsroom-hero__count-sep,
.s-newsroom-hero__count [data-news-slider-total] {
  font-size: var(--fs-small);
  color: var(--text-faint);
}

.s-newsroom-hero__dots {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex: 1 1 auto;
  min-inline-size: 0;
}
.s-newsroom__slider-dot {
  position: relative;
  appearance: none;
  border: 0;
  padding: 0;
  flex: 0 1 clamp(32px, 6vw, 72px);
  min-inline-size: 20px;
  block-size: 20px;               /* generous hit target; visual line is 2px */
  background: transparent;
  cursor: pointer;
}
.s-newsroom__slider-dot::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-start: 50%;
  block-size: 2px;
  transform: translateY(-50%);
  background-color: rgba(244, 244, 244, 0.22);
  transition: background-color var(--dur-fast) var(--ease);
}
.s-newsroom__slider-dot:hover::before { background-color: rgba(244, 244, 244, 0.45); }
.s-newsroom__slider-dot:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
.s-newsroom__slider-dot-fill {
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 50%;
  transform: translateY(-50%);
  block-size: 2px;
  inline-size: 0;
  background-color: var(--text);
}
.s-newsroom__slider-dot.is-active .s-newsroom__slider-dot-fill { inline-size: 100%; }
@keyframes s-newsroom-progress {
  from { inline-size: 0; }
  to   { inline-size: 100%; }
}
.s-newsroom-hero.is-playing .s-newsroom__slider-dot.is-active .s-newsroom__slider-dot-fill {
  animation: s-newsroom-progress var(--slider-interval, 6000ms) linear both;
}

.s-newsroom-hero__nav {
  display: flex;
  gap: var(--space-2);
  margin-inline-start: auto;
}
.s-newsroom__slider-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: 48px;
  block-size: 48px;
  border: 1px solid rgba(244, 244, 244, 0.28);
  border-radius: var(--radius-0);
  background-color: transparent;
  color: var(--text);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease);
}
.s-newsroom__slider-arrow:hover {
  background-color: var(--text);
  border-color: var(--text);
  color: #0E0E0E;
}
.s-newsroom__slider-arrow:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
.s-newsroom__slider-arrow svg { inline-size: 20px; block-size: 20px; }
[dir="rtl"] .s-newsroom__slider-arrow svg { transform: scaleX(-1); }

.s-newsroom-hero.is-single .s-newsroom-hero__nav,
.s-newsroom-hero.is-single .s-newsroom-hero__dots { display: none; }

@media (max-width: 640px) {
  .s-newsroom-hero__ghost { font-size: 5rem; }
  .s-newsroom-hero__story-title { -webkit-line-clamp: 4; }
  .s-newsroom-hero__count { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .s-newsroom-hero__backdrop,
  .s-newsroom-hero__story,
  .s-newsroom-hero__story-kicker,
  .s-newsroom-hero__story-title,
  .s-newsroom-hero__story-meta,
  .s-newsroom-hero__story-cta { transition: none; }
  .s-newsroom__slider-dot-fill { animation: none !important; }
}

/* ==========================================================================
   SADER IN THE NEWS — third-party press mentions as a typographic ledger.
   Deliberately image-free: these are other people's stories, so the outlet
   name and the headline carry it, not a thumbnail we don't own. Hairline-ruled
   rows, whole row is the hit area. Logical properties so it mirrors for RTL.
   ========================================================================== */
.s-newsroom__mentions-wrap {
  margin-block-start: clamp(var(--space-9), 6vw, var(--space-11));
}
.s-newsroom__mentions-head {
  display: flex;
  align-items: baseline;
  gap: var(--space-5);
  margin-block-end: clamp(var(--space-5), 3vw, var(--space-7));
}
.s-newsroom__mentions-head .eyebrow { flex: 0 0 auto; }
.s-newsroom__mentions-rule {
  flex: 1 1 auto;
  block-size: 1px;
  background-color: var(--line-brass);
}
.s-newsroom__mentions-wrap[hidden] { display: none; }

.news-mentions {
  list-style: none;
  margin: 0;
  padding: 0;
  border-block-start: 1px solid var(--line);
}
.news-mentions__item { border-block-end: 1px solid var(--line); }

.news-mentions__link {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  column-gap: clamp(var(--space-4), 2.5vw, var(--space-7));
  padding-block: clamp(var(--space-5), 2.4vw, var(--space-7));
  padding-inline: clamp(var(--space-3), 1.4vw, var(--space-5));
  /* Pull the ground tint out to the rule's full width so the row reads as one
     target, while the text stays aligned with the rest of the column. */
  margin-inline: calc(-1 * clamp(var(--space-3), 1.4vw, var(--space-5)));
  text-decoration: none;
  color: inherit;
  transition: background-color var(--dur-base) var(--ease),
              color var(--dur-base) var(--ease);
}
.news-mentions__link:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
}

/* A quiet shelfmark numeral, same register as the catalogue counters. */
.news-mentions__index {
  font-family: var(--font-display);
  font-size: var(--fs-caption);
  font-weight: var(--fw-light);
  font-variant-numeric: tabular-nums;
  color: var(--text-faint);
  transition: color var(--dur-base) var(--ease);
}

.news-mentions__body { min-inline-size: 0; }

/* Publisher and date share one line: who ran it, and when. */
.news-mentions__meta {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-block-end: var(--space-2);
}

.news-mentions__date {
  font-family: var(--font-body);
  font-size: var(--fs-micro);
  font-weight: var(--fw-light);
  letter-spacing: var(--tracking-eyebrow);
  font-variant-numeric: tabular-nums;
  color: var(--text-faint);
  transition: color var(--dur-base) var(--ease);
}
/* Separator belongs to the date, so it disappears with it when absent. */
.news-mentions__date::before {
  content: "·";
  margin-inline-end: var(--space-2);
  color: var(--text-faint);
}

.news-mentions__source {
  display: block;
  font-family: var(--font-body);
  font-size: var(--fs-micro);
  font-weight: var(--fw-semi);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--accent-deep);
}
.news-mentions__title {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: var(--fw-semi);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--text);
  text-wrap: pretty;
  transition: color var(--dur-base) var(--ease);
}
[dir="rtl"] .news-mentions__title { line-height: var(--lh-body-ar); }
/* A headline in the other script (an English article title on the Arabic page)
   needs its own `dir` for correct bidi ordering — but `dir` also flips
   text-align, which would tear it away from the column's start edge. Pin the
   alignment back to the page's reading edge. */
[dir="rtl"] .news-mentions__title[dir="ltr"] { text-align: right; }
[dir="ltr"] .news-mentions__title[dir="rtl"] { text-align: left; }

/* Outbound arrow — points away from the reading direction. */
.news-mentions__arrow {
  inline-size: 1.35rem;
  block-size: 1.35rem;
  color: var(--text-faint);
  transition: color var(--dur-base) var(--ease), translate var(--dur-base) var(--ease);
}
[dir="rtl"] .news-mentions__arrow { scale: -1 1; }

/* Hover / focus: a faint ground tint so the whole row reads as the target, not
   just the headline. --bg-alt is the section-alternation ground, so it stays a
   half-step off the page in both light and dark themes. */
.news-mentions__link:hover,
.news-mentions__link:focus-visible { background-color: var(--bg-alt); }

.news-mentions__link:hover .news-mentions__title,
.news-mentions__link:focus-visible .news-mentions__title { color: var(--accent-deep); }
.news-mentions__link:hover .news-mentions__date,
.news-mentions__link:focus-visible .news-mentions__date { color: var(--text-muted); }
.news-mentions__link:hover .news-mentions__index,
.news-mentions__link:hover .news-mentions__arrow,
.news-mentions__link:focus-visible .news-mentions__arrow { color: var(--accent); }

@media (prefers-reduced-motion: no-preference) {
  .news-mentions__link:hover .news-mentions__arrow,
  .news-mentions__link:focus-visible .news-mentions__arrow { translate: 0.35rem 0; }
  [dir="rtl"] .news-mentions__link:hover .news-mentions__arrow,
  [dir="rtl"] .news-mentions__link:focus-visible .news-mentions__arrow { translate: -0.35rem 0; }
}

/* ==========================================================================
   THE FEED — responsive teaser grid + load-more.
   ========================================================================== */
.s-newsroom__feed-wrap {
  margin-block-start: clamp(var(--space-8), 5vw, var(--space-10));
}
.s-newsroom__feed-head {
  display: flex;
  align-items: baseline;
  gap: var(--space-5);
  margin-block-end: clamp(var(--space-6), 4vw, var(--space-8));
}
.s-newsroom__feed-rule {
  flex: 1 1 auto;
  block-size: 1px;
  background-color: var(--line-brass);
}

.s-newsroom__feed {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(var(--space-6), 2.5vw, var(--space-8));
}
.s-newsroom__feed[hidden] { display: none; }

/* ---- Teaser card -------------------------------------------------------- */
.news-card {
  background-color: var(--surface);
  transition: transform var(--dur-base) var(--ease),
              box-shadow var(--dur-base) var(--ease),
              border-color var(--dur-base) var(--ease);
}
.news-card__link {
  display: flex;
  flex-direction: column;
  block-size: 100%;
  color: inherit;
}
.news-card__media {
  position: relative;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background-color: var(--surface-2);
}
.news-card__media img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}
.news-card__body {
  gap: var(--space-3);
  padding: clamp(var(--space-5), 2vw, var(--space-6));
  flex: 1 1 auto;
}
.news-card__title {
  /* Clamp long headlines to keep the grid even without breaking the rhythm. */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.news-card__text {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
[dir="rtl"] .news-card__text { line-height: var(--lh-body-ar); }
.news-card__cta { margin-block-start: auto; padding-block-start: var(--space-4); }

@media (prefers-reduced-motion: no-preference) {
  .news-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-luxe); }
}
.news-card__link:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
}

/* ---- Video play badge over media (brass-ruled, restrained) ------------- */
.news-card__play {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  transform: translate(-50%, -50%);
  inline-size: clamp(46px, 6vw, 60px);
  block-size: clamp(46px, 6vw, 60px);
  border-radius: var(--radius-pill);
  background-color: rgba(0, 0, 0, 0.55);
  border: 1px solid var(--line-brass);
  pointer-events: none;
  z-index: 1;
  transition: background-color var(--dur-fast) var(--ease);
}
@supports (backdrop-filter: blur(1px)) {
  .news-card__play { backdrop-filter: blur(6px); }
}
/* The triangle — a pure-CSS brass play glyph, mirrors via logical border. */
.news-card__play::after {
  content: "";
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 54%;
  transform: translate(-50%, -50%);
  inline-size: 0;
  block-size: 0;
  border-block-start: 8px solid transparent;
  border-block-end: 8px solid transparent;
  border-inline-start: 13px solid var(--accent);
  border-inline-end: 0;
}
[dir="rtl"] .news-card__play::after { transform: translate(-50%, -50%) scaleX(-1); }
.card:hover .news-card__play,
.card:focus-within .news-card__play { background-color: rgba(0, 0, 0, 0.7); }

/* Imageless fallback: a warm parchment panel with a hairline brass frame so a
   missing image never reads as broken. */
.card__media.is-imageless {
  display: grid;
  place-items: center;
  border: 1px solid var(--line-brass);
  background-image:
    repeating-linear-gradient(135deg,
      rgba(17, 17, 17, 0.05) 0,
      rgba(17, 17, 17, 0.05) 2px,
      transparent 2px,
      transparent 9px);
}
.card__media.is-imageless::before {
  content: "SADER";
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  letter-spacing: var(--tracking-wide);
  color: var(--text-faint);
}
[dir="rtl"] .card__media.is-imageless::before { content: "صادر"; }

/* ---- Load more ---------------------------------------------------------- */
.s-newsroom__more {
  display: flex;
  justify-content: center;
  margin-block-start: clamp(var(--space-8), 5vw, var(--space-10));
}
.s-newsroom__more[hidden] { display: none; }

/* ==========================================================================
   EMPTY / "COMING SOON" state — tasteful, brass-ruled, generous.
   ========================================================================== */
.s-newsroom__empty {
  text-align: center;
  max-inline-size: 40rem;
  margin-inline: auto;
  padding-block: clamp(var(--space-9), 7vw, var(--space-11));
  padding-inline: var(--space-5);
}
.s-newsroom__empty[hidden] { display: none; }
.news-empty__mark {
  font-family: var(--font-display);
  font-weight: var(--fw-light);
  font-size: clamp(2.5rem, 1.6rem + 4vw, 4.5rem);
  line-height: 1;
  color: var(--accent);
  opacity: 0.5;
}
.news-empty__title {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: var(--fw-semi);
  color: var(--text);
  margin-block-start: var(--space-5);
}
.news-empty__text {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text-muted);
  margin-block-start: var(--space-4);
}
[dir="rtl"] .news-empty__text { line-height: var(--lh-body-ar); }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1080px) {
  .s-newsroom__feed { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 720px) {
  .s-newsroom__feed { grid-template-columns: 1fr; }
  .s-newsroom__mentions-head,
  .s-newsroom__feed-head { gap: var(--space-4); }
}

@media (max-width: 560px) {
  /* Drop the numeral before the headline starts wrapping awkwardly. */
  .news-mentions__index { display: none; }
  .news-mentions__link { grid-template-columns: minmax(0, 1fr) auto; }
  .news-mentions__title { font-size: var(--fs-body); }
}

/* Imageless items render as a typographic editorial card (no media box) — an
   intentional text feature rather than a card with a blank/placeholder image. */
.news-card--text { background: var(--surface); border-block-start: 2px solid var(--accent); }
.news-card--text .news-card__link {
  display: flex; flex-direction: column;
  min-block-size: clamp(15rem, 20vw, 18rem);
  padding: clamp(var(--space-5), 2vw, var(--space-7));
}
.news-card--text .news-card__body { padding: 0; gap: var(--space-3); flex: 1 1 auto; }
.news-card--text .news-card__kicker { color: var(--accent); }
.news-card--text .news-card__title { font-size: var(--fs-h3); -webkit-line-clamp: 4; }
.news-card--text .news-card__cta { margin-block-start: auto; }