/* =========================================
   SERVICES INTRO SECTION
   ========================================= */
.services-intro {
    background-color: #E6E4E0;
    padding: 8rem 5%;
    color: #050505; /* Primary black text */
}

.services-intro-container {
    max-width: 1400px;
    margin: 0 auto;
}

.intro-heading {
    text-align: center;
    margin-bottom: 4rem;
}

.intro-heading h2 {
    font-size: clamp(3rem, 6vw, 4.5rem);
    margin-bottom: 1rem;
    font-weight: 600;
    color: #050505; /* Explicitly black */
}

.intro-heading h3 {
    font-size: clamp(1.2rem, 2vw, 1.6rem);
    font-weight: 400;
    color: #555555; /* Dark gray for a softer, readable contrast */
}

.intro-body {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 2-column layout for desktop */
    gap: 4rem;
}

.intro-column p {
    font-size: 1.15rem;
    line-height: 1.6;
    margin-bottom: 1.5rem;
    color: #555555; /* Dark gray for paragraph readability */
}

/* --- MOBILE OPTIMIZATION --- */
@media (max-width: 768px) {
    .services-intro {
        padding: 5rem 5%;
    }
    
    .intro-body {
        grid-template-columns: 1fr; /* Stacks to 1 column on mobile */
        gap: 0;
    }
    
    .intro-heading {
        margin-bottom: 2rem;
    }
}

/* =========================================
   SERVICES SECTION & LOCALIZED THEME
   ========================================= */

/* --- FLEX COLUMN LAYOUT – EXACT VIEWPORT HEIGHT --- */
.services-section {
    height: 100vh;                    /* exact viewport height, no more no less */
    /* overflow-y: hidden; */               /* prevent internal scrollbar on the section itself */
    display: flex;
    flex-direction: column;
    justify-content: space-between;   /* pushes header to top, controls to bottom */
    padding: 5vh 5% 4vh 5%;          /* keep some breathing room, but flexible */
    /* position: sticky; */
    /* top: 0; */
    z-index: 10;
    color: var(--text-primary);
    background-color: var(--bg-base);
    transition: background-color 1.5s ease-in-out, color 1.5s ease-in-out;
}

/* When active, these overwrite the global variables ONLY inside this section */
.services-section.light-mode {
    --bg-base: #E6E4E0;
    --bg-surface: #D8D6D2;
    --text-primary: #050505;
    --text-secondary: #555555;
    background-color: var(--bg-base);
    color: var(--text-primary);
}

/* --- HEADER & BUTTON TRANSITIONS --- */

/* Header stays at top - UPDATED with full width & proper spacing */
.services-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;                     /* ensure it takes full container width */
    max-width: 1400px;
    margin: 0 auto 4vh auto;         /* keep bottom margin for spacing */
    flex-shrink: 0;                  /* prevent shrinking */
}

/* Ensure the title fades smoothly and doesn't stretch */
.services-header .section-title {
    margin-bottom: 0;
    text-align: left;
    flex: 0 0 auto;                  /* prevent unwanted stretching */
    transition: color 1.5s ease-in-out;
}

/* Button alignment inside header - pushes to far right */
.services-header .view-all-btn {
    flex-shrink: 0;                  /* prevent shrinking */
    white-space: nowrap;             /* keep text on one line */
    margin-left: auto;               /* pushes button to the far right */
    margin-right: 0;
}

/* Override the hardcoded white border from hero.css and smooth the fade */
.services-section .view-all-btn {
    color: var(--text-primary);
    border: 2px solid var(--text-primary); 
    transition: color 1.5s ease-in-out, border-color 1.5s ease-in-out, background-color 1.5s ease-in-out;
}

/* Ensure hover states invert properly when in light mode */
.services-section.light-mode .view-all-btn:hover {
    background-color: var(--text-primary);
    color: var(--bg-base);
}


/* =========================================
   CAROUSEL & CARD STYLES
   ========================================= */

/* Carousel wrapper fills remaining space */
.carousel-wrapper {
    position: relative;
    width: 100%;       /* ← THE FIX: Forces wrapper to respect screen size */
    min-width: 0;      /* ← THE FIX: Overrides the flexbox stretching quirk */
    max-width: 1400px;
    margin: 0 auto;
    flex: 1;                          /* takes all leftover space */
    display: flex;
    flex-direction: column;
    min-height: 0;                    /* allows flex child to shrink */
}

/* The horizontal scrolling track — without snapping, uses full height */
.services-track {
    display: flex;
    gap: 2vw;
    overflow-x: auto;
    scroll-behavior: auto; /* CHANGED FROM SMOOTH TO AUTO */
    padding-bottom: 1rem;
    scrollbar-width: none;            
    transition: opacity 0.3s ease;
    flex: 1;                          
    min-height: 0;                    
}

