/* ============================================================
   PAST DEVELOPMENTS SLIDER — FINAL CLEAN VERSION
============================================================ */

.past-developments-slider {
    width: 100%;
    background: #FFFFFF;
    padding-bottom: 120px;
    position: relative;
}

/* ============================================================
   FULL-WIDTH PURPLE BANNER
============================================================ */

.past-developments-slider__banner {
    width: 100vw;
    margin-left: 50%;
    transform: translateX(-50%);
    background: var(--color-purple);
    padding: 100px 0 160px;
    text-align: center;
}

.past-developments-slider__title {
    font-family: var(--font-heading);
    font-size: var(--font-h3);
    color: #FFF;
    font-weight: 700;
}

.past-developments-slider__description {
    max-width: var(--container-max-width);
    margin: 0 auto;
    color: #FFF;
    font-size: var(--font-body);
}

/* ============================================================
   DESKTOP GRID (NO SWIPER)
============================================================ */

.past-developments-slider__grid {
    width: 100%;
    max-width: 1160px;
    margin: -120px auto 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 60px;
    position: relative;
}

/* ============================================================
   CARD
============================================================ */

.past-card {
    background: #FFF;
    box-shadow: 0px 3px 6px #00000029;
    display: flex;
    flex-direction: column;
}

.past-card__image {
    height: 350px;
    overflow: hidden;
}

.past-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.past-card__content {
    padding: 40px;
}

/* STATUS LABEL */
.past-card__status {
    font-family: var(--font-heading);
    font-size: var(--font-small);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--color-gold);
    margin-bottom: var(--space-xs);
    display: block;
}

/* ============================================================
   DESKTOP ARROWS — FLUSH WITH GRID WIDTH
============================================================ */

