/* ==========================================================================
   RESPONSIVE.CSS — Breakpoint & adaptasi perangkat
   KKN Tematik Universitas Nurtanio Bandung 2026 · Kelompok 07 · Desa Cipada
   --------------------------------------------------------------------------
   Pendekatan: MOBILE FIRST. style.css sudah menulis tata letak dasar yang
   fleksibel (grid auto-fit + clamp()), sehingga berkas ini hanya memuat
   penyesuaian pada titik pecah tertentu.

   Titik pecah yang dipakai:
     ≥ 1600px  Desktop besar / iMac
     ≥ 1280px  Desktop
     ≥ 1024px  Laptop
     ≥  768px  Tablet
     ≤  767px  Mobile
     ≤  480px  Mobile kecil
     ≤  360px  Foldable tertutup (Galaxy Fold / Flip cover)
     Khusus    Layar lipat terbuka, lanskap pendek, cetak
   ========================================================================== */

/* ==========================================================================
   ≥ 1600px — DESKTOP BESAR
   Ruang lebih longgar, tipografi hero dinaikkan.
   ========================================================================== */
@media (min-width: 1600px) {
  :root {
    --maxw: 1440px;
    --section-y: 150px;
  }
  .gal-grid { grid-auto-rows: 220px; }
  .hero-facts { min-width: 260px; }
}

/* ==========================================================================
   ≤ 1279px — LAPTOP
   ========================================================================== */
@media (max-width: 1279px) {
  .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
  .nav-menu { gap: 12px; }
  .nav-menu a { font-size: 12.5px; }
}

/* ==========================================================================
   ≤ 1023px — TABLET
   Navigasi berpindah ke drawer, kisi menyempit.
   ========================================================================== */
@media (max-width: 1023px) {
  :root { --nav-h: 64px; }

  /* Sembunyikan menu horizontal, tampilkan hamburger */
  .nav-menu { display: none; }
  .nav-burger { display: grid; }

  .about-grid { grid-template-columns: 1fr; gap: var(--space-6); }
  /* Gambar mengikuti rasio aslinya; figur dipusatkan agar seimbang. */
  .about-figure { max-width: 720px; margin-inline: auto; }

  .contact-grid { grid-template-columns: 1fr; }

  .gal-grid { grid-template-columns: repeat(3, 1fr); }

  /* Panel data hero pindah ke aliran normal agar tidak menabrak teks.
     .hero diubah menjadi block: sebagai flex container, .hero-facts akan
     menjadi flex item kedua dan terdorong keluar layar. */
  .hero { display: block; }
  .hero-body { padding-bottom: var(--space-6); }
  .hero-facts {
    position: static;
    margin: 0 var(--gutter) 96px;
    width: auto;
    max-width: 460px;
    min-width: 0;
  }

  /* Grafik elevasi + widget cuaca menjadi satu kolom */
  .split-grid { grid-template-columns: 1fr; }

  .stat + .stat::before { display: none; }
}

/* ==========================================================================
   ≤ 767px — MOBILE
   Timeline sejarah menjadi vertikal, tabel bisa digulir, ukuran font turun.
   ========================================================================== */