.services-track::-webkit-scrollbar {
    display: none; /* Hides scrollbar in Chrome/Safari */
}

/* The tall, rounded cards – fill the track's height completely */
.service-card.video-style {
    min-width: 380px;
    height: 100%;                     /* fill the track's height */
    border-radius: 16px;
    position: relative;
    overflow: hidden; 
    display: flex;
    align-items: flex-end;
    padding: 2.5rem;
    
    /* Pushed further down and hidden */
    opacity: 0; 
    transform: translateY(100px); 
    
    /* 1.2s duration with "Expo Out" deceleration curve */
    transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1), transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.service-card.video-style.animate-in {
    opacity: 1;
    transform: translateY(0);
}

.card-content h3 {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
}

/* Controls stay at bottom */
.carousel-controls {
    display: flex;
    justify-content: center; /* Changed from flex-end to center */
    align-items: center;     /* Ensures arrows and dots align vertically */
    gap: 1rem;
    margin-top: 1rem;
    flex-shrink: 0;
    width: 100%;             /* Guarantees the container takes full width to center properly */
}

/* --- WHATSAPP BUFFER FOR MID-SIZED SCREENS --- */
/* Targets laptops and smaller monitors before the mobile breakpoint kicks in */
@media (max-width: 1600px) and (min-width: 769px) {
    .carousel-controls {
        /* Pushes the controls leftwards by 220px to clear the 60px icon, the text bubble, and the 2rem fixed right offset */
        margin-right: 220px; 
    }
}

/* Arrow Navigation */
.arrow-btn {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: transparent;
    border: 1px solid var(--text-primary); /* Syncs with dynamic text color */
    color: var(--text-primary);            /* Syncs with dynamic text color */
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Smooth fade to match the section's light-mode transition */
    transition: background-color 1.5s ease-in-out, color 1.5s ease-in-out, border-color 1.5s ease-in-out;
    flex-shrink: 0;
}

.arrow-btn:hover {
    background: var(--text-primary);
    color: var(--bg-base);
}

/* The Progress Indicator Dots */
.carousel-dots {
    display: flex;
    gap: 12px;
    align-items: center;
    justify-content: center;
    margin: 0 2rem; 
}

.dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 1.5px solid #111; 
    background: transparent;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
    padding: 0;
    flex-shrink: 0;
}

/* The Matte Gold Active State */
.dot.active {
    background-color: #C89B3C;
    border-color: #C89B3C;
    transform: scale(1.3); 
}


/* =========================================
   MODAL OVERLAY & GRID STATE
   ========================================= */

/* --- MODAL OVERLAY STATE --- */
.carousel-wrapper.services-modal-active {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    z-index: 2000;
    /* Neutral transparent layer so it blends with ANY background color */
    background: transparent; 
    backdrop-filter: blur(25px); /* Stronger blur for the true glass effect */
    -webkit-backdrop-filter: blur(25px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5% 0; 
}

/* --- GRID VIEW INSIDE MODAL --- */
.services-track.grid-view {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    width: 90%;
    max-width: 1400px;
    max-height: 85vh; 
    overflow-y: auto; 
    overflow-x: hidden;
    padding-right: 0; /* Removed the padding since there is no scrollbar */
    
    /* Hide scrollbar for Firefox and Edge */
    scrollbar-width: none; 
    -ms-overflow-style: none; 
}

/* Hide scrollbar for Chrome, Safari and Opera */
.services-track.grid-view::-webkit-scrollbar {
    display: none;
}

/* --- CLOSE BUTTON FIXED STATE --- */
.view-all-btn.modal-close-active {
    position: fixed;
    top: 2.5rem;
    right: 5%;
    z-index: 2001; /* Sits above the modal */
    padding: 0;
    width: 50px;
    height: 50px;
    border-radius: 50%; /* Transforms into a circle */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    background: var(--text-primary);
    color: var(--bg-base);
}

/* --- PRESERVE WHITE TEXT ON IMAGE CARDS --- */
/* Forces the text inside the cards to ignore the light-mode switch and stay white */
.services-section .service-card .card-content h3,
.services-section .service-card .card-content .service-desc {
    color: #ffffff;
}

/* --- DYNAMIC CARD CONTENT (CAROUSEL VS GRID) --- */

/* 1. Hide the description by default in the standard carousel view */
.service-card .service-desc {
    display: none;
}

/* 2. Reveal the description ONLY when the grid modal is active */
.services-track.grid-view .service-card .service-desc {
    display: block;
    
    /* Adding a subtle fade-in so the text feels elegant when the grid opens */
    animation: textFadeIn 0.5s ease-out forwards;
}

/* --- SERVICE CARD PILL BUTTON --- */
.card-pill-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 1.5rem;
    border-radius: 50px; 
    border: 2px solid #ffffff;
    color: #ffffff;
    background: transparent;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    margin-top: 1.25rem; /* Pushes the button down beneath the text */
    transition: background-color 0.3s ease, color 0.3s ease;
}

