/* =============================================================================
   themes/synmedia.css — SYN Media case study (and the listening room)
   -----------------------------------------------------------------------------
   Art direction: "on air". An ON AIR sign whose lamp is the brand's spark,
   a dry-brush waveform, and a run sheet that lists what goes into the hour.
   The listening room uses the shared audio player (base.css 09h).
   ============================================================================= */

.onair-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 32px clamp(16px, 2.6vw, 44px); align-items: center; }
.onair-grid__id { grid-column: 1 / span 6; }
.onair-grid__sign { grid-column: 8 / span 5; display: grid; justify-items: center; gap: 26px; }
@media (max-width: 960px) { .onair-grid__id, .onair-grid__sign { grid-column: 1 / -1; justify-items: start; } }

/* The ON AIR sign — lit when it scrolls into view */
.onair-sign {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 16px;
  padding: 18px 30px;
  border: 2px solid rgba(243, 237, 226, .35);
  border-radius: 10px;
  font-size: clamp(1.4rem, 1rem + 1.6vw, 2.4rem);
  font-weight: 600;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: rgba(243, 237, 226, .4);
  transition: color .6s, border-color .6s, box-shadow .8s;
}
.onair-sign__spark { width: 26px; height: 26px; color: rgba(255, 242, 214, .25); transition: color .6s, filter .8s; }
/* The sign lights in Light; only its spark is gold (brand rule: gold belongs to the spark alone) */
.onair-sign.is-visible { color: var(--light); border-color: rgba(243, 237, 226, .7); box-shadow: 0 0 40px rgba(243, 237, 226, .12), inset 0 0 24px rgba(243, 237, 226, .06); }
.onair-sign.is-visible .onair-sign__spark { color: var(--hot-core); filter: drop-shadow(0 0 8px var(--filament-lit)); }
.onair-grid__sign .org-plate { width: 170px; }
/* The waveform: plain bars that scale on the GPU (SVG shapes would be repainted
   every frame). [data-live] pauses them whenever they are off screen. */
.wave { display: flex; align-items: center; gap: 6px; width: 100%; max-width: 520px; height: 90px; color: rgba(243, 237, 226, .8); }
.wave i { flex: 1; height: calc(var(--h) * 100%); border-radius: 99px; background: currentColor; }
@media (prefers-reduced-motion: no-preference) {
  html:not(.calm) .wave i { animation: wave-breathe 2.6s ease-in-out infinite; animation-delay: calc(var(--i) * -.17s); }
}
@keyframes wave-breathe { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(.55); } }

/* ---- The run sheet ------------------------------------------------------------ */
.runsheet { border-top: 1.5px solid var(--text); }
.runsheet li { display: grid; grid-template-columns: 4.2rem minmax(0, 1fr) minmax(0, 1.4fr); gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--rule); align-items: baseline; }
.runsheet .cue { font-size: .7rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--text-faint); }
.runsheet h3 { font-size: 1.5rem; line-height: 1.1; }
.runsheet p { color: var(--text-soft); }
@media (max-width: 700px) { .runsheet li { grid-template-columns: 3.4rem 1fr; } .runsheet p { grid-column: 2; } }

/* Show cards */
.shows { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 36px); }
@media (max-width: 1100px) { .shows { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* the Radiothon card carries the spark: it's the station's big annual moment */
.show--radiothon { border-color: rgba(255, 201, 112, .45); }
.show { border: 1px solid var(--rule-strong); padding: clamp(18px, 2.4vw, 30px); display: grid; gap: 8px; }
.show h3 { font-size: var(--fs-h3); }
@media (max-width: 700px) { .shows { grid-template-columns: 1fr; } }


/* ---- The world: SYN's charcoal and red, the studio lit for a live show -------
   Charcoal #3C3C48 and SYN red #F65A42, from the station's logo. */
.world--syn {
  --syn-red: #F65A42;
  background:
    radial-gradient(48vw 56vh at 76% 40%, rgba(246, 90, 66, .3), transparent 70%),
    radial-gradient(40vw 40vh at 0% 0%, rgba(246, 90, 66, .1), transparent 70%),
    linear-gradient(170deg, #34343F, #1C1C24 75%);
}
.world--syn .onair-sign.is-visible {
  color: #fff;
  border-color: var(--syn-red);
  background: rgba(246, 90, 66, .14);
  box-shadow: 0 0 44px rgba(246, 90, 66, .45), inset 0 0 26px rgba(246, 90, 66, .25);
}
.world--syn .wave { color: inherit; }
.world--syn .wave i { background: linear-gradient(180deg, #fff, var(--syn-red) 50%, #fff); }