/**
 * layout.css — Grid, container, section spacing.
 */

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

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

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

.section--tight { padding-block: var(--space-12); }
.section--loose { padding-block: var(--space-32); }

.section--surface   { background-color: var(--color-surface); }
.section--surface-2 { background-color: var(--color-surface-2); }
.section--primary {
  background-color: var(--color-primary);
  color: var(--color-text-inverse);
}
.section--primary h1,
.section--primary h2,
.section--primary h3 { color: var(--color-text-inverse); }

.section__header {
  max-width: var(--container-md);
  margin-bottom: var(--space-10);
}

.section__eyebrow {
  display: inline-block;
  margin-bottom: var(--space-3);
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-wider);
  text-transform: uppercase;
  color: var(--color-accent-dark);
}

.section--primary .section__eyebrow { color: var(--color-accent); }

/* Generic responsive grid */
.grid {
  display: grid;
  gap: var(--space-6);
}

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

/* Auto-fit grid — fluid card columns that wrap without media queries */
.grid--auto {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}

@media (max-width: 1024px) {
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  .grid--2,
  .grid--3,
  .grid--4 { grid-template-columns: 1fr; }

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

/* ===========================================================================
   Bento grid — editorial mosaic of varied-size feature modules
   =========================================================================== */
.grid--bento {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: minmax(180px, auto);
  gap: var(--space-5);
}

/* Children opt into spans via modifier classes */
.bento-item            { grid-column: span 1; }
.bento-item--wide      { grid-column: span 2; }
.bento-item--tall      { grid-row: span 2; }
.bento-item--feature   { grid-column: span 2; grid-row: span 2; }
.bento-item--full      { grid-column: 1 / -1; }

/* A common, pleasing default rhythm when no modifiers are set:
   first tile is the hero feature, the rest fill around it. */
.grid--bento.is-auto > :first-child { grid-column: span 2; grid-row: span 2; }

@media (max-width: 1024px) {
  .grid--bento { grid-template-columns: repeat(2, 1fr); }
  .bento-item--feature,
  .bento-item--wide { grid-column: span 2; }
  .bento-item--feature { grid-row: span 1; }
  .grid--bento.is-auto > :first-child { grid-column: span 2; grid-row: span 1; }
}

@media (max-width: 600px) {
  .grid--bento { grid-template-columns: 1fr; grid-auto-rows: auto; }
  .bento-item,
  .bento-item--wide,
  .bento-item--tall,
  .bento-item--feature,
  .bento-item--full { grid-column: span 1; grid-row: span 1; }
}

/* Two-column split feature layout */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-12);
  align-items: center;
}

.split--media-right { direction: ltr; }

@media (max-width: 768px) {
  .split { grid-template-columns: 1fr; gap: var(--space-8); }
}

/* Content + sidebar layout */
.layout-with-sidebar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: var(--space-12);
}

@media (max-width: 1024px) {
  .layout-with-sidebar { grid-template-columns: 1fr; }
}

/* Article prose images get vertical rhythm (measure & styling live in base.css) */
.prose img { margin-block: var(--space-6); }

/* ===========================================================================
   Scroll-reveal — elements fade/rise in as they enter the viewport.
   reveal.js adds `reveal-active` to <html> (so the hidden initial state only
   applies when JS + IntersectionObserver are available — no FOUC, no
   content hidden forever), then toggles `.is-visible` per element.
   =========================================================================== */
.reveal-active .reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity var(--transition-slow),
              transform var(--transition-slow);
  will-change: opacity, transform;
}

.reveal-active .reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* Variant directions */
.reveal-active .reveal--left  { transform: translateX(-32px); }
.reveal-active .reveal--right { transform: translateX(32px); }
.reveal-active .reveal--scale { transform: scale(0.94); }
.reveal-active .reveal--left.is-visible,
.reveal-active .reveal--right.is-visible,
.reveal-active .reveal--scale.is-visible { transform: none; }

/* Stagger children of a container (e.g. grid of cards) */
.reveal-active .reveal-group > * {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--transition-slow),
              transform var(--transition-slow);
}
.reveal-active .reveal-group.is-visible > * {
  opacity: 1;
  transform: none;
}
.reveal-active .reveal-group.is-visible > :nth-child(1) { transition-delay: 0ms; }
.reveal-active .reveal-group.is-visible > :nth-child(2) { transition-delay: 60ms; }
.reveal-active .reveal-group.is-visible > :nth-child(3) { transition-delay: 120ms; }
.reveal-active .reveal-group.is-visible > :nth-child(4) { transition-delay: 180ms; }
.reveal-active .reveal-group.is-visible > :nth-child(5) { transition-delay: 240ms; }
.reveal-active .reveal-group.is-visible > :nth-child(6) { transition-delay: 300ms; }
.reveal-active .reveal-group.is-visible > :nth-child(7) { transition-delay: 360ms; }
.reveal-active .reveal-group.is-visible > :nth-child(8) { transition-delay: 420ms; }

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