/* ============================================================
   Divi Interactive Tabs — Premium Framer-Style Stylesheet
   v2.2.0 — Divi 5 fully compatible
   ============================================================ */

/* ── Google Font Import ── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Oswald:wght@500;600;700&display=swap');

/* ── Root Fallbacks ── */
:root {
    --dit-bg: #f5f0e8;
    --dit-title-color: #1a1a1a;
    --dit-subtitle-color: #555555;
    --dit-number-color: #888888;
    --dit-arrow-color: #1a1a1a;
    --dit-active-arrow: #c44b2b;
    --dit-divider: #d4cfc8;
    --dit-active-tab-bg: rgba(0, 0, 0, 0);
    --dit-title-fs: 28px;
    --dit-subtitle-fs: 14px;
    --dit-number-fs: 14px;
    --dit-tab-pad: 28px;
    --dit-section-pad: 60px;
    --dit-col-gap: 48px;
    --dit-speed: 500ms;
    --dit-img-radius: 20px;
    --dit-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --dit-ease-out: cubic-bezier(0.0, 0.0, 0.2, 1);
}

/* ── Section Container ── */
section.dit-section {
    background-color: var(--dit-bg) !important;
    padding: var(--dit-section-pad) 0 !important;
    overflow: hidden !important;
    position: relative !important;
    box-sizing: border-box !important;
}

section.dit-section .dit-wrapper {
    display: flex !important;
    align-items: stretch !important;
    gap: var(--dit-col-gap) !important;
    max-width: 1400px !important;
    margin: 0 auto !important;
    padding: 0 40px !important;
    position: relative !important;
    box-sizing: border-box !important;
}

/* ── Left Column — Tabs ── */
section.dit-section .dit-tabs-col {
    flex: 0 0 50% !important;
    max-width: 50% !important;
    display: flex !important;
    flex-direction: column !important;
    position: relative !important;
    box-sizing: border-box !important;
}

/* ── Right Column — Image Stage ── */
section.dit-section .dit-image-col {
    flex: 0 0 50% !important;
    max-width: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    min-height: 420px !important;
    box-sizing: border-box !important;
}

