.projects-grid {
    @apply block w-full;

    /* ── Project card (carousel item) ── */
    .project-card {
        @apply block no-underline;

        &::after { content: none !important; }

        .project-card__media {
            @apply relative w-full overflow-hidden rounded-t-xl;

            img {
                @apply w-full my-0 object-cover;
                height: 200px;
                @media (min-width: theme("screens.lg")) {
                    height: 320px;
                }
            }
        }

        /* Overlay pills on the image */
        .project-card__badges {
            @apply absolute top-3 left-3 right-3 flex flex-wrap gap-2;
            @media (min-width: theme("screens.lg")) {
                @apply top-4 left-4 right-4 gap-3;
            }
        }

        .project-card__badge {
            @apply inline-block bg-white text-blue rounded-md font-medium leading-none whitespace-nowrap;
            @apply text-xs px-3 py-2;
            box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
            @media (min-width: theme("screens.lg")) {
                @apply text-sm px-4 py-3;
            }
        }

        /* Light grey body below the image */
        .project-card__body {
            @apply bg-neutral-100 rounded-b-xl px-4 py-4;
            @media (min-width: theme("screens.lg")) {
                @apply px-6 py-6;
            }
        }

        .project-card__title {
            @apply text-base font-bold mt-0 mb-1 text-blue text-left;
            @media (min-width: theme("screens.lg")) {
                @apply text-2xl mb-2;
            }
        }

        .project-card__subtitle {
            @apply text-xs font-medium text-blue m-0 text-left;
            @media (min-width: theme("screens.lg")) {
                @apply text-xl;
            }
        }
    }
}

.latest-projects {
    @apply lg:!pb-6;
    .wp-block-group {
        @apply max-w-[1200px] mx-auto;
    }
    .wp-block-heading {
        @apply text-center !mb-0 !font-semibold;
        @media (min-width: theme("screens.lg")) {
            @apply text-left;
        }
    }
}

.latest-projects-cols {
    @media (max-width: theme("screens.md")) {
        @apply !text-center;
    }
}

section.projects-block {
    @apply mt-5;
}

.project-details {
    @apply bg-blue my-2 w-full overflow-hidden;
    @media (min-width: theme("screens.lg")) {
        @apply mt-0 mb-10;
    }
}

.project-item-header {
    @apply flex flex-col justify-between mb-5 border-b border-neutral-300 pb-5;
    @media (min-width: theme("screens.lg")) {
        @apply flex-row items-end mb-8 pb-10;
    }
}

.project-item-info {
    @apply font-montserrat;
    ul {
        @apply pl-0 list-none flex flex-wrap gap-2 divide-x divide-white m-0;
        @media (min-width: theme("screens.lg")) {
            @apply gap-5;
        }
        li {
            @apply flex flex-col  items-start text-white text-left leading-6 pr-2 mb-0 !pl-0;
            @media (min-width: theme("screens.lg")) {
                @apply pr-6;
            }
            label {
                @apply text-xs font-semibold;
                @media (min-width: theme("screens.lg")) {
                    @apply text-base;
                }
            }
            span {
                @apply text-xs font-normal;
                @media (min-width: theme("screens.lg")) {
                    @apply text-base;
                }
            }
            svg {
                @apply bg-primary rounded-full p-1 fill-white;
            }
        }
    }
}

.project-item-dropdown {
    @apply py-6 px-3 text-white w-full overflow-hidden;
    @media (min-width: theme("screens.lg")) {
        @apply p-10;
    }

    .project-item-title {
        @apply text-white text-xl font-bold mb-2 mt-0;
        @media (min-width: theme("screens.lg")) {
            @apply text-2xl;
        }
    }
    .project-item-subtitle {
        @apply text-white text-sm font-medium my-0 text-left;
        @media (min-width: theme("screens.lg")) {
            @apply text-xl;
        }
    }
    .project-dropdown-body {
        @apply flex flex-col;
        @media (min-width: theme("screens.lg")) {
            @apply flex-row;
        }
        .project-item-excerpt {
            @apply mb-1;
            @media (min-width: theme("screens.lg")) {
                @apply pr-10;
            }
             @media (max-width: theme("screens.md")) {
                @apply mb-5;
             }
            p {
                @apply leading-8 mb-5 text-sm;
                @media (min-width: theme("screens.lg")) {
                    @apply leading-10 text-lg;
                }
                &:last-child { @apply mb-0; }
                &:first-child { @apply mt-0; }
            }
        }
        .project-item-excerpt,
        .project-item-gallery {
            @apply !w-1/2 ;
            @media (max-width: theme("screens.md")) {
                @apply !w-full;
            }
        }
        .project-item-gallery {
            /* @apply max-w-full w-full; */
            .swiper-slide {
                @apply max-w-full !w-full;
            }
            img {
                @apply mt-0 mb-5 object-cover w-full;
                max-height: 300px;
                height: auto;
            }
            .swiper-pagination {
                @apply z-50 relative;
            }
        }
    }
}

