/* ==========================================================================
   ROSEWOOD SPA — COMPLETE RESPONSIVE & DEVICE-FRIENDLY STYLESHEET
   Breakpoints: 360px | 480px | 600px | 768px | 1024px | 1280px | 1440px+
   Covers: Mobile First, Tablet, Laptop, Desktop, Ultra-wide
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. ULTRA-WIDE & LARGE DESKTOP (1440px+)
   -------------------------------------------------------------------------- */
@media (min-width: 1440px) {
    .container {
        max-width: 1360px;
    }
    
    h1 { font-size: 5rem; }
    h2 { font-size: 3.4rem; }
}

/* --------------------------------------------------------------------------
   2. STANDARD LAPTOP / DESKTOP (max-width: 1280px)
   -------------------------------------------------------------------------- */
@media (max-width: 1280px) {
    .container {
        padding: 0 2rem;
    }

    .hero-title {
        font-size: clamp(2.8rem, 4.5vw, 4.5rem);
    }

    .services-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .testimonials-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 1.5rem;
    }
}

/* --------------------------------------------------------------------------
   3. TABLETS & SMALL LAPTOPS (max-width: 1024px)
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
    /* Typography Scale-down */
    h1 { font-size: clamp(2.4rem, 4vw, 3.5rem); }
    h2 { font-size: clamp(1.8rem, 3vw, 2.6rem); }
    h3 { font-size: clamp(1.3rem, 2.2vw, 1.9rem); }

    /* Header */
    .nav-menu {
        gap: 1.5rem;
    }

    .nav-link {
        font-size: 0.85rem;
    }

    .header-cta {
        padding: 0.75rem 1.4rem;
        font-size: 0.85rem;
    }

    /* Feature Bar */
    .feature-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }

    /* About Section */
    .about-grid {
        gap: 2.5rem;
    }

    .about-img {
        height: 420px;
    }

    /* Services */
    .services-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.8rem;
    }

    /* Why Choose */
    .why-choose-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1.25rem;
    }

    /* Testimonials */
    .testimonials-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }

    /* Gallery */
    .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.25rem;
    }

    /* Gallery Item heights */
    .gallery-item {
        height: 260px;
    }

    /* Service Detail Rows */
    .service-detail-row {
        gap: 2.5rem;
    }

    .service-detail-img-wrap {
        height: 360px;
    }

    /* Footer */
    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 2.5rem;
    }

    /* FAQ */
    .faq-question {
        font-size: 1.1rem;
        padding: 1.2rem 1.4rem;
    }
}

