/* Portfolio Page - Viewport-based cinematic layout */
.portfolio-page {
    padding: 0;
    margin: 0;
    overflow-x: hidden;
    padding-bottom: calc(140px + env(safe-area-inset-bottom));
}

/* Project Section System - Reusable wrapper classes (opt-in only) */
.project-section {
    width: 100%;
    padding: clamp(40px, 6vw, 90px) 0;
}

.project-section__inner {
    width: min(1200px, 92vw);
    margin-left: auto;
    margin-right: auto;
}

.project-section__content {
    width: 100%;
}


.portfolio-section {
    width: 100%;
    height: 100vh;
    min-height: 100vh;
    max-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(30px, 4vw, 60px) clamp(20px, 5vw, 80px);
    box-sizing: border-box;
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 1.2s cubic-bezier(0.4, 0, 0.2, 1), 
                transform 1.2s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    scroll-snap-align: start;
}

.portfolio-page {
    scroll-snap-type: y mandatory;
}

.portfolio-section.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Section A - Asymmetric Hero */
.section-a {
    background: #000;
}

.section-a-content {
    width: 100%;
    max-width: min(1600px, 95vw);
    height: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(25px, 5vw, 80px);
    align-items: center;
}

.section-a-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-right: clamp(20px, 4vw, 60px);
}

.section-a-text h2 {
    font-size: clamp(2rem, 4vw, 3.5rem);
    font-weight: 300;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: rgba(220, 170, 255, 0.9);
    margin-bottom: clamp(20px, 3vw, 40px);
    line-height: 1.2;
    -webkit-text-stroke: 1px rgba(220, 170, 255, 0.5);
    text-stroke: 1px rgba(220, 170, 255, 0.5);
}

.section-a-text p {
    font-size: clamp(0.9rem, 1.2vw, 1.2rem);
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.75);
    max-width: min(500px, 90%);
}

.section-a-video {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    max-height: 80vh;
}

.section-a-video .video-item {
    width: 100%;
    max-width: min(402px, 25.125vw);
    aspect-ratio: 9 / 16;
    max-height: 80vh;
}

/* Section B - Asymmetric Tri-Video */
.section-b {
    background: #000;
}

.section-b-content {
    width: 100%;
    max-width: 100%; /* Respect parent width instead of viewport */
    height: 100%;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Same as Section C - equal sizes */
    gap: clamp(20px, 4vw, 60px); /* Match Section C gap */
    align-items: center;
    justify-items: center;
    justify-content: center; /* Center grid content horizontally */
    /* Ensure proper stacking for 3D transforms */
    transform-style: preserve-3d;
}

/* Desktop centering fix for Section B and C triptych blocks - ensure symmetric spacing */
@media (min-width: 769px) {
    .section-b-content,
    .section-c-content {
        width: 100%;
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
    }
}

/* Desktop: Carousel wrappers are stable containers that participate in grid */
.section-b-carousel-wrapper,
.section-c-carousel-wrapper {
    display: none;
}

/* On desktop, wrappers are stable containers that span full width */
@media (min-width: 769px) {
    .section-b-carousel-wrapper {
        display: block;
        width: 100%;
        height: 100%;
        grid-column: 1 / -1; /* Span all columns of parent grid */
        position: relative;
        /* Ensure proper stacking for 3D transforms */
        transform-style: preserve-3d;
        overflow: visible;
        margin-inline: auto; /* Center the wrapper horizontally */
    }
    
    .section-c-carousel-wrapper {
        display: block;
        width: 100%;
        height: 100%;
        grid-column: 1 / -1; /* Span all columns of parent grid */
        position: relative;
        /* Ensure proper stacking for 3D transforms */
        transform-style: preserve-3d;
        overflow: visible;
        margin-inline: auto; /* Center the wrapper horizontally */
    }
    
    .section-b-carousel {
        display: grid;
        grid-template-columns: repeat(3, 1fr); /* Same as Section C - equal sizes */
        gap: clamp(20px, 4vw, 60px); /* Match Section C gap */
        width: 100%;
        height: 100%;
        align-items: center;
        justify-items: center;
        position: relative;
        overflow: visible;
        margin-inline: auto; /* Center the carousel grid horizontally */
    }
    
    .section-c-carousel {
        display: grid;
        grid-template-columns: repeat(3, 1fr); /* Match parent grid */
        gap: clamp(20px, 4vw, 60px); /* Match parent gap */
        width: 100%;
        height: 100%;
        align-items: center;
        justify-items: center;
        position: relative;
        overflow: visible;
        margin-inline: auto; /* Center the carousel grid horizontally */
    }
    
    .carousel-indicators {
        display: none; /* Hide indicators on desktop */
    }
}

