/* ==========================================================================
   Home — intro copy is sticky at the top of .flow and keeps sitting there
   while the collage scrolls past; the dark section (z-index above) then
   slides over it. collage.js fades collage photos that pass under the copy
   and hides the copy once it is fully covered.
   ========================================================================== */
.flow { position: relative; }

/* Sticky copy: zero-height sticky shell, content positioned inside */
.sticky-copy {
  position: sticky;
  top: 0;
  z-index: 2;
  height: 0;
  pointer-events: none;
}
.sticky-copy__inner {
  position: absolute;
  top: calc(298 * var(--s));   /* 208 in Figma + one heading line (90), per review */
  left: 50%;
  transform: translateX(-50%);
  width: 788px;
  max-width: calc(100vw - var(--gutter) * 2);
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: auto;
  transition: opacity 0.2s var(--ease);
}
.sticky-copy.is-hidden .sticky-copy__inner { visibility: hidden; }
.sticky-copy__inner .lead {
  margin-top: calc(32 * var(--s));      /* Figma: heading 208 → 388, paragraph 420 */
}
.sticky-copy__inner .btn {
  margin-top: 32px;
}

/* Collage: 1875px tall at 1728, photos positioned in design px * --s */
.collage {
  position: relative;
  z-index: 1;
  height: calc(1875 * var(--s));
  overflow: hidden;
}
.collage__item {
  position: absolute;
  left: calc(var(--x) * var(--s));
  top: calc(var(--y) * var(--s));
  width: calc(var(--w) * var(--s));
  height: calc(var(--h) * var(--s));
  will-change: transform, opacity;
  transition: opacity 0.35s var(--ease);
}
.collage__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The dark part of the page sits above the sticky copy */
.dark-flow {
  position: relative;
  z-index: 3;
}

/* --------------------------------------------------------------------------
   Gigs
   -------------------------------------------------------------------------- */
.gigs {
  padding-top: 301px;
}
.gigs__inner {
  width: 100%;
  max-width: 1063px;
  margin-inline: auto;
}
.gigs__sub {
  margin-top: 32px;
}
.gigs__list {
  margin-top: 64px;
  border-top: 1px solid var(--c-white-20);
}
.gig {
  display: grid;
  grid-template-columns: 30% 32% 1fr auto;
  align-items: start;
  padding: 32px 0;
  border-bottom: 1px solid var(--c-white-20);
  font-size: 16px;
  line-height: 30px;
}
.gig.is-past { display: none; }
.gig__date, .gig__venue, .gig__time { font-weight: 700; }
.gig__city { font-weight: 300; }

/* Empty state — same row rhythm, message left, action right */
.gigs__empty {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  padding: 32px 0;
  border-bottom: 1px solid var(--c-white-20);
  font-weight: 600;
  font-size: 16px;
  line-height: 30px;
}
.gigs.is-empty .gigs__empty { display: flex; }
.gigs.is-empty .gig { display: none; }

/* --------------------------------------------------------------------------
   Below 1024: no collage, copy back in normal flow
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .sticky-copy {
    position: static;
    height: auto;
    padding: 145px var(--gutter) 205px;
  }
  .sticky-copy__inner {
    position: static;
    transform: none;
    width: 100%;
    max-width: 788px;
    margin-inline: auto;
  }
  .sticky-copy__inner .lead { margin-top: 32px; }
  .collage { display: none; }

  .gigs { padding-top: 189px; }
  .gigs__sub { margin-top: 32px; }
  .gigs__list { margin-top: 64px; }
  .gig {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;   /* date left, venue middle, time right */
    gap: 0 16px;
  }
  .gig .btn {
    width: 100%;
    margin-top: 48px;
  }
  .gigs__empty {
    flex-direction: column;
    align-items: stretch;
    gap: 48px;
  }
}
@media (max-width: 767px) {
  .sticky-copy { padding: calc(145 * var(--s)) var(--gutter) 205px; }
}