/* Page structure, grid/flex layout, responsive breakpoints */

.page {
  max-width: var(--content-max-width);
  margin: 0 auto;
}

.site-header {
  background: #000;
}

.site-header a {
  display: block;
}

.site-header__banner {
  width: 100%;
  height: auto;
}

main {
  background: var(--color-body);
}

.hero,
.section {
  padding: var(--space-lg) var(--space-md);
}

.section + .section {
  border-top: 1px solid var(--color-rule);
}

/* Homepage hero: cover + latest-release details. Mobile: the cover is kept
   small enough that the title and both buttons still land on the first
   screen of a phone. */
.hero {
  display: grid;
  gap: var(--space-md);
  grid-template-columns: 1fr;
  padding-top: var(--space-md);
}

.hero__art img {
  width: 100%;
  max-width: 260px;
  margin: 0 auto;
  border-radius: 4px;
}

/* Release page: cover + details, then listen/buy + tracks side by side on
   wide screens. */
.release {
  display: grid;
  gap: var(--space-lg);
  grid-template-columns: 1fr;
}

.release__art img {
  margin: 0 auto;
  border-radius: 4px;
}

.about-teaser,
.artist {
  display: grid;
  gap: var(--space-lg);
  grid-template-columns: 1fr;
}

.about-teaser__photo img {
  max-width: 280px;
  margin: 0 auto;
  border-radius: 4px;
}

.artist__photo img {
  margin: 0 auto;
  border-radius: 4px;
}

.site-footer {
  background: var(--color-background);
  color: var(--color-text-secondary);
  text-align: center;
  padding: var(--space-md);
  font-size: 0.85rem;
}

@media (min-width: 600px) {
  .hero {
    grid-template-columns: minmax(200px, 2fr) 3fr;
    align-items: center;
    padding-top: var(--space-lg);
  }

  .hero__art img {
    max-width: none;
  }

  .about-teaser {
    grid-template-columns: minmax(160px, 240px) 1fr;
    align-items: start;
  }
}

@media (min-width: 900px) {
  .hero {
    grid-template-columns: minmax(280px, 420px) 1fr;
    gap: var(--space-lg);
  }

  /* Cover with listen/buy under it on the left; notes + player on the
     right; track list full width below. */
  .release {
    grid-template-columns: minmax(280px, 420px) 1fr;
    align-items: start;
  }

  .release__art { grid-column: 1; grid-row: 1; }
  .release__listen { grid-column: 1; grid-row: 2; }
  .release__details { grid-column: 2; grid-row: 1 / span 2; }
  .release__tracks { grid-column: 1 / -1; grid-row: 3; }

  .release__tracks .tracklist {
    columns: 2;
    column-gap: var(--space-lg);
  }

  .artist {
    grid-template-columns: minmax(240px, 360px) 1fr;
    align-items: start;
  }

  .about-teaser {
    grid-template-columns: minmax(200px, 280px) 1fr;
  }
}