/* --------------------------------------------------------------------------
   4. TABLET PORTRAIT & LARGE PHONE (max-width: 768px)
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    /* Body */
    body {
        padding-bottom: 76px; /* Room for sticky mobile bottom bar */
    }

    /* Container */
    .container {
        padding: 0 1.25rem;
    }

    /* ---- Section Spacing ---- */
    .section {
        padding: 4rem 0;
    }

    .section-header {
        margin-bottom: 2.5rem;
    }

    .section-header p {
        font-size: 1rem;
    }

    /* ---- Typography ---- */
    h1 { font-size: clamp(2rem, 6vw, 2.8rem); }
    h2 { font-size: clamp(1.7rem, 5vw, 2.2rem); }
    h3 { font-size: clamp(1.3rem, 4vw, 1.6rem); }

    .script-accent {
        font-size: clamp(1.6rem, 5vw, 2.2rem);
    }

    .lead-text {
        font-size: 1rem;
    }

    /* ---- HEADER & NAV ---- */
    .site-header {
        padding: 0.25rem 0; /* min-height on header-inner controls the height */
    }

    .site-header.scrolled {
        padding: 0.25rem 0;
    }

    .header-inner {
        min-height: 72px; /* Slightly shorter on mobile but still fits 64px logo */
        align-items: center;
    }

    .desktop-nav {
        display: none;
    }

    .nav-menu {
        display: none;
    }

    .hamburger {
        display: flex;
    }

    .header-cta {
        display: none;
    }

    /* Logo image — bigger and fully visible on mobile */
    .logo-img {
        width: 64px;
        height: 64px;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    .logo-text {
        display: none; /* keep text hidden on mobile */
    }

    /* ---- MOBILE DRAWER ---- */
    .mobile-nav-drawer {
        max-width: 100%;
        width: 280px;
    }

    /* ---- HERO SECTION ---- */
    .hero {
        min-height: 90vh;
        padding-top: 5rem;
        padding-bottom: 2rem;
        text-align: center;
    }

    .hero-content {
        max-width: 100%;
    }

    .hero-eyebrow {
        justify-content: center;
    }

    .hero-eyebrow::before {
        display: none;
    }

    .hero-title {
        font-size: clamp(2rem, 7vw, 2.8rem);
        text-align: center;
    }

    .hero-description {
        font-size: 1rem;
        text-align: center;
        margin-left: auto;
        margin-right: auto;
    }

    .hero-actions {
        flex-direction: column;
        align-items: stretch;
        gap: 0.9rem;
    }

    .hero-actions .btn,
    .hero-actions .phone-pill {
        width: 100%;
        justify-content: center;
    }

    /* ---- FEATURE BAR ---- */
    .feature-bar {
        margin-top: 0;
        margin-left: 1.25rem;
        margin-right: 1.25rem;
        border-radius: var(--radius-md);
        padding: 1.75rem 1.25rem;
    }

    .feature-grid {
        grid-template-columns: 1fr 1fr;
        gap: 1.25rem;
    }

    .feature-item {
        flex-direction: column;
        text-align: center;
        align-items: center;
        gap: 0.75rem;
    }

    /* ---- ABOUT SECTION ---- */
    .about-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .about-img {
        height: 300px;
    }

    .about-badge {
        bottom: 1rem;
        right: 1rem;
        padding: 1rem 1.25rem;
    }

    .about-content h2 {
        text-align: center;
    }

    .about-content .eyebrow {
        display: block;
        text-align: center;
    }

    .owner-info-box {
        flex-direction: column;
        text-align: center;
        align-items: center;
    }

    /* ---- WHY CHOOSE SECTION ---- */
    .why-choose-card {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
        padding: 1.5rem;
    }

    /* ---- SERVICES GRID ---- */
    .services-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .service-card-img-wrap {
        height: 220px;
    }

    /* ---- SERVICE DETAIL ROWS ---- */
    .service-detail-row {
        grid-template-columns: 1fr;
        direction: ltr !important;
        gap: 2rem;
        margin-bottom: 4rem;
    }

    .service-detail-row .service-detail-content {
        direction: ltr;
    }

    .service-detail-img-wrap {
        height: 280px;
    }

    /* ---- TESTIMONIALS ---- */
    .testimonial-card {
        flex: 0 0 100%;
        min-width: 100%;
        padding: 1.75rem 1.5rem;
    }


    /* ---- FAQ ---- */
    .faq-question {
        font-size: 1.05rem;
        padding: 1.1rem 1.25rem;
    }

    .faq-answer {
        padding: 0 1.25rem;
    }

    .faq-item.active .faq-answer {
        padding: 0 1.25rem 1.25rem 1.25rem;
    }

    /* ---- GALLERY ---- */
    .gallery-filter-tabs {
        gap: 0.6rem;
        margin-bottom: 2rem;
    }

    .filter-btn {
        padding: 0.5rem 1.1rem;
        font-size: 0.82rem;
    }

    .gallery-grid {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }

    .gallery-item {
        height: 280px;
    }

    /* ---- PAGE HERO (INNER PAGES) ---- */
    .page-hero {
        padding: 8rem 0 4rem;
        text-align: center;
    }

    .page-hero h1 {
        font-size: clamp(1.9rem, 6vw, 2.6rem);
    }

    .page-hero p {
        font-size: 1rem;
    }

    /* ---- BOOKING FORM ---- */
    .booking-card {
        padding: 2rem 1.25rem;
        border-radius: var(--radius-md);
        margin: 0 0;
    }

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

    .form-group.full-width {
        grid-column: span 1;
    }

    /* ---- CONTACT GRID ---- */
    .contact-grid,
    .about-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    /* ---- SPECIAL CTA ---- */
    .special-cta {
        padding: 4.5rem 0;
    }

    .special-cta h2 {
        font-size: clamp(1.8rem, 5vw, 2.5rem);
    }

    .special-cta p {
        font-size: 1.05rem;
    }

    .special-cta-content > div {
        flex-direction: column;
        align-items: stretch;
        gap: 0.9rem;
    }

    .special-cta-content > div .btn {
        width: 100%;
        justify-content: center;
    }

    /* ---- MAP SECTION ---- */
    .map-wrapper {
        height: 360px;
    }

    .map-floating-cta {
        bottom: 1rem;
        left: 1rem;
        right: 1rem;
    }

    .map-floating-cta .btn {
        width: 100%;
        text-align: center;
    }

    /* ---- FOOTER ---- */
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .footer-bottom {
        flex-direction: column;
        gap: 0.75rem;
        text-align: center;
    }

    .site-footer {
        padding-top: 3rem;
        padding-bottom: 1.5rem;
        background-attachment: scroll;
    }


    /* ---- FLOATING ACTIONS ---- */
    .floating-actions-desktop {
        display: none;
    }

    /* ---- MOBILE STICKY BAR ---- */
    .mobile-bottom-bar {
        display: block;
        padding: 0.6rem 1rem;
    }

    .mobile-bottom-grid {
        gap: 0.5rem;
    }

    .mobile-bottom-btn {
        padding: 0.7rem 0.5rem;
        font-size: 0.82rem;
        border-radius: var(--radius-full);
        text-align: center;
        font-weight: 700;
    }
}

