/* ==========================================================================
   Homepage-specific layout
   ========================================================================== */

/* ---- Hero ---- */
.hero {
  position: relative;
  /* min-height, not height: on short screens the content is allowed to make
     the hero taller rather than being clipped or shoved under the header. */
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--bg);
}

.hero__video-wrap {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--bg);
}

.hero__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 35%;
  /* It is decoration, never a player: iOS Safari otherwise paints its native
     play / skip / mute buttons over the headline the moment the clip is
     paused, and taps would scrub the video instead of reaching the page. */
  pointer-events: none;
}

/* Mobile still frame — hidden on desktop, where the video plays. */
.hero__still {
  display: none;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 40%;
  pointer-events: none;
}

.hero__video::-webkit-media-controls,
.hero__video::-webkit-media-controls-start-playback-button {
  display: none !important;
  -webkit-appearance: none;
}

.hero__sound-toggle {
  position: absolute;
  right: var(--container-pad);
  bottom: var(--space-lg);
  z-index: var(--z-content);
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-strong);
  background: rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(6px);
  color: var(--text-tertiary);
  transition: border-color var(--dur-fast) var(--ease-out),
    background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}

/* Muted = grey (default). Unmuted = green, persistently. Hover = always
   green, as a preview/affordance regardless of current state. */
.hero__sound-toggle:hover,
.hero__sound-toggle[aria-pressed="true"] {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(0, 0, 0, 0.55);
}

.hero__sound-toggle svg {
  width: 1.3rem;
  height: 1.3rem;
}

.hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.15) 0%,
      rgba(0, 0, 0, 0.36) 55%,
      var(--bg) 97%
    ),
    linear-gradient(90deg, rgba(0, 0, 0, 0.74) 0%, rgba(0, 0, 0, 0.08) 45%);
  pointer-events: none;
}

.hero__content {
  position: relative;
  z-index: var(--z-content);
  width: 100%;
  /* A touch more inset than the shared .container padding, and a bit
     more headroom above the bottom edge — small nudges, not a
     re-layout: still bottom-anchored, still left-aligned. */
  padding-left: calc(var(--container-pad) + 0.75rem);
  padding-bottom: clamp(4rem, 3rem + 4vw, 7rem);
  /* Clears the fixed header. Without it the bottom-anchored content grows
     straight up behind the nav on short viewports, and the eyebrow ends up
     printed over the logo. */
  padding-top: var(--hero-top-clearance, 6rem);
}

.hero__title {
  /* ~8% down from --fs-hero, kept local so the events-page hero
     (which shares that token) is unaffected. */
  font-size: clamp(2.55rem, 1.5rem + 5.5vw, 6rem);
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  letter-spacing: -0.02em;
  line-height: 1.03;
  text-transform: uppercase;
  max-width: 18ch;
  color: var(--text);
  /* Soft halo so the type reads as lit rather than laid over the photo.
     Two stops: a tight core plus a wider, fainter bloom. */
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.55), 0 0 38px rgba(255, 255, 255, 0.28);
}

/* The accented word glows in the accent colour instead of white, so the
   highlight stays a highlight. */
.hero__title em {
  font-style: normal;
  color: var(--accent);
  text-shadow: 0 0 12px rgba(97, 206, 112, 0.6), 0 0 42px rgba(97, 206, 112, 0.32);
}

.hero__sub {
  margin-top: var(--space-md);
  max-width: 40ch;
  color: rgba(255, 255, 255, 0.8);
}

.hero__actions {
  margin-top: var(--space-md);
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  flex-wrap: wrap;
}

/* ---- Termine ---- */
/* Trims the gap after the club-references section by ~12% overall —
   only this section's top padding is reduced (clubs' own bottom padding
   is untouched), which nets a 12% cut to their combined gap. */
#termine {
  padding-top: calc(var(--section-pad) * 0.76);
}

/* Swap the hero clip for the still. Matches the nav's own mobile breakpoint
   so the whole header switches to its phone layout at the same width. */
