/* Containers, section rhythm, and breakpoint-driven layout behavior */

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

/* Section rhythm — breathable but disciplined */
.section {
  padding-block: clamp(3rem, 7vw, 6rem);
}
.section--tight { padding-block: clamp(2rem, 4.5vw, 3.5rem); }
.section--dark {
  background: var(--color-charcoal);
  color: #ffffff;
}
.section--dark h1,
.section--dark h2,
.section--dark h3 { color: #ffffff; }
.section--muted {
  background: var(--color-surface-alt);
}

/* Intent Router grid */
.intent-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-4);
}

/* Form layout */
.form-row { display: grid; gap: var(--sp-4); }
.form-row--two { grid-template-columns: 1fr; }

/* Newsletter row */
.newsletter-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-3);
}

/* Footer */
.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-5);
  align-items: start;
}

/* Hero sizing only — full structural styling lives in components.css */

/* ─── Breakpoints (per PRD §3) ─────────────────────────────── */

/* Large phone — 640px */
@media (min-width: 640px) {
  .intent-grid { gap: var(--sp-5); }
  .form-row--two { grid-template-columns: 1fr 1fr; }
}

/* Tablet portrait — 768px */
@media (min-width: 768px) {
  .newsletter-row {
    grid-template-columns: 1fr auto;
    align-items: end;
  }
  .footer-grid {
    grid-template-columns: 1.2fr 1fr 1fr;
    gap: var(--sp-7);
  }
}

/* Small desktop / tablet L — 992px */
@media (min-width: 992px) {
  .intent-grid {
    /* 4 tiles in a single row at desktop. Mobile keeps 2-up (the base rule above). */
    grid-template-columns: repeat(4, 1fr);
    gap: var(--sp-4);
  }
}

/* Laptop — 1200px */
@media (min-width: 1200px) {
  .section { padding-block: clamp(4rem, 8vw, 7rem); }
  .intent-grid { gap: var(--sp-5); }
}

/* XL desktop — 1600px+ */
@media (min-width: 1600px) {
  :root { --container-max: 1500px; }
}