.card-pill-btn:hover {
    background-color: #ffffff;
    color: #050505;
}

/* =========================================
   1. GRID VIEW OVERLAY DARKENING
   ========================================= */
.service-card .card-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.25); /* Subtle default tint for carousel */
    transition: background 0.6s ease;
    z-index: 1;
}

/* Flood with 75% black ONLY when the modal is open */
.services-track.grid-view .service-card .card-overlay {
    background: rgba(0, 0, 0, 0.75); 
}

/* Ensure text and buttons stay above the overlay */
.service-card .card-content {
    position: relative;
    z-index: 2;
    width: 100%;
}


/* =========================================
   3. RESPONSIVE GRID WIDTH (14" - 20" Laptops)
   ========================================= */
/* Targets screens roughly up to 20" laptops (1600px width) */
@media (max-width: 1600px) {
    .services-track.grid-view {
        width: 80%; /* Shrinks grid slightly so it doesn't collide with the X button */
    }
}

/* Keyframes for the smooth text reveal */
@keyframes textFadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* =========================================
   GRID VIEW RESPONSIVE FIX
   ========================================= */

/* 1. Remove the rigid minimum width when cards are in the Grid */
.services-track.grid-view .service-card.video-style {
    min-width: 0; /* Surrenders horizontal control to the Grid */
    min-height: 450px; /* THE FIX: Forces cards to stay tall enough for their text, triggering a vertical scroll */
}

/* 2. Drop to 2 columns on smaller laptops (14" and below) so they don't squish */
@media (max-width: 1200px) {
    .services-track.grid-view {
        grid-template-columns: repeat(2, 1fr);
        width: 90%; /* Recovers the space lost by dropping a column */
    }
}

/* 3. Drop to 1 column on Tablets/Mobile */
@media (max-width: 768px) {
    .services-track.grid-view {
        grid-template-columns: 1fr;
    }
}

/* =========================================
   MOBILE OPTIMIZATIONS
   ========================================= */

@media (max-width: 768px) {
    /* 1. Hide the 'All Services' grid button */
    .services-header .view-all-btn {
        display: none !important;
    }

    /* 2. Center the main heading */
    .services-header {
        justify-content: center;
    }

    .services-header .section-title {
        text-align: center;
    }

    /* 3. Center the carousel arrows and dots */
    .carousel-controls {
        justify-content: center;
        width: 100%;
    }

    /* 4. HIDE THE DOTS */
    .carousel-dots {
        display: none !important;
    }
    
}

/* =========================================
   CAROUSEL & MOBILE FIX
   ========================================= */

/* 1. RESTORE PAGE SCROLLING */
/* This explicitly tells the browser: "Allow horizontal swiping for the carousel AND vertical swiping for the page" */
.services-track {
    touch-action: pan-x pan-y !important; 
    overflow-y: visible !important; /* Reverts any previous locks that broke page scrolling */
}

/* 2. LOCK THE IMAGE JITTER */
/* Makes the background image "invisible" to touch, stopping the native drag/bounce effect */
.service-card .card-bg-img {
    pointer-events: none !important; 
    -webkit-user-drag: none !important;
    user-select: none !important;
}

/* =========================================
   MOBILE OPTIMIZATIONS
   ========================================= */
@media (max-width: 768px) {
    
    /* 1. THE TRACK FIX */
    .services-track {
        overflow-x: auto !important;
        overflow-y: hidden !important; /* Strictly lock the internal vertical movement */
        
        /* THE ROOT CULPRIT: Remove the internal padding that caused the invisible vertical scroll */
        padding-bottom: 0 !important; 
        margin-bottom: 1rem !important; /* Move the spacing safely outside the track */
        
        /* Mechanics pulled from your reference script */
        scroll-snap-type: x mandatory !important;
        -webkit-overflow-scrolling: touch !important;
        touch-action: pan-x pan-y !important;
    }

    /* 2. THE CARD FIX */
    .service-card.video-style {
        min-width: 85vw !important; /* Force cards to take up 85% of mobile screen */
        
        /* Snapping mechanics pulled from your reference script */
        scroll-snap-align: center !important;
        scroll-snap-stop: always !important;
    }

    /* 3. EXISTING HEADER OVERRIDE */
    .services-header .view-all-btn {
        display: none !important;
    }
}