@media (max-width: 860px) {
  .hero__still {
    display: block;
  }

  .hero__video {
    display: none;
  }

  /* This button only mutes/unmutes the hero clip. With a still image there
     is no audio to control, so it would just be a dead play icon floating
     over the photo. */
  .hero__sound-toggle {
    display: none;
  }

  /* The studio photo is brighter and busier than the club footage it
     replaces, so the headline needs more backing here. The desktop scrim
     leans on a left-to-right fade, which does nothing once the text spans
     the full width — this is a straight vertical wash instead, darkest
     behind the copy at the bottom. */
  .hero__scrim {
    background: linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.45) 0%,
      rgba(0, 0, 0, 0.55) 35%,
      rgba(0, 0, 0, 0.72) 70%,
      var(--bg) 98%
    );
  }
}

@media (max-width: 720px) {
  /* 12% off the headline-to-tiles gap — felt too far apart on mobile. */
  #termine .section-head {
    margin-bottom: calc(var(--space-xl) * 0.88);
  }
}

/* ---- About ---- */
.about {
  position: relative;
  /* Down to 35% of the usual top padding (was 50%) — paired with the
     marquee's reduced bottom margin, this nets a ~30% cut to the total
     banner-to-About gap specifically, without touching --section-pad
     itself (which other sections still use at full value). */
  padding-top: calc(var(--section-pad) * 0.35);
}

.about__grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--space-2xl);
  align-items: center;
}

.about__media {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4 / 5;
}

.about__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(0.6) contrast(1.05);
}

.about__genres {
  margin-top: var(--space-lg);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}

.about__genre-tag {
  font-family: var(--font-display);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-medium);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-secondary);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  padding: 0.5em 1em;
}

.about__contexts {
  margin-top: var(--space-lg);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-sm) var(--space-lg);
}

.about__context {
  display: flex;
  align-items: baseline;
  gap: var(--space-xs);
  font-size: var(--fs-small);
  color: var(--text-secondary);
}

.about__context::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
}

@media (max-width: 900px) {
  .about__grid {
    grid-template-columns: 1fr;
    /* The 2xl gap is meant for the desktop columns sitting side by side —
       stacked on mobile it left a much bigger gap above the image than
       the spacing already used elsewhere in this block (e.g.
       subtext-to-genres, which uses --space-lg). */
    row-gap: var(--space-lg);
  }
  /* Taller than the old 16/10 landscape crop — that cut off the top of
     the current about photo (the digital billboard behind Sasuma). This
     stays close enough to the source photo's own portrait ratio that
     the whole board is visible. */
  .about__media {
    aspect-ratio: 3 / 4;
  }
}

/* ---- Event-DJ teaser ---- */
.teaser {
  position: relative;
  min-height: 70vh;
  display: flex;
  align-items: center;
}

.teaser__media img {
  filter: grayscale(0.15) contrast(1.05) brightness(0.75);
}

.teaser__panel {
  max-width: 34rem;
}

.teaser__panel h2 {
  margin-bottom: var(--space-md);
}

.teaser__panel p {
  margin-bottom: var(--space-lg);
}

/* ---- Booking section backdrop ---- */
.booking {
  position: relative;
}

.booking__grid {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: var(--space-2xl);
}

.booking__aside .eyebrow {
  margin-bottom: var(--space-xs);
}

.booking__aside h2 {
  margin-bottom: var(--space-md);
}

.booking__aside p {
  margin-bottom: var(--space-lg);
}

.booking__contact-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.booking__contact-list a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  color: var(--text);
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
}

.booking__contact-list a svg {
  width: 1.1em;
  height: 1.1em;
  flex-shrink: 0;
}

/* Mail icon +4%, Instagram icon +12% — at the shared 1.1em base the
   Instagram glyph in particular read as a barely-visible white dot. */
.booking__contact-list a[href^="mailto:"] svg {
  width: 1.144em;
  height: 1.144em;
}

.booking__contact-list a[href*="instagram.com"] svg {
  width: 1.232em;
  height: 1.232em;
}

.booking__contact-list a:hover {
  color: var(--accent);
}

@media (max-width: 900px) {
  .booking__grid {
    grid-template-columns: 1fr;
    /* The 2xl gap is meant for the desktop columns sitting side by
       side — stacked on mobile it left a huge vertical gap between the
       Instagram link and the form below it. */
    row-gap: var(--space-lg);
  }
}