/**
 * Modern Portfolio Showcase - Frontend Styles
 * 
 * Clean, refactored version with only active styles
 * Uses CSS variables for customization (set via Portfolio_Settings)
 * 
 * Table of Contents:
 * 0. CSS Variables (Defaults)
 * 1. Base Container Styles
 * 2. View Toggle Buttons
 * 3. 3D Carousel - Container & Wrapper
 * 4. 3D Carousel - Slide Base Styles
 * 5. 3D Carousel - Slide Position Classes
 * 6. 3D Carousel - Media & Video
 * 7. 3D Carousel - Navigation & Controls
 * 8. 3D Carousel - Responsive
 * 9. Grid View
 * 10. Project Modal
 * 11. Utility Classes
 */

/* ===========================================
   0. CSS VARIABLES (DEFAULTS)
   These can be overridden via inline styles from settings
   =========================================== */

:root {
    /* Colors */
    --portfolio-primary: #4f46e5;
    --portfolio-primary-hover: #4338ca;
    --portfolio-overlay: rgba(0, 0, 0, 0.6);
    --portfolio-text: #ffffff;
    --portfolio-title-bg: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
    
    /* Dimensions */
    --portfolio-card-width: 680px;
    --portfolio-card-height: 400px;
    --portfolio-border-radius: 16px;
    
    /* 3D Effect */
    --portfolio-perspective: 1200px;
    --portfolio-rotate-angle: 35deg;
    --portfolio-blur-side: 1px;
    --portfolio-blur-far: 2px;
    
    /* Animation */
    --portfolio-transition: 600ms;
    
    /* Grid */
    --portfolio-grid-columns: 3;
    --portfolio-grid-gap: 30px;
}

/* ===========================================
   1. BASE CONTAINER STYLES
   =========================================== */

.modern-portfolio-container {
    display: block;
    min-height: 600px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    width: 100%;
}

.portfolio-main {
    width: 100%;
    padding: 40px 20px 60px;
}

.portfolio-content {
    position: relative;
}

/* ===========================================
   2. VIEW TOGGLE BUTTONS
   =========================================== */

.view-toggle-simple {
    display: flex;
    justify-content: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.95);
    padding: 8px;
    border-radius: 16px;
    backdrop-filter: blur(10px);
    width: fit-content;
    margin: 0 auto 10px;
}

.simple-toggle-btn {
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 12px;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    color: #666;
}

.simple-toggle-btn:hover {
    background: rgba(79, 70, 229, 0.1);
    color: var(--portfolio-primary);
    transform: scale(1.05);
}

.simple-toggle-btn.active {
    background: var(--portfolio-primary);
    color: white;
    box-shadow: 0 2px 10px rgba(79, 70, 229, 0.3);
}

.simple-toggle-btn svg {
    width: 20px;
    height: 20px;
}

/* ===========================================
   3. 3D CAROUSEL - CONTAINER & WRAPPER
   =========================================== */

/* Toggle visibility between views */
.carousel-view {
    display: none;
}

.carousel-view.active {
    display: block;
}

/* 
 * Main 3D container
 * - perspective: Controls 3D depth (lower = more dramatic)
 * - perspective-origin: Vanishing point position
 */
.carousel-3d-container {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 520px;
    perspective: var(--portfolio-perspective);
    perspective-origin: 50% 50%;
    padding: 20px 60px;
    overflow: visible;
}

.carousel-3d-wrapper {
    position: relative;
    width: 100%;
    max-width: 1400px;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    transform-style: preserve-3d;
}

.carousel-3d-slides {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
}

/* ===========================================
   4. 3D CAROUSEL - SLIDE BASE STYLES
   =========================================== */

/*
 * Base slide styles
 * All slides share same dimensions; visual size differs via scale() transform
 * 
 * Transform chain: translate(-50%, -50%) → translateX() → scale() → rotateY()
 */