.section-b-video {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    gap: 25px;
}

.section-b-video .video-item {
    width: 100%;
    aspect-ratio: 9 / 16;
    max-height: 75vh;
}

/* Section B now uses equal sizes like Section C */
.section-b-video .video-item {
    width: 100%;
    max-width: min(382px, 24.12vw); /* Same as Section C */
    aspect-ratio: 9 / 16;
    max-height: 75vh; /* Same as Section C */
}

/* Keep size classes for backwards compatibility but make them all equal */
.video-small .video-item,
.video-medium .video-item,
.video-large .video-item {
    max-width: min(382px, 24.12vw); /* All equal now */
    max-height: 75vh;
}

/* Section C - Symmetric Triptych */
.section-c {
    background: #000;
}

.section-c-content {
    width: 100%;
    max-width: 100%; /* Respect parent width instead of viewport */
    height: 100%;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(20px, 4vw, 60px);
    align-items: center;
    justify-items: center;
    justify-content: center; /* Center grid content horizontally */
    /* Ensure proper stacking for 3D transforms */
    transform-style: preserve-3d;
}

.section-c-video {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    gap: 25px;
    width: 100%;
}

.section-c-video .video-item {
    width: 100%;
    max-width: min(382px, 24.12vw);
    aspect-ratio: 9 / 16;
    max-height: 75vh;
}

/* Video Items */
    .portfolio-item {
        position: relative;
        overflow: hidden;
        border-radius: 12px;
        transition: box-shadow 0.6s cubic-bezier(0.4, 0, 0.2, 1),
                    border 0.6s ease,
                    transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
        border: 2px solid transparent;
        background: #000;
        cursor: pointer;
        width: 100%;
        height: 100%;
        pointer-events: auto;
        z-index: 1;
    }

.portfolio-item:hover {
    box-shadow: 
        0 20px 60px rgba(220, 170, 255, 0.3),
        0 0 40px rgba(200, 150, 255, 0.15);
    border-color: rgba(220, 170, 255, 0.25);
    transform: translateY(-5px);
}

.video-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.video-wrapper video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.portfolio-item:hover .video-wrapper video {
    transform: scale(1.03);
}

.video-overlay-hover {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0);
    transition: background 0.4s ease;
    pointer-events: none;
    z-index: 2;
}

.portfolio-item:hover .video-overlay-hover {
    background: rgba(0, 0, 0, 0.05);
}

/* Portfolio Text */
    .portfolio-text {
        text-align: center;
        transition: opacity 0.4s ease;
        position: relative;
        z-index: 1;
    }

.portfolio-text h3 {
    font-size: clamp(0.75rem, 1vw, 1rem);
    font-weight: 300;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(220, 170, 255, 0.7);
    margin: 0;
    -webkit-text-stroke: 0.5px rgba(220, 170, 255, 0.4);
    text-stroke: 0.5px rgba(220, 170, 255, 0.4);
    transition: color 0.4s ease;
}

.portfolio-item:hover ~ .portfolio-text h3,
.section-b-video:hover .portfolio-text h3,
.section-c-video:hover .portfolio-text h3 {
    color: rgba(220, 170, 255, 0.9);
}

