/* ==========================================================================
   Cardiff — Newsroom page
   Depends on assets/css/tokens-newsroom.css (Cardiff Design System tokens,
   same partials as tokens-careers.css) + the new chrome loaded by
   _includes/header.html for new_chrome pages (Tailwind + self-hosted Inter,
   via home-styles.html). Site nav/footer come from newnavbar.html /
   footer.html — this file only styles the page body.

   1. Base
   2. Type scale       .t-display .t-h1..t-h6 .eyebrow .lede .small .hl
   3. Section rhythm   .sec .r-compact .r-standard .r-feature .s-white .s-paper
   4. Hero             .hero .hero-grid .hero-sub .hero-meta
   5. Featured + cards .featured .card .card-img .card-foot .outlet .pill-*
   6. Filters + empty  .filters .filter .empty
   7. Pagination       .pager
   8. Resource cards   .res .icon-chip
   9. Press block      .press .press-mail .socials .soc
   ========================================================================== */

.newsroom *{box-sizing:border-box}

.newsroom{
  font-family:var(--font-sans);
  color:var(--ink);
  font-size:18px;
  line-height:28px;
}
.newsroom img{display:block;max-width:100%}
.newsroom a{color:inherit;text-decoration:none}

.newsroom .wrap{max-width:1400px;margin:0 auto;padding:0 24px}
@media(min-width:1024px){.newsroom .wrap{padding:0 48px}}

/* ---------- Section rhythm + surfaces ---------- */
.newsroom .sec{position:relative}
.newsroom .r-compact{padding:64px 0}
.newsroom .r-standard{padding:88px 0}
.newsroom .r-feature{padding:136px 0 88px}
@media(min-width:1024px){
  .newsroom .r-compact{padding:88px 0}
  .newsroom .r-standard{padding:96px 0}
  .newsroom .r-feature{padding:176px 0 96px}
}
.newsroom .s-white{background:var(--white)}
.newsroom .s-paper{background:var(--paper)}

/* ---------- Type scale ----------
   Cardiff DS v1.02 heading tiers. H1+/H2 are the "flat, then jumps at
   desktop" group — the DS's own decision table rules out clamp() for these
   (a straight line can't hold flat and then jump), so they step at the
   desktop breakpoint (1024px) instead. H3/H4 are the "even progression"
   group, so they use the DS's own clamp() formulas (anchored 375–1440px,
   with a rem floor so they also respond to the reader's font-size
   preference, not just viewport width). */
.newsroom .t-display,.newsroom .t-h1,.newsroom .t-h2,.newsroom .t-h3,.newsroom .t-h4,.newsroom .t-h5{text-wrap:balance}

/* H1++ · "Display ceiling" tier — used for the page's single <h1>. Bumped up
   from H1+ (56→64px) since this hero is the single biggest headline on the
   page and the DS reserves H1++ exactly for that, "no exceptions". */
.newsroom .t-display{font-size:4rem;line-height:1.0625;font-weight:var(--weight-heavy);letter-spacing:var(--tracking-display)}
@media(min-width:1024px){.newsroom .t-display{font-size:4.5rem;line-height:1.0556}}

/* H2 · "Internal section" tier — section headers, always paired with an eyebrow. */
.newsroom .t-h2{font-size:2.5rem;line-height:1.1;font-weight:var(--weight-heavy);letter-spacing:var(--tracking-h2)}
@media(min-width:1024px){.newsroom .t-h2{font-size:3rem;line-height:1.0833}}

/* H3 · "Internal transition" tier — the featured card, one step below a section header. */
.newsroom .t-h3{font-size:clamp(2rem,1.824rem + 0.75vw,2.5rem);line-height:1.1;font-weight:var(--weight-bold);letter-spacing:var(--tracking-tight)}

/* H4 · "Card title" tier — reserved for short, punchy card headlines
   (the DS's own media-card example: "You'll own something real, early."). */
