/* Shared styles for solo event pages */
/* (Body scaffold — min-height + header-clearing padding — lives in style.css.) */

/* Black-ink baseline for every text node (outside the iframe). :where() keeps
   it at zero specificity so classed rules (style.css components like
   .kicker, .meta-label) can set their own color. */
:where(.main, .main *, .site-header, .site-header *) { color: var(--ink); }
.main a:hover, .site-header a:hover { color: var(--ink); }

.main {
  width: min(1240px, 94vw);
  margin: 0 auto;
}

/* .kicker comes from style.css. The title is style.css's .page-title
   (see the h1's classes) with a tighter bottom margin here. */
.event-title { margin-bottom: 1rem; }

.event-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 460px;
  column-gap: 3rem;
  align-items: start;
}
/* Left column: image, meta, and info stack in their own flow so its height is
   independent of the right sidebar (they no longer share grid row tracks). */
.event-main { min-width: 0; }

.event-tickets {
  /* Not sticky: the Ludus embed self-resizes and can get very tall, and a
     sticky element taller than the viewport pins its bottom out of view. */
  min-width: 0;
  /* Pull the column up so it sits closer to the title row, not below the
     image's top margin. */
  margin-top: -5rem;
}

.main img {
  display: block;
  width: 100%;
  height: auto;
  margin: 1.25rem 0;
}

/* .meta base (border + margin), .meta-item, .meta-label, and .meta-cta
   come from style.css; this page arranges cells into bordered rows. */
.meta-row {
  display: grid;
  align-items: stretch;
}
.meta-row + .meta-row { border-top: 2px solid #000; }
.meta-row--primary { grid-template-columns: 1fr 1fr; }
/* Access cell: text on the left, accessibility icon pinned to the right. */
.meta-item--access {
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}
.meta-item--access .meta-item-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.access-link { display: inline-flex; flex-shrink: 0; transition: opacity 120ms ease; }
.access-link:hover { opacity: 0.6; }
.accessibility-icon { display: block; }
/* This page's meta cells are dense — slightly smaller values than the
   style.css default. */
.meta-value { font-size: 1rem; }
/* Meta grid text is fully black here (labels default to the muted grey from
   style.css; values are already --ink). */
.meta-label { color: var(--ink); }

/* .section-title comes from style.css (its 3rem margin-top matches this page). */

/* Creative team credits: the bordered role/name grid (.event-credits) is
   shared with past-event.php and lives in style.css. */

/* Marketing image gallery (event page, above Content Transparency).
   CSS columns keep each image at its native aspect ratio (masonry-style). */
.marketing-gallery {
  column-count: 2;
  column-gap: 0.6rem;
  margin: 1rem 0 0;
}
.marketing-gallery img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 0 0.6rem;
  break-inside: avoid;
  cursor: zoom-in;
}
/* Marketing video: responsive 16:9 chromeless Vimeo background embed. */
.marketing-video {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  margin: 0.6rem 0 0;
}
.marketing-video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
@media (max-width: 600px) {
  .marketing-gallery { column-count: 1; }
}

/* Lightbox styles (.lightbox, .lb-*) are shared with past-event.php and live
   in style.css. */

/* Header above the Ludus ticket embed. */
.tickets-title {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 1.6rem;
  line-height: 1.25;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0 0 1rem;
  text-align: center;
}
.tickets-arrow { font-weight: 700; }
/* When the visitor drills into a show, JS turns this header into a clickable
   "← Other Showtimes" control (reloads the embed to the full list). */
.tickets-title--back { cursor: pointer; }
.tickets-title--back:hover { text-decoration: underline; }

.teaser {
  font-style: italic;
  font-size: 1.25rem;
  line-height: 1.5;
  color: var(--ink);
  border-left: 4px solid #000;
  padding-left: 1.25rem;
  margin: 1.5rem 0;
}

.credit a { color: var(--ink); text-decoration: underline; }
.credit a:hover { color: var(--ink-muted); }

.ludus-embed {
  display: block;
  width: 100%;
  min-height: 1060px;
  border: 0;
  background: transparent;
}

/* "Also playing" — other current shows, listed under the ticket embed in the
   right column. Hidden on mobile (see the max-width block below). */
