/* Art Time — homepage. Tokens, buttons, header and footer come from shared.css. */
[hidden] { display: none !important; }
.home-page main { display: block; }
.home-wrap { box-sizing: border-box; width: var(--at-wrap); margin-inline: auto; }
.home-page main img { max-width: 100%; height: auto; }
.home-page main :is(h1, h2, h3) { text-wrap: balance; }
.home-page main .next-date__copy h2 { text-wrap: wrap; }

/* Ticket stub: the day, its month and weekday. */
.stub { display: inline-flex; align-items: center; gap: 12px; }
.stub-day { font: 700 var(--at-fs-heading)/.9 var(--at-serif); letter-spacing: -.02em; color: var(--at-crimson); font-variant-numeric: lining-nums; }
.stub-when { display: flex; flex-direction: column; font: 600 var(--at-fs-small)/1.3 var(--at-sans); }
.stub-on-night .stub-day { color: var(--at-gold); }

/* Hero: the first chapter, an espresso field. */
.home-hero {
  /* The brown of the printed flyer's footer band. */
  --home-stage: #271f19; --home-stage-2: #3a2e25; --home-stage-3: #4a3b30;
  position: relative; overflow: hidden; padding: 72px 0 120px; background: var(--home-stage); color: var(--at-on-night);
}
.home-hero > .home-wrap { position: relative; z-index: 1; }
.home-visually-hidden { position: absolute; top: 0; left: 0; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.showcase { position: relative; --showcase-gap: 56px; }
.showcase:focus-visible { outline: 3px solid var(--at-gold); outline-offset: 8px; }
.showcase-track { display: grid; }
.showcase-loading { margin: 0; padding: 120px 0; color: var(--at-on-night-2); }
.showcase-slide {
  grid-area: 1 / 1; display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
  gap: var(--showcase-gap); align-items: stretch;
  opacity: 0; visibility: hidden; transition: opacity .6s var(--at-ease), visibility 0s linear .6s;
}
.showcase-slide.is-active { opacity: 1; visibility: visible; transition: opacity .6s var(--at-ease); }
.showcase-art { display: block; align-self: start; width: 100%; aspect-ratio: 3 / 2; overflow: hidden; background: var(--home-stage-2); }
.showcase-art img { display: block; width: 100%; height: 100%; object-fit: contain; transform: scale(1.04); transition: transform 1.4s var(--at-ease); }
.showcase-slide.is-active .showcase-art img { transform: none; }
.showcase-copy { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; padding-bottom: 88px; }
.showcase-copy h2 { margin: 0 0 20px; font: 700 var(--at-fs-heading)/1.04 var(--at-serif); letter-spacing: -.02em; }
.showcase-description { max-width: 46ch; margin: 0 0 28px; }
.showcase-when { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 24px; margin: 0; }
.showcase-hours, .show-card-hours, .next-date__when p { font: 700 var(--at-fs-lead)/1.2 var(--at-sans); font-variant-numeric: tabular-nums; }
.showcase-venue { margin: 12px 0 32px; font-size: var(--at-fs-small); color: var(--at-on-night-2); }
.showcase-link { margin-top: auto; }
.showcase-controls {
  position: absolute; bottom: 0; left: calc((100% - var(--showcase-gap)) * 8 / 12 + var(--showcase-gap));
  display: flex; align-items: center; gap: 12px;
}
.showcase-control {
  display: inline-flex; align-items: center; justify-content: center; width: 50px; height: 50px; padding: 0;
  border: 0; border-radius: var(--at-radius); background: var(--home-stage-2); color: var(--at-on-night); cursor: pointer;
  transition: background-color .2s var(--at-ease), color .2s var(--at-ease), transform .2s var(--at-ease);
}
.showcase-control:hover { background: var(--at-gold); color: var(--at-ink); }
.showcase-control:active { transform: scale(.94); }
.showcase-control:disabled { opacity: .4; cursor: default; }
.showcase-status { margin: 0 0 0 8px; font: 600 var(--at-fs-small)/1 var(--at-sans); color: var(--at-on-night-2); font-variant-numeric: tabular-nums; }

.showcase-minis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 48px; }
.showcase-mini {
  display: grid; grid-template-columns: 96px minmax(0, 1fr); align-items: center; gap: 16px; min-width: 0;
  padding: 10px 16px 10px 10px; border: 0; border-radius: var(--at-radius);
  background: var(--home-stage-2); color: var(--at-on-night); text-align: left; cursor: pointer;
  transition: background-color .2s var(--at-ease), transform .2s var(--at-ease);
}
.showcase-mini:hover { background: var(--home-stage-3); }
.showcase-mini:active { transform: scale(.98); }
.showcase-mini img { display: block; width: 96px; aspect-ratio: 3 / 2; object-fit: contain; }
.showcase-mini-copy { display: grid; gap: 2px; min-width: 0; }
.showcase-mini-copy strong { font: 700 var(--at-fs-small)/1.3 var(--at-sans); }
.showcase-mini-copy small { font: 400 var(--at-fs-small)/1.3 var(--at-sans); color: var(--at-on-night-2); }

