/* Post Cards Grid */

.ab-post-cards-grid {
    container-type: inline-size;
    container-name: ab-4-col-post-cards-grid;
    position: relative;
}

.ab-post-cards-grid--list {
    display: grid;
    margin: 0;
    padding: 0;
}

.ab-post-cards-grid.col-4 .ab-post-cards-grid--list {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--wp--preset--spacing--32);
}

@container ab-4-col-post-cards-grid (max-width: 800px) {
    .ab-post-cards-grid.col-4 .ab-post-cards-grid--list {
        grid-template-columns: repeat(2, 1fr);
        row-gap: var(--wp--preset--spacing--64);
        max-width: 600px;
        margin: auto;
    }
}

@container ab-4-col-post-cards-grid (max-width: 400px) {
    .ab-post-cards-grid.col-4 .ab-post-cards-grid--list {
        grid-template-columns: 1fr;
        gap: var(--wp--preset--spacing--64);
        max-width: 400px;
    }
}

/* Latest Posts */

.ab-latest-posts {
    container-type: inline-size;
    container-name: ab-latest-posts;
    position: relative;
    padding-top: var(--wp--preset--spacing--96);
    padding-bottom: var(--wp--preset--spacing--96);
}

.ab-latest-posts::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    z-index: 5;
    width: 100%;
    height: 100%;
    background-color: var(--wp--preset--color--light-base-2);
    opacity: 0.6;
}

.ab-latest-posts--wrapper {
    position: relative;
    z-index: 10;
    display: grid;
    grid-template-columns: 1fr 3fr;
    column-gap: var(--wp--preset--spacing--96);
}

.ab-latest-posts--wrapper .swiper {
    position: relative;
    width: 100%;
}

/*
 * Handle innerblocks scroll animation
*/

.ab-latest-posts--inner-blocks {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity var(--wp--custom--medium-transition) ease-in-out,
        transform var(--wp--custom--medium-transition) ease-in-out;
}

.ab-latest-posts--inner-blocks.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/*
 * Handle post-cards scroll animation
*/

.ab-latest-posts .ab-post-card {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity var(--wp--custom--medium-transition) ease-in-out,
        transform var(--wp--custom--medium-transition) ease-in-out;
}

.ab-latest-posts .initially-visible:nth-child(1) .ab-post-card {
    transition-delay: 0.1s;
}

.ab-latest-posts .initially-visible:nth-child(2) .ab-post-card {
    transition-delay: 0.3s;
}

.ab-latest-posts .initially-visible:nth-child(3) .ab-post-card {
    transition-delay: 0.5s;
}

.ab-latest-posts .initially-visible .ab-post-card.is-visible {
    opacity: 1;
    transform: translateY(0);
}

@container ab-latest-posts (max-width: 980px) {
    .ab-latest-posts--wrapper {
        grid-template-columns: 1fr 1fr;
    }
}

@container ab-latest-posts (max-width: 570px) {
    .ab-latest-posts--wrapper {
        grid-template-columns: 1fr;
        row-gap: var(--wp--preset--spacing--48);
    }

    .ab-latest-posts--inner-blocks {
        text-align: center !important;
    }

    .ab-latest-posts--inner-blocks .wp-block-buttons {
        justify-content: center !important;
    }
}

/* Post Cards */

.ab-post-card {
    list-style: none;
    container-type: inline-size;
    container-name: ab-post-card;
}