.more-title {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 1.3rem;
  line-height: 1.25;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--ink);
  text-align: center;
  /* Inset each side so the list aligns with the Ludus widget's content
     (which sits inset from the iframe edge). */
  margin: 2.5rem 18px 1rem;
}
.more-shows {
  list-style: none;
  margin: 0 18px;
  padding: 0;
  border-top: 2px solid #000;
}
.more-show-link {
  display: grid;
  grid-template-columns: 96px 1fr auto;
  gap: 0.9rem;
  align-items: center;
  padding: 0.7rem 0;
  border-bottom: 1.5px solid #000;
  text-decoration: none !important;
}
.more-shows .more-show-img {
  display: block;
  width: 96px;
  height: 48px;
  object-fit: cover;
  margin: 0;
}
.more-show-text { display: flex; flex-direction: column; min-width: 0; }
.more-show-arrow {
  font-family: var(--font-mono);
  font-size: 1.15rem;
  color: var(--ink);
  flex-shrink: 0;
}
.more-show-link:hover .more-show-title {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.15em;
}
.more-show-title {
  font-family: var(--font-mono);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 1.05rem;
  line-height: 1.15;
  color: var(--ink);
}
.more-show-date {
  font-family: var(--font-text);
  font-size: 0.9rem;
  color: var(--ink-muted);
  margin-top: 0.2rem;
}

@media (max-width: 900px) {
  .event-grid {
    grid-template-columns: 1fr;
    row-gap: 1.5rem;
    column-gap: 0;
  }
  /* Promote the left column's children into the single-column grid so tickets
     can slot between meta and info: image → meta → tickets → info. */
  .event-main { display: contents; }
  .event-image { order: 1; }
  .event-grid .meta { order: 2; }
  .event-tickets {
    order: 3;
    position: static;
    margin-top: 0;
  }
  .event-info { order: 4; }
  /* The "TICKETS ↓" header (and its "← Other Showtimes" back state) stays
     visible at every breakpoint, above the inline embed. */
  /* "Also playing" is a right-column sidebar feature — hide it entirely on
     mobile. */
  .more-title, .more-shows { display: none; }
}

/* Content-transparency spoilers: comma-separated plain text. Each value is
   blurred on its own and only un-blurs while hovered (or tapped / focused), so
   the rest stay hidden. */
.spoiler-text {
  display: inline-block;
  cursor: pointer;
  filter: blur(5px);
  transition: filter 0.15s ease;
}
.spoiler-text:hover,
.spoiler-text:focus {
  filter: none;
}

/* Vertical rhythm for the rich-text body (writer output) rendered into
   .event-info: paragraphs, headings, lists, quotes, media. The :not(.section-title)
   guard keeps the "Content Transparency" / "About the Creators" headings on their
   own larger margin (see .section-title above). */
.event-info > *:first-child { margin-top: 0; }
.event-info p {
  margin: 0 0 1.1rem;
  line-height: 1.6;
}
.event-info h2:not(.section-title),
.event-info h3,
.event-info h4 {
  margin: 2.25rem 0 0.9rem;
  line-height: 1.25;
}
.event-info ol {
  margin: 0 0 1.1rem;
  padding-left: 1.5rem;
}
.event-info li { margin-bottom: 0.35rem; }
.event-info blockquote {
  margin: 1.75rem 0;
  padding-left: 1.25rem;
  border-left: 3px solid #000;
  font-style: italic;
}
.event-info img,
.event-info figure,
.event-info hr { margin: 1.75rem 0; }
.event-info .credit { margin-top: 0.25rem; }

/* Body lists use the same em-dash bullets as the notes pages (.main ul in
   dept-page.css) — scoped to .event-info so nav/"Also Playing" lists are unaffected. */
.event-info ul {
  list-style: none;
  padding: 0;
  margin: 0 0 1.1rem;
}
.event-info ul li {
  position: relative;
  padding-left: 1.75em;
  line-height: 1.6;
}
/* The writer wraps each bullet's text in its own <p>; strip that <p>'s margins
   so items don't double-space and the first line sits flush with the li top. */
.event-info li > p { margin: 0; }
.event-info ul li::before {
  content: '\2014';
  /* Center the dash on the first text line (half of the 1.6 line-height) so the
     glyph — which sits high in its own line box — lines up with the row. */
  position: absolute;
  left: 0;
  top: 0.8em;
  transform: translateY(-50%);
  line-height: 1;
}