/* ==========================================================================
   E42 Feature Carousel — split-panel luxury carousel
   Variables are overridable per-instance via inline custom properties.
   ========================================================================== */

.e42-fc {
    --e42fc-height: 520px;
    --e42fc-radius: 0px;
    --e42fc-visual-ratio: 1.08;
    --e42fc-panel-ratio: 1;
    --e42fc-panel-bg: linear-gradient(220deg, #4a8ea0 0%, #2c6373 55%, #265c6b 100%);
    --e42fc-title-color: #f3efe7;
    --e42fc-headline-color: #f6f3ec;
    --e42fc-text-color: rgba(255, 255, 255, 0.78);
    --e42fc-arrow-color: #ffffff;
    --e42fc-arrow-bg: rgba(255, 255, 255, 0.12);
    --e42fc-arrow-bg-hover: rgba(255, 255, 255, 0.22);
    --e42fc-dot-color: rgba(255, 255, 255, 0.35);
    --e42fc-dot-active: #ffffff;
    --e42fc-dots-top: 60%;
    --e42fc-divider-color: rgba(255, 255, 255, 0.4);
    --e42fc-divider-width: 64px;
    --e42fc-divider-thickness: 1px;
    --e42fc-divider-gap: 18px;
    --e42fc-serif: "Cormorant Garamond", "EB Garamond", "Times New Roman", Georgia, serif;
    --e42fc-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --e42fc-transition: 900ms cubic-bezier(0.22, 1, 0.36, 1);
    --e42fc-col-gap: 0px;
    --e42fc-content-align: space-between;
    --e42fc-title-gap: 24px;
    --e42fc-headline-gap: 18px;
    --e42fc-headline-width: 20ch;
    --e42fc-text-width: 36ch;

    display: flex;
    align-items: stretch;
    gap: var(--e42fc-col-gap);
    width: 100%;
    min-height: var(--e42fc-height);
    border-radius: var(--e42fc-radius);
    overflow: hidden;
    position: relative;
    box-sizing: border-box;
}

.e42-fc *,
.e42-fc *::before,
.e42-fc *::after { box-sizing: border-box; }

/* ---------- Visual (left) ---------- */
.e42-fc__visual {
    flex: var(--e42fc-visual-ratio) 1 0;
    position: relative;
    overflow: hidden;
    min-height: var(--e42fc-height);
    background: #0f1c20;
}

.e42-fc__images { position: absolute; inset: 0; width: 100%; height: 100%; }

.e42-fc__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transform: scale(1.06);
    transition: opacity var(--e42fc-transition), transform 7000ms ease-out;
    will-change: opacity, transform;
}

.e42-fc__image.is-active {
    opacity: 1;
    transform: scale(1);
    z-index: 1;
}

/* ---------- Panel (right) ---------- */
.e42-fc__panel {
    flex: var(--e42fc-panel-ratio) 1 0;
    position: relative;
    background: var(--e42fc-panel-bg);
    padding: clamp(36px, 5vw, 72px) clamp(56px, 6vw, 96px) clamp(36px, 5vw, 72px) clamp(36px, 5vw, 64px);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: var(--e42fc-height);
    overflow: hidden;
}

.e42-fc__slides { position: relative; z-index: 1; flex: 1; display: flex; flex-direction: column; justify-content: space-between; }

/* ---------- Per-slide background layers (cross-fade) ---------- */
.e42-fc__panel-bg { position: absolute; inset: 0; z-index: 0; }

.e42-fc__bg {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity var(--e42fc-transition);
    will-change: opacity;
}

.e42-fc__bg.is-active { opacity: 1; }

.e42-fc__slide {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: var(--e42fc-content-align);
    opacity: 0;
    transform: translateY(14px);
    pointer-events: none;
    transition: opacity var(--e42fc-transition), transform var(--e42fc-transition);
}

