/*
 * Penyesuaian HP & tablet untuk semua halaman (dimuat oleh app/Views/partials/boot.php, pola rumahquran-web).
 * Elemen ditandai di template dengan atribut data-r="...". Tampilan laptop/desktop tidak berubah.
 */

/* ---------- Navbar: menu ☰ di HP & tablet (7 menu + tombol baru muat satu baris mulai ±1020px) ---------- */
[data-r="menu"] { display: none; }
@media (max-width: 1020px) {
  [data-r="nav"] { display: none !important; }
  [data-r="menu"] { display: flex !important; }
  [data-r="navbar"] { gap: 12px !important; justify-content: space-between; }
}
@media (max-width: 560px) {
  /* Tombol "Daftar Sekarang" pindah ke dalam panel menu agar navbar lega */
  [data-r="cta"] { display: none !important; }
  [data-r="navbar"] { padding: 8px 16px !important; }
  [data-r="logo"] img { height: 50px !important; }
}

/* ---------- HP ---------- */
@media (max-width: 640px) {
  /* Statistik Beranda 2×2, bukan 4 baris panjang */
  [data-r="stats"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  [data-r="stats"] > * { flex-direction: column; align-items: flex-start !important; gap: 10px !important; padding: 18px !important; border-right: 0 !important; border-bottom: 1px solid #EEF3FC; }
  [data-r="stats"] > *:nth-child(odd) { border-right: 1px solid #EEF3FC !important; }
  [data-r="stats"] > *:nth-last-child(-n+2) { border-bottom: 0; }
  [data-r="stats"] img { width: 40px !important; height: 40px !important; }

  /* Jarak tepi section 28px → 18px: konten lebih lebar di layar kecil.
     Catatan: React menulis ulang atribut style dengan spasi ("padding: 72px 28px"), jadi selektor memakai spasi. */
  #dc-root [style*="padding: 72px 28px"] { padding-left: 18px !important; padding-right: 18px !important; }

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

  /* Target sentuh ≥ 40px: tautan footer & tautan teks kecil ("Lihat Semua Kegiatan →") */
  footer[data-r="foot"] div[style*="flex-direction: column"] { gap: 0 !important; }
  footer[data-r="foot"] a { display: inline-flex; align-items: center; min-height: 40px; }
  [data-r="link"] { display: inline-flex; align-items: center; min-height: 40px; }
}

/* ---------- Panel menu (dibuat oleh assets/js/menu.js) ---------- */
.tt-menu { position: fixed; inset: 0; z-index: 9000; }
.tt-menu[hidden] { display: none; }
.tt-menu__backdrop { position: absolute; inset: 0; background: rgba(15, 36, 86, .45); opacity: 0; transition: opacity .25s; backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); }
.tt-menu__panel {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(88vw, 360px);
  display: flex; flex-direction: column; gap: 6px; overflow-y: auto;
  padding: calc(env(safe-area-inset-top, 0px) + 14px) 18px calc(env(safe-area-inset-bottom, 0px) + 20px);
  background: #fff; color: #16337F; font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  box-shadow: -24px 0 60px -30px rgba(15, 36, 86, .55);
  transform: translateX(100%); transition: transform .3s cubic-bezier(.2, .8, .2, 1);
}
.tt-menu.open .tt-menu__backdrop { opacity: 1; }
.tt-menu.open .tt-menu__panel { transform: none; }
.tt-menu__head { display: flex; align-items: center; justify-content: space-between; padding-bottom: 10px; margin-bottom: 4px; border-bottom: 1px solid #E1ECFB; }
.tt-menu__head img { height: 46px; width: auto; }
.tt-menu__close { width: 44px; height: 44px; border-radius: 99px; border: 1px solid #DCEAFC; background: #fff; color: #16337F; font-size: 18px; line-height: 1; cursor: pointer; }
.tt-menu__nav { display: flex; flex-direction: column; }
.tt-menu__nav a {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  min-height: 52px; padding: 0 14px; border-radius: 14px;
  color: #16337F; font-size: 16px; font-weight: 700; text-decoration: none;
}
.tt-menu__nav a::after { content: "→"; color: #BFD4F7; font-weight: 600; }
.tt-menu__nav a:hover, .tt-menu__nav a:focus-visible { background: #EEF4FF; outline: none; }
.tt-menu__nav a[aria-current="page"] { background: linear-gradient(135deg, #2563EB, #1846B8); color: #fff; }
.tt-menu__nav a[aria-current="page"]::after { color: #DCE8FF; }
.tt-menu__actions { margin-top: auto; padding-top: 16px; display: flex; flex-direction: column; gap: 10px; }
.tt-menu__btn {
  display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; border-radius: 14px;
  background: linear-gradient(135deg, #2563EB, #1846B8); color: #fff !important; font-weight: 800; font-size: 15px; text-decoration: none;
  box-shadow: 0 12px 24px -12px rgba(29, 78, 216, .7);
}
.tt-menu__btn--wa { background: #fff; color: #1D4ED8 !important; border: 1.5px solid #BFD4F7; box-shadow: none; }
.tt-menu__btn--wa img { width: 26px; height: 26px; }

/* ---------- Tombol ☰ di navbar ---------- */
.tt-burger {
  align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 14px; cursor: pointer;
  border: 1px solid #DCEAFC; background: rgba(238, 245, 255, .9); color: #16337F; flex: none;
}
.tt-burger svg { width: 22px; height: 22px; }

@media (prefers-reduced-motion: reduce) { .tt-menu__panel, .tt-menu__backdrop { transition: none; } }

/* Breadcrumb halaman artikel: area sentuh lebih tinggi di HP */
@media (max-width: 640px) { [data-r="crumb"] a { display: inline-flex; align-items: center; min-height: 36px; } }

/* ======================================================================
 * Perbaikan tampilan HP / iPad / rasio lain (hasil pemeriksaan 360–1366px)
 * ====================================================================== */

/* Navbar tablet: tombol "Daftar Sekarang" merapat ke tombol ☰, tidak melayang di tengah */
@media (max-width: 1020px) { [data-r="cta"] { margin-left: auto; } }

/* Tulisan tangan dekoratif di hero menumpuk foto/chip di layar sempit → disembunyikan */
@media (max-width: 640px) { [data-r="note"] { display: none !important; } }

/* Tulisan tangan kartu PSB (left:-30px) terpotong tepi kartu → digeser masuk */
@media (max-width: 1100px) { [data-r="psb-note"] { left: 8px !important; } }

/* Program: tabel perbandingan → kartu per program (semua kolom terlihat tanpa geser ke samping) */
@media (max-width: 820px) {
  [data-r="cmp"] { overflow: visible !important; }
  [data-r="cmp"] > div { min-width: 0 !important; }
  [data-r="cmp-head"] { display: none !important; }
  [data-r="cmp-row"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; padding: 10px 6px 14px; }
  [data-r="cmp-row"] > div { padding: 6px 14px !important; }
  [data-r="cmp-row"] > div:first-child { grid-column: 1 / -1; padding-top: 10px !important; }
  [data-r="cmp-row"] > div:nth-child(5), [data-r="cmp-row"] > div:nth-child(6) { grid-column: 1 / -1; }
  [data-r="cmp-row"] > div:nth-child(n+2)::before {
    display: block; margin-bottom: 2px; font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #1D4ED8;
  }
  [data-r="cmp-row"] > div:nth-child(2)::before { content: "Usia"; }
  [data-r="cmp-row"] > div:nth-child(3)::before { content: "Durasi"; }
  [data-r="cmp-row"] > div:nth-child(4)::before { content: "Kapasitas"; }
  [data-r="cmp-row"] > div:nth-child(5)::before { content: "Fokus"; }
  [data-r="cmp-row"] > div:nth-child(6)::before { content: "Jadwal"; }
}

/* Program: 7 kartu kegiatan yang memanjang ke samping → bertumpuk ke bawah di HP (kartu terakhir tidak hilang) */
@media (max-width: 640px) {
  [data-r="acts"] { flex-direction: column !important; height: auto !important; gap: 8px !important; }
  [data-r="acts"] > [data-open] { flex: none !important; min-width: 0 !important; height: 60px; transition: height .45s cubic-bezier(.2,.7,.2,1) !important; }
  [data-r="acts"] > [data-open="ya"] { height: 280px; }
  [data-r="acts-label"] { writing-mode: horizontal-tb !important; transform: translateY(-50%) !important; left: 18px !important; top: 50%; bottom: auto !important; font-size: 15px !important; }
}

/* Kegiatan: kalender tahunan 3 kolom di HP (6 kolom terlalu sempit); garis linimasa disembunyikan */
@media (max-width: 640px) {
  [data-r="cal"] { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; row-gap: 18px !important; }
  [data-r="cal-line"] { display: none !important; }
}

/* Kontak: tab langkah formulir — label panjang turun baris, angka tetap terlihat */
@media (max-width: 640px) {
  [data-r="steps"] > button { flex-direction: column !important; gap: 6px !important; padding: 10px 6px !important; text-align: center; min-width: 0; }
  [data-r="steps"] > button > span:last-child { font-size: 12.5px !important; line-height: 1.25; text-align: center !important; }
}

/* Galeri: polaroid hero sedikit dikecilkan di HP kecil agar tidak terpotong tepi */
@media (max-width: 400px) { [data-r="polaroid"] { width: 126px !important; } }