/* ==============================================================
   Hero-style thumbnail (assets/js/post-scene.js) for posts with a hero
   background: the background with the hero's vignette, the model still
   centred above the SC: Evo logo, and the title under the logo — the full
   title on wide previews, the short title on small cards. Used in the blog
   list and lead story, home news, Up Next, the nav, the hero editor's
   thumbnail previews and the generated link-preview images.
   Placement (post-scene.js): --tx model offset (% of width), --ty model
   centre (% of height), --tsz model width (% of width), --tl logo + title
   centre (% of height), --bgpos background position. cqw = 1% of the
   thumbnail's width, so everything scales with the card.
   ============================================================== */
.pv { position: relative; display: block; width: 100%; height: 100%; container: pv / inline-size; }
.bl-mag__art .pv { aspect-ratio: 16 / 9; }
.pv .pv__clip { position: absolute; inset: 0; overflow: hidden; }
.pv .pv__stage { position: absolute; inset: 0; transition: transform .6s ease; }
.pv .pv__bg { display: block; width: 100%; height: 100%; object-fit: cover; object-position: var(--bgpos, center 30%); transform: none; transition: none; }
/* the hero's vignette (cinematic Stage layout) */
.pv .pv__clip::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 62% 70% at 50% 45%, transparent 30%, rgba(5, 10, 9, 0.85) 100%); pointer-events: none; }
.pv .pv__model { position: absolute; inset: auto; left: calc(50% + var(--tx, 0%)); top: var(--ty, 33%); width: calc(var(--tsz, 38) * 1cqw); height: auto; aspect-ratio: auto; max-width: none; object-fit: initial; translate: -50% -50%; scale: 1; transform: none; transition: none; filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.6)); pointer-events: none; }
:is(.bl-card, .nav-mega__card, .un-row, .post-card, .bl-mag__art):hover .pv .pv__stage { transform: scale(1.04); }
/* the cards' own hover zoom (transform on every img in the card) stays off the
   scene's images; the scene zooms as one through .pv__stage above */
:is(.bl-card, .nav-mega__card, .un-row, .post-card, .bl-mag__art):hover .pv :is(.pv__bg, .pv__model, .pv__logo) { transform: none; }

/* logo with the title under it, centred */
.pv .pv__brand { position: absolute; z-index: 3; left: 0; right: 0; top: var(--tl, 63%); translate: 0 -50%; display: flex; flex-direction: column; align-items: center; gap: 1.6cqw; padding: 0 6%; text-align: center; pointer-events: none; }
.pv .pv__logo { display: block; width: 56cqw; min-width: 90px; height: auto; aspect-ratio: auto; max-width: none; object-fit: initial; transform: none; transition: none; filter: drop-shadow(0 3px 12px rgba(0, 0, 0, 0.8)); }
.pv .pv__title { translate: 0 calc(var(--tto, 0) * 1cqw); /* thumb-title-offset; moves the title only */ font-family: var(--title-font, "Unbounded", sans-serif); font-weight: 700; line-height: 1.05; letter-spacing: 0.14em; text-transform: uppercase; color: #fff; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.9); }
/* --tts: the thumbnail's title size setting (thumb-title-size, 1 = normal) */
.pv .pv__title-long { display: none; font-size: calc(clamp(12px, 3.8cqw, 48px) * var(--tts, 1)); }
.pv .pv__title-short { display: block; font-size: calc(clamp(9px, 5.6cqw, 34px) * var(--tts, 1)); }
/* wide previews (the blog's lead story, link previews) show the full title */
@container pv (min-width: 560px) {
  .pv .pv__title-long { display: block; }
  .pv .pv__title-short { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .pv .pv__stage { transition: none; }
}
/* (aspect-ratio: auto above: some card boxes give every img inside them a
   16:9 shape — the blog's lead story does — which stretched the logo and model) */

/* split background (entry.split, like the home page hero): two images cut
   along a diagonal, with the hero's glowing seam */
.pv .pv__half { position: absolute; top: 0; height: 100%; width: 54%; object-fit: cover; transform: none; transition: none; max-width: none; aspect-ratio: auto; }
.pv .pv__half--l { left: 0; object-position: center; clip-path: polygon(0 0, 100% 0, 85.2% 100%, 0 100%); } /* seam: 54% across at the top, 46% at the bottom */
.pv .pv__half--r { right: 0; top: -5%; height: 110%; object-position: 65% center; /* taller, like the home hero, hiding the art's dark top strip */ clip-path: polygon(14.8% 0, 100% 0, 100% 100%, 0 100%); }
.pv .pv__seam { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.pv .pv__seam line { stroke: #54b893; stroke-width: 3; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 6px #54b893) drop-shadow(0 0 2px #9df0cf); }
/* --tls: logo width setting (logosize); no title → the logo alone */
.pv .pv__logo { width: calc(var(--tls, 56) * 1cqw); }
.pv--notitle .pv__title { display: none; }