/* ============================================================
   RESPONSIVE.CSS — All Media Queries
   ============================================================ */

/* ── 1024px and below ── */
@media (max-width: 1024px) {
  nav { padding: 0 30px; }
  .nav-links { gap: 20px; }
  section { padding: 70px 30px; }

  /* Home */
  .cats-grid { grid-template-columns: repeat(3,1fr); }
  .hero-stats { left: 30px; }
  .hero-content { padding: 0 30px; }

  /* About */
  .about-hero-content { padding: 0 30px; }
  .about-body { padding: 60px 30px; }
  .about-cols { grid-template-columns: 1fr; gap: 36px; }
  .about-values { grid-template-columns: 1fr 1fr; }

  /* Blog */
  .blog-header { padding: 100px 30px 40px; }
  .blog-grid { padding: 0 30px 60px; grid-template-columns: 1fr 1fr; }
  .blog-featured { grid-column: 1/-1; }
  .article-hero-content { left: 30px; right: 30px; }
  .article-body { padding: 50px 30px; }

  /* Contact */
  .contact-layout { grid-template-columns: 1fr; }
  .contact-left { padding: 60px 30px 40px; }
  .contact-right { padding: 40px 30px 60px; }

  /* Detail */
  .detail-body { padding: 40px 30px; grid-template-columns: 1fr; gap: 30px; }
  .detail-sidebar { position: static; }
  .detail-back { left: 30px; }
  .detail-badge-float { right: 30px; }
  .detail-gallery-thumbs { left: 30px; }

  /* Footer */
  .footer-top { grid-template-columns: 1fr 1fr; gap: 40px; padding: 50px 30px 30px; }
  .footer-bottom { padding: 20px 30px; flex-direction: column; gap: 16px; text-align: center; }
}

/* ── 768px and below ── */
@media (max-width: 768px) {
  /* Nav */
  .nav-links, .nav-right { display: none; }
  .nav-hamburger { display: flex; }
  nav { padding: 0 20px; height: 70px; }

  /* Cursor off on touch */
  body { cursor: auto; }
  #cursor, #cursor-ring { display: none; }

  /* Home Hero */
  .hero { height: 100svh; align-items: flex-end; padding-bottom: 100px; }
  .hero-img-col { width: 100%; opacity: .35; min-height: 200px; }
  .hero-img-col::before { width: 100%; background: linear-gradient(to bottom, var(--black) 0%, transparent 40%); }
  .hero-content { padding: 0 20px; max-width: 100%; }
  .hero-h1 { font-size: 2.4rem; }
  .hero-sub { font-size: .85rem; }
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .btn-gold,
  .hero-actions .btn-ghost { text-align: center; }
  .hero-stats { left: 20px; bottom: 20px; gap: 28px; }
  .stat-num { font-size: 1.5rem; }

  /* Sections */
  section { padding: 60px 20px; }
  .section-title { font-size: 1.8rem; }
  .cats-header { flex-direction: column; align-items: flex-start; gap: 16px; margin-bottom: 30px; }
  .cats-grid { grid-template-columns: repeat(2,1fr); gap: 10px; }
  .cats-grid .cat-card:last-child { grid-column: 1/-1; aspect-ratio: 16/7; }
  .listings-scroll { gap: 16px; }
  .listing-card { min-width: 260px; }
  .partners { padding: 50px 20px; }
  .partner-item { padding: 20px 24px; min-width: 120px; }
  .partners-grid { flex-wrap: wrap; }

  /* Browser */
  .browser-layout { grid-template-columns: 1fr; padding-top: 70px; }
  .filter-sidebar { position: static; height: auto; border-right: none; border-bottom: 1px solid var(--glass-border); padding: 24px 20px; overflow-x: auto; }
  .filter-groups-wrap { display: flex; gap: 20px; overflow-x: auto; padding-bottom: 8px; }
  .filter-group { min-width: 140px; margin-bottom: 0; }
  .filter-title { display: none; }
  .browse-main { padding: 24px 20px; }
  .browse-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .browse-card-img { height: 130px; }

  /* Booking */
  .book-page { padding: 90px 16px 30px; align-items: flex-start; }
  .book-container { padding: 0; }
  .book-step span { display: none; }
  .book-panel { padding: 24px 20px; }
  .book-options { grid-template-columns: 1fr 1fr; gap: 10px; }
  .book-option { padding: 18px 12px; }
  .form-row { grid-template-columns: 1fr; }
  .book-nav { flex-direction: column-reverse; gap: 10px; }
  .book-nav .btn-gold,
  .book-nav .btn-ghost { width: 100%; text-align: center; }

  /* About */
  .about-hero { height: auto; padding: 120px 0 60px; }
  .about-hero-content { padding: 0 20px; }
  .about-h1 { font-size: 2.2rem; }
  .about-body { padding: 50px 20px; }
  .about-cols { grid-template-columns: 1fr; gap: 30px; margin-bottom: 40px; }
  .about-values { grid-template-columns: 1fr; }

  /* Blog */
  .blog-header { padding: 90px 20px 30px; }
  .blog-grid { padding: 0 20px 50px; grid-template-columns: 1fr; }
  .blog-featured { grid-column: 1; }
  .article-hero { height: 45vh; }
  .article-hero-content { left: 20px; right: 20px; bottom: 30px; }
  .article-h1 { font-size: 1.6rem; }
  .article-body { padding: 40px 20px; }

  /* Contact */
  .contact-layout { grid-template-columns: 1fr; }
  .contact-left { padding: 90px 20px 40px; }
  .contact-right { padding: 20px 20px 50px; }
  .contact-title { font-size: 1.8rem; }

  /* Detail */
  .detail-gallery { height: 45vh; }
  .detail-gallery-thumbs { left: 20px; }
  .detail-back { left: 20px; top: 80px; }
  .detail-badge-float { right: 20px; top: 80px; }
  .detail-body { padding: 30px 20px; grid-template-columns: 1fr; gap: 30px; }
  .detail-features-grid { grid-template-columns: 1fr 1fr; }

  /* Login */
  .login-page { grid-template-columns: 1fr; }
  .login-visual { display: none; }
  .login-form-side { padding: 100px 24px 40px; align-items: flex-start; }

  /* Footer */
  .footer-top { grid-template-columns: 1fr; gap: 32px; padding: 40px 20px 24px; }
  .footer-bottom { flex-direction: column; gap: 14px; text-align: center; padding: 20px; }
  .footer-legal { flex-wrap: wrap; justify-content: center; }

  /* Image fixes for mobile */
  img {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    will-change: auto;
    max-width: 100%;
  }
  .mosaic-cell-inner {
    min-height: 80px;
    -webkit-transform: scale(1.05) translateZ(0);
  }
  .mosaic-cell { min-height: 80px; }
  .cat-img    { filter: brightness(.55) !important; }
  .listing-img { filter: brightness(.75) !important; }
  .browse-card-img { filter: brightness(.7) !important; }
  .blog-card-img { filter: brightness(.65) !important; }
  .article-hero img { filter: brightness(.5) !important; }
  .detail-gallery-main { filter: brightness(.75) !important; }
}

/* ── 480px and below ── */
@media (max-width: 480px) {
  .hero-h1 { font-size: 2rem; }
  .browse-grid { grid-template-columns: 1fr; }
  .hero-stats { gap: 20px; }
  .stat-num { font-size: 1.3rem; }
  .partners-grid { flex-direction: column; align-items: stretch; }
  .partner-item { min-width: unset; }
  .detail-features-grid { grid-template-columns: 1fr 1fr; }
}