.e42-fc__slide.is-active {
    position: relative;
    min-height: 100%;
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.e42-fc__top { margin: 0 0 var(--e42fc-title-gap) 0; }

.e42-fc__title {
    font-family: var(--e42fc-serif);
    color: var(--e42fc-title-color);
    font-size: clamp(26px, 2.6vw, 40px);
    line-height: 1.12;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin: 0;
    max-width: 14ch;
}

.e42-fc__divider {
    display: block;
    width: var(--e42fc-divider-width);
    max-width: 100%;
    height: var(--e42fc-divider-thickness);
    margin-top: var(--e42fc-divider-gap);
    background: var(--e42fc-divider-color);
    border: 0;
}

.e42-fc--no-uppercase .e42-fc__title { text-transform: none; letter-spacing: 0.01em; }

.e42-fc__lower { max-width: none; }

/* Optional slow zoom on the fixed image */
.e42-fc__image--kb.is-active { animation: e42fc-kb 18s ease-out forwards; }
@keyframes e42fc-kb {
    from { transform: scale(1); }
    to { transform: scale(1.08); }
}

.e42-fc__headline {
    font-family: var(--e42fc-serif);
    color: var(--e42fc-headline-color);
    font-size: clamp(22px, 2.2vw, 32px);
    line-height: 1.2;
    font-weight: 500;
    max-width: var(--e42fc-headline-width);
    margin: 0 0 var(--e42fc-headline-gap) 0;
}

.e42-fc__text {
    font-family: var(--e42fc-sans);
    color: var(--e42fc-text-color);
    font-size: clamp(13px, 1vw, 14px);
    line-height: 1.7;
    max-width: var(--e42fc-text-width);
    margin: 0;
    font-weight: 400;
}

/* ---------- Arrows ---------- */
.e42-fc__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 6;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: 50%;
    background: var(--e42fc-arrow-bg);
    color: var(--e42fc-arrow-color);
    cursor: pointer;
    padding: 0;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    transition: background 250ms ease, border-color 250ms ease, transform 250ms ease;
}

.e42-fc__arrow:hover { background: var(--e42fc-arrow-bg-hover); border-color: rgba(255, 255, 255, 0.85); }
.e42-fc__arrow:active { transform: translateY(-50%) scale(0.94); }
.e42-fc__arrow svg { width: 16px; height: 16px; display: block; }
.e42-fc__arrow--prev { left: 22px; }
.e42-fc__arrow--next { right: -22px; }

/* ---------- Dots (vertical) ---------- */
.e42-fc__dots {
    position: absolute;
    right: clamp(18px, 1.6vw, 26px);
    top: var(--e42fc-dots-top);
    transform: translateY(-50%);
    z-index: 6;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.e42-fc__dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    border: 0;
    padding: 0;
    background: var(--e42fc-dot-color);
    cursor: pointer;
    transition: background 250ms ease, transform 250ms ease;
}

.e42-fc__dot.is-active { background: var(--e42fc-dot-active); transform: scale(1.25); }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
    .e42-fc { --e42fc-height: 440px; }
    .e42-fc__arrow--next { right: 18px; }
}

@media (max-width: 767px) {
    .e42-fc {
        flex-direction: column;
        --e42fc-height: auto;
    }
    .e42-fc__visual { min-height: 280px; }
    .e42-fc__panel { min-height: auto; padding: 40px 28px 56px; }
    .e42-fc__arrow { top: auto; bottom: 16px; transform: none; }
    .e42-fc__arrow:active { transform: scale(0.94); }
    .e42-fc__arrow--prev { left: 16px; }
    .e42-fc__arrow--next { left: 72px; right: auto; }
    .e42-fc__dots {
        flex-direction: row;
        right: 28px;
        left: auto;
        top: auto;
        bottom: 24px;
        transform: none;
    }
    .e42-fc__top { margin-bottom: 28px; }
    .e42-fc__title { max-width: none; }
    .e42-fc__slide { transform: translateY(8px); }
}

/* Pre-JS fallback: reveal the first of each layer.
   Image and background stay absolute (so they keep filling the area);
   only the text slide becomes relative so the panel keeps its height. */
.e42-fc:not([data-e42fc-ready]) .e42-fc__image:first-child,
.e42-fc:not([data-e42fc-ready]) .e42-fc__bg:first-child {
    opacity: 1;
}

.e42-fc:not([data-e42fc-ready]) .e42-fc__slide:first-child {
    opacity: 1;
    transform: none;
    position: relative;
}