/* ============================================================
   sections.css — per-section styles.
   Section padding is set once, on .section in layout.css.
   Nothing here touches it.
   ============================================================ */

/* ------------------------------------------------------------------
   HERO
   ------------------------------------------------------------------ */

.hero {
  min-height: 100svh;
  display: grid;
  align-content: center;
  justify-items: center;
  text-align: center;
  padding-top: calc(var(--header-h) + var(--sp-4));
}

.hero__logo {
  width: min(880px, 88vw);
  height: auto;
  margin-inline: auto;
}

/* margin-inline:auto matters here: .container is a plain block, so a
   max-width child would otherwise sit hard against the left edge while
   its own text stayed centred — which reads as a glitch. */
.hero__intro {
  margin: var(--sp-6) auto 0;
  max-width: 60ch;
  text-align: left;
}

.hero__intro p + p { margin-top: var(--sp-2); }

.hero__cue {
  margin-top: var(--sp-8);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  gap: 0.75em;
}

.hero__cue::after {
  content: '';
  width: 1px;
  height: 34px;
  background: linear-gradient(to bottom, var(--text-muted), transparent);
}

@media (min-width: 768px) {
  .hero__intro { text-align: center; }
}

/* ------------------------------------------------------------------
   LISTENING ROOM
   ------------------------------------------------------------------ */

.listening__block + .listening__block { margin-top: var(--sp-8); }

.block-title {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.8125rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  padding-bottom: var(--sp-1);
  border-bottom: 1px solid var(--hairline);
  margin-bottom: var(--sp-4);
}

.release + .release { margin-top: var(--sp-6); }

.release--single {
  border: 1px solid var(--hairline);
  padding: var(--sp-3);
  background: var(--surface);
}

.album__head {
  display: grid;
  gap: var(--sp-3);
  align-items: center;
  margin-bottom: var(--sp-3);
}

.album__art {
  width: 100%;
  max-width: 160px;
  aspect-ratio: 1;
  object-fit: cover;
  border: 1px solid var(--hairline);
}

.album__kicker {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
}

.album__title {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  text-transform: uppercase;
  margin-top: 0.25rem;
}

.album__desc {
  margin-top: var(--sp-1);
  color: var(--text-muted);
  max-width: 50ch;
}

.album__tracks {
  border: 1px solid var(--hairline);
  background: var(--surface);
}

.album__track + .album__track { border-top: 1px solid var(--hairline); }

@media (min-width: 640px) {
  .album__head { grid-template-columns: 160px 1fr; }
}

/* Video grid — portrait and landscape coexist, dense packing fills gaps.
   Portrait items span two rows so a pair of landscape cards stacks
   alongside one portrait as more videos are added. */
.video-grid {
  display: grid;
  grid-template-columns: 1fr;
  grid-auto-flow: row dense;
  gap: var(--sp-4);
  align-items: start;
}

/* A 9:16 frame in a wide column would be over a thousand pixels tall.
   Capping the frame width keeps the true aspect ratio and crops nothing. */
.video--portrait .video__frame {
  max-width: 340px;
  margin-inline: auto;
  width: 100%;
}

@media (min-width: 640px) {
  .video-grid { grid-template-columns: repeat(2, 1fr); }
  .video--portrait { grid-row: span 2; }
}