/* Responsive Design - Mobile */
@media (max-width: 768px) {
    .portfolio-section {
        height: auto;
        min-height: auto;
        padding: 30px 20px;
        flex-direction: column;
        margin-bottom: 20px;
    }

    /* Section A Mobile */
    .section-a-content {
        grid-template-columns: 1fr;
        gap: 25px;
        height: auto;
    }

    .section-a-text {
        padding-right: 0;
        order: 2;
    }

    .section-a-text h2 {
        font-size: 2rem;
        margin-bottom: 25px;
    }

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

    .section-a-video {
        order: 1;
        max-height: 55vh;
    }

    .section-a-video .video-item {
        width: 280px;
        max-width: 280px;
        aspect-ratio: 9 / 16;
        height: auto;
    }
    
    .section-a-video .portfolio-card {
        width: 280px;
        max-width: 280px;
        aspect-ratio: 9 / 16;
        height: auto;
    }

    /* Section B Mobile - Carousel */
    .section-b-content {
        display: flex;
        flex-direction: column;
        gap: 0;
        height: auto;
        position: relative;
        overflow: visible;
        padding-bottom: 20px;
    }

    /* Mobile: Show carousel wrapper */
    .section-b-carousel-wrapper,
    .section-c-carousel-wrapper {
        display: block;
    }

    /* On mobile, carousel should be flex */
    .section-b-carousel,
    .section-c-carousel {
        display: flex;
    }

    .section-b-carousel-wrapper {
        position: relative;
        width: 100%;
        overflow: hidden;
        touch-action: pan-y pinch-zoom;
        z-index: 1;
        margin-bottom: 10px;
        min-height: 497px; /* Ensure wrapper has minimum height for video visibility */
    }

    .section-b-carousel {
        display: flex;
        transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
        will-change: transform;
        min-height: 497px; /* Ensure carousel has minimum height */
    }

    .section-b-video {
        min-width: 100%;
        width: 100%;
        flex-shrink: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        padding: 0 10px 20px 10px;
        position: relative;
        z-index: 0;
        margin-bottom: 10px;
    }
    
    .section-b-video .portfolio-text {
        position: relative;
        z-index: 2;
        margin-top: 25px;
        margin-bottom: 0;
        order: 2;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    
    .section-b-video .portfolio-text h3 {
        display: inline-block;
        padding: 12px 24px;
        border: 2px solid rgba(220, 170, 255, 0.6);
        border-radius: 8px;
        background: rgba(220, 170, 255, 0.05);
        box-shadow: 
            0 0 15px rgba(220, 170, 255, 0.3),
            inset 0 0 10px rgba(220, 170, 255, 0.1);
        margin: 0;
    }

    .section-b-video .portfolio-card {
        width: 280px;
        max-width: 280px;
        min-height: 497px; /* 280 * 16/9 = ~497px for 9:16 aspect ratio */
        height: auto;
        aspect-ratio: 9 / 16;
        order: 1;
        position: relative;
        z-index: 1;
        margin-bottom: 0;
        margin-top: 0;
        overflow: visible;
    }

    .section-b-video .video-item {
        width: 280px;
        max-width: 280px;
        aspect-ratio: 9 / 16;
        height: auto;
    }

    /* Make all Section B videos same size on mobile - vertical and equal */
    .section-b-video.video-small .video-item,
    .section-b-video.video-medium .video-item,
    .section-b-video.video-large .video-item {
        width: 280px;
        max-width: 280px;
        aspect-ratio: 9 / 16;
        height: auto;
    }
    
    .section-b-video.video-small .portfolio-card,
    .section-b-video.video-medium .portfolio-card,
    .section-b-video.video-large .portfolio-card {
        width: 280px;
        max-width: 280px;
    }

    /* Section C Mobile - Carousel */
    .section-c-content {
        display: flex;
        flex-direction: column;
        gap: 0;
        height: auto;
        position: relative;
        overflow: visible;
        padding-bottom: 20px;
    }

    .section-c-carousel-wrapper {
        position: relative;
        width: 100%;
        overflow: hidden;
        touch-action: pan-y pinch-zoom;
        z-index: 1;
        margin-bottom: 10px;
        min-height: 497px; /* Ensure wrapper has minimum height for video visibility */
    }

    .section-c-carousel {
        display: flex;
        transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
        will-change: transform;
        min-height: 497px; /* Ensure carousel has minimum height */
    }

    .section-c-video {
        min-width: 100%;
        width: 100%;
        flex-shrink: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        padding: 0 10px 20px 10px;
        position: relative;
        z-index: 0;
        margin-bottom: 10px;
        overflow: visible;
    }
    
    /* Ensure video card is above text */
    .section-c-video .portfolio-card {
        order: 1;
        position: relative;
        z-index: 1;
        width: 280px;
        max-width: 280px;
        min-height: 497px; /* 280 * 16/9 = ~497px for 9:16 aspect ratio */
        height: auto;
        aspect-ratio: 9 / 16;
        margin-bottom: 0;
        margin-top: 0;
        overflow: visible;
    }
    
    .section-c-video .portfolio-text {
        position: relative;
        z-index: 1;
        margin-top: 25px;
        margin-bottom: 0;
        order: 2;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        flex-shrink: 0;
        flex-grow: 0;
    }
    
    .section-c-video .portfolio-text h3 {
        display: inline-block;
        padding: 12px 24px;
        border: 2px solid rgba(220, 170, 255, 0.6);
        border-radius: 8px;
        background: rgba(220, 170, 255, 0.05);
        box-shadow: 
            0 0 15px rgba(220, 170, 255, 0.3),
            inset 0 0 10px rgba(220, 170, 255, 0.1);
        margin: 0;
    }

    .section-c-video .video-item {
        width: 280px;
        max-width: 280px;
        aspect-ratio: 9 / 16;
        height: auto;
    }

    /* Carousel Indicators */
    .carousel-indicators {
        display: flex;
        justify-content: center;
        gap: 8px;
        margin-top: 10px;
        margin-bottom: 20px;
        padding: 0 20px;
        position: relative;
        z-index: 10;
        width: 100%;
    }
    
/* Section Divider - Visible on both desktop and mobile */
.section-divider {
    text-align: center;
    padding: clamp(25px, 3vw, 40px) clamp(15px, 2vw, 20px);
    margin: clamp(20px, 2.5vw, 30px) 0;
    position: relative;
    z-index: 5;
    /* Ensure full width and horizontal centering - use !important to override any conflicting rules */
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
}

/* Section Divider - Global styles applied everywhere - MUST override .page-content p and .page-content color */
.section-divider p.section-divider-text,
.section-divider-text,
.portfolio-page .section-divider p.section-divider-text,
.portfolio-page .section-divider-text,
.page-content .section-divider p.section-divider-text,
.page-content .section-divider-text,
.page-content.portfolio-page .section-divider p.section-divider-text,
body .page-content .section-divider p.section-divider-text,
body .page-content.portfolio-page .section-divider p.section-divider-text,
html body .page-content .section-divider p.section-divider-text {
    font-size: clamp(0.9rem, 1.2vw, 1.2rem) !important;
    font-weight: 300 !important;
    letter-spacing: 0.3em !important;
    text-transform: uppercase !important;
    /* Transparent text with purple stroke - global - MUST override inherited color */
    color: transparent !important;
    -webkit-text-stroke: 1px rgba(220, 170, 255, 0.9) !important;
    text-stroke: 1px rgba(220, 170, 255, 0.9) !important;
    text-shadow: 
        0 0 20px rgba(220, 170, 255, 0.8),
        0 0 40px rgba(200, 150, 255, 0.6) !important;
    margin: 0 !important;
    display: inline-block !important;
    padding: 12px 25px !important;
    border: 2px solid #dcaaff !important;
    border-radius: 12px !important;
    background: rgba(220, 170, 255, 0.1) !important;
    box-shadow: 
        0 0 30px rgba(220, 170, 255, 0.5),
        inset 0 0 25px rgba(220, 170, 255, 0.2) !important;
}

/* Additional override - target p elements inside section-divider specifically */
.page-content .section-divider p,
.page-content.portfolio-page .section-divider p {
    color: transparent !important;
    -webkit-text-stroke: 1px rgba(220, 170, 255, 0.9) !important;
    text-stroke: 1px rgba(220, 170, 255, 0.9) !important;
    display: inline-block !important;
    border: 2px solid #dcaaff !important;
}

/* CRITICAL: Override .page-content color inheritance for divider text - highest specificity */
html body .page-content.portfolio-page .section-divider p.section-divider-text {
    color: transparent !important;
    -webkit-text-stroke: 1px rgba(220, 170, 255, 0.9) !important;
    text-stroke: 1px rgba(220, 170, 255, 0.9) !important;
    display: inline-block !important;
    border: 2px solid #dcaaff !important;
    border-radius: 12px !important;
    background: rgba(220, 170, 255, 0.1) !important;
    text-shadow: 
        0 0 20px rgba(220, 170, 255, 0.8),
        0 0 40px rgba(200, 150, 255, 0.6) !important;
    box-shadow: 
        0 0 30px rgba(220, 170, 255, 0.5),
        inset 0 0 25px rgba(220, 170, 255, 0.2) !important;
}

/* Media queries ONLY for spacing/sizing, not color/glow */
@media (min-width: 769px) {
    .section-divider {
        padding: clamp(25px, 2.5vw, 30px) clamp(15px, 2vw, 20px);
        margin: clamp(15px, 2vw, 20px) 0;
        /* Ensure full width and horizontal centering on desktop - use !important to override any conflicting rules */
        display: flex !important;
        justify-content: center !important;
        width: 100% !important;
        align-items: center !important;
    }
    
    /* CRITICAL: Ensure divider text keeps purple styling on desktop - override .page-content p */
    .section-divider p.section-divider-text,
    .page-content.portfolio-page .section-divider p.section-divider-text,
    html body .page-content.portfolio-page .section-divider p.section-divider-text {
        color: transparent !important;
        -webkit-text-stroke: 1px rgba(220, 170, 255, 0.9) !important;
        text-stroke: 1px rgba(220, 170, 255, 0.9) !important;
        display: inline-block !important;
        border: 2px solid #dcaaff !important;
        border-radius: 12px !important;
        background: rgba(220, 170, 255, 0.1) !important;
        text-shadow: 
            0 0 20px rgba(220, 170, 255, 0.8),
            0 0 40px rgba(200, 150, 255, 0.6) !important;
        box-shadow: 
            0 0 30px rgba(220, 170, 255, 0.5),
            inset 0 0 25px rgba(220, 170, 255, 0.2) !important;
    }
}

@media (max-width: 768px) {
    .section-divider {
        padding: clamp(20px, 3vw, 30px) clamp(15px, 2vw, 20px);
        margin: clamp(15px, 2vw, 20px) 0;
    }

    .carousel-indicator {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: rgba(220, 170, 255, 0.3);
        transition: all 0.3s ease;
        cursor: pointer;
    }

    .carousel-indicator.active {
        background: rgba(220, 170, 255, 0.9);
        width: 24px;
        border-radius: 4px;
    }
}

/* Tablet - fluid scaling already handled by clamp() above */
@media (min-width: 769px) and (max-width: 1024px) {
    .portfolio-section {
        padding: clamp(40px, 4vw, 50px) clamp(30px, 4vw, 40px);
    }
}