/* ==========================================================================
   Responsive — desktop-first, empat breakpoint.

   1280 — grid mulai sempit, rail label mengecil
   1024 — rail dilepas: label naik ke atas heading, mosaik work dipecah
    768 — satu kolom, baris service jadi tumpukan
    520 — pemadatan terakhir
   ========================================================================== */

/* ==========================================================================
   <= 1280px
   ========================================================================== */
@media (max-width: 1280px) {
  :root {
    --gutter: 20px;
  }

  .hero__panel { grid-column: 3 / span 10; }

  .section--problem .problem__statement { grid-column: 4 / span 9; }
  .section--problem .problem__body { grid-column: 4 / span 8; }

  .services__head,
  .why__head,
  .work__head { grid-column: 4 / span 9; }

  .about__title { grid-column: 4 / span 9; }
  .about__body { grid-column: 4 / span 8; }
  .about__actions { grid-column: 4 / span 9; }

  .index__link { grid-template-columns: 52px 80px minmax(0, 1fr) auto; gap: var(--space-5); }
  .index__icon { width: 80px; height: 80px; }
}

/* ==========================================================================
   <= 1024px — rail label dilepas
   Di bawah lebar ini kolom rail tinggal ~150px. Label mono muat, tapi heading
   di sebelahnya jadi terlalu sempit untuk display serif. Lebih baik label naik
   ke atas heading dan seluruh blok memakai lebar penuh.
   ========================================================================== */
@media (max-width: 1024px) {
  :root {
    --grid-cols: 8;
  }

  html { scroll-padding-top: 96px; }

  .section--hero {
    padding-top: clamp(120px, 18vw, 170px);
  }

  .hero__panel { grid-column: 1 / -1; }

  /* Label + heading: dua baris penuh, bukan dua kolom. */
  .section--problem .eyebrow,
  .section--services .eyebrow,
  .section--why .eyebrow,
  .section--work .eyebrow,
  .section--about .eyebrow {
    grid-column: 1 / -1;
    padding-top: 0;
    margin-bottom: var(--space-5);
  }

  .section--problem .problem__statement,
  .section--problem .problem__body,
  .services__head,
  .why__head,
  .work__head,
  .about__title,
  .about__body,
  .about__actions { grid-column: 1 / -1; }

  .services__head,
  .why__head,
  .work__head { margin-bottom: var(--space-7); }

  /* Kolom Why: tiga jadi dua, offset baseline dibuang. Offset hanya bekerja
     kalau ketiganya sejajar — begitu wrap, dia cuma jadi celah acak. */
  .why__item { grid-column: span 4; }
  .why__item:nth-child(2) .why__body,
  .why__item:nth-child(3) .why__body { margin-top: 0; }
  .why__list { row-gap: var(--space-8); }

  /* Mosaik work dipecah jadi tumpukan; bingkai tinggi kehilangan span dua
     baris karena tidak ada lagi baris kedua di sebelahnya. */
  .work-card--feature { grid-column: 1 / -1; grid-row: auto; }
  .work-card--tall { grid-column: 1 / span 5; grid-row: auto; min-height: 300px; }
  .work-card--wide { grid-column: 6 / span 3; grid-row: auto; min-height: 300px; }
  .work-card--feature .work-card__body { min-height: 0; gap: var(--space-7); }

  .step__body { grid-template-columns: clamp(72px, 10vw, 110px) minmax(0, 1fr) 40px; }
}

/* ==========================================================================
   <= 768px — satu kolom
   ========================================================================== */
@media (max-width: 768px) {
  :root {
    --grid-cols: 4;
    --gutter: 16px;
    --section-y: clamp(64px, 13vw, 88px);
  }

  html { scroll-padding-top: 84px; }

  .site-header { padding-inline: var(--page-pad); }
  .site-header__menu-label { display: none; }
  .site-header__menu { padding-inline: var(--space-3); }

  .section--hero { padding-top: 128px; padding-bottom: 72px; }

  .hero__panel {
    padding: var(--space-6) var(--space-5);
  }

  .hero__actions { gap: var(--space-2); }
  .hero__actions .btn { flex: 1 1 100%; }

  /* Baris service jadi blok: nomor + ikon di satu baris atas, teks di bawah,
     CTA menutup. Grid empat kolom yang lama akan memaksa deskripsi jadi
     kolom selebar ~120px. */
  .index__link {
    grid-template-columns: 56px minmax(0, 1fr);
    grid-template-areas:
      "num  icon"
      "text text"
      "cta  cta";
    align-items: center;
    gap: var(--space-4);
    padding-block: var(--space-6);
  }

  .index__num { grid-area: num; }
  .index__icon { grid-area: icon; width: 64px; height: 64px; justify-self: start; }
  .index__text { grid-area: text; }
  .index__cta { grid-area: cta; }

  /* translateX pada judul tidak berguna di layar sentuh — tidak ada hover. */
  .index__link:hover .index__title { transform: none; }

  .why__item { grid-column: 1 / -1; }
  .why__list { row-gap: var(--space-7); }
  .why__body { gap: var(--space-4); }

  .work-card--feature,
  .work-card--tall,
  .work-card--wide { grid-column: 1 / -1; }

  .work-card--tall,
  .work-card--wide {
    min-height: 0;
    /* Bingkai kosong tanpa isi akan runtuh ke tinggi nol begitu grid berhenti
       menyamakan tinggi baris. Aspect ratio menjaganya tetap terlihat. */
    aspect-ratio: 4 / 3;
  }

  .work-card__desc { max-width: none; }
  .meta__row { grid-template-columns: 1fr; row-gap: var(--space-1); }

  .step__body {
    grid-template-columns: 64px minmax(0, 1fr);
    align-items: center;
    gap: var(--space-4);
    padding-block: var(--space-6);
  }

  .step__label { display: none; }
  .step__num { font-size: 32px; }
}

/* ==========================================================================
   <= 520px
   ========================================================================== */
@media (max-width: 520px) {
  :root {
    --fs-body-1: 16px;
  }

  .nav-overlay { width: 100vw; }

  .hero__panel::before,
  .hero__panel::after { display: none; }

  .index__link {
    grid-template-columns: 44px minmax(0, 1fr);
    margin-inline: 0;
    padding-inline: 0;
  }

  .index__icon { width: 56px; height: 56px; }
}

/* Layar sentuh: hover tidak pernah terpicu, tapi :hover di CSS bisa
   "menempel" setelah tap di sebagian browser. Efek sorot baris dimatikan
   supaya baris tidak tertinggal dalam keadaan tersorot. */
@media (hover: none) {
  .index__link:hover::before { opacity: 0; }
  .index__link:hover::after { transform: scaleX(0); }
  .index__link:hover .index__icon { transform: none; }
  .btn:hover:not(:disabled)::before { transform: scaleX(0); }
  .btn:hover:not(:disabled) { color: inherit; }
  .btn--solid:hover:not(:disabled) { color: var(--c-paper); }
}