/* ============================================================================
   SADER — NEWSROOM EXTRAS  (s-newsroom-extras)
   Two stacked bands for the newsroom page:
     (a) .s-newsroom-extras        · LIGHT  · Watch & Listen
         A cinematic 16:9 video card (brass play button over the media frame)
         beside a designed "Coming soon" podcasts empty state.
     (b) .s-newsroom-extras__social · DARK full-bleed · Follow SADER
         Porsche full-page-width social band: large channel cards with brass-
         stroke inline icons + @handles, and an empty feed mount for later.
   Reference: Porsche full-page-width "bg-grey-darker" social block + media block.
   Composes on .section .section-head .eyebrow .card__media .kicker .tag
   .btn--text .divider .media-overlay. Bespoke CSS below is LAYOUT ONLY.
   All properties logical → RTL flips for free.
   ============================================================================ */

.s-newsroom-extras {
  background-color: var(--bg-alt);   /* ivory — sets it apart from the feed list above */
}

/* --------------------------------------------------------------------------
   (a) WATCH & LISTEN — two-up: a wide video card + a narrower podcasts panel.
   Desktop ≈ 1.6fr / 1fr. Collapses to one column on smaller viewports.
   -------------------------------------------------------------------------- */
.s-newsroom-extras__media {
  display: grid;
  grid-template-columns: 1.65fr 1fr;
  gap: clamp(var(--space-5), 2.4vw, var(--space-8));
  align-items: stretch;
}

/* ---- VIDEO CARD ---------------------------------------------------------- */
.s-newsroom-extras__video {
  position: relative;
  display: flex;
  background-color: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-xs);
  overflow: hidden;
  transition: border-color var(--dur-base) var(--ease),
              box-shadow var(--dur-base) var(--ease);
}
.s-newsroom-extras__video-link {
  display: flex;
  flex-direction: column;
  inline-size: 100%;
  color: inherit;
  text-decoration: none;
}

/* 16:9 cinematic media frame. The frame never moves; only the image scales
   (Hermès rule) — handled by the shared .card__media img transition. */
.s-newsroom-extras__video-media {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  inline-size: 100%;
  isolation: isolate;
}
.s-newsroom-extras__video-media img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

/* Brass play button, centred over the media frame. Brass ring + glyph only —
   the accent never fills the frame. Fills on hover (the one warm flush). */
.s-newsroom-extras__play {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  transform: translate(-50%, -50%);
  z-index: var(--z-raised);
  display: grid;
  place-items: center;
  inline-size: clamp(4.25rem, 6vw, 5.5rem);
  block-size: clamp(4.25rem, 6vw, 5.5rem);
  color: var(--accent-strong);
  background-color: rgba(0, 0, 0, 0.42);
  border: 1px solid var(--line-brass);
  border-radius: var(--radius-pill);
  transition: background-color var(--dur-base) var(--ease),
              color var(--dur-base) var(--ease),
              border-color var(--dur-base) var(--ease),
              transform var(--dur-base) var(--ease);
}
/* RTL: re-centre (translate sign is mirror-safe but be explicit for clarity). */
[dir="rtl"] .s-newsroom-extras__play { transform: translate(50%, -50%); }

.s-newsroom-extras__play svg {
  /* nudge the triangle to optical centre */
  margin-inline-start: 0.12em;
}
@supports (backdrop-filter: blur(1px)) {
  .s-newsroom-extras__play { backdrop-filter: blur(2px); }
}

/* Body beneath the frame: kicker, serif title, quiet brass cue. */
.s-newsroom-extras__video-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: clamp(var(--space-5), 2.4vw, var(--space-7));
}
.s-newsroom-extras__video-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);
  text-wrap: balance;
  max-inline-size: 32ch;
}
.s-newsroom-extras__video-cue {
  margin-block-start: var(--space-2);
  color: var(--accent);
}

/* Hover / focus: warm the hairline, lift a whisper shadow, grow the play
   button into a confident brass fill and extend the text-cue rule. */
.s-newsroom-extras__video:hover,
.s-newsroom-extras__video:focus-within {
  border-color: var(--line-brass);
  box-shadow: var(--shadow-luxe);
}
@media (prefers-reduced-motion: no-preference) {
  .s-newsroom-extras__video:hover .s-newsroom-extras__play,
  .s-newsroom-extras__video:focus-within .s-newsroom-extras__play {
    background-color: var(--accent);
    border-color: var(--accent);
    color: var(--on-accent);
    transform: translate(-50%, -50%) scale(1.06);
  }
  [dir="rtl"] .s-newsroom-extras__video:hover .s-newsroom-extras__play,
  [dir="rtl"] .s-newsroom-extras__video:focus-within .s-newsroom-extras__play {
    transform: translate(50%, -50%) scale(1.06);
  }
  .s-newsroom-extras__video:hover .s-newsroom-extras__video-cue::after,
  .s-newsroom-extras__video:focus-within .s-newsroom-extras__video-cue::after {
    inline-size: 2.2em;
  }
}
.s-newsroom-extras__video-link:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
}

