/* ═══════════════════════════════════════════════════════════════
   RECORD LABELS DIRECTORY — neon-noir Vice City styling
   Scoped to .rl-* so nothing here can touch existing site styles.
   Uses the site's CSS variables (--acid, --cyan, --line, etc.) with
   safe fallbacks in case they are ever undefined.
   ═══════════════════════════════════════════════════════════════ */

.rl-wrap {
  --rl-pink: var(--acid, #ff2e88);
  --rl-cyan: var(--cyan, #00e5ff);
  --rl-line: var(--line, #3d3160);
  --rl-card: var(--surface, #171126);
  --rl-ink: var(--ink, #f8f3ff);
  --rl-dim: var(--muted, #b6abd8);
  max-width: var(--max, 1180px);
  margin: 0 auto;
  padding: 56px 22px 8px;
  color: var(--rl-ink);
}

.rl-wrap .eyebrow {
  color: var(--rl-cyan);
}

.rl-wrap h2 {
  margin: 0 0 10px;
  background: linear-gradient(92deg, var(--rl-pink), var(--rl-cyan));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.rl-lede {
  max-width: 640px;
  color: var(--rl-dim);
  line-height: 1.7;
  margin: 0 0 8px;
}

.rl-group {
  margin-top: 34px;
}

.rl-group-kicker {
  margin: 0 0 4px;
  font-size: 13px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--rl-cyan);
}

.rl-group-title {
  margin: 0 0 18px;
  font-size: clamp(26px, 4vw, 40px);
  color: var(--rl-ink);
}

.rl-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 18px;
}

.rl-card {
  background: linear-gradient(180deg, rgba(255,46,136,.05), rgba(0,229,255,.04)), var(--rl-card);
  border: 1px solid var(--rl-line);
  border-radius: 18px;
  padding: 22px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.rl-card:hover {
  transform: translateY(-3px);
  border-color: rgba(255,46,136,.55);
  box-shadow: 0 12px 34px rgba(255,46,136,.16), 0 4px 18px rgba(0,229,255,.10);
}

/* Trademark-safe styled TEXT badge — never a logo image. */
.rl-badge {
  display: inline-block;
  align-self: flex-start;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid var(--rl-pink);
  background: rgba(255,46,136,.10);
  box-shadow: 0 0 18px rgba(255,46,136,.25), inset 0 0 12px rgba(0,229,255,.08);
}

.rl-badge-text {
  font-family: 'Pricedown', 'Bebas Neue', sans-serif;
  font-size: 22px;
  letter-spacing: .04em;
  line-height: 1;
  background: linear-gradient(92deg, #ffd166, var(--rl-pink) 55%, var(--rl-cyan));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  white-space: nowrap;
}

.rl-meta {
  margin: 0;
  font-size: 14px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--rl-cyan);
}

.rl-blurb {
  margin: 0;
  color: var(--rl-dim);
  line-height: 1.65;
  font-size: 15px;
  flex: 1 1 auto;
}

.rl-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-top: 4px;
}

.rl-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 18px;
  border-radius: 12px;
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
  border: 1px solid var(--rl-pink);
  color: var(--rl-ink);
  background: rgba(255,46,136,.14);
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}

.rl-btn:hover {
  transform: translateY(-2px);
  background: rgba(255,46,136,.28);
  box-shadow: 0 8px 22px rgba(255,46,136,.30);
}

.rl-btn--spotify {
  border-color: #1db954;
  background: rgba(29,185,84,.14);
}

.rl-btn--spotify:hover {
  background: rgba(29,185,84,.28);
  box-shadow: 0 8px 22px rgba(29,185,84,.30);
}

.rl-no-spotify {
  font-size: 14px;
  color: var(--rl-dim);
  opacity: .75;
  font-style: italic;
}

.rl-fairuse {
  margin: 26px 0 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--rl-dim);
  opacity: .8;
  max-width: 720px;
}

/* Mobile: cards stack naturally; tighten padding on small screens. */
@media (max-width: 640px) {
  .rl-wrap {
    padding: 40px 16px 4px;
  }
  .rl-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .rl-card {
    padding: 20px 16px;
  }
  .rl-actions {
    display: grid;
    grid-template-columns: 1fr;
  }
  .rl-btn {
    width: 100%;
  }
}