/* ============================================================
   Press — "In the media" band (FEAT-013 follow-on)

   Loaded LAST on index.html and about.html, after featured.css.
   Promotes the single Philstar line out of .partner-wall__aside
   (partners.css) into its own titled section. Everything here is
   new; nothing in tokens.css / base.css / components.css /
   partners.css / featured.css is modified, so this file ports to
   the theme as one `assets/css/press.css` enqueue, additive only,
   scoped to the class list below.

   Contents
     1. Section band (.press) — local plate-width token
     2. List (.press-list)
     3. Item card (.press-item) — plate + body two-column grid
     4. Outlet plate (.press-item__outlet, .press-item__wordmark)
        No logo image exists or may be added for any of the three
        outlets — the wordmark is set type, styled as a sibling of
        partners.css's .logo-plate (same radius/background/inset
        feel) rather than sharing that class, since a text plate has
        no <img> to size.
     5. Body copy (__meta / __title / __note)
     6. Link handoff (__link) — seats the shared .read-more anchor
        (overrides.css §3) inside the card; does not restyle it
     7. Pending state (__pending) — not a link, must not read as one
     8. Responsive — bundle's 720px breakpoint (task calls for ~700px)
     9. Reduced motion
   ============================================================ */

/* ------------------------------------------------------------
   1 · Section band
   ------------------------------------------------------------ */
.press {
  /* Local to this file: the outlet plate's fixed track width, shared
     by the grid and the plate itself so the two never drift apart. */
  --press-plate-w: 168px;
}

/* ------------------------------------------------------------
   2 · List
   ------------------------------------------------------------ */
.press-list {
  display: grid;
  gap: var(--space-lg);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* ------------------------------------------------------------
   3 · Item card
   Same surface treatment as .partner-entry (partners.css §4):
   var(--surface) fill, var(--border) hairline, --radius-lg corners.
   ------------------------------------------------------------ */
.press-item {
  display: grid;
  grid-template-columns: var(--press-plate-w) minmax(0, 1fr);
  gap: var(--space-lg);
  align-items: start;
  padding: var(--space-xl);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}

/* ------------------------------------------------------------
   4 · Outlet plate — sibling of .logo-plate (partners.css §1),
   not a reuse of it: this plate holds set type, not an <img>, so it
   needs its own aspect control instead of --logo-h.
   ------------------------------------------------------------ */
.press-item__outlet {
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  min-height: 96px;
  padding: var(--space-md);
  background: #fff;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

/* Typographic wordmark — no logo asset exists or may be added for any
   of the three outlets. Fraunces (the bundle's display/heading
   family), tight caps, jade accent. clamp() ties the size to the
   viewport so it keeps shrinking with the plate itself and never
   outruns the 168px (or the narrower mobile) track. Three outlet
   names now share this class — "PhilStar" and "LinkedIn" are single
   words, "The Manila Times" is three — so text-wrap: balance is
   added to spread a multi-word name across its lines evenly instead
   of leaving an orphan word on its own line; hyphens: none keeps the
   browser from ever splitting a word with a hyphen (a masthead-style
   wordmark reads as whole words only). overflow-wrap: break-word
   remains as a last-resort safety net for a single word that still
   cannot fit the track at the clamp's smallest size, not the normal
   wrapping behaviour. */
.press-item__wordmark {
  display: block;
  max-width: 100%;
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(0.85rem, 0.6rem + 2vw, 1.3rem);
  line-height: 1.1;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  text-align: center;
  text-wrap: balance;
  hyphens: none;
  /* Ink, not jade, and deliberately so: the plate is #fff (it matches
     .logo-plate, which exists to host printed logos), and --jade-400 on
     white is ~1.9:1 — unreadable, and a fail at the mobile end of the
     clamp where the wordmark is small text. --ink-900 on white is ~18:1
     and reads like the masthead this stands in for. */
  color: var(--ink-900);
  overflow-wrap: break-word;
}

/* ------------------------------------------------------------
   5 · Body copy
   ------------------------------------------------------------ */
.press-item__body {
  display: grid;
  align-content: start;
  gap: var(--space-2xs);
}

.press-item__meta {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-500);
}

/* h3 already carries the serif family, step-2 size and 1.08 leading
   from base.css — this only tightens the spacing that base's
   0.5em heading margin leaves for a section title, which is too
   loose inside a compact card row. */
.press-item__title {
  margin: 0.15em 0 var(--space-xs);
}

.press-item__note {
  max-width: 62ch;
  color: var(--text-300);
}

/* ------------------------------------------------------------
   6 · Link handoff — two of the three items now carry a real
   outbound link instead of the pending line. The anchor already
   carries .read-more (overrides.css §3), which owns colour, the
   hairline underline, the 14px svg and the hover/focus nudge; none
   of that is duplicated here. .read-more also already declares its
   own margin-top: var(--space-sm) — combined with this grid's own
   gap (var(--space-2xs), §5) that already reads at or past
   .press-item__pending's own pre-rule rhythm (its margin-top: var
   (--space-xs) plus the same grid gap), so no extra top spacing is
   added here.
   The one thing genuinely missing: .press-item__body is `display:
   grid`, and grid's default `justify-items: stretch` stretches a
   child's margin box to the full column width even though .read-more
   itself is inline-flex — left unfixed, the hairline underline and
   hover/focus target would run the full card width instead of
   hugging the link text. justify-self: start confines the box to its
   own content, so it sits on one short line under the note.
   ------------------------------------------------------------ */
.press-item__link {
  justify-self: start;
}

/* ------------------------------------------------------------
   7 · Pending state — a caveat line, not a link. Same dashed-top-
   rule idiom as proposal-a.css's .pending-note / featured.css's
   .launch-detail__note (already established in this bundle), plus
   an amber dot borrowed from --amber-400 (tokens.css) so a pending
   citation reads as "waiting on something", not just muted text.
   ------------------------------------------------------------ */
.press-item__pending {
  display: flex;
  align-items: center;
  gap: 0.6em;
  margin-top: var(--space-xs);
  padding-top: var(--space-sm);
  border-top: 1px dashed var(--border-soft);
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--text-500);
}

.press-item__pending::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--amber-400);
  flex: none;
}

/* ------------------------------------------------------------
   8 · Responsive — stack below the bundle's 720px breakpoint
   (featured.css §8 uses the same 720/860/640 set; ~700px per spec
   rounds to the nearest one already in use rather than adding a
   new one). Plate moves above the body and shrinks, staying left-
   aligned — DOM order already puts __outlet before __body, so no
   reordering is needed, only the column collapse and a smaller
   fixed plate width.
   ------------------------------------------------------------ */
@media (max-width: 720px) {
  .press-item {
    grid-template-columns: 1fr;
    padding: var(--space-lg);
  }
  .press-item__outlet {
    width: 112px;
    aspect-ratio: 4 / 3;
    min-height: 0;
    justify-self: start;
  }
  .press-item__wordmark {
    font-size: clamp(0.8rem, 0.65rem + 1.4vw, 1rem);
  }
}

/* ------------------------------------------------------------
   9 · Reduced motion — nothing in this file declares a transition
   or transform of its own; [data-reveal] is entirely handled by
   base.css/JS. No override needed here.
   ------------------------------------------------------------ */