/* ==========================================================================
   CALIGOBI 2026 — lineup.css
   ========================================================================== */

.lineup-title { margin-bottom: 1.4rem; }
.lineup-title em {
  font-style: normal;
  color: var(--accent);
}

/* --------------------------------------------------------------------------
   Filter bar
   -------------------------------------------------------------------------- */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

.filter-btn {
  appearance: none;
  background: transparent;
  border: 1px solid rgba(240, 221, 162, 0.28);
  border-radius: 100px;
  color: var(--ink-invert);
  padding: 0.65em 1.5em;
  font-family: var(--font-label);
  font-size: 0.95rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  line-height: 1;
  cursor: pointer;
  transition: background 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease);
}

.filter-btn:hover { border-color: var(--gold-400); color: var(--accent); }

.filter-btn.is-active {
  background: var(--gold-400);
  border-color: var(--gold-400);
  color: var(--ink);
}

/* --------------------------------------------------------------------------
   Acts grid
   -------------------------------------------------------------------------- */
.acts-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(0.75rem, 1.4vw, 1.25rem);
}

.act-card .card-media { aspect-ratio: 3 / 4; }

/* Filtering: hidden cards collapse out of the grid */
.act-card.is-hidden { display: none; }

.act-card {
  animation: act-in 0.5s var(--ease) both;
}

@keyframes act-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

@media (max-width: 1040px) { .acts-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px)  { .acts-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) {
  .acts-grid { grid-template-columns: 1fr; }
  .card-note { max-height: 7rem; opacity: 1; margin-top: 0.3rem; }
}

/* --------------------------------------------------------------------------
   Festival schedule
   Built as markup rather than the poster image: the poster's type is
   unreadable at phone width, and text can be searched, read aloud and edited.
   -------------------------------------------------------------------------- */
/* Friday and Sunday stack in the left column, Saturday takes the right. It is
   longer than the other two together, so the left column runs out first and
   leaves open ground under Sunday — that is the intended look. */
.sched-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-areas:
    "fri sat"
    "sun sat";
  /* Without this the grid shares Saturday's extra height across both rows and
     opens a gap between Friday and Sunday. Row one hugs Friday. */
  grid-template-rows: auto 1fr;
  gap: clamp(1.25rem, 2.6vw, 2rem);
  align-items: start;
}
.sched-day--fri { grid-area: fri; }
.sched-day--sat { grid-area: sat; }
.sched-day--sun { grid-area: sun; }

.sched-day {
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: rgba(255, 255, 255, 0.5);
}

.sched-dayname {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3.4vw, 2.6rem);
  line-height: 1.1;
  margin: 0 0 0.75rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--line);
}
.sched-dayname span {
  display: block;
  margin-top: 0.4rem;
  font-family: var(--font-label);
  font-size: 0.8rem;
  line-height: 1;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--accent);
}

.sched-item {
  display: grid;
  grid-template-columns: 5.75rem minmax(0, 1fr);
  gap: 1rem;
  padding: 0.9rem 0;
}
.sched-item + .sched-item { border-top: 1px dashed rgba(11, 21, 38, 0.14); }

.sched-time {
  padding-top: 0.2rem;
  font-family: var(--font-label);
  font-size: 0.86rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--accent);
}

.sched-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.02rem, 1.4vw, 1.2rem);
  line-height: 1.25;
  color: var(--ink);
}

.sched-detail {
  margin: 0.25rem 0 0;
  font-size: 0.96rem;
  line-height: 1.5;
  color: var(--ink-soft);
}

.sched-acts { margin-top: 0.5rem; }
.sched-acts li {
  position: relative;
  padding-left: 1rem;
  font-size: 0.96rem;
  line-height: 1.5;
  color: var(--ink);
}
.sched-acts li + li { margin-top: 0.15rem; }
.sched-acts li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.64em;
  width: 5px;
  height: 5px;
  background: var(--accent);
  opacity: 0.75;
  transform: rotate(45deg);
}
.sched-by { color: var(--ink-soft); }

.sched-daynote {
  margin: 1.1rem 0 0;
  padding-top: 0.9rem;
  border-top: 1px solid var(--line);
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--ink-soft);
}

.sched-foot {
  margin-top: clamp(2rem, 4vw, 3rem);
  text-align: center;
}
.sched-note {
  margin: 0 0 1.5rem;
  font-family: var(--font-label);
  font-size: 0.9rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--heading);
}

@media (max-width: 860px) {
  .sched-grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "fri" "sat" "sun";
    grid-template-rows: none;
  }
}
@media (max-width: 420px) {
  .sched-item { grid-template-columns: 4.9rem minmax(0, 1fr); gap: 0.75rem; }
}

/* --------------------------------------------------------------------------
   Festival experiences & food vendors
   -------------------------------------------------------------------------- */
.extras { overflow: hidden; }

.extras-rule {
  position: absolute;
  top: 0;
  left: 0; right: 0;
  --orn-color: var(--accent);
  opacity: 0.55;
}

.extras-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2.5rem, 6vw, 5rem);
}

.extras-title {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3vw, 2.3rem);
  line-height: 1.1;
  margin: 0 0 1.5rem;
}

.extras-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}
.extras-tags li {
  padding: 0.55em 1em;
  font-family: var(--font-label);
  font-size: 0.8rem;
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  border: 1px solid rgba(11, 21, 38, 0.18);
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.6);
}

.vendor-list li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--line);
}
.vendor-list li:first-child { border-top: 1px solid var(--line); }
.vendor-name {
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 1.5vw, 1.25rem);
  line-height: 1.2;
  color: var(--ink);
}
.vendor-type {
  font-size: 0.96rem;
  text-align: right;
  color: var(--ink-soft);
}

@media (max-width: 860px) {
  .extras-grid { grid-template-columns: minmax(0, 1fr); }
}

/* --------------------------------------------------------------------------
   Closing CTA
   -------------------------------------------------------------------------- */
.lineup-cta { overflow: hidden; }

.lineup-cta__line {
  position: absolute;
  left: 0; right: 0;
  top: 0;
  --orn-color: var(--accent);
  opacity: 0.8;
}

.lineup-cta .wrap { position: relative; z-index: 1; }
.lineup-cta h2 { margin-bottom: 1.25rem; }