/* =======================================================================
   PRESS / STORY CARDS — shared component
   =======================================================================
   The story bento and its cards, in one place. Previously this block was
   copy-pasted into index.css, stories.css and company.css, and the three
   copies had drifted: the badge contrast fix lived only in stories.css, the
   .press-head button and body-font fixes only in index.css, and company.css
   carried a full 247-line copy for markup that page has never had. Fixing
   the component meant finding every copy first, which is how the badge came
   to be legible on /stories and not on the homepage.

   Used by:
     index.html   — curated 5-card bento from partials/stories-cards.html
     stories.html — data-driven bento + archive grid from js/stories-list.js

   Load order matters. This file is a component layer and goes BETWEEN
   base.css (tokens, reset, primitives) and the page sheet, so a page can
   still override a rule here — index.css keeps its own `.press` divider
   border, stories.css its `.press-bento--featured` and archive-grid rules.

   Section theme is handled by the card, not by the page: `.press-card`
   resets --accent/--text/--dim back to the dark-mode values because the
   cover photo's gradient overlay is dark on every page, whether or not the
   surrounding section is .section-light.
   ===================================================================== */
.press {
  padding: 14vh 0;
}
.press-inner { max-width: var(--max); margin: 0 auto; padding: 0 min(5vw, 72px); }
.press-head {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 40px;
  margin-bottom: 48px;
}
/* --accent-ink, not --accent: at 11px this needs 4.5:1, and --accent on a
   .section-light is #75932C = 3.02:1 against the cream. --accent-ink is the
   same electric green on dark sections, so nothing moves where it passed. */
.press-head .mono { color: var(--accent-ink); margin-bottom: 18px; display: inline-block; }
.press-head h2 {
  font-size: clamp(40px, 5.4vw, 80px);
  max-width: 24ch;
}
.press-head p {
  margin-top: 22px;
  color: var(--dim);
  /* Barlow Condensed, not `Source Serif 4` — the serif isn't in the font
     link on either host page, so it silently fell back to Georgia. */
  font-family: var(--body);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.55;
  max-width: 64ch;
}
/* justify-self hugs the content and left-aligns it — without it the button
   stretches full-width when .press-head collapses to 1fr at <=900px. */
.press-head .btn { align-self: end; justify-self: start; }
/* Bento layout — featured card spans the left + 4 staggered tiles on the
   right. Right-side column tracks are 2fr · 1fr · 2fr so each row's
   internal seam falls at a different position: top row splits 2:3
   (small | large), bottom row splits 3:2 (large | small). */
