/* Stories — case-study & insights hub (interim shell).
   This page is the 301 target for the old site's /blog/* + resources URLs
   (see vercel.json on the seo branch) and the nav "Stories" destination.
   Bento card styles ported verbatim from company.css PRESS / NEWSROOM —
   cards are static <article>s until per-story pages exist. */

  /* NOTE: the section-seam hairline between stacked .section-light blocks is
     handled globally in base.css (.section-light + .section-light overlap).
     Do NOT set a cream `html, body` background here — the footer has no bg of
     its own, so a light body turns the footer light too. */

  /* =====================================================================
     PAGE HERO — light editorial index header
     ===================================================================== */
  .stories-hero {
    padding: calc(72px + 10vh) 0 0;
  }
  /* Inner carries the gutter so the content edge tracks the nav (.wrap pattern:
     center the --max frame, then pad). Putting the pad on the outer instead
     drifts ~72px left of the nav past the 1440 frame. */
  .stories-hero-inner { max-width: var(--max); margin: 0 auto; padding: 0 min(5vw, 72px); }
  .stories-hero .mono { color: var(--accent-ink); margin-bottom: 18px; display: inline-block; }
  .stories-hero h1 {
    font-size: clamp(48px, 7vw, 104px);
    line-height: .98;
    max-width: 14ch;
  }
  .stories-hero .stories-deck {
    margin-top: 28px;
    max-width: 56ch;
    color: var(--dim);
    font-size: 18px;
    line-height: 1.55;
  }
  /* Static cards: no destination yet — keep the bento presentation but
     drop link affordances until per-story pages exist. */
  /* Static placeholder cards (no destination yet) don't show a link cursor;
     linked <a> cards keep the normal pointer + hover affordances. */
  article.press-card { cursor: default; }

  /* =====================================================================
     CTA STRIP
     ===================================================================== */
  .stories-cta {
    padding: 0 0 14vh;
  }
  .stories-cta-inner {
    max-width: var(--max);
    margin: 0 auto;
    padding: 0 min(5vw, 72px);
    display: flex;
    align-items: center;
    gap: 28px;
  }
  .stories-cta-rule { flex: 1; height: 1px; background: var(--hair); }

  @media (max-width: 720px) {
    .stories-hero { padding-top: calc(72px + 6vh); }
  }

  /* =====================================================================
     PRESS / NEWSROOM — the component lives in css/press-card.css, shared
     with index.html. The data-driven index rules below extend it.
     ===================================================================== */

  /* =====================================================================
     DATA-DRIVEN INDEX — featured bento + archive grid (js/stories-list.js)
     ===================================================================== */

  /* Featured: newest 3. Large hero card (is-featured) spans both rows on the
     left; the next two stack in the right column. Overrides the homepage
     bento's 4-track layout since this variant only holds 3 cards. */
  .press-bento--featured {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    grid-template-rows: 1fr 1fr;
    min-height: 540px;
  }
  /* .is-featured already spans grid-column 1 / 2, grid-row 1 / span 2 (above);
     the two plain cards auto-flow into the right column, one per row. */

  /* Category filter chips. On .section-light, --accent is field green, so the
     active chip's field-green fill + #0F0F0F text matches the WCAG-AA contrast
     used by .btn-primary. 5px radius per the brand's no-pill rule. */
  .stories-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 36px;
  }
  .stories-filters:empty { display: none; }
  .stories-filters[hidden] { display: none; } /* beats the display:flex above */
  .stories-chip {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--text);
    background: transparent;
    border: 1px solid var(--hair);
    border-radius: 5px;
    padding: 8px 18px;
    cursor: pointer;
    transition: border-color .35s var(--ease-out), background .35s var(--ease-out), color .35s var(--ease-out);
  }
  .stories-chip:hover { border-color: var(--accent); }
  .stories-chip.is-active {
    background: var(--accent);
    border-color: var(--accent);
    color: #0F0F0F;
  }
  .stories-chip:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
  }

  /* Section dividers ("Recent blogs" / "All stories") — Oswald display at a
     section scale. Inherit the page gutter from .press-inner, so they align
     with the cards + nav. */
  .stories-section-title {
    font-size: clamp(28px, 3.4vw, 44px);
    line-height: 1.0;
    margin-bottom: 28px;
  }
  /* Breathing room under the featured (Alabama) block before "All stories". */
  #stories-featured { margin-bottom: clamp(72px, 10vh, 120px); }

  /* Archive: uniform responsive grid for everything past the featured 3. */
  .stories-grid {
    margin-top: 10px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 10px;
  }
  .stories-grid .press-card { min-height: 300px; }
  /* Archive cards stay title-only, matching the homepage bento — the base
     `.press-card .press-meta-row { display: none }` keeps the dateline hidden. */

  /* Load more */
  .stories-more {
    display: flex;
    justify-content: center;
    margin-top: 32px;
  }
  /* Exhausted state — greyed + non-interactive so it's clearly the end. */
  .stories-more button:disabled {
    opacity: .4;
    cursor: default;
    pointer-events: none;
  }
  .stories-empty {
    color: var(--dim);
    font-size: 16px;
    padding: 40px 0;
    text-align: center;
  }
  .stories-empty a { color: var(--accent); }

  /* Featured variant must re-collapse on small screens — this rule sits after
     the bento's own breakpoints in source order, so restate them here. */
  @media (max-width: 1100px) {
    .press-bento--featured {
      grid-template-columns: 1fr 1fr;
      grid-template-rows: none;
      grid-auto-rows: minmax(280px, auto);
      min-height: 0;
    }
  }
  @media (max-width: 600px) {
    .press-bento--featured { grid-template-columns: 1fr; }
    .stories-grid { grid-template-columns: 1fr; }
  }