@media (max-width: 767px) {
  :root {
    --section-y: 60px;
    --gutter: 18px;
  }

  .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--space-6); }
  .footer-brand { grid-column: 1 / -1; }

  .gal-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 150px;
  }
  /* Sel lebar dipaksa normal agar tidak terlalu dominan di layar kecil */
  .gal-cell.w2 { grid-column: span 2; }
  .gal-cell.h2 { grid-row: span 1; }

  .trip-specs { grid-template-columns: 1fr 1fr; }

  /* ---- TIMELINE: HORIZONTAL → VERTIKAL ---- */
  .tl-track {
    flex-direction: column;
    overflow-x: visible;
    scroll-snap-type: none;
    gap: 0;
    padding-left: 34px;
    padding-bottom: 0;
  }
  /* Rel vertikal tunggal */
  .tl::before {
    content: "";
    position: absolute;
    left: 9px;
    top: 10px;
    bottom: 10px;
    width: 2px;
    background: var(--border-strong);
    border-radius: 2px;
  }
  .tl-item {
    flex: 1 1 auto;
    width: 100%;
    padding-top: 0;
    padding-bottom: var(--space-5);
  }
  .tl-item::before { display: none; }         /* garis horizontal dimatikan */
  .tl-dot {
    top: 26px;
    left: -34px;
    transform: none;
    width: 18px;
    height: 18px;
  }
  .tl-item:hover .tl-dot,
  .tl-item.is-on .tl-dot { transform: scale(1.25); }
  .tl-era {
    position: static;
    transform: none;
    display: block;
    margin-bottom: 6px;
  }
  .tl-nav { display: none; }                   /* tak perlu tombol geser */

  /* Kartu program: node lebih rapat */
  .prog-item { padding-left: 52px; }
  .prog-node { width: 38px; height: 38px; font-size: 15px; }
  .prog-rail { left: 18px; }

  /* Widget & panel */
  .weather-grid { grid-template-columns: repeat(2, 1fr); }
  .weather-top { flex-direction: row; align-items: center; }
  .wx-ico { width: 66px; height: 66px; }

  .stat-strip { padding: var(--space-5); gap: var(--space-4); }

  /* Dock audio & tombol atas jangan bertumpuk */
  .audio-dock { left: 14px; bottom: 14px; padding: 7px 7px 7px 12px; }
  .audio-dock .meta { display: none; }
  .audio-tracks { display: none; }
  .to-top { right: 14px; bottom: 14px; }

  /* Lightbox: tombol navigasi ke bawah agar mudah dijangkau jempol */
  .lbox-prev { left: 50%; top: auto; bottom: 22px; transform: translateX(-118%); }
  .lbox-next { right: 50%; top: auto; bottom: 22px; transform: translateX(118%); }
  .lbox img { max-height: 62vh; }

  .quiz-actions { flex-direction: column-reverse; align-items: stretch; }
  .quiz-actions .btn { width: 100%; }

  .cta-band { border-radius: var(--r-lg); }

  /* Hero: teks lebih rapat, panel fakta penuh lebar */
  .hero-title { font-size: clamp(2.6rem, 15vw, 4.4rem); }
  /* width:auto (bukan 100%) agar margin kiri-kanan tidak menambah lebar
     total dan memicu scroll horizontal di layar sempit. */
  .hero-facts { width: auto; max-width: none; }
  .hero-actions .btn { flex: 1 1 auto; justify-content: center; }
}

/* ==========================================================================
   ≤ 480px — MOBILE KECIL
   ========================================================================== */
@media (max-width: 480px) {
  /* Kapsi figur: buang garis pemisah, biarkan meta turun ke baris baru */
  .fig-caption { flex-wrap: wrap; gap: 10px var(--space-3); }
  .fig-caption .rule { display: none; }
  .fig-caption .meta { width: 100%; padding-left: 46px; }

  :root { --nav-h: 58px; }

  .site-nav { top: 10px; width: calc(100% - 20px); padding: 8px 8px 8px 12px; }
  .site-nav.is-scrolled { top: 6px; }
  .nav-brand img { height: 36px; }
  .nav-brand-txt strong { font-size: 17px; }
  .nav-brand-txt small { font-size: 8px; letter-spacing: 0.14em; }
  .icon-btn { width: 34px; height: 34px; font-size: 13px; }
  .nav-burger { width: 36px; height: 36px; }
  .nav-tools { gap: 5px; }
  /* Brand boleh menyusut agar tombol di kanan tidak terdorong keluar pil navbar */
  .nav-brand { flex-shrink: 1; min-width: 0; }
  .nav-brand-txt { min-width: 0; }
  .nav-brand-txt strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  /* Ruang terbatas: sakelar "kurangi animasi" tetap tersedia di halaman,
     namun disembunyikan dari navbar agar brand tidak terpotong. */
  .nav-tools [data-motion-toggle] { display: none; }

  .hero-eyebrow { font-size: 8.5px; letter-spacing: 0.1em; padding: 6px 12px 6px 10px; }
  .hero-sub { letter-spacing: 0.14em; }

  .footer-grid { grid-template-columns: 1fr; }
  .footer-logos { gap: 10px; }
  .logo-item { width: 100%; }

  .gal-grid { grid-auto-rows: 132px; gap: 8px; }

  .philo-grid { gap: 10px; }
  .philo-card { padding: var(--space-5) var(--space-4); }

  .quiz { padding: 20px 16px; }
  .quiz-q { font-size: 1.3rem; }
  .opt { padding: 13px 14px; gap: 11px; }
  .badge-award { width: 108px; height: 108px; }
  .badge-award i { font-size: 42px; }

  .data-table { min-width: 720px; }

  .share-row .share-btn { flex: 1 1 auto; justify-content: center; }
  .social-row { gap: 8px; }
  .social-pill { padding: 10px 14px; }
}