@media (min-width: 1024px) {
  .video-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ------------------------------------------------------------------
   GIGS
   ------------------------------------------------------------------ */

.gig { border-bottom: 1px solid var(--hairline); }

.gig__inner {
  display: grid;
  grid-template-columns: 4.5rem 1fr;
  gap: var(--sp-2) var(--sp-3);
  align-items: start;
  padding-block: var(--sp-3);
  text-decoration: none;
  color: inherit;
  transition: background 160ms ease, padding-inline 160ms ease;
}

a.gig__inner:hover {
  background: var(--surface);
  padding-inline: var(--sp-2);
}

.gig__date {
  display: grid;
  font-family: var(--font-mono);
  line-height: 1.15;
  border-left: 2px solid var(--accent);
  padding-left: 0.75rem;
}

.gig__day { font-size: 1.5rem; font-weight: 700; }
.gig__month { font-size: 0.8125rem; letter-spacing: 0.14em; color: var(--accent); }
.gig__year { font-size: 0.75rem; color: var(--text-muted); }

.gig__name {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  text-transform: uppercase;
}

.gig__desc { margin-top: 0.35rem; color: var(--text-muted); max-width: 55ch; }

.gig__where {
  margin-top: 0.35rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.gig__cta {
  grid-column: 2;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--accent);
  white-space: nowrap;
}

.empty {
  color: var(--text-muted);
  padding-block: var(--sp-3);
  max-width: 55ch;
}

.empty a {
  color: var(--text);
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

@media (min-width: 768px) {
  .gig__inner { grid-template-columns: 6rem 1fr auto; align-items: center; }
  .gig__cta { grid-column: 3; }
}

/* ------------------------------------------------------------------
   BOOKING
   ------------------------------------------------------------------ */

.booking__grid {
  display: grid;
  gap: var(--sp-6);
  align-items: start;
}

.booking__photo {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border: 1px solid var(--hairline);
}

.booking__copy p + p { margin-top: var(--sp-2); }

.rider {
  margin-top: var(--sp-4);
}

.rider__meta {
  margin-top: var(--sp-1);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.contact-block {
  margin-top: var(--sp-4);
  display: grid;
  gap: var(--sp-2);
}

.contact-link {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 56px;
  padding: 0.75rem var(--sp-2);
  border: 2px solid var(--hairline);
  text-decoration: none;
  font-family: var(--font-mono);
  font-size: clamp(1rem, 2.2vw, 1.375rem);
  word-break: break-word;
  transition: border-color 160ms ease, background 160ms ease;
}

.contact-link:hover { border-color: var(--accent); background: var(--surface); }

.contact-link__label {
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  flex: 0 0 4.5rem;
}

@media (min-width: 900px) {
  .booking__grid { grid-template-columns: 1fr 1fr; gap: var(--sp-8); }
}

/* ------------------------------------------------------------------
   PRESS
   ------------------------------------------------------------------ */

.presskit {
  display: grid;
  gap: var(--sp-4);
  align-items: center;
  margin-bottom: var(--sp-8);
}

.presskit__link {
  display: block;
  position: relative;
  border: 1px solid var(--hairline);
  text-decoration: none;
  overflow: hidden;
}

.presskit__img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  transition: filter 200ms ease, transform 300ms ease;
}

/* Persistent badge, not a hover reveal — hover does not exist on touch. */
.presskit__badge {
  position: absolute;
  left: 0; bottom: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.8125rem;
  letter-spacing: 0.12em;
  color: #000;
  background: var(--accent);
  padding: 0.75em 1.1em;
  border-top: 2px solid #000;
  border-right: 2px solid #000;
}

.presskit__badge::after { content: '↓'; font-size: 1.1em; }

.presskit__link:hover .presskit__img { transform: scale(1.02); }

.presskit__body p + p { margin-top: var(--sp-2); }

.presskit__meta {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.press__title { margin-top: var(--sp-8); }

.press__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-3);
}

.clip__inner {
  display: block;
  text-decoration: none;
  border: 1px solid var(--hairline);
  background: var(--surface);
  transition: border-color 180ms ease;
}

a.clip__inner:hover { border-color: var(--accent); }

.clip__img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: filter 200ms ease;
}

a.clip__inner:hover .clip__img {
  filter: drop-shadow(1px 0 0 rgba(255, 59, 31, 0.6))
          drop-shadow(-1px 0 0 rgba(34, 211, 238, 0.6));
}

.clip__media {
  display: block;
  padding: 0.75rem var(--sp-2);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  border-top: 1px solid var(--hairline);
}

a.clip__inner:hover .clip__media { color: var(--accent); }

.press__cta { margin-top: var(--sp-6); }

@media (min-width: 640px) {
  .presskit { grid-template-columns: 1fr 1fr; gap: var(--sp-6); }
  .press__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1200px) {
  .press__grid { grid-template-columns: repeat(4, 1fr); }
}

/* ------------------------------------------------------------------
   MEMBERS
   ------------------------------------------------------------------ */

.member {
  display: grid;
  gap: var(--sp-4);
  align-items: center;
}

.member + .member { margin-top: var(--sp-8); }

/* Square crop from a 16:9 source. Never distorted: the wrapper is the
   square, the image fills it and is positioned by the member's focal. */
.member__portrait {
  aspect-ratio: 1;
  overflow: hidden;
  border: 1px solid var(--hairline);
  position: relative;
}

.member__portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--focal, 50% 50%);
  transition: filter 250ms ease;
}

.member__portrait::after {
  content: '';
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 0 2px var(--accent);
  opacity: 0.45;
  pointer-events: none;
}

.member:hover .member__portrait img {
  filter: drop-shadow(1.5px 0 0 rgba(255, 59, 31, 0.5))
          drop-shadow(-1.5px 0 0 rgba(34, 211, 238, 0.5));
}

.member__name {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 3.25rem);
  text-transform: uppercase;
  letter-spacing: -0.02em;
  color: var(--accent);
}

.member__role {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: 0.35rem;
}

.member__bio {
  margin-top: var(--sp-2);
  max-width: 52ch;
}

.member__bio a {
  color: var(--text);
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

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

.member__fav { margin-top: var(--sp-3); }

.member__fav-note {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--sp-1);
}

@media (min-width: 1024px) {
  .member {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: var(--sp-8);
  }
  /* Alternate sides: image left / right / left. Mobile always stacks
     image first, which is the source order.
     The column ratio flips with the order, so the portrait keeps the
     same width on both sides instead of growing on the wide column. */
  .member:nth-child(even) {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  }
  .member:nth-child(even) .member__portrait { order: 2; }
}