/* ═══════════════════════════════════════════════════════════════
   PRESS & MEDIA PAGE — styles scoped to press-media.html only.
   Built 2026-10-03. Reuses the site's existing design tokens (css/tokens.css)
   and shared components (.wrap, .eyebrow, .btn, .glow-region, .reveal) so the
   page stays visually part of the same site — only the components below
   (breadcrumb, compact hero, filterable timeline, contact cards) are new,
   built specifically for this page rather than cloned from any reference site.
   ═══════════════════════════════════════════════════════════════ */




/* --pr-muted: a page-local darkening of --ink-secondary (#7A7593, measures 4.38:1 on white —
   just under the 4.5:1 WCAG AA floor for normal text) to #6A6584, which measures 5.1–5.5:1 on
   every background this page uses it against (white, --bg-primary, --bg-secondary). Used in place
   of --ink-secondary/--ink-tertiary for every actual text run introduced on this page; icons keep
   --secondary/--ink-tertiary since the 3:1 non-text/UI-component floor already covers them. */
:root{ --pr-muted:#6A6584; }




/* ---------- breadcrumb (sits inside the hero, above the eyebrow) ---------- */
.pr-crumb{
  display:flex; align-items:center; gap:.5rem; flex-wrap:wrap;
  font-size:.8125rem; font-weight:600; color:rgba(255,255,255,.68);
  margin-bottom:1.25rem; letter-spacing:.01em;
}
.pr-crumb a{ color:rgba(255,255,255,.86); transition:color .2s; }
.pr-crumb a:hover{ color:#fff; text-decoration:underline; }
.pr-crumb svg{ width:12px; height:12px; flex-shrink:0; opacity:.6; }
.pr-crumb span[aria-current]{ color:#fff; }




/* ---------- compact hero (page banner, not the homepage hero) ---------- */
.pr-hero.hero{ min-height:unset; padding-block:clamp(3.25rem,7vw,4.5rem); }
.pr-hero .hero__img{ object-position:50% 38%; }

.pr-hero__stats{
  display:flex; flex-wrap:wrap; gap:clamp(1.5rem,4vw,3rem); margin-top:2.5rem;
  padding-top:2rem; border-top:1px solid rgba(255,255,255,.16);
}
.pr-hero__stat b{
  display:block; font-family:var(--display); font-size:clamp(1.5rem,2.4vw,2rem);
  font-weight:800; color:#fff; line-height:1.1;
}
.pr-hero__stat span{ display:block; margin-top:.35rem; font-size:.875rem; color:rgba(255,255,255,.72); }




/* ---------- shared page-section head (reuses .sec-head pattern but left-aligned
   rather than centred, so it reads distinctly from the homepage's sections) ---------- */
.pr-section-head{ max-width:640px; margin-bottom:clamp(2rem,4vw,2.75rem); }
.pr-section-head .eyebrow{ justify-content:flex-start; }
.pr-section-head h2{
  font-size:clamp(1.5rem,2.4vw,2.5rem); line-height:1.15; font-weight:800;
  letter-spacing:-.015em; color:var(--ink);
}
.pr-section-head p{ margin-top:1rem; font-size:1.0625rem; color:var(--pr-muted); line-height:1.65; }




/* ═══════════════ PRESS RELEASES — filter pills + timeline ═══════════════ */

/* Hidden radio inputs drive an all-CSS filter (no JS): each one is a sibling of
   .pr-board__inner, so `:checked ~ .pr-board__inner` can reach both the matching
   label (to mark it active) and the matching timeline items (to show them),
   anywhere inside that subtree via a descendant combinator chained after `~`. */
.pr-filter-input, .sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

.pr-board{ position:relative; }

.pr-filters{
  display:flex; flex-wrap:wrap; gap:.6rem; margin:0 0 clamp(1.75rem,3vw,2.25rem); padding:0; border:0; min-width:0;
}
.pr-filter-pill{
  display:inline-flex; align-items:center; gap:.4rem; cursor:pointer; user-select:none;
  min-height:44px; padding:.6rem 1.15rem; border-radius:var(--radius-pill); border:1.5px solid var(--border);
  font-size:.875rem; font-weight:700; color:var(--pr-muted); background:#fff;
  transition:background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease), box-shadow .2s;
}
.pr-filter-pill:hover{ border-color:var(--secondary); color:var(--secondary-hover); }
/* the radio itself is visually hidden (sr-only technique above, still real-DOM and
   Tab/arrow-key focusable), so the focus ring is drawn on its paired visible pill instead —
   each selector below targets only the one label that `for` actually points at. */
#pr-all:focus-visible ~ .pr-board__inner .pr-filters label[for="pr-all"],
#pr-award:focus-visible ~ .pr-board__inner .pr-filters label[for="pr-award"],
#pr-insight:focus-visible ~ .pr-board__inner .pr-filters label[for="pr-insight"],
#pr-event:focus-visible ~ .pr-board__inner .pr-filters label[for="pr-event"]{
  outline:2px solid var(--link); outline-offset:2px;
}
.pr-filter-pill .pr-filter-count{
  font-size:.75rem; font-weight:700; color:var(--pr-muted); background:var(--bg-primary);
  border-radius:999px; padding:.1rem .5rem;
}

#pr-all:checked ~ .pr-board__inner .pr-filters label[for="pr-all"],
#pr-award:checked ~ .pr-board__inner .pr-filters label[for="pr-award"],
#pr-insight:checked ~ .pr-board__inner .pr-filters label[for="pr-insight"],
#pr-event:checked ~ .pr-board__inner .pr-filters label[for="pr-event"]{
  background:var(--primary); border-color:var(--primary); color:#fff;
}
#pr-all:checked ~ .pr-board__inner .pr-filters label[for="pr-all"] .pr-filter-count,
#pr-award:checked ~ .pr-board__inner .pr-filters label[for="pr-award"] .pr-filter-count,
#pr-insight:checked ~ .pr-board__inner .pr-filters label[for="pr-insight"] .pr-filter-count,
#pr-event:checked ~ .pr-board__inner .pr-filters label[for="pr-event"] .pr-filter-count{
  background:rgba(255,255,255,.22); color:#fff;
}

