/* audace/expertise-showcase — front + editor styles */

.audace-expertise-showcase {
    display: grid;
    /* Equal columns by default. Track sizes are resolved after gap is
     * subtracted, so 1fr 1fr yields a true 50/50 regardless of gap. */
    grid-template-columns: minmax(0, var(--audace-exp-left, 1fr)) minmax(0, var(--audace-exp-right, 1fr));
    /* Force the row to fill the showcase's height. Without this, the row
     * collapses to content (the right cell's panels are position:absolute
     * so they contribute zero height) and the stage shows up as a tiny
     * strip. */
    grid-template-rows: 1fr;
    gap: var(--audace-expertise-gap, var(--wp--preset--spacing--60, 2rem));
    align-items: stretch;
    box-sizing: border-box;
    min-height: var(--audace-viewport-h, 70lvh);
}

/* When the block is a slide, the slides-container sets the outer height. */
.wp-block-audace-expertise-showcase.is-style-slide.audace-expertise-showcase {
    height: var(--audace-viewport-h, 70lvh);
    min-height: 0;
}

.audace-expertise-showcase.is-empty {
    display: block;
    opacity: .6;
    font-style: italic;
}

.audace-expertise-showcase__left,
.audace-expertise-showcase__right {
    box-sizing: border-box;
}

.audace-expertise-showcase__left {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    height: 100%;
    padding: var(--audace-exp-left-pad-y, 0) var(--audace-exp-left-pad-x, 0);
    box-sizing: border-box;
}

.audace-expertise-showcase__heading {
    margin: 0;
    font-weight: 700;
    line-height: 1;
    font-size: var(--wp--preset--font-size--x-large) !important;
}

.audace-expertise-showcase__count {
    margin: 0;
    font-weight: 700;
}

.audace-expertise-tabs {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    margin-top:auto;
    font-size: 3rem;
    font-style: italic;
    line-height: 1;
}

.audace-expertise-tab {
    appearance: none;
    background: transparent;
    border: 0;
    padding: 0 0.15em 0 0;
    margin: 0;
    font: inherit;
    font-weight: 800;
    text-align: left;
    cursor: pointer;
    color: color-mix(in srgb, currentColor 25%, transparent);
    transition: color .2s ease;
    line-height: 1;
}

.audace-expertise-tab:hover,
.audace-expertise-tab:focus-visible {
    color: color-mix(in srgb, currentColor 60%, transparent);
    outline: none;
}

.audace-expertise-tab.is-active {
    color: inherit;
}

/* Right column: stage fills, arrows pinned at bottom-right. */
.audace-expertise-showcase__right {
    position: relative;
    min-width: 0;
    min-height: 0;
    height: 100%;
    padding: var(--audace-exp-right-pad-y, 0) var(--audace-exp-right-pad-x, 0);
    padding-bottom: calc(var(--audace-exp-right-pad-y, 0rem) + 4rem); /* reserve room for absolute-positioned arrows */
    box-sizing: border-box;
}

.audace-expertise-stage {
    position: relative;
    height: 100%;
    min-height: 0;
    overflow: hidden;
}

.audace-expertise-panel {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    gap: var(--audace-expertise-panel-gap, 1.5rem);
    padding: var(--audace-expertise-panel-padding, 0);
    box-sizing: border-box;
}

/* Desktop: kill the vertical gap inside each panel. */
@media (min-width: 782px) {
    .audace-expertise-showcase {
        gap: 0;
    }
}

