/* nd-page-detail.css — perbaikan tata letak halaman detail film.

   Masalah yang diperbaiki (dari audit halaman detail):
   - Di <=980px `.movie-meta` jadi 1 kolom dan `.poster` jadi width:100%.
     Poster rasio 3:4 selebar layar = tinggi ~480px di HP, sehingga JUDUL,
     SINOPSIS, dan tombol "Mulai Tonton" terdorong jauh di bawah fold.
   - Tombol mulai tonton berada SETELAH grid episode, bisa 2-3 layar ke bawah.
   - Sinopsis dirender penuh tanpa batas, mendorong panel episode.

   NOL rename: semua class lama dipertahankan. */

/* ============================================================
   1. HERO: poster ramping di samping judul, bukan menumpuk
   ============================================================ */

@media (max-width: 980px) {
  body.nd-ui .movie-meta {
    grid-template-columns: minmax(0, 38vw) minmax(0, 1fr);
    gap: var(--nd-sp-3);
    align-items: start;
  }
  body.nd-ui .movie-meta .poster,
  body.nd-ui .movie-meta .poster-fallback,
  body.nd-ui .movie-meta .nd-img-fallback.poster { /* nd-allow-ns: menargetkan elemen yang DIBUAT JS global saat poster gagal dimuat — bukan komponen baru */
    inline-size: 100%;
    block-size: auto;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    border-radius: var(--nd-r-3);
    justify-self: stretch;
  }
}

/* Layar sangat sempit: poster sedikit lebih kecil lagi supaya judul
   tetap punya ruang baca yang masuk akal. */
@media (max-width: 400px) {
  body.nd-ui .movie-meta { grid-template-columns: minmax(0, 34vw) minmax(0, 1fr); }
}

/* ============================================================
   2. SINOPSIS: dibatasi, bisa dibuka
   Memakai line-clamp saja (bukan menyembunyikan elemen), sehingga
   SELURUH teks tetap ada di DOM untuk crawler.
   ============================================================ */

body.nd-ui .movie-desc {
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: var(--nd-t2);
}
body.nd-ui .movie-desc:hover,
body.nd-ui .movie-desc:focus-within { -webkit-line-clamp: unset; }

@media (max-width: 980px) {
  body.nd-ui .movie-desc { -webkit-line-clamp: 4; }
}

/* ============================================================
   3. GRID EPISODE
   ============================================================ */

body.nd-ui .episode-item {
  border-radius: var(--nd-r-2);
  background: var(--nd-s2);
  color: var(--nd-t2);
  font: 700 var(--nd-fs-xs) / 1 var(--nd-font-text);
  transition: background-color var(--nd-dur-1) var(--nd-ease-out),
              border-color var(--nd-dur-1) var(--nd-ease-out),
              color var(--nd-dur-1) var(--nd-ease-out);
}
body.nd-ui .episode-item:hover {
  background: var(--nd-s3);
  border-color: var(--nd-line);
  color: var(--nd-t1);
}
body.nd-ui .episode-item:active { transform: scale(.95); }

/* ============================================================
   4. CTA "MULAI TONTON" di HP

   DULU `position: sticky` + `inset-block-end` supaya CTA selalu terjangkau tanpa
   menggulir melewati ratusan tombol episode. Itu CACAT: elemen sticky yang
   disematkan ke bawah tetap menempati lapisan di atas saudaranya, jadi selama
   digulir ia MENUTUPI baris grid yang kebetulan lewat di belakangnya — dilaporkan
   owner: tombol ini menelan EP 31/32/33. Memberi padding bawah pada daftar hanya
   menolong di UJUNG gulungan, tidak di tengahnya, jadi tidak ada jumlah ruang
   yang bisa memperbaiki pola itu. CTA dikembalikan ke alir normal: ia duduk
   sesudah grid dan tidak pernah menutupi apa pun. Keterjangkauan tetap terjaga
   karena tautan "Mulai Tonton Episode 1" juga sudah ada di kepala panel episode.
   ============================================================ */

@media (max-width: 980px) {
  body.nd-ui .watch-first {
    position: static;
    margin-block-start: var(--nd-sp-4);
    display: block;
    inline-size: 100%;
    text-align: center;
    padding-block: var(--nd-sp-3);
    border-radius: var(--nd-r-full);
    background: var(--nd-accent);
    color: var(--nd-t-on-accent);
    font: 800 var(--nd-fs-md) / 1 var(--nd-font-text);
    box-shadow: var(--nd-e3);
    text-decoration: none;
  }
}

