/* ═══════════════════════════════════════════════════════════
   LAYOUT
   Container pattern and section primitives. These control
   how content is constrained, centered, and padded at
   every breakpoint.
   ═══════════════════════════════════════════════════════════ */

/* ── Container ──
   The core pattern: sections go full-width for backgrounds,
   .container inside them constrains the content.

   Mobile:  20px horizontal padding
   Tablet:  30px
   Desktop: 50px

   max-width caps content at 1400px, margin auto centers it.
   ─────────────────────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--space-sm);       /* 16px on mobile — slightly tighter than 20px but
                                            aligns with the spacing scale. Revisit if needed. */
}

@media (min-width: 768px) {
  .container {
    padding-inline: 30px;
  }
}

@media (min-width: 1200px) {
  .container {
    padding-inline: 50px;
  }
}

/* ── Section ──
   Full-width wrapper for background colors/images.
   Vertical padding scales with breakpoint.
   ─────────────────────────────────────────────────────────── */
.section {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.section--padded {
  padding-block: var(--space-lg);        /* 40px mobile */
}

@media (min-width: 768px) {
  .section--padded {
    padding-block: var(--space-xl);      /* 60px tablet+ */
  }
}

/* ── Dark overlay ──
   Used on sections with background images to darken them
   for text readability (hero, sponsors section, etc.)
   ─────────────────────────────────────────────────────────── */
.section--overlay::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--overlay-dark);
  z-index: 0;
}

/* Ensure content inside an overlay section sits above it */
.section--overlay > .container {
  position: relative;
  z-index: 1;
}