/* TABS

01	(DEPRECATED) GENERAL
02	(DEPRECATED) HIGHLIGHTED TABS
03  NEW TABS


*/

/* -----------------------------------------------------------------------
	01	GENERAL
/* ---------------------------------------------------------------------*/

.wfbb_tabs {
    display: grid;
    grid-gap: var(--grid-gap);
    grid-template-columns: var(--grid-columns);
}

.wfbb_tabs .paragraph {
    grid-column: 2 / 12;
}

.wfbb_tabs .paragraph.highlighted-design {
    grid-column: 1 / 13;
}

.tabtextwrapper {
    display: flex;
    margin-bottom: 2rem;
    position: relative;
    z-index: 3;
}

.tabtextwrapper > .tabtext {
    font-size: var(--font-size-h4);
    font-weight: 700;
    padding: .5rem 1rem;
    margin: 0 .85rem;
    position: relative;
    cursor: pointer;
    overflow: hidden;
}

.tabtextwrapper > .tabtext:first-child {
    margin-left: 0;
}

.tabtextwrapper > .tabtext:last-child {
    margin-right: 0;
}

.tabtextwrapper > .tabtext:after {
    display: block;
    content: '';
    height: 4px;
    width: 100%;
    background: var(--color-primary);
    position: absolute;
    left: 0;
    bottom: 0;
    border-radius: 5px;
    transform: translateX(-101%);
    transition: all ease-in-out .3s;
}

.tabtextwrapper > .tabtext.active:after {
    transform: translateX(0);
}

.tab {
    display: none;
}

.tab.active {
    display: block;
}

.paragraph--type--wfbb-tabs:not(.highlighted-design) .field--name-field-image-wfbb-tab-element {
    position: relative;
    float: right;
    max-width: 40%;
    border-radius: var(--border-radius);
    overflow: hidden;
}


@media (max-width: 767px) {

    .wfbb_tabs .paragraph {
        grid-column: span 12;
    }

}

/* -----------------------------------------------------------------------
	02	HIGHLIGHTED TABS
/* ---------------------------------------------------------------------*/

.paragraph--type--wfbb-tabs.highlighted-design {
    background: var(--color-grey-light);
    border-radius: var(--border-radius);
    padding: var(--section-inner-side-padding);
    position: relative;
    overflow: hidden;
}

.wfbb_tabs .paragraph.highlighted-design .tabtextwrapper {
    justify-content: center;
}

.paragraph--type--wfbb-tabs.highlighted-design .tabtextwrapper > .tabtext {
    font-size: var(--font-size-h3)
}

.paragraph--type--wfbb-tabs.highlighted-design:before {
    display: block;
    content: '';
    width: 100%;
    height: 10rem;
    position: absolute;
    top: 0;
    left: 0;
    background: linear-gradient(0deg, rgba(235,235,235,0) 0%, rgba(235,235,235,1) 100%);
    z-index: 1;
}

.paragraph--type--wfbb-tabs.highlighted-design>input:checked+label+.paragraph--type--wfbb-tab-element {
    display: grid;
    grid-gap: var(--grid-gap);
    grid-template-columns: var(--grid-columns);
}

.paragraph--type--wfbb-tabs.highlighted-design .field--name-field-image-wfbb-tab-element {
    position: absolute;
    height: 100%;
    top: 0;
    right: 0;
    width: 80%;
}

.paragraph--type--wfbb-tabs.highlighted-design .field--name-field-image-wfbb-tab-element div:not(.field--name-field-caption-image) {
    width: 100%;
    height: 100%;
}

.paragraph--type--wfbb-tabs.highlighted-design .field--name-field-image-wfbb-tab-element img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .7;
}

.paragraph--type--wfbb-tabs.highlighted-design .field--name-field-image-wfbb-tab-element:before {
    display: block;
    content: '';
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    width: 80%;
    background: linear-gradient(90deg, rgba(235,235,235,1) 0%, rgba(235,235,235,0) 100%);
    z-index: 1;
}

.darkmode .paragraph--type--wfbb-tabs.highlighted-design .field--name-field-image-wfbb-tab-element:before {
    background: linear-gradient(90deg, rgb(51, 51, 51) 0%, rgba(235,235,235,0) 100%);
}

.paragraph--type--wfbb-tabs.highlighted-design .wfbb-tabs-text {
    grid-column: span 6;
    padding: var(--section-gap) 0;
    position: relative;
    z-index: 2;
}

.wfbb_tabs .paragraph.highlighted-design .paragraph {
    max-width: 50%;
}

.wfbb_tabs .paragraph.highlighted-design .field--name-field-title-wfbb-tab-element:after {
    display: block;
    content: '';
    height: 3px;
    width: 40%;
    background: var(--color-primary);
    border-radius: 3px;
    margin: 2rem 0;
}

.paragraph--type--wfbb-tabs.highlighted-design .field--name-field-caption-image {
    right: 1rem;
    left: initial;
}

.node--type-wfbb-thematic-focus .field--name-field-ements-wfbb-page > .field__item > .paragraph.paragraph--type--wfbb-tabs.highlighted-design {
    grid-column: 1 / 13;
}

