/* ============================================================
   SCAFOLYA — LAYOUT
   Container, section, grid, dan primitif penataan ruang.
   ------------------------------------------------------------
   ATURAN: layout tidak boleh mengandung warna komponen atau
   dekorasi. Tugasnya hanya mengatur RUANG dan POSISI.
   ============================================================ */

/* ---------- 1. CONTAINER ------------------------------------ */

.container {
  width: 100%;
  max-width: var(--container-xl);
  margin-inline: auto;
  padding-inline: var(--container-gutter);
}

.container-narrow  { max-width: var(--container-md); }
.container-reading { max-width: var(--container-lg); }
.container-wide    { max-width: var(--container-2xl); }
.container-xs      { max-width: var(--container-xs); }

/* Kerangka halaman: header lengket di atas, isi mengisi sisa tinggi. */
.halaman {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}

.utama {
  flex: 1 0 auto;
  padding-block: var(--space-8) var(--space-16);
}

/* ---------- 2. SECTION -------------------------------------- */

.section {
  padding-block: var(--space-section);
}

.section-sm { padding-block: var(--space-section-sm); }

.section-tight {
  padding-block: var(--space-8);
}

.section-alt   { background-color: var(--color-bg-subtle); }
.section-soft  { background: var(--gradient-soft); }
.section-brand {
  background-color: var(--color-bg-brand);
  color: var(--color-text-inverse);
}

.section-glass {
  position: relative;
  border-radius: var(--radius-2xl);
  background-color: var(--glass-panel);
  border: var(--border-thin) solid var(--color-border);
  box-shadow: var(--shadow-glass);
}

@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .section-glass {
    -webkit-backdrop-filter: blur(var(--blur-lg)) saturate(var(--glass-saturate));
    backdrop-filter: blur(var(--blur-lg)) saturate(var(--glass-saturate));
    border-color: var(--glass-border);
    box-shadow: var(--glass-highlight), var(--shadow-glass-md);
  }
}

.section-brand h1,
.section-brand h2,
.section-brand h3,
.section-brand h4 {
  color: var(--color-text-inverse);
}

.section-brand .eyebrow {
  color: var(--amber-300);
}

.section-head {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-width: var(--measure);
  margin-bottom: var(--space-10);
}

.section-head-center {
  align-items: center;
  text-align: center;
  margin-inline: auto;
}

.section-head p {
  font-size: var(--fs-lg);
  line-height: var(--lh-relaxed);
  color: var(--color-text-muted);
}

.section-brand .section-head p {
  color: var(--color-text-inverse-muted);
}

.section-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-8);
}

.section-bar .section-head {
  margin-bottom: 0;
}

/* ---------- 3. GRID ----------------------------------------- */

.grid {
  display: grid;
  gap: var(--gap-grid);
}

.grid-auto {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
}

.grid-auto-sm {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr));
}

.grid-auto-lg {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr));
}

.grid-2 { grid-template-columns: minmax(0, 1fr); }
.grid-3 { grid-template-columns: minmax(0, 1fr); }
.grid-4 { grid-template-columns: minmax(0, 1fr); }

@media (min-width: 36rem) {   /* --bp-sm */
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 48rem) {   /* --bp-md */
  .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 62rem) {   /* --bp-lg */
  .grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.layout-sidebar {
  display: grid;
  gap: var(--space-10);
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}

@media (min-width: 62rem) {   /* --bp-lg */
  .layout-sidebar {
    grid-template-columns: minmax(0, 1fr) 19rem;
  }

  .layout-sidebar-left {
    grid-template-columns: 19rem minmax(0, 1fr);
  }
}

.sidebar-sticky {
  position: sticky;
  top: var(--sticky-offset);
}

.split {
  display: grid;
  gap: clamp(var(--space-8), 4vw, var(--space-16));
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
}

@media (min-width: 62rem) {   /* --bp-lg */
  .split {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Layar kerja (UK-05): kartu soal lengket 5/12 di kiri, jawaban 7/12
   di kanan pada ≥ 1024px; bertumpuk di bawahnya (DEC-043). */
.layout-kerja {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}

@media (min-width: 64rem) {   /* 1024px — komposisi berdampingan */
  .layout-kerja {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: var(--space-8);
  }

  /* Batang gulirnya bergaya kaca dari components.css bagian 26 (DEC-179). Jangan memasang
     scrollbar-width di sini: di Chrome dan Edge sejak versi 121 properti itu mematikan gaya kaca
     dan memunculkan batang gulir bawaan Windows lengkap dengan tombol panahnya. */
  .layout-kerja-soal {
    position: sticky;
    top: var(--sticky-offset);
    max-height: var(--sticky-viewport);
    overflow-y: auto;
  }
}

/* ---------- 4. PRIMITIF PENATAAN ---------------------------- */

.stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.stack-xs { gap: var(--space-1); }
.stack-sm { gap: var(--space-2); }
.stack-lg { gap: var(--space-6); }
.stack-xl { gap: var(--space-10); }

.cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

.cluster-sm { gap: var(--space-2); }
.cluster-lg { gap: var(--space-5); }
.cluster-between { justify-content: space-between; }
.cluster-center  { justify-content: center; }
.cluster-end     { justify-content: flex-end; }
.cluster-start   { align-items: flex-start; }

.center-block {
  margin-inline: auto;
  max-width: var(--measure);
}

.spacer { flex: 1 1 auto; }

/* ---------- 5. RASIO GAMBAR --------------------------------- */

.ratio {
  position: relative;
  overflow: hidden;
  background-color: var(--color-surface-sunken);
}

.ratio > * {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ratio-16-9 { aspect-ratio: 16 / 9; }
.ratio-4-3  { aspect-ratio: 4 / 3; }
.ratio-3-2  { aspect-ratio: 3 / 2; }
.ratio-1-1  { aspect-ratio: 1 / 1; }

/* ---------- 6. PEMISAH ------------------------------------- */

.divider {
  border: none;
  border-top: var(--border-thin) solid var(--color-border);
  margin-block: var(--space-10);
}

/* ---------- 7. UTILITAS RESPONSIF --------------------------- */

@media (max-width: 47.99rem) {
  .hide-mobile { display: none !important; }
}

@media (min-width: 48rem) {
  .hide-desktop { display: none !important; }
}