/* =========================================================
   RESPONSIVE CSS
   Arun Mehndi Art & Classes
   ========================================================= */

/* ---------------------------------------------------------
   Tablets (1024px and below)
   --------------------------------------------------------- */
@media (max-width: 1024px) {
    /* Header adjust */
    .nav-links {
        gap: 1rem;
    }
    .header-social {
        display: none; /* Hide desktop social cluster on tablet/mobile */
    }
    .header-mobile-actions {
        display: flex;
        align-items: center;
        gap: 14px;
    }
    .header-mobile-social {
        color: var(--color-mehndi-green);
        font-size: 1.25rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        transition: var(--transition-fast);
        text-decoration: none;
        line-height: 1;
    }
    .header-mobile-social:hover {
        color: var(--color-gold);
        transform: translateY(-2px);
    }
    .header-wishlist-mobile {
        display: inline-flex;
        margin-right: 0;
    }
    
    /* Layouts */
    .grid-4, .grid-4-horizontal { 
        grid-template-columns: repeat(2, 1fr);
    }
    .grid-3 { 
        grid-template-columns: repeat(2, 1fr); 
    }
    
    /* Footer */
    .footer-top {
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem;
    }

    /* Typography Scale - Tablet (1024px and below) */
    h1, h2, .section-title, .home-about-heading, .home-cta-heading, .page-hero-heading, .page-section-heading, .page-hero h1 {
        font-size: 3.2rem !important;
        line-height: 1.2 !important;
    }
    h3 {
        font-size: 1.3rem !important;
    }
    h4 {
        font-size: 1.15rem !important;
    }
}

/* ---------------------------------------------------------
   Mobile Devices (768px and below)
   --------------------------------------------------------- */
