/* ==========================================================================
   Cardiff — Newsroom article template
   Depends on tokens-newsroom.css + newsroom.css (loaded by the parent
   _layouts/newsroom.html — this layout inherits from it, same pattern as
   _layouts/careers-role.html inheriting from careers.html). Reuses .eyebrow,
   .card, .grid-3, .read-more, .pill-cat, .pill-date, .press from
   newsroom.css for the "More from the Newsroom" grid, so this file only
   adds what's unique to an article: hero, prose, sidebar, share, progress.

   1. Reading progress bar
   2. Article hero (editorial minimal)
   3. Body grid (reading column + sidebar)
   4. Lead figure
   5. Prose
   6. Source callout + share
   7. Sidebar (offer CTA, press/questions boxes)
   8. Toast
   ========================================================================== */

.newsroom .progress{position:fixed;top:0;left:0;height:3px;width:0;background:var(--c-600);z-index:90;transition:width 90ms linear}

/* ---------- Article hero — editorial minimal: content is the star ---------- */
/* Lives inside .a-col now (not its own full-width section above the grid),
   so its top lines up exactly with the sidebar banner's top via the grid's
   align-items:flex-start — no hero/grid section to straddle, no margin math. */
.newsroom .a-section{padding-top:112px}
@media(min-width:1024px){.newsroom .a-section{padding-top:144px}}
.newsroom .crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:26px;font-size:15px}
@media(max-width:767px){.newsroom .crumbs{display:none}}
.newsroom .crumbs a{color:var(--mute);transition:color 160ms}
.newsroom .crumbs a:hover{color:var(--c-700)}
.newsroom .crumbs i{color:var(--mute);font-style:normal}
.newsroom .crumbs b{color:var(--ink);font-weight:700}
.newsroom .back{display:none;align-items:center;gap:8px;font-size:16px;font-weight:600;color:var(--coffee);margin-bottom:16px}
.newsroom .back:hover{color:var(--c-700)}
@media(max-width:767px){.newsroom .back{display:inline-flex}}

/* H1 tier — a detail page's own <h1>, one step below the H1+ hero tier the
   Newsroom index uses for its single page-level hero. */
.newsroom .a-hero-inner h1{font-size:3rem;line-height:1.0833;font-weight:var(--weight-heavy);letter-spacing:var(--tracking-h1,-0.035em);color:var(--ink);margin:14px 0 0}
@media(min-width:1024px){.newsroom .a-hero-inner h1{font-size:3.5rem;line-height:1.0714}}
.newsroom .a-hero-inner{margin-bottom:32px}
@media(min-width:1024px){.newsroom .a-hero-inner{margin-bottom:40px}}

.newsroom .a-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:15px;color:var(--mute)}

/* ---------- Body grid — flex, so the sidebar drops on its own (v1.02) ---------- */
/* No margin:auto — left edge stays flush with .wrap's padding, same as
   .a-hero-inner above, so the body text lines up with the h1. Right edge
   uses calc(50% + 580px) instead of a plain 1160px cap so it lands exactly
   where the old centered 1160px-wide, margin:auto box's right edge used to
   sit (that box's right edge was always content_width/2 + 580, algebraically,
   at any viewport) — the sidebar/banner stays put, and .a-col (flex:1) grows
   into the space freed up on the left. */
.newsroom .a-grid{display:flex;flex-wrap:wrap;gap:64px;max-width:calc(50% + 580px);align-items:flex-start}
.newsroom .a-col{flex:1 1 560px;min-width:0}
/* flex-grow:0 — the sidebar no longer soaks up extra grid width the way it
   did when it also held the two info boxes; it stays at a fixed, smaller
   size and .a-col (grow:1) absorbs the rest, which also shortens the
   banner (it scales with the column's width) so it sits closer to the
   height of the reading column next to it. */
.newsroom .a-aside{flex:0 1 340px;min-width:0;display:grid;gap:20px;align-content:start}

/* ---------- Lead figure — the article's one big image, so it earns radius-2xl
   ("full-bleed hero, image as centerpiece") rather than the card radius-xl. ---------- */
.newsroom .a-figure{position:relative;margin:0 0 40px}
@media(min-width:1024px){.newsroom .a-figure{margin-bottom:48px}}
.newsroom .a-figure img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:var(--radius-2xl);background:var(--chalk)}
.newsroom .a-figure figcaption{font-size:15px;line-height:20px;color:var(--mute);margin-top:14px}
/* Byline/date/read-time chip, overlaid on the lead image's bottom-left corner
   instead of sitting as a plain line under the h1 — an opaque chip (not a
   gradient scrim) so it reads the same regardless of the photo's own colors. */
