/* Enhanced Smart Carousel Styles - Netflix-Style Page Navigation */
/* Updated with Fluid Responsive Design for Perfect Zoom Scaling */

/* Import responsive utilities */
@import url('responsive-utilities.css');

/* Fluid container that adapts to any screen size and zoom level */
#projects .container,
#completed-projects-section .container {
    max-width: min(95vw, 1520px); /* Responsive max-width that respects viewport */
    padding-inline: clamp(1rem, 3vw, 3rem); /* Fluid padding that scales */
}

.carousel-enhanced-wrapper {
    position: relative;
    width: 100%;
    padding: clamp(0.75rem, 2vw, 1rem) 60px; /* Fixed horizontal padding for arrows */
    margin: 0 auto;
    container-type: inline-size; /* Enable container queries */
}

/* Track Container - contains the cards */
.carousel-track-container {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    perspective: 2000px; /* Enable 3D transforms */
    perspective-origin: center center;
    /* Let content define height to avoid excess space above/below media */
    min-height: 0;
}

/* Enhanced Track */
.carousel-enhanced-track {
    display: flex;
    will-change: transform;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform-style: preserve-3d; /* Preserve 3D for children */
    transform: translateZ(0);
    transition: none; /* Animation handled by JS */
}

/* Play/Pause Button - Positioned top-left for accessibility */
.carousel-pause-btn {
    position: absolute;
    top: 10px;
    left: 10px;
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, 0.95);
    border: 2px solid rgba(38, 75, 50, 0.3);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 3;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.carousel-pause-btn:hover {
    background: #ffffff;
    border-color: #264b32;
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.carousel-pause-btn:focus-visible {
    outline: 3px solid #264b32;
    outline-offset: 2px;
}

.carousel-pause-btn[aria-pressed="true"] {
    background: #264b32;
    border-color: #264b32;
}

.carousel-pause-btn[aria-pressed="true"] svg {
    color: white;
}

.carousel-pause-btn svg {
    color: #264b32;
}

/* Navigation Arrows - Fixed sizing and proper vertical centering */
.carousel-nav-prev,
.carousel-nav-next {
    position: absolute;
    /* Center vertically relative to the track container height */
    top: calc(50% - 60px); /* Offset to center on card area, not entire wrapper */
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    background: rgba(255, 255, 255, 0.95);
    border: 2px solid rgba(38, 75, 50, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 2;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.carousel-nav-prev {
    left: 0;
}

.carousel-nav-next {
    right: 0;
}

.carousel-nav-prev:hover,
.carousel-nav-next:hover {
    background: #ffffff;
    border-color: #264b32;
    transform: translateY(-50%) scale(1.1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.carousel-nav-prev:focus-visible,
.carousel-nav-next:focus-visible {
    outline: 3px solid #264b32;
    outline-offset: 2px;
}

.carousel-nav-prev svg,
.carousel-nav-next svg {
    color: #264b32;
}

/* Ensure arrow icons are visible on light button background (desktop/tablet) */
.carousel-nav-prev svg polygon,
.carousel-nav-next svg polygon {
    fill: #264b32;
}

/* Removed pause/play button - carousel controlled via hover, video X button, and navigation arrows */

/* Page Indicators - Netflix Style */
.carousel-indicators {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 20px;
    padding: 10px 0;
}

.carousel-indicator {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(38, 75, 50, 0.3);
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 0;
}

.carousel-indicator:hover {
    background: rgba(38, 75, 50, 0.5);
    transform: scale(1.3);
}

.carousel-indicator.active {
    background: #264b32;
    width: 20px;
    border-radius: 4px;
}

.carousel-indicator:focus-visible {
    outline: 2px solid #264b32;
    outline-offset: 3px;
}

/* Status Text */
.carousel-status {
    text-align: center;
    margin-top: 12px;
    font-size: 0.9rem;
    color: rgba(38, 75, 50, 0.7);
}

/* View All Link */
.carousel-view-all {
    text-align: center;
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.carousel-view-all .btn {
    display: inline-block;
    padding: 10px 24px;
    font-size: 0.95rem;
    text-decoration: none;
    border-radius: 6px;
    transition: all 0.3s ease;
}

/* Project Cards - Dynamic width from JS, responsive height */
.project-card-enhanced {
    /* Width and flex-basis set dynamically via inline styles from JavaScript */
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), 
                box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    height: auto; /* Let media + content define the height */
    display: flex;
    flex-direction: column;
    position: relative;
    border: 1px solid rgba(38, 75, 50, 0.1);
    will-change: auto; /* Let browser optimize as needed */
}

/* Top gradient bar that appears on hover */
.project-card-enhanced::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #e0b85a 0%, #8fb4a3 100%);
    transform: scaleX(0);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 10;
}

/* Subtle glow effect */
.project-card-enhanced::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 150px;
    height: 150px;
    background: radial-gradient(circle, rgba(224, 184, 90, 0.05) 0%, transparent 70%);
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
}

.project-card-enhanced:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
    border-color: rgba(224, 184, 90, 0.3);
}

.project-card-enhanced:hover::before {
    transform: scaleX(1);
}

.project-card-enhanced:hover::after {
    opacity: 1;
}

/* Media Section */
.project-card-enhanced .project-media {
    position: relative;
    height: 200px;
    overflow: hidden;
    background: #f5f5f5;
    z-index: 1;
}

/* Mobile overlay for title + CTA inside media area */
.mobile-overlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 0.5rem 0.75rem;
    background: linear-gradient(to top, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.0) 70%);
    display: grid;
    grid-template-rows: auto auto;
    gap: 0.5rem;
    z-index: 2;
}