.carousel-slide {
    position: absolute;
    top: 50%;
    left: 50%;
    width: var(--portfolio-card-width);
    height: var(--portfolio-card-height);
    transform: translate(-50%, -50%) scale(0.5);
    transform-style: preserve-3d;
    transition: all var(--portfolio-transition) cubic-bezier(0.23, 1, 0.32, 1);
    cursor: pointer;
    border-radius: var(--portfolio-border-radius);
    overflow: visible;
    opacity: 0;
    pointer-events: none;
}

/* Slide inner card container */
.carousel-slide .slide-card {
    width: 100%;
    height: 100%;
    border-radius: var(--portfolio-border-radius);
    overflow: hidden;
    position: relative;
    background: #fff;
    transition: box-shadow var(--portfolio-transition) ease, filter var(--portfolio-transition) ease;
}

/* Title bar at bottom of card - always visible */
.carousel-slide .slide-title-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 15px 20px;
    background: var(--portfolio-title-bg);
    color: var(--portfolio-text);
    z-index: 4;
}

.carousel-slide .slide-title-bar h3 {
    font-size: 1.1em;
    margin: 0;
    font-weight: 600;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

/* Hover overlay - covers entire card on hover */
.carousel-slide .slide-hover-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--portfolio-overlay);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 10;
    padding: 20px;
    text-align: left;
    border-radius: var(--portfolio-border-radius);
    pointer-events: none;
}

/* Show hover overlay on all slides when hovered */
.carousel-slide:hover .slide-hover-overlay {
    opacity: 1;
}

/* Hide hover overlay title and description (we have title bar now) */
.carousel-slide .slide-hover-overlay h3,
.carousel-slide .slide-hover-overlay p {
    display: none;
}

.carousel-slide .slide-hover-overlay .slide-hover-btn {
    position: absolute;
    bottom: 15px;
    right: 15px;
    padding: 10px 20px;
    background: var(--portfolio-primary);
    color: var(--portfolio-text);
    border: none;
    border-radius: 8px;
    font-size: 0.85em;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    pointer-events: auto;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.carousel-slide .slide-hover-overlay .slide-hover-btn:hover {
    background: var(--portfolio-primary-hover);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}

/* ===========================================
   5. 3D CAROUSEL - SLIDE POSITION CLASSES
   
   Position classes assigned by JavaScript:
   - .active    → Center (current slide)
   - .prev-1    → One position to the LEFT
   - .prev-2    → Two positions to the LEFT  
   - .next-1    → One position to the RIGHT
   - .next-2    → Two positions to the RIGHT
   - .hidden    → Not visible
   
   Transform values to modify:
   - translateX: Horizontal offset (negative = left, positive = right)
   - scale: Size multiplier (1 = full size)
   - rotateY: 3D rotation (positive = face right, negative = face left)
   =========================================== */

/* FAR LEFT - prev-2 */
.carousel-slide.prev-2 {
    transform: translate(-50%, -50%) translateX(-400px) translateZ(-500px) rotateY(var(--portfolio-rotate-angle));
    z-index: 10;
    opacity: 1;
    pointer-events: auto;
}

.carousel-slide.prev-2 .slide-card {
    filter: blur(var(--portfolio-blur-far));
    box-shadow: 0 0px 35px rgba(0, 0, 0, 0.25);
}

/* LEFT - prev-1 */
.carousel-slide.prev-1 {
    transform: translate(-50%, -50%) translateX(-200px) translateZ(-400px) rotateY(var(--portfolio-rotate-angle));
    z-index: 30;
    opacity: 1;
    pointer-events: auto;
    transition: transform var(--portfolio-transition), opacity var(--portfolio-transition), visibility var(--portfolio-transition);
}

.carousel-slide.prev-1 .slide-card {
    filter: blur(var(--portfolio-blur-side));
    box-shadow: 0 0px 45px rgba(0, 0, 0, 0.3);
}

/* CENTER - Active slide */
.carousel-slide.active {
    transform: translate(-50%, -50%) translateX(0) rotateY(0deg);
    z-index: 100;
    opacity: 1;
    pointer-events: auto;
    transition: transform var(--portfolio-transition), opacity var(--portfolio-transition), visibility var(--portfolio-transition);
}

.carousel-slide.active .slide-card {
    filter: blur(0);
    
}

/* RIGHT - next-1 */
.carousel-slide.next-1 {
    transform: translate(-50%, -50%) translateX(200px) translateZ(-400px) rotateY(calc(var(--portfolio-rotate-angle) * -1));
    z-index: 30;
    opacity: 1;
    pointer-events: auto;
    transition: transform var(--portfolio-transition), opacity var(--portfolio-transition), visibility var(--portfolio-transition);
}

.carousel-slide.next-1 .slide-card {
    filter: blur(var(--portfolio-blur-side));
    box-shadow: 0 0px 45px rgba(0, 0, 0, 0.3);
}

/* FAR RIGHT - next-2 */
.carousel-slide.next-2 {
    transform: translate(-50%, -50%) translateX(400px) translateZ(-500px) rotateY(calc(var(--portfolio-rotate-angle) * -1));
    z-index: 10;
    opacity: 1;
    pointer-events: auto;
    transition: transform var(--portfolio-transition), opacity var(--portfolio-transition), visibility var(--portfolio-transition);
}

.carousel-slide.next-2 .slide-card {
    filter: blur(var(--portfolio-blur-far));
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.25);
}