/* Search: a champagne panel that straddles the edge of the hero. */
.home-search { position: relative; margin-top: -64px; }
.home-anchor { position: absolute; top: calc(-1 * var(--at-header-h) - 24px); }
.search-panel {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) minmax(0, .9fr) auto; align-items: end;
  gap: 20px 24px; padding: 32px 36px; border-radius: var(--at-radius); background: var(--at-surface);
}
.search-panel h2 { align-self: center; margin: 0; font: 700 var(--at-fs-lead)/1.2 var(--at-serif); }
.search-field span { display: block; margin-bottom: 8px; font: 600 var(--at-fs-small)/1.3 var(--at-sans); }
.search-field select, .newsletter-entry input {
  box-sizing: border-box; width: 100%; min-height: 50px; border-radius: var(--at-radius);
  font: 400 var(--at-fs-body)/1.3 var(--at-sans);
}
.search-field select {
  padding: 0 44px 0 16px; border: 1px solid #cbbda9; background: var(--at-white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='m1 1 6 6 6-6' fill='none' stroke='%231a1715' stroke-width='1.8'/%3E%3C/svg%3E") no-repeat right 16px center;
  color: var(--at-ink); appearance: none; cursor: pointer; transition: border-color .2s var(--at-ease);
}
.search-field select:hover { border-color: var(--at-ink); }
.search-actions { display: flex; align-items: center; gap: 8px 20px; }
.search-reset {
  padding: 12px 2px; border: 0; background: none; color: var(--at-ink); cursor: pointer;
  font: 600 var(--at-fs-small)/1.3 var(--at-sans); text-decoration: underline; text-underline-offset: 4px;
  transition: color .2s var(--at-ease);
}
.search-reset:hover { color: var(--at-crimson); }

/* The next date: one stub set large. */
.next-date { display: grid; grid-template-columns: auto minmax(0, 1fr) calc((100% - 56px) * 4 / 12); align-items: center; gap: 24px 32px; padding-top: 96px; }
.next-date__stub { margin: 0; }
.next-date__stub .stub-day { font-size: var(--at-fs-display); }
.next-date__copy h2 { margin: 0 0 8px; font: 700 var(--at-fs-heading)/1.05 var(--at-serif); letter-spacing: -.02em; }
.next-date__copy p { margin: 0; color: var(--at-ink-2); }
.next-date__when { display: flex; align-items: center; flex-wrap: wrap; gap: 16px 28px; }
.next-date__when p { margin: 0; white-space: nowrap; }

/* Afisz: 2 + 3 posters, unboxed, each with its stub. */
.home-current { padding: 120px 0 var(--at-section); }
.current-heading { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); align-items: end; gap: 16px 56px; }
.current-heading h2 { margin: 0; font: 700 var(--at-fs-heading)/1.05 var(--at-serif); letter-spacing: -.02em; }
.current-heading p { max-width: 44ch; margin: 0; }
.results-heading { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 8px 24px; margin: 40px 0 32px; }
.results-heading p { margin: 0; font-size: var(--at-fs-small); color: var(--at-ink-2); }
.results-heading a, .show-card-more-link {
  display: inline-flex; align-items: center; gap: 8px; color: var(--at-ink);
  font: 700 var(--at-fs-small)/1.3 var(--at-sans); text-decoration: none;
}
.results-heading a:hover, .show-card-more-link:hover { color: var(--at-crimson); text-decoration: underline; text-underline-offset: 4px; }
.repertoire-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 64px 32px; }
.spectacle-card { grid-column: span 2; display: flex; flex-direction: column; min-width: 0; }
@media (min-width: 901px) {
  .repertoire-grid[data-count="5"] .spectacle-card:nth-child(-n+2),
  .repertoire-grid[data-count="4"] .spectacle-card,
  .repertoire-grid[data-count="2"] .spectacle-card { grid-column: span 3; }
  .repertoire-grid[data-count="1"] .spectacle-card { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 56px; }
  .repertoire-grid[data-count="1"] .show-card-copy { padding-top: 0; }
}
.show-card-art { display: block; aspect-ratio: 3 / 2; overflow: hidden; background: var(--at-surface); }
.show-card-art img { display: block; width: 100%; height: 100%; object-fit: contain; }
.show-card-copy { display: flex; flex-direction: column; flex: 1; padding-top: 24px; }
.show-card-date { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 20px; margin: 0 0 16px; font-size: var(--at-fs-small); }
.show-card-more { flex-basis: 100%; color: var(--at-ink-2); }
.spectacle-card h3 { margin: 0 0 16px; font: 700 var(--at-fs-lead)/1.2 var(--at-serif); }
.spectacle-card h3 a { color: var(--at-ink); text-decoration: none; }
.spectacle-card h3 a:hover { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 2px; }
.show-card-description { max-width: 54ch; margin: 0 0 12px; }
.show-card-venue { margin: 0 0 28px; font-size: var(--at-fs-small); color: var(--at-ink-2); }
.show-card-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 28px; margin-top: auto; }
.empty-results { padding: 56px 48px; border-radius: var(--at-radius); background: var(--at-surface); }
.empty-results h3 { margin: 0 0 8px; font: 700 var(--at-fs-lead)/1.2 var(--at-serif); }
.empty-results p { margin: 0 0 24px; }
.data-note { margin: 24px 0 0; font-weight: 600; color: var(--at-crimson); }

