/* ============================================
   Responsive Overrides
   Mobile-first: base → 768px → 1024px → 1440px
   ============================================ */

/* Safe area for iPhones */
@supports (padding: env(safe-area-inset-bottom)) {
  .site-footer {
    padding-bottom: calc(var(--space-2xl) + env(safe-area-inset-bottom));
  }

  .mobile-menu {
    padding-bottom: calc(var(--mobile-menu-pad-bottom) + env(safe-area-inset-bottom));
  }
}

/* Mobile: the fixed .brand-switch-bar (≤768px) sits over the viewport
   bottom and eats any padding set above. Add clearance here — this rule
   must live in responsive.css so it wins the cascade against components.css. */
@media (max-width: 768px) {
  .site-footer {
    padding-bottom: calc(var(--space-5xl) + env(safe-area-inset-bottom, 0px));
  }
}

/* --- Tablet (768px+) --- */
@media (min-width: 768px) {
  .hero__content {
    max-width: 600px;
  }

  .section {
    padding-block: var(--space-5xl);
  }
}

/* --- Desktop (1024px+) --- */
@media (min-width: 1024px) {
  .hero {
    min-height: 85vh;
  }

  .hero__content {
    max-width: 700px;
  }

  .section-header {
    margin-bottom: var(--space-4xl);
  }
}

/* --- Large (1440px+) --- */
@media (min-width: 1440px) {
  .hero {
    min-height: 90vh;
    padding-inline: var(--space-4xl);
  }
}