/* Hidden slides (not in visible range) */
.carousel-slide.hidden {
    transform: translate(-50%, -50%) scale(0.3);
    opacity: 0;
    pointer-events: none;
    z-index: 0;
}

/* ===========================================
   6. 3D CAROUSEL - MEDIA & VIDEO
   =========================================== */

/* Media container */
.slide-media {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: var(--portfolio-border-radius);
}

/* Thumbnail image */
.slide-thumbnail {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.3s ease;
}

/* Play button (for video slides) */
.slide-play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 70px;
    height: 70px;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    transition: all 0.3s ease;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
    z-index: 15;
}

.slide-play-btn svg {
    width: 28px;
    height: 28px;
    margin-left: 4px;
    color: var(--portfolio-primary);
}

.slide-play-btn:hover {
    transform: translate(-50%, -50%) scale(1.1);
    background: #fff;
}

/* Show play button on active slide or when hovered */
.carousel-slide.active .slide-play-btn,
.carousel-slide:hover .slide-play-btn {
    opacity: 1;
}

/* Video container (hidden until playing) */
.slide-video-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    background: #000;
    border-radius: 16px;
    overflow: hidden;
}

.slide-video-container iframe,
.slide-video-container video {
    width: 100%;
    height: 100%;
    border: none;
    object-fit: cover;
}

/* Playing state - hide thumbnail, show video */
.carousel-slide.active.playing .slide-thumbnail,
.carousel-slide.active.playing .slide-play-btn {
    opacity: 0;
    pointer-events: none;
}

.carousel-slide.active.playing .slide-video-container {
    opacity: 1;
    pointer-events: auto;
}

/* ===========================================
   7. 3D CAROUSEL - NAVIGATION & CONTROLS
   =========================================== */

/* Navigation buttons */
.carousel-nav-btn {
    position: absolute;
    z-index: 200;
    background: rgba(50, 50, 50, 0.75);
    color: #fff;
    border: none;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    cursor: pointer;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(5px);
}