.mobile-overlay .mobile-title {
    color: #fff;
    margin: 0;
    font-size: 1rem;
    line-height: 1.2;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mobile-overlay .project-actions {
    display: block;
}
.mobile-overlay .project-actions .btn {
    width: 100%;
}

.project-card-enhanced .project-media img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* Desktop/tablet default */
    object-position: center;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.project-card-enhanced .project-media video {
    width: 100%;
    height: 100%;
    object-fit: contain; /* Always show full frame */
    object-position: center;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Keep media fully visible (no crop) even on hover */
.project-card-enhanced:hover .project-media img,
.project-card-enhanced:hover .project-media video {
    transform: none;
}

/* Video Container */
.project-video-container {
    position: relative;
    width: 100%;
    height: 100%;
    cursor: pointer;
    overflow: hidden;
}

/* Blur background layer (hidden by default) */
.media-blur-bg {
    display: none;
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    filter: blur(16px) saturate(1.1) brightness(0.7);
    transform: scale(1.1);
    z-index: 0;
}

.project-video-container .video-thumbnail,
.project-video-container .video-element {
    position: relative;
    z-index: 1;
}

.video-thumbnail {
    width: 100%;
    height: 100%;
    object-fit: contain; /* Desktop/tablet default */
    object-position: center;
}

.video-element {
    width: 100%;
    height: 100%;
    object-fit: contain; /* Always show full frame */
    object-position: center;
}

/* Hide native fullscreen button on HTML5 videos */
/* Chrome/Edge/Safari */
.video-element::-webkit-media-controls-fullscreen-button,
.video-modal-wrapper video::-webkit-media-controls-fullscreen-button {
    display: none !important;
}

/* Firefox (may not work, but included for completeness) */
.video-element::-moz-media-controls-fullscreen-button,
.video-modal-wrapper video::-moz-media-controls-fullscreen-button {
    display: none !important;
}

/* Video Overlay */
.video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
    pointer-events: auto;
    z-index: 5;
}

.project-video-container:hover .video-overlay {
    background: rgba(0, 0, 0, 0.4);
}

.project-video-container.previewing .video-overlay,
.project-video-container.playing .video-overlay {
    opacity: 0;
    visibility: hidden;
}

/* Play Button */
.play-button {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.95);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: auto;
    z-index: 10;
    position: relative;
}

.play-button:hover {
    transform: scale(1.15);
    background: white;
}

.play-button svg {
    width: 24px;
    height: 24px;
    margin-left: 3px;
}
/* Ensure play icon is visible on default white button */
.play-button svg polygon,
.play-button svg path {
    fill: #264b32;
}

/* Video Preview Container */
.video-preview-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
}

.video-preview-container iframe {
    pointer-events: auto;
}

/* Video Player Wrapper */
.video-player-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
}

.video-player-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Video Close Button */
.video-close-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 36px;
    height: 36px;
    background: rgba(0, 0, 0, 0.7);
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 100;
    transition: all 0.3s ease;
}

