/**
 * Section Music Retro — "retro" variant
 *
 * The browsing area: cream paper wall, kraft filter tabs, album sleeves with a
 * brand-color vinyl peeking out on hover. Same palette + language as the rest
 * of the template (hero crate, about package).
 *
 * COLOR + CONTRAST RULE
 * No body text on a raw --template fill. Titles/captions are ink on paper. The
 * brand color pops through: the kicker, the active tab fill (with --on-template
 * auto-contrast text), the title underline-stamp, and the vinyl grooves. Legible
 * at any brand color — checked #ffffff and #111111.
 */

.section-music-retro[data-variant="retro"] {
  --r-paper:   #f3ecdb;
  --r-paper-2: #e7dcc3;
  --r-ink:     #2a2018;
  --r-shade:   color-mix(in srgb, var(--template) 72%, #20160a);
  --r-deep:    color-mix(in srgb, var(--template) 40%, #160f06);
  --r-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;

  color: var(--r-ink);
  background-color: var(--r-paper);
  background-image: repeating-linear-gradient(90deg, rgba(0,0,0,0.012) 0 1px, transparent 1px 4px);
}

/* ───────────────────────────────────────────────────────── HEADER */

.section-music-retro[data-variant="retro"] .section-music-retro__kicker {
  color: var(--r-deep);
}

.section-music-retro[data-variant="retro"] .section-music-retro__title {
  color: var(--r-ink);
  /* double-printed poster shadow, echoing the hero title */
  text-shadow: 3px 3px 0 var(--template),
               4px 4px 0 var(--r-deep);
}

.section-music-retro[data-variant="retro"] .section-music-retro__state {
  color: color-mix(in srgb, var(--r-ink) 75%, transparent);
}

/* ──────────────────────────────────────────────────── FILTER TABS */

/* kraft card tabs — paper + ink, always legible */
.section-music-retro[data-variant="retro"] .section-music-retro__tab {
  background-color: var(--r-paper);
  color: var(--r-ink);
  border-color: var(--r-shade);
  box-shadow: 1px 2px 0 var(--r-deep);
}

.section-music-retro[data-variant="retro"] .section-music-retro__tab:hover {
  background-color: var(--r-paper-2);
}

/* active tab fills brand, auto-contrast text */
.section-music-retro[data-variant="retro"] .section-music-retro__tab.is-active {
  background-color: var(--template);
  color: var(--on-template);
  border-color: var(--r-deep);
}

.section-music-retro[data-variant="retro"] .section-music-retro__tab:focus-visible {
  outline-color: var(--r-ink);
}

/* ───────────────────────────────────────────────── SLEEVE + VINYL */

/* sleeve frame — thin keyline + a soft sheen, no heavy shadow */
.section-music-retro[data-variant="retro"] .section-music-retro__cover-wrap {
  border: 2px solid var(--r-shade);
  border-radius: 3px;
  background-color: var(--r-paper-2);
  box-shadow: 0 6px 14px rgba(20, 12, 4, 0.16);
}

.section-music-retro[data-variant="retro"] .section-music-retro__cover-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(150deg, rgba(255,255,255,0.22), rgba(0,0,0,0.08));
}

/* the vinyl — brand-color grooves, black center label, paper spindle hole */
.section-music-retro[data-variant="retro"] .section-music-retro__disc {
  background:
    radial-gradient(circle at center, var(--r-paper) 0 1.6%, transparent 1.8%),
    radial-gradient(circle at center, #0d0d0d 1.8% 30%, transparent 30.3%),
    repeating-radial-gradient(circle at center,
      color-mix(in srgb, var(--template) 82%, #000) 0 0.16rem,
      var(--template) 0.16rem 0.4rem);
  border: 1px solid color-mix(in srgb, var(--template) 65%, #000);
}

/* ────────────────────────────────────────────────────── CAPTION */

.section-music-retro[data-variant="retro"] .section-music-retro__card-title {
  color: var(--r-ink);
  display: inline-block;
  background-image: linear-gradient(var(--template), var(--template));
  background-repeat: no-repeat;
  background-position: 0 88%;
  background-size: 0% 0.42em;     /* highlighter swipe, grows on hover */
  transition: background-size 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.section-music-retro[data-variant="retro"] .section-music-retro__card:hover .section-music-retro__card-title,
.section-music-retro[data-variant="retro"] .section-music-retro__card:focus-visible .section-music-retro__card-title {
  background-size: 100% 0.42em;
}

.section-music-retro[data-variant="retro"] .section-music-retro__meta {
  color: color-mix(in srgb, var(--r-ink) 62%, transparent);
}

.section-music-retro[data-variant="retro"] .section-music-retro__meta-sep {
  color: var(--template);
}

@media (prefers-reduced-motion: reduce) {
  .section-music-retro[data-variant="retro"] .section-music-retro__card-title {
    transition: none;
  }
}