/* ─────────────────────────────────────────
   LAYOUT
   Container widths, section spacing, section headers, and the
   full-page sections + scroll snap. Breakpoints: 1024px (tablet), 640px (mobile).
───────────────────────────────────────── */

.container {
  width: 100%;
  max-width: 1500px;
  margin: 0 auto;
  padding: 0 48px;
}

.section {
  padding: 96px 0;
}

.section-header {
  margin-bottom: 64px;
}

.section-header.center {
  text-align: center;
}

/* ── Full-page sections + scroll snap (desktop only) ──
   On screens wider than 1024px every section fills at least one screen and
   the page always snaps to the start of a section ("mandatory").
   On tablet and mobile there's no snapping and sections keep their natural
   height — snapping didn't feel right on touch screens. */
@media (min-width: 1025px) {
  html {
    scroll-snap-type: y mandatory;
  }

  .hero,
  .section {
    scroll-snap-align: start;
  }

  .section {
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* breathing room scales with screen HEIGHT so a section's content
       still fits in one screen on shorter laptops */
    /* top padding always clears the fixed nav bar (~88px tall) */
    padding: clamp(100px, 11svh, 120px) 0 clamp(40px, 6svh, 96px);
  }

  .section-header {
    margin-bottom: clamp(36px, 6svh, 64px);
  }

  /* the short footer snaps flush to the bottom of the screen */
  .footer {
    scroll-snap-align: end;
  }
}


/* responsive — tablet */
@media (max-width: 1024px) {
  .container {
    padding: 0 32px;
  }
}


/* responsive — mobile */
@media (max-width: 640px) {
  .container {
    padding: 0 20px;
  }

  .section {
    padding: 64px 0;
  }

  .section-header {
    margin-bottom: 40px;
  }
}