.newsroom .t-h4{font-size:clamp(1.75rem,1.574rem + 0.75vw,2.25rem);line-height:1.1111;font-weight:var(--weight-bold);letter-spacing:var(--tracking-tight)}

/* H6 · "Panel subtitle" tier — used instead of H4 for the news-grid cards:
   real headlines run long, and H4 (up to 36px) overwhelms a 3-column card
   in that case. H6 (20→28px) is the documented tier that actually fits. */
.newsroom .t-h6{font-size:clamp(1.25rem,1.074rem + 0.75vw,1.75rem);line-height:1.15;font-weight:var(--weight-semibold);letter-spacing:var(--tracking-tight)}

.newsroom .t-h5{font-size:22px;line-height:26px;font-weight:var(--weight-bold);letter-spacing:-.015em}
.newsroom .hl{color:var(--c-600)}
.newsroom .hero .hl{color:var(--c-500)}

/* Xs tier — eyebrows and section labels. */
.newsroom .eyebrow{font-size:12px;line-height:16px;font-weight:var(--weight-bold);letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--mute)}

.newsroom .lede{font-size:18px;line-height:28px;color:var(--coffee);max-width:48ch}
@media(min-width:1024px){.newsroom .lede{font-size:19px}}

/* ============================================================
   HERO — dark, feature rhythm, full-bleed photo + scrim for legibility
   (same pattern as the homepage hero: img background + dark overlay).
   ============================================================ */
