/* =========================================================
   IMV Destination Showcase — screen-recording matched build
   v1.1.2
   ========================================================= */
.imv-ds,
.imv-ds * { box-sizing: border-box; }

.imv-ds {
    --imv-bg: #fff;
    --imv-tab-bg: #36c1b3;
    --imv-tab-fill: #12ab9c;
    --imv-icon-col: 20.5%;
    --imv-pattern-opacity: .55;
    --imv-crossfade: 700ms;
    --imv-fill-speed: 620ms;
    --imv-main-gap: clamp(12px, 1.54cqw, 20px);
    --imv-visual-gap: clamp(12px, 1.54cqw, 20px);
    --imv-thumb-gap: clamp(11px, 1.46cqw, 19px);
    --imv-tab-gap: clamp(8px, 1.08cqw, 14px);
    --imv-radius: clamp(10px, 1.08cqw, 14px);

    position: relative;
    isolation: isolate;
    container-type: inline-size;
    width: 100%;
    min-width: 0;
    overflow: hidden;
    padding: 24px clamp(26px, 2.70cqw, 35px) clamp(35px, 4.16cqw, 54px) 28px;
    background: var(--imv-bg);
    font-family: "Poppins", Arial, sans-serif;
}

.imv-ds-pattern {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

.imv-ds-pattern-default {
    opacity: var(--imv-pattern-opacity);
    background:
        radial-gradient(circle at 98% 89%, transparent 0 43px, #f2f3f1 44px 48px, transparent 49px 67px, #f5f5f3 68px 72px, transparent 73px 94px),
        radial-gradient(circle at 33% 41%, transparent 0 73px, rgba(242,243,240,.86) 74px 78px, transparent 79px 104px),
        repeating-linear-gradient(90deg, transparent 0 74px, rgba(240,241,238,.64) 75px 80px, transparent 81px 118px),
        linear-gradient(115deg, transparent 0 24%, rgba(244,244,241,.82) 24.2% 25%, transparent 25.2% 100%);
}

.imv-ds-pattern-custom {
    opacity: var(--imv-pattern-opacity);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.imv-ds-stage {
    position: relative;
    z-index: 1;
    width: 100%;
    min-width: 0;
    aspect-ratio: 2.306 / 1;
    display: grid;
    grid-template-columns: minmax(0, 724fr) minmax(0, 492fr);
    grid-template-rows: minmax(0, 1fr);
    align-items: stretch;
    gap: var(--imv-main-gap);
}

/* LEFT: two stacked thumbs + main */
.imv-ds-visuals {
    min-width: 0;
    min-height: 0;
    height: 100%;
    align-self: stretch;
    display: grid;
    grid-template-columns: minmax(0, 215fr) minmax(0, 489fr);
    gap: var(--imv-visual-gap);
}

.imv-ds-thumbs,
.imv-ds-main {
    position: relative;
    min-width: 0;
    min-height: 0;
}

.imv-ds-thumb-set {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-rows: minmax(0, 227fr) minmax(0, 290fr);
    gap: var(--imv-thumb-gap);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity var(--imv-crossfade) ease, visibility var(--imv-crossfade) linear;
}

.imv-ds-thumb-set.is-active {
    opacity: 1;
    visibility: visible;
    z-index: 2;
}

.imv-ds-thumb {
    width: 100%;
    height: 100%;
    min-height: 0;
    display: block;
    object-fit: cover;
    border-radius: var(--imv-radius);
}

.imv-ds-main {
    overflow: hidden;
    border-radius: var(--imv-radius);
    background: #e9ecea;
}

.imv-ds-slide {
    position: absolute;
    inset: 0;
    margin: 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity var(--imv-crossfade) ease, visibility var(--imv-crossfade) linear;
}

.imv-ds-slide.is-active {
    opacity: 1;
    visibility: visible;
    z-index: 2;
    pointer-events: auto;
}

.imv-ds-main-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.imv-ds-main-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(
        180deg,
        rgba(35, 194, 180, .90) 0%,
        rgba(35, 194, 180, .78) 13%,
        rgba(35, 194, 180, .55) 25%,
        rgba(35, 194, 180, .25) 38%,
        rgba(35, 194, 180, .06) 51%,
        rgba(35, 194, 180, 0) 64%
    );
}

.imv-ds-copy {
    position: relative;
    z-index: 2;
    width: 88%;
    padding: clamp(17px, 2.23cqw, 29px) clamp(15px, 1.77cqw, 23px);
    color: #fff;
}

.imv-ds-eyebrow {
    margin: 0 0 clamp(1px, .12cqw, 2px);
    font-size: clamp(7px, .82cqw, 10.6px);
    font-weight: 400;
    line-height: 1.15;
}

.imv-ds-title {
    margin: 0 0 clamp(2px, .23cqw, 3px);
    padding: 0;
    color: inherit;
    font-family: inherit;
    font-size: clamp(11px, 1.31cqw, 17px);
    font-weight: 500;
    line-height: 1.15;
}

.imv-ds-desc {
    margin: 0;
    max-width: 100%;
    font-size: clamp(7px, .90cqw, 11.7px);
    font-weight: 400;
    line-height: 1.28;
}

/* RIGHT: 5 category rows from the video */
.imv-ds-tabs {
    min-width: 0;
    min-height: 0;
    height: 100%;
    align-self: stretch;
    display: grid;
    grid-auto-rows: minmax(0, 1fr);
    align-content: stretch;
    gap: var(--imv-tab-gap);
}

.imv-ds-tab {
    position: relative;
    isolation: isolate;
    min-width: 0;
    min-height: 0;
    display: grid;
    grid-template-columns: var(--imv-icon-col) minmax(0, 1fr) auto;
    align-items: stretch;
    height: 100%;
    overflow: hidden;
    border-radius: var(--imv-radius);
    background: var(--imv-tab-bg);
    color: #fff;
    cursor: pointer;
    outline: none;
}

/* The exact left-to-right dark teal sweep visible in the recording. */
.imv-ds-tab-fill {
    position: absolute;
    z-index: -1;
    inset: 0 auto 0 0;
    width: var(--imv-icon-col);
    border-radius: var(--imv-radius);
    background: var(--imv-tab-fill);
    transition: width var(--imv-fill-speed) cubic-bezier(.22,.61,.36,1);
}

.imv-ds-tab.is-active .imv-ds-tab-fill,
.imv-ds-tab:focus-visible .imv-ds-tab-fill {
    width: 100%;
}

.imv-ds-tab-icon,
.imv-ds-tab-label,
.imv-ds-tab-action {
    position: relative;
    z-index: 1;
}

.imv-ds-tab-icon {
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: inherit;
}

.imv-ds-tab-icon i {
    font-size: var(--imv-icon-size-custom, clamp(27px, 3.31cqw, 43px));
    line-height: 1;
}

.imv-ds-tab-icon svg {
    width: var(--imv-icon-size-custom, clamp(27px, 3.31cqw, 43px));
    height: var(--imv-icon-size-custom, clamp(27px, 3.31cqw, 43px));
    display: block;
    fill: currentColor;
}

.imv-ds-tab-label {
    min-width: 0;
    display: flex;
    align-items: center;
    padding: 0 clamp(14px, 1.08cqw, 18px);
}

.imv-ds-tab-title {
    display: block;
    color: inherit;
    font-family: inherit;
    font-size: clamp(9px, 1.08cqw, 14px);
    font-weight: 400;
    line-height: 1.2;
    white-space: normal;
}

.imv-ds-tab-action {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 clamp(16px, 2.16cqw, 28px) 0 clamp(5px, .77cqw, 10px);
}

.imv-ds-more,
.imv-ds-more:visited {
    min-width: clamp(38px, 4.78cqw, 62px);
    min-height: clamp(21px, 2.62cqw, 34px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: clamp(5px, .62cqw, 8px) clamp(9px, .92cqw, 12px);
    border: 0;
    border-radius: clamp(5px, .54cqw, 7px);
    background: #00504d;
    color: #fff;
    text-decoration: none !important;
    white-space: nowrap;
    font-family: inherit;
    font-size: clamp(7px, .85cqw, 11px);
    font-weight: 400;
    line-height: 1;
    box-shadow: none;
    transition: filter .2s ease;
}

.imv-ds-more:hover,
.imv-ds-more:focus {
    color: #fff;
    filter: brightness(.92);
    text-decoration: none !important;
}

/* Tablet: preserve the desktop composition until space becomes too tight. */
@media (max-width: 1024px) and (min-width: 821px) {
    .imv-ds { padding-left: 22px; }
    .imv-ds-tab-label { padding-left: 12px; padding-right: 8px; }
    .imv-ds-tab-action { padding-right: 12px; }
}

/* Small tablet: visual block first, category rows underneath. */
@media (max-width: 820px) {
    .imv-ds {
        container-type: normal;
        padding: 18px;
    }

    .imv-ds-stage {
        aspect-ratio: auto !important;
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    .imv-ds-visuals {
        width: 100%;
        min-height: 420px;
        grid-template-columns: minmax(0, 28%) minmax(0, 1fr);
        gap: 12px;
    }

    .imv-ds-thumb-set { gap: 12px; }
    .imv-ds-tabs { gap: 9px; }

    .imv-ds-tab {
        min-height: 68px;
        grid-template-columns: 78px minmax(0, 1fr) auto;
        border-radius: 11px;
    }

    .imv-ds-tab-fill { width: 78px; border-radius: 11px; }
    .imv-ds-tab-icon svg { width: 34px; height: 34px; }
    .imv-ds-tab-icon i { font-size: 34px; }
    .imv-ds-tab-title { font-size: 12px; }
    .imv-ds-more, .imv-ds-more:visited { min-width: 50px; min-height: 28px; font-size: 9px; }
    .imv-ds-copy { padding: 20px; }
    .imv-ds-eyebrow { font-size: 9px; }
    .imv-ds-title { font-size: 15px; }
    .imv-ds-desc { font-size: 9px; }
}

/* Mobile: large image, two side-by-side thumbs, then stacked tabs. */
@media (max-width: 600px) {
    .imv-ds { padding: 14px; }

    .imv-ds-visuals {
        min-height: 0;
        display: flex;
        flex-direction: column-reverse;
        gap: 10px;
    }

    .imv-ds-main {
        width: 100%;
        min-height: 320px;
        border-radius: 10px;
    }

    .imv-ds-thumbs {
        width: 100%;
        height: 120px;
    }

    .imv-ds-thumb-set {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr;
        gap: 10px;
    }

    .imv-ds-thumb { border-radius: 10px; }

    .imv-ds-tab {
        min-height: 62px;
        grid-template-columns: 66px minmax(0, 1fr) auto;
        border-radius: 10px;
    }

    .imv-ds-tab-fill { width: 66px; border-radius: 10px; }
    .imv-ds-tab-icon svg { width: 30px; height: 30px; }
    .imv-ds-tab-icon i { font-size: 30px; }
    .imv-ds-tab-label { padding: 0 11px; }
    .imv-ds-tab-action { padding-right: 10px; }
    .imv-ds-tab-title { font-size: 11px; }
    .imv-ds-more, .imv-ds-more:visited { min-width: 46px; min-height: 26px; font-size: 8px; }
}

/* =========================================================
   v1.1.2 — Elementor image sizing hard-fix
   Elementor frontend commonly applies `.elementor img { height:auto; }`.
   That rule is more specific than a single widget class and can make the
   photos stop before the bottom of their grid cells.  These selectors are
   intentionally stronger so every photo fills its designed frame.
   ========================================================= */
.elementor .imv-ds .imv-ds-main,
.elementor .imv-ds .imv-ds-thumbs,
.elementor .imv-ds .imv-ds-thumb-set,
.elementor .imv-ds .imv-ds-slide {
    min-height: 0;
    height: 100%;
}

.elementor .imv-ds img.imv-ds-main-img,
.elementor .imv-ds img.imv-ds-thumb {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    min-height: 0 !important;
    display: block !important;
    object-fit: cover !important;
}

.elementor .imv-ds .imv-ds-main-img {
    position: absolute !important;
    inset: 0 !important;
}

/* Keep each thumbnail locked to its grid track, regardless of the
   source image's natural landscape/portrait aspect ratio. */
.elementor .imv-ds .imv-ds-thumb-set > .imv-ds-thumb {
    align-self: stretch !important;
    justify-self: stretch !important;
}

/* Right category stack always uses exactly the same stage height. */
.elementor .imv-ds .imv-ds-tabs {
    height: 100% !important;
    align-self: stretch !important;
}

@media (max-width: 820px) {
    .elementor .imv-ds .imv-ds-stage {
        height: auto !important;
    }

    .elementor .imv-ds .imv-ds-visuals {
        height: 420px;
    }
}

@media (max-width: 600px) {
    .elementor .imv-ds .imv-ds-visuals {
        height: auto;
    }

    .elementor .imv-ds .imv-ds-main {
        height: 320px;
    }

    .elementor .imv-ds .imv-ds-thumbs {
        height: 120px;
    }
}