/* ========================================
   Hero
======================================== */

.works-hero {
    padding-top: 160px;
    background-image: url('../../../../wp-content/uploads/2026/06/BG_Pattern-01.jpg');
}
.single-projects .works-hero {
    padding-bottom: 50px;
}
.works-hero .text-label {
    margin-bottom: 16px;
}
.works-hero .h1 {
    margin-bottom: 24px; 
}
.single-projects .works-hero .h1 {
    margin-bottom: 0;
}

.works-hero-row {
    display: grid;
    grid-template-columns: 700px 1fr;
    gap: 80px;
}
.works-hero-btn {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
}


/* ── Selected Work ─────────────────────────────────────── */

.works-filters {
    padding-bottom: 0;
}
.works-filter-list {
    display: flex;
    gap: 36px;
    flex-wrap: wrap;
}
.works-filter-btn svg {
    display: none;
}
.btn.works-filter-btn {
    background: transparent;
    border: 2px solid var(--color-bright-green);
    cursor: pointer;
    outline: none;
}
.btn.works-filter-btn.active {
    background: var(--color-bright-green);
    border: 2px solid var(--color-bright-green);
}

.works-grid-section .container {
    max-width: 2040px;
    padding: 0 20px;
}
.hp-work-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}

/* ========================================
   CTA
======================================== */

.hp-cta {
    background-color: var(--color-bright-green);
    text-align: center;
    background-attachment: fixed;
    background-image: url('../../../../wp-content/uploads/2026/05/reXtore_BrandMark_LightGreen-scaled.png');
    background-size: cover;
    min-height: 525px;
    display: flex;
    align-items: center;
}
.hp-cta-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
    max-width: 1140px;
    margin: 0 auto;
}
.hp-cta-inner .h2 {
    max-width: 1100px;
}
.hp-cta-inner .text-big {
    font-size: 25px;
    max-width: 1000px;
    margin: 0 auto 20px;
}
.hp-cta-inner .h2,
.hp-cta-inner .text-big {
    color: var(--color-dark-teal);
}

/* ========================================
   Single works
======================================== */

.portfolio-case {
    padding-bottom: 160px;
}
.portfolio-case__slider{
    margin-bottom:80px;
    overflow:hidden;
}
.portfolio-case__slider img{
    width:100%;
    display:block;
    aspect-ratio: 1280 / 720;
    object-fit:cover;
}

.portfolio-case__content{
    display:grid;
    grid-template-columns:520px 1fr;
    gap:120px;
}

.portfolio-case__title{
    margin-bottom:36px;
}
.portfolio-case__info{
    margin-bottom:50px;
}
.portfolio-case__row{
    display:grid;
    grid-template-columns:140px 1fr;
    gap:20px;
    margin-bottom:10px;
}
.portfolio-case__row span{

}
.portfolio-case__row strong {
    position: relative;
    padding-left: 10px;
}
.portfolio-case__row strong:before {
    content: ":";
    position: absolute;
    left: 0;
}
.portfolio-case__buttons{
    display:flex;
    gap:20px;
    flex-wrap:wrap;
}
.portfolio-case__right{
    line-height:1.8;
}
.portfolio-case__right p{
    margin:0 0 30px;
}
.portfolio-case .swiper-pagination {
    position: absolute;
    left: 80px;
    bottom: 0;
    max-height: 40px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 15px;
    background: #fff;
    border-radius: 0;
    width: unset;
}

.portfolio-case .swiper-pagination::before,
.portfolio-case .swiper-pagination::after {
    content: "";
    position: absolute;
    bottom: 0;
    width: 0;
    height: 0;
}

.portfolio-case .swiper-pagination::before {
    left: -20px;

    border-style: solid;
    border-width: 0 0 40px 20px;
    border-color: transparent transparent #fff transparent;
}

