/* ==========================================================================
   SIGMA SCANNER — press-media.css
   Newsroom · press coverage, releases and video interviews.

   ---------------------------------------------------------------------------
   BUILT ON THE FOUNDATION, NOT BESIDE IT
   ---------------------------------------------------------------------------
   No tokens, reset, base type, buttons, header or footer are declared here.
   All of that comes from the files linked ahead of this one in
   press-media.html:

     css/style.css       @font-face Satoshi · --ink-… · --signal-… · --sp-… ·
                         --r-… · --shadow-… · .ss-container · .ss-btn ·
                         .ss-eyebrow · .ss-section · .ss-sr-only
     css/responsive.css  --gutter and --nav-h steps per breakpoint
     css/animations.css  --dur-… · --ease-… · reveal states
     css/nav.css         .ss-nav
     css/footer.css      .ss-footer

   Nothing below introduces a colour, radius, shadow, font size or spacing
   value that is not already in the system.

   ---------------------------------------------------------------------------
   LAYER DISCIPLINE
   ---------------------------------------------------------------------------
   Base rules and every responsive override live together in @layer
   components. An override stranded in @layer layout loses to a
   components-layer base rule regardless of specificity or matching media
   query — that has broken three sections in this project already.

   ---------------------------------------------------------------------------
   FILTERING CONTRACT
   ---------------------------------------------------------------------------
   js/press-media.js filters by setting the `hidden` property on .pm-item and
   on [data-pm-section]. style.css's reset carries
   `[hidden] { display: none !important; }`, which is what makes that work —
   so nothing here may set `display` on those selectors.
   ========================================================================== */

@layer components {

  /* ========================================================================
     PAGE BANNER
     The nav is position:fixed (see nav.css), so it occupies no normal-flow
     space and this section owns the clearance for it.
     ======================================================================== */
  .pm-hero {
    position: relative;
    isolation: isolate;
    overflow: clip;
    padding-block: calc(var(--nav-h) + var(--sp-8)) var(--sp-9);
  }

  /* The same two-radial signal wash the FAQ and §10 sections use, so the top
     of this page reads as Sigma Scanner before a single word is processed. */
  .pm-hero__bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
      radial-gradient(50% 45% at 6% 10%,  rgb(16 160 80 / .07) 0%, rgb(16 160 80 / 0) 70%),
      radial-gradient(55% 50% at 98% 92%, rgb(34 197 94 / .06) 0%, rgb(34 197 94 / 0) 70%);
  }

  .pm-hero__crumbs {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    margin-block-end: var(--sp-6);
    font-size: var(--fs-xs);
    color: var(--ink-400);
  }
  .pm-hero__crumbs a { color: var(--ink-500); transition: color var(--dur-fast) var(--ease-out-quad); }
  .pm-hero__crumbs a:hover { color: var(--signal-700); }
  .pm-hero__crumbs span { color: var(--ink-700); font-weight: var(--fw-medium); }
  .pm-hero__crumbs .ss-icon { inline-size: 12px; block-size: 12px; color: var(--ink-300); }

  .pm-hero__title { margin-block-start: var(--sp-3); max-inline-size: 18ch; font-size: 45px }

  .pm-hero__lead {
    margin-block-start: var(--sp-4);
    max-inline-size: var(--measure);
    line-height: var(--lh-lead);
    color: var(--ink-500);
  }

  .pm-hero__stats {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-6) var(--sp-9);
    margin-block-start: var(--sp-8);
    padding-block-start: var(--sp-6);
    border-block-start: 1px solid var(--ink-200);
  }
  .pm-hero__stat .ss-metric__value { color: var(--signal-700); }

  /* ========================================================================
     FEATURED STORY
     Deliberately NOT a photo slot. There is no article artwork to host, and
     a grey "image placeholder" box is the fastest way to make a real page
     look unfinished — so the publication's own mark sits on a tinted panel
     instead. It reads as intentional, and it needs no asset pipeline.
     ======================================================================== */
  .pm-featured {
    display: grid;
    gap: 0;
    border: 1px solid var(--ink-200);
    border-radius: var(--r-2xl);
    background: var(--paper);
    overflow: hidden;
    transition:
      border-color var(--dur-fast) var(--ease-out-quad),
      box-shadow var(--dur-base) var(--ease-out-cubic);
  }
  @media (hover: hover) and (pointer: fine) {
    .pm-featured:hover { border-color: var(--signal-200); box-shadow: var(--shadow-lg); }
  }

 .pm-featured__media {
  width: 100%;
  height: 100%;
  min-height: 520px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  box-sizing: border-box;
  overflow: hidden;
}

