/* ==========================================================================
   Responsive Overrides
   Mobile-first base styles live in style.css; this file layers breakpoint-
   specific refinements that aren't already handled by clamp()/min()/max().
   ========================================================================== */

/* ---- Small phones (≤ 380px): tighten hero & headings ---- */
@media (max-width: 380px) {
  .hero__actions .btn,
  .cta-banner__actions .btn {
    width: 100%;
  }
}

/* ---- ≥ 480px ---- */
@media (min-width: 480px) {
  .hero__actions,
  .cta-banner__actions {
    flex-wrap: nowrap;
  }
}

/* ---- ≥ 640px: two-up grids gain breathing room ---- */
@media (min-width: 640px) {
  .footer__top {
    grid-template-columns: 1fr 1fr;
  }
}

/* ---- ≥ 768px ---- */
@media (min-width: 768px) {
  .stats {
    text-align: left;
  }

  .testimonials__grid,
  .gallery-preview-grid {
    gap: var(--space-lg);
  }
}

/* ---- ≥ 960px: desktop navigation + roomier sections ---- */
@media (min-width: 960px) {
  .footer__top {
    grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  }

  .venue-detail__features {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ---- ≥ 1200px: wide desktop ---- */
@media (min-width: 1200px) {
  .hero__content {
    max-width: 820px;
  }

  .section-header--center {
    max-width: 760px;
  }
}

/* ---- ≥ 1440px: large desktop, cap line lengths for readability ---- */
@media (min-width: 1440px) {
  .testimonial-card__quote {
    font-size: var(--fs-lg);
  }
}

/* ---- Landscape phones with short viewport: keep hero usable ---- */
@media (max-height: 500px) and (orientation: landscape) {
  .hero,
  .page-header {
    min-height: 100vh;
  }

  .hero__content {
    padding-top: var(--header-height-scrolled);
  }
}

/* ---- Print styles: clean, ink-friendly output ---- */
@media print {
  .site-header,
  .mobile-nav,
  .whatsapp-float,
  .back-to-top,
  .loader,
  .gallery-filters,
  .site-footer {
    display: none !important;
  }

  body {
    background: #fff;
    color: #000;
  }

  a {
    text-decoration: underline;
  }
}