/* ============================================================
   5. BREADCRUMB & BLOK SEO
   ============================================================ */

body.nd-ui .breadcrumb {
  color: var(--nd-t3);
  font: 500 var(--nd-fs-xs) / 1.5 var(--nd-font-text);
}
body.nd-ui .breadcrumb a { color: var(--nd-t2); text-decoration: none; }
body.nd-ui .breadcrumb a:hover { color: var(--nd-accent-ink, var(--nd-accent-400)); }

body.nd-ui .surface {
  background: var(--nd-s1);
  border-radius: var(--nd-r-4);
}

/* Rail "Drama Lainnya": judul kartu dulu di-display:none sehingga pengguna
   hanya melihat deretan poster tanpa nama. Markup & teksnya sudah dirender
   server (20 <h3>), jadi menampilkannya tidak menambah biaya apa pun. */
body.nd-ui .watch-history-card-body { display: block; }
body.nd-ui .watch-history-card-title {
  font: 600 var(--nd-fs-2xs) / 1.3 var(--nd-font-text);
  color: var(--nd-t2);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-width: 0;
  will-change: auto;
}

@media (prefers-reduced-motion: reduce) {
  body.nd-ui .episode-item:active { transform: none; }
}

/* ============================================================
   6. PROPORSI HERO DI LAYAR KECIL
   ============================================================ */

@media (max-width: 980px) {
  /* Judul film di HP sebelumnya mewarisi ukuran desktop sehingga memakan
     3 baris dan mendorong meta ke bawah. Diskalakan terhadap lebar layar. */
  body.nd-ui .movie-meta h1,
  body.nd-ui .movie-title {
    font-size: clamp(1.25rem, 5.2vw, 1.75rem);
    line-height: var(--nd-lh-tight, 1.16);
    margin-block: 0 var(--nd-sp-2);
  }

  /* Tag mengalir menyamping, bukan menumpuk satu per baris. */
  body.nd-ui .movie-meta .movie-tags,
  body.nd-ui .movie-meta .detail-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--nd-sp-2);
  }
  body.nd-ui .movie-meta .movie-tag,
  body.nd-ui .movie-meta .detail-tag {
    font-size: var(--nd-fs-2xs);
    padding: 3px 9px;
  }

  /* Tombol berbagi: satu baris rapat, tidak membungkus jadi dua baris. */
  body.nd-ui .share-buttons {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--nd-sp-2);
  }
  body.nd-ui .share-btn { inline-size: 2.25rem; block-size: 2.25rem; }
}

/* ============================================================
   7. BARIS ATAS: KARTU METADATA & "YOU MAY LIKE" SATU TINGGI

   nd-detail.css memberi .layout `align-items:start`, jadi tiap kolom
   berhenti di tinggi isinya sendiri dan kedua kartu tidak pernah rata.
   Dua tinggi itu memang tak pernah cocok:
     - Kolom saran SELALU 649px di lebar layar mana pun (kolomnya dipaku
       320px, 6 kartu rasio 3/4 = 2x3 x 192px + judul + padding).
     - Kartu metadata ikut isi: 338px (film 1 episode tanpa sinopsis),
       499-575px (film 60-100 episode di 1920px), tapi 768px di 1366px
       dan 3.803px untuk film 1.018 episode.
   Jadi di 1920px kolom kanan menjulang 74-311px, sementara di 1366px ke
   bawah justru kolom KIRI yang menjulang sampai ribuan piksel.

   Perbaikan: baris pertama dijadikan SATU tinggi, lalu tiap kolom diberi
   satu area elastis yang menelan selisihnya - kiri: grid episode,
   kanan: baris kartu saran. Tanpa area elastis itu, stretch cuma
   memindahkan masalah jadi lubang kosong di dasar kartu yang lebih pendek.

   Hanya >=981px: di bawah itu .layout sudah 1 kolom (kedua kartu
   bertumpuk), tidak ada yang perlu disamakan.
   ============================================================ */