/* --------------------------------------------------------------------------
   5. SMALL MOBILE (max-width: 600px)
   -------------------------------------------------------------------------- */
@media (max-width: 600px) {
    /* ---- Feature Bar: Go to single column ---- */
    .feature-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .feature-item {
        flex-direction: row;
        text-align: left;
        align-items: center;
        justify-content: flex-start;
    }

    /* ---- Gallery: Single column ---- */
    .gallery-grid {
        grid-template-columns: 1fr;
    }

    /* ---- Testimonials single col ---- */
    .testimonials-grid {
        grid-template-columns: 1fr;
    }

    /* ---- Why choose cols ---- */
    .why-choose-grid {
        grid-template-columns: 1fr !important;
    }

    /* ---- Service cards single col ---- */
    .services-grid {
        grid-template-columns: 1fr;
    }

    /* ---- Package cards ---- */
    .package-grid,
    .services-grid {
        grid-template-columns: 1fr;
    }

    /* ---- CTA section ---- */
    .special-cta {
        padding: 4rem 0;
    }

    /* ---- Footer ---- */
    .footer-grid {
        grid-template-columns: 1fr;
    }
}

/* --------------------------------------------------------------------------
   6. EXTRA SMALL MOBILE (max-width: 480px)
   -------------------------------------------------------------------------- */
@media (max-width: 480px) {
    /* Container */
    .container {
        padding: 0 1rem;
    }

    /* Typography */
    h1 { font-size: clamp(1.75rem, 8vw, 2.5rem); }
    h2 { font-size: clamp(1.5rem, 6vw, 2rem); }
    h3 { font-size: clamp(1.15rem, 5vw, 1.5rem); }
    h4 { font-size: 1.05rem; }

    .script-accent {
        font-size: 1.5rem;
    }

    .eyebrow {
        font-size: 0.78rem;
        letter-spacing: 0.12em;
    }

    /* Hero */
    .hero {
        min-height: 100svh; /* Use small viewport height for mobile browsers */
        padding-top: 4.5rem;
    }

    .hero-title {
        font-size: clamp(1.8rem, 8vw, 2.4rem);
        line-height: 1.15;
    }

    .hero-description {
        font-size: 0.95rem;
        margin-bottom: 2rem;
    }

    /* Page Hero */
    .page-hero {
        padding: 7rem 0 3.5rem;
    }

    .page-hero h1 {
        font-size: clamp(1.7rem, 7vw, 2.2rem);
    }

    /* Section spacing */
    .section {
        padding: 3rem 0;
    }

    .section-header {
        margin-bottom: 2rem;
    }

    /* Feature bar */
    .feature-bar {
        margin-left: 1rem;
        margin-right: 1rem;
        padding: 1.25rem 1rem;
    }

    .feature-icon-box {
        width: 44px;
        height: 44px;
    }

    .feature-info h4 {
        font-size: 0.95rem;
    }

    .feature-info p {
        font-size: 0.8rem;
    }

    /* About image */
    .about-img {
        height: 260px;
    }

    .about-badge {
        bottom: 0.75rem;
        right: 0.75rem;
        padding: 0.75rem 1rem;
    }

    .about-badge-title {
        font-size: 1rem;
    }

    /* Service cards */
    .service-card-img-wrap {
        height: 200px;
    }

    .service-card-body {
        padding: 1.5rem 1.25rem;
    }

    /* Gallery items */
    .gallery-item {
        height: 240px;
    }

    /* Testimonial card */
    .testimonial-card {
        padding: 1.5rem 1.25rem;
    }

    .testimonial-text {
        font-size: 0.95rem;
    }

    /* FAQ */
    .faq-question {
        font-size: 1rem;
        padding: 1rem;
        gap: 0.75rem;
    }

    .faq-answer {
        padding: 0 1rem;
    }

    .faq-item.active .faq-answer {
        padding: 0 1rem 1.1rem 1rem;
    }

    .faq-answer p {
        font-size: 0.92rem;
    }

    /* Special CTA */
    .special-cta {
        padding: 3.5rem 0;
    }

    .special-cta h2 {
        font-size: clamp(1.65rem, 7vw, 2.2rem);
    }

    /* Booking */
    .booking-card {
        padding: 1.75rem 1rem;
    }

    /* Buttons */
    .btn {
        padding: 0.85rem 1.75rem;
        font-size: 0.88rem;
    }

    /* Footer */
    .site-footer {
        padding-top: 2.5rem;
    }

    .footer-col h4 {
        font-size: 1.1rem;
        margin-bottom: 1rem;
    }

    .footer-links a {
        font-size: 0.9rem;
    }

    /* Mobile Bar */
    .mobile-bottom-btn {
        font-size: 0.78rem;
        padding: 0.65rem 0.4rem;
    }
}

