/* ==========================================================================
   responsive.css — ajustes por breakpoint. Mobile-first (base = mobile).
   Breakpoints: 768 (tablet), 1024 (desktop), 1440 (amplo). Salas viram
   carrossel no mobile e grade no tablet+. Hover só onde há mouse.
   ========================================================================== */

/* ----- Interações de hover (só com mouse; no toque o :hover gruda) -------- */
@media (hover: hover) {
  .room-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card); }
  .room-card:hover .room-card__photo { transform: scale(1.05); }
  .room-card:hover .room-card__cta .btn__arrow { transform: translateX(4px); }
}

/* ----- Mobile: carrossel de salas com peek + nav --------------------------- */
@media (max-width: 767px) {
  .rooms__grid {
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: var(--space-md);
    margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter);
    scroll-padding-left: var(--gutter); scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .rooms__grid::-webkit-scrollbar { display: none; }
  .rooms__grid > .room-card { flex: 0 0 82%; scroll-snap-align: start; }
  .carousel-nav { display: flex; }
  .cta-bar { display: block; }
}

/* ----- Tablet (768+) ------------------------------------------------------ */
@media (min-width: 768px) {
  .site-header__logo-img { height: 34px; }

  .hero__inner { min-height: 88vh; min-height: 88svh; padding-top: calc(var(--header-h) + var(--space-2xl)); }
  .hero__col { max-width: none; }
  .hero__title { max-width: 18ch; }
  .hero__sub { max-width: 42ch; }
  .hero__actions { flex-direction: row; align-items: center; gap: var(--space-xl); }

  .pilares__grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-xl); }

  .rooms__grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); align-items: stretch; }

  .site-footer__inner { flex-direction: row; justify-content: space-between; align-items: flex-end; }
  .site-footer__slogan { margin-top: var(--space-lg); }
}

/* ----- Desktop (1024+) ---------------------------------------------------- */
@media (min-width: 1024px) {
  .section { padding-block: var(--space-section); }
  .hero__inner { min-height: 92vh; min-height: 92svh; }
}

/* ----- Amplo (1440+) ------------------------------------------------------ */
@media (min-width: 1440px) {
  .hero__title { max-width: 20ch; }
}