@media (min-width: 1025px) {
    .past-developments-slider__arrows {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 100%;
        max-width: 1160px;
        display: flex;
        justify-content: space-between;
        pointer-events: none;
        z-index: 50;
    }

    .past-developments-slider__arrow {
        pointer-events: auto;
        background: none;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .past-developments-slider__arrow svg {
        width: 28px;
        height: 28px;
        stroke: var(--color-gold);
        stroke-width: 3;
        transition: 0.2s ease;
    }

    .past-developments-slider__arrow:hover svg {
        stroke: var(--color-purple);
    }
}



@media (max-width: 1024px) {

    /* Remove grid behaviour */
    .past-developments-slider__grid {
        display: block !important;
        overflow: hidden !important;
        padding: 0 !important;
        max-width: 100% !important; /* prevents 1160px width interfering */
    }

    /* Swiper wrapper */
    .past-developments-slider__grid .swiper-wrapper {
        display: flex !important;
        width: 100% !important;
    }

    /* FORCE each card to be exactly one screen wide */
    .past-card.swiper-slide {
        width: 100vw !important;
        max-width: 100vw !important;
        flex-shrink: 0 !important;
    }

    .past-card {
        margin: 0 !important;
    }

    /* No arrows */
    .past-developments-slider__arrows {
        display: none !important;
    }
}

/* ============================================================
   DESKTOP — PUSH ARROWS FURTHER OUTSIDE THE CARD GRID
============================================================ */
@media (min-width: 1025px) {

    .past-developments-slider__arrows {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 100%;
        max-width: 1400px; /* wider than grid for spacing */
        display: flex;
        justify-content: space-between;
        pointer-events: none;
        z-index: 50;
    }

    .past-developments-slider__arrow.prev {
        transform: translateX(-40px); /* move left arrow further out */
    }

    .past-developments-slider__arrow.next {
        transform: translateX(40px); /* move right arrow further out */
    }
}

/* ============================================================
   TABLET + MOBILE — ADD SAFE SIDE PADDING TO DESCRIPTION
============================================================ */
@media (max-width: 1024px) {
    .past-developments-slider__description {
        padding-left: 30px;
        padding-right: 30px;
    }
}

@media (max-width: 768px) {
    .past-developments-slider__description {
        padding-left: 20px;
        padding-right: 20px;
    }
}

/* ============================================================
   RESTORE CARD SHADOW ON TABLET + MOBILE (Swiper Mode)
============================================================ */
@media (max-width: 1024px) {

    /* Ensure the slide itself carries the shadow properly */
    .past-card.swiper-slide {
        background: #FFF;
        border: 1px solid rgba(0,0,0,0.08);
        box-shadow: 0px 3px 6px rgba(0,0,0,0.18);
        overflow: visible !important; /* ensure shadow is NOT clipped */
        border-radius: 0; /* match desktop */
    }

    /* Ensure swiper wrapper does NOT clip shadows */
    .past-developments-slider__grid .swiper-wrapper {
        overflow: visible !important;
    }

    /* Ensure the swiper container itself doesn't clip */
    .past-developments-slider__grid {
        overflow: visible !important;
    }
}

/* ============================================================
   MOBILE + TABLET — REDUCE CARD SIZE TO STOP BLEEDING
============================================================ */
@media (max-width: 1024px) {

    /* Swiper container must not clip */
    .past-developments-slider__grid,
    .past-developments-slider__grid .swiper-wrapper {
        overflow: visible !important;
    }

    /* Make the cards smaller than the screen */
    .past-card.swiper-slide {
        width: 85vw !important;      /* make card smaller */
        max-width: 85vw !important;  /* enforce size */
        flex-shrink: 0 !important;
        margin: 0 auto !important;   /* center it */
        
        /* keep desktop shadow */
        box-shadow: 0px 3px 6px #00000029;
        border: 1px solid rgba(0,0,0,0.1);
    }

    /* Image height for mobile/tablet */
    .past-card__image {
        height: 260px;
    }
}

@media (max-width: 768px) {
    .past-card.swiper-slide {
        width: 90vw !important;      /* slightly larger on mobile */
        max-width: 90vw !important;
    }

    .past-card__image {
        height: 220px;
    }
}

/* ============================================================
   MOBILE + TABLET — ADD GAP BETWEEN SWIPER SLIDES
============================================================ */
@media (max-width: 1024px) {

    /* Add a clean gap between cards */
    .past-card.swiper-slide {
        margin-right: 20px !important; /* main spacing between cards */
        margin-left: 20px !important;  /* keeps card centered */
    }

    /* Optional: reduce gap slightly on smaller screens */
}

@media (max-width: 768px) {
    .past-card.swiper-slide {
        margin-right: 16px !important;
        margin-left: 16px !important;
    }
}

/* ============================================================
   MOBILE — MAKE CARD FIT SCREEN PERFECTLY (NO CUT-OFF)
============================================================ */
@media (max-width: 767px) {

    /* Remove global padding influence */
    .past-developments-slider__grid {
        padding: 0 !important;
        margin: 0 auto !important;
        overflow: visible !important;
        width: 100% !important;
    }

    /* Swiper wrapper should not clip */
    .past-developments-slider__grid .swiper-wrapper {
        overflow: visible !important;
    }

    /* Card should be slightly smaller than screen */
    .past-card.swiper-slide {
        width: 92vw !important;           /* 🔥 perfect width for mobile */
        max-width: 92vw !important;
        margin-left: auto !important;     /* center horizontally */
        margin-right: auto !important;
        flex-shrink: 0 !important;

        /* Keep shadow + border consistent */
        box-shadow: 0px 3px 6px #00000029;
        border: 1px solid rgba(0,0,0,0.1);
        background: #FFF;
    }

    /* Adjust image height for mobile */
    .past-card__image {
        height: 220px;
    }

    
}

/* MOBILE — reduce bottom padding on the purple banner */
@media (max-width: 767px) {
    .past-developments-slider__banner {
        padding-top: 50px !important;
        padding-bottom: 50px !important; /* was 100–160px, now MUCH tighter */
    }
}

/* MOBILE/TABLET – FORCE SWIPER MODE */
@media (max-width: 1024px) {

    .past-developments-slider__grid {
        display: block !important;
        overflow: hidden !important;
    }

    /* one card per screen */
    .past-card.swiper-slide {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        float: none !important;
    }

    /* spacing between slides */
    .past-developments-slider__grid .swiper-wrapper {
        gap: 20px !important;
        justify-content: flex-start !important;
    }

    /* remove desktop arrows */
    .past-developments-slider__arrows {
        display: none !important;
    }

    /* tighten purple banner padding */
    .past-developments-slider__banner {
        padding-top: 50px !important;
        padding-bottom: 50px !important;
    }
}

/* ----------------------------------------------
   TABLET & MOBILE FIX — STOP IMAGE FROM SHIFTING UP
   AND ENSURE CARD SITS BELOW DESCRIPTION COPY
---------------------------------------------- */
@media (max-width: 1024px) {

    /* Prevent card from sliding upward */
    .past-card {
        margin-top: 40px !important;
    }

    /* Swiper tries to center slides vertically — disable for our block */
    .pastDevSwiper .swiper-slide {
        transform: none !important;
    }

    /* Ensure cards always appear BELOW banner text */
    .past-developments-slider__grid {
        margin-top: 20px !important;
    }
}

/* ----------------------------------------------
   MOBILE-ONLY FIX — Allow card to overlap purple,
   but never cover the description copy
---------------------------------------------- */
@media (max-width: 768px) {

    /* Reduce banner bottom padding */
    .past-developments-slider__banner {
        padding-bottom: 80px !important; /* lower so card sits nicely */
    }

    /* Add spacing above card to keep it under the text */
    .past-card {
        margin-top: 60px !important;
    }
}

/* ============================================================
   FIX: STOP BOTTOM SHADOW FROM BEING CUT OFF (mobile + tablet)
============================================================ */
@media (max-width: 1024px) {

    /* The main slider container must NOT clip shadow */
    .past-developments-slider__grid,
    .pastDevSwiper,
    .pastDevSwiper.swiper,
    .past-developments-slider__grid.swiper {
        overflow: visible !important;
    }

    /* Swiper wrapper itself cannot clip */
    .past-developments-slider__grid .swiper-wrapper {
        overflow: visible !important;
    }

    /* Swiper slide (the card container) must not clip */
    .past-card.swiper-slide {
        overflow: visible !important;
    }

    /* Every inner part of the card must allow full shadow */
    .past-card,
    .past-card__image,
    .past-card__content {
        overflow: visible !important;
    }

    /* Add a bit of bottom spacing so shadow is fully visible */
    .past-developments-slider {
        padding-bottom: 80px !important;
    }
}

/* ============================================================
   MOBILE + TABLET: Lift slider upward to overlap banner
============================================================ */
@media (max-width: 1024px) {
    .past-developments-slider__grid {
        margin-top: -35px !important; /* Adjust this number to taste */
    }
}

@media (min-width: 1025px) {
    .past-developments-slider__arrows {
        pointer-events: none !important; /* wrapper ignores clicks */
    }

    .past-developments-slider__arrow {
        pointer-events: auto !important; /* arrows ARE clickable */
        cursor: pointer;
    }
}

/* RESET ALL PREVIOUS TOP MARGIN OVERRIDES */
.past-developments-slider__grid {
    margin-top: 0 !important;
}

/* DESKTOP OVERLAP — controlled & stable */
@media (min-width: 1025px) {
    .past-developments-slider__grid {
        margin-top: -120px !important; /* your original design */
    }
}

/* TABLET — gentle overlap */
@media (max-width: 1024px) {
    .past-developments-slider__grid {
        margin-top: -60px !important;
    }
}

/* MOBILE — safe and balanced */
@media (max-width: 767px) {
    .past-developments-slider__grid {
        margin-top: -40px !important;
    }
}

/* FINAL OVERRIDE — DESCRIPTION TEXT WIDTH */
.past-developments-slider__description {
    max-width: 820px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center; /* keep current behaviour */
}

/* TABLET FIX — push cards DOWN so they don't overlap the text */
@media (min-width: 768px) and (max-width: 1024px) {
    .past-developments-slider__grid {
        margin-top: -30px !important; /* Adjust to taste: 20–60px */
    }
}

/* Make Past Developments card titles use H4 styling instead of H3 */
.past-card__title {
    font-family: var(--font-heading) !important;
    font-size: var(--font-h4) !important;
    font-weight: 700 !important;
    line-height: var(--lh-normal) !important;
    color: var(--color-purple) !important;
    margin-bottom: var(--space-xs) !important;
}

/* ============================================================
   PAST DEVELOPMENTS — USE SAME ARROW STYLE AS MAIN SLIDER
   (Pure styling override — no layout changes)
============================================================ */

/* Desktop only */
@media (min-width: 1025px) {

    /* Wrapper keeps same layout */
    .past-developments-slider__arrows {
        pointer-events: none;
    }

    .past-developments-slider__arrow {
        pointer-events: auto;
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        background: none;   /* remove background */
    }

    /* Replace SVG with chevron style from Developments block */
    .past-developments-slider__arrow svg {
        display: none !important; /* hide original SVG */
    }

    /* Add chevron using pseudo-elements */
    .past-developments-slider__arrow::after {
        content: "";
        width: 16px;
        height: 16px;
        border-top: 3px solid var(--color-gold);
        border-right: 3px solid var(--color-gold);
        display: block;
        transition: 0.25s ease;
    }

    /* Correct directions */
    .past-developments-slider__arrow.prev::after {
        transform: rotate(-135deg);    /* left arrow */
    }

    .past-developments-slider__arrow.next::after {
        transform: rotate(45deg);      /* right arrow */
    }

    /* Hover state matches Developments slider */
    .past-developments-slider__arrow:hover::after {
        border-color: var(--color-purple);
    }
}

/* Hide arrows below 1024px (same rule as other block) */
@media (max-width: 1024px) {
    .past-developments-slider__arrows {
        display: none !important;
    }
}

/* ============================================================
   PAST DEVELOPMENTS — Move arrows further outward on desktop
============================================================ */
@media (min-width: 1025px) {

    /* Increase the width of the arrow container */
    .past-developments-slider__arrows {
        max-width: 1400px !important; /* wider than grid */
        left: 50%;
        transform: translateX(-50%);
        pointer-events: none; /* wrapper ignores clicks */
    }

    /* Allow arrows to receive clicks */
    .past-developments-slider__arrow {
        pointer-events: auto;
    }

    /* Push left arrow outward */
    .past-developments-slider__arrow.prev {
        transform: translateX(-100px); /* move left arrow further left */
    }

    /* Push right arrow outward */
    .past-developments-slider__arrow.next {
        transform: translateX(100px);  /* move right arrow further right */
    }
}