.ab-post-card--image {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

.ab-post-card--content {
    padding-top: var(--wp--preset--spacing--24);
}

.ab-post-card--meta {
    margin: 0 0 var(--wp--preset--spacing--16);
}

.ab-post-card--date-device {
    display: none;
}

.ab-post-card--heading-link {
    text-decoration: none;
}

.ab-post-card--heading {
    margin: 0 0 var(--wp--preset--spacing--16);
    font-size: clamp(1rem, 0.9527rem + 0.2018vw, 1.125rem);
    font-weight: 600;
}

.ab-post-card--link {
    display: inline-flex;
    align-items: center;
    column-gap: 8px;
    font-weight: 700;
    color: var(--wp--preset--color--accent-1);
    text-decoration: none;
}

.ab-post-card--link-text {
    white-space: nowrap;
}

.ab-post-card--link-icon {
    width: 18px;
    transition: transform var(--wp--custom--fast-transition) ease-in-out;
}

.ab-post-card--link:hover .ab-post-card--link-icon {
    transform: translateX(8px);
}

.ab-post-card--link-icon-path {
    fill: var(--wp--preset--color--accent-1);
}

@container ab-post-card (max-width: 250px) {
    .ab-post-card--content {
        text-align: center;
    }

    .ab-post-card--date-desktop {
        display: none;
    }

    .ab-post-card--date-device {
        display: block;
    }
}

@media (max-width: 478px) {
    .ab-post-card--content {
        text-align: center;
    }

    .ab-post-card--date-desktop {
        display: none;
    }

    .ab-post-card--date-device {
        display: block;
    }
}

/* Featured Article */

.featured-article {
    container-type: inline-size;
    container-name: featured-article;
    margin-top: var(--wp--preset--spacing--96);
    margin-bottom: var(--wp--preset--spacing--96);
}

.featured-article--wrapper {
    display: flex;
    align-items: center;
    column-gap: var(--wp--preset--spacing--48);
}

.featured-article--image-container {
    flex: 1;
}

.featured-article--image {
    display: block;
    width: 100%;
    height: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

.featured-article--image.featured-article--image-contain {
    object-fit: contain;
    box-sizing: border-box;
    padding: var(--wp--preset--spacing--32);
}

.featured-article--content {
    flex: 1;
}

.featured-article--date-device {
    display: none;
}

.featured-article--heading-link {
    text-decoration: none;
}

@container featured-article (max-width: 680px) {
    .featured-article--wrapper {
        flex-direction: column;
        row-gap: var(--wp--preset--spacing--48);
    }

    .featured-article--content {
        text-align: center;
    }

    .featured-article--image.featured-article--image-contain {
        padding: unset;
    }
}

/* Terms List */

.terms-list {
    container-type: inline-size;
    container-name: terms-list;
    margin-top: var(--wp--preset--spacing--96);
    margin-bottom: var(--wp--preset--spacing--96);
}

.terms-list--pills {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
    gap: var(--wp--preset--spacing--8);
    justify-content: center;
}

.terms-list-centered .terms-list--pills {
    justify-content: center;
}

.terms-list--pill {
    position: relative;
}

.terms-list:not(.terms-list-soft) .terms-list--pill::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    display: none;
    width: 100%;
    height: 4px;
    background-color: var(--wp--preset--color--accent-1);
    border-radius: var(--wp--custom--border-radius-full);
}

.terms-list:not(.terms-list-soft) .terms-list--pill.active::after {
    display: block;
}

.terms-list--pill-link {
    display: block;
    padding: var(--wp--preset--spacing--8) var(--wp--preset--spacing--16);
    font-weight: 600;
    text-wrap: nowrap;
    border-radius: var(--wp--custom--border-radius-small);
    background-color: var(--wp--preset--color--light-base-2);
    text-decoration: none;
}

.terms-list-soft .terms-list--pill-link {
    background-color: var(--wp--preset--color--white);
    border-radius: var(--wp--custom--border-radius-full);
    color: var(--wp--preset--color--accent-1);
    transition: background-color var(--wp--custom--fast-transition) ease-in-out,
        color var(--wp--custom--fast-transition) ease-in-out;
}

.terms-list-soft .terms-list--pill.active .terms-list--pill-link {
    background-color: var(--wp--preset--color--accent-1);
    border-radius: var(--wp--custom--border-radius-full);
    color: var(--wp--preset--color--white);
}

.terms-list--dropdown {
    display: none;
}

.terms-list--dropdown-select-box {
    position: relative;
    display: block;
    width: 100%;
    padding: var(--wp--preset--spacing--8) var(--wp--preset--spacing--64)
        var(--wp--preset--spacing--8) var(--wp--preset--spacing--16);
    border-radius: var(--wp--custom--border-radius-small);
    background-color: var(--wp--preset--color--light-base-2);
    font-weight: 600;
    text-wrap: nowrap;
    text-align: center;
    cursor: pointer;
}

.terms-list-soft .terms-list--dropdown-select-box {
    border-radius: var(--wp--custom--border-radius-full);
    background-color: var(--wp--preset--color--accent-1);
    color: var(--wp--preset--color--white);
}

.terms-list:not(.terms-list-soft) .terms-list--dropdown-select-box::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 4px;
    background-color: var(--wp--preset--color--accent-1);
    border-radius: var(--wp--custom--border-radius-full);
}

