/**
 * Layout system – one source of truth for width, gutters, section padding, and rhythm.
 *
 * BASELINE AUDIT (key selectors controlling layout before this file):
 * - Container width: .wrap, .container use max-width: var(--fs-max); padding: var(--container-pad).
 *   .site-container uses max-width: var(--fs-max); padding-left/right: var(--pad) (different from container-pad).
 * - Section padding: .section, .band use padding: var(--section-pad) 0 (section-pad = s32/s40/s48).
 * - Card spacing: .card has padding var(--s24); .card-grid has gap var(--s16); .faq-list gap var(--s12).
 *   Stacked <section class="card"> siblings often have no wrapper gap (browser default block spacing).
 * - Checker layout: #results, #compare, #business-widget full-bleed; .stickee-outer max-width var(--fs-max);
 *   .stickee-wrap contains iframe; filters/results live inside iframe (stickee widget).
 */

:root {
  --container-max: 1320px;
  --gutter: clamp(16px, 2.2vw, 28px);
  --section-y: clamp(22px, 4.5vw, 56px);
  --hero-y: clamp(28px, 5.5vw, 84px);
  --stack-1: 8px;
  --stack-2: 12px;
  --stack-3: 16px;
  --stack-4: 24px;
  --stack-5: 32px;
  --radius-1: 12px;
  --radius-2: 16px;
  --border: 1px solid rgba(0, 0, 0, 0.1);
  --card-pad: clamp(14px, 2.5vw, 22px);
}

/* Layout primitives (fs- prefix to avoid clashing with existing .container, .section, .card, .stack) */
.fs-container {
  width: min(var(--container-max), calc(100% - (var(--gutter) * 2)));
  margin-inline: auto;
}

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

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

.fs-stack-tight {
  gap: var(--stack-3);
}

.fs-stack-loose {
  gap: var(--stack-5);
}

.fs-card {
  border: var(--border);
  border-radius: var(--radius-2);
  padding: var(--card-pad);
  background: #fff;
}

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

/* Card stack spacing: any .card or section.card following another inside .wrap gets consistent gap */
.wrap > .card + .card,
.wrap > section.card + section.card {
  margin-top: var(--stack-4);
}

/* Vertical rhythm for long-form content */
.prose h1,
.prose h2,
.prose h3 {
  margin: 0;
}

.prose p,
.prose ul,
.prose ol {
  margin: 0;
}

.prose > * + * {
  margin-top: var(--stack-3);
}

.prose h2 {
  margin-top: var(--stack-5);
}

.prose h3 {
  margin-top: var(--stack-4);
}

/* Hero alignment: inner content uses same width as body (.wrap in hero uses same --container-max, --gutter) */
.hero .fs-container,
.fs-hero__inner .fs-container,
.fs-hero__inner.wrap {
  width: min(var(--container-max), calc(100% - (var(--gutter) * 2)));
  margin-inline: auto;
}
.hero { padding-block: var(--hero-y); }
.fs-hero__inner { padding-block: var(--hero-y); }

.band--tight { padding: clamp(18px, 3.5vw, 40px) 0; }
.band--compact { padding: clamp(14px, 3vw, 32px) 0; }

/* Checker wrapper: better use of width; filters/results are inside iframe so this wraps the widget strip */
.checker-layout {
  display: grid;
  gap: var(--stack-4);
  align-items: start;
}

@media (min-width: 960px) {
  .checker-layout {
    grid-template-columns: 1fr;
  }
}

.checker-filters {
  /* When server-rendered filters exist, add: position: sticky; top: 96px; */
}

@media (max-width: 959px) {
  .checker-layout {
    grid-template-columns: 1fr;
  }
}