/**
 * MODERN PORTFOLIO CAROUSEL
 * Contemporary, Minimalist Design
 * VDESIGN INTERIEUR
 */

/* ============================================
   FEATURED PROJECTS SECTION - MODERN HEADER
   ============================================ */

/* Hide the old decorative elements */
section.py-20 .flex.items-center.justify-center.gap-4.mb-6 {
    display: none !important;
}

/* Modern section title - refined size */
section.py-20 h2 {
    font-size: clamp(1.5rem, 3vw, 2.5rem) !important;
    font-weight: 400 !important;
    letter-spacing: 0.1em !important;
    line-height: 1.2 !important;
    text-transform: uppercase !important;
    color: rgba(255, 255, 255, 0.9) !important;
    background: none !important;
    -webkit-text-fill-color: unset !important;
    margin-bottom: 1rem !important;
}

/* Modern subtitle */
section.py-20 .text-muted-foreground {
    font-size: 0.875rem !important;
    font-weight: 300 !important;
    letter-spacing: 0.2em !important;
    text-transform: uppercase !important;
    opacity: 0.6 !important;
    max-width: 400px !important;
}


/* ============================================
   CAROUSEL CONTAINER - MODERN LAYOUT
   ============================================ */

/* Full-width immersive carousel */
section.py-20 .overflow-hidden {
    overflow: visible !important;
}

/* Modern gap between cards */
section.py-20 .flex.gap-6 {
    gap: 2rem !important;
}

@media (min-width: 1024px) {
    section.py-20 .flex.gap-6 {
        gap: 3rem !important;
    }
}


/* ============================================
   CAROUSEL CARDS - CONTEMPORARY STYLE
   ============================================ */

/* Modern card container - curved corners */
.group.relative.overflow-hidden.rounded-lg.bg-card {
    border-radius: 1.5rem !important;
    background: transparent !important;
    overflow: hidden !important;
    height: 70vh !important;
    max-height: 700px !important;
    min-height: 500px !important;
    animation: smoothSlowPopIn 1.5s cubic-bezier(0.22, 1, 0.36, 1) both !important;
}

/* Smooth slow pop-in animation */
@keyframes smoothSlowPopIn {
    0% {
        opacity: 0;
        transform: translateY(60px) scale(0.95);
        filter: blur(8px);
    }

    60% {
        opacity: 0.9;
        filter: blur(2px);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}

/* Stagger animation for each card */
.group.relative.overflow-hidden.rounded-lg.bg-card:nth-child(1) {
    animation-delay: 0.2s !important;
}

.group.relative.overflow-hidden.rounded-lg.bg-card:nth-child(2) {
    animation-delay: 0.4s !important;
}

.group.relative.overflow-hidden.rounded-lg.bg-card:nth-child(3) {
    animation-delay: 0.6s !important;
}

.group.relative.overflow-hidden.rounded-lg.bg-card:nth-child(4) {
    animation-delay: 0.8s !important;
}

.group.relative.overflow-hidden.rounded-lg.bg-card:nth-child(5) {
    animation-delay: 1.0s !important;
}



/* Card inner shadow removed for cleaner look */
.group.relative.overflow-hidden.rounded-lg.bg-card::before,
.group.relative.overflow-hidden.rounded-lg.bg-card::after {
    display: none !important;
}

/* Modern image styling */
.group.relative.overflow-hidden.rounded-lg.bg-card img {
    border-radius: 1.5rem !important;
    object-fit: cover !important;
    transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1),
        filter 0.8s ease !important;
    filter: grayscale(20%) contrast(1.05) !important;
}

/* Image hover - subtle zoom */
.group.relative.overflow-hidden.rounded-lg.bg-card:hover img {
    transform: scale(1.05) !important;
    filter: grayscale(0%) contrast(1.1) !important;
}


/* ============================================
   GRADIENT OVERLAY - MINIMAL
   ============================================ */

.group.relative.overflow-hidden.rounded-lg.bg-card .absolute.inset-0.bg-gradient-to-t {
    background: linear-gradient(to top,
            rgba(0, 0, 0, 0.9) 0%,
            rgba(0, 0, 0, 0.4) 40%,
            transparent 100%) !important;
    opacity: 0.8 !important;
    transition: opacity 0.6s ease !important;
}

.group.relative.overflow-hidden.rounded-lg.bg-card:hover .absolute.inset-0.bg-gradient-to-t {
    opacity: 1 !important;
}


/* ============================================
   CARD CONTENT - MODERN TYPOGRAPHY
   ============================================ */

/* Content container */
.group.relative.overflow-hidden.rounded-lg.bg-card .absolute.bottom-0 {
    padding: 2.5rem !important;
    transform: none !important;
    transition: none !important;
}

@media (min-width: 1024px) {
    .group.relative.overflow-hidden.rounded-lg.bg-card .absolute.bottom-0 {
        padding: 3rem !important;
    }
}

/* Category tag - modern minimal */
.group.relative.overflow-hidden.rounded-lg.bg-card .text-primary.text-xs,
.group.relative.overflow-hidden.rounded-lg.bg-card .text-primary.text-sm {
    font-size: 0.65rem !important;
    font-weight: 500 !important;
    letter-spacing: 0.3em !important;
    text-transform: uppercase !important;
    color: rgba(180, 160, 100, 0.9) !important;
    margin-bottom: 1rem !important;
    display: inline-block !important;
    padding: 0.5rem 0 !important;
    border-bottom: 1px solid rgba(180, 160, 100, 0.3) !important;
}

