/*******************************
   OUR WORK SECTION
*******************************/
.our-work .section-wrapper {
    padding-bottom: 100px;
    overflow: hidden;
}

@media (min-width: 768px) {
    .our-work .section-wrapper {
        padding-bottom: 120px;
    }
}

@media (min-width: 992px) {
    .our-work .section-wrapper {
        padding-bottom: 180px;
        overflow: visible;
    }
}

/* ── SPLIDE ── */
#worksSlider .splide__track {
    overflow: visible !important;
}

#worksSlider .splide__slide {
	width: 320px !important;
	will-change: width;
}

#worksSlider .splide__slide.is-w-active {
	width: 700px !important;
}

@media (max-width: 991px) {
    #worksSlider .splide__slide {
        width: 300px !important;
    }

    #worksSlider .splide__slide.is-w-active {
        width: 550px !important;
    }
}


#worksSlider .splide__slide--clone.is-w-active {
	width: 260px !important;
}

@media (max-width: 767px) {
    #worksSlider .splide__slide {
		width: 100% !important;
	}

	#worksSlider .splide__slide.is-w-active {
		width: 100% !important;
	}
}

/* ── CARD: fixed height, relative container ── */
.pf-card {
    width: 100%;
    position: relative;
    min-height: 650px;
    border-right: 1px solid var(--light-line);
    border-top: 1px solid var(--light-line);
    border-bottom: 1px solid var(--light-line);
    overflow: hidden;
    transition: box-shadow .4s ease;
}


/* ── IMAGE: absolute, full card (inactive) → top 290px (active) ── */
.pf-img {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* inactive: fills whole card */
    transition: bottom .4s cubic-bezier(.25, 1, .5, 1);
}

#worksSlider .splide__slide:not(.splide__slide--clone).is-upcoming .pf-img {
    bottom: 270px;
}

/* active: shrinks, makes room for body */

.pf-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: saturate(.07) opacity(0.05);
    transition: filter .4s ease;
}

#worksSlider .splide__slide:not(.splide__slide--clone).is-upcoming .pf-img img {
    filter: saturate(1) opacity(1);
}


/* Project name label — only on inactive */
.pf-img-label {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 54px 18px 18px;
    background: linear-gradient(to top, rgba(246, 246, 249, .97) 25%, transparent);
    transition: opacity .38s ease;
}

#worksSlider .splide__slide:not(.splide__slide--clone).is-upcoming .pf-img-label {
    opacity: 0;
    pointer-events: none;
}

.pf-img-label-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── BODY PANEL: slides up from below card ── */
.pf-body {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -270px;
    /* inactive: hidden below card */
    height: 270px;
    background: #fff;
    transition: bottom .4s cubic-bezier(.25, 1, .5, 1);
}

#worksSlider .splide__slide:not(.splide__slide--clone).is-upcoming .pf-body {
    bottom: 0;
}

/* Content inside body fades in with slight delay */
.pf-body-inner {
    padding: 20px 22px 22px;
    display: flex;
    flex-direction: column;
    gap: 11px;
    height: 100%;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity .34s ease .22s, transform .34s ease .22s;
}

#worksSlider .splide__slide:not(.splide__slide--clone).is-upcoming .pf-body-inner {
    opacity: 1;
    transform: translateY(0);
}

.pf-desc {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.pf-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 3px 20px;
}


.pf-meta a {
    color: #7c3aed;
    text-decoration: none;
}

.pf-meta a:hover {
    text-decoration: underline;
}

.our-work .splide__arrow {
    top: auto !important;
    bottom: -50px !important;
    background-color: transparent !important;
    width: auto !important;
}

.our-work .splide__arrow svg {
    width: 48px !important;
    height: 48px !important;
}

.our-work .splide__arrow--next {
    right: 30% !important;
    transform: translateX(-50%) !important;
    left: auto !important;
}

.our-work .splide__arrow--prev {
    left: 40% !important;
    transform: translateX(-50%) !important;
    right: auto !important;
}

@media (min-width: 768px) {   

    .our-work .splide__arrow--next {
        right: 35% !important;
    }

    .our-work .splide__arrow--prev {
        left: 43% !important;
    }
    
}

@media (min-width: 992px) {
    .our-work .splide__arrow {
        bottom: -80px !important;
    }
    
    .our-work .splide__arrow--next {
        right: 40% !important;
    }

    .our-work .splide__arrow--prev {
        left: 45% !important;
    }
    
}

@media (min-width: 1200px) {
    
    .our-work .splide__arrow--next {
        right: 43% !important;
    }

    .our-work .splide__arrow--prev {
        left: 48% !important;
    }
    
}

/* ─────────────────────────────
   MOBILE OVERRIDE (CLEAN MODE)
───────────────────────────── */

@media (max-width: 767px) {

	.pf-card {
		min-height: auto;
		height: auto !important;
        border: 1px solid var(--light-line);
	}

	/* IMAGE becomes normal block */
	.pf-img {
		position: relative !important;
		height: 200px !important;
		bottom: auto !important;
		top: auto !important;
		left: auto !important;
		right: auto !important;
		transition: none !important;
	}

	.pf-img img {
        filter: saturate(1) opacity(1);
		height: 100% !important;
		object-fit: cover;
	}

	/* BODY becomes static */
	.pf-body {
		position: relative !important;
		bottom: 0 !important;
		height: auto !important;
		transition: none !important;
	}

	.pf-body-inner {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}

	.pf-img-label {
        display: none;
	}
}