.terms-list--dropdown-select-box-text {
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0;
}

.terms-list--dropdown-select-box-icon {
    position: absolute;
    top: 50%;
    right: var(--wp--preset--spacing--16);
    transform: translateY(-50%);
    width: 18px;
    height: 10px;
    transition: transform var(--wp--custom--fast-transition) ease-in-out;
}

.terms-list:has(.terms-list--dropdown-list.open)
    .terms-list--dropdown-select-box-icon {
    transform: translateY(-50%) rotate(180deg);
}

.terms-list--dropdown-select-box-path {
    fill: var(--wp--preset--color--dark-base-1);
}

.terms-list-soft .terms-list--dropdown-select-box-path {
    fill: var(--wp--preset--color--white);
}

.terms-list--dropdown-list {
    margin: var(--wp--preset--spacing--8) 0 0;
    padding: var(--wp--preset--spacing--8) 0;
    list-style: none;
    background-color: var(--wp--preset--color--light-base-2);
    border-radius: var(--wp--custom--border-radius-small);
    text-align: center;
    display: none;
}

.terms-list--dropdown-list.open {
    display: block;
}

.terms-list--dropdown-list-item {
    padding: var(--wp--preset--spacing--16);
}

@container terms-list (max-width: 600px) {
    .terms-list--pills {
        display: none;
    }

    .terms-list--dropdown {
        display: block;
    }
}

/* Pagination */

.ab-pagination {
    margin-top: var(--wp--preset--spacing--64);
}

.ab-pagination .nav-links {
    display: flex;
    align-items: center;
    justify-content: center;
    column-gap: var(--wp--preset--spacing--8);
}

.ab-pagination .page-numbers {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 10px 8px 8px 8px;
    border-radius: var(--wp--custom--border-radius-full);
    text-decoration: none;
}

.ab-pagination .page-numbers.current {
    background-color: var(--wp--preset--color--accent-1);
    color: var(--wp--preset--color--white);
}

.ab-pagination a.page-numbers:hover {
    background-color: var(--wp--preset--color--light-base-1);
}

.ab-pagination .page-numbers.prev {
    padding: 8px 10px 8px 8px;
}

.ab-pagination .page-numbers.next {
    padding: 8px 8px 8px 10px;
}

.ab-pagination--icon {
    width: 9px;
    height: 16px;
}

.ab-pagination--icon-path {
    fill: var(--wp--preset--color--dark-base-1);
}

/* Profile Card */

.profile-card {
    container-type: inline-size;
    container-name: profile-card;
}

.profile-card--image {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: var(--wp--custom--border-radius-full);
}

.profile-card--content {
    padding-top: var(--wp--preset--spacing--48);
}

.profile-card--heading-link {
    text-decoration: none;
}

.profile-card--heading {
    margin: 0;
    font-size: var(--wp--preset--font-size--20);
    font-weight: 600;
}

.profile-card--job-title {
    margin: 0 0 var(--wp--preset--spacing--24);
}

.profile-card--contact-methods {
    list-style: none;
    display: flex;
    flex-direction: column;
    row-gap: var(--wp--preset--spacing--8);
    margin: 0;
    padding: 0;
}

.profile-card--contact-method-link {
    display: flex;
    align-items: center;
    column-gap: var(--wp--preset--spacing--8);
    text-decoration: none;
}

.profile-card--contact-method-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    background-color: var(
        --service-accent-color,
        --wp--preset--color--accent-1
    );
    border-radius: var(--wp--custom--border-radius-full);
}

.profile-card--contact-method-icon-svg {
    width: 100%;
    max-width: 1rem;
}

.profile-card--contact-method-icon-path {
    fill: var(--wp--preset--color--white);
}

.profile-card--contact-method-text {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
}

/* Modal */

.ab-modal {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    display: flex; /* Changed from 'none' to 'flex' for alignment */
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: unset !important;
    height: 100%;
    margin: 0 !important;
    padding: 0 var(--wp--preset--spacing--global);
}