@media (min-width: 981px) {
  body.nd-ui .layout { align-items: stretch; }

  /* Kolom kiri jadi kolom flex. HANYA panel episode yang boleh melar;
     slot iklan dan blok meta dikunci `flex:0 0 auto` supaya tidak ikut
     diregangkan/dikempiskan saat baris berubah tinggi. */
  body.nd-ui .movie-info { display: flex; flex-direction: column; min-block-size: 0; }
  body.nd-ui .movie-info > * { flex: 0 0 auto; }
  body.nd-ui .movie-info > .episode-panel {
    flex: 1 1 auto;
    min-block-size: 0;
    display: flex;
    flex-direction: column;
  }
  body.nd-ui .movie-info > .episode-panel > * { flex: 0 0 auto; }

  /* JEBAKAN: .watch-first itu inline-flex. Begitu panel jadi flex-column,
     sumbu silangnya = lebar, dan stretch bawaan memanjangkan tombol jadi
     selebar kartu (terukur 1.378px di 1920px). Ditahan di sini. */
  body.nd-ui .movie-info > .episode-panel > .watch-first { align-self: flex-start; }

  /* Grid episode = area elastis sekaligus area gulir sendiri.
     Dua masalah sekaligus: (1) film ratusan episode tidak lagi menyeret
     kolom kanan ikut jadi ribuan piksel, (2) tombol "Mulai Tonton" tidak
     lagi terkubur di bawah ratusan tombol EP.
     Yang dibatasi TINGGINYA, bukan jumlahnya: semua <a> episode tetap
     dirender di DOM dan tetap bisa dijangkau dengan menggulir. */
  body.nd-ui .movie-info > .episode-panel > .episode-list {
    flex: 1 1 auto;
    min-block-size: 0;
    max-block-size: 22rem;   /* ~8 baris tombol EP; selebihnya digulir */
    align-content: flex-start;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--nd-line-strong) transparent;
  }

  /* JEBAKAN KEDUA, dari blok 2 di file ini: .movie-desc melepas
     -webkit-line-clamp saat di-hover. Selama baris masih ragged itu cuma
     memanjangkan kolom kiri, tapi begitu baris jadi SATU tinggi sinopsis
     panjang ikut MENYERET kolom kanan - terukur 896px -> 2.045px di 981px,
     dan kartu saran 144x274 jadi 144x657 (poster 3/4 teregang jadi 0,22).
     Teks tetap dibuka PENUH, hanya digulir di dalam kotak setinggi 6 baris
     (1.58em x 6 = tinggi clamp-nya sendiri, jadi saat diam nol perubahan),
     sehingga tinggi baris sama sekali tidak bergerak saat kursor melintas. */
  body.nd-ui .movie-desc:hover,
  body.nd-ui .movie-desc:focus-within {
    max-block-size: calc(1.58em * 6);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--nd-line-strong) transparent;
  }

  /* Dua area gulir baru di atas memakai scrollbar tipis yang sama dengan
     sisa situs (lihat .menu-dropdown-panel di nd-layout.css); scrollbar OS
     bawaan terlalu tebal dan terang di dalam kartu gelap. */
  body.nd-ui .movie-info > .episode-panel > .episode-list::-webkit-scrollbar,
  body.nd-ui .movie-desc::-webkit-scrollbar { width: 8px; }
  body.nd-ui .movie-info > .episode-panel > .episode-list::-webkit-scrollbar-thumb,
  body.nd-ui .movie-desc::-webkit-scrollbar-thumb {
    background: var(--nd-line-strong);
    border-radius: 999px;
  }

  /* Kolom saran ikut tinggi baris. Kelebihan tinggi dipakai MENINGGIKAN
     kartu (grid-auto-rows 1fr), bukan melebarkan sela antar-baris: sela
     yang melar (terukur sampai 103px) bikin kolom terlihat bolong. */
  body.nd-ui .you-may-like-top { display: flex; flex-direction: column; min-block-size: 0; }
  body.nd-ui .you-may-like-top > h3 { flex: 0 0 auto; }
  body.nd-ui .you-may-like-top > .you-may-like-grid {
    flex: 1 1 auto;
    min-block-size: 0;
    grid-auto-rows: minmax(0, 1fr);
  }

  /* block-size:100% mengalahkan aspect-ratio 3/4 (nd-card.css §11) HANYA
     saat tinggi barisnya sudah pasti. Waktu grid diukur intrinsik nilainya
     siklik sehingga dianggap auto, rasio 3/4 kembali berlaku dan tetap
     menjadi tinggi MINIMUM kolom ini (649px) - itulah yang menahan baris
     agar tidak mengkerut. (Kalau aspect-ratio dihapus, kolom ini runtuh:
     <img>-nya position:absolute jadi tak menyumbang tinggi sama sekali.)
     inline-size:100% WAJIB: tanpa itu aspect-ratio malah menghitung LEBAR
     dari tinggi baru (144px -> 174px) dan kartu meluber keluar kolomnya. */
  body.nd-ui .you-may-like-top > .you-may-like-grid > .you-may-like-card {
    block-size: 100%;
    inline-size: 100%;
  }
}