/* ── Layout ──────────────────────────────────────────────────────────────── */
.hover-tabs {
    display: grid;
    grid-template-columns: 30% 1fr;
    column-gap: 1.5rem;
    align-items: stretch;
}

.hover-tabs__panels {
    min-width: 0; /* Prevents grid blowout when flex panel children have intrinsic widths */
}

/* ── Nav items ───────────────────────────────────────────────────────────── */
.hover-tabs__nav {
    display:flex;
    flex-direction:column;
    gap:.25rem;
}

.hover-tabs__nav-item {
    position: relative;
    cursor: pointer;
    border:1px solid #eaeaea;
    padding: 10px 24px 10px 16px;
    /* margin-bottom: 6px; */
    background:#fff;
    transition:all 400ms ease;
    opacity: 0.5;
}


.hover-tabs__nav-item.active{
    box-shadow:0px 0px 16px rgba(0,0,0,0.125);
    opacity: 1;
}

/* Yellow indicator — grows from vertical center outward on active.
   right: -1px sits over the right border edge cleanly. */
.hover-tabs__nav-item::after {
    content: '';
    position: absolute;
    right: -1px;
    top: 0;
    bottom: 0;
    width: 4px;
    background-color: var(--hover-tabs-indicator-color, var(--wp--color--accent, #F4AF00));
    transform: scaleY(0);
    transform-origin: center;
    transition: transform 400ms ease;
    z-index: 1;
}

.hover-tabs__nav-item.active::after {
    transform: scaleY(1);
}

/* Content nudge — shifts right on active without causing text reflow */
.hover-tabs__nav-content {
    transition: all 400ms ease;
}

.hover-tabs__nav-item .hover-tabs__nav-content {
    position:relative;
    left:0;
}

.hover-tabs__nav-item.active .hover-tabs__nav-content {
    left:8px;
}

/* Tab title */
.hover-tabs__tab-title {
    display: block;
    font-size: 1.25rem;
    font-family: var(--wp--font--primary);
    font-weight: 400!important;
    text-transform: none;
    color:#000;
}

.hover-tabs__nav-item.active .hover-tabs__tab-title {
    font-weight: 700;
}

/* Tab description */
.hover-tabs__tab-desc {
    font-family: var(--wp--font--primary);
    
    font-family: var(--wp--font--primary);
    line-height: 1.45;
    color: var(--wp--color--dark-gray, #262626);
    margin: 0;
    font-size:.875rem;
}

/* ── Panels ──────────────────────────────────────────────────────────────── */
.hover-tabs__panel {
    display: none;
}

.hover-tabs__panel.active {
    display: flex;
    gap:1.5rem;;
    height: 100%;
}

/* ── Image cards ─────────────────────────────────────────────────────────── */
.hover-tab-image-card {
    flex: 1;
    position: relative;
    overflow: hidden;
    /* Initial animation state — cards start invisible and shifted down */
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 400ms ease, transform 400ms ease;
}

.hover-tab-image-card.is-animated {
    opacity: 1;
    transform: translateY(0);
}

.hover-tab-image-card__link {
    display: block;
    height: 100%;
    text-decoration: none;
}

/* Covers both cases: plain <img> and plugin-wrapped <picture> */
.hover-tab-image-card__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover; /* applies when output is a plain <img> */
}

/* When a plugin wraps the <img> in a <picture>, it moves the class/style
   to the <picture> element. <picture> is not a replaced element so
   object-fit/object-position do nothing on it — target the inner <img>.
   Focal point is passed via --hover-tab-focal (a custom property, which
   inherits) so the value reaches the inner <img> even without its own style attr. */
.hover-tab-image-card__img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: var(--hover-tab-focal, 50% 50%);
}

/* Dark gradient overlay — fades from transparent at top to dark at bottom */
.hover-tab-image-card__overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    /* background: linear-gradient(to top, rgba(0, 0, 0, 0.90) 0%, rgba(0, 0, 0, 0) 100%); */
    /* padding: 80px 24px 24px; */
    padding: 24px;
}

/* Solid colour overlay — sits between image and gradient text overlay.
   Color and opacity are set as CSS vars on the parent .hover-tabs wrapper. */
.hover-tab-image-card__color-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-color: var(--ch-overlay-color, transparent);
    opacity: var(--ch-overlay-opacity, 0);
}

