/* Responsive breakpoints — mobile-first
   Canonical set:
   - 480px  mobile+
   - 768px  tablet
   - 1024px desktop
   - 1280px wide
   - 1440px large desktop
   Prefer these over one-off breakpoints when adding rules.
*/

@media (min-width: 768px) {
  .modal-overlay {
    align-items: center;
    padding: 1.5rem;
  }

  .modal.lead-modal {
    border-radius: var(--radius-xl);
    padding: 1.2rem 1.25rem 1.25rem;
  }

  .brand__logo {
    max-width: 128px;
  }

  .why-props {
    grid-template-columns: 1fr 1fr;
  }

  .plan-viewer {
    padding: 1.25rem;
  }

  .plan-viewer__cta {
    width: auto;
    min-width: 14rem;
  }

  .plan-viewer__footer {
    display: flex;
    justify-content: flex-end;
  }

  .gallery-viewer {
    padding: 1.25rem;
  }

  .site-footer__cta,
  .footer-cta {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem 1.75rem;
    padding: 1rem 1.25rem;
  }

  .site-footer__main {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .whatsapp-float {
    bottom: 1.5rem;
    right: 1.5rem;
  }

  .back-to-top {
    left: auto;
    right: 1.5rem;
    bottom: 5.25rem;
  }

  .mobile-cta-bar {
    display: none;
  }

  .site-footer {
    padding-bottom: clamp(1.35rem, 2.2vw, 1.75rem);
  }

  body {
    padding-bottom: 0;
  }
}

@media (min-width: 768px) {
  .header-cta {
    display: inline-flex;
  }
}

@media (min-width: 1200px) {
  .mobile-menu-toggle {
    display: none;
  }

  .desktop-navigation {
    display: flex;
  }

  .brand__logo {
    max-width: 138px;
  }

  .desktop-navigation__list {
    gap: clamp(1.05rem, 1.35vw, 1.65rem);
  }

  .nav-link {
    font-size: 0.9rem;
  }
}

@media (min-width: 1366px) {
  .brand__logo {
    max-width: 145px;
  }

  .desktop-navigation__list {
    gap: clamp(1.25rem, 1.55vw, 1.85rem);
  }

  .nav-link {
    font-size: 0.9375rem;
  }

  .header-cta {
    padding-inline: 2rem;
  }
}

@media (min-width: 768px) and (max-width: 1023.98px) {
  .hero {
    min-height: max(720px, 100svh);
    padding-inline: 1.75rem;
  }

  .hero-title {
    font-size: clamp(2.65rem, 5.2vw, 3.35rem);
  }

  .hero-title__display {
    white-space: nowrap;
  }

  .hero-subtitle span {
    white-space: nowrap;
  }

  .hero-price {
    width: min(72vw, 380px);
  }

  .hero-cta {
    min-width: 20rem;
    padding-inline: 2.2rem;
  }
}

@media (min-width: 1024px) {
  .why-layout {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  }

  .lead-cta-band {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    max-width: none;
    text-align: left;
    gap: 1.5rem 2rem;
  }

  .lead-cta-band__copy {
    flex: 1 1 auto;
  }

  .lead-cta-band__actions {
    flex-shrink: 0;
    justify-content: flex-end;
  }
}

@media (min-width: 1440px) {
  .hero-content {
    width: min(100%, 1200px);
  }
}

/* Prevent sticky mobile CTA overlapping content on small screens */
@media (max-width: 767.98px) {
  body {
    padding-bottom: calc(var(--mobile-cta-height) + env(safe-area-inset-bottom, 0px));
  }

  .brand__logo {
    max-width: 112px;
  }

  .hero {
    min-height: max(640px, 100svh);
    min-height: max(640px, 100dvh);
    padding:
      calc(var(--header-height-mobile) + 1.1rem)
      1.1rem
      calc(2.5rem + env(safe-area-inset-bottom, 0px));
    place-items: center;
  }

  .hero-media__image {
    object-position: center 40%;
  }

  .hero-content {
    width: min(100%, 24rem);
  }

  .hero-eyebrow {
    margin-bottom: 0.7rem;
    font-size: 0.625rem;
    letter-spacing: 0.22em;
  }

  .hero-title {
    margin-bottom: 0;
    font-size: clamp(2.25rem, 9.5vw, 2.85rem);
    letter-spacing: -0.01em;
  }

  .hero-title-wrap {
    width: min(calc(100% - 0.5rem), 24rem);
    margin-bottom: 0.65rem;
  }

  .hero-title__display {
    white-space: normal;
  }

  .hero-title__break {
    display: block;
  }

  .hero-divider {
    width: min(100%, 12rem);
    margin-bottom: 0.75rem;
  }

  .hero-subtitle {
    margin-bottom: 0.9rem;
    font-size: 0.68rem;
    letter-spacing: 0.12em;
    max-width: 18rem;
  }

  .hero-subtitle span {
    white-space: normal;
  }

  .hero-location {
    width: 100%;
    margin-bottom: 1.1rem;
    padding: 0.55rem 0;
    font-size: 0.6rem;
    letter-spacing: 0.08em;
  }

  .hero-location__inner {
    white-space: normal;
    text-align: center;
    flex-wrap: wrap;
  }

  .hero-price {
    width: min(88vw, 360px);
    margin-bottom: 1.15rem;
    padding-top: 0.65rem;
  }

  .hero-price__plaque {
    padding-top: 1.35rem;
    overflow: visible;
  }

  .hero-price__value {
    font-size: clamp(2.35rem, 10vw, 2.9rem);
  }

  .hero-price__note {
    font-size: 0.75rem;
    padding: 0.65rem 0.85rem;
    letter-spacing: 0.12em;
  }

  .hero-cta {
    width: min(88vw, 360px);
    min-height: 52px;
    padding-inline: 1.35rem;
    font-size: 0.6875rem;
  }

  .hero-disclaimer {
    position: static;
    margin-top: 0.75rem;
    max-width: none;
    text-align: center;
    font-size: 0.5625rem;
  }
}

@media (max-width: 430px) {
  .brand__logo {
    max-width: 104px;
  }

  .mobile-menu-toggle {
    width: 40px;
    height: 40px;
  }
}

@media (max-width: 359.98px) {
  .container {
    width: min(100% - 1.25rem, var(--container-width));
  }

  .btn {
    padding-inline: 1rem;
  }
}