/* Broadway Kids Studio — production cards
   Type deviates from Brand Guide Rev 1 by decision: Poppins + JetBrains Mono
   replace Big Shoulders Stencil / Inter / Caveat. Stencil faces lose legibility
   below ~18px, which is where most card type lives.

   Color follows the guide with two deliberate exceptions:
   1. CTA text is Curtain Black, not Pure White. White on Signal Orange
      measures 2.84:1 and fails WCAG AA; black measures 6.97:1.
   2. Signal Yellow (#FFB000) marks auditioned productions. Same hue family
      as the orange, 9.88:1 on the card surface.

   Cards are divided into six slots: poster, badge, head, facts, flow, CTA.
   An earlier subgrid version aligned those slots across a row; it was removed
   because it opened a visible gap under the class card's shorter title. The
   slot classes remain because they carry the vertical rhythm, and because
   .bks-slot--cta uses margin-top:auto to pin the button to the card floor
   regardless of how much content sits above it.

   Schedules render as a one-line summary with the full date list collapsed
   behind a <details>. The printable sheet at /productions/{slug}/schedule/
   reuses this same markup with its own inline stylesheet, rendered open.

   Selectors are scoped under .bks-card so Divi's theme rules
   (e.g. #main-content h3, .et_pb_text_inner ul) don't win on specificity. */

.bks-grid,
.bks-card {
  --bks-orange:     #FF6C00;
  --bks-yellow:     #FFB000;
  --bks-bg:         #0A0A0A;
  /* Surface sits 1.28:1 above the #0A0A0A page. #161616 measured 1.09:1,
     which is close enough to invisible that the card edge did all the work.
     Border must stay above surface or the internal rules vanish with it.
     Stronger option: surface #2A2A2A + border #3E3E3E (1.38:1). */
  --bks-surface:    #242424;
  --bks-border:     #383838;
  --bks-text-2:     #A0A0A0;
  --bks-text-1:     #F2F2F0;

  /* Light-card variant: set all three together.
       --bks-card-bg:     #FFFFFF;
       --bks-card-text:   #1A1A1A;
       --bks-card-border: #EAEAEA;
     Every rule below reads from these, so the flip is complete. */
  --bks-card-bg:     var(--bks-surface);
  --bks-card-text:   var(--bks-text-1);
  --bks-card-border: var(--bks-border);

  /* Swap --bks-font-body to 'Inter', system-ui, sans-serif if long
     descriptions read too loose. Display and mono stay as-is. */
  --bks-font-display: 'Poppins', system-ui, sans-serif;
  --bks-font-body:    'Poppins', system-ui, sans-serif;
  --bks-font-mono:    'JetBrains Mono', ui-monospace, monospace;

  --bks-card-max: 560px;
}

/* ---------- Layout: shared ---------- */

.bks-grid { box-sizing: border-box; }

.bks-card .bks-card-body {
  display: flex;
  flex-direction: column;
  padding: 1.6rem 1.7rem 1.9rem;
}

/* ---------- Layout: grid (default) ---------- */

.bks-grid--grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  column-gap: 2rem;
  row-gap: 2.5rem;
  align-items: start;
}

.bks-grid--grid > .bks-card { max-width: var(--bks-card-max); }

/* ---------- Layout: rail (opt-in) ---------- */

.bks-grid--rail {
  display: flex;
  gap: 1.5rem;
  align-items: start;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-left: 0.25rem;
  padding: 0.25rem 0 1.25rem;
  scrollbar-color: var(--bks-border) transparent;
}

.bks-grid--rail > .bks-card {
  flex: 0 0 min(90vw, var(--bks-card-max));
  scroll-snap-align: start;
}

.bks-grid--rail:focus-visible {
  outline: 2px solid var(--bks-orange);
  outline-offset: 4px;
}

.bks-grid--rail::-webkit-scrollbar { height: 8px; }
.bks-grid--rail::-webkit-scrollbar-track { background: transparent; }
.bks-grid--rail::-webkit-scrollbar-thumb {
  background: var(--bks-border);
  border-radius: 999px;
}

@media (prefers-reduced-motion: reduce) {
  .bks-grid--rail { scroll-snap-type: none; }
}

/* ---------- Card ---------- */

.bks-card,
.bks-card * { box-sizing: border-box; }

.bks-card {
  font-family: var(--bks-font-body);
  line-height: 1.6;
  background: var(--bks-card-bg);
  color: var(--bks-card-text);
  border: 1px solid var(--bks-card-border);
  border-radius: 14px;
  overflow: hidden;
}

/* ---------- Slots ---------- */

.bks-card .bks-slot { min-width: 0; }

