/*
 * Websly Project Carousel Styling
 * Premium 3D coverflow carousel with a centered, prominent active slide
 * and adjacent stacked slides.
 */

.websly-project-carousel-section {
    position: relative;
    width: 100%;
}

/* Swiper stage setup */
.websly-project-swiper {
    position: relative;
    width: 100%;
    padding-bottom: 1rem;
    cursor: grab;
}

.websly-project-swiper:active {
    cursor: grabbing;
}

/* Base Swiper slides transition properties */
.websly-project-swiper .swiper-slide {
    width: 80%;
    max-width: 85vw;
    transition: transform 0.65s cubic-bezier(0.25, 1, 0.5, 1), 
                opacity 0.65s ease, 
                filter 0.65s ease;
    will-change: transform, opacity, filter;
    opacity: 0.3;
    filter: blur(4px) grayscale(30%);
    transform: scale(0.8);
    pointer-events: none; /* prevent click actions on background slides */
}

/* Card size mapping using clamp for responsive widths */
.websly-project-swiper .ws-proj-size-xs { width: clamp(180px, 60vw, 220px); }
.websly-project-swiper .ws-proj-size-s1 { width: clamp(220px, 70vw, 290px); }
.websly-project-swiper .ws-proj-size-s2 { width: clamp(240px, 75vw, 360px); }
.websly-project-swiper .ws-proj-size-s3 { width: clamp(260px, 80vw, 430px); }
.websly-project-swiper .ws-proj-size-s4 { width: clamp(280px, 80vw, 500px); }
.websly-project-swiper .ws-proj-size-s5 { width: clamp(280px, 80vw, 570px); }
.websly-project-swiper .ws-proj-size-s6 { width: clamp(280px, 85vw, 640px); }
.websly-project-swiper .ws-proj-size-lg { width: clamp(280px, 85vw, 710px); }
.websly-project-swiper .ws-proj-size-xl { width: clamp(280px, 85vw, 1000px); }

/* Active Slide (Center) Elevation */
.websly-project-swiper .swiper-slide-active {
    opacity: 1 !important;
    filter: blur(0) grayscale(0%) !important;
    transform: scale(1.03) !important;
    z-index: 10;
    pointer-events: auto; /* permit interaction only on active slide */
}

/* Immediately adjacent slides layout */
.websly-project-swiper .swiper-slide-prev,
.websly-project-swiper .swiper-slide-next {
    opacity: 0.65;
    filter: blur(2px) grayscale(15%);
    transform: scale(0.9);
    z-index: 5;
}

/* Slide Card frame */
.websly-project-swiper .project-card {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: var(--theme-surface);
    border: 1px solid rgba(var(--text-base-rgb), 0.08);
    box-shadow: 0 15px 35px -12px rgba(0, 0, 0, 0.25);
    transition: box-shadow 0.4s ease, border-color 0.4s ease;
}

.websly-project-swiper .swiper-slide-active:hover .project-card {
    box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.4);
    border-color: rgba(var(--theme-accent-rgb), 0.2);
}

/* Slide image styling & hover zooming */
.websly-project-swiper .project-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}

.websly-project-swiper .swiper-slide-active:hover .project-card img {
    transform: scale(1.05);
}

/* Slide details text overlay */
.websly-project-swiper .project-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.3) 45%, transparent 80%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 1.5rem;
    color: #ffffff;
    opacity: 0;
    transition: opacity 0.5s ease, transform 0.5s ease;
    transform: translateY(10px);
}

@media (min-width: 768px) {
    .websly-project-swiper .project-overlay {
        padding: 2.5rem;
    }
}

/* Reveal text overlay only on active slide */
.websly-project-swiper .swiper-slide-active .project-overlay {
    opacity: 1;
    transform: translateY(0);
}

.websly-project-swiper .project-overlay h3 {
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
    margin-bottom: 0.25rem;
}

.websly-project-swiper .project-overlay p {
    opacity: 0.8;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
    max-width: 90%;
}