/* --------------------------------------------------------------------------
   7. VERY SMALL PHONES (max-width: 360px)
   -------------------------------------------------------------------------- */
@media (max-width: 360px) {
    .container {
        padding: 0 0.85rem;
    }

    .hero-title {
        font-size: 1.7rem;
    }

    .logo-main {
        font-size: 1.3rem;
    }

    .logo-sub {
        font-size: 0.55rem;
    }

    .btn {
        padding: 0.8rem 1.4rem;
        font-size: 0.82rem;
    }

    .mobile-bottom-grid {
        gap: 0.35rem;
    }

    .mobile-bottom-btn {
        font-size: 0.72rem;
        padding: 0.6rem 0.25rem;
    }
}

/* --------------------------------------------------------------------------
   8. GLOBAL UTILITY FIXES — ALL SCREEN SIZES
   -------------------------------------------------------------------------- */

/* Prevent horizontal scroll overflow */
html, body {
    overflow-x: hidden;
}

/* Make all images fluid */
img {
    max-width: 100%;
    height: auto;
}

/* Make embedded iframes / maps responsive */
iframe {
    max-width: 100%;
    border: none;
}

/* Prevent text overflow on small screens */
h1, h2, h3, h4, h5, h6 {
    word-break: break-word;
    overflow-wrap: break-word;
}

p, span, a {
    overflow-wrap: break-word;
    word-wrap: break-word;
}

/* Smooth tap targets on mobile */
a, button, [role="button"] {
    -webkit-tap-highlight-color: rgba(214, 168, 95, 0.2);
    touch-action: manipulation;
}

/* ---- Header CTA visibility ---- */
@media (min-width: 769px) {
    .header-cta {
        display: inline-flex !important;
    }

    .hamburger {
        display: none;
    }

    .mobile-bottom-bar {
        display: none;
    }

    .floating-actions-desktop {
        display: flex;
    }
}

/* ---- Fix for desktop header actions ---- */
.header-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
}

/* ---- Why Choose image block on mobile ---- */
@media (max-width: 768px) {
    .why-choose-img-col {
        order: -1; /* Show image above text on mobile */
        margin-bottom: 1rem;
    }
}

/* ---- Lightbox adjustments on mobile ---- */
@media (max-width: 768px) {
    .lightbox-modal {
        padding: 1rem;
    }

    .lightbox-close {
        top: 0.75rem;
        right: 0.75rem;
        width: 38px;
        height: 38px;
    }

    .lightbox-prev {
        left: 0.5rem;
    }

    .lightbox-next {
        right: 0.5rem;
    }

    .lightbox-img {
        max-height: 70vh;
    }
}

/* ---- About grid fix for contact page ---- */
@media (max-width: 768px) {
    /* Booking card takes full width */
    .booking-card {
        max-width: 100%;
        margin: 0;
    }

    /* About badge won't overflow on tiny screens */
    .about-image-wrapper {
        overflow: visible;
    }

    .about-image-wrapper::after {
        display: none; /* Remove decorative border on mobile */
    }
}

/* ---- Service detail row image on mobile ---- */
@media (max-width: 768px) {
    .service-detail-img-wrap {
        width: 100%;
        height: 260px;
        border-radius: var(--radius-md);
    }
}

