/* ===================================================================
   Content Tabs Widget
   BEM block: wb-content-tabs
   =================================================================== */

.wb-content-tabs {
    position: relative;
    width: 100%;
}

/* ─── Header ─── */
/* Spacing via global: [class*="__tagline"] mb 8x, [class*="__title"] mb 12x, .button-group mt 16x */
.wb-content-tabs__header {
    display: flex;
    flex-direction: column;
    text-align: center;
    align-items: center;
}

.wb-content-tabs__header-text {
    max-width: 768px;
    margin-bottom: var(--section-padding-padding-section-medium);
}

.wb-content-tabs__description {
    margin-bottom: 0;
}

/* ─── Tab container (tabs menu + panes) ─── */
.wb-content-tabs__container {
    border-radius: var(--radius-large, 8px);
    overflow: hidden;
}

/* ─── Tab menu ─── */
.wb-content-tabs__tabs-menu {
    display: flex;
    width: 100%;
}

.wb-content-tabs__tab {
    flex: 1 1 0%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-12x) var(--spacing-16x);
    border: none;
    border-right: var(--stroke-divider-width, 1px) solid var(--e-global-color-border, rgba(11, 0, 6, 0.15));
    background: transparent;
    cursor: pointer;
    transition: background-color 0.25s ease, color 0.25s ease;
}

/*
 * Neutralise the Elementor global kit rule that overrides button styles on
 * :hover and :focus.
 *
 * Elementor post.css (simplified):
 *   .elementor-kit-N button:hover,
 *   .elementor-kit-N button:focus {
 *       background-color: var(--e-global-color-secondary);   ← greys out tab bg
 *       color: #fff;                                          ← whites out tab text
 *   }
 *   .elementor-kit-N button { color: #fff; }                 ← also affects arrows
 *
 * Specificity of that rule: 1 class + 1 element = (0,1,1).
 * Our fix: prefix with the block class .wb-content-tabs, giving us
 * 2 classes + 1 element = (0,2,1) — enough to beat Elementor without
 * !important and without any inline styles.
 */
.wb-content-tabs .wb-content-tabs__tab:hover,
.wb-content-tabs .wb-content-tabs__tab:focus {
    /*
     * `inherit` makes the browser look at the element's own cascaded value
     * before :hover/:focus pseudo-classes are applied — in practice this
     * preserves the inline style="background-color:…" set by PHP on each tab,
     * while still beating the Elementor kit rule via higher specificity.
     */
    background-color: inherit;
    color: inherit;
    outline: none;
}

.wb-content-tabs__tab:last-child {
    border-right: none;
}

.wb-content-tabs__tab-name {
    transition: color 0.25s ease;
}

.wb-content-tabs__tab--active .wb-content-tabs__tab-name {
    font-weight: bold;
}

/*
 * Desktop: tab strip row height matches Figma (104px); media uses aspect-[552/544].
 */
@media (min-width: 768px) {
    .wb-content-tabs .wb-content-tabs__tab {
        box-sizing: border-box;
        min-height: 104px;
    }

    .wb-content-tabs__slide-media {
        aspect-ratio: 552 / 544;
    }
}

/* ─── Panes ─── */
.wb-content-tabs__panes {
    position: relative;
}

/* Pane: column with slides wrapper + nav below */
.wb-content-tabs__pane {
    display: none;
    flex-direction: column;
    padding: calc(var(--spacing-1x) * 24);
    gap: var(--spacing-16x);
}

.wb-content-tabs__pane--active {
    display: flex;
}

/* Slides wrapper: holds all slide units, one visible at a time */
.wb-content-tabs__slides {
    flex: 1 1 auto;
    min-width: 0;
    position: relative;
    overflow: hidden;
}

/* One full slide unit (media + body). Inactive: stacked out of flow so only one height counts. */
.wb-content-tabs__slide {
    display: none;
    gap: calc(var(--spacing-1x) * 40);
    min-width: 0;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    box-sizing: border-box;
}

.wb-content-tabs__slide--active {
    display: flex;
    position: relative;
}

/* Slide media (left column when present) */
.wb-content-tabs__slide-media {
    flex: 1 1 0%;
    min-width: 0;
    position: relative;
    border-radius: var(--radius-medium, 8px);
    overflow: hidden;
}

.wb-content-tabs__slide-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--radius-medium, 8px);
    display: block;
}

/* Slide body (right column, or full width when --no-media) */
.wb-content-tabs__slide-body {
    flex: 1 1 0%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /*
     * Figma Layout 508 spacing: 16 tagline–title block, 24 title–description,
     * 32 before actions row; mixed steps use margins instead of one gap.
     */
    gap: 0;
    position: relative;
    overflow: hidden;
}

/* Slide without image: full width, start-aligned (no centered 80% gutter vs tab strip) */
.wb-content-tabs__slide--no-media .wb-content-tabs__slide-body {
    width: 100%;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
}

.wb-content-tabs__slide-tagline {
    /* Uses global tagline styles */
    margin-bottom: var(--spacing-8x); /* 16px */
}

.wb-content-tabs__slide-title {
    /* Typography controlled by Elementor style section */
    margin-bottom: var(--spacing-12x); /* 24px */
}

.wb-content-tabs__slide-description {
    margin-bottom: 0;
}

