/*
 * Penyesuaian HP & tablet untuk Beranda (dimuat oleh app/Views/partials/boot.php; pola rumahquran-web / tartila-web).
 * Elemen ditandai di template dengan atribut data-r="...". Tampilan laptop/desktop (> 960px) tidak berubah.
 * Gaya desain ditulis inline, jadi penimpaan di sini memakai !important.
 * Catatan: React menulis ulang atribut style dengan spasi ("font-size: 11.5px"), jadi selektor [style*=] memakai spasi.
 */

/* ---------- Jendela donasi: bisa digulir bila lebih tinggi dari layar (HP pendek / mendatar) ---------- */
[data-r="modal"] { overflow-y: auto; }
@media (max-height: 720px) {
  [data-r="modal"] { place-items: start center !important; }
  [data-r="modal-foto"] { height: 110px !important; }
}

/* ---------- Navbar: menu ☰ (6 tautan + tombol Donasi baru muat satu baris mulai ±960px) ---------- */
@media (max-width: 960px) {
  /* Layar sentuh (iPad & HP): area sentuh ≥ 40px tanpa mengubah tampilan */
  [data-r="fokus-titik"] button { padding: 16px 0 !important; background-clip: content-box !important; }
  [data-r="foot"] a { display: inline-flex !important; align-items: center; min-height: 40px; }
  [data-r="foot"] div[style*="flex-direction: column"] { gap: 0 !important; }

  [data-r="nav"] { display: none !important; }
  [data-r="cta"] { margin-left: auto !important; min-height: 44px !important; box-sizing: border-box !important; }
  [data-r="menu"] { display: grid !important; }
}
@media (max-width: 520px) {
  [data-r="navbar"] { height: 64px !important; gap: 8px !important; }
  [data-r="logo"] img { height: 44px !important; }
  [data-r="cta"] { padding: 0 14px !important; }
  [data-r="cta-x"] { display: none; }   /* "Donasi Sekarang" → "Donasi" agar logo tetap utuh */
}

/* ---------- Tablet tegak & HP (iPad 768–834px termasuk): hero bertumpuk, sorotan 2×2 ---------- */
@media (max-width: 900px) {
  /* Teks di atas, foto di bawah (memudar ke atas). Tinggi foto mengikuti lebar layar. */
  [data-r="hero-foto"] {
    inset: auto 0 0 0 !important; width: 100% !important; height: clamp(340px, 56vw, 480px) !important; transform: none !important;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 32%); mask-image: linear-gradient(180deg, transparent 0, #000 32%);
  }
  [data-r="hero-tirai"] { background: linear-gradient(0deg, #fff 0%, rgba(255, 255, 255, 0) 20%) !important; }
  [data-r="hero-isi"] { min-height: 0 !important; padding-top: 36px !important; padding-bottom: calc(clamp(340px, 56vw, 480px) - 30px) !important; }
  [data-r="hero-h1"] { white-space: normal !important; font-size: clamp(34px, 10vw, 60px) !important; }
  [data-r="hero-kutip"] { font-size: 19px !important; bottom: 92px !important; padding: 8px 12px !important; }

  /* Sorotan 2×2, bukan 3 + 1 */
  [data-r="sorotan"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  [data-r="sorotan"] > * { border-right: 0 !important; border-bottom: 1px solid #eef1f9; }
  [data-r="sorotan"] > *:nth-child(odd) { border-right: 1px solid #eef1f9 !important; }
  [data-r="sorotan"] > *:nth-last-child(-n+2) { border-bottom: 0; }

}

/* ---------- Lencana tagline di layar sangat sempit ---------- */
@media (max-width: 400px) {
  [data-r="tagline"] { font-size: 11px !important; letter-spacing: .1em !important; }
}

/* ---------- HP mendatar (layar pendek): header & hero diringkas agar isi tidak tertutup judul raksasa ---------- */
@media (max-width: 960px) and (max-height: 500px) {
  [data-r="navbar"] { height: 60px !important; }
  [data-r="logo"] img { height: 44px !important; }
  [data-r="hero-isi"] { padding-top: 20px !important; padding-bottom: 250px !important; }
  [data-r="hero-h1"] { font-size: 40px !important; margin-top: 12px !important; }
  [data-r="hero-foto"] { height: 290px !important; }
  [data-r="hero-kutip"] { display: none !important; }
}

/* ---------- HP & tablet kecil ---------- */
@media (max-width: 760px) {
  /* Fokus program: panel ditumpuk; yang aktif terbuka, lainnya jadi strip judul */
  [data-r="fokus-titik"] { display: none !important; }   /* indikator otomatis tidak dipakai: panel berganti hanya bila disentuh */
  [data-r="fokus-wrap"] { flex-direction: column !important; height: auto !important; gap: 10px !important; }
  [data-r="fokus-panel"] { flex: none !important; min-width: 0 !important; height: 78px !important; transition: height .6s cubic-bezier(.2, .8, .2, 1) !important; }
  [data-r="fokus-panel"][data-aktif="ya"] { height: 480px !important; }
  [data-r="fokus-vbox"] { top: 0 !important; bottom: 0 !important; left: 78px !important; right: 56px !important; justify-content: flex-start !important; align-items: center !important; }
  [data-r="fokus-v"] { writing-mode: horizontal-tb !important; transform: none !important; font-size: 20px !important; white-space: normal !important; line-height: 1.1; }

  /* Blok donasi: foto di bawah teks, memudar dari atas (bukan dari kiri) */
  [data-r="donasi-foto"] img { -webkit-mask-image: linear-gradient(180deg, transparent, #000 40%) !important; mask-image: linear-gradient(180deg, transparent, #000 40%) !important; }
}

/* ---------- HP ---------- */
@media (max-width: 640px) {
  /* Sorotan 2×2 dengan ikon di atas teks (kolom sempit) */
  [data-r="sorotan"] > * { flex-direction: column; align-items: flex-start !important; gap: 10px !important; padding: 16px !important; }
  [data-r="sorotan"] > * > span:first-child { width: 44px !important; height: 44px !important; }
  [data-r="sorotan"] > * > span:last-child > span:first-child { font-size: 18px !important; }

  /* Label sangat kecil dari desain (11–12.5px) dinaikkan agar terbaca di layar kecil */
  #dc-root [style*="font-size: 11px"], #dc-root [style*="font-size: 11.5px"] { font-size: 12px !important; }
  #dc-root [style*="font-size: 12.5px"] { font-size: 13px !important; }
}