/* Aspect ratio classes mapping (handles both legacy names and slash/dash values) */
.ws-proj-aspect-landscape,
.ws-proj-aspect-3\/2,
.ws-proj-aspect-3-2 {
    aspect-ratio: 3 / 2;
}
.ws-proj-aspect-16\/9,
.ws-proj-aspect-16-9 {
    aspect-ratio: 16 / 9;
}
.ws-proj-aspect-21\/9,
.ws-proj-aspect-21-9 {
    aspect-ratio: 21 / 9;
}
.ws-proj-aspect-4\/3,
.ws-proj-aspect-4-3 {
    aspect-ratio: 4 / 3;
}
.ws-proj-aspect-square,
.ws-proj-aspect-1\/1,
.ws-proj-aspect-1-1 {
    aspect-ratio: 1 / 1;
}
.ws-proj-aspect-portrait,
.ws-proj-aspect-4\/5,
.ws-proj-aspect-4-5 {
    aspect-ratio: 4 / 5;
}
.ws-proj-aspect-vertical,
.ws-proj-aspect-3\/4,
.ws-proj-aspect-3-4 {
    aspect-ratio: 3 / 4;
}
.ws-proj-aspect-narrow,
.ws-proj-aspect-3\/5,
.ws-proj-aspect-3-5 {
    aspect-ratio: 3 / 5;
}

/* Bottom Controls Layout (single aligned row) */
.websly-project-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    margin-top: 2rem;
}

@media (min-width: 768px) {
    .websly-project-controls {
        margin-top: 3rem;
    }
}

/* Swiper navigation arrows */
.websly-project-prev,
.websly-project-next {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 9999px;
    border: 2px solid rgba(var(--text-base-rgb), 0.15);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--theme-text);
    background: transparent;
    cursor: pointer;
    transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease, transform 0.2s ease;
    outline: none;
    z-index: 10;
    padding: 0;
}

.websly-project-prev:hover,
.websly-project-next:hover {
    background: var(--theme-accent);
    border-color: var(--theme-accent);
    color: var(--theme-text-on-accent, #ffffff);
    transform: scale(1.08);
}

.websly-project-prev:active,
.websly-project-next:active {
    transform: scale(0.92);
}

.websly-project-prev:disabled,
.websly-project-next:disabled {
    opacity: 0.25;
    cursor: not-allowed;
    pointer-events: none;
}

.websly-project-prev svg,
.websly-project-next svg {
    width: 1.25rem;
    height: 1.25rem;
    stroke-width: 2.5;
}

/* Pagination Dots Layout & Stretching Micro-animation */
.websly-project-pagination {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.websly-project-pagination .swiper-pagination-bullet {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 9999px;
    background: rgba(var(--text-base-rgb), 0.2);
    opacity: 1;
    margin: 0 !important;
    cursor: pointer;
    transition: width 0.35s cubic-bezier(0.25, 1, 0.5, 1), 
                background-color 0.3s ease, 
                transform 0.2s ease;
}

.websly-project-pagination .swiper-pagination-bullet:hover {
    background: rgba(var(--text-base-rgb), 0.4);
    transform: scale(1.15);
}

.websly-project-pagination .swiper-pagination-bullet-active {
    width: 1.35rem; /* stretched active pill shape */
    background-color: var(--theme-accent) !important;
}

/* CSS adjustments inside Gutenberg editor styles wrapper */
.editor-styles-wrapper .websly-project-swiper {
    cursor: default;
}
.editor-styles-wrapper .websly-project-swiper .swiper-wrapper {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
}
.editor-styles-wrapper .websly-project-swiper .swiper-slide {
    opacity: 0.85;
    filter: none;
    transform: none;
}
.editor-styles-wrapper .websly-project-swiper .swiper-slide-active {
    transform: scale(1.02) !important;
    opacity: 1 !important;
}
.editor-styles-wrapper .websly-project-swiper .project-overlay {
    opacity: 1;
    transform: none;
}