/* site.css — helper layout halaman (project-level), dimuat SETELAH m-ui.css
   dan custom.css (lihat BaseLayout). Aturan keras (T6):
   - HANYA token --mui-* untuk warna/spacing-semantik/radius/ease. TIDAK ADA
     hex/rgb/hsl literal di sini, termasuk di :root.
   - Nilai ukuran murni (rem/px non-warna) BOLEH dipakai untuk spacing/grid
     karena m-ui tidak menyediakan token spacing/gap semantik (--mui-space-x
     atau --mui-gap-x; dicek via grep m-ui/css/m-ui.css sebelum file ini ditulis).
   - Ini file layout primitives, BUKAN tempat styling komponen spesifik. */

/* ── Container & section rhythm ─────────────────────────────────── */
.container {
  width: 100%;
  max-width: 72rem;
  margin-inline: auto;
  padding-inline: 1.5rem;
}

/* Sticky footer: the page body is a flex column (Nav + main + Footer are its
   flow children) so the footer stays flush at the bottom of the viewport even
   when a page's content is short — it never floats up mid-screen. */
body.mui-app {
  display: flex;
  flex-direction: column;
}

#main-content {
  flex: 1 0 auto;
}

.section {
  padding-block: clamp(3rem, 6vw, 6rem);
}

.section--tight {
  padding-block: clamp(1.5rem, 3vw, 3rem);
}

/* ── Hero vertical rhythm ────────────────────────────────────────── */
.hero {
  display: grid;
  gap: 1.5rem;
  padding-block: clamp(4rem, 8vw, 8rem) clamp(3rem, 6vw, 6rem);
}

.hero > * + * {
  margin-block-start: 0;
}

/* ── Generic gap/stack helpers ───────────────────────────────────── */
.stack {
  display: grid;
  gap: var(--stack-gap, 1rem);
}

.stack--sm {
  --stack-gap: 0.5rem;
}

.stack--lg {
  --stack-gap: 2rem;
}

/* ── Responsive card grid ───────────────────────────────────────── */
.grid-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1.5rem;
}

.grid-cards > * {
  border-radius: var(--mui-radius-l);
}

/* ── Reveal-on-scroll (partner: src/components/Reveal.astro) ───────
   Default state = hidden/translated; JS adds `.revealed` when the element
   enters the viewport (see Reveal.astro script). Progressive-enhancement
   safety net below (no-JS / no-IO) lives in the component itself via a
   <noscript> block; the reduced-motion guard here is the second, CSS-only
   line of defense so content is never stuck hidden. */
.reveal {
  opacity: 0;
  transform: translateY(1rem);
  transition:
    opacity var(--mui-slow) var(--mui-ease),
    transform var(--mui-slow) var(--mui-ease);
  transition-delay: var(--reveal-delay, 0ms);
}

.reveal.revealed {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ── Bento grid (Stitch-redesign primitive, used from Wave 1's T3-T6) ──
   12-column grid; span helpers below name how many columns an item takes
   on desktop. Collapses to a single column at <=640px, where every span
   helper resets to full width — this grid never relies on m-ui's
   .mui-grid breakpoints (those force 2 columns at <=480px, too cramped
   for long localized copy). Gap reuses the same 1.5rem gutter as
   .grid-cards above for visual consistency across the site's grids. */
.bento {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 1.5rem;
}

.bento__s4,
.bento__s5,
.bento__s7,
.bento__s8,
.bento__s12 {
  min-width: 0;
}

.bento__s4 {
  grid-column: span 4;
}

.bento__s5 {
  grid-column: span 5;
}

.bento__s7 {
  grid-column: span 7;
}

.bento__s8 {
  grid-column: span 8;
}

.bento__s12 {
  grid-column: span 12;
}

@media (max-width: 640px) {
  .bento {
    grid-template-columns: 1fr;
  }

  .bento__s4,
  .bento__s5,
  .bento__s7,
  .bento__s8,
  .bento__s12 {
    grid-column: 1 / -1;
  }
}

/* ── Band (full-bleed contrast section) ─────────────────────────────
   .band sits directly in the page flow (a sibling of .container-wrapped
   sections, not nested inside one) so it naturally spans the full body
   width with no vw-based bleed hack (body/main carry no side padding —
   see BaseLayout). Wrap its inner content in a normal .container to keep
   text readable. Glass-fill-2 reads as a contrast band in both dark and
   light themes since it is a token, not a fixed color. */
.band {
  width: 100%;
  background: var(--mui-glass-fill-2);
  border-block: 1px solid var(--mui-glass-line);
  padding-block: clamp(3.5rem, 7vw, 6.5rem);
}

.band--flush {
  border-block-width: 0;
}

/* ── Ticker / marquee band ───────────────────────────────────────────
   Markup: .ticker > .ticker__track > two .ticker__group children with
   identical content (the second copy is the seamless-loop duplicate,
   give it aria-hidden="true"). The track's total width is 200% of one
   group, so animating to -50% loops without a visible seam. Reduced
   motion turns the animation off and wraps the (single, non-duplicated)
   content statically instead of leaving a frozen half-scrolled track. */
.ticker {
  overflow: hidden;
  width: 100%;
}

.ticker__track {
  display: flex;
  width: max-content;
  animation: ticker-scroll 26s linear infinite;
}

.ticker__group {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 2.5rem;
  padding-inline-end: 2.5rem;
  font-family: var(--mui-font-mono);
  white-space: nowrap;
}

@keyframes ticker-scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ticker {
    overflow-x: auto;
  }

  .ticker__track {
    animation: none;
    width: 100%;
    flex-wrap: wrap;
  }

  .ticker__group {
    flex-wrap: wrap;
    white-space: normal;
  }

  .ticker__group[aria-hidden='true'] {
    display: none;
  }
}

/* ── Eyebrow number (small mono pillar-index label, e.g. "01") ──────── */
.eyebrow-num {
  display: inline-block;
  font: 700 12px/1 var(--mui-font-mono);
  letter-spacing: 0.12em;
  color: var(--mui-accent);
}

/* ── Split hero (Stitch-redesign Wave 3, T1) ─────────────────────────
   Two-column hero primitive: content column beside a media column,
   collapsing to a single stacked column below 900px (wider breakpoint
   than .bento's 640px since hero media needs more room to read well
   before it's forced to full width). Consumers set `--split-cols` to
   bias the column widths (e.g. text slightly wider than media); default
   is an even 1fr/1fr split. */
.split-hero {
  display: grid;
  align-items: center;
  gap: clamp(2rem, 5vw, 4rem);
  grid-template-columns: var(--split-cols, minmax(0, 1fr) minmax(0, 1fr));
  min-width: 0;
}

@media (max-width: 900px) {
  .split-hero {
    grid-template-columns: 1fr;
  }
}