.pm-featured__media img {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 440px;
  object-fit: contain;
  display: block;
}
  .pm-featured__body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-3);
    padding: var(--sp-7);
  }

  .pm-featured__title {
    font-size: var(--fs-h3);
    line-height: var(--lh-h3);
    letter-spacing: var(--ls-h3);
    color: var(--ink-900);
  }
  .pm-featured__desc { font-size: var(--fs-sm); line-height: 1.7; color: var(--ink-500); }
  .pm-featured__cta { margin-block-start: var(--sp-2); }

  /* ========================================================================
     TOOLBAR — category filters
     Pinned under the compressed nav. --nav-h-scrolled, not --nav-h: by the
     time anything has scrolled far enough for this to stick, js/nav.js has
     already put the header into its scrolled state.
     ======================================================================== */
  .pm-toolbar {
    position: sticky;
    inset-block-start: var(--nav-h-scrolled);
    z-index: var(--z-sticky);
    margin-block-start: var(--sp-9);
    padding-block: var(--sp-3);
    background: var(--glass-bg);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    border-block: 1px solid var(--ink-200);
  }
  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .pm-toolbar { background: rgb(255 255 255 / .98); }
  }

  .pm-toolbar__inner { display: flex; align-items: center; gap: var(--sp-4); }

  /* Same horizontal-rail behaviour as .ss-rail: the row scrolls inside its
     own container so the page body never scrolls sideways at any width. */
  .pm-filters {
    display: flex;
    gap: var(--sp-2);
    overflow-x: auto;
    padding-block-end: var(--sp-1);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .pm-filters::-webkit-scrollbar { display: none; }

  .pm-filter {
    flex: none;
    block-size: 36px;
    padding-inline: var(--sp-4);
    border-radius: var(--r-full);
    border: 1px solid var(--ink-200);
    background: var(--paper);
    color: var(--ink-600);
    font-size: var(--fs-xs);
    font-weight: var(--fw-medium);
    white-space: nowrap;
    transition:
      border-color var(--dur-fast) var(--ease-out-quad),
      background-color var(--dur-fast) var(--ease-out-quad),
      color var(--dur-fast) var(--ease-out-quad);
  }
  .pm-filter:hover { border-color: var(--ink-300); color: var(--ink-900); }

  /* --signal-600, never --signal-500: white on 500 is 3.1:1. */
  .pm-filter.is-active {
    background: var(--signal-600);
    border-color: var(--signal-600);
    color: var(--paper);
    box-shadow: var(--shadow-sm);
  }
  .pm-filter.is-active:hover { background: var(--signal-700); border-color: var(--signal-700); }

  .pm-count {
    margin-inline-start: auto;
    flex: none;
    font-size: var(--fs-xs);
    color: var(--ink-400);
    font-variant-numeric: tabular-nums;
  }

  /* ========================================================================
     SECTION HEADS
     ======================================================================== */
  .pm-sec__head { margin-block-end: var(--sp-7); }
  .pm-sec__title {
    font-size: var(--fs-h3);
    line-height: var(--lh-h3);
    letter-spacing: var(--ls-h3);
  }
  .pm-sec__note {
    margin-block-start: var(--sp-2);
    max-inline-size: var(--measure);
    font-size: var(--fs-sm);
    color: var(--ink-500);
  }

  /* ========================================================================
     COVERAGE GRID
     ======================================================================== */
  .pm-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
    gap: var(--gap);
  }

  .pm-card {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--ink-200);
    border-radius: var(--r-lg);
    background: var(--paper);
    overflow: hidden;
    transition:
      border-color var(--dur-fast) var(--ease-out-quad),
      box-shadow var(--dur-base) var(--ease-out-cubic),
      transform var(--dur-base) var(--ease-out-cubic);
  }
  @media (hover: hover) and (pointer: fine) {
    .pm-card:hover { border-color: var(--signal-200); box-shadow: var(--shadow-md); transform: translateY(-3px); }
  }

  .pm-card__head {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-4) var(--sp-5);
    background: var(--ink-050);
    border-block-end: 1px solid var(--ink-150);
  }
  .pm-card__logo { max-block-size: 24px; max-inline-size: 130px; object-fit: contain; }
  .pm-card__ext {
    margin-inline-start: auto;
    inline-size: var(--icon-sm);
    block-size: var(--icon-sm);
    color: var(--ink-300);
    transition: color var(--dur-fast) var(--ease-out-quad);
  }
  .pm-card:hover .pm-card__ext { color: var(--signal-600); }

  .pm-card__body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-2);
    padding: var(--sp-5);
    flex: 1;
  }

  .pm-card__tags { display: flex; flex-wrap: wrap; gap: var(--sp-2); }

  .pm-card__meta {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: var(--fs-xs);
    color: var(--ink-400);
  }
  .pm-card__pub { font-weight: var(--fw-medium); color: var(--ink-600); }

  .pm-card__title {
    font-family: var(--font-display);
    font-size: var(--fs-body);
    line-height: 1.4;
    letter-spacing: normal;
    font-weight: var(--fw-semibold);
    color: var(--ink-900);
  }
  .pm-card__desc { font-size: var(--fs-sm); line-height: 1.65; color: var(--ink-500); }

  /* ---------- PILL ---------------------------------------------------- */
  .pm-pill {
    display: inline-flex;
    padding: 3px var(--sp-3);
    border-radius: var(--r-full);
    background: var(--signal-050);
    border: 1px solid var(--signal-200);
    color: var(--signal-700);
    font-size: var(--fs-eyebrow);
    font-weight: var(--fw-semibold);
    white-space: nowrap;
  }
  .pm-pill--solid { background: var(--signal-600); border-color: var(--signal-600); color: var(--paper); }

  /* ---------- INLINE LINK --------------------------------------------- */
  .pm-link {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    margin-block-start: auto;
    padding-block-start: var(--sp-2);
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    color: var(--signal-700);
    transition: color var(--dur-fast) var(--ease-out-quad);
  }
  .pm-link .ss-icon {
    inline-size: var(--icon-sm);
    block-size: var(--icon-sm);
    transition: transform var(--dur-fast) var(--ease-out-quad);
  }
  .pm-link:hover { color: var(--ink-900); }
  @media (hover: hover) and (pointer: fine) {
    .pm-card:hover .pm-link .ss-icon,
    .pm-video:hover .pm-link .ss-icon,
    .pm-link:hover .ss-icon { transform: translateX(3px); }
  }

  /* ========================================================================
     PRESS RELEASES — a timeline list, not cards. Cards for everything is the
     fastest way to flatten a page's hierarchy; releases are chronological
     records, so they read better as a dated list.
     ======================================================================== */
  .pm-rel-list { display: flex; flex-direction: column; }

  .pm-rel {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-2);
    padding-block: var(--sp-6);
    border-block-start: 1px solid var(--ink-150);
    transition: background-color var(--dur-fast) var(--ease-out-quad);
  }
  .pm-rel:last-child { border-block-end: 1px solid var(--ink-150); }
  .pm-rel:hover { background: var(--ink-050); }

  .pm-rel__date {
    font-size: var(--fs-xs);
    font-weight: var(--fw-medium);
    color: var(--ink-400);
    font-variant-numeric: tabular-nums;
  }
  .pm-rel__title {
    font-size: var(--fs-h4);
    line-height: var(--lh-h4);
    letter-spacing: var(--ls-h4);
    color: var(--ink-900);
  }
  .pm-rel__summary {
    margin-block-start: var(--sp-2);
    max-inline-size: 68ch;
    font-size: var(--fs-sm);
    line-height: 1.7;
    color: var(--ink-500);
  }
  .pm-rel__cta { margin-block-start: 0; }

  /* ========================================================================
     VIDEO / PODCAST
     ======================================================================== */
  .pm-video {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--ink-200);
    border-radius: var(--r-lg);
    background: var(--paper);
    overflow: hidden;
    transition:
      border-color var(--dur-fast) var(--ease-out-quad),
      box-shadow var(--dur-base) var(--ease-out-cubic),
      transform var(--dur-base) var(--ease-out-cubic);
  }
  @media (hover: hover) and (pointer: fine) {
    .pm-video:hover { border-color: var(--signal-200); box-shadow: var(--shadow-md); transform: translateY(-3px); }
  }

  .pm-video__thumb {
    position: relative;
    display: block;
    aspect-ratio: 16 / 9;
    background: var(--ink-100);
    border-block-end: 1px solid var(--ink-150);
    overflow: hidden;
  }
  /* YouTube's hqdefault is 4:3 with letterbox bars baked in. object-fit:cover
     inside the 16:9 box above crops them off rather than showing black
     margins — the reason hqdefault is used at all is that it exists for every
     video, where maxresdefault 404s silently on many. */
  .pm-video__thumb img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    transition: transform var(--dur-slow) var(--ease-out-cubic);
  }
  @media (hover: hover) and (pointer: fine) {
    .pm-video:hover .pm-video__thumb img { transform: scale(1.04); }
  }

  .pm-video__play {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 50%;
    translate: -50% -50%;
    display: flex;
    align-items: center;
    justify-content: center;
    inline-size: 52px;
    block-size: 52px;
    border-radius: 50%;
    background: rgb(255 255 255 / .94);
    color: var(--signal-600);
    box-shadow: var(--shadow-md);
    transition: transform var(--dur-base) var(--ease-out-cubic), background-color var(--dur-fast) var(--ease-out-quad);
  }
  .pm-video__play .ss-icon { inline-size: 20px; block-size: 20px; fill: currentColor; stroke: none; }
  @media (hover: hover) and (pointer: fine) {
    .pm-video:hover .pm-video__play { transform: translate(0, 0) scale(1.1); background: var(--paper); }
  }

  .pm-video__format { position: absolute; inset-block-start: var(--sp-3); inset-inline-start: var(--sp-3); }
  .pm-video__dur {
    position: absolute;
    inset-block-end: var(--sp-3);
    inset-inline-end: var(--sp-3);
    padding: 2px var(--sp-2);
    border-radius: var(--r-xs);
    background: rgb(7 26 18 / .78);
    color: var(--paper);
    font-size: var(--fs-eyebrow);
    font-variant-numeric: tabular-nums;
  }

  .pm-video__body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-2);
    padding: var(--sp-5);
    flex: 1;
  }
  .pm-video__title {
    font-family: var(--font-display);
    font-size: var(--fs-body);
    line-height: 1.4;
    letter-spacing: normal;
    font-weight: var(--fw-semibold);
    color: var(--ink-900);
  }

  /* ========================================================================
     ENTRANCE — replayed by js/press-media.js on every filter change
     ======================================================================== */
  /* Deliberately NO fill-mode, and no `to` keyframe.

     The obvious way to write this is `... both` with an explicit
     `to { opacity: 1 }`. Don't. `fill: both` applies the FROM state before
     the animation starts and holds it if the animation never completes, so
     an item's resting appearance becomes opacity:0 — and anything that stops
     the animation running (a backgrounded tab at load, a paused compositor,
     an engine that ignores the rule) leaves the whole page blank. That was
     observed here: with `both`, every card computed to opacity 0 while the
     renderer was occluded.

     Without a fill-mode the element's resting state is its normal one —
     fully visible — and the keyframe merely plays INTO it. Identical motion,
     but the failure mode is "no animation" instead of "no content", which is
     the same contract every other section in this project holds. */
  .pm-item.is-in { animation: pm-in var(--dur-base) var(--ease-out-cubic); }
  @keyframes pm-in {
    from { opacity: 0; transform: translateY(8px); }
  }
  @media (prefers-reduced-motion: reduce) {
    .pm-item.is-in { animation: none; }
    .pm-video__thumb img, .pm-video__play, .pm-link .ss-icon { transition: none; }
  }

  /* ========================================================================
     EMPTY STATE
     ======================================================================== */
  .pm-empty {
    padding: var(--sp-11) var(--sp-6);
    border: 1px dashed var(--ink-200);
    border-radius: var(--r-xl);
    background: var(--ink-050);
    text-align: center;
  }
  .pm-empty strong {
    display: block;
    font-family: var(--font-display);
    font-size: var(--fs-h4);
    font-weight: var(--fw-semibold);
    color: var(--ink-900);
  }
  .pm-empty p { margin-block-start: var(--sp-2); margin-inline: auto; font-size: var(--fs-sm); color: var(--ink-500); }

  /* ========================================================================
     PRESS CONTACT CTA — one of only two dark surfaces on this page, the
     other being the footer. The symmetry is deliberate: it closes the
     composition the same way §7/§14 do on the homepage.
     ======================================================================== */
  .pm-cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-6);
    padding: var(--sp-9) var(--sp-8);
    border-radius: var(--r-2xl);
    background: var(--grad-deep);
  }
  .pm-cta__title { color: var(--deep-fg); font-size: var(--fs-h3); line-height: var(--lh-h3); letter-spacing: var(--ls-h3); }
  .pm-cta__lead {
    margin-block-start: var(--sp-3);
    max-inline-size: 52ch;
    font-size: var(--fs-sm);
    line-height: 1.7;
    color: var(--deep-fg-muted);
  }
  .pm-cta__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
  /* .ss-btn--ghost's ink-200 border and ink-800 text are invisible on a dark
     surface — restated here against the deep palette instead. */
  .pm-cta .ss-btn--ghost { color: var(--deep-fg); border-color: rgb(255 255 255 / .22); }
  .pm-cta .ss-btn--ghost:hover { background: rgb(255 255 255 / .08); border-color: rgb(255 255 255 / .38); }

  /* ========================================================================
     NO-JS FALLBACK — plain link list, replaced by the rendered page the
     moment press-media.js runs. Kept legible rather than hidden: a visitor
     without scripts still gets every headline and every link.
     ======================================================================== */
  .pm-fallback { display: flex; flex-direction: column; gap: var(--sp-4); }
  .pm-fallback h2 { font-size: var(--fs-h4); }
  .pm-fallback ul { padding-inline-start: var(--sp-5); }
  .pm-fallback li { margin-block-start: var(--sp-2); font-size: var(--fs-sm); }

  /* ========================================================================
     RESPONSIVE — all in @layer components, see the file header
     ======================================================================== */
  @media (min-width: 640px) {
    .pm-rel {
      grid-template-columns: 128px minmax(0, 1fr) auto;
      align-items: start;
      gap: var(--sp-6);
      padding-inline: var(--sp-4);
      margin-inline: calc(var(--sp-4) * -1);
      border-radius: var(--r-md);
    }
    .pm-rel__date { padding-block-start: 2px; }
    .pm-rel__cta { white-space: nowrap; padding-block-start: 2px; }
  }

  @media (min-width: 900px) {
    .pm-featured { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
    .pm-featured__media {
      border-block-end: none;
      border-inline-end: 1px solid var(--ink-150);
      min-block-size: 100%;
    }
    .pm-featured__body { padding: var(--sp-8); }
    .pm-featured__title { font-size: var(--fs-h3); line-height: var(--lh-h2); letter-spacing: var(--ls-h2); }
  }

  @media (min-width: 1024px) {
    .pm-hero { padding-block-end: var(--sp-10); }
    .pm-cta { padding: var(--sp-10) var(--sp-10); }
  }

  /* Two buttons side by side in a 375px-wide band is a design error, not a
     responsive strategy. */
  @media (max-width: 479px) {
    .pm-cta__actions { inline-size: 100%; }
    .pm-cta__actions .ss-btn { inline-size: 100%; }
    .pm-hero__title{ font-size: 42px;}
    .pm-featured__media{ width: 100%;
    height: 100%;
    min-height: 210px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px;
    box-sizing: border-box;
    overflow: hidden;}
  }

}