.project-item-gallery {
    @apply max-w-full w-full lg:!h-[320px];
}

.latest-projects-carousel {
    @apply max-w-full w-full !mx-auto;
    .swiper-wrapper {
        @apply max-w-full !pb-0;
    }
    .swiper-pagination {
        .swiper-pagination-bullet {
            @apply border border-white w-3 h-3;
            &.swiper-pagination-bullet-active {
                @apply bg-secondary border-secondary;
            }
        }
    }
}

/* ── Projects Carousel Wrapper ── */
.projects-carousel-wrapper {
    @apply relative block w-full;
    @media (max-width: theme("screens.md")) {
     .swiper-wrapper {
            @apply !pb-0;
        }
    }
}

/* ── Projects Carousel ── */
.projects-carousel {
    @apply w-full overflow-hidden;
    width: 100% !important;
    max-width: 100% !important;
}

.projects-carousel .swiper-slide.project-item {
    @apply h-auto;
    @media (max-width: theme("screens.md")) {
        @apply !w-full;
    }
}

/* ── Arrow Buttons ── */
.projects-carousel__btn {
    @apply absolute z-10 flex-shrink-0 items-center justify-center rounded-full border-2 border-primary bg-white cursor-pointer transition-all;
    display: none !important;

    /* Vertically centre on the card image (320px tall on lg+), not the whole card */
    top: 160px;
    transform: translateY(-50%);

    @media (min-width: theme("screens.lg")) {
        display: flex !important;
        width: 44px;
        height: 44px;
    }

    width: 36px;
    height: 36px;

    svg {
        @apply fill-primary;
        width: 20px;
        height: 20px;
    }

    &:hover {
        @apply bg-primary;
        svg { @apply fill-white; }
    }

    &.swiper-button-disabled {
        @apply opacity-30 cursor-not-allowed;
    }
}

/* Pull the arrows out of the container, into the side gutters */
.projects-carousel__btn--prev {
    right: 100%;
    margin-right: 0.75rem;
}

.projects-carousel__btn--next {
    left: 100%;
    margin-left: 0.75rem;
}

/* ── Pagination below carousel ── */
.projects-carousel-controls {
    @apply flex items-center justify-center my-4;
    min-height: 20px;
}

.projects-carousel__pagination {
    &.swiper-pagination {
        @apply relative z-10;
        position: relative !important;
        width: auto !important;
        bottom: auto !important;
        left: auto !important;
    }

    .swiper-pagination-bullet {
        @apply rounded-full opacity-100 bg-transparent border-blue;
        width: 12px !important;
        height: 12px !important;
        border-width: 2px !important;
        border-style: solid !important;
        margin: 0 3px !important;

        &.swiper-pagination-bullet-active {
            @apply bg-primary border-primary;
        }
    }
}

[x-cloak] { display: none !important; }

section.projects-block {
    @apply mt-5 overflow-hidden w-full;
    max-width: 100vw;
}

