/*
Block: Tabs
Last updated: 17/08/2025
*/

:root body .wp-block-acf-tabs {
	background-color: transparent !important;
	overflow: hidden;
}

.wp-block-acf-tabs:not(.is-style-media-on-right) {
	border-bottom-left-radius: 0 !important;
}


.wp-block-acf-tabs.is-style-media-on-right {
	border-bottom-right-radius: 0 !important;
}

:root body .editor-styles-wrapper .wp-block-acf-tabs:after {
	content: '';
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 1;
}

.wp-block-acf-tabs .tabs-container {
	position: relative;
}

.wp-block-acf-tabs .tabs-container:after {
	content: '';
	width: calc(50% + (var(--gap-width) / 2));
	height: 100%;
	position: absolute;
	right: 0;
	top: 0;
}

.wp-block-acf-tabs .the-tabs {
	width: calc(50% - (var(--gap-width) / 2));
	margin: 0;
    margin-left: auto;
	height: 140px;
}

.wp-block-acf-tabs span.heading-side {
    position: absolute;
    bottom: 0;
	left: 0;
    display: flex;
    aspect-ratio: 1;
    width: 250px;
    justify-content: flex-start;
    align-items: flex-end;
	font-size: .85em;
}

.wp-block-acf-tabs .content-wrap {
    display: flex;
    gap: var(--gap-width);
    justify-content: flex-end;
}

.wp-block-acf-tabs .swiper.content-area .content-inner {
    padding-top: var(--gap-width);
	padding-bottom: var(--gap-width);
	width: calc(50% - (var(--gap-width) / 2));
}

.wp-block-acf-tabs .swiper-slide.content {
	height: unset;
}

.wp-block-acf-tabs .swiper.content-area .content-inner h1,
.wp-block-acf-tabs .swiper.content-area .content-inner h2,
.wp-block-acf-tabs .swiper.content-area .content-inner h3,
.wp-block-acf-tabs .swiper.content-area .content-inner h4,
.wp-block-acf-tabs .swiper.content-area .content-inner h5,
.wp-block-acf-tabs .swiper.content-area .content-inner h6 {
	margin-top: 0;
}

.wp-block-acf-tabs .swiper.content-area {
	overflow: visible;
}

.wp-block-acf-tabs .swiper.content-area ul li:not(:last-child) {
	margin-bottom: 1.15em;
}

.wp-block-acf-tabs.has-background .the-tabs,
.wp-block-acf-tabs.has-background .content-inner {
	padding-right: var(--gap-width);
}

.wp-block-acf-tabs .tabs-image {
    width: calc(50% - (var(--gap-width) / 2));
    margin-top: -140px;
    object-fit: cover;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 170px 100%, 170px calc(100% - 170px), 0 calc(100% - 170px));
    display: block;
    height: calc(100% + 140px);
    position: absolute;
	left: 0;
	top: 0;
}

.wp-block-acf-tabs .swiper-slide.tab {
	cursor: pointer;
	display: flex;
    flex-direction: column;
    justify-content: flex-end;
	align-items: center;
	gap: .75em;
	padding-bottom: 1.25em;
}

.wp-block-acf-tabs .swiper-slide.tab:after {
	content:'';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	border-bottom: 2px solid currentColor;
	opacity: .2;
}

.wp-block-acf-tabs .swiper-slide.tab > * {
	opacity: .6;
	transition: var(--time);
}

.wp-block-acf-tabs .swiper-slide.tab * {
	pointer-events: none;
}

.wp-block-acf-tabs .swiper-slide.tab.swiper-slide-thumb-active > * {
	opacity: 1 !important;
}

.wp-block-acf-tabs .swiper-slide.tab:hover > * {
	opacity: .8;
}

.wp-block-acf-tabs .swiper-slide.tab.swiper-slide-thumb-active:after {
	border-bottom: 4px solid currentColor;
	opacity: 1;
}

.wp-block-acf-tabs .swiper-slide.tab p {
	margin-top: 0;
	margin-bottom: 0;
}


.wp-block-acf-tabs .swiper-slide.tab .material-symbols {
	font-size: 1.75em;
}

.wp-block-acf-tabs.is-style-media-on-right .the-tabs {
	margin-right: auto;
    margin-left: 0;
}