.ab-modal--overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--wp--preset--color--dark-base-1);
    opacity: 0.9;
}

.ab-modal--modal {
    position: relative;
    background-color: var(--wp--preset--color--light-base-2);
    padding: var(--wp--preset--spacing--64)
        clamp(1rem, -1.6488rem + 11.3017vw, 8rem);
    max-width: 1000px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    z-index: 1001;
}

.ab-modal--close {
    position: absolute;
    top: clamp(1rem, 0.6216rem + 1.6145vw, 2rem);
    right: clamp(1rem, 0.6216rem + 1.6145vw, 2rem);
    width: 1.5rem;
    height: 1.5rem;
    padding: 0.25rem;
    background-color: transparent;
    border: none;
    cursor: pointer;
}

.ab-modal--close-icon {
    width: 100%;
}

.ab-modal--close-icon-path {
    fill: var(--wp--preset--color--dark-base-1);
}

.ab-modal--spinner {
    border: 4px solid rgba(0, 0, 0, 0.1);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border-left-color: var(--wp--preset--color--accent-1);
    animation: spin 1s ease infinite;
    margin: 50px auto;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* Team Member Modal */

#team-member-modal {
    container-type: inline-size;
    container-name: team-member-modal;
}

.team-member-modal--image {
    display: block;
    width: 200px;
    height: 200px;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    margin-left: auto;
    margin-right: auto;
    border-radius: var(--wp--custom--border-radius-full);
}

.team-member-modal--name {
    margin-top: var(--wp--preset--spacing--24);
    margin-bottom: 0;
    text-align: center;
}

.team-member-modal--job-title {
    margin: 0;
    text-align: center;
}

.team-member-modal--contact-methods {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    column-gap: var(--wp--preset--spacing--24);
    row-gap: var(--wp--preset--spacing--16);
    width: 100%;
    margin-top: var(--wp--preset--spacing--24);
}

.team-member-modal--contact-method {
    display: flex;
    align-items: center;
    gap: var(--wp--preset--spacing--8);
}

.team-member-modal--contact-method-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    background-color: var(--wp--preset--color--accent-1);
    border-radius: var(--wp--custom--border-radius-full);
}

.team-member-modal--contact-method-icon-svg {
    width: 100%;
    max-width: 1rem;
}

.team-member-modal--contact-method-icon-path {
    fill: var(--wp--preset--color--white);
}

.team-member-modal--contact-method-text {
    display: block;
}

.team-member-modal--content {
    margin-top: var(--wp--preset--spacing--32);
    margin-bottom: 0;
    text-align: center;
}

@container team-member-modal (max-width: 400px) {
    .team-member-modal--contact-methods {
        flex-direction: column;
    }

    .team-member-modal--contact-method {
        width: 100%;
    }

    .team-member-modal--contact-method-text {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        width: 100%;
    }
}

/* Swiper Navigation */

.has-ab-swiper-navigation {
    padding-bottom: var(--wp--preset--spacing--96) !important;
}

.has-ab-swiper-navigation:has(.swiper-button-lock),
.has-ab-swiper-navigation:has(.swiper-pagination-lock) {
    padding-bottom: 0 !important;
}

.ab-swiper-navigation {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 10;
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
    column-gap: var(--wp--preset--spacing--48);
}

.ab-swiper-navigation .ab-swiper-btn {
    flex-shrink: 0;
}

/* Swiper Nav Buttons */

.ab-swiper-btn {
    z-index: 5;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 2.25rem;
    height: 2.25rem;
    background-color: var(--wp--preset--color--white);
    border-radius: var(--wp--custom--border-radius-full);
    cursor: pointer;
}

.has-ab-swiper-navigation:has(.swiper-button-lock) .ab-swiper-btn,
.has-ab-swiper-navigation:has(.swiper-pagination-lock) .ab-swiper-btn {
    display: none !important;
}

.ab-swiper-btn--icon {
    height: var(--wp--preset--spacing--16);
}

.ab-swiper-btn-prev .ab-swiper-btn--icon {
    margin-right: 2px;
}

.ab-swiper-btn-next .ab-swiper-btn--icon {
    margin-left: 2px;
}