.portfolio-case .swiper-pagination::after {
    right: -20px;

    border-style: solid;
    border-width: 40px 0 0 20px;
    border-color: transparent transparent transparent #fff;
}
.portfolio-case .swiper-pagination .swiper-pagination-bullet {
    opacity: 1;
    width: 18px;
    height: 100%;
    margin: 0 !important;
    border-radius: 0;
    transition: background 0.2s ease;
    clip-path: polygon( 50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25% );
    aspect-ratio: 1 / 1.15;
    outline: none !important;
    position: relative;
}
.portfolio-case .swiper-pagination .swiper-pagination-bullet::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--border);
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    aspect-ratio: 1 / 1.15;
    z-index: 0;
    transition: all .5s ease;
}

.portfolio-case .swiper-pagination .swiper-pagination-bullet::after {
    content: "";
    position: absolute;
    background: #fff;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    z-index: 1;
    transition: all .5s ease;
    inset: 1px;
}
.portfolio-case .swiper-pagination-bullet-active:before  {
    background: var(--color-bright-green) !important;
    inset: 0px;
}
.portfolio-case .swiper-pagination-bullet-active:after  {
    background: var(--color-bright-green) !important;
    inset: 0px;
}
  
.portfolio-case__slider {
    position: relative;
}

.portfolio-case__prev,
.portfolio-case__next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 48px;
    height: 48px;
    cursor: pointer;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;
    background: #fff;
    box-shadow: 0 4px 12px rgba(0,0,0,.1);
}

.portfolio-case__prev:hover,
.portfolio-case__next:hover {
	 background: #86E95C;
}

.portfolio-case__prev {
    left: 20px;
}

.portfolio-case__next {
    right: 20px;
}  


/* ========================================
   RESPONSIVE
======================================== */

@media (max-width: 1600px) {
    .works-hero-row {grid-template-columns: 620px 1fr;gap: 60px;}
    .works-page .btn {font-size: 15px;}
    .works-filter-list {gap: 20px;}
    .hp-cta-inner {
        max-width: 990px;
    }
    .hp-cta-inner .text-big {
        font-size: 22px;
        max-width: 800px;
    }

    .portfolio-case {padding-bottom: 100px;}
    .portfolio-case__info {font-size: 16px;}
    .portfolio-case__row {grid-template-columns: 100px 1fr;}
    .portfolio-case__content {grid-template-columns: 480px 1fr;gap: 60px;}
    .portfolio-case__right {font-size: 16px;line-height: 1.7;}

}

@media (max-width: 1200px) {
    .works-hero-row {grid-template-columns: 1fr;gap: 24px;}
}

@media (max-width:1024px){
    .portfolio-case{
        padding:80px 0;
    }
    .portfolio-case__content{
        gap:60px;
        grid-template-columns:1fr;
    }
    .portfolio-case__title{
        font-size:42px;
    }
}

@media (max-width: 991px) {
    .hp-work-grid {grid-template-columns: repeat(2, 1fr);}
    .btn.works-filter-btn {flex-basis: calc(33.33% - 14px);}
}

@media (max-width: 767px) {
    .works-hero {padding-top: 110px;}
    .btn.works-filter-btn {flex-basis: 100%;white-space: nowrap;}
    .works-filter-list {flex-wrap: nowrap;overflow: auto;margin-right: -24px;}
    .hp-work-grid {grid-template-columns: repeat(1, 1fr);}

    .portfolio-case{
        padding: 0 0 60px;
    }

    .portfolio-case__slider{
        margin: 0 -24px 40px;
    }
    .portfolio-case .swiper-pagination {
        position: static;
        justify-content: center;
        width: 100%;
        margin-top: 10px;
    }

    .portfolio-case__content{
        gap:40px;
    }

    .portfolio-case__title{
        font-size:32px;
        margin-bottom:24px;
    }

    .portfolio-case__row{
        gap:4px;
    }

    .portfolio-case__buttons{
        flex-direction:column;
    }

    .portfolio-case__buttons a{
        width:100%;
    }

    .portfolio-case__right{
        font-size:16px;
        line-height:1.7;
    }

}