/* ── mood-cards.css — owner: mood single + mood index page. CP-A1 (7 Jul 2026):
   satu sistem MOOD IDENTITY (duotone by MAKNA) — warna & glyph di-inject inline
   --m-a/--m-b(/--m-c) + glyph dari data/mood_meta.json via generator. Sistem warna
   statis lama (class per-vibe + nth-child by posisi + inner visual/emoji) MATI.
   Dipake: /, /mood/, /mood/{slug}/. Sec-head base = components.css; ini nyimpen delta
   (kicker tint, stats strip, hero panel). ── */

/* /mood/ index grid layout (kolom/gap) — dipertahankan */
.mood-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 14px;
}

/* ============ MOOD CARD — Mood Identity System (CP-A1 7 Jul 2026) ============
   Warna & glyph per mood dari data/mood_meta.json via inline --m-a/--m-b(/--m-c).
   SATU sistem duotone by MAKNA. Sistem warna statis lama (by-posisi nth-child) mati di CP ini. */
.mood-card{
  position:relative;display:block;overflow:hidden;aspect-ratio:3/4;
  border-radius:var(--r-l);text-decoration:none;color:white;
  background:
    radial-gradient(130% 90% at 16% 6%, color-mix(in srgb, var(--m-b) 38%, transparent), transparent 56%),
    linear-gradient(158deg, color-mix(in srgb, var(--m-b) 14%, var(--m-a)), var(--m-a) 55%, color-mix(in srgb, black 32%, var(--m-a)));
  border:1px solid color-mix(in srgb, var(--m-b) 24%, transparent);
  box-shadow:0 14px 34px -20px color-mix(in srgb, var(--m-b) 60%, transparent);
  transition:transform .18s ease, box-shadow .18s ease;
}
.mood-card:hover{transform:translateY(-4px);box-shadow:0 20px 44px -18px color-mix(in srgb, var(--m-b) 80%, transparent)}
.mood-card:focus-visible{outline:2px solid var(--m-b);outline-offset:3px}
.mood-card::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.55;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.14'/%3E%3C/svg%3E")}
.mood-card--split{background:
  radial-gradient(90% 70% at 10% 0%, color-mix(in srgb, var(--m-b) 36%, transparent), transparent 55%),
  radial-gradient(80% 60% at 95% 90%, color-mix(in srgb, var(--m-c) 30%, transparent), transparent 60%),
  linear-gradient(158deg, color-mix(in srgb, var(--m-b) 12%, var(--m-a)), var(--m-a) 55%, color-mix(in srgb, black 30%, var(--m-a)))}
.mood-card-glyph{position:absolute;right:-10px;bottom:24%;font-size:6rem;line-height:1;opacity:.15;transform:rotate(-10deg);filter:saturate(.8)}
.mood-card-cover{position:absolute;top:13%;left:12%;width:52%;height:auto;aspect-ratio:1;object-fit:cover;border-radius:10px;transform:rotate(-6deg);box-shadow:0 12px 26px -8px rgba(0,0,0,.6);transition:transform .18s ease}
.mood-card:hover .mood-card-cover{transform:rotate(-3deg) scale(1.03)}
.mood-card-body{position:absolute;inset:auto 0 0 0;padding:44px 14px 14px;background:linear-gradient(transparent, color-mix(in srgb, black 62%, var(--m-a)) 72%)}
.mood-card-body strong{display:block;font-family:'Clash Display','Plus Jakarta Sans',sans-serif;font-weight:600;font-size:1.1rem;letter-spacing:-.01em;color:white}
.mood-card-body span{display:block;font-size:var(--fs-caption);color:rgba(255,255,255,.75);margin-top:2px}
/* ukuran di konteks rail = urusan rails.css (.rail .mood-card) — jangan setel width di sini */
@media (prefers-reduced-motion: reduce){.mood-card,.mood-card-cover{transition:none}.mood-card:hover{transform:none}.mood-card:hover .mood-card-cover{transform:rotate(-6deg)}}

/* neutralizer CP-A1 DIHAPUS CTO — root cause (bare .mood-card:hover di rails.css) udah dicabut 7 Jul */

/* ── Hub /mood/ hero — lampu kota (token-only) ── */
.mood-index-page .home-hero{position:relative;overflow:hidden;background:
  radial-gradient(42% 60% at 8% 0%, rgba(var(--accent-rgb),.16), transparent 60%),
  radial-gradient(38% 55% at 45% 0%, rgba(var(--aura-rgb),.13), transparent 60%),
  radial-gradient(40% 60% at 85% 0%, rgba(var(--accent-2-rgb),.10), transparent 60%),
  var(--surface)}