@media (max-width: 768px) {
    /* Prevent horizontal page overflow on mobile */
    html, body {
        overflow-x: hidden !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    /* Mobile Container Padding */
    .container {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* 1. Header / Mobile Navigation */
    .header-container {
        height: 70px !important;
        padding-left: 1rem !important;
        padding-right: 1rem !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    .header-social {
        display: none !important; /* Hide desktop social cluster on mobile */
    }
    .header-right {
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
        margin-left: auto !important;
    }
    .header-ctas {
        display: none !important; /* Hide desktop CTA buttons in header */
    }
    .hamburger {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        cursor: pointer !important;
        font-size: 1.45rem !important;
        color: var(--color-mehndi-green) !important;
        padding: 4px !important;
        line-height: 1 !important;
    }
    
    /* 1. Header & Footer Logo - Perfectly round circle, gold border, unclipped full text */
    .header-logo-badge {
        width: 52px !important;
        height: 52px !important;
        border-radius: 50% !important;
        overflow: hidden !important;
        background-color: #000000 !important;
        border: 2px solid var(--color-gold) !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-sizing: border-box !important;
        padding: 3px !important;
        flex-shrink: 0 !important;
    }
    .header-logo-badge img {
        width: 100% !important;
        height: 100% !important;
        object-fit: contain !important;
        display: block !important;
        transform: scale(0.92) !important;
        border-radius: 0 !important;
    }

    .footer-logo-badge {
        width: 64px !important;
        height: 64px !important;
        border-radius: 50% !important;
        overflow: hidden !important;
        background-color: #000000 !important;
        border: 2px solid var(--color-gold) !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35) !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-sizing: border-box !important;
        padding: 4px !important;
        margin-bottom: 1.25rem !important;
    }
    .footer-logo-badge img {
        width: 100% !important;
        height: 100% !important;
        object-fit: contain !important;
        display: block !important;
        transform: scale(0.92) !important;
        border-radius: 0 !important;
    }

    /* Mobile Menu Brand Logo Badge */
    .nav-mobile-brand {
        display: flex !important;
        justify-content: center;
        align-items: center;
        padding-bottom: 0.6rem;
        margin-bottom: 0.6rem;
        border-bottom: 1px solid rgba(212, 175, 55, 0.2);
    }
    .nav-mobile-logo-badge {
        width: 60px !important;
        height: 60px !important;
        border-radius: 50% !important;
        overflow: hidden !important;
        background-color: #000000 !important;
        border: 2px solid var(--color-gold) !important;
        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25) !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-sizing: border-box !important;
        padding: 3px !important;
    }
    .nav-mobile-logo-badge img {
        width: 100% !important;
        height: 100% !important;
        object-fit: contain !important;
        display: block !important;
        transform: scale(0.92) !important;
        border-radius: 0 !important;
    }

    /* 2. Mobile Header Social Icons & Actions: Instagram → Facebook → Wishlist */
    .header-mobile-actions {
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
    }
    .header-mobile-social {
        color: var(--color-mehndi-green) !important;
        font-size: 1.2rem !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        line-height: 1 !important;
        text-decoration: none !important;
    }

    /* 3. Mobile Menu Spacing */
    .nav-links {
        display: none;
        flex-direction: column;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background-color: var(--color-white);
        padding: 1.25rem 1.25rem 1.4rem;
        box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
        text-align: center;
        gap: 0.85rem;
        box-sizing: border-box;
        border-top: 1px solid rgba(200, 169, 126, 0.2);
    }
    .nav-links.active {
        display: flex;
    }
    .nav-links a:not(.btn) {
        font-size: 1.08rem;
        padding: 5px 0;
        font-weight: 500;
        color: var(--color-mehndi-green);
        letter-spacing: 0.3px;
        display: inline-block;
    }
    .nav-links a:not(.btn):hover {
        color: var(--color-maroon);
    }

    /* 4. Mobile Menu CTA Buttons: Side by Side [ CALL NOW ] [ WHATSAPP ] */
    .nav-mobile-cta-row {
        display: flex !important;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 10px;
        width: 100%;
        max-width: 330px;
        margin: 0.65rem auto 0;
        padding: 0;
        box-sizing: border-box;
    }
    .nav-mobile-cta-row .nav-mobile-cta {
        flex: 1;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 9px 12px;
        font-size: 0.84rem;
        font-weight: 600;
        letter-spacing: 0.5px;
        border-radius: 50px;
        text-transform: uppercase;
        white-space: nowrap;
        gap: 6px;
        box-sizing: border-box;
        line-height: 1.2;
        box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12);
        text-decoration: none;
    }
    .nav-mobile-cta-row .nav-mobile-cta i {
        font-size: 0.95rem;
        margin: 0;
    }

    /* 5. Home Page Hero Heading - Reduced by approximately 3px */
    .hero-heading,
    .hero-content h1 {
        font-size: clamp(1.95rem, 7.5vw, calc(2.8rem - 3px)) !important;
        line-height: 1.18 !important;
    }

    /* 6. Second Section: 4 Icon Boxes in 2x2 Grid */
    .grid-4-horizontal { 
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important; /* Exactly 2 boxes per row */
        gap: 0.75rem !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    .feature-section {
        padding: 35px 0 40px;
    }
    .feature-card.premium-card {
        padding: 1.15rem 0.65rem 1rem;
        border-radius: 12px;
        min-height: 100%;
        box-sizing: border-box;
    }
    .feature-icon-badge {
        width: 48px;
        height: 48px;
        margin-bottom: 0.65rem;
    }
    .feature-icon-badge i {
        font-size: 1.25rem;
    }
    .feature-card-title {
        font-size: clamp(0.75rem, 2.5vw, 0.80rem) !important;
        line-height: 1.22 !important;
    }
    .feature-card-accent {
        margin-top: 0.55rem;
        gap: 5px;
    }
    .feature-card-accent .accent-motif {
        font-size: 0.58rem !important;
    }
    .feature-card-accent .accent-line {
        width: 16px;
    }

    /* 7. Third Section: Services Horizontal Scroll Layout */
    .home-services-grid {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        gap: 1rem !important;
        padding: 0.5rem 0.25rem 1.25rem 0.25rem;
        margin-bottom: 1.75rem !important;
        scrollbar-width: none; /* Firefox */
        -ms-overflow-style: none; /* IE/Edge */
    }
    .home-services-grid::-webkit-scrollbar {
        display: none; /* Chrome/Safari */
    }
    .home-services-grid .service-card {
        flex: 0 0 260px !important;
        width: 260px !important;
        max-width: 78vw !important;
        scroll-snap-align: start;
        margin: 0 !important;
    }

    /* General Layout Grids (except swipeable carousels & 2x2 horizontal features) */
    .grid-2, 
    .grid-3:not(.home-testimonial-videos-grid):not(.home-reviews-grid), 
    .grid-4:not(.home-services-grid) { 
        grid-template-columns: 1fr;
    }
    
    /* Sections */
    .section {
        padding: var(--spacing-lg) 0;
    }
    .section-title {
        font-size: clamp(1.95rem, 7.5vw, calc(2.8rem - 3px)) !important;
        line-height: 1.18 !important;
    }

    /* Sub-pages and Global Mobile Heading Scale */
    .page-hero-heading, .page-section-heading, .page-hero h1 {
        font-size: clamp(1.95rem, 7.5vw, calc(2.8rem - 3px)) !important;
        line-height: 1.18 !important;
    }

    /* Universal Mobile Overflow Prevention */
    html, body {
        overflow-x: hidden !important;
        max-width: 100vw !important;
    }

    /* Dedicated Service Pages - Submit Request Button (Compact Mobile Size) */
    .service-booking-submit-btn {
        padding: 11px 20px !important;
        font-size: 0.95rem !important;
    }

    /* 1. OUR SERVICES — VIEW ALL SERVICES BUTTON */
    .services-view-all-wrap {
        margin-top: 0.5rem;
        text-align: center;
        display: flex;
        justify-content: center;
    }
    .home-view-all-services-btn,
    .services-view-all-wrap .btn {
        padding: 11px 26px !important;
        font-size: 0.94rem !important;
        letter-spacing: 0.5px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* 2. OUR JOURNEY, OUR PASSION (HOME ABOUT SECTION) */
    .home-about-grid {
        gap: 2.25rem !important;
    }
    .home-about-img-col {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        width: 100% !important;
    }
    .home-about-img-wrapper {
        max-width: 290px !important;
        width: 100% !important;
        margin: 0 auto !important;
    }
    .home-about-corner-tl {
        top: -10px !important;
        left: -10px !important;
        width: 55px !important;
        height: 55px !important;
        border-width: 3px !important;
    }
    .home-about-corner-br {
        bottom: -10px !important;
        right: -10px !important;
        width: 55px !important;
        height: 55px !important;
        border-width: 3px !important;
    }
    .home-about-img-frame {
        height: 385px !important;
    }
    .home-about-sub {
        font-size: 0.82rem !important;
        letter-spacing: 1.5px !important;
    }
    .home-about-heading {
        font-size: clamp(1.95rem, 7.5vw, calc(2.8rem - 3px)) !important;
        line-height: 1.18 !important;
        margin-top: 0.4rem !important;
        margin-bottom: 1.1rem !important;
    }
    .home-about-p {
        font-size: 0.96rem !important;
        line-height: 1.6 !important;
        margin-bottom: 1rem !important;
    }
    .home-about-features {
        margin-bottom: 1.75rem !important;
    }
    .home-about-features li {
        font-size: 0.94rem !important;
        margin-bottom: 8px !important;
    }
    .home-about-story-btn,
    .home-about-content-col .btn {
        padding: 11px 26px !important;
        font-size: 0.92rem !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* 3. CLIENT TESTIMONIAL VIDEOS (HORIZONTAL SWIPEABLE ROW) */
    .home-testimonial-videos-grid {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        gap: 1rem !important;
        padding: 0.35rem 0.25rem 1.25rem 0.25rem !important;
        margin: 0 !important;
        scrollbar-width: none !important; /* Firefox */
        -ms-overflow-style: none !important; /* IE/Edge */
    }
    .home-testimonial-videos-grid::-webkit-scrollbar {
        display: none !important; /* Chrome/Safari */
    }
    .home-testimonial-videos-grid .testimonial-video-card {
        flex: 0 0 240px !important;
        width: 240px !important;
        max-width: 76vw !important;
        scroll-snap-align: start;
        margin: 0 !important;
        box-sizing: border-box !important;
    }
    .home-testimonial-videos-grid .testimonial-video-card > div:last-child {
        padding: 1rem 0.85rem !important;
    }
    .home-testimonial-videos-grid .testimonial-video-card h5 {
        font-size: 1rem !important;
    }

    /* 4. OUR GALLERY SECTION (SLIGHTLY REDUCED CARD SIZE & BALANCED) */
    .home-gallery-grid {
        grid-template-columns: 1fr !important;
        grid-auto-rows: 205px !important;
        gap: 0.9rem !important;
    }
    .home-gallery-item.wide {
        grid-column: span 1 !important;
    }
    .home-gallery-item.tall {
        grid-row: span 2 !important;
    }

    /* 5. CLIENT REVIEWS SECTION (HORIZONTAL SWIPEABLE ROW & COMPACT CARDS) */
    .home-reviews-grid {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        gap: 1.1rem !important;
        margin-top: 1.75rem !important;
        padding: 0.35rem 0.25rem 1.25rem 0.25rem !important;
        scrollbar-width: none !important; /* Firefox */
        -ms-overflow-style: none !important; /* IE/Edge */
    }
    .home-reviews-grid::-webkit-scrollbar {
        display: none !important; /* Chrome/Safari */
    }
    .home-reviews-grid .testimonial-card {
        flex: 0 0 285px !important;
        width: 285px !important;
        max-width: 82vw !important;
        scroll-snap-align: start;
        margin: 0 !important;
        padding: 1.5rem 1.25rem 1.35rem !important;
        box-sizing: border-box !important;
        display: flex !important;
        flex-direction: column !important;
    }
    .home-reviews-grid .testimonial-card p {
        font-size: 0.94rem !important;
        line-height: 1.58 !important;
        margin-bottom: 1.25rem !important;
        flex-grow: 1;
    }
    .home-reviews-grid .testimonial-card .quote-icon {
        font-size: 1.8rem !important;
        opacity: 0.12 !important;
    }
    .home-reviews-grid .testimonial-card > div:nth-child(2) {
        margin-bottom: 0.85rem !important;
        font-size: 1.05rem !important;
    }
    .home-reviews-grid .testimonial-card > div:last-child div {
        width: 42px !important;
        height: 42px !important;
        font-size: 0.92rem !important;
    }
    .home-reviews-grid .testimonial-card > div:last-child h4 {
        font-size: 1rem !important;
    }

    /* 6. FINAL CTA SECTION (HEADING/TEXT SCALE, SIDE-BY-SIDE BUTTONS, COMPACT ICON BOXES) */
    .home-cta-grid {
        gap: 2.25rem !important;
    }
    .home-cta-left {
        text-align: center;
    }
    .home-cta-heading {
        font-size: clamp(1.95rem, 7.5vw, calc(2.8rem - 3px)) !important;
        line-height: 1.18 !important;
        margin-bottom: 0.85rem !important;
        text-align: center !important;
    }
    .home-cta-desc {
        font-size: 0.95rem !important;
        line-height: 1.55 !important;
        margin-bottom: 1.6rem !important;
        text-align: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    /* Side-by-side CTA buttons on mobile - NEVER stack vertically */
    .home-cta-btns {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 8px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        margin-bottom: 0.5rem !important;
    }
    .home-cta-btns .home-cta-btn {
        flex: 1 1 50% !important;
        padding: 10px 8px !important;
        font-size: clamp(0.74rem, 2.6vw, 0.86rem) !important;
        white-space: nowrap !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 5px !important;
        box-sizing: border-box !important;
        letter-spacing: 0 !important;
        border-radius: 50px !important;
    }
    .home-cta-btns .home-cta-btn i {
        font-size: 0.9em !important;
    }
    /* Contact information icon boxes: Location, Email, Working Hours */
    .home-contact-cards {
        gap: 0.85rem !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    .home-contact-card {
        padding: 0.9rem 1.15rem !important;
        gap: 1rem !important;
        border-radius: 8px !important;
        box-sizing: border-box !important;
    }
    .home-contact-card i {
        font-size: 1.4rem !important;
        width: 26px !important;
        text-align: center !important;
        flex-shrink: 0 !important;
    }
    .home-contact-card h4 {
        font-size: 0.95rem !important;
        margin-bottom: 2px !important;
    }
    .home-contact-card p {
        font-size: 0.86rem !important;
    }

    /* 7. FOOTER SECTION: COMPACT MOBILE LAYOUT */
    .footer {
        padding: 2.25rem 0 1.25rem !important;
    }
    .footer-top {
        grid-template-columns: 1fr !important;
        text-align: center !important;
        gap: 1.5rem !important;
        margin-bottom: 1.5rem !important;
    }
    .footer-col p {
        font-size: 0.9rem !important;
        line-height: 1.5 !important;
        margin-bottom: 1rem !important;
    }
    .footer-logo-badge {
        margin-bottom: 0.9rem !important;
    }
    .footer-col h4 {
        font-size: 1.1rem !important;
        margin-bottom: 0.75rem !important;
    }
    .footer-col h4::after {
        left: 50% !important;
        transform: translateX(-50%) !important;
    }
    .footer-links li {
        margin-bottom: 0.45rem !important;
        font-size: 0.9rem !important;
    }
    .footer-contact li {
        margin-bottom: 0.7rem !important;
        font-size: 0.9rem !important;
        gap: 0.35rem !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
    }
    .footer-contact li i {
        font-size: 1rem !important;
        margin-bottom: 2px !important;
    }
    .footer-bottom {
        padding-top: 1.2rem !important;
        gap: 0.6rem !important;
        font-size: 0.82rem !important;
        text-align: center !important;
        flex-direction: column !important;
    }
}