/* PNGCORE — news archive (/news/, home.php) and the media components shared by every media template.
   Loaded on /news/ and, through the pc_template_css filter, first on category.php, single.php, /media/, /videos/,
   /newsletter/, /photo-gallery/ and /speeches-and-presentations/ (their own stylesheets come after this one).
   Owner: media. Markup: template-parts/media/*.php, inc/pages/media.php. */

/* ---------- Hero totals (videos, newsletters, speeches): a big number on the navy hero ---------- */
.pc-videos-total,.pc-newsletter-total,.pc-media-totals{margin:0;padding:0;list-style:none;color:var(--pc-on-dark-muted);font-size:var(--pc-fs-small);line-height:1.3}
.pc-media-totals{display:flex;gap:var(--pc-s6)}
.pc-videos-total .pc-num,.pc-newsletter-total .pc-num,.pc-media-totals .pc-num{display:block;margin-bottom:2px;font-size:var(--pc-fs-stat);font-weight:800;line-height:1;letter-spacing:var(--pc-track-display);color:#fff}
.pc-hero-aside .pc-videos-total,.pc-hero-aside .pc-newsletter-total,.pc-hero-aside .pc-media-totals{padding-left:var(--pc-s5);border-left:3px solid var(--pc-accent)}
.pc-media-totals li + li{padding-left:var(--pc-s6);border-left:1px solid var(--pc-on-dark-line)}

/* ---------- News cards (template-parts/media/card-post.php) ---------- */
.pc-media-card .pc-card-top{row-gap:var(--pc-s1)}
.pc-media-card .pc-card-title{text-wrap:pretty}
.pc-media-card .pc-card-excerpt{line-height:1.55}
/* Branded tile for posts without a featured image: the reversed logo on navy */
.pc-media-fallback{display:grid;place-items:center;width:100%;aspect-ratio:3/2;background:radial-gradient(120% 90% at 85% 10%,var(--pc-navy-800) 0%,var(--pc-navy) 55%,var(--pc-navy-900) 100%)}
.pc-media-fallback-logo{display:block;width:42%;max-width:220px;height:auto;opacity:.92}
.pc-media-fallback-logo img{width:100%;height:auto}
/* Featured (first card of a listing) */
.pc-card--featured .pc-card-title{font-size:var(--pc-fs-h3);line-height:1.2}
.pc-card--featured .pc-card-excerpt{font-size:var(--pc-fs-body)}
@media (min-width:960px){
  .pc-card--featured > .pc-media-fallback{width:58%;flex:none;aspect-ratio:auto;min-height:360px}
  .pc-card--featured .pc-card-body{gap:var(--pc-s4)}
}
/* Lead card (media centre: the latest release) */
.pc-card--lead .pc-card-img,.pc-card--lead > .pc-media-fallback{aspect-ratio:16/10}
.pc-card--lead .pc-card-body{padding:var(--pc-s6)}
.pc-card--lead .pc-card-title{font-size:var(--pc-fs-h3);line-height:1.2}
.pc-card--lead .pc-card-excerpt{font-size:var(--pc-fs-body)}
/* Compact card (media centre: two more releases) — thumbnail beside the text; the text sets the height */
.pc-card--compact{min-height:128px}
.pc-card--compact > .pc-card-img,.pc-card--compact > .pc-media-fallback{position:absolute;top:0;bottom:0;left:0;width:112px;height:100%;aspect-ratio:auto;object-fit:cover}
.pc-card--compact > .pc-media-fallback .pc-media-fallback-logo{width:64%}
.pc-card--compact .pc-card-body{margin-left:112px;padding:var(--pc-s4);gap:var(--pc-s2);justify-content:center}
.pc-card--compact .pc-card-title{font-size:var(--pc-fs-h5);line-height:1.35}
@media (min-width:720px){
  .pc-card--compact{min-height:180px}
  .pc-card--compact > .pc-card-img,.pc-card--compact > .pc-media-fallback{width:40%}
  .pc-card--compact .pc-card-body{margin-left:40%;padding:var(--pc-s5)}
}

/* ---------- News listing (home.php, category.php: template-parts/media/news-listing.php) ---------- */
.pc-news-toolbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--pc-s3) var(--pc-s6);margin-bottom:var(--pc-s6)}
.pc-news-toolbar .pc-chips{margin:0}
.pc-news-count{margin:0;white-space:nowrap}
.pc-news-grid{align-items:stretch}
.pc-news-listing .pc-pagination{margin-top:var(--pc-s8)}
.pc-hero .pc-hero-page{font-size:var(--pc-fs-small)}

/* ---------- Video cards (template-parts/media/video-card.php) ---------- */
.pc-video-card{display:flex;flex-direction:column;gap:var(--pc-s3);margin:0}
.pc-video-card .pc-video-facade:focus-visible{outline:3px solid var(--pc-focus);outline-offset:3px}
.pc-video-card .pc-video-facade.is-playing{box-shadow:var(--pc-shadow)}
.pc-video-card-body{display:flex;flex-direction:column;gap:var(--pc-s1)}
.pc-video-card-title{margin:0;font-size:var(--pc-fs-h5);line-height:1.35;font-weight:700;color:var(--pc-ink);text-wrap:pretty}
.pc-video-card-body .pc-meta{margin:0}