/* default (All Updates): every item shows */
.pr-timeline .pr-item{ display:flex; }

/* a specific category selected: hide everything, then re-show the matching data-cat */
#pr-award:checked ~ .pr-board__inner .pr-timeline .pr-item,
#pr-insight:checked ~ .pr-board__inner .pr-timeline .pr-item,
#pr-event:checked ~ .pr-board__inner .pr-timeline .pr-item{ display:none; }
#pr-award:checked ~ .pr-board__inner .pr-timeline .pr-item[data-cat="award"],
#pr-insight:checked ~ .pr-board__inner .pr-timeline .pr-item[data-cat="insight"],
#pr-event:checked ~ .pr-board__inner .pr-timeline .pr-item[data-cat="event"]{ display:flex; }


.pr-timeline{
  position:relative; display:flex; flex-direction:column; gap:1.25rem;
}
/* running vertical line behind the date rail — the "advanced / editorial newsroom"
   signature of this section, built in CSS only (one absolutely-positioned div, no image) */
.pr-timeline::before{
  content:''; position:absolute; top:.5rem; bottom:.5rem; left:27px; width:2px;
  background:linear-gradient(180deg, var(--secondary), var(--primary) 60%, var(--border));
  opacity:.35;
}

.pr-item{
  position:relative; display:flex; gap:1.5rem; align-items:flex-start;
  padding:1.5rem 1.75rem 1.5rem 0; border-radius:var(--radius-sm);
  transition:background .2s var(--ease);
}
.pr-item:hover{ background:var(--bg-primary); }

.pr-item__dot{
  position:relative; z-index:1; flex-shrink:0; width:56px; height:56px; margin-left:0;
  border-radius:50%; background:#fff; border:1.5px solid var(--border);
  display:flex; align-items:center; justify-content:center; overflow:hidden;
  box-shadow:0 4px 14px rgba(11,6,32,.06);
}
.pr-item__dot img{ width:100%; height:100%; object-fit:contain; padding:8px; }
.pr-item__dot svg{ width:22px; height:22px; color:var(--primary); }

.pr-item__body{ flex:1; min-width:0; }
.pr-item__meta{ display:flex; flex-wrap:wrap; align-items:center; gap:.65rem; margin-bottom:.5rem; }
.pr-item__tag{
  /* --primary (not --secondary) on --bg-accent: --secondary/--bg-accent measures only 3.22:1,
     under the 4.5:1 floor for this size text — --primary/--bg-accent measures 9.74:1. */
  font-size:.6875rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  color:var(--primary); background:var(--bg-accent); border-radius:999px; padding:.3rem .65rem;
}
.pr-item__date{ font-size:.8125rem; font-weight:600; color:var(--pr-muted); }

.pr-item h3{
  font-family:var(--display); font-size:1.1875rem; font-weight:700; line-height:1.35;
  color:var(--ink); margin-bottom:.4rem;
}
.pr-item p{ font-size:.9375rem; line-height:1.6; color:var(--pr-muted); }

.pr-item__link{
  /* --secondary-hover (not the site's usual --link/--secondary, 3.6:1 on white — under the
     4.5:1 floor) so this 14px link text reads at 5.1:1 by default, 7.2:1 on hover/press. */
  display:inline-flex; align-items:center; gap:.4rem; margin-top:.75rem;
  font-size:.875rem; font-weight:700; color:var(--secondary-hover); transition:color .2s;
}
.pr-item__link svg{ width:12px; height:12px; transition:translate .2s; }
.pr-item__link:hover{ color:var(--secondary-press); }
.pr-item__link:hover svg{ translate:3px 0; }