/* ── Mood page hero atmosfer (CP-A1b) — vars dari template ── */
.mood-page .home-hero{position:relative;overflow:hidden;
  background:
    radial-gradient(70% 90% at 12% 0%, color-mix(in srgb, var(--m-b) 26%, transparent), transparent 60%),
    radial-gradient(50% 70% at 90% 100%, color-mix(in srgb, var(--m-b) 10%, transparent), transparent 60%),
    var(--surface);
  border:1px solid color-mix(in srgb, var(--m-b) 22%, var(--line))}
.mood-hero-glyph{position:absolute;right:3%;bottom:-16%;font-size:9rem;line-height:1;opacity:.10;transform:rotate(-8deg);pointer-events:none}
.mood-editorial{border:1px solid var(--line);border-left:3px solid var(--m-b);border-radius:var(--r-m);background:var(--surface);padding:var(--sp-3);max-width:720px}

/* mood/list page: grid kompak buat song cards (fix: dulu unstyled = 1 kolom raksasa) */
.song-rail {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  gap: 14px;
}
@media (max-width: 640px) {
  .song-rail { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 10px; }
}

/* Mood page: card note 3-line clamp */
.mood-page .song-card-note {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

/* ===== /mood/ index — mood-identity card grid ===== */
.mood-index-page .mood-index-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 14px;
}
@media (max-width: 640px) {
  .mood-index-page .mood-index-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
}

/* ── CP-D1: mood page scoped styles ── */

/* De-box: override global section{} box di layout.css */
.mood-page section,
.mood-index-page section {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  margin-bottom: var(--sp-4);
  box-shadow: none;
}

/* sec-head base pada mood pages = components.css (nilainya persis sama, dihapus).
   h2 butuh margin:0 eksplisit (delta wajib — h2 di sini dibungkus <section>,
   tanpa reset ini jatuh ke fallback global `section h2{margin-bottom:16px}`
   layout.css). Kicker dapet tint background tambahan (color sudah match canonical). */
.mood-page .sec-head h2,
.mood-index-page .sec-head h2 { margin: 0; }
.mood-page .sec-head .section-kicker,
.mood-index-page .sec-head .section-kicker {
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}
.mood-page .sec-head .rail-link,
.mood-index-page .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;
}
.mood-page .sec-head .rail-link:hover,
.mood-index-page .sec-head .rail-link:hover { text-decoration: underline; }

/* Mood index stats strip (right side hero) */
.mood-index-stats {
  display: grid;
  grid-template-rows: 1fr 1fr;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  overflow: hidden;
  align-self: start;
}
.mood-index-stats .mood-stat-item {
  padding: 18px 22px;
  background: var(--surface);
}
.mood-index-stats .mood-stat-item:first-child {
  border-bottom: 1px solid var(--line);
}
.mood-stat-item b {
  display: block;
  font-family: 'Clash Display', 'Plus Jakarta Sans', sans-serif;
  font-weight: 600;
  font-size: 2rem;
  letter-spacing: -.01em;
  color: var(--accent);
}
.mood-stat-item span {
  font-size: var(--fs-kicker);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  display: block;
  margin-top: 2px;
}
.mood-stat-item small {
  display: block;
  font-size: .68rem;
  color: var(--muted);
  opacity: .7;
  margin-top: 2px;
}

/* Mood page hero panel (panel visual #4 — right side) */
.mood-hero-panel {
  position: relative;
  border-radius: var(--r-l);
  overflow: hidden;
  box-shadow: 0 30px 90px -20px var(--aura-soft), 0 0 0 1px var(--line);
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface);
}
.mood-hero-panel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.mood-hero-panel--fallback {
  background: linear-gradient(140deg, var(--aura-soft), var(--surface-2));
}
.mood-hero-emoji {
  font-size: 4rem;
}

/* Mood page mini stats bawah hero panel */
.mood-hero-mini-stats {
  margin-top: 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  font-size: var(--fs-card);
  color: var(--muted);
  width: fit-content;
}
.mood-hero-mini-stats b {
  color: var(--accent);
  font-weight: 800;
}

/* Mobile: mood hero stack */
@media (max-width: 980px) {
  .mood-page .home-hero,
  .mood-index-page .home-hero {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .mood-index-stats {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto;
    max-width: 340px;
  }
  .mood-index-stats .mood-stat-item:first-child {
    border-bottom: 0;
    border-right: 1px solid var(--line);
  }
  .mood-hero-panel {
    max-width: 280px;
    aspect-ratio: auto;
    min-height: 200px;
  }
}

@media (max-width: 640px) {
  .mood-page .home-hero,
  .mood-index-page .home-hero {
    gap: 10px;
    padding: 8px 0 12px;
  }
  .mood-hero-panel {
    max-width: 240px;
    min-height: 180px;
  }
  .mood-stat-item b {
    font-size: 1.5rem;
  }
}