/* ============================================
   FILE: layout.css — 2026 refresh
   Purpose: Page container, section padding, grid helpers
   Dependencies: base.css
============================================ */

/* ---------- Container ---------- */
.container {
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
  padding-inline: var(--space-6);
}
.container--wide { max-width: var(--page-max); }
.container--narrow { max-width: var(--content-narrow); }

@media (min-width: 768px) {
  .container { padding-inline: var(--space-8); }
}
@media (min-width: 1200px) {
  .container { padding-inline: var(--space-10); }
}

/* ---------- Section Padding ---------- */
/* Mobile: 64 / Tablet: 96 / Desktop: 128 */
.section {
  padding-block: 64px;
  position: relative;
}
@media (min-width: 768px) { .section { padding-block: 96px; } }
@media (min-width: 1200px) { .section { padding-block: 128px; } }

.section--tight { padding-block: 48px; }
@media (min-width: 1200px) { .section--tight { padding-block: 80px; } }

/* Off-screen paint optimization: deep sections defer layout/paint until
   they approach the viewport. Browsers without support fall through. */
.section.diff,
.section.testi,
.section.faq,
.final-cta {
  content-visibility: auto;
  contain-intrinsic-size: 1px 900px;
}

/* ---------- Section Header (eyebrow + headline + sub) ---------- */
.section-header {
  max-width: 860px;
  margin-bottom: var(--space-9);
}
@media (min-width: 1024px) { .section-header { margin-bottom: var(--space-10); } }

.section-header--center {
  margin-inline: auto;
  text-align: center;
}
.section-header__eyebrow { margin-bottom: var(--space-5); }
.section-header__title {
  margin-bottom: var(--space-5);
  font-size: var(--fs-h1);
  line-height: var(--lh-headline);
  letter-spacing: var(--tracking-snug);
  text-wrap: balance;
}
.section-header__sub {
  font-size: var(--fs-lead);
  color: var(--color-text-muted);
  line-height: 1.55;
  max-width: 56ch;
}
.section-header--center .section-header__sub { margin-inline: auto; }

/* ---------- Generic Two-column Layout ---------- */
.split {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-9);
  align-items: center;
}
@media (min-width: 1024px) {
  .split {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: var(--space-11);
  }
  .split--reverse { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
  .split--reverse > :first-child { order: 2; }
  .split--reverse > :last-child { order: 1; }
}

/* ---------- Card Grids ---------- */
.grid {
  display: grid;
  gap: var(--space-5);
}
.grid--2,
.grid--3,
.grid--4 { grid-template-columns: 1fr; }

@media (min-width: 640px) {
  .grid--2,
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--4 { grid-template-columns: repeat(4, 1fr); }
  .grid { gap: var(--space-6); }
}

/* ---------- Visual Wrapper ---------- */
.visual {
  position: relative;
  border-radius: var(--r-2xl);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: linear-gradient(135deg, var(--color-accent-soft) 0%, var(--color-bg-sand) 100%);
  box-shadow: var(--sh-3);
}
.visual__img { width: 100%; height: 100%; object-fit: cover; }
.visual--16-9 { aspect-ratio: 16 / 9; }
.visual--1-1 { aspect-ratio: 1 / 1; }

/* ---------- Section dividers ---------- */
/* Soft horizontal hairline that uses background tone, not stark border */
.section-divider {
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--color-border) 20%,
    var(--color-border) 80%,
    transparent 100%);
  border: 0;
  margin: 0;
}