/* ============================================================
   SERENITY GUEST HOUSE — Responsive Styles
   ============================================================ */

/* ---------- Tablet: max 1024px ---------- */
@media (max-width: 1024px) {
  .nav-links { display: none; }
  .menu-toggle { display: flex; }

  .nav-links.active {
    display: flex; flex-direction: column;
    position: fixed; inset: 0;
    background: rgba(30,30,30,0.97); backdrop-filter: blur(16px);
    justify-content: center; align-items: center;
    gap: 24px; z-index: 1000;
  }
  .nav-links.active a { font-size: 1.2rem; color: rgba(255,255,255,0.85) !important; }
  .nav-links.active a:hover { color: var(--gold) !important; }
  .nav-links.active .nav-book-btn { margin-top: 10px; font-size: 1rem !important; padding: 14px 34px !important; }

  .trust-items { gap: 20px; }

  .rooms-grid { grid-template-columns: repeat(2, 1fr); }
  .room-card-ribbon { font-size: 0.65rem; }

  .gallery-grid { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 170px; }
  .gallery-item:nth-child(1) { grid-column: span 2; grid-row: span 2; }
  .gallery-item:nth-child(4) { grid-column: span 1; }

  .amenities-grid { grid-template-columns: repeat(3, 1fr); }
  .about-grid { gap: 40px; }

  .testimonials-grid { grid-template-columns: repeat(2, 1fr); }
  .testimonials-grid .testimonial-card:last-child { grid-column: span 2; max-width: 480px; margin: 0 auto; }

  .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
}

/* ---------- Small Tablet: max 768px ---------- */
@media (max-width: 768px) {
  .section { padding: 64px 0; }
  .section-header { margin-bottom: 36px; }

  .hero { min-height: 100svh; }
  .hero-buttons { flex-direction: column; align-items: stretch; }

  .trust-items { gap: 14px; justify-content: flex-start; overflow-x: auto; -webkit-overflow-scrolling: touch; padding: 0 4px; flex-wrap: nowrap; }
  .trust-bar { overflow: hidden; }

  .rooms-grid { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; }

  .gallery-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 150px; }
  .gallery-item:nth-child(1) { grid-column: span 2; grid-row: span 1; }

  .amenities-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }

  .about-grid { grid-template-columns: 1fr; gap: 36px; }
  .about-img-float { right: 12px; bottom: -16px; width: 140px; }
  .about-img-float img { height: 110px; }
  .about-stats { left: 12px; top: -12px; }

  .testimonials-grid { grid-template-columns: 1fr; }
  .testimonials-grid .testimonial-card:last-child { grid-column: span 1; max-width: 100%; }

  .review-aggregate { flex-direction: column; gap: 6px; }

  .location-grid { grid-template-columns: 1fr; }
  .location-map { height: 280px; }

  .contact-grid { grid-template-columns: 1fr; }
  .contact-form { padding: 24px; }
  .form-row { grid-template-columns: 1fr; }

  .footer-grid { grid-template-columns: 1fr; gap: 28px; }

  /* Show mobile sticky CTA */
  .mobile-cta {
    display: block; position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: 950; padding: 12px 16px;
    background: var(--white);
    box-shadow: 0 -2px 16px rgba(0,0,0,0.1);
    transform: translateY(100%);
    transition: transform var(--transition);
  }
  .mobile-cta.visible { transform: translateY(0); }

  .mobile-cta-btn {
    display: flex; align-items: center; justify-content: center;
    gap: 8px; width: 100%; padding: 14px;
    background: #25D366; color: var(--white);
    border-radius: var(--radius-sm);
    font-size: 0.9rem; font-weight: 600;
    text-decoration: none;
    box-shadow: 0 2px 12px rgba(37,211,102,0.3);
  }

  .whatsapp-float { display: none !important; }
  .back-to-top { bottom: 76px; right: 16px; width: 40px; height: 40px; }

  /* Add padding so content isn't hidden behind mobile CTA */
  .footer { padding-bottom: 72px; }
}

/* ---------- Mobile: max 480px ---------- */
@media (max-width: 480px) {
  html { font-size: 15px; }
  .container { padding: 0 16px; }
  .section { padding: 52px 0; }

  .hero-title { font-size: 1.85rem; }
  .hero-badge { font-size: 0.7rem; padding: 6px 14px; }

  .trust-items { gap: 12px; }
  .trust-item { font-size: 0.75rem; }

  .room-card-body { padding: 20px; }
  .room-card-image { height: 200px; }
  .room-card-ribbon { font-size: 0.6rem; padding: 5px 36px; right: -34px; top: 14px; }

  .amenities-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .amenity-item { padding: 22px 12px; }

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

  .testimonial-card { padding: 24px; }

  .faq-question { font-size: 0.85rem; padding: 16px 18px; }
  .faq-answer p { font-size: 0.82rem; }

  .cta-banner { padding: 52px 0; }
  .cta-buttons { flex-direction: column; align-items: center; }
  .cta-buttons .btn { width: 100%; }
}

/* ---------- Very small: max 360px ---------- */
@media (max-width: 360px) {
  .hero-title { font-size: 1.6rem; }
  .trust-items { gap: 10px; }
  .amenities-grid { grid-template-columns: 1fr; }
}