.projects-grid-wrapper {
    display: flex;
    flex-direction: column;
  gap: 0;
    width: 100%;
    padding-bottom: 70px;
    align-items: center;
}

.projects-grid-wrapper .project-content > .truncate-header {
    height: 45px;
}

.projects-grid-wrapper .project-content > .truncate-desc {
    height: 96px;
}

.projects-grid-filter {
    display: flex;
    width: 100%;
    justify-content: center;
    gap: 32px;
    position: sticky;
    top: 120px;
    width: 100%;
    padding: 20px 0;
    background-color: var(--wp--preset--color--base);
}

.filter-btn {
    display: flex;
    align-items: center;
    padding: 4px 8px;
    min-width: 38px;
    background: #E8E8E8;
    text-align: center;
    border-radius: 50px;
    color: var(--wp--preset--color--contrast);
    font-size: 16px;
    line-height: 1;
    font-family: var(--wp--preset--font-family--roboto-mono);
    font-weight: 700;
}

.filter-btn.active {
    background: #CBCBCB;
    color: var(--wp--preset--color--contrast);
}

.projects-grid article {
    width: 100%;
}

.projects-grid {
    display: grid;
   grid-template-columns: 100%;
    gap: 32px;
    width: 361px;
    /* fixed grid width */
    /* max-width: 100%; */
    /* prevent overflow on smaller screens */
    /* box-sizing: border-box; */
}

.grid-project-card-content>* {
    margin-top: 0;
    /* remove default margin for children */
}

.grid-project-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    /* box-sizing: border-box; */
}

.project-content {
    display: flex;
    flex-direction: column;
    gap: 14px;
}


.grid-project-card img {
    width: 100%;
    height: 192px;
}

.project-excerpt {
    flex-grow: 1;
    min-height: 66px;
    text-overflow: ellipsis;
    overflow: hidden;
}

/* .project-excerpt {
    flex-grow: 1;
    height: 66px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    text-overflow: ellipsis;
    height: auto;
    margin: 0;
    line-height: 1.2em;
} */

.project-tag,
.project-tags a {
    border: 1px solid #AFAFAF;
    padding: 4px 8px !important;
}

.project-tag,
.project-tag a,
.project-tags a {
    font-weight: 400;
    font-size: 12px !important;
    margin-top: 32px;
    border-radius: 50px;
    color: var(--wp--preset--color--contrast);
    width: max-content;
    font-family: var(--wp--preset--font-family--roboto-mono) !important;
}

.project-content a.read-more {
    display: inline-block;
    margin-top: 16px;
    /* push to bottom if parent uses flex */
    padding: 8px 12px;
    text-decoration: none;
    border-radius: 4px;

}

/* Improve container spacing */
.projects-pagination {
	display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 40px;
}

/* Base buttons upgrade */
.projects-pagination button {
    min-width: 44px;
    height: 44px;
    padding: 0 14px;
    border-radius: 4px;
    border: none;
    background: transparent;
    font-size: 18px;
    font-weight: 500;
    color: #2d2d2d;
    transition: all 0.2s ease;
}

/* Hover effect */
.projects-pagination button:hover:not(:disabled):not(.current-page) {
    background: #f2f2f2;
}

/* Active page (blue square) */
.projects-pagination .current-page {
    background: var(--wp--preset--color--primary-main);
    color: var(--wp--preset--color--base);
	font-weight: 600;
}

/* Prev / Next styling refinement */
.projects-pagination .prev-page,
.projects-pagination .next-page {
	background-color: #F2F2F2;
	color: #9a9a9a;
	font-size: 20px;
	border-radius: 12px;
}

/* Hover on arrows */
.projects-pagination .prev-page:hover:not(:disabled),
.projects-pagination .next-page:hover:not(:disabled) {
	background-color: #e6e6e6;
	color: #333;
}

/* Disabled arrows */
.projects-pagination .prev-page:disabled,
.projects-pagination .next-page:disabled {
	opacity: 0.4;
	cursor: default;
}