section.dit-section .dit-image-stage {
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 420px !important;
    border-radius: var(--dit-img-radius) !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* ── Image Slides ── */
section.dit-section .dit-image-stage .dit-image-slide {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    opacity: 0 !important;
    transform: scale(1.04) !important;
    transition:
        opacity var(--dit-speed) var(--dit-ease),
        transform var(--dit-speed) var(--dit-ease) !important;
    will-change: opacity, transform !important;
    pointer-events: none !important;
    box-sizing: border-box !important;
    z-index: 0 !important;
    visibility: visible !important;
}

section.dit-section .dit-image-stage .dit-image-slide.dit-image-active {
    opacity: 1 !important;
    transform: scale(1) !important;
    pointer-events: auto !important;
    z-index: 2 !important;
    visibility: visible !important;
}

section.dit-section .dit-image-stage .dit-image-slide.dit-image-leaving {
    opacity: 0 !important;
    transform: scale(0.96) !important;
    z-index: 1 !important;
}

section.dit-section .dit-image-stage .dit-image-slide img,
section.dit-section .dit-image-stage .dit-image-slide > img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: none !important;
    object-fit: cover !important;
    border-radius: var(--dit-img-radius) !important;
    margin: 0 !important;
    padding: 0 !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* ── Tab Item ── */
section.dit-section .dit-tab-item {
    position: relative !important;
    border-bottom: 1px solid var(--dit-divider) !important;
    cursor: pointer !important;
    outline: none !important;
    -webkit-tap-highlight-color: transparent !important;
    background: transparent !important;
    box-sizing: border-box !important;
    opacity: 1 !important;
    visibility: visible !important;
}

section.dit-section .dit-tab-item:first-child {
    border-top: 1px solid var(--dit-divider) !important;
}

section.dit-section .dit-tab-header {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    padding: var(--dit-tab-pad) 12px !important;
    position: relative !important;
    transition: background var(--dit-speed) var(--dit-ease) !important;
    border-radius: 4px !important;
    box-sizing: border-box !important;
}

/* Active tab background */
section.dit-section .dit-tab-item.dit-tab-active .dit-tab-header {
    background: var(--dit-active-tab-bg) !important;
}

/* ── Tab Left (Number + Text) ── */
section.dit-section .dit-tab-left {
    display: flex !important;
    align-items: flex-start !important;
    gap: 20px !important;
    flex: 1 !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

/* ── Number ── */
section.dit-section .dit-tab-number,
section.dit-section span.dit-tab-number {
    font-family: 'Inter', sans-serif !important;
    font-size: var(--dit-number-fs) !important;
    font-weight: 500 !important;
    color: var(--dit-number-color) !important;
    line-height: 1.8 !important;
    flex-shrink: 0 !important;
    letter-spacing: 0.02em !important;
    padding-top: 4px !important;
    transition: color var(--dit-speed) var(--dit-ease) !important;
}

section.dit-section .dit-tab-item.dit-tab-active .dit-tab-number {
    color: var(--dit-title-color) !important;
}

/* ── Title ── */
section.dit-section .dit-tab-title,
section.dit-section h3.dit-tab-title {
    font-family: 'Oswald', 'Arial Narrow', sans-serif !important;
    font-size: var(--dit-title-fs) !important;
    font-weight: 700 !important;
    color: var(--dit-title-color) !important;
    line-height: 1.15 !important;
    letter-spacing: 0.01em !important;
    text-transform: uppercase !important;
    margin: 0 0 6px 0 !important;
    padding: 0 !important;
    padding-bottom: 0 !important;
    transition: color var(--dit-speed) var(--dit-ease) !important;
    position: relative !important;
}

/* ══════════════════════════════════════════════════════
   SUBTITLE — CRITICAL: Hidden by default, visible only
   on the active tab. Uses element+class selector for
   maximum specificity against Divi 5 resets.
   ══════════════════════════════════════════════════════ */
section.dit-section .dit-tab-item .dit-tab-subtitle,
section.dit-section .dit-tab-item p.dit-tab-subtitle,
section.dit-section .dit-tab-text .dit-tab-subtitle,
section.dit-section .dit-tab-text p.dit-tab-subtitle,
section.dit-section article.dit-tab-item p.dit-tab-subtitle {
    font-family: 'Inter', sans-serif !important;
    font-size: var(--dit-subtitle-fs) !important;
    font-weight: 400 !important;
    color: var(--dit-subtitle-color) !important;
    line-height: 1.55 !important;
    margin: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
    max-height: 0 !important;
    opacity: 0 !important;
    overflow: hidden !important;
    visibility: hidden !important;
    transition:
        max-height var(--dit-speed) var(--dit-ease),
        opacity var(--dit-speed) var(--dit-ease),
        margin var(--dit-speed) var(--dit-ease),
        visibility 0s var(--dit-speed) !important;
}

/* Active tab subtitle — VISIBLE */
section.dit-section .dit-tab-item.dit-tab-active .dit-tab-subtitle,
section.dit-section .dit-tab-item.dit-tab-active p.dit-tab-subtitle,
section.dit-section .dit-tab-item.dit-tab-active .dit-tab-text .dit-tab-subtitle,
section.dit-section .dit-tab-item.dit-tab-active .dit-tab-text p.dit-tab-subtitle,
section.dit-section article.dit-tab-item.dit-tab-active p.dit-tab-subtitle {
    max-height: 120px !important;
    opacity: 1 !important;
    margin-top: 4px !important;
    visibility: visible !important;
    transition:
        max-height var(--dit-speed) var(--dit-ease),
        opacity var(--dit-speed) var(--dit-ease),
        margin var(--dit-speed) var(--dit-ease),
        visibility 0s 0s !important;
}

/* ── Arrow ── */
section.dit-section .dit-tab-arrow {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    height: 40px !important;
    flex-shrink: 0 !important;
    margin-top: 2px !important;
    transition:
        transform var(--dit-speed) var(--dit-ease),
        color var(--dit-speed) var(--dit-ease) !important;
    color: var(--dit-arrow-color) !important;
}

section.dit-section .dit-chevron {
    transition:
        transform var(--dit-speed) var(--dit-ease),
        color var(--dit-speed) var(--dit-ease) !important;
}

section.dit-section .dit-tab-item.dit-tab-active .dit-tab-arrow {
    color: var(--dit-active-arrow) !important;
}

section.dit-section .dit-tab-item.dit-tab-active .dit-chevron {
    transform: rotate(-180deg) !important;
    color: var(--dit-active-arrow) !important;
}

/* ── Hover Effects (desktop only) ── */
@media (hover: hover) and (pointer: fine) {
    section.dit-section .dit-tab-item:not(.dit-tab-active):hover .dit-tab-title {
        color: var(--dit-active-arrow) !important;
    }

    section.dit-section .dit-tab-item:not(.dit-tab-active):hover .dit-tab-arrow {
        transform: translateX(4px) !important;
        color: var(--dit-active-arrow) !important;
    }

    section.dit-section .dit-tab-item:not(.dit-tab-active):hover .dit-tab-number {
        color: var(--dit-active-arrow) !important;
    }
}

/* Focus visible for accessibility */
section.dit-section .dit-tab-item:focus-visible .dit-tab-header {
    outline: 2px solid var(--dit-active-arrow) !important;
    outline-offset: 2px !important;
}

/* ── Mobile Image Container (hidden on desktop) ── */
section.dit-section .dit-tab-mobile-image {
    display: none !important;
}

/* ============================================================
   RESPONSIVE — TABLET  (≤ 980px)
   ============================================================ */
@media screen and (max-width: 980px) {
    section.dit-section .dit-wrapper {
        flex-direction: column !important;
        gap: 32px !important;
        padding: 0 28px !important;
    }

    section.dit-section .dit-tabs-col,
    section.dit-section .dit-image-col {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }

    section.dit-section .dit-tabs-col {
        order: 1 !important;
    }

    section.dit-section .dit-image-col {
        order: 2 !important;
        min-height: 340px !important;
    }

    section.dit-section .dit-image-stage {
        min-height: 340px !important;
    }

    section.dit-section {
        padding: 40px 0 !important;
    }

    section.dit-section .dit-tab-title,
    section.dit-section h3.dit-tab-title {
        font-size: calc(var(--dit-title-fs) * 0.85) !important;
    }
}

/* ============================================================
   RESPONSIVE — MOBILE  (≤ 767px)
   ============================================================ */
@media screen and (max-width: 767px) {

    section.dit-section .dit-wrapper {
        padding: 0 18px !important;
        gap: 0 !important;
    }

    section.dit-section {
        padding: 28px 0 !important;
    }

    /* Hide the right-side image panel */
    section.dit-section .dit-image-col {
        display: none !important;
    }

    section.dit-section .dit-tabs-col {
        max-width: 100% !important;
    }

    section.dit-section .dit-tab-header {
        padding: var(--dit-tab-pad) 8px !important;
    }

    /* ── Show inline mobile images ── */
    section.dit-section .dit-tab-mobile-image {
        display: block !important;
        max-height: 0 !important;
        opacity: 0 !important;
        overflow: hidden !important;
        transition:
            max-height var(--dit-speed) var(--dit-ease),
            opacity var(--dit-speed) var(--dit-ease),
            padding var(--dit-speed) var(--dit-ease) !important;
        padding: 0 8px !important;
    }

    section.dit-section .dit-tab-item.dit-tab-active .dit-tab-mobile-image {
        max-height: 600px !important;
        opacity: 1 !important;
        padding: 0 8px 20px 8px !important;
    }

    section.dit-section .dit-mobile-img-wrap {
        border-radius: var(--dit-img-radius) !important;
        overflow: hidden !important;
        transform: scale(0.96) !important;
        opacity: 0 !important;
        transition:
            transform var(--dit-speed) var(--dit-ease),
            opacity var(--dit-speed) var(--dit-ease) !important;
    }

    section.dit-section .dit-tab-item.dit-tab-active .dit-mobile-img-wrap {
        transform: scale(1) !important;
        opacity: 1 !important;
        transition-delay: 120ms !important;
    }

    section.dit-section .dit-mobile-img-wrap img {
        display: block !important;
        width: 100% !important;
        height: auto !important;
        object-fit: cover !important;
        border-radius: var(--dit-img-radius) !important;
        max-width: 100% !important;
    }

    /* Title sizing for mobile */
    section.dit-section .dit-tab-title,
    section.dit-section h3.dit-tab-title {
        font-size: calc(var(--dit-title-fs) * 0.72) !important;
    }

    section.dit-section .dit-tab-left {
        gap: 14px !important;
    }

    /* Subtitle size for mobile */
    section.dit-section .dit-tab-subtitle,
    section.dit-section p.dit-tab-subtitle {
        font-size: calc(var(--dit-subtitle-fs) * 0.92) !important;
    }
}

/* ============================================================
   ANIMATIONS — Premium Micro-interactions
   Removed entrance animations (opacity:0 initial) since
   Divi 5 backward-compat can break CSS animation triggers.
   ============================================================ */

/* Active title reveal */
section.dit-section .dit-tab-item.dit-tab-active .dit-tab-title {
    animation: ditTitleReveal var(--dit-speed) var(--dit-ease) forwards;
}

@keyframes ditTitleReveal {
    0% {
        clip-path: inset(0 100% 0 0);
        opacity: 0.5;
    }
    100% {
        clip-path: inset(0 0 0 0);
        opacity: 1;
    }
}

/* Subtle progress line under active tab */
section.dit-section .dit-tab-item::after {
    content: '' !important;
    position: absolute !important;
    bottom: -1px !important;
    left: 12px !important;
    width: 0 !important;
    height: 2px !important;
    background: var(--dit-active-arrow) !important;
    transition: width var(--dit-speed) var(--dit-ease) !important;
    border-radius: 2px !important;
    z-index: 2 !important;
}

section.dit-section .dit-tab-item.dit-tab-active::after {
    width: calc(100% - 24px) !important;
}

/* ============================================================
   BLUR TRANSITION (Optional cinematic effect)
   ============================================================ */
section.dit-section .dit-image-slide.dit-image-blur-out {
    filter: blur(6px) !important;
    transition:
        opacity calc(var(--dit-speed) * 0.6) var(--dit-ease-out),
        transform calc(var(--dit-speed) * 0.6) var(--dit-ease-out),
        filter calc(var(--dit-speed) * 0.6) var(--dit-ease-out) !important;
}

section.dit-section .dit-image-slide.dit-image-active {
    filter: blur(0) !important;
}

/* ============================================================
   DIVI 5 + DIVI 4 BUILDER OVERRIDES
   ============================================================ */
.et_pb_module .dit-section,
.et_pb_section .dit-section,
.et-db #et-boc .et-l section.dit-section,
.et_divi_builder section.dit-section {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Prevent Divi 5 from adding display/visibility overrides */
section.dit-section .dit-image-col,
section.dit-section .dit-image-stage,
section.dit-section .dit-image-slide,
section.dit-section .dit-image-slide img {
    visibility: visible !important;
}