.newsroom .a-figure .a-meta{position:absolute;left:16px;bottom:16px;padding:9px 16px;background:rgba(255,255,255,.94);border-radius:var(--radius-pill);box-shadow:var(--shadow-card-sm);font-size:14px}
@media(min-width:1024px){.newsroom .a-figure .a-meta{left:22px;bottom:22px;font-size:15px}}

/* ---------- Prose ---------- */
.newsroom .prose p{font-size:20px;line-height:28px;color:var(--coffee);margin-bottom:28px}
.newsroom .prose>p.lede-p{font-size:22px;line-height:32px;color:var(--ink);font-weight:var(--weight-medium)}
/* H3 tier — in-body subheadings never skip to H2, per the heading-hierarchy rule. */
.newsroom .prose 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);color:var(--ink);margin:48px 0 20px}
.newsroom .prose a{color:var(--c-700);text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:3px;font-weight:var(--weight-medium);transition:color 160ms}
.newsroom .prose a:hover{color:var(--c-600)}
.newsroom .prose strong{font-weight:var(--weight-bold);color:var(--ink)}
.newsroom .prose ul{margin:0 0 26px;padding-left:22px;color:var(--coffee)}
.newsroom .prose li{font-size:20px;line-height:28px;margin-bottom:8px}
.newsroom .prose blockquote{margin:36px 0;padding:4px 0 4px 26px;border-left:3px solid var(--c-600)}
.newsroom .prose blockquote p{font-size:22px;line-height:26px;font-weight:var(--weight-bold);letter-spacing:-.015em;color:var(--ink);margin:0}
/* In-body images — the Articles migration brought infographics embedded in
   the post content itself, on top of the hero figure above. */
.newsroom .prose img{max-width:100%;height:auto;display:block;margin:8px auto 32px;border-radius:var(--radius-lg)}

/* ---------- External-source articles — no body text (copyright/permissions:
   we can't republish another outlet's full article). The CTA + share sit
   on the lead image itself (over a bottom gradient scrim), and below the
   image is just a plain attribution line + date — no separate button. ---------- */