.video-close-btn:hover {
    background: rgba(0, 0, 0, 0.9);
    transform: scale(1.1);
}

.video-close-btn svg {
    color: white;
}

/* Content Section */
.project-card-enhanced .project-content {
    padding: 1.5rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 2;
}

.project-card-enhanced h3 {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
    color: var(--text-primary, #333);
    line-height: 1.3;
}

/* Ensure titles in carousel cards are not forced to a single line */
.project-card-enhanced .project-content h3 {
    white-space: normal;            /* allow wrapping */
    overflow: hidden;               /* prevent spillover */
    text-overflow: clip;            /* no single-line ellipsis */
    display: -webkit-box;           /* enable multi-line clamp */
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;          /* up to 2 lines for readability */
}

.project-card-enhanced p {
    color: var(--text-secondary, #666);
    line-height: 1.6;
    margin-bottom: 1.5rem;
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 3;          /* make space for 2-line titles */
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Action Buttons */
.project-card-enhanced .project-actions {
    display: flex;
    gap: 0.75rem;
    margin-top: auto;
}

.project-card-enhanced .btn {
    flex: 1;
    padding: 0.625rem 1rem;
    font-size: 0.875rem;
    border-radius: 6px;
    text-align: center;
    text-decoration: none;
    transition: all 0.3s ease;
    font-weight: 600;
    cursor: pointer;
    border: none;
}

/* Placeholder Styling */
.project-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

.project-placeholder svg {
    width: 48px;
    height: 48px;
    fill: currentColor;
}

/* Accessibility - Screen Reader Only */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Hide mobile-only scroll indicator by default (desktop/tablet) */
.mobile-scroll-indicator { display: none; }

/* Fluid Responsive Breakpoints - Works with any zoom level */
@container (max-width: 90rem) {
    /* Adjust for medium-large screens */
    .carousel-enhanced-wrapper {
        --carousel-cards-visible: 3;
    }
}

@container (max-width: 70rem) {
    /* Adjust for medium screens */
    .carousel-enhanced-wrapper {
        --carousel-cards-visible: 2;
    }
}

@container (max-width: 50rem) {
    /* Adjust for small screens */
    .carousel-enhanced-wrapper {
        --carousel-cards-visible: 1;
    }
    
    .carousel-nav-prev,
    .carousel-nav-next {
        width: 36px;
        height: 36px;
        background: rgba(255, 255, 255, 0.9);
    }
    
    .carousel-nav-prev {
        left: 10px;
        z-index: 4;
    }
    
    .carousel-nav-next {
        right: 10px;
        z-index: 4;
    }
    
    .carousel-indicators {
        margin-top: 15px;
    }
    
    .carousel-status {
        font-size: 0.85rem;
    }
    
    .project-card-enhanced {
        height: auto; /* let content define height on small containers */
    }
    
    .project-card-enhanced .project-media {
        height: auto;
        aspect-ratio: 16 / 9; /* consistent media frame on narrow containers */
    }
}

@media (max-width: 479px) {
    /* Hide skip-link gold bar on mobile */
    .skip-link {
        position: absolute !important;
        left: -9999px !important;
        top: -9999px !important;
        width: 1px !important;
        height: 1px !important;
        overflow: hidden !important;
    }
    
    /* Hide pill indicators on mobile - pointless for single card view */
    .carousel-indicators {
        display: none !important;
    }
    
    /* Fix carousel wrapper for mobile - single card view */
    .carousel-enhanced-wrapper {
        padding: 0 40px; /* Space for smaller arrows */
        margin: 0 auto;
        max-width: 100%;
        position: relative;
    }
    
    .carousel-track-container {
        margin: 0;
        padding: 0;
        overflow-x: auto; /* native momentum */
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory; /* native, smooth snapping; JS will not interfere */
        width: 100%;
    }
    
    .carousel-enhanced-track {
        padding: 10px 0;
        /* Remove centering - let natural flow work */
        justify-content: flex-start;
        /* Ensure single card width */
        display: flex;
        gap: 20px;
        /* Allow both vertical page scroll and horizontal card slide */
        touch-action: pan-x pan-y;
    }
    
    /* Hide navigation arrows entirely on mobile */
    .carousel-nav-prev,
    .carousel-nav-next { display: none !important; }
    
    .carousel-nav-prev:active,
    .carousel-nav-next:active {
        background: rgba(0, 0, 0, 0.9);
        transform: translateY(-50%) scale(0.9);
    }
    
    .carousel-nav-prev {
        left: 5px; /* Close to edge */
    }
    
    .carousel-nav-next {
        right: 5px; /* Close to edge */
    }
    
    /* FIX: Ensure SVG icons are visible on mobile */
    .carousel-nav-prev svg,
    .carousel-nav-next svg {
        width: 16px;
        height: 16px;
        display: block;
    }
    
    .carousel-nav-prev svg polygon,
    .carousel-nav-next svg polygon {
        fill: white !important;
    }
    
    /* Better card sizing for mobile - TRUE single card view */
    .project-card-enhanced {
        height: auto;
        min-height: 0;
        max-height: none;
        overflow: visible; /* prevent CTA clipping */
        /* Fill the track container width precisely */
        width: 100% !important;
        max-width: none !important;
        margin: 0 auto;
        flex: 0 0 100% !important; /* One card per view */
        flex-shrink: 0;
        scroll-snap-align: start;
        scroll-snap-stop: always; /* commit to the next snap point cleanly */
    }

    /* Keep copy concise so both buttons fit comfortably */
    .project-card-enhanced p {
        margin-bottom: 1rem;
        -webkit-line-clamp: 3;
    }

    /* Slightly tighter gap between the two CTAs on small screens */
    .project-card-enhanced .project-actions {
        gap: 0.5rem;
    }
    .project-card-enhanced .project-actions .btn {
        width: 100%;
        display: block;
    }
    
    /* Media follows 16:9 frame; no fixed height */
    .project-card-enhanced .project-media {
        height: auto;
        position: relative;
        overflow: hidden;
    }
    
    /* Fix video container for mobile */
    .project-card-enhanced .project-video-container {
        height: 100%;
        width: 100%;
        position: relative;
        background: #f0f0f0; /* Light grey background as fallback */
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .project-card-enhanced .video-element,
    .project-card-enhanced .video-thumbnail {
        width: 100%;
        height: 100%;
        object-fit: contain; /* no crop */
        position: absolute;
        top: 0;
        left: 0;
    }
    
    /* Ensure video element loads properly on mobile */
    .project-card-enhanced video {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: contain !important; /* no crop */
    }
    
    /* Ensure play button is visible on mobile */
    .project-card-enhanced .video-overlay {
        background: rgba(0, 0, 0, 0.3);
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* Tap press animation for mobile */
    .project-card-enhanced.is-pressing {
        transform: translateY(-2px) scale(0.98);
        box-shadow: 0 8px 24px rgba(0,0,0,0.12);
        transition: transform 0.15s ease, box-shadow 0.15s ease;
    }
    
    .project-card-enhanced .play-button {
        width: 45px;
        height: 45px;
        background: rgba(0, 0, 0, 0.8);
        border: 2px solid white;
        border-radius: 50%;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    .project-card-enhanced .play-button svg {
        width: 20px;
        height: 20px;
        display: block;
        margin-left: 2px; /* Center play icon visually */
    }
    
    .project-card-enhanced .play-button svg path,
    .project-card-enhanced .play-button svg polygon {
        fill: white !important;
    }
    
    /* Scale content for mobile */
    .project-card-enhanced .project-content {
        /* Keep normal padding; manage arrow clearance on the CTA row only */
        padding: 1rem;
    }

    /* Ensure the CTA row participates in normal flow on mobile */
    .project-card-enhanced .project-actions {
        position: static !important; /* override generic absolute rule */
        left: auto; right: auto; bottom: auto;
        width: 100%;
        margin-top: auto; /* keep CTAs pinned to bottom of content */
        padding: 0;                 /* rely on .project-content padding for inset */
        display: grid;              /* equal columns */
        grid-template-columns: 1fr 1fr;
        gap: 0.5rem;               /* 8px separation so boxes don’t touch */
        align-items: stretch;
    }

    /* Remove edge hacks: let content padding define clean, symmetric inset */
    .project-card-enhanced .project-actions:not(.single-cta) {
        margin-left: 0;
        margin-right: 0;
        padding-left: 0;
        padding-right: 0;
        gap: 0.5rem;
    }

    /* Completed projects (single CTA): use full width */
    .project-card-enhanced .project-actions.single-cta {
        display: block;
        grid-template-columns: none;
        padding: 0 1rem;
    }
    .project-card-enhanced .project-actions.single-cta .btn {
        width: 100%;
        white-space: nowrap;
        font-size: clamp(0.95rem, 3vw, 1.05rem);
        line-height: 1.25;
    }

    .project-card-enhanced .project-actions .btn {
        padding: 0.75rem 0.9rem;      /* slightly larger tap area */
        min-width: 0 !important;      /* override global 120px */
        width: 100%;                   /* fill grid cell */
        white-space: normal;           /* allow up to 2 lines if needed */
        font-size: clamp(0.95rem, 3.2vw, 1.05rem);
        line-height: 1.25;
        box-sizing: border-box;
    }
    
    /* Ensure proper text sizing with ellipsis */
    .project-card-enhanced h3 {
        font-size: 1rem;
        line-height: 1.2;
        margin-bottom: 0.5rem;
        /* Add text truncation */
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    .project-card-enhanced .project-description {
        font-size: 0.85rem;
        line-height: 1.4;
        /* Add text truncation for description too */
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    /* Hide pause button on mobile - not needed */
    .carousel-pause-btn {
        display: none !important;
    }
    
    /* Play button for videos in cards */
    .play-button {
        background: rgba(0, 0, 0, 0.7) !important;
        border: 2px solid white !important;
    }
    
    .play-button svg {
        fill: white !important;
        color: white !important;
    }

    /* Edge fade removed: no gradients at edges */

    /* Mobile progress indicator under cards */
    .mobile-scroll-indicator { 
        display: flex; 
        align-items: center; 
        gap: 8px; 
        padding: 6px 0 0; 
    }
    .mobile-scroll-indicator .bar {
        position: relative; 
        flex: 1; 
        height: 4px; 
        background: rgba(0,0,0,0.08); 
        border-radius: 999px; 
        overflow: hidden;
    }
    .mobile-scroll-indicator .bar .fill {
        position: absolute; 
        top: 0; left: 0; bottom: 0; 
        width: 0%; 
        background: linear-gradient(90deg, var(--primary-color, #264b32), #e0b85a);
        transition: width 0.2s ease;
    }
    .mobile-scroll-indicator .count { 
        font-size: 12px; 
        color: #666; 
        min-width: 48px; 
        text-align: right; 
    }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
    .carousel-enhanced-track {
        animation: none !important;
        transition: none !important;
    }
    
    .project-card-enhanced,
    .project-card-enhanced:hover {
        transform: none !important;
        transition: opacity 0.3s ease !important;
    }
    
    .carousel-indicator,
    .carousel-nav-prev,
    .carousel-nav-next,
    .carousel-pause-btn {
        transition: opacity 0.3s ease !important;
    }

    /* Ensure all child elements allow horizontal panning, not blocking scroll */
    .project-card-enhanced, .project-card-enhanced * {
        touch-action: pan-x;
    }

    /* While dragging, disable pointer events on interactive elements to prevent capture */
    .carousel-enhanced-wrapper.is-dragging a,
    .carousel-enhanced-wrapper.is-dragging button {
        pointer-events: none !important;
    }
}

/* Restore desktop card height to preserve layout spacing */
@media (min-width: 769px) {
    .project-card-enhanced {
        height: clamp(400px, 28vw, 450px);
    }
}

/* Loading State */
.carousel-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    color: #666;
}

/* Error State */
.error-message,
.no-projects {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--text-secondary, #666);
    font-size: 1.125rem;
}

/* Focus styles for keyboard navigation */
*:focus-visible {
    outline: 2px solid #264b32;
    outline-offset: 2px;
}

/* Ensure controls are always visible on touch devices */
@media (hover: none) {
    .carousel-nav-prev,
    .carousel-nav-next,
    .carousel-pause-btn {
        opacity: 1 !important;
    }
}

/* ========================================
   Video Modal Lightbox - 2025 Best Practices
   ========================================*/
   
/* Modal Overlay */
.video-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.95); /* Darker, no blur for performance */
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease; /* Simpler transition */
    /* Removed backdrop-filter for performance */
}

.video-modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* Modal Container */
.video-modal-container {
    position: relative;
    width: 90%;
    max-width: 1200px;
    max-height: 80vh;
    background: #000;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6); /* Lighter shadow for performance */
    transform: scale(0.98) translateZ(0); /* Start very close to final size, force GPU */
    opacity: 0;
    transition: transform 0.2s ease, opacity 0.2s ease; /* Even faster transitions */
    transform-origin: center center;
    cursor: default;
    backface-visibility: hidden; /* Prevent flicker */
    -webkit-backface-visibility: hidden;
}

.video-modal-overlay.active .video-modal-container {
    transform: scale(1) translateZ(0); /* Keep on GPU layer */
    opacity: 1;
}

/* Video Wrapper for Aspect Ratio */
.video-modal-wrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
    height: 0;
    overflow: hidden;
}

.video-modal-wrapper iframe,
.video-modal-wrapper video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
    transform: translateZ(0); /* Force GPU acceleration */
    backface-visibility: hidden;
}

/* Close Button for Modal */
.video-modal-close {
    position: absolute;
    top: -50px;
    right: 0;
    width: 44px;
    height: 44px;
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 10;
}

.video-modal-close:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.4);
    transform: scale(1.1);
}

.video-modal-close svg {
    color: white;
    width: 24px;
    height: 24px;
}

/* Theater Mode Button - Glassmorphic Design 2025 */
.video-control-bar {
    position: absolute;
    top: 8px;
    right: 8px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px) scale(0.95);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    z-index: 50;
    pointer-events: none;
}

.project-video-container.playing .video-control-bar {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

/* Auto-hide with smooth fade */
.project-video-container.playing.controls-hidden .video-control-bar {
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px) scale(0.95);
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    transition-delay: 0.3s;
}

/* Show on hover */
.project-video-container.playing:hover .video-control-bar {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    pointer-events: auto;
    transition-delay: 0s;
}

/* Glassmorphic Container */
.video-controls-group {
    display: flex;
    align-items: center;
    background: linear-gradient(135deg, 
                rgba(255, 255, 255, 0.12) 0%,
                rgba(255, 255, 255, 0.06) 100%);
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    border-radius: 16px;
    padding: 6px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12),
                0 2px 8px rgba(0, 0, 0, 0.08),
                inset 0 1px 0 rgba(255, 255, 255, 0.2);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.video-controls-group:hover {
    background: linear-gradient(135deg, 
                rgba(255, 255, 255, 0.18) 0%,
                rgba(255, 255, 255, 0.08) 100%);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15),
                0 4px 12px rgba(0, 0, 0, 0.1),
                inset 0 1px 0 rgba(255, 255, 255, 0.25);
    transform: translateY(-1px);
}

/* Theater Mode Button - Modern Interactive Design */
.video-expand-btn {
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, 0.08);
    border: none;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    color: rgba(255, 255, 255, 0.95);
    overflow: hidden;
}