/* ── Project Inner Page ── */
.project-inner {

    /* Hero */
    .project-inner__hero {
        @apply relative w-full overflow-hidden;
        min-height: 260px;
        @media (min-width: theme("screens.md")) {
            min-height: 380px;
        }
        @media (min-width: theme("screens.lg")) {
            min-height: 520px;
        }

        .project-inner__hero-img {
            @apply absolute inset-0 w-full h-full object-cover my-0;
        }

        .project-inner__hero-overlay {
            @apply absolute inset-0;
            background: linear-gradient(to bottom, rgba(45,66,86,0.55) 0%, rgba(45,66,86,0.8) 100%);
        }

        .project-inner__hero-content {
            @apply relative z-10 flex flex-col items-center justify-center text-center px-5 py-12;
            min-height: 260px;
            @media (min-width: theme("screens.md")) {
                @apply px-10 py-16;
                min-height: 380px;
            }
            @media (min-width: theme("screens.lg")) {
                @apply px-16;
                min-height: 520px;
            }
        }

        .project-inner__title {
            @apply !text-white text-2xl font-bold mb-2 mt-0;
            @media (min-width: theme("screens.md")) {
                @apply text-4xl mb-3;
            }
            @media (min-width: theme("screens.lg")) {
                @apply text-5xl;
            }
        }

        .project-inner__subtitle {
            @apply text-white text-base font-medium m-0 opacity-90;
            @media (min-width: theme("screens.lg")) {
                @apply text-lg;
            }
        }
    }

    /* Info strip */
    .project-inner__info-strip {
        @apply bg-blue py-7 px-4;
        @media (min-width: theme("screens.lg")) {
            @apply py-10;
        }

        .project-inner__info-list {
            @apply list-none m-0 p-0 grid grid-cols-2 gap-y-6 gap-x-0;
            @media (min-width: theme("screens.md")) {
                @apply flex flex-row flex-nowrap justify-center;
            }

            li {
                /* Mobile: 2-col grid, left border as divider on even items */
                @apply flex flex-col pl-5 border-l border-white/30;
                &:nth-child(odd) {
                    @apply border-l-0 pl-0;
                }

                /* Tablet+ : row with right-border dividers */
                @media (min-width: theme("screens.md")) {
                    @apply pl-0 border-l-0 border-r border-white/30 pr-8 mr-8 mb-0;
                    &:nth-child(odd) { @apply border-l-0; }
                    &:last-child { @apply border-r-0 pr-0 mr-0; }
                }
                @media (min-width: theme("screens.lg")) {
                    @apply pr-10 mr-10;
                }
            }

            .project-inner__info-label {
                @apply text-white/70 text-xs font-semibold uppercase tracking-widest mb-1;
                font-family: "Montserrat", sans-serif;
            }

            .project-inner__info-value {
                @apply text-white text-sm font-normal;
                @media (min-width: theme("screens.lg")) {
                    @apply text-base;
                }
            }
        }
    }

    /* Body */
    .project-inner__body {
        @apply pt-6 pb-10;
        @media (min-width: theme("screens.md")) {
            @apply pt-10 pb-12;
        }
        @media (min-width: theme("screens.lg")) {
            @apply pt-14 pb-16;
        }
    }

    /* Two-column row: text + gallery */
    .project-inner__row {
        @apply flex flex-col gap-6 mb-8;
        @media (min-width: theme("screens.md")) {
            @apply gap-8 mb-10;
        }
        @media (min-width: theme("screens.lg")) {
            @apply flex-row gap-12 items-center;
        }

        .project-inner__text {
            @apply flex-1 min-w-0;
        }

        .project-inner__gallery {
            @apply w-full;
            @media (min-width: theme("screens.lg")) {
                @apply w-5/12 flex-shrink-0;
            }
        }
    }

    /* Gallery carousel */
    .project-inner-carousel {
        @apply w-full;

        /* Prevent blank-space flash before Swiper initialises */
        &:not(.swiper-initialized) {
            .swiper-wrapper {
                @apply flex overflow-hidden;
            }
            .swiper-slide:not(:first-child) {
                @apply hidden;
            }
        }

        .project-inner__gallery-img {
            @apply w-full object-cover my-0;
            height: 220px;
            @media (min-width: theme("screens.md")) {
                height: 300px;
            }
            @media (min-width: theme("screens.lg")) {
                height: 400px;
            }
        }

        .swiper-pagination {
            @apply relative z-10 mt-3;
            position: relative !important;
            bottom: auto !important;
        }

        .swiper-pagination-bullet {
            @apply border-2 border-blue bg-transparent opacity-100;
            width: 12px !important;
            height: 12px !important;

            &.swiper-pagination-bullet-active {
                @apply bg-secondary border-secondary;
            }
        }
    }

    /* Second info block */
    .project-inner__info2 {
        @apply mt-8 pt-8 border-t border-gray-200;
    }

    /* WP editor content */
    .project-inner__wp-content {
        @apply mt-8;
    }

    /* Footer actions row */
    .project-inner__actions {
        @apply mt-10 pt-8 border-t border-gray-200 flex flex-col items-center gap-4;
        @media (min-width: theme("screens.md")) {
            @apply flex-row justify-between items-center;
        }
    }

    /* Go back text link */
    .project-inner__back-link {
        @apply inline-flex items-center gap-2 text-sm font-semibold text-blue/70 no-underline transition-all duration-200;
        font-family: "Montserrat", sans-serif;

        &::after {
            content: none !important;
        }

        svg {
            @apply transition-transform duration-200 flex-shrink-0;
        }

        &:hover {
            @apply text-blue;
            svg {
                @apply -translate-x-1;
            }
        }

        @media (min-width: theme("screens.md")) {
            @apply text-base;
        }
    }
}