/* Ellipsis styling (if you add it in JS) */
.projects-pagination .pagination-dots {
	font-size: 18px;
	color: #888;
	pointer-events: none;
}

/* LATEST PROJECTS CAROUSEL */
.latest-projects-slider-wrapper {
	overflow-x: hidden;
	width: 100%;
}

/* CAROUSEL TRACK */
.latest-projects-slider-wrapper {
	width: 100%;
	overflow: hidden;
	position: relative;
}

.latest-projects-carousel {
	display: flex;
	gap: 16px;
	will-change: transform;
}

/* ===============================
SLIDES — MOBILE (FULL WIDTH)
=============================== */
.latest-projects-slider-wrapper {
	overflow: hidden;
	width: 100%;
	max-width: 100vw;
}

/* track */
.latest-projects-carousel {
    display: flex;
    gap: 0;
}

.project-slide {
    flex: 0 0 100%;
    width: 100%;
    max-width: 100%;

    display: flex;
    flex-direction: column;
    /* CRITICAL: exact slide width */

    box-sizing: border-box;
    padding: 37px 17px;
    background-color: var(--wp--preset--color--primary-main);
    /* background-color: lightyellow; */

    color: var(--wp--preset--color--base);
}

.project-image,
.project-content {
    width: 100%;
}

.project-image img {
    width: 100%;
    height: auto;
    display: block;
}

.project-slide .project-content {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 12px;
}

.latest-label {
    color: var(--wp--preset--color--secondary);
    font-family: var(--wp--preset--font-family--roboto-mono) !important;
    font-weight: 700;
    margin-top: 26px;
}

.project-meta {
    font-size: 14px;
    margin-top: 10px;
}

.project-tags {
    display: flex;
    gap: 20px;
    margin-top: 21px;
}

.project-tags span,
.project-tags a {
    border-radius: 50px;
    margin-top: 0;
    background-color: white;
    color: var(--wp--preset--color--contrast);
}

.project-content a {
    margin-top: 12px;
}


/* INDIVIDUAL PROJECT POST */

.project-post-breadcrumb {
    font-size: 14px;
    align-self: flex-start;
    margin-bottom: 37px;
}

.project-post-breadcrumb-link {
    color: #555;
    text-decoration: none;
}

.project-post-breadcrumb-link:hover {
    text-decoration: underline;
}

.project-post-breadcrumb-separator {
    margin: 0 4px;
}

.project-post-breadcrumb-current {
    color: var(--wp--preset--color--primary-main);
    font-weight: bold;
}

.project-title {
    margin-bottom: 12px;
    text-align: start;
}


.project-description {
    font-size: 20px;
}

.project-img-caption {
    font-family: var(--wp--preset--font-family--roboto-mono) !important;
    font-size: 12px;
    text-align: center;
    margin-top: 8px;
}

.project-post-wrapper .project-section-title,
.project-post-wrapper .project-title {

    text-align: start;
}


.project-post-wrapper .project-section-title {
    font-size: 36px;
    font-weight: 700;
}

.project-post-wrapper .project-image {
    display: flex;
    justify-content: center;
}

.project-post-wrapper .project-image img {
    width: 100%;
    height: 202px;
}

.project-post-wrapper.wp-block-list {
    list-style-type: disc !important;
    padding-left: 20px !important;
}

.project-tag.wp-block-post-terms {
    margin: 20px 0;
}

.related-posts-wrapper {
    display: grid;
    grid-template-columns: 1fr;
    gap: 48px;
    justify-content: start;
}

.related-posts-wrapper .project-card {
    width: 100%;
}

.related-posts-wrapper .project-card img {
    height: 202px !important;
    width: 100%;
}

.related-posts-wrapper .grid-project-card .project-tag {
    margin-top: 0;
}

.project-post-wrapper .project-read-time::before {
    content: "•";
    padding: 0 8px;
}

/* .project-post-wrapper > time
.project-post-wrapper > .project-read-time  */
.project-date-and-read-time>* {
    font-size: 16px;
    color: #7C7C7C;
}

.project-tag,
.project-tag>*,
.project-tags a {
    text-transform: capitalize;
}