/* Dark card text — when Light Card Text toggle is off */
.hover-tabs:not(.text-light) .hover-tab-image-card__text {
    color: #000000;
}

.hover-tab-image-card__text {
    color: var(--wp--color--white, #ffffff);
    /* font-family: var(--wp--font--secondary--ext, 'Eurostile Extended', sans-serif); */
    font-size: 1.35rem;
    font-weight: 500;
    line-height: 1.3;
    margin: 0;
}

/* ── Tablet wrap (782px–1200px): 3-card panels only ─────────────────────── */
/* When a panel has exactly 3 image cards, switch to a 2-column grid so the
   first two cards share the top row and the third spans the full bottom row.
   :nth-child(3):last-child targets the 3rd child only when it is also the last
   child, i.e. there are exactly 3 cards. height:100% is inherited from the
   active panel rule, so the 2-row grid always fills the nav column height. */
@media (min-width: 782px) and (max-width: 1200px) {
    .hover-tabs__panel.active:has(> .hover-tab-image-card:nth-child(3):last-child) {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr 1fr;
        gap: 1.5rem;
    }

    .hover-tabs__panel.active:has(> .hover-tab-image-card:nth-child(3):last-child) > .hover-tab-image-card:nth-child(3) {
        grid-column: 1 / -1;
    }
}

/* ── Above mobile: clip panels to the JS-set nav height ─────────────────── */
/* JS sets an explicit height on .hover-tabs__panels equal to the nav column.
   overflow:hidden ensures any content that would exceed that height is clipped
   rather than overflowing the component. Not applied at mobile where the
   slideDown animation drives height dynamically. */
@media (min-width: 782px) {
    .hover-tabs__panels {
        overflow: hidden;
        transition: height 400ms ease;
    }
}

/* ── Mobile (≤781px) ─────────────────────────────────────────────────────── */
@media (max-width: 781px) {
    /* Convert to flex column so nav items and panels can be interleaved via
       CSS order. display:contents makes the containers transparent to the flex
       layout — their children become direct flex items of .hover-tabs — without
       any DOM restructuring. */
    .hover-tabs {
        display: flex;
        flex-direction: column;
    }

    .hover-tabs__nav,
    .hover-tabs__panels {
        display: contents;
    }

    /* Indicator: switch from right/scaleY (desktop) to bottom/scaleX on mobile */
    .hover-tabs__nav-item::after {
        right: 0;
        top: auto;
        bottom: -1px;
        width: 100%;
        height: 4px;
        transform: scaleX(0);
    }

    .hover-tabs__nav-item.active::after {
        transform: scaleX(1);
    }

    /* Interleave: each nav item immediately above its panel.
       Covers up to 5 tabs (indices 0–4). */
    .hover-tabs__nav-item[data-tab="0"] { order: 0; }
    .hover-tabs__panel[data-tab="0"]    { order: 1; }
    .hover-tabs__nav-item[data-tab="1"] { order: 2; }
    .hover-tabs__panel[data-tab="1"]    { order: 3; }
    .hover-tabs__nav-item[data-tab="2"] { order: 4; }
    .hover-tabs__panel[data-tab="2"]    { order: 5; }
    .hover-tabs__nav-item[data-tab="3"] { order: 6; }
    .hover-tabs__panel[data-tab="3"]    { order: 7; }
    .hover-tabs__nav-item[data-tab="4"] { order: 8; }
    .hover-tabs__panel[data-tab="4"]    { order: 9; }

    /* Panel: stacked column of full-width landscape cards */
    .hover-tabs__panel.active {
        flex-direction: column;
        height: auto;
        gap: 0.75rem;
        padding-bottom: 0.75rem;
    }

    /* Image cards: full-width landscape ratio, stacked vertically.
       height:auto releases the desktop height:100% chain so aspect-ratio
       drives the card height; the link/picture/img chain fills it via height:100%. */
    .hover-tab-image-card {
        flex: none;
        width: 100%;
        aspect-ratio: 2 / 1;
        height: auto;
        min-height: 230px;
    }

    .hover-tab-image-card__text {
        font-size: 1.125rem;
    }
}

@media (max-width: 400px) {
    .hover-tab-image-card__text {
        font-size: 1rem;
    }
}