/* ==========================================================================
   responsive.css — breakpoint refinements layered on top of the mobile-first
   base in style.css/components.css. Most component-level responsive rules
   already live next to their component; this file covers page-level spacing
   and a few cross-cutting adjustments.
   ========================================================================== */

/* Small phones — tighten spacing a touch */
@media (max-width: 420px) {
  :root {
    --space-xl: 3rem;
    --space-2xl: 4rem;
  }

  .container {
    padding-inline: var(--space-sm);
  }

  /* Keep the full-bleed gallery within the narrower container padding,
     otherwise the page scrolls sideways by a few pixels on small phones */
  .gallery {
    margin-inline: calc(var(--space-sm) * -1);
    padding-inline: var(--space-sm);
  }
}

/* Tablets and up — roomier section padding */
@media (min-width: 760px) {
  .section {
    padding-block: var(--space-2xl);
  }
}

/* Large desktop — cap line lengths / add breathing room */
@media (min-width: 1280px) {
  .container {
    padding-inline: var(--space-lg);
  }
}

/* Hero media never grows beyond something sensible on ultra-wide screens */
@media (min-width: 1440px) {
  .hero-media {
    max-height: 560px;
  }
}

/* Ensure gallery cards don't dominate on very large screens */
@media (min-width: 1200px) {
  .gallery-card {
    width: 320px;
  }
}

/* Print: hide floating UI and simplify */
@media print {
  .whatsapp-float,
  .chat-launcher,
  .chat-panel,
  .site-header,
  .nav-toggle {
    display: none !important;
  }
}