.carousel-nav-btn:hover {
    background: rgba(70, 70, 70, 0.9);
    transform: translateY(-50%) scale(1.08);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

.carousel-nav-btn svg {
    width: 22px;
    height: 22px;
    stroke: #fff;
    stroke-width: 2.5;
}

/* 
 * Button positioning formula:
 * Position = 50% - (card_width / 2) - gap
 * Card width = 680px, half = 340px, gap = 70px
 */
.carousel-nav-prev {
    left: calc(50% - 340px - 70px);
}

.carousel-nav-next {
    right: calc(50% - 340px - 70px);
}

/* ===========================================
   8. 3D CAROUSEL - RESPONSIVE
   
   Responsive transforms use same system as main position classes:
   - translateX: Horizontal offset
   - translateZ: Depth (negative = further back)
   - rotateY: 3D rotation angle
   =========================================== */

@media (max-width: 1400px) {
    .carousel-3d-container {
        padding: 20px 30px;
        perspective: 1100px;
    }

    .carousel-slide {
        width: 560px;
        height: 340px;
    }

    .carousel-slide.prev-1 {
        transform: translate(-50%, -50%) translateX(-180px) translateZ(-350px) rotateY(32deg);
    }

    .carousel-slide.next-1 {
        transform: translate(-50%, -50%) translateX(180px) translateZ(-350px) rotateY(-32deg);
    }

    .carousel-slide.prev-2 {
        transform: translate(-50%, -50%) translateX(-350px) translateZ(-450px) rotateY(38deg);
    }

    .carousel-slide.next-2 {
        transform: translate(-50%, -50%) translateX(350px) translateZ(-450px) rotateY(-38deg);
    }

    .carousel-nav-prev {
        left: calc(50% - 280px - 70px);
    }

    .carousel-nav-next {
        right: calc(50% - 280px - 70px);
    }
}

@media (max-width: 1200px) {
    .carousel-3d-container {
        perspective: 1000px;
    }

    .carousel-slide {
        width: 480px;
        height: 300px;
    }

    .carousel-slide.prev-1 {
        transform: translate(-50%, -50%) translateX(-160px) translateZ(-320px) rotateY(30deg);
    }

    .carousel-slide.next-1 {
        transform: translate(-50%, -50%) translateX(160px) translateZ(-320px) rotateY(-30deg);
    }

    /* Hide far slides on smaller screens */
    .carousel-slide.prev-2,
    .carousel-slide.next-2 {
        opacity: 0;
        pointer-events: none;
    }

    .carousel-nav-prev {
        left: calc(50% - 240px - 60px);
    }

    .carousel-nav-next {
        right: calc(50% - 240px - 60px);
    }
}

@media (max-width: 992px) {
    .carousel-3d-container {
        height: 450px;
        perspective: 900px;
    }

    .carousel-slide {
        width: 420px;
        height: 260px;
    }

    .carousel-slide.prev-1 {
        transform: translate(-50%, -50%) translateX(-140px) translateZ(-280px) rotateY(28deg);
        opacity: 0.85;
    }

    .carousel-slide.prev-1 .slide-card {
        filter: blur(1px);
    }

    .carousel-slide.next-1 {
        transform: translate(-50%, -50%) translateX(140px) translateZ(-280px) rotateY(-28deg);
        opacity: 0.85;
    }

    .carousel-slide.next-1 .slide-card {
        filter: blur(1px);
    }

    .carousel-nav-prev {
        left: calc(50% - 210px - 55px);
    }

    .carousel-nav-next {
        right: calc(50% - 210px - 55px);
    }
}

@media (max-width: 768px) {
    .carousel-3d-container {
        height: 380px;
        padding: 15px 10px;
        perspective: 800px;
    }

    .carousel-slide {
        width: 300px;
        height: 200px;
    }

    .carousel-slide.prev-1 {
        transform: translate(-50%, -50%) translateX(-120px) translateZ(-250px) rotateY(25deg);
        opacity: 0.75;
    }

    .carousel-slide.prev-1 .slide-card {
        filter: blur(1px);
    }

    .carousel-slide.next-1 {
        transform: translate(-50%, -50%) translateX(120px) translateZ(-250px) rotateY(-25deg);
        opacity: 0.75;
    }

    .carousel-slide.next-1 .slide-card {
        filter: blur(1px);
    }

    .carousel-slide.prev-2,
    .carousel-slide.next-2 {
        opacity: 0;
        pointer-events: none;
    }

    .carousel-nav-btn {
        width: 40px;
        height: 40px;
    }

    .carousel-nav-btn svg {
        width: 18px;
        height: 18px;
    }

    .carousel-nav-prev {
        left: calc(50% - 150px - 50px);
    }

    .carousel-nav-next {
        right: calc(50% - 150px - 50px);
    }

    .carousel-caption {
        padding: 10px 20px;
    }

    .carousel-caption h3 {
        font-size: 1em;
    }

    .carousel-slide .slide-hover-overlay h3 {
        font-size: 1em;
    }

    .carousel-slide .slide-hover-overlay p {
        display: none;
    }
}

@media (max-width: 480px) {
    .carousel-3d-container {
        height: 320px;
        perspective: 700px;
    }

    .carousel-slide {
        width: 260px;
        height: 170px;
    }

    .carousel-slide.active {
        transform: translate(-50%, -50%) translateX(0) translateZ(0) rotateY(0deg);
    }

    .carousel-slide.prev-1 {
        transform: translate(-50%, -50%) translateX(-100px) translateZ(-200px) rotateY(22deg);
        opacity: 0.6;
    }

    .carousel-slide.next-1 {
        transform: translate(-50%, -50%) translateX(100px) translateZ(-200px) rotateY(-22deg);
        opacity: 0.6;
    }

    /* Hide all except active and immediate neighbors */
    .carousel-slide.prev-2,
    .carousel-slide.next-2 {
        opacity: 0;
        pointer-events: none;
    }

    .carousel-nav-btn {
        width: 36px;
        height: 36px;
    }

    .carousel-nav-btn svg {
        width: 16px;
        height: 16px;
    }

    .carousel-nav-prev {
        left: 10px;
    }

    .carousel-nav-next {
        right: 10px;
    }

    .carousel-dots {
        gap: 8px;
    }

    .carousel-dot {
        width: 8px;
        height: 8px;
    }
}

/* ===========================================
   9. GRID VIEW
   =========================================== */

.grid-view {
    display: none;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: var(--portfolio-grid-gap);
}

.grid-view.active {
    display: grid;
}

.portfolio-grid-item {
    position: relative;
    border-radius: var(--portfolio-border-radius);
    overflow: hidden;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    cursor: pointer;
}

.portfolio-grid-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.grid-item-image {
    position: relative;
    padding-top: 75%;
    background: #f0f0f0;
}

.grid-item-image img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.portfolio-grid-item:hover .grid-item-image img {
    transform: scale(1.05);
}

.grid-item-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.95), rgba(0, 0, 0, 0.7) 70%, rgba(0, 0, 0, 0.3));
    padding: 30px;
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.portfolio-grid-item:hover .grid-item-overlay {
    opacity: 1;
}

