/* ==========================================
   MEDIA TEXT — Two-column media + text sections
   ========================================== */
.mt {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8rem 6vw;
    box-sizing: border-box;
    overflow: hidden;
    position: relative;
}

/* ─── Inner layout ─── */
.mt__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6vw;
    align-items: center;
    max-width: 1200px;
    width: 100%;
}

/* media-text: text left, media right (default) */
.mt--media-text .mt__text-side { order: 1; }
.mt--media-text .mt__media-side { order: 2; }

/* text-media: media left, text right */
.mt--text-media .mt__media-side { order: 1; }
.mt--text-media .mt__text-side  { order: 2; }

/* ─── Text side ─── */
.mt__text-side {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.mt__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;
    position: relative;
    padding-left: 28px;
    opacity: 0;
    transform: translateY(12px);
}

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

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

.mt__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);
    text-transform: uppercase;
    color: var(--color-white);
    margin: 0 0 2rem 0;
}

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

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

.mt__title em {
    font-style: normal;
    font-weight: inherit;
}

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

.mt__sep {
    width: 40px;
    height: 1px;
    background: var(--gold);
    opacity: 0.5;
    margin-bottom: 2rem;
    transform: scaleX(0);
    transform-origin: left center;
}

.mt__text-wrap {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    max-width: 480px;
}

.mt__text {
    font-family: var(--font-family-base);
    font-weight: var(--font-weight-regular);
    font-size: var(--font-size-body-mobile);
    line-height: var(--line-height-copy);
    color: var(--color-white);
    margin: 0;
    opacity: 0;
    transform: translateY(20px);
}

.mt__text > * {
    margin: 0;
}

.mt__text > * + * {
    margin-top: var(--space-sm);
}

.mt__cta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    align-items: center;
    margin-top: var(--space-xl);
    opacity: 0;
    transform: translateY(20px);
    will-change: transform, opacity;
}

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

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

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

.mt__cta-link--secondary:hover,
.mt__cta-link--secondary:focus-visible {
    background: var(--gold, #C9A24A);
    color: var(--dark-blue, #0B0C33);
}

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

.mt__cta-arrow {
    display: inline-block;
    line-height: 1;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.mt__cta-link:hover .mt__cta-arrow,
.mt__cta-link:focus-visible .mt__cta-arrow {
    transform: translateX(6px);
}

/* ─── Media side ─── */
.mt__media-side {
    display: flex;
    align-items: center;
    justify-content: center;
}

.mt__media-frame {
    position: relative;
    width: clamp(320px, 42vw, 560px);
    aspect-ratio: 1;
}

.mt__media-frame--original {
    width: min(100%, 620px);
    aspect-ratio: auto;
}

/* Totem frame — the 4 seeds with media inside */
.mt__totem-frame {
    position: relative;
    width: 100%;
    height: 100%;
    opacity: 0;
    transform: scale(0.85) rotate(-8deg);
    will-change: transform, opacity;
}

.mt__totem-svg {
    display: block;
    width: 100%;
    height: 100%;
}

/* Canvas overlay for video frames */
.mt__video-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    pointer-events: none;
}

/* Gold ring accent — removed */
.mt__media-ring {
    display: none;
}

.mt__original-media {
    display: block;
    width: 100%;
    margin: 0;
    opacity: 0;
    transform: translateY(20px) scale(0.96);
    will-change: transform, opacity;
}

.mt__original-image,
.mt__original-video {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    border-radius: var(--media-radius, 0);
}

.mt__original-image {
    object-fit: contain;
}

.mt__original-video {
    background: rgba(255, 255, 255, 0.08);
}

.mt__youtube-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: var(--media-radius, 0);
    background: rgba(255, 255, 255, 0.08);
}

.mt__youtube-iframe {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

/* ==========================================
   RESPONSIVE — Mobile
   ========================================== */
@media (max-width: 1023px) {
    .mt {
        padding: 5rem 1.5rem;
        min-height: auto;
    }

    .mt__inner {
        grid-template-columns: 1fr;
        gap: var(--space-3xl);
    }

    /* Always: media on top, text below on mobile */
    .mt--media-text .mt__media-side,
    .mt--text-media .mt__media-side {
        order: 1;
    }

    .mt--media-text .mt__text-side,
    .mt--text-media .mt__text-side {
        order: 2;
    }

    .mt__media-frame {
        width: clamp(260px, 70vw, 380px);
        margin: 0 auto;
    }

    .mt__media-frame--original {
        width: min(100%, 560px);
    }

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

    /* All visible by default on mobile */
    .mt__eyebrow,
    .mt__title-word,
    .mt__sep,
    .mt__text,
    .mt__cta {
        opacity: 1 !important;
        transform: none !important;
    }

    .mt__totem-frame,
    .mt__original-media {
        opacity: 1 !important;
        transform: none !important;
    }

    .mt__media-ring {
        opacity: 1 !important;
        transform: scale(1) !important;
    }
}

/* ==========================================
   REDUCED MOTION
   ========================================== */
@media (prefers-reduced-motion: reduce) {
    .mt__eyebrow,
    .mt__title-word,
    .mt__sep,
    .mt__text,
    .mt__cta,
    .mt__totem-frame,
    .mt__original-media,
    .mt__media-ring {
        opacity: 1 !important;
        transform: none !important;
    }
}

/* ==========================================
   IMAGE LIGHTBOX (click to enlarge)
   ========================================== */
.mt__media-frame--zoomable {
    cursor: zoom-in;
}

.mt__zoom-hint {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: var(--round-radius, 999px);
    background: rgba(var(--color-dark-blue-rgb), 0.55);
    border: 1px solid rgba(var(--color-gold-rgb), 0.5);
    color: var(--gold);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    opacity: 0;
    transform: scale(0.85);
    transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: none;
}

.mt__zoom-hint svg {
    width: 20px;
    height: 20px;
}

.mt__media-frame--zoomable:hover .mt__zoom-hint,
.mt__media-frame--zoomable:focus-visible .mt__zoom-hint {
    opacity: 1;
    transform: scale(1);
}

.mt__media-frame--zoomable:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 4px;
}

/* Popup overlay (moved to <body> by JS) */
.mt__lightbox {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: clamp(1.25rem, 4vw, 3rem);
}

.mt__lightbox.is-open {
    display: flex;
}

.mt__lightbox-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(var(--color-dark-blue-rgb), 0.92);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    cursor: zoom-out;
}

