/* ==========================================
   DOUBLE MEDIA — Dual media expand panels
   ========================================== */
.double-media {
    position: relative;
    width: 100%;
    height: 100vh;
    background: var(--bg-color);
    overflow: hidden;
}

/* --- Decorative horizontal bars (wheat field) --- */
.dm__bars {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    z-index: 0;
    pointer-events: none;
    padding-top: 10vh;
    box-sizing: border-box;
}

.dm__bar {
    position: relative;
    width: 100%;
    height: 10vh;
    margin-bottom: 10vh;
    background: rgba(var(--color-accent-blue-rgb), 0.06);
}

.dm__bar-gold {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(var(--color-bright-blue-rgb), 0.3);
    transform: scaleX(0);
    transform-origin: left center;
}

/* --- Media wrappers (expand from left) --- */
.dm__media-wrap {
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    overflow: hidden;
    will-change: width;
}

.dm__media-wrap--1 { z-index: 1; background: var(--bg-color); }
.dm__media-wrap--2 { z-index: 3; background: var(--bg-color); }

.dm__media-wrap :is(video, img),
.dm__media {
    display: block;
    width: 100vw;
    min-width: 100vw;
    height: 100%;
    object-fit: cover;
    opacity: 0.18;
    filter: grayscale(80%) contrast(1.05);
}

.dm__mobile-media {
    display: none;
}

/* --- Content overlays --- */
.dm__content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 60px 4vw 0px 8vw;
    box-sizing: border-box;
    z-index: 5;
    opacity: 0;
    pointer-events: none;
}

/* --- Eyebrow --- */
.dm__eyebrow {
    display: inline-block;
    font-family: var(--font-family-base);
    font-size: var(--font-size-eyebrow);
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-eyebrow);
    color: var(--gold);
    margin-bottom: 1.8rem;
    opacity: 0;
    transform: translateX(-40px);
    position: relative;
    padding-left: 28px;
}

.dm__eyebrow::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 16px;
    height: 1px;
    background: var(--gold);
    transform: translateY(-50%) scaleX(0);
    transform-origin: left center;
    transition: var(--transition-transform-medium);
}

.dm__eyebrow.is-visible::before {
    transform: translateY(-50%) scaleX(1);
}

/* --- Title --- */
.dm__title {
    font-family: var(--font-family-base);
    font-weight: var(--font-weight-black);
    font-size: var(--font-size-h2);
    line-height: var(--line-height-heading-relaxed);
    text-transform: uppercase;
    color: var(--color-white);
    margin: 0 0 2rem 0;
    max-width: 680px;
}

.dm__title-line {
    display: block;
    overflow: hidden;
    padding-bottom: 0.08em;
}

.dm__title-word {
    display: inline-block;
    transform: translateY(105%);
    will-change: transform;
}

.dm__title-word em {
    font-style: normal;
}

.dm__gold {
    color: var(--gold);
}

/* --- Text --- */
.dm__text-wrap {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    max-width: 520px;
}

.dm__text {
    font-family: var(--font-family-base);
    font-weight: var(--font-weight-regular);
    font-size: var(--font-size-body);
    line-height: var(--line-height-copy);
    color: var(--color-white);
    margin: 0;
    opacity: 0;
    transform: translateX(-40px);
}

.dm__text > * {
    margin: 0;
}

.dm__text > * + * {
    margin-top: var(--space-xs);
}

.dm__text :is(ul, ol) {
    padding-left: 1.25em;
}

.dm__cta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    align-items: center;
    max-width: 520px;
    margin-top: var(--space-xl);
    opacity: 0;
    transform: translateX(-40px);
    will-change: transform, opacity;
}

.dm__cta-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: var(--button-padding);
    border: 1px solid var(--gold);
    border-radius: var(--button-radius);
    background: var(--gold);
    color: var(--dark-blue);
    font-family: var(--font-family-base);
    font-size: var(--font-size-button, 0.95rem);
    font-weight: var(--font-weight-medium);
    line-height: 1.1;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-button);
    transition:
        background 0.35s cubic-bezier(0.16, 1, 0.3, 1),
        color 0.35s cubic-bezier(0.16, 1, 0.3, 1),
        border-color 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.dm__cta-link--secondary {
    background: transparent;
    color: var(--gold);
}

.dm__cta-link:hover,
.dm__cta-link:focus-visible {
    background: transparent;
    color: var(--gold);
}

.dm__cta-link--secondary:hover,
.dm__cta-link--secondary:focus-visible {
    background: var(--gold);
    color: var(--dark-blue);
}

.dm__cta-link:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 3px;
}

/* ==========================================
   RESPONSIVE
   ========================================== */
@media (max-width: 1023px) {
    .double-media {
        height: auto !important;
        display: flex;
        flex-direction: column;
        overflow: visible;
    }

    /* Hide decorative bars on mobile */
    .dm__bars {
        display: none;
    }

    .dm__content--1 { order: 1; }
    .dm__content--2 { order: 2; }

    .dm__media-wrap {
        display: none !important;
    }

    .dm__mobile-media {
        display: block;
        position: absolute;
        inset: 0;
        z-index: 0;
        pointer-events: none;
    }

    .dm__mobile-media::after {
        content: '';
        position: absolute;
        inset: 0;
        background: rgba(var(--color-dark-blue-rgb), 0.62);
        pointer-events: none;
    }

    .dm__mobile-media-el {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        opacity: 0.66;
        filter: grayscale(40%) contrast(1);
    }

    .dm__content {
        position: relative !important;
        width: 100%;
        min-height: 100svh;
        height: auto;
        display: flex;
        justify-content: center;
        overflow: hidden;
        opacity: 1 !important;
        pointer-events: auto !important;
        padding: 2.5rem 1.5rem 4rem;
    }

    .dm__eyebrow,
    .dm__title,
    .dm__text-wrap,
    .dm__cta {
        position: relative;
        z-index: 1;
    }

    .dm__eyebrow,
    .dm__text,
    .dm__cta {
        opacity: 1 !important;
        transform: none !important;
    }

    .dm__title-word {
        transform: none !important;
    }

    .dm__eyebrow::before {
        transform: translateY(-50%) scaleX(1);
    }

    .dm__title {
        font-size: var(--font-size-h3-4);
    }

    .dm__text {
        font-size: var(--font-size-sm-6);
    }

    .dm__text-wrap {
        max-width: 100%;
    }

    .dm__cta {
        max-width: 100%;
    }
}

/* ==========================================
   REDUCED MOTION
   ========================================== */
@media (prefers-reduced-motion: reduce) {
    .dm__media-wrap {
        width: 100% !important;
    }

    .dm__content {
        opacity: 1 !important;
        pointer-events: auto !important;
    }

    .dm__eyebrow,
    .dm__text,
    .dm__cta {
        opacity: 1 !important;
        transform: none !important;
    }

    .dm__title-word {
        transform: none !important;
    }

    .dm__eyebrow::before {
        transform: translateY(-50%) scaleX(1) !important;
    }
}