.bks-card .bks-slot--badge { padding-bottom: 0.9rem; }
.bks-card .bks-slot--head  { padding-bottom: 1.1rem; }
.bks-card .bks-slot--facts { padding-bottom: 1.4rem; }
.bks-card .bks-slot--flow  { padding-bottom: 1.5rem; }
.bks-card .bks-slot--cta   { margin-top: auto; }

/* ---------- Poster ---------- */

.bks-card .bks-poster {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--bks-bg);
  border-bottom: 1px solid var(--bks-card-border);
  line-height: 0;
}

.bks-card .bks-poster-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;   /* whole poster always visible; letterboxes on black */
}

.bks-card .bks-poster-ph {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background:
    repeating-linear-gradient(45deg,
      #1C1C1C 0 10px,
      #202020 10px 20px);
  color: var(--bks-text-2);
  font-family: var(--bks-font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.4;
}

/* ---------- Badge ---------- */

.bks-card .bks-badge {
  display: inline-block;
  font-family: var(--bks-font-mono);
  font-weight: 500;
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bks-orange);
  border: 1px solid var(--bks-orange);
  border-radius: 999px;
  padding: 0.3rem 0.75rem;
}

.bks-card--audition .bks-badge {
  color: var(--bks-yellow);
  border-color: var(--bks-yellow);
}

/* ---------- Head ---------- */

.bks-card .bks-title {
  font-family: var(--bks-font-display);
  font-weight: 800;
  font-size: 1.75rem;
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--bks-card-text);
}

/* If the poster art already carries the show name, uncomment to hide the
   heading visually while keeping it for screen readers and SEO.
.bks-card .bks-title { position: absolute; clip-path: inset(50%); }
*/

.bks-card .bks-subtitle {
  font-size: 0.85rem;
  line-height: 1.45;
  color: var(--bks-text-2);
  margin: 0.45rem 0 0;
}

/* ---------- Credits ---------- */

.bks-card .bks-credits {
  margin: 0.7rem 0 0;
  padding: 0;
  font-size: 0.82rem;
  line-height: 1.45;
}

.bks-card .bks-credit {
  display: flex;
  flex-wrap: wrap;
  gap: 0 0.4rem;
}

.bks-card .bks-credit + .bks-credit { margin-top: 0.15rem; }

.bks-card .bks-credits dt {
  margin: 0;
  color: var(--bks-text-2);
  font-weight: 500;
}

/* Client types "Book", renders "Book by". Delete these two lines if a
   credit ever needs different grammar. */
.bks-card .bks-credits dt::after { content: " by"; }

.bks-card .bks-credits dd {
  margin: 0;
  color: var(--bks-card-text);
  font-weight: 600;
}

.bks-card .bks-billing {
  margin: 0.7rem 0 0;
  font-size: 0.8rem;
  line-height: 1.55;
  color: var(--bks-text-2);
  text-wrap: pretty;
}

/* ---------- Facts ---------- */

.bks-card .bks-facts {
  margin: 0;
  border-top: 1px solid var(--bks-card-border);
}

.bks-card .bks-facts .bks-row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.55rem 0;
  font-size: 0.92rem;
  border-bottom: 1px solid var(--bks-card-border);
}

.bks-card .bks-facts .bks-k { color: var(--bks-text-2); font-weight: 500; }
.bks-card .bks-facts .bks-v { font-weight: 600; text-align: right; }

.bks-card .bks-fee-notice {
  margin: 0.7rem 0 0;
  font-size: 0.76rem;
  line-height: 1.5;
  color: var(--bks-text-2);
}

/* ---------- Audition callout ---------- */

.bks-card .bks-audition {
  margin: 0 0 1.3rem;
  padding: 0.9rem 1rem;
  border-left: 3px solid var(--bks-yellow);
  background: rgba(255, 176, 0, 0.09);
  border-radius: 0 8px 8px 0;
  font-size: 0.9rem;
}

.bks-card .bks-audition p { margin: 0 0 0.5rem; }
.bks-card .bks-audition p:last-child { margin-bottom: 0; }
.bks-card .bks-audition a { color: var(--bks-yellow); }

.bks-card .bks-audition-reqs p { margin: 0; }

.bks-card .bks-audition .bks-k {
  display: block;
  font-family: var(--bks-font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--bks-text-2);
  margin: 0.7rem 0 0.2rem;
}

.bks-card .bks-audition-policy {
  display: flex;
  gap: 0.6rem;
  margin-top: 0.9rem;
  padding-top: 0.8rem;
  border-top: 1px solid rgba(255, 176, 0, 0.22);
}

.bks-card .bks-audition-icon {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.05rem;
  height: 1.05rem;
  margin-top: 0.18rem;
  border: 1px solid var(--bks-yellow);
  border-radius: 999px;
  color: var(--bks-yellow);
  font-family: var(--bks-font-mono);
  font-size: 0.62rem;
  font-weight: 700;
  line-height: 1;
}

.bks-card .bks-audition-policy-body {
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--bks-text-2);
}