.mt__lightbox-dialog {
    position: relative;
    z-index: 1;
    display: flex;
    max-width: min(94vw, 1400px);
    max-height: 90vh;
}

.mt__lightbox-image {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 90vh;
    object-fit: contain;
    border-radius: 4px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
    transform-origin: center center;
    will-change: transform;
    touch-action: none;
}

/* Zoomed image: draggable to pan. */
.mt__lightbox.is-zoomed .mt__lightbox-image {
    cursor: grab;
}

.mt__lightbox.is-grabbing .mt__lightbox-image {
    cursor: grabbing;
}

.mt__lightbox-close {
    position: absolute;
    top: clamp(1rem, 2.5vw, 1.75rem);
    right: clamp(1rem, 2.5vw, 1.75rem);
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    padding: 0;
    font-size: 2rem;
    line-height: 1;
    color: var(--color-white);
    background: rgba(var(--color-white-rgb), 0.08);
    border: 1px solid rgba(var(--color-white-rgb), 0.25);
    border-radius: var(--round-radius, 999px);
    cursor: pointer;
    transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease, transform 0.3s ease;
}

.mt__lightbox-close:hover,
.mt__lightbox-close:focus-visible {
    background: var(--gold);
    border-color: var(--gold);
    color: var(--color-dark-blue);
    transform: rotate(90deg);
}

/* Zoom controls (− / +) — fixed bottom-center, above the (possibly scaled) image. */
.mt__lightbox-zoom {
    position: fixed;
    bottom: clamp(1rem, 3vh, 2rem);
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    display: flex;
    gap: 0.5rem;
    padding: 0.4rem;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.mt__lightbox-zoom-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    font-size: 1.6rem;
    line-height: 1;
    color: var(--color-white);
    background: rgba(var(--color-white-rgb), 0.08);
    border: 1px solid rgba(var(--color-white-rgb), 0.25);
    border-radius: var(--round-radius, 999px);
    cursor: pointer;
    transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

.mt__lightbox-zoom-btn:hover:not(:disabled),
.mt__lightbox-zoom-btn:focus-visible:not(:disabled) {
    background: var(--gold);
    border-color: var(--gold);
    color: var(--color-dark-blue);
}

.mt__lightbox-zoom-btn:disabled {
    opacity: 0.4;
    cursor: default;
}