/**
 * Site-wide responsive fixes — loaded after page CSS and header-nav.
 */

html {
  -webkit-text-size-adjust: 100%;
}

/* Hero: use dynamic viewport on mobile browsers */
.hero {
  min-height: 100dvh;
}

@supports not (min-height: 100dvh) {
  .hero {
    min-height: 100vh;
  }
}

iframe,
.map-embed,
.contact-map {
  max-width: 100%;
}

@media (max-width: 900px) {
  /* Scroll hint overlaps hero CTAs on small screens */
  .hero-scroll {
    display: none;
  }

  .hero-content {
    padding-bottom: 2.5rem;
    width: 100%;
  }

  .hero-sub {
    margin-bottom: 1.75rem;
  }

  .hero-actions,
  .final-cta-actions,
  .cta-actions,
  .cta-block .hero-actions,
  .cta-band .hero-actions {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    max-width: 100%;
  }

  .hero-actions .btn-primary,
  .hero-actions .btn-outline,
  .hero-actions .btn-ghost,
  .final-cta-actions .btn-primary,
  .final-cta-actions .btn-outline,
  .cta-actions .btn-primary,
  .cta-actions .btn-outline,
  .cta-actions .btn-ghost,
  .cta-block .btn-primary,
  .cta-block .btn-outline,
  .cta-band .btn-primary,
  .cta-band .btn-outline {
    width: 100%;
    text-align: center;
    justify-content: center;
  }

  .hero-actions .btn-ghost {
    text-align: center;
    padding-left: 0;
    padding-right: 0;
  }

  .eyebrow {
    flex-wrap: wrap;
    gap: 0.65rem;
  }

  .article-meta {
    flex-wrap: wrap;
    gap: 1rem;
  }

  .rooms-carousel {
    padding: 0 0.5rem;
  }

  .carousel-arrow {
    width: 42px;
    height: 42px;
  }

  .carousel-arrow.prev {
    left: 0.35rem;
  }

  .carousel-arrow.next {
    right: 0.35rem;
  }
}

@media (max-width: 600px) {
  .eyebrow {
    letter-spacing: 0.18em;
    font-size: 0.65rem;
  }

  .eyebrow::before {
    width: 1.25rem;
    flex-shrink: 0;
  }

  .final-cta-contact {
    flex-direction: column;
    gap: 0.75rem;
    align-items: center;
  }

  .chips {
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .loc-list li {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
  }

  .filters {
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .mosaic-grid {
    grid-template-columns: 1fr;
    aspect-ratio: auto;
  }

  .mosaic-grid .m {
    aspect-ratio: 4/3;
  }

  .hero-strip {
    grid-template-columns: 1fr;
  }

  .grounds-gallery {
    grid-template-columns: 1fr;
  }

  .stats-grid,
  .ritual-grid {
    grid-template-columns: 1fr;
  }

  .gallery-grid {
    grid-template-columns: 1fr;
    aspect-ratio: auto;
  }

  .gallery-grid > a:first-child {
    grid-column: span 1;
    grid-row: span 1;
  }

  .gallery-grid > a {
    aspect-ratio: 4/3;
  }

  .amenities-grid,
  .in-room-grid {
    grid-template-columns: 1fr;
  }

  .newsletter-form {
    flex-direction: column;
  }

  .newsletter-form input {
    min-width: 0;
    width: 100%;
  }
}

@media (max-width: 480px) {
  .hero-content {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    padding-bottom: 2rem;
  }

  .quote-band,
  .intro-statement,
  .intro-block,
  .stats,
  .quote-section,
  .cta-block,
  .cta-band,
  .final-cta,
  .newsletter,
  .visit-cta,
  .blog-hero,
  .breadcrumbs {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }

  .footer-inner {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }

  .footer-bottom {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }

  .brand-name {
    display: none;
  }

  .pool-body,
  .modality-body,
  .feature-body,
  .package-body,
  .concierge-body,
  .location-body,
  .form-card {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }

  .form-card {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
  }

  .popup-content {
    padding: 2.5rem 1.25rem 1.75rem;
  }

  .detail-gallery .dg-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 900px) and (pointer: coarse) {
  .btn-primary,
  .btn-outline,
  .header-cta,
  .mobile-menu .mm-cta {
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}