/* =====================================================
   Casa Du Vovô — responsive.css
   Breakpoints: 640px (sm), 768px (md), 1024px (lg)
   ===================================================== */

/* ---------- Mobile First: ≥640px (sm) ---------- */
@media (min-width: 640px) {
  .container {
    padding: 0 2rem;
  }

  .hero__buttons {
    flex-direction: row;
    justify-content: center;
    gap: 1.25rem;
  }

  .hero__buttons .btn {
    width: auto;
    flex: 1 1 0;
    max-width: 16rem;
  }

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

  .gallery__grid {
    grid-auto-rows: 240px;
  }

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

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

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

  .footer__bottom {
    flex-direction: row;
  }
}

/* ---------- ≥768px (md) ---------- */
@media (min-width: 768px) {
  .section {
    padding: 7rem 0;
  }

  .stats {
    padding: 8rem 0;
  }

  .stats__grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
  }

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

/* ---------- ≥1024px (lg) ---------- */
@media (min-width: 1024px) {
  .container {
    padding: 0 3rem;
  }

  .section {
    padding: 8rem 0;
  }

  .navbar__links {
    display: flex;
  }

  .navbar__reserve {
    display: inline-flex;
  }

  .navbar__menu-btn {
    display: none;
  }

  .navbar__mobile {
    display: none;
  }

  .about__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 4rem;
  }

  .highlights__grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .gallery__grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .reviews__grid {
    grid-template-columns: repeat(4, 1fr);
  }

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

  .footer__grid {
    grid-template-columns: 2fr 1fr 1fr;
    align-items: center;
  }

  .footer__inner {
    padding: 5rem 3rem 4rem;
  }

  .floating-buttons__whatsapp-tooltip {
    display: block;
  }
}

/* ---------- Mobile: <1024px — hide desktop nav links ---------- */
@media (max-width: 1023px) {
  .navbar__links {
    display: none;
  }

  .navbar__menu-btn {
    display: flex;
  }
}

/* ---------- Mobile: <768px — parallax fallback ---------- */
@media (max-width: 768px) {
  .stats__bg {
    background-attachment: scroll;
  }
}

/* ---------- Mobile: <640px — smaller padding ---------- */
@media (max-width: 639px) {
  .container {
    padding: 0 1.25rem;
  }

  .section {
    padding: 5rem 0;
  }

  .navbar__inner {
    padding: 0 1.25rem;
  }

  .navbar__logo-text {
    display: none;
  }

  .hero__content {
    padding: 0 1.25rem;
  }

  .contact__image {
    min-height: 300px;
  }

  .footer__inner {
    padding: 3rem 1.25rem;
  }

  .floating-buttons__whatsapp-tooltip {
    display: none;
  }

  /* Gallery: 2 columns, uniform rows, preserve rounded corners + zoom */
  .gallery__grid {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 150px;
    gap: 0.625rem;
  }

  /* Reset span classes on mobile so all items fill a single cell */
  .gallery__item--lg,
  .gallery__item--wide {
    grid-column: span 1;
    grid-row: span 1;
  }

  /* Touch-friendly zoom on tap (active state) */
  .gallery__item:active img {
    transform: scale(1.08);
    filter: brightness(1.1);
  }

  .gallery__item:active {
    transform: translateY(-4px);
    box-shadow: 0 16px 32px -10px rgba(0, 0, 0, 0.3);
  }
}

/* ---------- Print ---------- */
@media print {
  .navbar,
  .floating-buttons,
  .hero__scroll,
  .navbar__mobile {
    display: none !important;
  }

  .section {
    padding: 2rem 0;
  }
}