/* ---------- Newsletter issue feature (template-parts/media/issue-feature.php) ---------- */
.pc-issue-feature{display:grid;gap:var(--pc-s6);align-items:center}
.pc-issue-feature-cover{display:block;justify-self:start;width:min(100%,220px);border-radius:var(--pc-r);box-shadow:var(--pc-shadow-lg);overflow:hidden;transform:rotate(-1.5deg);transition:transform var(--pc-dur-2) var(--pc-ease)}
.pc-issue-feature-cover:hover{transform:rotate(0)}
.pc-issue-feature-img{display:block;width:100%;height:auto;aspect-ratio:1816/2560;object-fit:cover}
.pc-issue-feature-body{display:flex;flex-direction:column;gap:var(--pc-s3)}
.pc-issue-feature-body > *{margin:0}
.pc-issue-feature-body .pc-rule--accent{margin-bottom:var(--pc-s2)}
.pc-issue-feature-kicker{margin:0}
.pc-issue-feature-title{font-size:var(--pc-fs-h3);line-height:1.2}
.pc-issue-feature-headline{font-size:var(--pc-fs-lead);line-height:var(--pc-lh-lead);color:var(--pc-text)}
.pc-issue-feature .pc-actions{margin-top:var(--pc-s3)}
.pc-btn-note{font-weight:500;opacity:.85}
@media (min-width:600px){.pc-issue-feature{grid-template-columns:minmax(150px,220px) minmax(0,1fr)}}

/* ---------- Document rows for addresses and presentations (template-parts/media/doc-row.php) ---------- */
.pc-doc p.pc-doc-title{font-size:var(--pc-fs-body);color:var(--pc-ink)}
.pc-media-doc .pc-doc-title .pc-icon--ext{width:14px;height:14px;margin-left:4px;vertical-align:-1px}
.pc-doc p.pc-media-doc-by{color:var(--pc-text)}
.pc-media-doc .pc-btn{white-space:nowrap}

/* ---------- "On this page" chips (videos, speeches): a fade at the right edge says the row scrolls ---------- */
.pc-media-anchors .pc-chips{padding-right:56px;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 56px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 56px),transparent);scroll-padding-inline:16px 56px}
.pc-media-anchors .pc-chip{min-height:44px}

/* Work-around (shared-requests/media.md §1, same as about.md §1): below 400 px the utility-bar announcement is wider
   than the screen (scrollWidth 387 at 360). Scoped to the media templates; remove when components.css is fixed. */
@media (max-width:399px){
  :is(.pc-tpl-media,.pc-tpl-news,.single-post) .pc-utility-text{display:none}
  :is(.pc-tpl-media,.pc-tpl-news,.single-post) .pc-utility-note{gap:var(--pc-s2)}
  :is(.pc-tpl-media,.pc-tpl-news,.single-post) .pc-utility-note strong{min-width:0;overflow:hidden;text-overflow:ellipsis}
}

/* ---------- QA round 1 fixes ---------- */
/* BR1-05: portrait sources (headshots) in 3:2 card frames keep the head in view (pc_media_post_card adds .is-portrait) */
.pc-media-card.is-portrait > .pc-card-img{object-position:50% 12%}

/* UX1-23: photo viewer additions from template-parts/media/media.js: "All N photos" button (long albums) and the
   thumbnail grid inside the dialog */
.pc-lightbox-tools{position:absolute;top:var(--pc-s4);left:50%;transform:translateX(-50%);z-index:2}
.pc-lightbox-tools[hidden],.pc-lightbox-panel[hidden]{display:none}
.pc-lightbox-all{min-height:44px;padding:0 var(--pc-s5);border:1px solid rgba(255,255,255,.35);border-radius:999px;background:rgba(255,255,255,.1);color:#fff;font:inherit;font-size:var(--pc-fs-small);font-weight:600;cursor:pointer}
.pc-lightbox-all:hover{background:rgba(255,255,255,.22)}
.pc-lightbox :focus-visible{outline:3px solid var(--pc-accent);outline-offset:2px}
.pc-lightbox-panel{position:absolute;inset:0;z-index:3;overflow:auto;overscroll-behavior:contain;padding:var(--pc-s5) clamp(16px,4vw,40px) var(--pc-s8);background:var(--pc-navy-900,#001523)}
.pc-lightbox-panel-head{position:sticky;top:calc(-1 * var(--pc-s5));z-index:1;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--pc-s3);margin:calc(-1 * var(--pc-s5)) calc(-1 * clamp(16px,4vw,40px)) var(--pc-s5);padding:var(--pc-s4) clamp(16px,4vw,40px);background:inherit;border-bottom:1px solid rgba(255,255,255,.12)}
.pc-lightbox-panel-title{margin:0;font-size:var(--pc-fs-h5);line-height:1.3;color:#fff}
.pc-lightbox-panel .pc-lightbox-back{min-height:44px;color:#fff;border-color:rgba(255,255,255,.5);background:transparent}
.pc-lightbox-panel .pc-lightbox-back:hover{background:rgba(255,255,255,.12)}
.pc-lightbox-thumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:var(--pc-s2);margin:0 auto;padding:0;max-width:1400px;list-style:none}
.pc-lightbox-thumb{display:block;width:100%;padding:0;border:0;border-radius:var(--pc-r-sm);overflow:hidden;background:rgba(255,255,255,.08);cursor:pointer;aspect-ratio:4/3}
.pc-lightbox-thumb img{display:block;width:100%;height:100%;object-fit:cover;max-height:none;border-radius:0;transition:opacity var(--pc-dur-2) var(--pc-ease)}
.pc-lightbox-thumb:hover img{opacity:.8}
.pc-lightbox-thumb[aria-current]{box-shadow:0 0 0 3px var(--pc-accent)}
@media (min-width:720px){.pc-lightbox-thumbs{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}}
/* UX1-25 (newsletter and media centre): nothing in the feature may push it wider than a 320 px screen */
.pc-issue-feature > *{min-width:0}
.pc-issue-feature-title,.pc-issue-feature-headline,.pc-issue-feature-meta{overflow-wrap:anywhere}
.pc-issue-feature .pc-btn{white-space:normal;text-align:left}