/* Newsletter: the dark closer before the footer; copy and form centred on one axis. */
.newsletter { padding: var(--at-section) 0; background: var(--at-night); color: var(--at-on-night); }
.newsletter__inner { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); align-items: center; gap: 48px 56px; }
.newsletter-copy h2 { max-width: 18ch; margin: 0 0 24px; font: 700 var(--at-fs-heading)/1.06 var(--at-serif); letter-spacing: -.02em; }
.newsletter-copy p { max-width: 44ch; margin: 0; }
.newsletter-form > label[for] { display: block; margin-bottom: 10px; font: 600 var(--at-fs-small)/1.3 var(--at-sans); }
.newsletter-entry { display: flex; flex-direction: column; gap: 8px; }
.newsletter-entry input { flex: 1; min-width: 0; padding: 0 16px; border: 1px solid #6b5f55; background: var(--at-night-2); color: var(--at-on-night); }
.newsletter-entry input::placeholder { color: var(--at-on-night-2); opacity: 1; }
.newsletter-entry input:hover { border-color: var(--at-on-night-2); }
.newsletter-consent { display: flex; align-items: flex-start; gap: 12px; margin-top: 20px; font-size: var(--at-fs-small); line-height: 1.5; cursor: pointer; }
.newsletter-consent input { flex: 0 0 auto; width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--at-gold); }
.newsletter-consent a { color: var(--at-on-night); text-underline-offset: 3px; }
.newsletter-note { margin: 16px 0 0; font-weight: 600; color: var(--at-on-night); }
.newsletter-note:empty { display: none; }

/* Load and filter motion. */
@media (prefers-reduced-motion: no-preference) {
  .showcase, .showcase-minis { animation: home-rise .7s var(--at-ease) both; }
  .showcase-minis { animation-delay: 160ms; }
  .spectacle-card { animation: home-rise .6s var(--at-ease) both; animation-delay: calc(var(--card-index, 0) * 70ms); }
  .showcase-slide.is-active .showcase-copy > * { animation: home-rise .6s var(--at-ease) both; }
  .showcase-slide.is-active .showcase-copy > :nth-child(2) { animation-delay: 60ms; }
  .showcase-slide.is-active .showcase-copy > :nth-child(3) { animation-delay: 120ms; }
  .showcase-slide.is-active .showcase-copy > :nth-child(n+4) { animation-delay: 180ms; }
}
@keyframes home-rise { from { opacity: 0; transform: translateY(20px); } }

@media (max-width: 1100px) {
  .search-panel { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .search-panel h2 { grid-column: 1 / -1; }
  .search-actions { grid-column: 1 / -1; }
  .next-date { grid-template-columns: auto minmax(0, 1fr); }
  .next-date__when { grid-column: 2; }
  .showcase-minis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .showcase-slide { grid-template-columns: 1fr; gap: 32px; }
  .showcase-copy { padding-bottom: 0; }
  .showcase-link { margin-top: 0; }
  .showcase-controls { position: static; margin-top: 32px; }
  .current-heading, .newsletter__inner { grid-template-columns: 1fr; }
  .repertoire-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px 24px; }
  .repertoire-grid[data-count="5"] .spectacle-card:first-child,
  .repertoire-grid[data-count="3"] .spectacle-card:first-child,
  .repertoire-grid[data-count="1"] .spectacle-card { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  .home-hero { padding: 40px 0 104px; }
  .showcase { --showcase-gap: 24px; }
  .showcase-slide { gap: 24px; }
  .showcase-copy h2 { margin-bottom: 14px; }
  .showcase-description { margin-bottom: 20px; }
  .showcase-venue { margin-bottom: 24px; }
  .showcase-link { align-self: stretch; }
  .showcase-minis { grid-template-columns: 1fr; gap: 8px; margin-top: 32px; }
  .showcase-mini { grid-template-columns: 72px minmax(0, 1fr); padding: 8px 12px 8px 8px; }
  .showcase-mini img { width: 72px; }
  .home-search { margin-top: -56px; }
  .search-panel { grid-template-columns: 1fr; padding: 24px 20px; }
  .search-actions { justify-content: space-between; }
  .search-actions .at-button { flex: 1; }
  .next-date { grid-template-columns: 1fr; gap: 16px; padding-top: 64px; }
  .next-date__when { grid-column: auto; flex-direction: column; align-items: stretch; gap: 16px; }
  .home-current { padding-top: 96px; }
  .results-heading { margin: 32px 0 24px; }
  .repertoire-grid { grid-template-columns: 1fr; gap: 56px; }
  .repertoire-grid[data-count] .spectacle-card { grid-column: auto; }
  .show-card-actions .at-button { flex: 1 1 auto; }
  .empty-results { padding: 40px 20px; }
}