.bks-card .bks-audition-policy-body p { margin: 0 0 0.5rem; }
.bks-card .bks-audition-policy-body p:last-child { margin-bottom: 0; }

.bks-card .bks-audition-policy-body strong {
  color: var(--bks-card-text);
  font-weight: 600;
}

/* ---------- Description ---------- */

.bks-card .bks-desc { margin: 0 0 1.3rem; }
.bks-card .bks-desc p { margin: 0 0 0.9rem; font-size: 0.95rem; }
.bks-card .bks-desc p:last-child { margin-bottom: 0; }

.bks-card .bks-desc strong {
  color: var(--bks-card-text);
  font-weight: 600;
}

.bks-card .bks-readmore { margin-top: 0.6rem; }

.bks-card .bks-readmore summary {
  cursor: pointer;
  list-style: none;
  padding: 0.2rem 0;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--bks-orange);
}

.bks-card .bks-readmore summary::-webkit-details-marker { display: none; }
.bks-card .bks-readmore summary::after { content: " ▾"; }
.bks-card .bks-readmore[open] summary::after { content: " ▴"; }
.bks-card .bks-readmore[open] summary { margin-bottom: 0.6rem; }

.bks-card .bks-readmore summary:focus-visible {
  outline: 2px solid var(--bks-orange);
  outline-offset: 3px;
}

.bks-card--audition .bks-readmore summary { color: var(--bks-yellow); }
.bks-card--audition .bks-readmore summary:focus-visible { outline-color: var(--bks-yellow); }

/* ---------- Notes ---------- */

.bks-card .bks-notes {
  margin-top: 1.3rem;
  padding-top: 1rem;
  border-top: 1px solid var(--bks-card-border);
  font-size: 0.82rem;
  color: var(--bks-text-2);
}

.bks-card .bks-notes p { margin: 0 0 0.6rem; }
.bks-card .bks-notes p:last-child { margin-bottom: 0; }

/* ---------- Schedules ---------- */

.bks-card .bks-scheds { margin-top: 1.4rem; }

.bks-card .bks-sched {
  margin: 0;
  padding-top: 1.1rem;
  border-top: 1px solid var(--bks-card-border);
}

.bks-card .bks-sched + .bks-sched { margin-top: 1.3rem; }

.bks-card .bks-sched-title {
  font-family: var(--bks-font-display);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: -0.005em;
  margin: 0 0 0.5rem;
  color: var(--bks-card-text);
}

/* Label / value rows. A two-column grid keeps the values on a shared left
   edge so Dates, Times, and Location scan as a block rather than as prose.
   The label column is sized for "Location", the longest of the three. */

.bks-card .bks-sched-facts {
  margin: 0 0 0.7rem;
  padding: 0;
  font-size: 0.9rem;
}

.bks-card .bks-sched-fact {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr);
  gap: 0 0.9rem;
  align-items: baseline;
  padding: 0.28rem 0;
}

.bks-card .bks-sched-facts dt {
  margin: 0;
  font-family: var(--bks-font-mono);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--bks-text-2);
}

.bks-card .bks-sched-facts dd {
  margin: 0;
  line-height: 1.45;
  color: var(--bks-card-text);
  text-wrap: pretty;
}

.bks-card .bks-sched-exception {
  margin: -0.45rem 0 0.6rem;   /* pulls up under the last fact row */
  padding-left: 6.4rem;        /* aligns with the value column */
  font-size: 0.78rem;
  line-height: 1.4;
  color: var(--bks-text-2);
}

.bks-card .bks-sched-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.bks-card .bks-sched-list li { margin: 0; }

.bks-card .bks-sched-item {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.45rem 0;
  font-size: 0.9rem;
  border-bottom: 1px solid var(--bks-card-border);
}

.bks-card .bks-sched-item:last-child { border-bottom: none; }

.bks-card .bks-date {
  font-weight: 600;
  white-space: nowrap;
}

.bks-card .bks-detail { text-align: right; }

.bks-card .bks-time {
  font-family: var(--bks-font-mono);
  font-size: 0.8rem;
  color: var(--bks-text-2);
}

.bks-card .bks-venue,
.bks-card .bks-note {
  display: block;
  font-family: var(--bks-font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--bks-orange);
}

.bks-card--audition .bks-venue { color: var(--bks-yellow); }

.bks-card .bks-perf { display: block; margin-bottom: 0.3rem; }
.bks-card .bks-perf:last-child { margin-bottom: 0; }

.bks-card .bks-perf .bks-time {
  color: var(--bks-card-text);
  font-weight: 700;
  font-size: 0.85rem;
}

.bks-card .bks-call {
  display: block;
  font-family: var(--bks-font-mono);
  font-size: 0.75rem;
  color: var(--bks-text-2);
}

.bks-card .bks-showday .bks-venue { margin-top: 0.3rem; }