.grid-item-overlay h3 {
    margin: 0 0 10px 0;
    font-size: 22px;
    font-weight: 700;
}

.grid-item-overlay p {
    margin: 0 0 15px 0;
    font-size: 14px;
    line-height: 1.5;
    opacity: 0.95;
}

.grid-item-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

/* CTA Buttons */
.portfolio-cta {
    padding: 10px 16px;
    background: var(--portfolio-primary);
    color: var(--portfolio-text);
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    text-align: center;
    transition: all 0.3s ease;
}

.portfolio-cta:hover {
    background: var(--portfolio-primary-hover);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3);
}

.portfolio-cta-secondary {
    background: rgba(79, 70, 229, 0.3);
    border: 2px solid rgba(79, 70, 229, 0.5);
}

.portfolio-cta-secondary:hover {
    background: rgba(79, 70, 229, 0.5);
    border-color: white;
}

/* Grid responsive */
@media (max-width: 968px) {
    .grid-view {
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
        gap: 20px;
    }
}

@media (max-width: 640px) {
    .portfolio-main {
        padding: 20px;
    }

    .grid-view {
        grid-template-columns: 1fr;
    }
}

/* ===========================================
   10. PROJECT MODAL
   =========================================== */

.project-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    backdrop-filter: blur(5px);
    animation: modalFadeIn 0.3s ease-out;
}