/* ---- Why Choose Cards Grid ---- */
@media (max-width: 768px) {
    .why-section-grid {
        grid-template-columns: 1fr !important;
    }

    .why-section-grid .about-image-wrapper {
        order: -1;
        height: 280px;
    }

    .why-section-grid .about-img {
        height: 280px;
    }
}

/* ---- Better spacing between page-hero and first section on mobile ---- */
@media (max-width: 480px) {
    .page-hero + .section {
        padding-top: 2.5rem;
    }
}

/* ---- Ensure inline-style grids collapse on mobile ---- */
@media (max-width: 768px) {
    [style*="grid-template-columns: 1fr 1fr"],
    [style*="grid-template-columns: repeat(2"],
    [style*="grid-template-columns: repeat(3"] {
        display: flex !important;
        flex-direction: column !important;
    }

    /* But keep .form-grid override properly handled via form-grid selector above */
}

/* ---- Scroll-reveal: disable transforms on tiny screens for perf ---- */
@media (max-width: 480px) {
    .reveal-left,
    .reveal-right {
        transform: translateY(25px) !important;
    }
}

/* --------------------------------------------------------------------------
   9. PRINT MEDIA QUERY
   -------------------------------------------------------------------------- */
@media print {
    .site-header,
    .mobile-bottom-bar,
    .floating-actions-desktop,
    .mobile-nav-drawer,
    .mobile-nav-backdrop {
        display: none !important;
    }

    body {
        padding-bottom: 0;
        color: #000;
        background: #fff;
    }

    .page-hero,
    .hero,
    .special-cta {
        background: #f5f5f5;
        color: #000;
        padding: 2rem 0;
    }

    .page-hero h1,
    .hero-title,
    .special-cta h2 {
        color: #000;
    }
}

/* --------------------------------------------------------------------------
   10. SPECIFIC INLINE-GRID OVERRIDES FOR MOBILE
       (These target elements that use inline style attributes so CSS can win)
   -------------------------------------------------------------------------- */

/* About grid height fix on mobile */
@media (max-width: 768px) {
    .animated-img-container[style*="height: 480px"],
    .animated-img-container[style*="height: 520px"] {
        height: 300px !important;
    }

    /* Why Choose section: image above cards on mobile */
    .section-bg-cream .about-grid {
        grid-template-columns: 1fr;
    }

    /* Owner info grid collapsing */
    [style*="grid-template-columns: 1fr 1fr"] {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 480px) {
    .animated-img-container[style*="height: 480px"],
    .animated-img-container[style*="height: 520px"],
    .animated-img-container[style*="height: 360px"] {
        height: 240px !important;
    }
}

/* Services grid: 2 col on tablet, 1 col on mobile (already defined but reinforce) */
@media (min-width: 769px) and (max-width: 1024px) {
    .services-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .testimonials-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* Hero bottom spacing fix on mobile with bottom bar */
@media (max-width: 768px) {
    .hero {
        padding-bottom: 3rem;
    }

    /* Fix hero content alignment */
    .hero-content {
        padding: 0;
    }

    /* Ensure hero CTA buttons are all full-width and stacked */
    .hero-actions {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    .hero-actions > * {
        width: 100% !important;
        text-align: center;
        justify-content: center;
    }
}

/* Feature bar pull-up tweak for mobile */
@media (max-width: 480px) {
    .feature-bar {
        border-radius: var(--radius-md);
        padding: 1.25rem 1rem;
    }

    .feature-icon-box {
        min-width: 42px;
        min-height: 42px;
    }
}

/* Make gallery filter tabs wrappable on tiny screens */
@media (max-width: 480px) {
    .gallery-filter-tabs {
        justify-content: flex-start;
        overflow-x: auto;
        padding-bottom: 0.5rem;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        flex-wrap: nowrap;
        gap: 0.5rem;
    }

    .gallery-filter-tabs::-webkit-scrollbar {
        display: none;
    }

    .filter-btn {
        white-space: nowrap;
        flex-shrink: 0;
    }
}

/* Ensure about-grid always collapses correctly even with gap inline override */
@media (max-width: 768px) {
    .about-grid[style] {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
    }

    /* contact form full width */
    .booking-card[style] {
        max-width: 100% !important;
        margin: 0 !important;
    }

    /* Testimonials grid */
    .testimonials-grid {
        grid-template-columns: 1fr !important;
    }

    /* Footer col: display correctly */
    .footer-col h4 {
        margin-bottom: 0.75rem;
    }
}

/* Sticky header compact on very small phones */
@media (max-width: 360px) {
    .site-header {
        padding: 0.85rem 0;
    }
}