.wp-block-post-content>p:first-of-type {
    font-size: 20px;
}


.swiper-pagination {
    display: flex;
    justify-content: center !important;
    /* border: 1px solid blue; */
}

.swiper-pagination-bullet {
    width: 12px !important;
    height: 12px !important;
}

.swiper-pagination-simple {
	text-align: center !important;
}

.wp-block-jetpack-slideshow_image {
	object-cover: cover !important;
}

.swiper-button-prev,
.swiper-button-next {
    padding: 24px !important;
    border-radius: 100% !important;
}

figure>img {
    border-radius: 8px;
    object-fit: cover;
    height: 797px;
}

.project-content>p {
    justify-content: start;
}

.grid-project-card img {
    border-radius: 8px;
    object-fit: cover;
}


.project-post-wrapper .project-tags>span {
    margin-bottom: 20px;
    gap: 0;
}

.project-post-wrapper .project-detail-image {
    width: 100%;
}

.project-post-wrapper .project-detail-image img {
    height: 202px;
    width: 100% !important;
}

.wp-block-group.is-nowrap.is-layout-flex {
    flex-direction: column;
}

.wp-block-group.is-nowrap.is-layout-flex>* {
    width: 100%;
}

.projects-filter-dropdown  {
	border-bottom: 1px solid #323232;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;

	background-color: #fff;

	/* Space for arrow */
	padding-right: 44px;

	/* Your SVG as background */
	background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 6L8 10L12 6' stroke='%23323232' stroke-width='1.33257' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

	background-repeat: no-repeat;

	/* Adjust this to control spacing from right */
	background-position: right 16px center;

	background-size: 16px;
}


@media (min-width: 1024px) {
    .project-title {
        margin-bottom: 17px;
    }

    .project-post-wrapper .project-image img {
        height: 597px;
    }

    .wp-block-jetpack-slideshow_slide>figure>img {
        height: 100% !important;
    }

    .project-img-caption {
        margin-top: 21px;
    }


    .project-post-wrapper .project-detail-image {
        width: 500px;
    }

    .project-post-wrapper .project-detail-image img {
        height: 300px;
        width: 100% !important;
    }

    .wp-block-group.is-nowrap.is-layout-flex {
        align-items: stretch;
    }

    .wp-block-group.is-nowrap.is-layout-flex {
        flex-direction: row;
    }

    .wp-block-group.is-nowrap.is-layout-flex>* {
        width: auto;
    }

    .related-posts-wrapper {
        grid-template-columns: repeat(3, 1fr);
        gap: 35px;
    }

    /* PROJECTS CAROUSEL */

    .latest-projects-carousel {
        display: flex;
        gap: 33px;
    }

    .latest-projects-slider-wrapper {
        overflow: hidden;
        width: 100%;
        max-width: 1127px;
        margin: 0 auto;
    }

    .project-slide {
        flex: 0 0 1127px;
        /* required carousel width */
        flex-direction: row;
        /* image left, content right */
        padding: 32px;
        gap: 40px;
        align-items: center;
        border-radius: 8px;
        border-top-right-radius: 64px;
    }

    .project-slide .project-image {
        flex: 0 0 50%;
        /* half width */
        max-width: 50%;
    }

    .project-slide .project-content {
        flex: 0 0 40%;
        /* half width */
        max-width: 50%;
    }

    .project-slide .project-image img {
        width: 100%;
        height: auto;
        object-fit: cover;
    }

    /* PROJECTS GRID */
    .projects-grid {
        grid-template-columns: repeat(3, 331px);
        width: 1440px;
    }
	
	.projects-grid-wrapper {
		padding-bottom: 132px;
		gap: 50px;
	}

    .projects-grid-filter {
        top: 125px;
        padding: 40px 0;
    }

    .project-content a {
        margin-top: 26px;
    }

    .grid-project-card img {
        width: 100%;
        height: 202px;
    }

    .related-posts-wrapper .project-card {
        width: 331px;
    }
	
	/* Improve container spacing */
	.projects-pagination {
		margin-top: 64px;
	}

}