/*
 * VarshaKrishi Design System — layout.css
 * Grid system, containers, and layout utilities.
 * All values reference tokens from tokens.css.
 */

/* ─────────────────────────────────────────────────────────────
 * CONTAINER
 * Centered, max-width constrained, horizontally padded.
 * ───────────────────────────────────────────────────────────── */

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

.container--wide {
  max-width: var(--grid-max-wide);
}

.container--narrow {
  max-width: var(--grid-max-narrow);
}

.container--flush {
  padding-inline: 0;
}

/* ─────────────────────────────────────────────────────────────
 * SECTION SPACING
 * ───────────────────────────────────────────────────────────── */

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

.section--sm {
  padding-block: clamp(3rem, 2rem + 3vw, 5rem);
}

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

.section--bordered {
  border-top: 1px solid var(--color-border-default);
}

/* ─────────────────────────────────────────────────────────────
 * RESPONSIVE GRIDS
 * CSS Grid-based. Flexbox used only for single-axis layouts.
 * CSS Grid chosen because the site has complex multi-column
 * layouts (spec tables, feature grids, team cards) that require
 * explicit two-dimensional control. Flexbox is used for
 * single-axis components (nav, button groups, tag lists).
 * ───────────────────────────────────────────────────────────── */

.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--grid-gutter);
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--grid-gutter);
}

.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--grid-gutter);
}

/* Auto-fit grids — columns collapse when they can't fit */
.grid-auto-sm {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--grid-gutter);
}

.grid-auto-md {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--grid-gutter);
}

.grid-auto-lg {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: var(--grid-gutter);
}

/* Responsive collapse */
@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; }
}

/* ─────────────────────────────────────────────────────────────
 * STACK
 * Vertical flex layout with consistent gap.
 * ───────────────────────────────────────────────────────────── */

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

.stack--sm { gap: var(--space-2); }
.stack--lg { gap: var(--space-5); }
.stack--xl { gap: var(--space-8); }

/* ─────────────────────────────────────────────────────────────
 * CLUSTER
 * Horizontal flex wrap — for tag lists, button groups, chips.
 * ───────────────────────────────────────────────────────────── */

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

.cluster--sm { gap: var(--space-1); }
.cluster--lg { gap: var(--space-3); }

/* ─────────────────────────────────────────────────────────────
 * SPLIT
 * Two-column layout with optional asymmetric ratio.
 * Default: 50/50. Use --split-ratio to override.
 * ───────────────────────────────────────────────────────────── */

.split {
  display: grid;
  grid-template-columns: var(--split-ratio, 1fr 1fr);
  gap: var(--grid-gutter);
  align-items: start;
}

.split--center { align-items: center; }

/* Common asymmetric splits */
.split--1-2 { --split-ratio: 1fr 2fr; }
.split--2-1 { --split-ratio: 2fr 1fr; }
.split--1-3 { --split-ratio: 1fr 3fr; }
.split--3-1 { --split-ratio: 3fr 1fr; }

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

/* ─────────────────────────────────────────────────────────────
 * FULL BLEED
 * Breaks out of any parent container to span full viewport width.
 * ───────────────────────────────────────────────────────────── */

.full-bleed {
  width: 100vw;
  margin-inline: calc(50% - 50vw);
}

/* ─────────────────────────────────────────────────────────────
 * NEWSPAPER GRID
 * Cells separated by 1px background color — no borders needed.
 * Used for feature grids and spec comparison panels.
 * ───────────────────────────────────────────────────────────── */

.newspaper-grid {
  display: grid;
  gap: 1px;
  background: var(--color-border-default);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.newspaper-grid__cell {
  background: var(--color-bg-surface);
  padding: var(--space-5);
  transition: background var(--duration-fast) var(--ease-out);
}

.newspaper-grid__cell:hover {
  background: var(--color-bg-elevated);
}

/* ─────────────────────────────────────────────────────────────
 * SCROLL REVEAL SYSTEM
 * Initial state — JS adds .is-visible when element enters viewport.
 * ───────────────────────────────────────────────────────────── */

[data-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity   var(--duration-xslow) var(--ease-out-expo),
    transform var(--duration-xslow) var(--ease-out-expo);
}

[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

[data-reveal][data-delay="1"] { transition-delay: 80ms; }
[data-reveal][data-delay="2"] { transition-delay: 160ms; }
[data-reveal][data-delay="3"] { transition-delay: 240ms; }
[data-reveal][data-delay="4"] { transition-delay: 320ms; }
[data-reveal][data-delay="5"] { transition-delay: 400ms; }

/* Reduced motion: skip animation, show immediately */
@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ─────────────────────────────────────────────────────────────
 * DISPLAY TYPOGRAPHY HELPERS
 * Applied to headings that need the serif display font.
 * ───────────────────────────────────────────────────────────── */

.display {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--weight-regular);
  color: var(--color-text-primary);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}

.display em {
  font-style: italic;
  color: var(--color-brand-primary);
}

/* ─────────────────────────────────────────────────────────────
 * VISUALLY HIDDEN (accessibility)
 * Hides content visually but keeps it accessible to screen readers.
 * ───────────────────────────────────────────────────────────── */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}