/* ---------- Collapsible schedules ---------- */

.bks-card .bks-more { margin-top: 0.4rem; }

.bks-card .bks-more summary {
  cursor: pointer;
  list-style: none;
  padding: 0.35rem 0;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--bks-orange);
}

.bks-card .bks-more summary::-webkit-details-marker { display: none; }
.bks-card .bks-more summary::after { content: " ▾"; }
.bks-card .bks-more[open] summary::after { content: " ▴"; }

.bks-card .bks-more summary:focus-visible {
  outline: 2px solid var(--bks-orange);
  outline-offset: 3px;
}

.bks-card--audition .bks-more summary { color: var(--bks-yellow); }
.bks-card--audition .bks-more summary:focus-visible { outline-color: var(--bks-yellow); }

/* ---------- CTA ---------- */

.bks-card .bks-cta-pill {
  display: block;
  margin: 0;
  padding: 0.9rem 1rem;
  border-radius: 999px;
  background: var(--bks-orange);
  color: var(--bks-bg);
  font-family: var(--bks-font-display);
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  transition: opacity 0.15s ease;
}

.bks-card .bks-cta-pill:hover,
.bks-card .bks-cta-pill:focus,
.bks-card .bks-cta-pill:visited {
  opacity: 0.88;
  color: var(--bks-bg);
  text-decoration: none;
}

.bks-card .bks-cta-pill:focus-visible {
  outline: 2px solid var(--bks-text-1);
  outline-offset: 3px;
}

.bks-card--audition .bks-cta-pill {
  background: var(--bks-yellow);
  color: var(--bks-bg);
}

.bks-card--audition .bks-cta-pill:hover,
.bks-card--audition .bks-cta-pill:focus,
.bks-card--audition .bks-cta-pill:visited {
  color: var(--bks-bg);
}

.bks-card .bks-cta-pending,
.bks-card .bks-cta-closed {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 3.05rem;
  margin: 0;
  padding: 0.5rem 1rem;
  border-radius: 999px;
  text-align: center;
  color: var(--bks-text-2);
}

.bks-card .bks-cta-pending {
  border: 1px dashed var(--bks-card-border);
  font-size: 0.85rem;
}

.bks-card .bks-cta-closed {
  border: 1px solid var(--bks-card-border);
  font-family: var(--bks-font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.bks-card .bks-cta-note {
  margin: 0.6rem 0 0;
  text-align: center;
  font-size: 0.75rem;
  color: var(--bks-text-2);
}

/* ---------- Printable schedule link ---------- */

/* Points at /productions/{slug}/schedule/, which renders every date open
   on a light background for printing or Save as PDF. */

.bks-card .bks-sched-print {
  display: block;
  margin: 0.75rem 0 0;
  font-family: var(--bks-font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  color: var(--bks-text-2);
  text-decoration: none;
}

.bks-card .bks-sched-print:hover,
.bks-card .bks-sched-print:focus,
.bks-card .bks-sched-print:visited {
  color: var(--bks-orange);
  text-decoration: none;
}

.bks-card--audition .bks-sched-print:hover,
.bks-card--audition .bks-sched-print:focus { color: var(--bks-yellow); }

.bks-card .bks-sched-print:focus-visible {
  outline: 2px solid var(--bks-text-1);
  outline-offset: 3px;
}

/* ---------- Past productions ---------- */

.bks-card--past { opacity: 0.72; }
.bks-card--past:hover,
.bks-card--past:focus-within { opacity: 1; }

.bks-card--past .bks-badge,
.bks-card--audition.bks-card--past .bks-badge {
  color: var(--bks-text-2);
  border-color: var(--bks-card-border);
}

.bks-card--past .bks-venue,
.bks-card--past .bks-note { color: var(--bks-text-2); }

/* ---------- Small screens ---------- */

@media (max-width: 420px) {
  .bks-card .bks-card-body { padding: 1.25rem 1.25rem 1.5rem; }

  .bks-card .bks-sched-item,
  .bks-card .bks-facts .bks-row {
    flex-direction: column;
    gap: 0.15rem;
  }

  /* Without these, a stacked row leaves the date left-aligned and the time
     floating right underneath it. */
  .bks-card .bks-detail,
  .bks-card .bks-facts .bks-v,
  .bks-card .bks-note {
    text-align: left;
  }

  .bks-card .bks-title { font-size: 1.6rem; }

  /* Stack labels above values; 5.5rem of label column is too much of a
     320px card to give away. */
  .bks-card .bks-sched-fact {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.1rem;
    padding: 0.32rem 0;
  }

  .bks-card .bks-sched-exception { padding-left: 0; }
}

/* ---------- Motion ---------- */

@media (prefers-reduced-motion: reduce) {
  .bks-card .bks-cta-pill { transition: none; }
}