/* Show-page components (a single title's page, e.g. Game of Thrones) + the shared video lightbox.
   Loads on top of home.css (base system) and hbo.css (dark palette). Dark by inheritance. */

/* ── page header bits ────────────────────────────────────────────────────────── */
.show-back{display:inline-flex;align-items:center;gap:8px;font-family:ui-sans-serif,system-ui,Arial,sans-serif;
  font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
  margin-top:clamp(10px,1.4vw,18px);transition:color .2s}
.show-back:hover{color:var(--brick)}
.show-back::before{content:"←";font-size:15px}
.show-hero{padding:clamp(18px,2.4vw,30px) 0 clamp(34px,4.4vw,58px);border-bottom:1px solid var(--rule-soft)}
.show-h1{font-size:clamp(38px,6vw,76px);line-height:1;letter-spacing:-.02em;font-weight:500;
  margin:clamp(14px,1.8vw,22px) 0 0}
/* title shown as the official show logo instead of type — sized to fill the
   column width above the lede (height-capped so squarish logos don't tower).
   .ee-hp prefix needed to outrank the base `.ee-hp img{max-width:100%}` rule. */
.show-h1--logo{line-height:0}
.ee-hp .show-h1__img{display:block;width:auto;height:auto;max-width:min(100%,620px);
  max-height:clamp(112px,15vw,164px);object-fit:contain}
/* near-square logos (e.g. the Sesame Street sign) need extra height to read at
   a comparable size — this lets them grow taller before the width cap applies */
.ee-hp .show-h1__img--tall{max-height:clamp(150px,24vw,232px)}
.show-h1__img--invert{filter:invert(1)}   /* for dark-ink logos (HBO Documentary Films) */
/* hero with a large emblem filling the empty right side (gold art, bg flood-filled to transparency) */
.show-hero--emblem{display:flex;align-items:center;justify-content:space-between;gap:clamp(24px,4vw,64px)}
.show-hero__main{flex:1 1 auto;min-width:0;max-width:660px}
.show-hero__emblem{flex:0 0 auto;width:clamp(140px,24vw,296px);height:auto;pointer-events:none;
  margin-right:clamp(10px,3vw,44px)}
@media(max-width:720px){
  .show-hero--emblem{flex-direction:column-reverse;align-items:flex-start;gap:8px}
  .show-hero__emblem{width:clamp(120px,34vw,180px)}
}
.show-lede{color:var(--muted);font-size:clamp(17px,1.4vw,20px);line-height:1.6;
  margin-top:clamp(16px,1.8vw,24px);max-width:64ch}

/* ── a section of films (by asset type) ─────────────────────────────────────── */
.reel{margin-top:clamp(40px,5vw,72px)}
.reel:last-of-type{padding-bottom:clamp(56px,8vw,104px)}
.reel__head{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;margin-bottom:clamp(18px,2vw,26px)}
.reel__n{font-family:ui-sans-serif,system-ui,Arial,sans-serif;font-size:12px;font-weight:800;
  letter-spacing:.2em;text-transform:uppercase;color:var(--ink)}
.reel__count{font-family:ui-sans-serif,system-ui,Arial,sans-serif;font-size:11px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
.reel__desc{color:var(--muted);font-size:15.5px;line-height:1.55;max-width:70ch;margin:-6px 0 clamp(20px,2vw,28px)}

.reel__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,1.8vw,26px)}
.reel__grid--wide{grid-template-columns:repeat(2,1fr)}
.reel__grid--feature{grid-template-columns:1fr}          /* one large hero film */
.reel__grid--feature .film__t{font-size:clamp(20px,1.7vw,26px)}
@media(max-width:900px){.reel__grid,.reel__grid--wide{grid-template-columns:repeat(2,1fr)}}
/* On phones a reel swipes sideways rather than stacking. A section of 11 films
   ran ~2,700px of column; as a swipe row it's one film tall and nothing is
   dropped. The next film peeks at the edge, so it's clear there's more.
   --feature reels are a single hero film and stay full width. */
@media(max-width:560px){
  .reel__grid,.reel__grid--wide{
    display:flex;gap:12px;overflow-x:auto;overflow-y:hidden;
    scroll-snap-type:x mandatory;scroll-behavior:smooth;
    scrollbar-width:none;-ms-overflow-style:none;overscroll-behavior-x:contain;
    margin-right:calc(var(--pad, 20px) * -1);padding-right:var(--pad, 20px)}
  .reel__grid::-webkit-scrollbar,.reel__grid--wide::-webkit-scrollbar{display:none}
  .reel__grid>.film,.reel__grid--wide>.film{flex:0 0 82%;scroll-snap-align:start}
  .reel__grid--feature{display:grid;grid-template-columns:1fr;overflow:visible;
    margin-right:0;padding-right:0}
  .reel__grid--feature>.film{flex:none;width:auto}
}

/* ── a film tile (opens the lightbox) ───────────────────────────────────────── */
.film{display:block;cursor:pointer;background:none;border:0;padding:0;text-align:left;width:100%;color:inherit;font:inherit}
.film__art{position:relative;aspect-ratio:16/9;overflow:hidden;border:1px solid var(--rule);background:var(--panel)}
.film__art img{width:100%;height:100%;object-fit:cover;transition:transform .5s,filter .3s;filter:saturate(.94)}
.film:hover .film__art img{transform:scale(1.05);filter:saturate(1)}
.film__art::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,11,13,0) 55%,rgba(11,11,13,.6))}
.film__play{position:absolute;z-index:2;left:50%;top:50%;transform:translate(-50%,-50%) scale(.9);
  width:50px;height:50px;border-radius:50%;background:rgba(11,11,13,.35);border:1.5px solid rgba(255,255,255,.85);
  display:grid;place-items:center;opacity:0;transition:.3s}
.film:hover .film__play{opacity:1;transform:translate(-50%,-50%) scale(1)}
.film:focus-visible .film__play{opacity:1}
.film__play::before{content:"";border-left:13px solid #fff;border-top:8px solid transparent;border-bottom:8px solid transparent;margin-left:4px}
.film__dur{position:absolute;z-index:2;right:8px;bottom:8px;font-family:ui-sans-serif,system-ui,Arial,sans-serif;
  font-size:11px;font-weight:700;letter-spacing:.04em;color:#fff;background:rgba(11,11,13,.7);padding:3px 7px;border-radius:3px}
/* typographic placeholder plate — shown when a film's key art isn't available yet */
.film__art--ph{display:grid;place-items:center;padding:18px;text-align:center;
  background:radial-gradient(120% 120% at 50% 0,#1a1a20 0,#0e0e12 70%)}
.film__art--ph::after{background:none}
.film__phk{font-size:clamp(15px,1.4vw,19px);font-weight:500;letter-spacing:-.005em;line-height:1.3;
  color:var(--muted);max-width:26ch}
.film__t{font-size:clamp(16px,1.3vw,19px);font-weight:500;letter-spacing:-.005em;line-height:1.25;margin-top:13px}
.film__meta{font-family:ui-sans-serif,system-ui,Arial,sans-serif;font-size:12px;color:var(--faint);margin-top:5px}