/* ── rails.css — owner: rail container (.rail-wrap/.rail/.rail-arrow/.rail-fade),
   kicker pill khusus homepage, card-in-rail sizing override. Dipake: home,
   /mood/*, /artist/ (index), /404. Card base = cards.css, JANGAN duplikat di sini
   (ponytail lama di bawah masih nyimpen sisa dupe — dibersihin sebagian B5). ── */

/* ── CP-H1: de-boxed rails — section terbuka, tanpa wrapper kotak ── */
.music-rail {
  margin: 0 0 var(--sp-4);
  min-width: 0;
}

/* sec-head base = components.css (konsolidasi B5). h2 butuh margin:0 eksplisit di
   sini (delta wajib — tanpa ini h2 jatuh ke fallback global `section h2{margin-
   bottom:16px}` layout.css, karena h2 di homepage emang dibungkus <section>).
   Kicker homepage beda dari canonical (pill berbingkai, bukan teks polos). */
.homepage .sec-head h2 { margin: 0; }
.homepage .sec-head .section-kicker {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  font-weight: 800;
  border: 1px solid rgba(var(--accent-rgb), 0.16);
  border-radius: var(--r-pill);
  background: rgba(var(--accent-rgb), 0.08);
  padding: 6px 10px;
}
.homepage .sec-head .rail-link {
  margin-left: auto;
  flex: 0 0 auto;
  color: var(--accent);
  font-size: var(--fs-card);
  font-weight: 800;
  text-decoration: none;
}
.homepage .sec-head .rail-link:hover { text-decoration: underline; }

/* Horizontal-scroll rail container — subtle border only, no surface box */
.rail-wrap {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  background: transparent;
  padding: 14px 6px 14px 14px;
}

.rail {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  padding-right: 8px;
}

.rail::-webkit-scrollbar { display: none; }

.rail-fade {
  position: absolute;
  top: 14px;
  bottom: 14px;
  width: 36px;
  pointer-events: none;
  z-index: 4;
}

.rail-fade--left {
  left: 0;
  background: linear-gradient(90deg, var(--bg), transparent);
  border-radius: var(--r-l) 0 0 var(--r-l);
}

.rail-fade--right {
  right: 0;
  background: linear-gradient(270deg, var(--bg), transparent);
  border-radius: 0 var(--r-l) var(--r-l) 0;
}

.rail-wrap.at-start .rail-fade--left,
.rail-wrap.at-end .rail-fade--right {
  display: none;
}

.rail-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-body);
  z-index: 6;
  box-shadow: var(--shadow);
}

.rail-arrow--prev { left: -14px; }
.rail-arrow--next { right: -14px; }
.rail-arrow[disabled] { opacity: 0.25; pointer-events: none; }

/* Card seragam kotak di dalam rail — override ukuran/flex tanpa ubah
   .song-card/.artist-card global (cards.css tetap single source of truth). */
.rail .song-card,
.rail .artist-card,
.rail .mood-card,
.rail .mood-grid-card,
.rail .country-card {
  flex: 0 0 168px;
  scroll-snap-align: start;
}

.rail .story-card {
  flex: 0 0 290px;
  scroll-snap-align: start;
}

/* .artist-card aslinya horizontal (avatar kecil + teks di samping) — di rail
   sempit (168px) dipaksa vertikal biar konsisten sama card lain: gambar kotak
   penuh di atas, teks di bawah. */
.rail .artist-card {
  display: flex;
  flex-direction: column;
  grid-template-columns: none;
  gap: 8px;
  padding: 0;
  overflow: hidden;
}

.rail .artist-mark {
  width: 100%;
  aspect-ratio: 1 / 1;
  height: auto;
  border-radius: 0;
}

.rail .artist-card-copy {
  padding: 10px;
  gap: 5px;
  overflow: hidden;
}