.press-bento {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 2fr) minmax(0, 1fr) minmax(0, 2fr);
  grid-template-rows: 1fr 1fr;
  gap: 10px;
  min-height: 620px;
}
.press-card {
  /* Reset to dark-mode tokens inside each card so text reads on the
     dark gradient overlay regardless of the section theme. */
  --accent: #B6F500;
  --accent-dim: #8bc000;
  --text: #f4f5f6;
  --dim: rgba(255,255,255,.72);
  --dim-2: rgba(255,255,255,.55);

  position: relative;
  display: block;
  overflow: hidden;
  text-decoration: none;
  color: var(--text);
  min-height: 240px;
  border-radius: 10px;
  /* Fallback gradient if the cover image fails to load */
  background: linear-gradient(135deg, #161a1c 0%, #0a0b0c 100%);
  isolation: isolate;
}
/* Top accent rail — slides in from left on hover */
.press-card::after {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .55s var(--ease-out);
  z-index: 4;
  pointer-events: none;
}
.press-card:hover::after { transform: scaleX(1); }
.press-card.is-featured {
  grid-column: 1 / 2;
  grid-row: 1 / span 2;
}
/* Top row: small left, large right */
.press-card.is-tile-tl { grid-column: 2 / 3; grid-row: 1 / 2; }
.press-card.is-tile-tr { grid-column: 3 / 5; grid-row: 1 / 2; }
/* Bottom row: opposite — large left, small right */
.press-card.is-tile-bl { grid-column: 2 / 4; grid-row: 2 / 3; }
.press-card.is-tile-br { grid-column: 4 / 5; grid-row: 2 / 3; }

/* Full-bleed cover image */
.press-cover {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  filter: saturate(.88) brightness(.86);
  transition: transform 1.1s var(--ease-out), filter .55s var(--ease-out);
}
.press-card:hover .press-cover {
  transform: scale(1.05);
  filter: saturate(1) brightness(.92);
}

/* Top-left "Latest" badge — glassmorphism on the image */
.press-thumb-tag {
  position: absolute;
  top: 18px; left: 22px;
  z-index: 3;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--accent);
  border: 1px solid rgba(182,245,0,.40);
  padding: 5px 10px;
  /* .70, not .45. Electric green at 10px needs 4.5:1, and at .45 the cover
     photo shows through enough to leave it at 3.37:1 — measured off the
     rendered pixels on the Alabama card, and uniform across every glyph,
     which is the tell that the box rather than the photo is the ground.
     Sized for the worst case rather than for today's images: over a white
     patch .45 gives 2.57:1, and the floor to clear 4.5:1 is .61. .70 gives
     6.46:1 over white, 11.57:1 over mid grey, 16.05:1 over black — so it
     still holds when a future story ships a brighter cover, which a value
     sized to .61 would not. */
  background: rgba(0,0,0,.70);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.press-card.is-featured .press-thumb-tag { top: 28px; left: 36px; }

/* Body — title-only strip at the very bottom of the card. Meta is
   hidden so the bottom block is just the title + a tight gradient
   hugging it. Matches the bento wireframe: title sits at the bottom
   edge, the dark band only covers the text zone. */
.press-body {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  padding: 14px 22px 20px;
  background: linear-gradient(to top,
    rgba(0,0,0,.85) 0%,
    rgba(0,0,0,.40) 80%,
    rgba(0,0,0,0) 100%
  );
}
.press-card.is-featured .press-body {
  padding: 22px 36px 30px;
  background: linear-gradient(to top,
    rgba(0,0,0,.85) 0%,
    rgba(0,0,0,.40) 82%,
    rgba(0,0,0,0) 100%
  );
}
/* Load-bearing: partials/stories-cards.html still ships a .press-meta-row
   with a date and an outlet in every card, and the bento design shows the
   title only. The rules that STYLED that row are gone — nothing renders it
   on either host page, so they were 24 lines dressing an invisible element.
   Delete the markup too if the dateline is never coming back. */
.press-card .press-meta-row { display: none; }
.press-card .press-title {
  font-family: 'Oswald', sans-serif;
  font-weight: 500;
  letter-spacing: -0.005em;
  line-height: 1.22;
  color: var(--text);
  font-size: clamp(15px, 1.15vw, 17px);
  max-width: 28ch;
  text-shadow: 0 1px 6px rgba(0,0,0,.4);
  transition: color .35s var(--ease-out);
}
.press-card:hover .press-title { color: var(--accent); }
.press-card.is-featured .press-title {
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.06;
  max-width: 22ch;
}
.press-card .press-title em {
  font-style: normal;
  font-weight: 600;
}

/* Slide-in arrow indicator on hover — appears at bottom-right of the
   gradient strip on every card. .press-body is already position:absolute
   (set above), which is what makes it a containing block for ::after. */
.press-body::after {
  content: "→";
  position: absolute;
  bottom: 18px; right: 22px;
  font-family: var(--mono);
  font-size: 18px;
  font-weight: 500;
  color: var(--accent);
  opacity: 0;
  transform: translateX(-10px);
  transition: opacity .35s var(--ease-out), transform .5s var(--ease-out);
  pointer-events: none;
  text-shadow: 0 1px 4px rgba(0,0,0,.5);
}
.press-card.is-featured .press-body::after {
  bottom: 30px; right: 36px;
  font-size: 24px;
}
.press-card:hover .press-body::after {
  opacity: 1;
  transform: translateX(0);
}

@media (max-width: 1100px) {
  .press-bento {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: none;
    grid-auto-rows: minmax(280px, auto);
    min-height: 0;
  }
  .press-card.is-featured { grid-column: 1 / -1; grid-row: auto; }
  .press-card.is-tile-tl,
  .press-card.is-tile-tr,
  .press-card.is-tile-bl,
  .press-card.is-tile-br { grid-column: auto; grid-row: auto; }
  .press-card.is-featured { min-height: 380px; }
}
@media (max-width: 900px) {
  .press-head { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .press-bento { grid-template-columns: 1fr; }
  .press-card.is-featured { min-height: 280px; }
}