/* =====================================================================
   LAPISAN RESPONSIF — menyesuaikan lebar, tinggi, dan ukuran teks
   dengan layar HP maupun PC.

   Catatan teknis: piksel CSS sudah otomatis mengikuti kepadatan layar
   (DPI/devicePixelRatio) di browser. Yang perlu diatur adalah LEBAR
   viewport, orientasi, dan jenis input (sentuh atau mouse). Karena itu
   semua ukuran di sini memakai satuan fluid (clamp, min, vw) dan
   breakpoint, bukan angka tetap.

   Beranda (data-page="beranda") SENGAJA tidak disentuh. Semua aturan
   di bawah dibatasi ke halaman lain.
   ===================================================================== */

/* ---------- 0. Aman untuk semua ukuran layar ---------- */
main section.page:not([data-page="beranda"]) img,
main section.page:not([data-page="beranda"]) video,
main section.page:not([data-page="beranda"]) iframe {
  max-width: 100%;
}
main section.page:not([data-page="beranda"]) h1,
main section.page:not([data-page="beranda"]) h2,
main section.page:not([data-page="beranda"]) h3,
main section.page:not([data-page="beranda"]) p,
main section.page:not([data-page="beranda"]) li,
main section.page:not([data-page="beranda"]) a {
  overflow-wrap: anywhere;
}

/* ---------- 1. Kontainer: ruang samping mengikuti lebar layar ---------- */
main section.page:not([data-page="beranda"]) .container {
  padding-left: clamp(16px, 4vw, 48px) !important;
  padding-right: clamp(16px, 4vw, 48px) !important;
}
@media (min-width: 1600px) {
  main section.page:not([data-page="beranda"]) .container {
    max-width: 1360px;
  }
}

/* ---------- 2. Judul & teks: ukuran fluid ---------- */
main section.page:not([data-page="beranda"]) .page-banner {
  padding: clamp(40px, 7vw, 84px) 0 clamp(34px, 5vw, 62px);
}
main section.page:not([data-page="beranda"]) .page-banner .container {
  max-width: min(760px, 100%);
}
main section.page:not([data-page="beranda"]) .page-banner h1 {
  font-size: clamp(24px, 5vw, 46px);
  line-height: 1.15;
}
main section.page:not([data-page="beranda"]) .page-banner p {
  font-size: clamp(14px, 1.5vw, 17.5px);
}
main section.page:not([data-page="beranda"]) h2 {
  font-size: clamp(20px, 3vw, 30px);
  line-height: 1.25;
}

/* ---------- 3. Grid kartu: jumlah kolom mengikuti lebar layar ---------- */
main section.page:not([data-page="beranda"]) .news-grid,
main section.page:not([data-page="beranda"]) .prestasi-grid,
main section.page:not([data-page="beranda"]) .osis-grid,
main section.page:not([data-page="beranda"]) .kompetensi-grid,
main section.page:not([data-page="beranda"]) .guru-grid,
main section.page:not([data-page="beranda"]) .alumni-grid,
main section.page:not([data-page="beranda"]) .gallery-grid,
main section.page:not([data-page="beranda"]) .ekskul-grid,
main section.page:not([data-page="beranda"]) .sosmed-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
  gap: clamp(14px, 2vw, 26px);
}
@media (min-width: 1200px) {
  main section.page:not([data-page="beranda"]) .news-grid,
  main section.page:not([data-page="beranda"]) .prestasi-grid,
  main section.page:not([data-page="beranda"]) .guru-grid,
  main section.page:not([data-page="beranda"]) .alumni-grid,
  main section.page:not([data-page="beranda"]) .gallery-grid {
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  }
}

/* ---------- 4. Tinggi elemen: fluid, tidak memotong teks ---------- */
main section.page:not([data-page="beranda"]) .news-card .thumb {
  height: clamp(150px, 26vw, 240px);
}
main section.page:not([data-page="beranda"]) .news-grid-scroll {
  max-height: min(1180px, 80vh);
  max-height: min(1180px, 80dvh);
}
main section.page:not([data-page="beranda"]) .map-embed iframe {
  min-height: clamp(240px, 42vw, 440px);
  width: 100%;
}

/* ---------- 5. Target sentuh: tombol cukup besar di HP ---------- */
@media (pointer: coarse) {
  main section.page:not([data-page="beranda"]) button,
  main section.page:not([data-page="beranda"]) .btn,
  main section.page:not([data-page="beranda"]) a.btn {
    min-height: 44px;
  }
}

/* ---------- 6. HP kecil (lebar < 360px) ---------- */
@media (max-width: 360px) {
  main section.page:not([data-page="beranda"]) .page-banner h1 {
    font-size: 22px;
  }
  main section.page:not([data-page="beranda"]) .container {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
}

/* ---------- 7. Tablet & PC: lebih lega, tidak mengambang sempit ---------- */
@media (min-width: 900px) {
  main section.page:not([data-page="beranda"]) .page-banner .container {
    max-width: min(900px, 100%);
  }
}