@media (max-width: 991px) {

    .wfbb_tabs .paragraph.highlighted-design .paragraph {
        max-width: 100%;
        padding-top: 5rem;
    }

    .paragraph--type--wfbb-tabs.highlighted-design .field--name-field-image-wfbb-tab-element {
        position: absolute;
        height: auto;
        top: 0;
        right: 0;
        width: 100%;
        padding-top: 66.66%;
    }

    .paragraph--type--wfbb-tabs.highlighted-design .field--name-field-image-wfbb-tab-element:before {
        display: block;
        content: '';
        height: 60%;
        position: absolute;
        top: unset;
        bottom: 0;
        left: 0;
        width: 100%;
        background: linear-gradient(0deg,rgba(235,235,235,1) 0%,rgba(235,235,235,0) 100%);
        z-index: 1;
    }

    .paragraph--type--wfbb-tabs.highlighted-design .field--name-field-image-wfbb-tab-element img {
        position: absolute;
        top: 0;
        left: 0;
    }

}

.paragraph--type--wfbb-tab-element .contextual {
    height: auto !important;
    width: auto !important;
}

/* -----------------------------------------------------------------------
	03	NEW TABS
/* ---------------------------------------------------------------------*/

.field__item.tabs {
    display: grid;
    grid-gap: var(--grid-gap);
    grid-template-columns: var(--grid-columns);
}

.field__item.tabs .paragraph.tabs {
    grid-column: 3 / 11; /* Reduces the width */
    grid-column: 1 / 13; /* Sets full width */
    /*background: var(--color-grey-light);*/
    border-radius: var(--border-radius);
    padding: var(--section-inner-side-padding);
    position: relative;
    overflow: hidden;
    display: grid;
    grid-gap: var(--grid-gap);
    grid-template-columns: var(--grid-columns);
}


.field__item.tabs .paragraph.tabs.highlighted {
    background: var(--color-grey-light);
}

.field__item.tabs .paragraph.tabs .tabs-header {
    display: flex;
    position: relative;
    z-index: 3;
    grid-column: 1 / 13;
}

[role="tabpanel"].is-hidden {
    display: none;
}

.paragraph.tabs .tabs-header button {
    background: transparent;
    border: unset;
    font-size: var(--font-size-h3);
    overflow: hidden;
    margin: 0 2rem;
    padding: unset;
    font-family: inherit;
}

.paragraph.tabs .tabs-header button span {
    word-wrap: break-word;
    hyphens: auto;
}

.paragraph.tabs .tabs-header button[aria-selected="true"] span::after {
    transform: translateX(0);
}

.paragraph.tabs .tabs-header button span::after {
    content: '';
    display: inline-block;
    height: 4px;
    width: 100%;
    background: var(--color-primary);
    position: relative;
    left: 0;
    bottom: 0;
    top: -20px;
    border-radius: 5px;
    transform: translateX(-101%);
    transition: all ease-in-out .3s;
}
.paragraph.tabs div[role="tabpanel"] {
    grid-column: span 11;
}

.paragraph.tabs div[role="tabpanel"]:not(.is-hidden) .tab-content {
    height: auto;
}

.paragraph.tabs div[role="tabpanel"].has-image:not(.is-hidden) .tab-content {
    position: relative;
    z-index: 2;
    width: 50%;
}

.field__item.tabs .paragraph.tabs [role="tabpanel"].has-image::before {
    display: block;
    content: '';
    width: 100%;
    height: 14rem;
    position: absolute;
    top: 0;
    left: 0;
    background: linear-gradient(0deg, rgba(235, 235, 235, 0) 0%, #ebebeb 100%);
    z-index: 1;
}

.field__item.tabs .paragraph.tabs .tab.has-image {
    max-width: 50%;
}

.field__item.tabs .paragraph.tabs [role="tabpanel"] .tab-bg-image {
    position: absolute;
    height: 100%;
    top: 0;
    right: 0;
    width: 80%;
}

.field__item.tabs .paragraph.tabs [role="tabpanel"] .tab-bg-image::before {
    display: block;
    content: '';
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    width: 80%;
    background: linear-gradient(90deg, #ebebeb 0%, rgba(235, 235, 235, 0) 100%);
    z-index: 1;
}

.field__item.tabs .paragraph.tabs [role="tabpanel"] .tab-bg-image img {
    height: 100%;
    object-fit: cover;
}

@media (max-width: 991px) {
    .field__item.tabs .paragraph.tabs [role="tabpanel"]  {
        max-width: 100%;
        padding-top: 0;
    }

    .field__item.tabs .paragraph.tabs [role="tabpanel"]  .tab-bg-image {
        width: 100%;
    }

    .field__item.tabs .paragraph.tabs [role="tabpanel"] .tab-bg-image::before {
        height: 70%;
        top: unset;
        bottom: 0;
        width: 100%;
        background: linear-gradient(0deg, #ebebeb 0%, rgba(235, 235, 235, 0) 100%);
        z-index: 0;
    }

    .field__item.tabs .paragraph.tabs [role="tabpanel"]  .tab-bg-image::after {
        content: '';
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        width: 40%;
        background: linear-gradient(90deg, #ebebeb 0%, rgba(235, 235, 235, 0) 100%);
        z-index: 0;
    }
}

@media (max-width: 500px) {
    .field__item.tabs .paragraph.tabs {
        padding: 0;
    }

    .field__item.tabs .paragraph.tabs .tabs-header {
        flex-wrap: wrap;
        justify-content: flex-start;
    }

    .field__item.tabs .paragraph.tabs .tabs-header .tab-title {
        padding: 0.5rem 0;
        margin: 0;
    }

    .field__item.tabs .paragraph.tabs [role="tabpanel"] .tab-content {
        padding: 1rem;
    }

    .field__item.tabs .paragraph.tabs [role="tabpanel"] .tab-bg-image::after {
        width: 50%;
    }
}