/* ---- PODCASTS EMPTY STATE ------------------------------------------------ */
.s-newsroom-extras__podcasts {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
  padding: clamp(var(--space-6), 3vw, var(--space-9));
  background-color: var(--surface-2);
  border: 1px dashed var(--line-brass);   /* "awaiting content" cue, restrained */
  border-radius: var(--radius-xs);
}
.s-newsroom-extras__podcasts-mark {
  display: grid;
  place-items: center;
  inline-size: 4.5rem;
  block-size: 4.5rem;
  color: var(--accent);
  border: 1px solid var(--line-brass);
  border-radius: var(--radius-pill);
  background-color: var(--surface);
}
.s-newsroom-extras__podcasts-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);
  text-wrap: balance;
}
.s-newsroom-extras__podcasts-text {
  font-size: var(--fs-small);
  line-height: var(--lh-body);
  color: var(--text-muted);
  max-inline-size: 40ch;
}
.s-newsroom-extras__podcasts-status {
  margin-block-start: var(--space-2);
}

/* --------------------------------------------------------------------------
   (b) SOCIAL — full-bleed dark band.
   .full-bleed (base.css) already breaks it to 100vw; the inner .container
   restores the reading width and gutters.
   -------------------------------------------------------------------------- */
.s-newsroom-extras__social {
  background-color: var(--bg);   /* ink-brown via data-theme="dark" */
  overflow: hidden;              /* contain the full-bleed + any drift */
}
.s-newsroom-extras__social-head {
  margin-block-end: clamp(var(--space-6), 3vw, var(--space-8));
}
.s-newsroom-extras__social-rule {
  margin-block: 0 clamp(var(--space-6), 4vw, var(--space-9));
}

/* Channel cards: a calm 4-up row of large, tappable channel tiles. */
.s-newsroom-extras__channels {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(var(--space-4), 1.6vw, var(--space-6));
  margin: 0;
  padding: 0;
  list-style: none;
}
.s-newsroom-extras__channel-link {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "icon name"
    "icon handle"
    "go   go";
  align-items: center;
  gap: var(--space-1) var(--space-4);
  block-size: 100%;
  padding: clamp(var(--space-5), 2vw, var(--space-7));
  color: var(--text);
  text-decoration: none;
  background-color: var(--surface);          /* espresso on dark */
  border: 1px solid var(--line);
  border-radius: var(--radius-xs);
  transition: border-color var(--dur-base) var(--ease),
              background-color var(--dur-base) var(--ease),
              transform var(--dur-fast) var(--ease);
  will-change: transform;
}
.s-newsroom-extras__channel-icon {
  grid-area: icon;
  align-self: start;
  display: grid;
  place-items: center;
  inline-size: 3rem;
  block-size: 3rem;
  color: var(--accent);                       /* brass icon stroke */
  border: 1px solid var(--line-brass);
  border-radius: var(--radius-pill);
  transition: color var(--dur-base) var(--ease),
              border-color var(--dur-base) var(--ease),
              background-color var(--dur-base) var(--ease);
}
.s-newsroom-extras__channel-name {
  grid-area: name;
  align-self: end;
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: var(--fw-semi);
  line-height: 1.1;
  color: var(--text);
}
.s-newsroom-extras__channel-was {
  font-family: var(--font-body);
  font-size: var(--fs-caption);
  font-weight: var(--fw-regular);
  color: var(--text-faint);
  letter-spacing: var(--tracking-normal);
}
.s-newsroom-extras__channel-handle {
  grid-area: handle;
  align-self: start;
  font-size: var(--fs-small);
  color: var(--text-muted);
}
.s-newsroom-extras__channel-go {
  grid-area: go;
  margin-block-start: clamp(var(--space-5), 3vw, var(--space-7));
  color: var(--accent);
}

/* Hover / focus: brass hairline, slight lift, icon flushes to a brass chip. */
@media (prefers-reduced-motion: no-preference) {
  .s-newsroom-extras__channel-link:hover,
  .s-newsroom-extras__channel-link:focus-visible {
    transform: translateY(-4px);
  }
  .s-newsroom-extras__channel-link:hover .s-newsroom-extras__channel-go::after,
  .s-newsroom-extras__channel-link:focus-visible .s-newsroom-extras__channel-go::after {
    inline-size: 2.2em;
  }
}
.s-newsroom-extras__channel-link:hover,
.s-newsroom-extras__channel-link:focus-visible {
  border-color: var(--line-brass);
  background-color: var(--surface-2);
}
.s-newsroom-extras__channel-link:hover .s-newsroom-extras__channel-icon,
.s-newsroom-extras__channel-link:focus-visible .s-newsroom-extras__channel-icon {
  color: var(--on-accent);
  background-color: var(--accent);
  border-color: var(--accent);
}
.s-newsroom-extras__channel-link:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   FEED MOUNT — target layout for future embedded posts. Hidden until a
   feed is injected (the [hidden] attribute is removed by the integrator).
   Defining the grid here means injected tiles inherit the right rhythm.
   -------------------------------------------------------------------------- */