/* ==========================================================================
   ≤ 360px — FOLDABLE TERTUTUP (Galaxy Fold cover screen, jam pintar lebar)
   Sasaran: tetap terbaca pada lebar 280–360px tanpa scroll horizontal.
   ========================================================================== */
@media (max-width: 360px) {
  :root {
    --gutter: 14px;
    --section-y: 48px;
    --fs-body: 0.92rem;
  }

  .hero-title { font-size: 2.15rem; letter-spacing: 0.02em; }
  .hero-sub { font-size: 0.8rem; letter-spacing: 0.1em; }
  .hero-lede { font-size: 0.9rem; }
  .hero-actions { flex-direction: column; }
  .hero-actions .btn { width: 100%; }

  /* Semua kisi menjadi satu kolom */
  .gal-grid { grid-template-columns: 1fr; grid-auto-rows: 190px; }
  .gal-cell.w2 { grid-column: span 1; }
  .weather-grid { grid-template-columns: 1fr; }
  .trip-specs { grid-template-columns: 1fr; }
  .stat-strip { grid-template-columns: 1fr; }

  .sec-title { font-size: 1.65rem; }
  .btn { padding: 12px 20px; }

  .mdpl-legend { gap: 6px; }
  .mdpl-legend .item { padding: 6px 11px; font-size: 9.5px; }

  .footer-brand h3 { font-size: 32px; }
  .to-top { width: 40px; height: 40px; }

  /* Navbar: sisakan brand ringkas + hamburger saja */
  .site-nav { padding: 6px 6px 6px 10px; }
  .nav-brand img { height: 30px; }
  .nav-brand-txt strong { font-size: 14px; }
  .nav-brand-txt small { display: none; }
  .nav-tools #navAudio { display: none; }
  .icon-btn { width: 30px; height: 30px; font-size: 12px; }
  .nav-burger { width: 32px; height: 32px; }

  /* Kartu program: node lebih kecil, teks tetap lega */
  .prog-item { padding-left: 42px; }
  .prog-node { width: 32px; height: 32px; font-size: 13px; }
  .prog-rail { left: 15px; }
  .prog-card { padding: var(--space-4); }
  .prog-meta { gap: 8px; }
  .prog-meta .m { font-size: 10px; }

  /* Panel data hero menyesuaikan lebar layar */
  .hero-facts { padding: 14px 16px; margin-inline: var(--gutter); }
  .hero-facts .val { font-size: 24px; }

  /* Kartu cuaca & grafik: kurangi padding dalam */
  .weather-card, .chart-card, .form-card { padding: var(--space-4); }
  .quiz { padding: 16px 13px; }
}

/* ==========================================================================
   FOLDABLE TERBUKA — layar hampir persegi (mis. Fold dibuka: 768×1076)
   Rasio aspek mendekati 1 pada lebar sedang.
   ========================================================================== */
