/*
 * Home — Ecstatic Dance card, right under the hero.
 *
 * In between a headline and a footnote: the festival pass is the main offer
 * and the orange "Get your ticket" in the hero is the button to press, so the
 * card stays short (it fits on screen with the section below it starting)
 * and its button is outlined. It keeps the night atmosphere of the dance: the
 * site's night teal, the photo on a side panel melting into the card, and
 * the orange price. .band .band--night already gives it the cream heading,
 * orange eyebrow and the cream outlined button.
 *
 * Kept out of style.css on purpose: this file is versioned by its own
 * modification time, so editing it reaches visitors without bumping the
 * theme version (which re-runs the theme's page setup).
 */

.hero + .dance-home { padding-top: clamp(2rem, 4vw, 3rem); }
.dance-home { padding-bottom: 0; }

.dance-strip {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  max-width: 1080px; margin-inline: auto;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
}

.dance-strip__media { position: relative; min-height: 300px; }
.dance-strip__media img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 38%;
}
.dance-strip__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent 50%, var(--teal-night) 100%);
}

.dance-strip__body { padding: clamp(1.8rem, 3.5vw, 2.6rem) clamp(1.8rem, 4vw, 3rem); }
.dance-strip__body .eyebrow { margin-bottom: .6rem; }
.dance-strip__title { font-size: clamp(1.7rem, 1.3rem + 1.4vw, 2.4rem); color: var(--cream); margin: 0 0 .6rem; }
.dance-strip__text { margin: 0 0 1rem; color: var(--peach); font-size: 1.02rem; line-height: 1.6; max-width: 54ch; }

.dance-strip__meta {
  display: flex; flex-wrap: wrap; gap: .3rem 1.2rem; margin: 0 0 1.4rem;
  font-size: .9rem; font-weight: 700; letter-spacing: .03em; color: var(--cream);
}
.dance-strip__meta > span { display: inline-flex; align-items: center; gap: .45rem; }
.dance-strip__meta .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--orange); flex: none; }

.dance-strip__buy {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 1.6rem;
  padding-top: 1.2rem; border-top: 1px solid rgba(255,206,179,.18);
}
.dance-strip__price { display: flex; flex-direction: column; align-items: flex-start; gap: .3rem; }
.dance-strip__price .amount { font-family: var(--display); font-weight: 600; font-size: 2.3rem; line-height: 1; color: var(--orange); }
.dance-strip__price .cur { font-size: 1.1rem; vertical-align: top; margin-right: .1rem; }
.dance-strip__price .when { font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--peach); }
.dance-strip__buy .btn { white-space: nowrap; }

@media (max-width: 820px) {
  .dance-strip { grid-template-columns: 1fr; }
  .dance-strip__media { min-height: 0; aspect-ratio: 16 / 8; }
  .dance-strip__media::after { background: linear-gradient(180deg, transparent 45%, var(--teal-night) 100%); }
}
@media (max-width: 480px) {
  .dance-strip__media { aspect-ratio: 16 / 9; }
  .dance-strip__buy .btn { width: 100%; justify-content: center; }
}