.newsroom .a-figure-overlay{position:absolute;inset:auto 0 0 0;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;padding:64px 22px 20px;background:linear-gradient(to top,rgba(10,10,10,.74) 0%,rgba(10,10,10,.4) 55%,rgba(10,10,10,0) 100%);border-radius:0 0 var(--radius-2xl) var(--radius-2xl)}
@media(min-width:1024px){.newsroom .a-figure-overlay{padding:72px 26px 24px}}
.newsroom .btn-source{display:inline-flex;align-items:center;gap:10px;background:var(--c-600);color:#fff;text-decoration:none;font-size:17px;font-weight:var(--weight-bold);padding:17px 28px;border-radius:var(--radius-pill);box-shadow:var(--shadow-brand);transition:background .18s cubic-bezier(.4,0,.2,1),transform .18s cubic-bezier(.4,0,.2,1)}
.newsroom .btn-source:hover{background:var(--c-700);transform:translateY(-2px)}
.newsroom .a-figure-overlay .share{margin:0;padding:0;border-top:0}
.newsroom .a-figure-overlay .share>span{color:rgba(255,255,255,.85)}

.newsroom .source-row{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px 24px}
.newsroom .prose .source-row .source-label{margin:0}
.newsroom .source-label{font-size:16px;line-height:24px;color:var(--mute)}
.newsroom .source-label b{color:var(--ink);font-weight:var(--weight-semibold)}
.newsroom .source-row time{font-size:15px;font-weight:var(--weight-bold);color:var(--c-600);white-space:nowrap}

/* ---------- Share ---------- */
.newsroom .share{display:flex;align-items:center;gap:10px;margin-top:40px;padding-top:26px;border-top:1px solid var(--rule)}
.newsroom .share>span{font-size:12px;line-height:16px;font-weight:var(--weight-bold);letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--mute);margin-right:4px}
.newsroom .share a,.newsroom .share button{width:40px;height:40px;border-radius:var(--radius-pill);border:1px solid var(--rule);background:var(--white);color:var(--coffee);display:flex;align-items:center;justify-content:center;cursor:pointer;font-family:inherit;transition:background 160ms,color 160ms,border-color 160ms,transform 160ms}
.newsroom .share a:hover,.newsroom .share button:hover{background:var(--c-600);border-color:var(--c-600);color:#fff;transform:translateY(-2px)}

/* ---------- Sidebar ---------- */
/* Art-directed banner — a fixed 740×1644 asset (assets/img/newsroom/
   newsroom-article-banner-2.png) with one reserved slot baked into the
   artwork. The CTA is a real <a> button positioned in %-of-artwork, not
   part of the image, so it's clickable and gets a real hover state.
   container-type:inline-size + cqw font-size keeps the button label
   proportioned to the art at any sidebar width — this all only holds
   because the geometry below is measured against this exact image.
   cta-single sits in the blank strip between the subtitle and the photo,
   the same spot the old two-button artwork reserved for its top ("green")
   button — left/width/aspect-ratio are unchanged from that shared geometry,
   only top and color changed for the new single-button, on-white placement. */
.newsroom .side-banner{position:relative;display:block;border:2px solid var(--rule);box-shadow:var(--shadow-card);border-radius:var(--radius-2xl);overflow:hidden;container-type:inline-size}
.newsroom .side-banner>img{display:block;width:100%;height:auto}
.newsroom .side-banner .cta{position:absolute;left:12.77%;width:53.446%;aspect-ratio:791/191;display:flex;align-items:center;justify-content:center;gap:.34em;border-radius:var(--radius-pill);color:#fff;font-weight:var(--weight-bold);letter-spacing:-.01em;font-size:3.78cqw;line-height:1;white-space:nowrap;transition:background .18s cubic-bezier(.4,0,.2,1),transform .18s cubic-bezier(.4,0,.2,1)}
.newsroom .side-banner .cta svg{width:1.05em;height:1.05em;flex:0 0 auto}
.newsroom .side-banner .cta:hover{transform:translateY(-1px)}
.newsroom .side-banner .cta-single{top:32.756%;background:var(--c-600)}
.newsroom .side-banner .cta-single:hover{background:var(--c-700)}

/* Horizontal variant — banner below the article body (Articles only, for
   now). Same overlay-button-on-art technique as .side-banner: the button's
   left/width/top are measured against the blank strip reserved in
   newsroom-article-banner-horizontal.png (below the headline, left of the
   photo), so they only hold for that exact image. Sized to 80% and
   centered in .wrap (rather than full-bleed) so it reads as a callout, not
   another full-width section; the button is centered under the headline
   text block (which spans ~8.9%-39.9% of the image) rather than flush to
   its left edge. */
.newsroom .h-banner{position:relative;display:block;width:80%;margin:0 auto;border:2px solid var(--rule);box-shadow:var(--shadow-card);border-radius:var(--radius-2xl);overflow:hidden;container-type:inline-size}
.newsroom .h-banner>img{display:block;width:100%;height:auto}
.newsroom .h-banner .cta{position:absolute;left:14.4%;top:76%;width:20%;aspect-ratio:791/191;display:flex;align-items:center;justify-content:center;gap:.34em;border-radius:var(--radius-pill);background:var(--c-600);color:#fff;font-weight:var(--weight-bold);letter-spacing:-.01em;font-size:1.7cqw;line-height:1;white-space:nowrap;transition:background .18s cubic-bezier(.4,0,.2,1),transform .18s cubic-bezier(.4,0,.2,1)}
.newsroom .h-banner .cta svg{width:1.05em;height:1.05em;flex:0 0 auto}
.newsroom .h-banner:hover .cta{background:var(--c-700);transform:translateY(-1px)}
@media(max-width:767px){.newsroom .h-banner{width:100%}.newsroom .h-banner .cta{font-size:3.2cqw}}

/* Press/media + Questions live in the reading column now (see .a-info-grid
   below), not the sidebar — with the sidebar down to just the banner, and
   the reading column often short (external-source articles have no body
   text), that balances the two columns instead of leaving the sidebar
   taller than the text next to it. */
.newsroom .a-info-grid{display:grid;gap:20px;margin-top:32px}
@media(min-width:640px){.newsroom .a-info-grid{grid-template-columns:1fr 1fr}}
.newsroom .side-box{border:1px solid var(--rule);border-radius:var(--radius-lg);padding:24px}
.newsroom .side-box h3{font-size:12px;line-height:16px;font-weight:var(--weight-bold);letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--mute);margin-bottom:12px}
.newsroom .side-box p{font-size:15px;line-height:20px;color:var(--coffee);margin:0}
.newsroom .side-box a{color:var(--c-700);font-weight:var(--weight-semibold);text-decoration:underline;text-underline-offset:3px}

/* ---------- Toast (copy-link confirmation) ---------- */
.newsroom .toast{position:fixed;left:50%;bottom:32px;transform:translate(-50%,16px);background:var(--ink-2);color:#fff;font-size:15px;font-weight:var(--weight-semibold);padding:13px 22px;border-radius:var(--radius-pill);z-index:95;opacity:0;pointer-events:none;transition:opacity 200ms,transform 200ms}
.newsroom .toast[data-on="true"]{opacity:1;transform:translate(-50%,0)}