/* ==========================================================================
   Alfamedia — responsive.css
   Penyesuaian tata letak per breakpoint. Diuji pada 1440, 1280, 1024, 768,
   430, 390, dan 360 piksel.
   ========================================================================== */

/* ---------- ≤ 1160px: rapatkan kolom hero ---------- */
@media (max-width: 1160px) {
  .c-hero__grid {
    grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
  }

  .c-header__brand img {
    width: 140px;
  }
}

/* ---------- ≤ 1024px: fakta dua kolom, split lebih rapat ---------- */
@media (max-width: 1024px) {
  :root {
    --header-height: 4.25rem;
  }

  .l-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .l-facts > *:nth-child(2n) {
    border-right: 0;
  }

  .l-facts > *:nth-child(n + 3) {
    margin-top: var(--space-5);
    padding-top: var(--space-5);
    border-top: 1px solid var(--line-hairline);
  }

  .l-facts > *:nth-child(2n + 1) {
    padding-left: 0;
  }

  .l-split {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Yang menempel adalah ISI pembungkusnya, bukan pembungkusnya sendiri —
     jadi sifat sticky harus dilepas dari elemen yang sama. */
  .l-split__sticky > * {
    position: static;
  }

  .c-hero__title {
    max-width: 18ch;
  }
}

/* ---------- ≤ 900px: hero satu kolom, profil bertumpuk ---------- */
@media (max-width: 900px) {
  .c-hero__grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto;
    gap: clamp(2rem, 1.2rem + 2.6vw, 3rem);
  }

  .c-hero__intro,
  .c-hero__grid > .c-hero__portraits,
  .c-hero__grid > .c-hero__meta {
    grid-column: 1;
    grid-row: auto;
    align-self: start;
  }

  .c-hero__title,
  .c-hero__lead {
    max-width: 26ch;
  }

  .c-hero__lead {
    max-width: 56ch;
  }

  .c-hero__portraits {
    max-width: min(100%, 34rem);
  }

  .c-hero__weave {
    width: 88%;
    opacity: 0.4;
  }

  .l-profile-row,
  .l-profile-row--reverse {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-6);
  }

  .l-profile-row--reverse > .l-profile-row__media {
    order: 0;
  }

  .l-profile-row__media {
    max-width: 17.5rem;
  }

  .l-section__head {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: var(--space-5);
  }

  .l-section__aside {
    padding-bottom: 0;
  }

  /* Kotak kategori: tiga kolom terlalu sempit di bawah 900px. */
  .c-roadmap__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ---------- ≤ 720px: komposisi kelas ditumpuk ---------- */
@media (max-width: 720px) {
  /* Pita 2:1 membuat enam kotak jadi terlalu kecil di ponsel. Dua bidang
     besar dibiarkan penuh selebar layar, deret meja tetap satu baris. */
  .c-classroom__grid {
    aspect-ratio: auto;
    grid-template-rows: auto;
  }

  .c-classroom__slot:nth-child(1),
  .c-classroom__slot:nth-child(2) {
    grid-column: span 6;
  }

  .c-classroom__slot:nth-child(1) { aspect-ratio: 3 / 2; }
  .c-classroom__slot:nth-child(2) { aspect-ratio: 16 / 9; }
  .c-classroom__slot:nth-child(n + 3) { aspect-ratio: 1 / 1; }
}

/* ---------- ≤ 768px: navigasi mobile ---------- */
@media (max-width: 768px) {
  .c-nav {
    display: none;
  }

  .c-menu-toggle {
    display: inline-flex;
  }

  .c-header__brand img {
    width: 132px;
  }

  .c-media-grid {
    gap: 0;
  }
}

/* ---------- Footer: turun bertahap mengikuti lebar ---------- */
@media (max-width: 1024px) {
  .c-footer__brand {
    grid-column: 1 / span 5;
  }

  .c-footer__col--nav {
    grid-column: 6 / span 3;
  }

  .c-footer__col--about {
    grid-column: 9 / span 4;
  }
}

@media (max-width: 820px) {
  .c-footer__top {
    row-gap: clamp(2rem, 1.4rem + 2vw, 2.75rem);
  }

  .c-footer__brand {
    grid-column: 1 / span 12;
  }

  .c-footer__desc {
    max-width: 44ch;
  }

  .c-footer__col--nav {
    grid-column: 1 / span 5;
  }

  .c-footer__col--about {
    grid-column: 7 / span 6;
  }

  /* Kolom navigasi memulai baris baru, jadi tidak perlu garis selokan. */
  .c-footer__col--nav::before {
    display: none;
  }
}

@media (max-width: 560px) {
  .c-footer__col--nav,
  .c-footer__col--about {
    grid-column: 1 / span 12;
  }

  .c-footer__col::before {
    display: none;
  }

  .c-footer__col--about {
    padding-top: var(--space-6);
    border-top: 1px solid var(--line-on-deep);
  }

  .c-footer__bottom {
    align-items: flex-start;
  }
}

/* ---------- ≤ 640px: satu kolom penuh ---------- */
@media (max-width: 640px) {
  .l-facts {
    grid-template-columns: minmax(0, 1fr);
  }

  .l-facts > * {
    border-right: 0;
    padding-right: 0;
  }

  .l-facts > * + * {
    padding-left: 0;
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px solid var(--line-hairline);
  }

  .c-hero__meta {
    flex-wrap: wrap;
    gap: var(--space-2);
  }

  .c-hero__actions {
    gap: var(--space-4);
  }

  .c-hero__actions .c-button {
    width: 100%;
  }

  .c-filter__button {
    min-height: 44px;
  }

  .c-focus-item {
    grid-template-columns: 2.25rem minmax(0, 1fr);
    gap: var(--space-3);
  }

  .c-roadmap__list {
    grid-template-columns: minmax(0, 1fr);
  }

  .c-media-empty__head {
    grid-template-columns: minmax(0, 1fr);
  }

  .c-media-empty__head picture {
    grid-row: auto;
  }

  /* Angka katalog: bertumpuk dengan garis atas, bukan kolom bergaris samping. */
  .c-stat-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .c-stat {
    padding-right: var(--space-4);
  }

  .c-stat:nth-child(2n) {
    border-right: 0;
    padding-right: 0;
  }

  .c-stat:nth-child(2n + 1) {
    padding-left: 0;
  }

  .c-stat:nth-child(n + 3) {
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px solid var(--line-hairline);
  }

  .c-detail__actions {
    gap: var(--space-4);
  }

  .c-detail__actions .c-button {
    width: 100%;
  }

  .c-profile__meta {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4);
  }

  .c-footer__bottom {
    flex-direction: column;
    gap: var(--space-4);
  }
}

/* ---------- ≤ 460px: perangkat kecil ---------- */
@media (max-width: 460px) {
  :root {
    --gutter: 1.25rem;
  }

  .c-hero__portraits {
    gap: var(--space-3);
  }

  .c-hero__portraits .c-portrait:nth-child(2) {
    margin-top: var(--space-5);
  }

  /* Bidang navy dirapatkan supaya tidak memakan lebar di layar sempit. */
  .c-portrait__plane {
    top: -0.625rem;
    left: -0.625rem;
  }

  .c-portrait__caption {
    padding-left: var(--space-3);
  }

  .c-hero__mark span {
    font-size: 0.75rem;
  }

  .c-media-empty {
    padding-inline: var(--space-5);
  }
}

/* ---------- Cetak ---------- */
@media print {
  .c-header,
  .c-drawer,
  .c-hero__weave,
  .c-skip-link {
    display: none;
  }

  body {
    background: #fff;
    color: #000;
  }
}