/* ═══════════════ PR & MEDIA CONTACTS ═══════════════ */

.pr-contacts-grid{
  display:grid; grid-template-columns:1.1fr .9fr; gap:1.75rem; align-items:stretch;
}

.pr-contact-card{
  background:#fff; border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:clamp(1.75rem,3vw,2.5rem); box-shadow:0 4px 18px rgba(11,6,32,.04);
  display:flex; flex-direction:column; transition:box-shadow .2s var(--ease), translate .2s var(--ease);
}
.pr-contact-card:hover{ box-shadow:0 20px 40px rgba(58,37,156,.12); translate:0 -3px; }

.pr-contact-card__icon{
  width:52px; height:52px; border-radius:14px; background:var(--bg-secondary);
  display:flex; align-items:center; justify-content:center; color:var(--primary); margin-bottom:1.25rem;
}
.pr-contact-card__icon svg{ width:24px; height:24px; }

.pr-contact-card h3{ font-family:var(--display); font-size:1.375rem; font-weight:800; color:var(--ink); margin-bottom:.6rem; }
.pr-contact-card > p{ font-size:.9375rem; line-height:1.65; color:var(--pr-muted); margin-bottom:1.5rem; }

.pr-contact-list{ display:flex; flex-direction:column; gap:.9rem; margin-bottom:1.5rem; }
.pr-contact-list a, .pr-contact-list .pr-contact-static{
  display:flex; align-items:flex-start; gap:.85rem; font-size:.9375rem; font-weight:600;
  color:var(--ink); line-height:1.45; transition:color .2s;
}
.pr-contact-list a:hover{ color:var(--secondary-hover); }
.pr-contact-list svg{ width:19px; height:19px; flex-shrink:0; margin-top:.1rem; color:var(--secondary); }

.pr-help-list{ display:flex; flex-direction:column; gap:.65rem; margin-top:auto; padding-top:1.25rem; border-top:1px solid var(--border); }
.pr-help-list li{ display:flex; align-items:flex-start; gap:.6rem; font-size:.875rem; color:var(--pr-muted); line-height:1.5; }
.pr-help-list svg{ width:16px; height:16px; flex-shrink:0; margin-top:.15rem; color:var(--primary); }

.pr-contact-card__cta{ display:flex; flex-wrap:wrap; gap:.75rem; margin-top:1.5rem; }

.pr-brand-row{
  display:flex; align-items:center; gap:1rem; padding:1rem; border-radius:var(--radius-sm);
  background:var(--bg-secondary); margin-bottom:1.25rem;
}
.pr-brand-row img{ width:84px; height:auto; border-radius:8px; background:#fff; padding:.4rem; flex-shrink:0; }
.pr-brand-row div{ flex:1; min-width:0; }
.pr-brand-row b{ display:block; font-size:.9375rem; color:var(--ink); margin-bottom:.2rem; }
.pr-brand-row span{ display:block; font-size:.8125rem; color:var(--pr-muted); line-height:1.4; }

.pr-social-row{ display:flex; gap:.6rem; margin-top:auto; padding-top:1.25rem; border-top:1px solid var(--border); }
.pr-social-row a{
  width:44px; height:44px; border-radius:50%; border:1.5px solid var(--border);
  display:flex; align-items:center; justify-content:center; color:var(--ink-secondary);
  transition:border-color .2s, color .2s, background .2s;
}
.pr-social-row a:hover{ border-color:var(--secondary); color:var(--secondary); background:var(--bg-accent); }
.pr-social-row svg{ width:17px; height:17px; }




/* ---------- responsive ---------- */
@media (max-width:900px){
  .pr-contacts-grid{ grid-template-columns:1fr; }
  .pr-timeline::before{ left:23px; }
  .pr-item__dot{ width:46px; height:46px; }
}

@media (max-width:640px){
  .pr-item{ gap:1rem; padding:1.1rem 1rem 1.1rem 0; }
  .pr-item__dot{ width:40px; height:40px; }
  .pr-item__dot svg{ width:18px; height:18px; }
  .pr-item h3{ font-size:1.0625rem; }
  .pr-hero__stats{ gap:1.5rem; }
  .pr-filters{ flex-wrap:nowrap; overflow-x:auto; padding-bottom:.25rem; -webkit-overflow-scrolling:touch; }
  .pr-filter-pill{ flex-shrink:0; }
}

@media (prefers-reduced-motion: reduce){
  .pr-contact-card, .pr-item, .pr-filter-pill{ transition:none; }
}