/* ==========================================================================
   AZURA — Luxury Hotel & Resort HTML5 Template
   File:    responsive.css
   Version: 1.0.0
   --------------------------------------------------------------------------
   Breakpoints
   --------------------------------------------------------------------------
   1400px  — large desktop
   1200px  — small desktop / large tablet landscape
   1024px  — tablet landscape (mobile nav starts here)
   860px   — tablet portrait
   640px   — large phone
   420px   — small phone
   ========================================================================== */

/* ==========================================================================
   ≤ 1400px
   ========================================================================== */
@media (max-width: 1400px) {
  :root { --container: 1180px; --section-y: 100px; }
  .hero__dots { right: 24px; }
  .experience-badge { left: -14px; }
}

/* ==========================================================================
   ≤ 1200px
   ========================================================================== */
@media (max-width: 1200px) {
  :root { --container: 980px; --section-y: 90px; }

  .menu > li > a { padding-inline: 12px; font-size: .88rem; }
  .brand__name { font-size: 1.18rem; }

  .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--sp-6); }
  .amenity-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .booking-bar__form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .booking-bar__submit { grid-column: span 2; }
  .booking-bar__submit .btn { width: 100%; }
  .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .spec-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .about-media__sub { right: -10px; bottom: -18px; }
}

/* ==========================================================================
   ≤ 1024px — mobile navigation kicks in
   ========================================================================== */
@media (max-width: 1024px) {
  :root { --container: 100%; --section-y: 80px; --container-pad: 20px; }

  .main-nav { display: none; }
  .nav-toggle { display: block; }
  .nav-actions .btn:not(.nav-toggle):not(.theme-toggle) { display: none; }
  .nav-shell { padding: 10px 12px 10px 18px; }

  .hero { min-height: auto; padding-top: 165px; padding-bottom: 120px; }
  .hero__dots { flex-direction: row; right: auto; left: 50%; top: auto; bottom: 100px; transform: translateX(-50%); }
  .hero__scroll { display: none; }

  .page-hero { padding-top: 175px; padding-bottom: 90px; }

  .about-grid,
  .showcase { grid-template-columns: 1fr; gap: var(--sp-7); }
  .showcase--reverse .showcase__media { order: 0; }
  .about-media { max-width: 560px; margin-inline: auto; }

  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gallery-item--wide { grid-column: span 2; }
  .gallery-item--tall { grid-row: span 1; aspect-ratio: 4 / 3; }

  .layout-sidebar,
  .layout-sidebar--wide,
  .layout-sidebar--form { grid-template-columns: 1fr; }
  .amenity-list--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .sidebar { position: static; margin-top: var(--sp-7); }
  .booking-summary { position: static; }

  .room-gallery { grid-template-columns: 1fr; }
  .room-gallery__side { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .booking-bar { margin-top: -50px; }

  .float-book { display: block; }
  .back-to-top { bottom: 90px; }
}

/* ==========================================================================
   ≤ 860px
   ========================================================================== */
@media (max-width: 860px) {
  :root { --section-y: 70px; }

  .topbar__list li:not(:first-child) { display: none; }

  .section-head--split { flex-direction: column; align-items: flex-start; gap: var(--sp-5); }
  .section-head { margin-bottom: var(--sp-7); }

  .amenity-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: span 2; }

  .testimonial-card { padding: var(--sp-6) var(--sp-5); }
  .cta-band { padding: var(--sp-7) var(--sp-5); }

  .experience-badge { position: static; margin-top: var(--sp-4); display: inline-block; }
  .about-media__sub { position: static; width: 100%; margin-top: var(--sp-4); border: 0; }
  .about-media__sub img { aspect-ratio: 16 / 9; }

  .lightbox__prev { left: 12px; }
  .lightbox__next { right: 12px; }
  .lightbox__close { top: 14px; right: 14px; }
}

/* ==========================================================================
   ≤ 640px
   ========================================================================== */
@media (max-width: 640px) {
  :root { --section-y: 60px; --container-pad: 16px; --r-lg: 22px; --r-xl: 26px; }

  body { font-size: 15px; }

  .topbar { display: none; }
  .site-header__inner { padding-top: var(--sp-3); }

  .hero { padding-top: 140px; padding-bottom: 100px; }
  .hero p { font-size: 1rem; }
  .hero__actions { gap: 10px; }
  .hero__actions .btn { flex: 1 1 100%; }

  .page-hero { padding-top: 150px; padding-bottom: 70px; }

  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }
  .spec-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .amenity-list,
  .amenity-list--3 { grid-template-columns: 1fr; }

  .gallery-grid { grid-template-columns: 1fr; }
  .gallery-item--wide { grid-column: span 1; }

  .booking-bar { margin-top: -30px; padding: var(--sp-4); }
  .booking-bar__form { grid-template-columns: 1fr; }
  .booking-bar__submit { grid-column: span 1; }

  .glass-pad, .glass-pad-lg { padding: var(--sp-5); }

  .footer-grid { grid-template-columns: 1fr; gap: var(--sp-6); }
  .footer-brand { grid-column: span 1; }
  .footer-bottom { flex-direction: column; text-align: center; gap: var(--sp-3); }

  .room-gallery__side { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .menu-item { flex-direction: column; }
  .menu-item__thumb { width: 100%; height: 160px; }
  .menu-item__head { flex-wrap: wrap; }
  .menu-item__dots { display: none; }

  .steps { gap: 8px; }
  .step { padding: 10px 16px; font-size: .8rem; }

  .newsletter-form { flex-direction: column; border-radius: var(--r-lg); }
  .newsletter-form .btn { width: 100%; }

  .slider-nav { gap: 10px; }
  .testimonial-card { padding: var(--sp-5) var(--sp-4); }

  .back-to-top { right: 16px; bottom: 86px; width: 46px; height: 46px; }
  .float-book { left: 16px; bottom: 16px; right: 16px; }
  .float-book .btn { width: 100%; }
  .toast { border-radius: var(--r-lg); flex-direction: column; text-align: center; bottom: 150px; }
}

/* ==========================================================================
   ≤ 420px
   ========================================================================== */
@media (max-width: 420px) {
  .brand__mark { width: 38px; height: 38px; font-size: 1.05rem; }
  .brand__name { font-size: 1.05rem; letter-spacing: .1em; }
  .brand__tag { display: none; }

  .btn { padding: 13px 24px; font-size: .88rem; }
  .btn-lg { padding: 15px 30px; font-size: .95rem; }

  .stats-grid { grid-template-columns: 1fr; }
  .spec-grid { grid-template-columns: 1fr; }
  .room-gallery__side { grid-template-columns: 1fr; }

  .room-card__foot { flex-direction: column; align-items: stretch; }
  .room-card__foot .btn { width: 100%; }
  .pagination a, .pagination span { min-width: 40px; height: 40px; font-size: .85rem; }
}

/* ==========================================================================
   Landscape phones — keep hero usable
   ========================================================================== */
@media (max-height: 560px) and (orientation: landscape) {
  .hero { min-height: auto; padding-top: 130px; padding-bottom: 80px; }
  .hero__scroll { display: none; }
}

/* ==========================================================================
   Hover-capable devices only — avoid sticky hover states on touch
   ========================================================================== */
@media (hover: none) {
  .glass-hover:hover,
  .card-glass:hover { transform: none; }
  .gallery-item__overlay { opacity: 1; background: linear-gradient(180deg, transparent 55%, rgba(6, 20, 32, .72)); }
  .gallery-item__zoom { opacity: 1; transform: scale(1); }
}