@media (min-width: 600px) and (max-width: 900px) and (min-aspect-ratio: 3/4) and (max-aspect-ratio: 4/3) {
  .hero { min-height: 84svh; }
  .about-grid { grid-template-columns: 1fr 1fr; }
  .gal-grid { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 170px; }
  .trip-grid { grid-template-columns: repeat(2, 1fr); }
  .umkm-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Deteksi lipatan vertikal (dual-screen / posture flat) */
@media (horizontal-viewport-segments: 2) {
  .about-grid,
  .contact-grid { grid-template-columns: 1fr; }
  .shell { padding-inline: 28px; }
}

/* ==========================================================================
   LANSKAP PENDEK — ponsel diputar, hero jangan memakan seluruh layar
   ========================================================================== */
@media (max-height: 520px) and (orientation: landscape) {
  .hero { min-height: 128svh; align-items: flex-end; }
  .hero-body { padding-top: calc(var(--nav-h) + 28px); padding-bottom: 40px; }
  .hero-title { font-size: 2.3rem; }
  .scroll-cue { display: none; }
  .hero-facts { display: none; }
  .drawer { padding-top: calc(var(--nav-h) + 16px); }
  .drawer a { padding: 9px 4px; font-size: 20px; }
}

/* ==========================================================================
   LAYAR SENTUH — hilangkan efek yang bergantung hover
   ========================================================================== */
@media (hover: none) {
  .slider-btn { opacity: 1; }               /* tombol slider selalu terlihat */
  .gal-cap { opacity: 1; transform: none; } /* keterangan galeri selalu tampil */
  .gal-cell::after { opacity: 0.55; }
  .trip-card:hover,
  .umkm-card:hover,
  .team-card:hover,
  .news-card:hover,
  .philo-card:hover { transform: none; }
  .shine::after { display: none; }
}

/* ==========================================================================
   MODE KONTRAS TINGGI
   ========================================================================== */
@media (prefers-contrast: more) {
  :root {
    --border: rgba(43, 45, 46, 0.34);
    --border-strong: rgba(43, 45, 46, 0.55);
    --text-muted: var(--ash-600);
    --text-faint: var(--ash-500);
  }
  .topo::before { opacity: 0.2; }
  .btn { border: 2px solid currentColor; }
  .hero-veil { background: linear-gradient(180deg, rgba(22,24,26,0.75) 0%, rgba(22,24,26,0.5) 40%, rgba(22,24,26,0.85) 100%); }
}

/* ==========================================================================
   CETAK — versi hemat tinta untuk laporan KKN
   ========================================================================== */
@media print {
  @page { margin: 14mm; }

  html { font-size: 11pt; }
  body { background: #fff; color: #000; }

  /* Sembunyikan elemen interaktif & dekoratif */
  .site-nav, .drawer, .scrim, .read-bar, .to-top, .audio-dock, .cursor-glow,
  .leaves, .mist-band, .hero-birds, .hero-clouds, .hero-clouds--far,
  .hero-mist, .hero-mist--low, .hero-rays, .scroll-cue, .lbox,
  #loader, .gal-filter, .slider-btn, .slider-dots, .quiz-actions,
  .share-row, .tl-nav, .map-hint { display: none !important; }

  .topo::before { display: none; }

  .hero, .footer, .sec-deep, .cta-band, .story {
    background: #fff !important;
    color: #000 !important;
    min-height: auto;
  }
  .hero-title, .sec-title, .footer-brand h3 { color: #000 !important; }
  .hero-body { padding: 0 0 12mm; }

  /* Kartu menjadi kotak bergaris agar jelas saat dicetak */
  .trip-card, .umkm-card, .team-card, .news-card, .quote-card,
  .philo-card, .info-card, .prog-card, .chart-card, .quiz {
    border: 1px solid #999 !important;
    box-shadow: none !important;
    break-inside: avoid;
    page-break-inside: avoid;
  }

  a { color: #000 !important; text-decoration: underline; }
  /* Tampilkan URL agar tautan tetap berguna di kertas */
  .footer-links a::after,
  .social-pill::after { content: " (" attr(href) ")"; font-size: 8pt; }

  .sec { padding-block: 8mm; }
  .data-table { min-width: 0; font-size: 9pt; }
  img { max-height: 70mm; object-fit: contain; }
}