/* Per-event detail page (/events/<slug>) — editorial hero + asymmetric gallery. */

.event-detail { background: var(--ink); color: var(--cream); min-height: 100vh; }

/* Hero ----------------------------------------------------------------- */
.event-hero { position: relative; min-height: 88vh; min-height: 88dvh; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; padding: 8rem 2rem 4rem; }
.event-hero__bg { position: absolute; inset: 0; background: var(--ink); z-index: 0; }
.event-hero__bg img { width: 100%; height: 100%; object-fit: cover; opacity: 0; animation: heroPhotoIn 1.1s 0.1s var(--ease-out) forwards; will-change: opacity; }
.event-hero__bg--empty { background: linear-gradient(180deg, var(--ash), var(--ink)); }
.event-hero__scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.15) 35%, rgba(0,0,0,0.85) 100%); z-index: 1; }
.event-hero__content { position: relative; z-index: 3; max-width: var(--maxw-page); margin: 0 auto; width: 100%; display: grid; gap: 1rem; }
.event-hero__back { display: inline-flex; width: max-content; padding: 0.5rem 0; color: var(--cream); opacity: 0.7; text-decoration: none; letter-spacing: var(--tracking-mono); transition: opacity 200ms var(--ease-out); margin-bottom: 1.5rem; }
.event-hero__back:hover, .event-hero__back:focus-visible { opacity: 1; }
.event-hero__date { font-family: var(--font-display); font-size: clamp(4.5rem, 13vw, 11rem); line-height: 0.85; letter-spacing: var(--tracking-display); color: var(--cream); }
.event-hero__location { font-family: var(--font-editorial); font-variation-settings: "opsz" 144, "wght" 400, "ital" 1; font-size: clamp(1.75rem, 4.5vw, 3.5rem); line-height: 1; margin: 0; color: var(--cream); font-style: italic; }
.event-hero__lineup { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.75rem 1rem; margin-top: 1.5rem; }
.event-hero__lineup-label { color: var(--cream-dim); letter-spacing: var(--tracking-mono); font-size: 0.75rem; }
.event-hero__lineup-names { font-family: var(--font-mono); font-size: clamp(0.875rem, 1.4vw, 1.0625rem); color: var(--cream); letter-spacing: 0.05em; }
.event-hero__lineup-names .dot { display: inline-block; padding: 0 0.25rem; color: var(--ember); }

@keyframes heroPhotoIn { from { opacity: 0; } to { opacity: 0.7; } }

@media (prefers-reduced-motion: reduce) {
  .event-hero__bg img { animation: none; opacity: 0.7; }
}

/* Gallery -------------------------------------------------------------- */
.event-gallery { max-width: var(--maxw-page); margin: 0 auto; padding: 5rem 2rem 6rem; }
.event-gallery__head { display: grid; grid-template-columns: auto 1fr auto; align-items: baseline; gap: 1.25rem; margin-bottom: 2rem; }
.event-gallery__head .rule { display: block; height: 1px; background: var(--smoke); width: 4rem; }
.event-gallery__heading { font-family: var(--font-display); font-size: clamp(1.75rem, 4vw, 3rem); letter-spacing: var(--tracking-display); margin: 0; }
.event-gallery__count { color: var(--cream-dim); letter-spacing: var(--tracking-mono); }

.gallery-grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }
.gallery-grid__item { position: relative; }
.gallery-grid__btn { display: block; width: 100%; padding: 0; margin: 0; border: 0; background: transparent; cursor: zoom-in; overflow: hidden; aspect-ratio: 3 / 2; }
.gallery-grid__btn:focus-visible { outline: 2px solid var(--ember); outline-offset: 4px; }
.gallery-grid__btn img { width: 100%; height: 100%; object-fit: cover; object-position: var(--obj-pos, center); filter: grayscale(1) contrast(1.05); transition: filter 320ms var(--ease-out), transform 480ms var(--ease-out); will-change: transform, filter; }
.gallery-grid__btn:hover img, .gallery-grid__btn:focus-visible img { filter: grayscale(0) contrast(1); transform: scale(1.03); }

@media (min-width: 720px) {
  .gallery-grid { grid-template-columns: repeat(3, 1fr); gap: 1rem; }
  .gallery-grid__item:nth-child(7n+1) { grid-column: span 2; }
  .gallery-grid__item:nth-child(7n+1) .gallery-grid__btn { aspect-ratio: 16 / 10; }
}
@media (min-width: 1100px) {
  .gallery-grid { grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
}

/* Empty state ---------------------------------------------------------- */
.event-empty { min-height: 70vh; display: grid; place-content: center; gap: 1.5rem; padding: 2rem; text-align: center; }
.event-empty__heading { font-family: var(--font-display); font-size: clamp(2.5rem, 6vw, 4.5rem); letter-spacing: var(--tracking-display); margin: 0; }

@media (max-width: 720px) {
  .event-hero { padding: 6rem 1.25rem 3rem; min-height: 78vh; }
  .event-hero__date { font-size: clamp(3.5rem, 18vw, 7rem); }
  .event-gallery { padding: 3.5rem 1.25rem 4rem; }
  .event-gallery__head { grid-template-columns: 1fr auto; }
  .event-gallery__head .rule { display: none; }
}

/* Detail-page nav variant: cream over dark hero, no transparent background */
.nav--detail { background: linear-gradient(180deg, rgba(0,0,0,0.55), rgba(0,0,0,0)); }