/* ===================================================================
   RESPONSIVE — mobile-first base is in style.css already using
   clamp()/%/rem. These breakpoints refine layout for larger screens.
   Mobile (≤480px) needs no overrides beyond the base styles.
   =================================================================== */

/* Small phones — tighten spacing a touch */
@media (max-width: 359px) {
  .section { padding: 2.25rem 1rem; }
  .prediction-btn { padding: 1.25rem 0.75rem; }
}

/* Tablets */
@media (min-width: 600px) {
  .event-cards { grid-template-columns: repeat(4, 1fr); }
  .gallery-grid { grid-template-columns: repeat(3, 1fr); }
  .rsvp-form { padding: 2.25rem; }
}

/* Desktop */
@media (min-width: 1024px) {
  .section { padding: 6rem 2rem; }
  .gallery-grid { grid-template-columns: repeat(4, 1fr); }
  .hero-names { font-size: 5rem; }
  .attendance-toggle { flex-direction: row; }
  .attend-btn { flex: 1; text-align: center; }
}

/* Guard against any accidental horizontal overflow on any device */
html, body {
  max-width: 100%;
  overflow-x: hidden;
}
.event-card-value, .gallery-item, .rsvp-form, .countdown, .prediction-buttons {
  max-width: 100%;
}