/* Project title - bold statement */
.group.relative.overflow-hidden.rounded-lg.bg-card h3 {
    font-size: clamp(1.5rem, 3vw, 2.5rem) !important;
    font-weight: 300 !important;
    letter-spacing: -0.02em !important;
    line-height: 1.2 !important;
    color: white !important;
    margin-bottom: 0 !important;
    max-width: 90% !important;
}

/* Hide the hover line indicator (old fashioned) */
.group.relative.overflow-hidden.rounded-lg.bg-card .w-12.h-0\.5.bg-primary {
    display: none !important;
}


/* ============================================
   PROJECT NUMBER/INDEX - MODERN ACCENT
   ============================================ */

/* Add modern numbering */
.group.relative.overflow-hidden.rounded-lg.bg-card .absolute.bottom-0::before {
    content: attr(data-index);
    position: absolute;
    top: 2rem;
    right: 2rem;
    font-size: 6rem;
    font-weight: 100;
    color: rgba(255, 255, 255, 0.03);
    line-height: 1;
    pointer-events: none;
}


/* ============================================
   NAVIGATION CONTROLS - MINIMAL MODERN
   ============================================ */

/* Navigation container */
section.py-20 .flex.items-center.justify-center.gap-4.mt-8,
section.py-20 .flex.items-center.justify-center.gap-4.mt-12 {
    margin-top: 3rem !important;
    gap: 2rem !important;
}

/* Modern nav buttons - rounded */
section.py-20 button.w-12.h-12.rounded-full {
    width: 50px !important;
    height: 50px !important;
    border-radius: 50% !important;
    background: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    backdrop-filter: none !important;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

section.py-20 button.w-12.h-12.rounded-full:hover {
    background: rgba(180, 160, 100, 0.1) !important;
    border-color: rgba(180, 160, 100, 0.5) !important;
    transform: none !important;
}

/* Arrow icons */
section.py-20 button.w-12.h-12.rounded-full svg {
    width: 20px !important;
    height: 20px !important;
    stroke-width: 1 !important;
}


/* ============================================
   PAGINATION DOTS - MODERN LINE STYLE
   ============================================ */

/* Dots container */
section.py-20 .flex.gap-2 {
    gap: 0.5rem !important;
}

/* Individual dots - line style */
section.py-20 button.w-2.h-2.rounded-full {
    width: 24px !important;
    height: 2px !important;
    border-radius: 0 !important;
    background: rgba(255, 255, 255, 0.2) !important;
    border: none !important;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

section.py-20 button.w-2.h-2.rounded-full:hover {
    background: rgba(255, 255, 255, 0.4) !important;
}

/* Active dot */
section.py-20 button.w-2.h-2.rounded-full.bg-primary,
section.py-20 button.rounded-full.bg-primary.w-8 {
    width: 48px !important;
    height: 2px !important;
    border-radius: 0 !important;
    background: rgba(180, 160, 100, 0.9) !important;
    box-shadow: none !important;
}


/* ============================================
   CARD WIDTHS - RESPONSIVE MODERN
   ============================================ */

/* Override for modern proportions */
.flex-\[0_0_100\%\] {
    flex: 0 0 90% !important;
}

@media (min-width: 640px) {
    .sm\:flex-\[0_0_80\%\] {
        flex: 0 0 75% !important;
    }
}

@media (min-width: 768px) {
    .md\:flex-\[0_0_60\%\] {
        flex: 0 0 60% !important;
    }
}

@media (min-width: 1024px) {
    .lg\:flex-\[0_0_45\%\] {
        flex: 0 0 50% !important;
    }
}

@media (min-width: 1280px) {
    .xl\:flex-\[0_0_35\%\] {
        flex: 0 0 45% !important;
    }
}


/* ============================================
   INACTIVE CARDS - MODERN FADE
   ============================================ */

/* Non-active cards */
.group.relative.overflow-hidden.rounded-lg.bg-card.blur-sm {
    filter: none !important;
    opacity: 0.4 !important;
    transform: scale(0.95) !important;
    transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Active card */
.group.relative.overflow-hidden.rounded-lg.bg-card.blur-0 {
    opacity: 1 !important;
    transform: scale(1) !important;
}


/* ============================================
   SECTION BACKGROUND ELEMENTS
   ============================================ */

/* Hide old decorative lines */
section.py-20 .absolute.opacity-5 {
    display: none !important;
}

/* Modern section styling */
section.py-20 {
    padding: 8rem 0 !important;
    position: relative;
}

@media (min-width: 1024px) {
    section.py-20 {
        padding: 10rem 0 !important;
    }
}


/* ============================================
   CURSOR INTERACTION (Optional Enhancement)
   ============================================ */

.group.relative.overflow-hidden.rounded-lg.bg-card {
    cursor: pointer;
}


/* ============================================
   PERFORMANCE & ACCESSIBILITY
   ============================================ */

@media (prefers-reduced-motion: reduce) {

    .group.relative.overflow-hidden.rounded-lg.bg-card img,
    .group.relative.overflow-hidden.rounded-lg.bg-card,
    section.py-20 button {
        transition: none !important;
    }
}

/* High contrast mode */
@media (prefers-contrast: high) {
    .group.relative.overflow-hidden.rounded-lg.bg-card h3 {
        color: white !important;
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8) !important;
    }
}