.s-newsroom-extras__feed {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(var(--space-4), 1.6vw, var(--space-6));
  margin-block-start: clamp(var(--space-7), 4vw, var(--space-10));
}
.s-newsroom-extras__feed[hidden] { display: none; }

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

@media (max-width: 600px) {
  .s-newsroom-extras__channels,
  .s-newsroom-extras__feed {
    grid-template-columns: 1fr;
  }
  .s-newsroom-extras__channel-go {
    margin-block-start: var(--space-5);
  }
}

/* ============================================================================
   SOCIAL MEDIA — Porsche-style masonry feed (rebuilt).
   Dark rounded panel; mixed-height post cards in CSS columns. Ready for real
   reels / posts / YouTube: each .sm-post[data-platform] is one wired slot.
   ============================================================================ */
.s-newsroom-social { background: var(--bg); }

.s-newsroom-social__panel {
  background: #0E0E0E;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 22px;
  padding: clamp(var(--space-6), 4vw, var(--space-10));
}
.s-newsroom-social__head { margin-block-end: clamp(var(--space-6), 3vw, var(--space-9)); }
.s-newsroom-social__title {
  font-family: var(--font-display);
  font-size: var(--fs-display-3);
  font-weight: var(--fw-semi);
  color: var(--text-on-dark);
  letter-spacing: var(--tracking-display);
}
.s-newsroom-social__lead {
  margin-block-start: var(--space-3);
  color: var(--text-on-dark-soft);
  font-size: var(--fs-body);
}

/* Masonry via columns. */
.s-newsroom-social__grid {
  column-count: 4;
  column-gap: clamp(var(--space-4), 1.6vw, var(--space-6));
}
@media (max-width: 1100px) { .s-newsroom-social__grid { column-count: 3; } }
@media (max-width: 760px)  { .s-newsroom-social__grid { column-count: 2; } }
@media (max-width: 440px)  { .s-newsroom-social__grid { column-count: 1; } }

.sm-post {
  break-inside: avoid;
  margin-block-end: clamp(var(--space-4), 1.6vw, var(--space-6));
  background: #161616;
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 12px;
  overflow: hidden;
  transition: transform var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease);
}
.sm-post:hover { transform: translateY(-3px); border-color: rgba(255,255,255,0.18); }

.sm-post__media { position: relative; display: block; }
.sm-post__media img { display: block; inline-size: 100%; block-size: auto; }
.sm-post__play {
  position: absolute; inset-block-start: 50%; inset-inline-start: 50%;
  transform: translate(-50%, -50%);
  inline-size: 54px; block-size: 54px; border-radius: 50%;
  background: rgba(0,0,0,0.55); display: grid; place-items: center;
  backdrop-filter: blur(2px);
}
[dir="rtl"] .sm-post__play { transform: translate(50%, -50%); }

.sm-post__body { padding: var(--space-4) var(--space-5) var(--space-3); }
.sm-post__text {
  color: var(--text-on-dark);
  font-size: var(--fs-small);
  line-height: 1.5;
  margin-block-end: var(--space-4);
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
.sm-post__foot { display: flex; align-items: center; gap: var(--space-3); }
.sm-post__avatar {
  inline-size: 30px; block-size: 30px; border-radius: 50%; flex: 0 0 auto;
  background: #2a2a2a; display: grid; place-items: center; overflow: hidden;
}
.sm-post__avatar img { inline-size: 20px; block-size: auto; }
.sm-post__meta { display: flex; flex-direction: column; line-height: 1.2; margin-inline-end: auto; }
.sm-post__name { color: var(--text-on-dark); font-size: var(--fs-caption); font-weight: var(--fw-semi); }
.sm-post__time { color: var(--text-on-dark-faint); font-size: var(--fs-micro); }
.sm-post__platform { color: var(--text-on-dark); display: inline-flex; flex: 0 0 auto; }
.sm-post__like {
  margin-block-start: var(--space-3);
  background: none; border: 0; padding: var(--space-1) 0 0;
  color: var(--text-on-dark-faint); cursor: pointer;
  transition: color var(--dur-fast) var(--ease);
}
.sm-post__like:hover { color: var(--text-on-dark); }