@keyframes modalFadeIn {
    from {
        opacity: 0;
        backdrop-filter: blur(0px);
    }
    to {
        opacity: 1;
        backdrop-filter: blur(5px);
    }
}

.project-modal-content {
    background: white;
    border-radius: 20px;
    max-width: 1000px;
    width: 95%;
    max-height: 90vh;
    overflow: hidden;
    position: relative;
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.3);
    animation: modalSlideIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes modalSlideIn {
    from {
        transform: scale(0.8) translateY(40px);
        opacity: 0;
    }
    to {
        transform: scale(1) translateY(0);
        opacity: 1;
    }
}

.modal-close {
    position: absolute;
    top: 20px;
    right: 20px;
    background: rgba(0, 0, 0, 0.6);
    color: white;
    border: none;
    font-size: 24px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

.modal-close:hover {
    background: rgba(0, 0, 0, 0.8);
    transform: scale(1.1);
}

#project-details-container {
    display: flex;
    flex-direction: column;
    max-height: 90vh;
    overflow-y: auto;
}

.project-details-header {
    position: relative;
    flex-shrink: 0;
}

.modal-image {
    width: 100%;
    height: 400px;
    object-fit: cover;
}

.modal-carousel {
    position: relative;
    width: 100%;
    height: 400px;
    overflow: hidden;
    background: #f8f9fa;
}

.carousel-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.carousel-image.active {
    opacity: 1;
    position: relative;
}

.carousel-control {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.95);
    color: #333;
    border: none;
    font-size: 20px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.carousel-control:hover {
    background: white;
    transform: translateY(-50%) scale(1.1);
    box-shadow: 0 6px 30px rgba(0, 0, 0, 0.15);
}

.carousel-control.prev {
    left: 20px;
}

.carousel-control.next {
    right: 20px;
}

.project-details-content {
    padding: 40px;
    flex-grow: 1;
}

.project-details-content h2 {
    font-size: 2.2rem;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0 0 15px 0;
    line-height: 1.2;
}

.project-category {
    font-size: 1rem;
    color: #4f46e5;
    font-weight: 600;
    margin: 0 0 25px 0;
    padding: 8px 16px;
    background: rgba(79, 70, 229, 0.1);
    border-radius: 20px;
    display: inline-block;
}

.project-full-description {
    font-size: 1.1rem;
    line-height: 1.7;
    color: #444;
    margin-bottom: 30px;
}

.project-full-description p {
    margin-bottom: 16px;
}

.project-details-footer {
    border-top: 1px solid #e0e0e0;
    padding-top: 30px;
    display: flex;
    justify-content: center;
}

.project-details-footer .portfolio-cta {
    background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
    padding: 15px 35px;
    border-radius: 12px;
    font-size: 1.1rem;
    box-shadow: 0 4px 20px rgba(79, 70, 229, 0.3);
}

.project-details-footer .portfolio-cta:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 30px rgba(79, 70, 229, 0.4);
}

/* Modal responsive */
@media (max-width: 768px) {
    .project-modal-content {
        width: 95%;
        margin: 20px;
        border-radius: 15px;
    }

    .project-details-content {
        padding: 25px;
    }

    .project-details-content h2 {
        font-size: 1.8rem;
    }

    .modal-image,
    .modal-carousel {
        height: 300px;
    }

    .carousel-control {
        width: 40px;
        height: 40px;
        font-size: 16px;
    }

    .carousel-control.prev {
        left: 15px;
    }

    .carousel-control.next {
        right: 15px;
    }
}

/* ===========================================
   11. UTILITY CLASSES
   =========================================== */

/* Performance optimizations */
.carousel-slide {
    will-change: transform, opacity;
    backface-visibility: hidden;
}

/* Smooth scrolling */
.portfolio-filters::-webkit-scrollbar {
    height: 4px;
}

.portfolio-filters::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 2px;
}

.portfolio-filters::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 2px;
}

.portfolio-filters::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}