/* BLOCK: Image Tabs */

.block-image-tabs {
    position: relative;
    isolation: isolate;
}

.block-image-tabs .design-item--primary {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 53%;
    height: auto;
    z-index: -1;
    user-select: none;
    pointer-events: none;
}

.block-image-tabs .content-wrapper {
    display: flex;
    gap: 2.5rem;
    justify-content: space-between;
    /* align-items: flex-start; */
}

.block-image-tabs .image-wrapper {
    flex-basis: 40%;
    position: relative;
    isolation: isolate;
    aspect-ratio: 0.875;
    /* border-radius: 2.5rem;
    box-shadow: 0px 3.49px 43.59px 0px #070F3033;
    overflow: hidden; */
    align-self: center;
}

.block-image-tabs .image-wrapper .tab__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: 250ms ease;
    border-radius: 2.5rem;
    box-shadow: 0px 3.49px 43.59px 0px #070F3033;
}

.block-image-tabs .image-wrapper .tab__image:not(.active) {
    opacity: 0;
    z-index: -1;
    user-select: none;
    pointer-events: none;
}

.block-image-tabs .main-content {
    flex-basis: 49%;
}

.block-image-tabs .main-content .tabs {
    position: relative;
    padding-left: 3.375rem;
}

.block-image-tabs .main-content .tabs .slider {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 0.25rem;
    background-color: #F1EEFF;
    border-radius: 0.625rem;
    overflow: hidden;
}

.block-image-tabs.is-dark .main-content .tabs .slider {
    background-color: rgb(from var(--c-text-light) r g b / 0.2);
}

.block-image-tabs .main-content .tabs .slider-thumb {
    position: absolute;
    left: 0;
    right: 0;
    background-color: var(--c-primary);
    border-radius: 1.25rem;
    transition: 200ms ease-out;
    transition-property: height, top;
}

.block-image-tabs.is-dark .main-content .tabs .slider-thumb {
    background-color: var(--c-text-light);
}

.block-image-tabs .main-content .tab {
    display: block;
    padding-block: 2.5rem;
}

.block-image-tabs .main-content .ac-trigger {
    display: flex;
    align-items: center;
    gap: 1.5rem;
	cursor: pointer;
}

.block-image-tabs .main-content .ac-icon {
    width: 1.875rem;
    height: 1.875rem;
}

.block-image-tabs .main-content .ac-title {
    opacity: 0.3;
    transition: opacity 250ms ease;
}

.block-image-tabs .main-content .ac-content-inner {
	transition: padding 250ms ease;
}

.block-image-tabs .main-content .ac-state:checked ~ .ac-trigger .ac-title {
    opacity: 1;
}

.block-image-tabs .main-content .ac-state:checked ~ .ac-content .ac-content-inner {
    padding-top: 1.875rem;
    padding-bottom: 1rem;
}

.block-image-tabs .text-content:not(:last-child) {
    margin-bottom: 5rem;
}

.block-image-tabs .text-content > * {
    margin: 0;
}

.block-image-tabs .text-content > :not(:last-child) {
    margin-bottom: 1.25rem;
}

.block-image-tabs .text-content > :is(h1, h2, .h1, .h2):not(:last-child) {
    margin-bottom: 2.5rem;
}

@media screen and (width <= 1024px) {
    .block-image-tabs .image-wrapper,
    .block-image-tabs .main-content {
        flex-basis: 100%;
    }
    .block-image-tabs .text-content:not(:last-child) {
        margin-bottom: 2.5rem;
    }
    .block-image-tabs .main-content .tabs {
        padding-left: 2.125rem;
    }
    .block-image-tabs .main-content .tab {
        padding-block: 1.25rem;
    }
    .block-image-tabs .main-content .ac-trigger {
        gap: 0.9375rem;
    }
    .block-image-tabs .main-content .ac-state:checked ~ .ac-content .ac-content-inner {
        padding-top: 1rem;
    }
}

@media screen and (width <= 680px) {
    .block-image-tabs .design-item--primary {
        width: 100%;
    }
    .block-image-tabs .content-wrapper {
        flex-direction: column-reverse;
    }
    .block-image-tabs .image-wrapper {
        width: 100%;
        aspect-ratio: 0.9;
    }
}