.wp-block-acf-tabs.is-style-media-on-right .content-wrap {
    justify-content: flex-start;
}

.wp-block-acf-tabs.is-style-media-on-right .tabs-image {
    left: unset;
    top: 0;
	right: 0;
}

.wp-block-acf-tabs.is-style-media-on-right .tabs-container:after {
    right: unset;
    top: 0;
	left: 0;
}

.wp-block-acf-tabs.has-background.is-style-media-on-right .the-tabs,
.wp-block-acf-tabs.has-background.is-style-media-on-right .content-inner {
    padding-left: var(--gap-width);
	padding-right: 0;
}

.wp-block-acf-tabs.is-style-media-on-right span.heading-side {
    left: unset;
    right: 0;
    justify-content: flex-end;
}

.wp-block-acf-tabs.is-style-media-on-right .tabs-image {
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 170px), calc(100% - 170px) calc(100% - 170px), calc(100% - 170px) 100%, 0 100%);
	
}

.wp-block-acf-tabs .tabs-image.contain {
	object-fit: contain;
	background-color: var(--wp--preset--color--very-light-grey);
	padding: 40px;
	clip-path: unset;
}

.wp-block-acf-tabs .tabs-image.contain + .heading-side {
	display: none;
}

/* Accordion */

.wp-block-acf-tabs .accordion-heading {
	cursor: pointer;
	width: 100%;
	transition: var(--time);
	display: block;
}

.wp-block-acf-tabs .items-wrap.accordion .material-symbols {
	opacity: .6;
	padding-right: .5em;
}

.wp-block-acf-tabs .items-wrap {
	row-gap: 0 !important;
}

.wp-block-acf-tabs .accordion-heading > * {
	margin: 0 !important;
	margin-bottom: 0 !important;
	padding-right: var(--gap-width);
	position: relative;
	z-index: 1;
	display: flex;
    align-items: center;
}

.wp-block-acf-tabs .item {
	height: min-content;
	position: relative;
}

.wp-block-acf-tabs .accordion-heading:before {
	content: '';
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	z-index: 0;
}

.wp-block-acf-tabs .accordion-heading:after {
	content: '';
	width: 100%;
	height: 0px;
	border-bottom: 2px solid;
	position: absolute;
	bottom: 0;
	left: 0;
    opacity: .2;
    transition: var(--time);
}

.wp-block-acf-tabs .accordion-heading.active:after {
	border-bottom: 4px solid;
    opacity: 1;
}

.wp-block-acf-tabs .accordion-heading > *:before,
.wp-block-acf-tabs .accordion-heading > *:after {
	content: '';
	width: 1px;
	height: 20px;
	background-color: currentColor;
	position: absolute;
	right: .5em;
	top: 50%;
	transform: translateY(-50%);
	transition: all var(--time); ease-out;
}

.wp-block-acf-tabs .accordion-heading > *:before {
	transform: translateY(-50%) rotate(90deg);
}

.wp-block-acf-tabs .accordion-heading:hover > *:after {
	transform: translateY(-50%) rotate(90deg);
}

.wp-block-acf-tabs .accordion-heading:hover > *:before {
	transform: translateY(-50%) rotate(180deg);
}

.wp-block-acf-tabs .accordion-heading.active > *:before {
	transform: translateY(-50%) rotate(270deg);
	opacity: 1;
}

.wp-block-acf-tabs .accordion-heading.active > *:after {
	transform: translateY(-50%) rotate(180deg);
	opacity: 0;
}

.wp-block-acf-tabs .accordion-panel {
	max-height: 0;
	overflow: hidden;
	transition: max-height var(--time) ease-out;
	position: relative;
	padding-bottom: 0;
}

.wp-block-acf-tabs .accordion-heading.active + .accordion-panel {
	padding-bottom: calc(var(--gap-width) / 2);
}

.wp-block-acf-tabs .accordion-panel > *:first-child {
	margin-top: 0;
}

.wp-block-acf-tabs .accordion-heading {
	padding: calc(var(--gap-width) / 2) 0;
}

.wp-block-acf-tabs.has-background .accordion-heading {
	padding: calc(var(--gap-width) / 2) calc(var(--gap-width) / 2);
}

.wp-block-acf-tabs.has-background .accordion-panel {
	padding: 0 calc(var(--gap-width) / 2);
}