/**
 * Retro About — Base Styles (structure only)
 *
 * A record package:
 *   - the about image is the album cover (left); it matches the panel height
 *   - a colored band (the "panel") holds the artist name, socials and bio
 *   - a vinyl, sized to the panel height (minus 2rem top/bottom), sits snugly
 *     inside the panel and pokes ~35% out over the cover image
 *
 * The record is a child of the band so it can be sized/anchored to the panel.
 * The panel surface is a ::before layer, so the record (z-index:-1) tucks
 * BEHIND the panel while its left edge still shows over the cover.
 *
 * All color, texture and shadow treatment lives in styles/*.css.
 */

.retro-about {
  position: relative;
  padding-block: 4rem;
}

.retro-about__inner {
  max-width: 120rem;
  margin: 0 auto;
}

/* ========================================================================
   PACKAGE — cover | band(panel), spanning the full section width
   ======================================================================== */

.retro-about__pkg {
  position: relative;
  display: flex;
  align-items: stretch;      /* cover matches the panel height */
  width: 100%;
}

/* ---- album cover (matches the panel height) ---- */

.retro-about__cover {
  position: relative;
  z-index: 1;
  flex: 0 0 46%;
  align-self: stretch;
  overflow: hidden;          /* clip the photo to the frame */
  min-height: 0;
}

.retro-about__cover-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ---- colored band (the panel) ---- */

.retro-about__band {
  position: relative;
  z-index: 3;
  flex: 1 1 auto;
  margin-left: -3%;          /* overlap the cover's right edge */
}

/* panel surface drawn as a layer, so the record can hide behind it */
.retro-about__band::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
}

.retro-about__band-inner {
  position: relative;
  z-index: 1;                /* content sits above the panel surface */
  display: flex;
  flex-direction: column;
  gap: var(--medium);
  padding: clamp(1.5rem, 2.4vw, 2.25rem);
}

.retro-about__name {
  font-family: var(--header);
  font-size: clamp(2rem, 4vw, 3.25rem);
  line-height: 0.92;
  margin: 0;
  word-break: break-word;
}

.retro-about__bio {
  font-family: var(--body);
  font-size: 0.98rem;
  line-height: 1.6;
}

/* ---- vinyl: sized to the panel, tucked behind it, ~35% over the cover ---- */

.retro-about__record {
  position: absolute;
  z-index: -1;               /* behind the panel surface (::before) */
  top: 2rem;
  bottom: 2rem;              /* height = panel height - 4rem */
  left: 0;                   /* left edge at the panel's left edge ... */
  aspect-ratio: 1;           /* ... circle: width derived from height */
  transform: translateX(-35%); /* ...slid out so 35% shows over the cover */
  border-radius: 999px;
  pointer-events: none;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

/* hovering the cover pulls the record further out */
.retro-about__cover:hover ~ .retro-about__band .retro-about__record {
  transform: translateX(-58%);
}

/* ========================================================================
   RESPONSIVE
   ======================================================================== */

/* Tablet + mobile: stack cover over panel (both full width); the record
   pokes out the TOP of the panel instead of the side. The side layout's
   panel-height-sized record gets too big on narrow widths, so we switch
   to the stacked layout below the desktop breakpoint. */
@media screen and (max-width: 991px) {
  .retro-about__pkg {
    flex-direction: column;
    align-items: stretch;
  }

  .retro-about__cover {
    flex: none;
    width: auto;                       /* stretches to full width */
    height: clamp(16rem, 48vw, 26rem); /* capped height (avoids a giant image on tablet) */
  }

  .retro-about__band {
    margin-left: 0;
  }

  .retro-about__record {
    top: 0;
    bottom: auto;
    left: 50%;
    width: clamp(7rem, 28vw, 10rem);
    height: auto;
    transform: translate(-50%, -50%);  /* straddle the panel's top edge */
  }

  .retro-about__cover:hover ~ .retro-about__band .retro-about__record {
    transform: translate(-50%, -50%);  /* no side-slide on mobile */
  }
}

/* ========================================================================
   REDUCED MOTION
   ======================================================================== */

@media (prefers-reduced-motion: reduce) {
  .retro-about__record {
    transition: none;
  }
}