/* ============================================================
   KAMPUNG PROKLIM LESTARI — responsive.css
   Breakpoint overrides on top of style.css (desktop-first base).
   ============================================================ */

/* ---------- Tablet (<=1024px) ---------- */
@media (max-width:1024px){
  .hero__inner{ grid-template-columns:1fr; }
  .hero__visual{ order:-1; max-width:420px; margin-inline:auto; }
  .hero__title{ max-width:none; }

  .tentang__inner{ grid-template-columns:1fr; }
  .tentang__visual{ order:-1; }

  .footer__grid{ grid-template-columns:1fr 1fr; }
  .footer__brand{ grid-column:1 / -1; }
}

/* ---------- Nav collapses to hamburger (<=1340px) ----------
   Eight nav labels (incl. "Kelembagaan & Kolaborasi") plus the
   brand lockup need more room than they get below ~1340px; measured
   directly against the built header so the switch lands exactly
   where the row would otherwise wrap onto two lines. */
@media (max-width:1340px){
  .nav-toggle{ display:flex; }

  .nav__list{
    position:fixed;
    inset:var(--header-h) 0 0 0;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    background:var(--off-white);
    padding:1.25rem clamp(1.25rem,4vw,2.5rem) 2rem;
    overflow-y:auto;
    opacity:0;
    transform:translateY(-8px);
    pointer-events:none;
    transition:opacity .25s ease, transform .25s ease;
  }
  .nav__list.is-open{
    opacity:1;
    transform:translateY(0);
    pointer-events:auto;
  }
  .nav__list li{ width:100%; border-bottom:1px solid var(--line); }
  .nav__list a{ display:block; padding:.95rem 0; }
  .nav__list a::after{ display:none; }

  body.nav-open{ overflow:hidden; }
}

/* ---------- Mobile (<=640px) ---------- */
@media (max-width:640px){
  .hero__actions{ flex-direction:column; align-items:stretch; }
  .hero__actions .btn{ width:100%; }

  .profil__stats{ flex-wrap:wrap; row-gap:1.5rem; }
  .stat{
    flex:1 1 50%;
    border-left:none;
    padding-inline:0;
  }
  .stat:nth-child(even){ padding-left:1rem; }

  .profil__note{ flex-direction:column; align-items:flex-start; }
  .profil__photo{ width:100%; max-width:260px; }

  .program__row{ gap:1rem; }
  .program__row:hover{ padding-left:0; }

  .footer__grid{ grid-template-columns:1fr; }
  .footer__brand{ grid-column:auto; }
}