.ab-swiper-btn--icon-path {
    fill: var(--wp--preset--color--accent-1);
    fill-rule: evenodd;
}

/* Swiper Pagination */

.ab-swiper-pagination {
    width: unset !important;
}

.ab-swiper-pagination--bullet {
    width: 4px !important;
    height: 4px !important;
    background: var(--wp--preset--color--dark-base-1) !important;
    border-radius: var(--wp--custom--border-radius-full) !important;
    margin: 0 3px !important;
    opacity: 1 !important;
    transition: width var(--wp--custom--fast-transition) ease-in-out,
        background var(--wp--custom--fast-transition) ease-in-out;
}

.ab-swiper-pagination--bullet.swiper-pagination-bullet-active {
    background: var(--wp--preset--color--accent-1) !important;
    width: 2.5rem !important;
}

/* Text and Image Card */

.text-image-card {
    container-type: inline-size;
    container-name: text-image-card;
}

.text-image-card--content {
    display: flex !important;
    column-gap: var(--wp--preset--spacing--32);
    align-items: center;
    padding: var(--wp--preset--spacing--32);
    background-color: var(--wp--preset--color--white);
    border-radius: var(--wp--custom--border-radius-medium);
}

.text-image-card--image-wrapper,
.text-image-card--text-wrapper {
    flex: 1;
}

.text-image-card--text {
    margin: 0;
}

.text-image-card--image {
    display: block;
    width: 100%;
    height: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: var(--wp--custom--border-radius-small);
}

@container text-image-card (max-width: 400px) {
    .text-image-card--content {
        flex-direction: column-reverse;
        row-gap: var(--wp--preset--spacing--32);
    }
}

/* Icon Card */

.icon-card {
    container-type: inline-size;
    container-name: icon-card;
}

.icon-card--content {
    display: flex;
    flex-direction: column;
    align-items: center;
    row-gap: var(--wp--preset--spacing--24);
}

.icon-card--image-wrapper {
    width: clamp(6.25rem, 5.0675rem + 5.0454vw, 9.375rem);
}

.icon-card--icon-border {
    padding: 20%;
    border: 2px solid var(--wp--preset--color--white);
    border-radius: var(--wp--custom--border-radius-full);
}

.icon-card--image {
    display: block;
    width: 100%;
    height: 100%;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    border-radius: var(--wp--custom--border-radius-small);
}

.icon-card--text-wrapper {
    text-align: center;
}

.icon-card--text {
    margin: 0;
}

/* Card Carousel */

.card-carousel {
    container-type: inline-size;
    container-name: card-carousel;
    border-radius: var(--wp--custom--border-radius-medium);
}

.card-carousel.has-ab-swiper-navigation {
    padding-left: 18px !important;
    padding-right: 18px !important;
}

.card-carousel > .card-carousel--swiper-btn {
    position: absolute;
    top: calc(50% - (var(--wp--preset--spacing--96) / 2));
    transform: translateY(-50%);
    border: 1px solid var(--wp--preset--color--light-base-1);
}

.card-carousel > .card-carousel--swiper-btn-prev {
    left: 0;
}

.card-carousel > .card-carousel--swiper-btn-next {
    right: 0;
}

.card-carousel .ab-swiper-navigation .card-carousel--swiper-btn {
    display: none;
}

@container card-carousel (max-width: 550px) {
    .card-carousel > .card-carousel--swiper-btn {
        display: none;
    }

    .card-carousel .ab-swiper-navigation .card-carousel--swiper-btn {
        display: flex;
    }
}

/* Case Study Card */

.case-study-card {
    text-align: center;
}

.case-study-card--image-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    box-sizing: border-box;
    padding: var(--wp--preset--spacing--24);
    aspect-ratio: 1 / 1;
    background-color: var(--wp--preset--color--white);
    border-radius: var(--wp--custom--border-radius-full);
}

.case-study-card--image {
    display: block;
    width: 100%;
}

.case-study-card--heading-link {
    text-decoration: none;
}

.case-study-card--heading {
    margin-top: var(--wp--preset--spacing--24);
    font-size: clamp(1rem, 0.9527rem + 0.2018vw, 1.125rem);
    font-weight: 600;
}

/* States */

.has-blurred-background {
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

.no-shrink {
    flex-shrink: 0;
}