.rail .artist-card-copy strong {
  font-size: var(--fs-card);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rail .artist-card-copy span,
.rail .artist-card-copy small {
  font-size: var(--fs-caption);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}

@media (max-width: 700px) {
  .rail-arrow { width: 28px; height: 28px; font-size: var(--fs-card); }
  .rail-arrow--prev { left: -10px; }
  .rail-arrow--next { right: -10px; }
  .rail .song-card,
  .rail .artist-card,
  .rail .mood-card,
  .rail .mood-grid-card,
  .rail .country-card {
    flex-basis: 132px;
  }
}

/* ponytail (B5 cleanup): sisa duplikat cards.css yang NO-OP (nilai identik, verified
   property-by-property) dibuang — .song-cover-wrap--fallback span font-size,
   .song-card-body, .song-card-meta, .artist-card, .artist-card-copy container,
   .artist-card-copy small{color} semua persis sama kayak cards.css, aman dihapus.
   Sisa di bawah GENUINELY beda dari cards.css punya (override diam-diam, bare
   selector, jadi otomatis berlaku tiap page yang load rails.css: home/mood/
   artist-index/404) — ditandain per-rule biar ketara, JANGAN dihapus (itu delta
   yang emang kepake, task USUL: rapihin ke bentuk scoped `.rail ...` nanti). */
.country-card:hover {
  transform: translateY(-3px);
  background: rgba(var(--surface-2-rgb), 0.82);
  border-color: var(--accent);
  text-decoration: none;
}
.country-card:active { transform: translateY(-1px); }

/* override konteks (bare, semua page yg load rails.css): font-size beda dari
   cards.css punya (.song-card strong cards.css = var(--fs-body), sini var(--fs-card)) */
.song-card strong {
  font-size: var(--fs-card);
  line-height: 1.2;
}

/* override konteks: warna+size .song-artist beda dari cards.css (color-mix + fs-card) */
.song-artist {
  color: var(--text);
  font-size: var(--fs-caption);
}

/* override konteks: opacity accent-glow .artist-mark beda (.24 di sini, cards.css .18) */
.artist-mark {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: var(--r-m);
  background:
    radial-gradient(circle at 30% 20%, rgba(var(--accent-rgb), 0.24), transparent 34%),
    linear-gradient(135deg, var(--surface-2), var(--surface));
  color: var(--text);
  font-size: var(--fs-body);
  font-weight: 900;
}

/* override konteks: warna span .artist-card-copy beda (var(--text), cards.css var(--muted)) */
.artist-card-copy span,
.country-card span,
.mood-card span {
  color: var(--text);
}

/* override konteks: font-size .artist-card-copy small beda (fs-caption, cards.css fs-card) */
.artist-card-copy small {
  font-size: var(--fs-caption);
  line-height: 1.45;
}

/* ponytail: final rail card type normalization; keeps card title/meta consistent across song/artist/mood/country.
   Ini rule yang menang (paling spesifik) di homepage rail — jadiin satu-satunya sumber kebenaran
   font-size/weight biar 4 jenis card gak beda-beda lagi (termasuk artist-card-copy yang sempet
   punya font-weight beda sendiri di cards.css). */
.rail .song-card strong,
.rail .artist-card-copy strong,
.rail .mood-card-body strong,
.rail .country-card-body strong {
  font-size: var(--fs-card);
  line-height: 1.2;
  font-weight: 700;
}

.rail .song-artist,
.rail .artist-card-copy span,
.rail .artist-card-copy small,
.rail .mood-card-body span,
.rail .country-card-body span {
  font-size: var(--fs-caption);
  line-height: 1.35;
  font-weight: 400;
}

/* CP-H1 last-gate CTO: de-box rail — kalahkan rule global section{} di layout.css */
.homepage section.music-rail{background:transparent;border:0;padding:0;box-shadow:none;border-radius:0}
.homepage section.home-hero,.homepage section.hero{background:transparent;border:0;box-shadow:none}
/* CP-H2 last-gate CTO: rail-wrap tanpa frame (open section) */
.homepage .rail-wrap{border:0;border-radius:0}
/* B5: baris `.homepage .section-kicker{background:color-mix(...)}` yang tadinya di sini
   dibuang — specificity-nya (0,2,0) kalah sama `.homepage .sec-head .section-kicker`
   (0,3,0) di atas, jadi dari awal gak pernah efektif kepake (verified: computed
   background-color homepage kicker tetap rgba(var(--accent-rgb),.08), BUKAN color-mix). */