/*** ---------- General ---------- ***/
.wpb-block {
    .wpb-block__header { --gap: clamp(2.4rem, 3.2vw, 4.8rem); padding-bottom: clamp(2.4rem, 3.2vw, 4.8rem); 
        .wpb-text { --max-width: clamp(50rem, 50vw, 86rem); max-width: var(--max-width); }
        &:has(.btn-group) .container { display: flex; justify-content: space-between; align-items: end; flex-wrap: wrap; gap: var(--gap); }
    }
}



/*** ---------- Header ---------- ***/
.wpb-hero {
    input { color: var(--clr-text-light); }

    .wpb-hero__body { position: relative; z-index: 2; }
    .wpb-hero__image { position: absolute; top: 0; left: 0; width: 100%; height: 100%;
        figure { width: 100%; height: 100%;
            img { width: 100%; height: 100%; object-fit: cover; }
        }
    }

    .wpb-hero__toolbar { display: flex; align-items: center; gap: 1.6rem; padding-bottom: 3.2rem; 
        .btn { white-space: nowrap; }
        .wpb-breadcrumbs { margin: 0; --excerpt-line-clamp: 1; display: -webkit-box; -webkit-line-clamp: var(--excerpt-line-clamp); -webkit-box-orient: vertical; overflow: hidden; 
            > span > span:not(.breadcrumb_last) { opacity: .65; }
        }
    }

    /*** Subpage ***/
    &.wpb-hero--subpage:is(.wpb-bg-clr--primary, .wpb-bg-clr--dark, .has-background-image) { overflow: hidden; 
        &::before { --w: 74rem; --h: 22rem; content: ''; position: absolute; left: calc(-1 * var(--w) / 4); bottom: calc(-1 * var(--h) / 12); background: var(--bg-asset) no-repeat center / contain; width: var(--w); height: var(--h); opacity: .6; z-index: 1; pointer-events: none; }
        .container { z-index: 2; }
        .wpb-breadcrumbs { --home-hover-bg-clr: var(--clr-dark); }

        &:is(.wpb-bg-clr--dark, .has-background-image)::before { filter: invert(1); }

        @media (min-width: 992px) {
            &::before { --w: 102rem; --h: 36rem; }
        }
    }

    /*** Blog header ***/
    &.wpb-hero--blog .wpb-hero__body { --inline-spacing: var(--pt); min-height: var(--mh, 48rem); padding-bottom: 3.2rem; overflow: hidden; display: flex; align-items: end;
        .wpb-text { position: relative; z-index: 99; }

        @media (min-width: 576px) { --mh: min(64rem, 50vh); border-radius: var(--radius--large); }
        @media (min-width: 992px) { --mh: min(80rem, 65vh); }
    }
}

/*** ---------- Block: Blogs ---------- ***/
.wpb-block--blogs { --gap: clamp(1.6rem, 2vw, 2.4rem); --gtc: repeat(auto-fill, minmax(clamp(26rem, 28vw, 36rem), 1fr)); 
    .wpb-block__body .container { display: grid; grid-template-columns: var(--gtc); gap: var(--gap, 1.6rem); }
}

/*** ---------- Block: Categories ---------- ***/
.wpb-block--categories { --gap: 1.2rem; --gtc: repeat(auto-fill, minmax(clamp(24rem, 30vw, 36rem), 1fr)); 
    .wpb-block__body .container { display: grid; grid-template-columns: var(--gtc); gap: var(--gap, 1.6rem); }
}

/*** ---------- Text & video ---------- ***/
.wpb-block--text-video {
    .container { column-gap: 2rem; row-gap: 2rem; }
    .wpb-ratio { --br: 1rem;
        iframe, img, video { border-radius: var(--br); }
        .wpb-video__play { border: none; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 5; cursor: pointer; transition: opacity var(--ts-duration) ease;
            img { object-fit: cover; width: 100%; height: 100%; }
            .wpb-video__play-icon { --size: 6rem; --icon-size: 2rem; --bg-clr: var(--clr-primary); --clr: #fff; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: grid; place-items: center; z-index: 2; background-color: var(--bg-clr); border-radius: 50%; width: var(--size); min-width: var(--size); height: var(--size); transition: .25s ease;
                i { color: var(--clr); font-size: var(--icon-size); }
            }
        }
        &:hover .wpb-video__play .wpb-video__play-icon { transform: translate(-50%, -50%) scale(1.1); }
    }

    @media (min-width: 992px) { .container { column-gap: 3.2rem; } }
    @media (min-width: 1200px) { .container { column-gap: 6.4rem; } }
    @media (min-width: 1400px) { .container { column-gap: 9.8rem; } }
}


/* ---------- Block: Search ---------- */
.wpb-block--search { --gc: 1; --gap: 1.6rem; 
    .wpb-block__body .container { display: grid; grid-template-columns: repeat(var(--gc), minmax(0, 1fr)); gap: var(--gap, 1.6rem); }

    @media (min-width: 576px) { --gc: 2; }
    @media (min-width: 992px) { --gc: 3; }
    @media (min-width: 1200px) { --gc: 4; }
}