.newsroom .hero{position:relative;overflow:hidden;color:#fff;background:var(--ink-2)}
.newsroom .hero-bg{position:absolute;inset:0;z-index:0}
.newsroom .hero-bg img{width:100%;height:100%;object-fit:cover;object-position:22% 60%}
.newsroom .hero-scrim{position:absolute;inset:0;z-index:1;
  background:linear-gradient(100deg,rgba(10,10,10,.88) 0%,rgba(10,10,10,.80) 32%,rgba(10,10,10,.62) 60%,rgba(10,10,10,.80) 100%)}
.newsroom .hero .wrap{position:relative;z-index:2}
.newsroom .hero-grid{display:grid;gap:56px}
@media(min-width:1024px){.newsroom .hero-grid{grid-template-columns:1fr 1fr;gap:80px;align-items:end}}
.newsroom .hero h1{margin:18px 0 22px}
.newsroom .hero-sub{font-size:20px;line-height:30px;font-weight:var(--weight-medium);color:#fff;max-width:34ch}
@media(min-width:1024px){.newsroom .hero-sub{font-size:22px;line-height:32px}}
.newsroom .hero .eyebrow{color:rgba(255,255,255,.6)}

/* Featured card — a media card (has a standalone photo), so radius-xl per the
   design system's card--media/panel convention, not the plainer radius-lg. */
.newsroom .featured{background:var(--white);color:var(--ink);border-radius:var(--radius-xl);overflow:hidden;box-shadow:var(--shadow-float);display:block;transition:transform .18s cubic-bezier(.4,0,.2,1)}
.newsroom .featured:hover{transform:translateY(-4px)}
.newsroom .featured-img{aspect-ratio:16/10;width:100%;object-fit:cover;background:var(--paper)}
.newsroom .featured-body{padding:32px}
@media(min-width:1024px){.newsroom .featured-body{padding:36px}}
.newsroom .featured h2{font-size:clamp(2rem,1.824rem + 0.75vw,2.5rem);line-height:1.1;font-weight:var(--weight-bold);letter-spacing:var(--tracking-tight);margin:14px 0 16px}
.newsroom .featured:hover h2{color:var(--c-700)}
.newsroom .read-more{display:inline-flex;align-items:center;gap:8px;font-size:15px;font-weight:var(--weight-bold);color:var(--c-600);letter-spacing:-.01em}
.newsroom .read-more svg{transition:transform .18s cubic-bezier(.4,0,.2,1)}
.newsroom .featured:hover .read-more svg,.newsroom .card:hover .read-more svg{transform:translateX(4px)}

/* ---------- Pills ---------- */
.newsroom .pill-cat{display:inline-block;background:var(--c-50);color:var(--c-700);font-size:13px;font-weight:var(--weight-semibold);padding:5px 12px;border-radius:var(--radius-pill)}
.newsroom .pill-date{font-size:11px;font-weight:var(--weight-bold);letter-spacing:.16em;text-transform:uppercase;color:var(--mute);border:1px solid var(--rule);background:var(--paper);padding:5px 10px;border-radius:var(--radius-pill)}

/* ---------- Section head: 7 / 5 ---------- */
.newsroom .head-75{display:grid;gap:24px;margin-bottom:48px}
@media(min-width:1024px){.newsroom .head-75{grid-template-columns:7fr 5fr;gap:64px;align-items:end;margin-bottom:56px}}
.newsroom .head-75 .lede{align-self:end}

/* ---------- Card grid ---------- */
.newsroom .grid-3{display:grid;gap:24px}
@media(min-width:768px){.newsroom .grid-3{grid-template-columns:repeat(3,1fr);gap:28px}}
.newsroom .card{display:flex;flex-direction:column;height:100%;background:var(--white);border:1px solid var(--rule);border-radius:var(--radius-xl);overflow:hidden;transition:transform .18s cubic-bezier(.4,0,.2,1),box-shadow .18s cubic-bezier(.4,0,.2,1),border-color .18s cubic-bezier(.4,0,.2,1)}
.newsroom .card:hover{transform:translateY(-4px);box-shadow:var(--shadow-card);border-color:var(--c-100)}
/* .card already owns the "transform" property for its hover lift, at a
   snappier .18s — since .newsroom .card (2 classes) is more specific than
   .reveal (1 class, from home-styles.html), it would otherwise silently
   replace .reveal's opacity/transform transition (no fade, near-instant
   pop) instead of the two coexisting. Re-declaring the full list here on
   .newsroom .card.reveal (3 classes, higher specificity still) keeps the
   slow fade-up for scroll-reveal and the fast lift for hover. */
.newsroom .card.reveal{transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1),box-shadow .18s cubic-bezier(.4,0,.2,1),border-color .18s cubic-bezier(.4,0,.2,1)}
.newsroom .card-img{position:relative;aspect-ratio:16/10;background:var(--paper)}
.newsroom .card-img img{width:100%;height:100%;object-fit:cover;object-position:center 20%}
.newsroom .card-body{display:flex;flex-direction:column;flex:1;padding:28px 28px 26px;gap:14px}
@media(min-width:1024px){.newsroom .card-body{padding:32px}}
.newsroom .card h3{font-size:clamp(1.25rem,1.074rem + 0.75vw,1.75rem);line-height:1.15;font-weight:var(--weight-semibold);letter-spacing:var(--tracking-tight)}
.newsroom .card:hover h3{color:var(--c-700)}
.newsroom .card-foot{margin-top:auto;padding-top:6px;display:flex;align-items:center;justify-content:space-between;gap:12px}
/* Outlet badge — the signature device for press mentions */
.newsroom .outlet{position:absolute;left:16px;bottom:16px;background:rgba(255,255,255,.96);backdrop-filter:blur(6px);border-radius:var(--radius-md);padding:9px 14px;display:flex;align-items:center;box-shadow:0 6px 18px -8px rgba(10,10,10,.4)}
.newsroom .outlet img{height:20px;width:auto;object-fit:contain}

/* ---------- Filters ---------- */
.newsroom .filters{display:flex;gap:8px;overflow-x:auto;padding-bottom:6px;margin-bottom:32px;scrollbar-width:none}
.newsroom .filters::-webkit-scrollbar{display:none}
/* Matches the design system's .filter component exactly: transparent by
   default, ink (not brand blue) fill when active — filters are a neutral
   navigation device, not a call to action. */
.newsroom .filter{white-space:nowrap;background:transparent;border:1px solid var(--rule);color:var(--coffee);font-family:inherit;font-size:13px;font-weight:var(--weight-semibold);padding:8px 16px;border-radius:var(--radius-pill);cursor:pointer;transition:background .18s cubic-bezier(.4,0,.2,1),color .18s cubic-bezier(.4,0,.2,1),border-color .18s cubic-bezier(.4,0,.2,1)}
.newsroom .filter:hover{border-color:var(--c-100);color:var(--ink)}
.newsroom .filter[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.newsroom .media-grid .card[hidden]{display:none}
/* Empty state — same pattern as the design system's empty-demo: icon in a
   circular chalk chip, a direct title, one action out of the empty state. */
.newsroom .empty{display:none;text-align:center;padding:48px 24px;background:var(--white);border:1px dashed var(--rule);border-radius:var(--radius-lg)}
.newsroom .empty-icon{width:56px;height:56px;border-radius:var(--radius-full);background:var(--chalk);margin:0 auto 20px;display:flex;align-items:center;justify-content:center;color:var(--mute)}
.newsroom .empty p.t-h5{margin:0 0 6px}
.newsroom .empty-body{font-size:14px;color:var(--mute);max-width:40ch;margin:0 auto 20px}
.newsroom .btn-secondary{display:inline-flex;align-items:center;gap:8px;padding:12px 22px;border-radius:var(--radius-pill);font-size:15px;font-weight:var(--weight-bold);background:var(--white);color:var(--ink);border:1px solid var(--rule);font-family:var(--font-sans);cursor:pointer;transition:border-color .18s cubic-bezier(.4,0,.2,1)}
.newsroom .btn-secondary:hover{border-color:var(--c-100);color:var(--c-700)}

/* ---------- Pagination ---------- */
.newsroom .pager{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:56px}
.newsroom .pager a,.newsroom .pager span{min-width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius-pill);font-size:15px;font-weight:var(--weight-semibold);font-variant-numeric:tabular-nums;color:var(--coffee);border:1px solid var(--rule);background:var(--white);transition:background .18s cubic-bezier(.4,0,.2,1),color .18s cubic-bezier(.4,0,.2,1)}
.newsroom .pager a:hover{background:var(--c-50);color:var(--c-700)}
.newsroom .pager a[aria-current]{background:var(--c-600);border-color:var(--c-600);color:#fff}
.newsroom .pager .gap{border:0;background:none;color:var(--mute)}
.newsroom .pager .next{padding:0 22px;font-weight:var(--weight-bold)}

/* ---------- Resource cards ---------- */
/* Panel-style card (no photo of its own) — radius-xl and a resting
   shadow-card-sm, same elevation the design system gives its sidebar panel. */
.newsroom .res{display:flex;flex-direction:column;height:100%;gap:14px;background:var(--white);border:1px solid var(--rule);border-radius:var(--radius-xl);box-shadow:var(--shadow-card-sm);padding:32px;transition:transform .18s cubic-bezier(.4,0,.2,1),box-shadow .18s cubic-bezier(.4,0,.2,1),border-color .18s cubic-bezier(.4,0,.2,1)}
@media(min-width:1024px){.newsroom .res{padding:36px}}
.newsroom .res:hover{transform:translateY(-4px);box-shadow:var(--shadow-card);border-color:var(--c-100)}
.newsroom .icon-chip{width:52px;height:52px;border-radius:var(--radius-md);background:var(--c-50);color:var(--c-600);display:flex;align-items:center;justify-content:center;margin-bottom:6px}
.newsroom .res h3{font-size:clamp(1.25rem,1.074rem + 0.75vw,1.75rem);line-height:1.15;font-weight:var(--weight-semibold);letter-spacing:var(--tracking-tight)}
.newsroom .res p{font-size:16px;line-height:22px;color:var(--coffee)}
.newsroom .res .read-more{margin-top:auto;padding-top:10px}

/* ---------- Explore more — image left, heading + row list right ---------- */
.newsroom .explore{display:grid;gap:40px}
@media(min-width:1024px){.newsroom .explore{grid-template-columns:400px 1fr;gap:64px;align-items:center}}
.newsroom .explore-media{border-radius:var(--radius-2xl);overflow:hidden;background:var(--chalk);border:1px solid var(--rule)}
.newsroom .explore-media img{display:block;width:100%;height:100%;aspect-ratio:4/5;object-fit:cover}
@media(min-width:1024px){.newsroom .explore-media img{aspect-ratio:auto;min-height:100%}}
.newsroom .explore-body .lede{margin-top:14px;max-width:56ch}
.newsroom .explore-list{display:flex;flex-direction:column;gap:14px;margin-top:32px}
.newsroom .res-row{display:flex;align-items:center;gap:18px;padding:20px 22px;border:1px solid var(--rule);border-radius:var(--radius-lg);transition:transform .18s cubic-bezier(.4,0,.2,1),box-shadow .18s cubic-bezier(.4,0,.2,1),border-color .18s cubic-bezier(.4,0,.2,1)}
.newsroom .res-row:hover{transform:translateY(-2px);box-shadow:var(--shadow-card-sm);border-color:var(--c-100)}
.newsroom .res-row .icon-chip{margin-bottom:0;flex:0 0 auto}
.newsroom .res-row-text{flex:1 1 auto;min-width:0}
.newsroom .res-row h3{font-size:18px;line-height:24px;font-weight:var(--weight-bold);letter-spacing:var(--tracking-tight)}
.newsroom .res-row p{font-size:15px;line-height:21px;color:var(--coffee);margin-top:3px}
.newsroom .res-row .row-arrow{flex:0 0 auto;color:var(--mute);transition:transform .18s cubic-bezier(.4,0,.2,1),color .18s cubic-bezier(.4,0,.2,1)}
.newsroom .res-row:hover .row-arrow{transform:translateX(3px);color:var(--c-600)}

/* ---------- Press block (brand fill) ---------- */
.newsroom .press{background:var(--c-600);color:#fff;border-radius:var(--radius-xl);padding:40px;display:grid;gap:36px;position:relative;overflow:hidden}
@media(min-width:1024px){.newsroom .press{padding:56px;grid-template-columns:7fr 5fr;gap:64px;align-items:center}}
.newsroom .press::after{content:"";position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(rgba(255,255,255,.16) 1px,transparent 1px);background-size:22px 22px;opacity:.6}
.newsroom .press>*{position:relative;z-index:1}
.newsroom .press .eyebrow{color:rgba(255,255,255,.7)}
.newsroom .press h2{font-size:2.5rem;line-height:1.1;font-weight:var(--weight-heavy);letter-spacing:var(--tracking-h2);margin:14px 0 16px}
@media(min-width:1024px){.newsroom .press h2{font-size:3rem;line-height:1.0833}}
.newsroom .press p{color:rgba(255,255,255,.88);font-size:18px;max-width:44ch}
.newsroom .press-mail{display:inline-flex;align-items:center;gap:10px;margin-top:22px;background:#fff;color:var(--c-700);font-size:17px;font-weight:var(--weight-bold);padding:15px 26px;border-radius:var(--radius-pill);transition:transform .18s cubic-bezier(.4,0,.2,1)}
.newsroom .press-mail:hover{transform:translateY(-2px)}
.newsroom .socials{display:flex;gap:12px;margin-top:18px}
.newsroom .soc{width:44px;height:44px;border-radius:var(--radius-pill);display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.14);color:#fff;transition:transform .18s cubic-bezier(.4,0,.2,1),background .18s cubic-bezier(.4,0,.2,1)}
.newsroom .soc:hover{transform:scale(1.08);background:rgba(255,255,255,.26)}
.newsroom .press-label{font-size:12px;font-weight:var(--weight-bold);letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:rgba(255,255,255,.7)}