/* ==========================================================================
SHOW PAGE STYLESHEET - for single-currentseason-v2.php (and eventually
single-pastproduction-v2.php, which can reuse this same file).
Loaded alongside homepage.css (which header-v2.php always loads) - the
:root color/font variables and .section/.section-head/.wrap rules
already come from there, so this file only adds what's unique to a
show page.
CHANGES IN THIS PASS: tightened hero spacing to match the homepage's
rhythm, rebuilt the photo gallery for 8 (or more, for press photos)
smaller tiles with native aspect ratio instead of 4 large cropped
ones, and added embed styles for the new trailer/program sections.
Removed the old bold underline separator under section headings -
homepage.css doesn't use one, so this drops it for consistency and
keeps the accent color reserved for tags, buttons, and gallery
borders instead of decoration.
========================================================================== */
/* 3:1 matches the homepage's real hero proportions, measured directly
against the live page (rendered at ~2.97:1 in a real browser
window) - both this banner and the homepage hero are full-bleed
(edge-to-edge, not capped at the 1200px .wrap content width), so
the ratio should be based on actual viewport width, not the
content width. 2:1 (the previous value) was too short/wide by
comparison and rendered taller than intended relative to width. */
.show-banner{width:100%;aspect-ratio:3/1;background-size:cover;background-position:center;background-color:var(--color-char);}
@media (max-width:700px){.show-banner{aspect-ratio:4/3;}}
.show-hero-band{background:var(--color-char);border-bottom:1px solid rgba(255,255,255,.06);}
.show-hero-band .wrap{padding:36px 24px;}
/* fa-inner/ember-inner keep their homepage.css padding (22px 40px /
40px) and max-width (1200px) everywhere else - this scopes both a
tighter horizontal inset AND a wider max-width to just the
instances used on the show page. Special Events content (event
dates/times) tends to run one long line per entry, and the
homepage's 1200px cap was still forcing early wraps even after the
show-details-body max-width was removed - this gives it real room. */
.show-hero-wrap .ember-inner{padding-left:24px;padding-right:24px;}
.hero-row{display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap;}
.hero-main{flex:1;min-width:280px;}
.show-hero-band .tag{display:inline-block;background:var(--color-yellow);color:#3a1400;font-family:var(--font-body);font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:8px 16px;margin-bottom:14px;}
.show-hero-band h1{font-family:var(--font-display);font-size:clamp(28px,3.8vw,44px);line-height:1.03;font-weight:700;color:#fff;margin:0 0 10px;max-width:820px;}
.show-credits{display:flex;flex-wrap:wrap;gap:4px 14px;font-family:var(--font-body);font-size:15px;color:rgba(232,232,232,.8);margin-bottom:10px;}
.show-dates{font-family:var(--font-body);font-size:13px;letter-spacing:.04em;text-transform:uppercase;color:var(--color-mid);margin-bottom:14px;}
.show-dates a{color:var(--color-orange);text-decoration:underline;}
.show-ticketinfo p{font-family:var(--font-body);font-size:15px;line-height:1.55;color:rgba(232,232,232,.75);margin:0;}
.show-tix-button{flex:none;display:inline-block;background:var(--color-orange);color:#3a1400;font-family:var(--font-body);font-weight:700;font-size:12px;letter-spacing:.06em;text-transform:uppercase;text-decoration:none;padding:13px 26px;transition:opacity .15s ease;white-space:nowrap;}
.show-tix-button:hover{opacity:.85;}
/* Alternating background - computed in PHP (a running $alt toggle,
incremented only for blocks that actually render) rather than in
CSS, and shared across BOTH .section and .featured-announce. This
was previously CSS-only (nth-of-type), which worked for sections
but couldn't include featured-announce in the same sequence since
it's a different tag - meaning Special Events always defaulted to
char and could land next to another char section with no visible
separation. Now every alternating block (regardless of tag) pulls
from one shared sequence, so it's never adjacent to the same tone. */
.bg-char{background:var(--color-char);}
.featured-announce{background:transparent;}
.featured-announce.bg-char{background:var(--color-char);}
.show-details-body{font-size:14px;line-height:1.7;color:rgba(232,232,232,.85);max-width:760px;}
.show-details-body p{margin:0 0 10px;}
.show-details-body h3, .show-details-body h4{font-family:var(--font-display);color:#fff;margin:28px 0 12px;}
/* Inside featured-announce, show-details-body sits in a flex row next
to the fa-cta button rather than as standalone prose. The real
constraint here is homepage.css's .fa-body p{max-width:560px} rule,
which targets the tag directly - overriding the wrapping div's
max-width wasn't enough since that rule never touched the div in
the first place. This targets the actual
with higher
specificity so it wins. */
.featured-announce .show-details-body{max-width:none;}
.featured-announce .show-details-body p{max-width:none;}
/* Old show content (cast bios, descriptions) was written against a light
theme and carries inline black text color on individual tags. Force
light text throughout regardless of inline color so none of it goes
dark-on-dark. Links get the accent color specifically. */
.show-details-body p, .show-details-body span, .show-details-body li,
.show-details-body b, .show-details-body strong, .show-details-body i,
.show-details-body em, .show-details-body div, .show-details-body td,
.show-details-body th {color:rgba(232,232,232,.85) !important;}
.show-details-body a {color:var(--color-orange) !important;}
.show-details-body h1, .show-details-body h2, .show-details-body h5, .show-details-body h6 {color:#fff !important;}
.playwright-block{display:flex;gap:32px;flex-wrap:wrap;margin-bottom:20px;}
.playwright-photo{flex:none;width:160px;}
.playwright-photo img{width:100%;display:block;}
.playwright-photo h5{font-family:var(--font-display);font-size:15px;color:var(--color-mid);margin:10px 0 0;font-weight:400;}
.playwright-description{flex:1;min-width:280px;}
.show-calendar{margin-top:28px;}
/* Trailer + Program embeds */
.video-embed{position:relative;width:100%;aspect-ratio:16/9;background:#000;}
.video-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}
.program-embed{width:100%;height:70vh;min-height:480px;background:var(--color-char);border:1px solid rgba(255,255,255,.08);}
.program-embed iframe{width:100%;height:100%;border:0;}
/* Photo gallery - shared by Photos and Press Photos sections.
Square containers at a fixed tile size; the image itself keeps its
native aspect ratio inside via object-fit:contain, so nothing gets
cropped - portrait shots letterbox left/right, wide shots letterbox
top/bottom, both against the tile's own dark background rather than
looking like an error. */
.show-gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
@media (max-width:900px){.show-gallery{grid-template-columns:repeat(2,1fr);}}
@media (max-width:480px){.show-gallery{grid-template-columns:1fr;}}
.show-gallery-item{margin:0;}
.show-gallery-frame{display:block;aspect-ratio:1/1;background:var(--color-char);border-top:3px solid var(--color-orange);overflow:hidden;}
.show-gallery-item:nth-child(even) .show-gallery-frame{border-top-color:var(--color-yellow);}
.show-gallery-frame img{width:100%;height:100%;object-fit:contain;display:block;}
.show-gallery-item figcaption{font-family:var(--font-body);font-size:13px;color:rgba(232,232,232,.75);margin-top:8px;}
.show-gallery-credit{font-family:var(--font-body);font-size:11px;color:var(--color-mid);margin:3px 0 0;}
/* Special Events uses .featured-announce (from homepage.css) but that
component's real visual weight comes from its bold Idlewild h3
headline - the small uppercase .fa-label alone read as too quiet
and got missed. This adds that headline treatment. */
.fa-heading{font-family:var(--font-display);font-size:28px;font-weight:700;color:#fff;margin:0 0 10px;}