/* Shimmer effect on hover */
.video-expand-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg,
                transparent,
                rgba(255, 255, 255, 0.2),
                transparent);
    transition: left 0.5s ease;
}

.video-expand-btn:hover::before {
    left: 100%;
}

.video-expand-btn:hover {
    background: rgba(255, 255, 255, 0.16);
    color: white;
    transform: scale(1.05);
}

.video-expand-btn:active {
    transform: scale(0.98);
    background: rgba(255, 255, 255, 0.22);
}

/* Modern Theater Mode Icon */
.video-expand-btn svg {
    width: 20px;
    height: 20px;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2));
}

.video-expand-btn:hover svg {
    transform: scale(1.08);
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

/* Glassmorphic Tooltip */
.video-expand-btn::after {
    content: 'Theater mode';
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    background: linear-gradient(135deg,
                rgba(20, 20, 20, 0.95) 0%,
                rgba(30, 30, 30, 0.9) 100%);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: rgba(255, 255, 255, 0.95);
    padding: 8px 14px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.3px;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transform: translateY(-4px) scale(0.95);
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2),
                0 2px 4px rgba(0, 0, 0, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.video-expand-btn:hover::after {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .video-modal-overlay {
        padding: 1rem;
    }
    /* (Reverted) Keep default contain behavior; no Ken Burns on mobile */

    .video-modal-container {
        width: 95%;
        max-height: 70vh;
    }
    /* Ensure media within carousel doesn't trap vertical scroll on Safari */
    .project-card-enhanced .project-media,
    .project-video-container,
    .project-video-container .video-element,
    .project-video-container .video-thumbnail { touch-action: manipulation; }
    
    .video-modal-close {
        top: 10px;
        right: 10px;
        background: rgba(0, 0, 0, 0.8);
    }
}

/* Accessibility - Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    .video-modal-overlay,
    .video-modal-container {
        transition: none !important;
    }
    
    .video-modal-container {
        transform: scale(1) translateZ(0) !important;
    }
}

/* ======================
   Mobile Portrait Layout
   ======================*/
@media (max-width: 768px) {
    /* Fixed mobile media aspect for stability; far shorter (2:5) */
    .project-card-enhanced { height: auto; }
    .carousel-track-container { min-height: 0; }
    .project-card-enhanced .project-media { height: auto; aspect-ratio: 8 / 9; background: transparent; }
    /* Remove edge blur on mobile (no top/bottom blur) */
    .media-blur-bg { display: none !important; }
    /* Hide descriptions on mobile */
    .project-card-enhanced .project-description { display: none; }

    /* Mobile title above media */
    .project-card-enhanced.mobile-title-layout .mobile-title-above {
        text-align: center;
        margin: 0 0 0.4rem 0;
        padding: 0 0.75rem;
        font-size: clamp(1.0rem, 3.8vw, 1.15rem);
        line-height: 1.25;
        color: var(--text-primary, #333);
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        /* Fix title block height so all cards align */
        height: calc(2 * 1.25em);
    }

    /* Move border to wrap media only on mobile and remove card chrome outside media */
    .project-card-enhanced.mobile-title-layout {
        border: none; /* prevent border from extending below media */
        background: transparent;
        box-shadow: none;
    }
    .project-card-enhanced.mobile-title-layout::before,
    .project-card-enhanced.mobile-title-layout::after {
        /* keep subtle effects minimal on mobile layout */
        display: none;
    }
    .project-card-enhanced.mobile-title-layout .mobile-media-framed {
        border: 1px solid rgba(38, 75, 50, 0.12);
        border-radius: 12px;
        overflow: hidden;
        box-shadow: 0 4px 20px rgba(0,0,0,0.06);
        background: #f5f5f5;
        height: auto;
        aspect-ratio: 8 / 9; /* lock media frame to taller 8:9 on mobile */
    }

    /* CTA below media for ongoing projects */
    .project-card-enhanced.mobile-title-layout .mobile-actions-below {
        margin-top: 0.4rem;
        padding: 0 0.25rem;
        min-height: 52px; /* reserve space even if no CTA */
        display: flex;
        align-items: stretch;
    }
    .project-card-enhanced.mobile-title-layout .mobile-actions-below .project-actions.single-cta {
        padding: 0; /* remove extra horizontal padding so it aligns to card edges */
    }
    .project-card-enhanced.mobile-title-layout .mobile-actions-below .actions-spacer {
        width: 100%;
        height: 100%;
        display: block;
    }
}

/* ========================================
   Video Action Indicators - Visual Feedback
   ========================================*/

.video-action-indicator,
.video-seek-indicator,
.video-volume-indicator,
.video-mute-indicator,
.video-speed-indicator {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.8);
    opacity: 0;
    pointer-events: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1000;
}

.video-action-indicator {
    width: 80px;
    height: 80px;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(10px);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.video-action-indicator svg {
    width: 40px;
    height: 40px;
    color: white;
}

.video-seek-indicator,
.video-speed-indicator {
    padding: 12px 24px;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(10px);
    border-radius: 8px;
    color: white;
    font-size: 18px;
    font-weight: 600;
    font-family: 'Poppins', sans-serif;
}

/* (Reverted) No pillar background on mobile */

.video-volume-indicator,
.video-mute-indicator {
    padding: 16px;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(10px);
    border-radius: 12px;
    color: white;
    display: flex;
    align-items: center;
    gap: 12px;
}

.video-volume-indicator svg,
.video-mute-indicator svg {
    width: 32px;
    height: 32px;
}

.video-volume-indicator span {
    font-size: 18px;
    font-weight: 600;
    min-width: 45px;
    text-align: center;
}

/* Show state for indicators */
.video-action-indicator.visible,
.video-seek-indicator.visible,
.video-volume-indicator.visible,
.video-mute-indicator.visible,
.video-speed-indicator.visible {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}
    /* When vertical intent is detected, temporarily disable snap to let page scroll */
    .carousel-enhanced-wrapper.snap-disable-y .carousel-track-container {
        scroll-snap-type: none !important;
    }