/* ============================================================
   Hotel Horizonte — Responsive Styles (Mobile-first)
   ============================================================ */

/* ── Tablet: ≤ 1024px ───────────────────────────────────────── */
@media (max-width: 1024px) {
  .cards-grid         { grid-template-columns: repeat(2, 1fr); }
  .testimonials-grid  { grid-template-columns: repeat(2, 1fr); }
  .footer-grid        { grid-template-columns: 1fr 1fr; gap: 36px; }
  .activities-grid    { grid-template-columns: repeat(2, 1fr); }
  .gallery-masonry    { columns: 2; }
  .experience-item    { min-height: 400px; }
  .experience-text    { padding: clamp(32px, 5vw, 60px); }
}

/* ── Tablet portrait: ≤ 860px ──────────────────────────────── */
@media (max-width: 860px) {
  .nav-links          { display: none; }
  .nav-menu-btn       { display: flex; }

  /* Mobile nav overlay */
  .nav-mobile {
    display: flex;
    position: fixed;
    inset: 0;
    background: var(--color-dark);
    z-index: 999;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s;
  }
  .nav-mobile.open { opacity: 1; pointer-events: all; }
  .nav-mobile a {
    display: block;
    font-family: var(--font-heading);
    font-size: clamp(1.5rem, 5vw, 2.4rem);
    color: rgba(255,255,255,0.85);
    padding: 14px 32px;
    letter-spacing: 0.04em;
    transition: color 0.25s;
    text-align: center;
  }
  .nav-mobile a:hover { color: var(--color-accent); }
  .nav-mobile-footer {
    position: absolute;
    bottom: 32px;
    display: flex;
    gap: 20px;
    align-items: center;
  }
  .nav-mobile-footer a {
    font-size: 0.8rem !important;
    padding: 0 !important;
    color: rgba(255,255,255,0.4) !important;
  }

  .hero-btns { flex-direction: column; align-items: center; }

  .experience-item        { grid-template-columns: 1fr; }
  .experience-item.reverse { direction: ltr; }
  .experience-img         { height: 300px; }
  .experience-img img     { height: 100%; }

  .contact-grid   { grid-template-columns: 1fr; gap: 48px; }

  .menu-content.active { grid-template-columns: 1fr; }

  .quick-book-inner { flex-direction: column; }
  .quick-book-field { min-width: 100%; }

  .highlights-grid { grid-template-columns: 1fr; }
}

/* ── Mobile: ≤ 640px ────────────────────────────────────────── */
@media (max-width: 640px) {
  .hero-arrow { width: 40px; height: 40px; font-size: 0.85rem; }
  .hero-counter { display: none; }
  .hero-dots { bottom: 60px; }

  :root { --section-pad: 56px; }

  .cards-grid         { grid-template-columns: 1fr; }
  .testimonials-grid  { grid-template-columns: 1fr; }
  .activities-grid    { grid-template-columns: 1fr; }
  .gallery-masonry    { columns: 1; }
  .footer-grid        { grid-template-columns: 1fr; gap: 28px; }

  .page-hero          { height: 300px; }

  .form-row           { grid-template-columns: 1fr; }

  .footer-bottom {
    flex-direction: column;
    text-align: center;
  }
  .footer-bottom-links { justify-content: center; }

  .hero-content h1 { font-size: clamp(1.8rem, 7vw, 2.6rem); }

  .nav-book-btn { display: none; }
}

/* ── Small mobile: ≤ 420px ─────────────────────────────────── */
@media (max-width: 420px) {
  .btn { padding: 13px 22px; font-size: 0.8rem; }
  .filter-tabs { gap: 6px; }
  .filter-tab { padding: 8px 16px; font-size: 0.75rem; }
}

/* ── Accessibility: reduced motion ─────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  .hero-bg { background-attachment: scroll; }
}