.audace-expertise-panel {
    opacity: 0;
    visibility: hidden;
    transition: opacity 1.4s cubic-bezier(.4, 0, .2, 1), visibility 0s linear 1.4s;
    will-change: opacity;
    background: var(--wp--preset--color--base, #fff);
    overflow: hidden;
    z-index: 1;
}

/* Active panel fades in and sits above the others. */
.audace-expertise-panel.is-active {
    opacity: 1;
    visibility: visible;
    transition: opacity 1.4s cubic-bezier(.4, 0, .2, 1), visibility 0s linear 0s;
    z-index: 2;
}

/* First-paint: before JS runs, only the active panel is visible. */
.audace-expertise-panel.is-active {
    transform: translate3d(0, 0, 0);
}

.audace-expertise-panel__figure {
    margin: 0;
}

.audace-expertise-panel__figure img,
.audace-expertise-panel__thumb {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
    aspect-ratio: 16 / 10;
}

.audace-expertise-panel__content > :first-child { margin-top: 0; }
.audace-expertise-panel__content > :last-child  { margin-bottom: 0; }

.audace-expertise-panel__content {
    line-height: 1.1;
}

.audace-expertise-arrows {
    position: absolute;
    bottom: 0;
    right: 0;
    display: flex;
    gap: 1rem;
    z-index: 5;
}

.audace-expertise-arrow {
    appearance: none;
    background: transparent;
    border: 0;
    padding: 0.25em 0.5em;
    font: inherit;
    line-height: 1;
    cursor: pointer;
    color: inherit;
    transition: opacity .2s ease, transform .2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.audace-expertise-arrow img {
    display: block;
    width: 3rem;
    height: auto;
}

.audace-expertise-arrow:hover,
.audace-expertise-arrow:focus-visible {
    outline: none;
    transform: translateY(-2px);
}

.audace-expertise-arrow img {
    transition: filter 0.2s ease;
}

.audace-expertise-arrow:hover img,
.audace-expertise-arrow:focus-visible img {
    /* SVG via <img>: brightness(0) → pure black, invert(0.902) → #e6e6e6
     * which is `gray-10`, the lightest gray in our palette. */
    filter: brightness(0) invert(0.902);
}

.audace-expertise-arrow[disabled] {
    opacity: .25;
    cursor: not-allowed;
    transform: none;
}

/* Mobile: flatten the two columns, reorder to:
 *   1. heading + count
 *   2. image + post content (the stage)
 *   3. tabs (centered)
 *   4. arrows (centered)
 */
@media (max-width: 782px) {
    .audace-expertise-showcase {
        display: flex;
        flex-direction: column;
        gap: 0;
    }
    .audace-expertise-showcase__left,
    .audace-expertise-showcase__right {
        display: contents;
        height: auto;
    }

    .audace-expertise-showcase__heading { order: 1; }
    .audace-expertise-showcase__count   { order: 2; margin-bottom: 1.5rem;}
    .audace-expertise-stage             { order: 3; width: 100%; height: auto; }
    .audace-expertise-tabs              { order: 4; }
    .audace-expertise-arrows            { order: 5; }

    .audace-expertise-showcase__right {
        padding-bottom: 0;
    }

    .audace-expertise-tabs {
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: flex-start;
        justify-content: flex-start;
        font-size: var(--wp--preset--font-size--x-large) !important;
        margin-top: 1em;
        margin-bottom: 1rem;
    }
    
    .audace-expertise-arrows {
        margin-top: auto;
    }
    .audace-expertise-tab {
        text-align: left;
    }
    /* Mobile only: hide non-active tabs. The active one stays visible
     * (acts as a label for the current panel). */
    .audace-expertise-tab:not(.is-active) {
        display: none;
    }

    .audace-expertise-arrows {
        position: static;
        justify-content: center;
        gap: 2rem;
    }
    .audace-expertise-arrow img {
        width: 2rem;
    }

    /* On mobile we don't use the horizontal slide animation — panels stack
     * statically and the active one is shown via display. */
    .audace-expertise-panel {
        position: static;
        transform: none;
        transition: none;
    }
    .audace-expertise-panel:not(.is-active) {
        display: none;
    }
    .audace-expertise-stage {
        overflow: visible;
    }
}

/* Editor preview niceties — scoped to the block editor only so they don't
 * leak onto the front end (the .wp-block-audace-expertise-showcase class
 * exists in both contexts). */
.editor-styles-wrapper .wp-block-audace-expertise-showcase .audace-expertise-panel {
    position: static;
    transform: none;
    transition: none;
}
.editor-styles-wrapper .wp-block-audace-expertise-showcase .audace-expertise-panel:not(.is-active) {
    display: none;
}
.editor-styles-wrapper .wp-block-audace-expertise-showcase .audace-expertise-stage {
    min-height: auto;
    overflow: visible;
}
