/* OperaOn75 — interior page styles (Milestone 2: boards 04–10, 22).
   Sits on top of theme.css + components.css. Each block names the board it comes from: page styles copied from
   the board's <helmet>, plus the board's inline style="" attributes turned into classes. Carries into the
   WordPress theme as-is. */

/* ---------- Shared: page hero, headings, layout helpers ---------- */
.page-hero-wrap,.crumbs-bar,.prod-info,.prof-name{background:transparent}
.page-title{font-size:calc(clamp(48px,6vw,76px) * var(--hs,1))}
.page-lede{color:#e9e4d8}
.sec-head-tight{margin-bottom:24px}
.sec-head-sm{margin-bottom:28px}
.sec-head-xs{margin-bottom:20px}
.section-flush{padding-top:0}
.section-flush-sm{padding-top:24px}
.section-ruled{border-top:1px solid rgba(182,157,111,.25)}
.when-light{color:#70522f}
.tiles-title{margin-bottom:20px}
.link-row{display:flex; flex-wrap:wrap; gap:8px 28px}
.link-row-split{gap:16px 40px; align-items:center; justify-content:space-between}
.link-back svg{transform:scaleX(-1)}
.link-back:hover svg{transform:scaleX(-1) translateX(3px)}
.dl-text{display:flex; flex-direction:column; gap:2px}
.vid-figure{margin:0; min-width:0}
.art-ph-sm{padding:8px}
.art-ph-sm .ph-t{font-size:calc(15px * var(--hs,1))}

/* Filter buttons styled as tabs use aria-pressed (they filter one list; they are not ARIA tabs) */
.tab[aria-pressed="true"]{color:var(--fg); border-bottom-color:var(--oo-gold)}
[data-filter-scope] .tabs{margin-bottom:8px}

/* "Notify me" form inside an empty state */
.notify .notify-field{flex:1 1 260px; min-width:0}
.notify .notify-field .input{flex:none; width:100%} /* theme.css flex-basis is meant for a row; the field wrapper is a column */
.notify .form-status{flex-basis:100%}

/* Umber call-to-action band */
.cta-band{display:flex; flex-wrap:wrap; gap:24px 56px; align-items:center; justify-content:space-between}
.cta-band-text{display:flex; flex-direction:column; gap:10px; flex:1 1 520px}

/* People: role line above the name is gold on dark sections */
.t-dark .person-role,.t-stage .person-role{color:#d4bf94}

/* Venue */
.venue-list{display:flex; flex-direction:column; gap:20px}
.venue-addr{font-style:normal}
.venue-facts{margin-top:6px}

/* ---------- This Season (05) ---------- */
.spot-card .stage{aspect-ratio:auto; min-height:560px}
.spot-card .art-ph{height:440px}
.spot-card .ph-t{font-size:calc(42px * var(--hs,1))}
.spot-card .role{margin-top:-6px; font-size:calc(24px * var(--hs,1))}
.spot-card .facts{margin-top:4px}
.spot-card .btn-row{margin-top:8px}
.perf-cal{grid-template-columns:96px minmax(0,1fr) auto}
@media (max-width:760px){ .perf-cal{grid-template-columns:72px minmax(0,1fr)} }
.month[hidden]{display:none}

/* ---------- Past Productions (06) / past events ---------- */
.arow-main{min-width:0}
.arow-badges{margin-bottom:6px}
.archive-close{border-top:1px solid #d9d4c8; padding-top:48px; display:flex; flex-wrap:wrap; gap:20px 40px; align-items:center; justify-content:space-between}
.archive-close .pull{font-size:calc(30px * var(--hs,1)); max-width:640px}

/* ---------- Production detail (04) ---------- */
.crumbs-bar{padding-top:28px}
.prod-art{min-width:0}
.prod-art .ph-t{font-size:calc(46px * var(--hs,1))}
.prod-info{display:flex; flex-direction:column; gap:18px; min-width:0}
.prod-composer{font-size:calc(26px * var(--hs,1)); margin-top:-8px}
.prod-facts{margin-top:6px}
.prod-acts{margin-top:8px}
.price-line{max-width:360px}
.perf .p-meta-lead{margin:0; color:#1e1e1a; font-size:19px; font-weight:600}
.perf-note{margin-top:18px}
.byg-title{margin-bottom:18px}
.syn-side{display:flex; flex-direction:column; gap:20px}
.syn-pull{font-size:calc(30px * var(--hs,1)); margin-bottom:18px}
.quote blockquote{margin:0}
.gallery-credit{margin-top:12px}
.video-wrap{max-width:1280px; display:flex; flex-direction:column; gap:32px}
.cast-note{max-width:380px}
.people-title{margin-bottom:20px}
.people-grid{margin-bottom:56px}
.sponsor-lg{flex-direction:column; gap:6px; height:112px}
.sponsor-level{font-size:12px; letter-spacing:.14em}
/* On-page nav sticks under the condensed header so visitors can jump between sections */
.pnav{position:sticky; top:65px; z-index:4}

/* ---------- Photo viewer (02b) ---------- */
.lightbox-dialog{padding:0; border:0; background:transparent; width:min(1100px, calc(100% - 32px)); max-width:none; max-height:calc(100% - 32px)}
.lightbox-dialog::backdrop{background:rgba(20,21,16,.85)}
.lightbox-dialog .lightbox{min-height:0}
.lb-img img{max-height:min(68vh,620px); width:auto; max-width:100%; object-fit:contain}
.lb-prev{position:absolute; left:0}
.lb-next{position:absolute; right:0}
.lb-foot{display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap}

/* ---------- Special Events (07): page styles from the Events board ---------- */
.efeature{display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:40px; align-items:center; padding:40px; background:#fff; border:1px solid #d9d4c8}
.efeature .datebox{width:120px; height:136px}
.efeature .datebox .d{font-size:calc(60px * var(--hs,1))}
.efeature .ef-body{min-width:0; display:flex; flex-direction:column; gap:8px; align-items:flex-start}
.efeature .ef-title{font-size:calc(38px * var(--hs,1))}
.efeature .e-act{display:flex; flex-direction:column; gap:10px; align-items:stretch}
.month .ecard{background:#fff}
.month-events{display:flex; flex-direction:column; gap:16px}
.ecard-row{min-width:0; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:12px 24px; align-items:center}
.ecard-acts{display:flex; flex-direction:column; gap:8px}
@media (max-width:760px){ .efeature{grid-template-columns:auto minmax(0,1fr); gap:20px; padding:24px} .efeature .e-act{grid-column:1 / -1} .efeature .datebox{width:88px; height:104px} .efeature .datebox .d{font-size:calc(44px * var(--hs,1))} }
/* Phones: the action column drops under the event text so titles keep their width */
@media (max-width:560px){ .ecard{grid-template-columns:72px minmax(0,1fr); gap:16px; padding:18px} .ecard .datebox{height:88px} .ecard-row{grid-template-columns:1fr} .ecard-acts{flex-direction:row; flex-wrap:wrap; align-items:center; gap:8px 20px} }

/* ---------- Special Event detail (08) ---------- */
.ev-page-hero{padding-bottom:0}
.ev-info{display:flex; flex-direction:column; gap:16px; min-width:0}
.ev-title{font-size:calc(clamp(44px,5.4vw,72px) * var(--hs,1))}
.ev-sub{color:#e9e4d8; max-width:640px}
.ev-facts{max-width:640px}
.ev-acts{margin-top:6px}
.ev-notice{margin-bottom:48px}
.ev-notice:last-child{margin-bottom:0}
.ev-about{display:grid; gap:40px 64px; grid-template-columns:minmax(0,7fr) minmax(0,5fr); align-items:start}
@media (max-width:900px){ .ev-about{grid-template-columns:1fr} }
.ev-about-text{display:flex; flex-direction:column; gap:16px; min-width:0}
.ev-dl{max-width:520px; margin-top:8px}
.ev-figure{margin:0; min-width:0}
.ev-sponsor{margin-top:28px}
.ev-sponsor strong{color:#1e1e1a}

/* ---------- Tickets (22): page styles from the Tickets board ---------- */
.tix-perfs{grid-column:2}
@media (max-width:760px){ .tix-perfs{grid-column:1 / -1} }
.tix-perfs .perf{grid-template-columns:96px minmax(0,1fr) auto}
.tix-perfs .perf:first-child{border-top:1px solid #d9d4c8}
.tix-perfs .p-meta-lead{font-size:18px}
.tix-info{display:flex; flex-direction:column; gap:8px; min-width:0}
.tix-title{font-size:calc(36px * var(--hs,1))}
.tix-sub{margin-top:-4px}
.tix .art-ph-sm .ph-t{font-size:calc(18px * var(--hs,1))}
.tix[hidden]{display:none}
.step-text{font-size:17px}
@media (max-width:760px){ .tix-perfs .perf{grid-template-columns:72px minmax(0,1fr)} }

/* ---------- Our Artists (09) ---------- */
.dir-bar{display:flex; flex-wrap:wrap; gap:16px 32px; align-items:center; justify-content:space-between; margin-bottom:40px}
.artist-grid li[hidden]{display:none}

/* ---------- Artist profile (10): page styles from the Artist board ---------- */
.prof-head{background:linear-gradient(180deg, #141510 0, #141510 260px, #f4f4f3 260px)}
.prof-head .headshot{box-shadow:0 24px 50px rgba(0,0,0,.35); border:1px solid rgba(182,157,111,.5)}
.next-up{display:flex; flex-wrap:wrap; align-items:center; gap:16px 28px; padding:22px 24px; background:#fff; border:1px solid #d9d4c8; border-top:2px solid #b69d6f}
@media (max-width:900px){ .prof-head{background:linear-gradient(180deg, #141510 0, #141510 200px, #f4f4f3 200px)} .prof-head .headshot{max-width:300px} .prof-head .prof-name{--fg:#1e1e1a; --accent:#70522f; color:#1e1e1a; min-height:0!important; padding-bottom:0!important} }
.prof-wrap{padding-top:28px; padding-bottom:72px}
.prof-crumbs{padding-top:0; margin-bottom:36px}
.prof-credit{margin-top:10px}
.prof-head .headshot.prof-mono{background:#2e2a22}
.prof-head .headshot.prof-mono span{color:#b69d6f; font-size:calc(96px * var(--hs,1))}
.prof-main{display:flex; flex-direction:column; gap:18px; min-width:0}
.prof-name{display:flex; flex-direction:column; gap:12px; min-height:172px; justify-content:flex-end; padding-bottom:28px}
.prof-title{font-size:calc(clamp(44px,5.6vw,76px) * var(--hs,1))}
.tag-list{display:flex; flex-wrap:wrap; gap:8px}
.next-up-text{display:flex; flex-direction:column; gap:4px; flex:1 1 260px}
.next-up .role{font-size:inherit}
.bio-eyebrow{margin-bottom:10px}
.media-grid{display:grid; gap:40px 56px; grid-template-columns:repeat(auto-fit,minmax(min(420px,100%),1fr)); align-items:center}
.media-text{display:flex; flex-direction:column; gap:12px}
.media-poster{object-position:60% 30%}
.credit-main{min-width:0}

/* ---------- Cast & Creative, programs, videos (shared by productions, events and archives) ---------- */
.people-title{margin-top:8px}
.people-grid:last-child{margin-bottom:0}
/* Archived credits without a stored headshot: a compact name list instead of empty photo frames */
.person-text{padding-top:14px; border-top:1px solid var(--rule)}
.people-grid-text{grid-template-columns:repeat(auto-fill,minmax(min(200px,100%),1fr)); gap:20px 24px}
.dl-list{display:flex; flex-direction:column; gap:12px}
.dl-note{margin-left:6px; min-height:24px; font-size:13px; vertical-align:middle}
.video-list{display:grid; gap:32px}
.video-list-multi{grid-template-columns:repeat(auto-fit,minmax(min(460px,100%),1fr))}
.video-title{color:var(--fg); font-weight:600}
/* Phones: headshot credits two across. The design's .grid-auto-sm drops to one 4:5 headshot per row below ~480px,
   which turns a 13-person cast into ~6,000px of scrolling. Text-only archive credits stay one per row. */
@media (max-width:560px){ .people-grid:not(.people-grid-text){grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px 16px} .people-grid .nm{font-size:calc(20px * var(--hs,1))} }