/* Primary actions (CTA row + arrow nav) separated from copy by 32px — Figma Tab Pane */
.wb-content-tabs__slide-buttons,
.wb-content-tabs__slide-body > .wb-content-tabs__nav {
    margin-top: var(--spacing-16x);
}

/* ─── Navigation arrows ─── */
.wb-content-tabs__nav {
    display: flex;
    gap: var(--spacing-12x);
    align-items: center;
}

/*
 * Arrows are also <button> elements — the Elementor kit rule forces
 * color:#fff and a grey background on them.
 * Using the block prefix (.wb-content-tabs) raises specificity to (0,2,1)
 * which beats the kit's (0,1,1) without !important or inline styles.
 */
.wb-content-tabs .wb-content-tabs__arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 10px;
    border-radius: 100px;
    border: none;
    border-bottom: 4px solid var(--e-global-color-border, rgba(11, 0, 6, 0.15));
    background-color: var(--_primitives---opacity--neutral-darkest-5, rgba(11, 0, 6, 0.05));
    cursor: pointer;
    transition: opacity 0.2s ease;
    color: var(--e-global-color-text, currentColor);
}

.wb-content-tabs .wb-content-tabs__arrow:hover,
.wb-content-tabs .wb-content-tabs__arrow:focus {
    opacity: 0.7;
    background-color: var(--_primitives---opacity--neutral-darkest-5, rgba(11, 0, 6, 0.05));
    color: var(--e-global-color-text, currentColor);
    outline: none;
}

.wb-content-tabs__arrow svg {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

/* ─── Mobile accordion: 767px and below ─── */
/*
 * JS rebuilds the DOM into:
 *   .wb-content-tabs__accordion
 *     .wb-content-tabs__accordion-item  (one per tab)
 *       <button.wb-content-tabs__tab>   ← trigger at the top
 *       .wb-content-tabs__pane          ← content below (opens downward)
 *
 * max-height animation drives the collapse/expand.
 * Collapsed panes: display:flex + max-height:0 + overflow:hidden
 *   (display:flex keeps pane in the flow; height is suppressed by max-height)
 * Expanded panes:  max-height:none + overflow:visible
 */
@media (max-width: 767px) {

    /* Remove horizontal tab bar layout */
    .wb-content-tabs__container {
        overflow: visible; /* allow expanded pane to breathe */
    }

    /* Accordion wrapper */
    .wb-content-tabs__accordion {
        display: flex;
        flex-direction: column;
        width: 100%;
        border-radius: var(--radius-large, 8px);
        overflow: hidden;
    }

    /* Each item = pane (top) + tab button (bottom) */
    .wb-content-tabs__accordion-item {
        display: flex;
        flex-direction: column;
    }

    /* Tab button inside accordion — Figma: px-32 py-24, min-height 72 */
    .wb-content-tabs__accordion-item .wb-content-tabs__tab {
        width: 100%;
        justify-content: flex-start;
        box-sizing: border-box;
        min-height: 72px;
        padding: calc(var(--spacing-1x) * 12) calc(var(--spacing-1x) * 16);
        border-right: none;
        border-top: none;
        border-bottom: 1px solid var(--e-global-color-border, rgba(11, 0, 6, 0.15));
        flex: none;
    }

    /* Active tab: remove bottom border so it flows into the open pane */
    .wb-content-tabs__accordion-item .wb-content-tabs__tab--active {
        border-bottom: none;
    }

    /* Last item never needs a bottom border when collapsed */
    .wb-content-tabs__accordion-item:last-child .wb-content-tabs__tab:not(.wb-content-tabs__tab--active) {
        border-bottom: none;
    }

    /* Pane inside accordion — Figma: p-24 on expanded panel */
    .wb-content-tabs__accordion-item .wb-content-tabs__pane {
        flex-direction: column;
        padding: calc(var(--spacing-1x) * 12);
        gap: var(--spacing-12x);
        overflow: hidden; /* controlled by JS max-height */
    }

    /* Slide column stack: gap-48 between text column and media — Figma mobile */
    .wb-content-tabs__slide {
        flex-direction: column;
        gap: calc(var(--spacing-1x) * 24);
    }

    /*
     * Mobile copy rhythm — Figma nested gaps ~12 / 24 before arrows.
     * Overrides desktop margin steps on `.slide-tagline` / `.slide-title`.
     */
    .wb-content-tabs__slide-tagline {
        margin-bottom: var(--spacing-6x);
    }

    .wb-content-tabs__slide-title {
        margin-bottom: calc(var(--spacing-1x) * 10);
    }

    .wb-content-tabs__slide-buttons,
    .wb-content-tabs__slide-body > .wb-content-tabs__nav {
        margin-top: var(--spacing-12x);
    }

    .wb-content-tabs__slide-body {
        order: -1;
    }

    .wb-content-tabs__slide-media {
        order: 1;
    }
}

/* ─── Tablet: 768px to 991px ─── */
@media (min-width: 768px) and (max-width: 991px) {

    .wb-content-tabs__pane {
        gap: var(--spacing-16x);
        /* Align with desktop Figma inset (48px) rather than narrower 32px */
        padding: calc(var(--spacing-1x) * 24);
    }

    .wb-content-tabs__slide {
        gap: calc(var(--spacing-1x) * 20);
    }
}

/* Scroll animation disabled */