/* =========================================================
SUMMIT SYSTEM (LAYOUT + STRUCTURE)
========================================================= */

.summit-placement {

    position: relative;

    width: 100%;

    overflow: hidden;

}

/* Fixed visual layer */

.summit-fixed-wrap {

    position: fixed;

    inset: 0 auto auto 0;

    width: 100%;

    z-index: 1;

    will-change: transform, box-shadow;

    transition: box-shadow 0.12s linear;

}

/* Content layer */

.summit-inner {

    position: relative;

    z-index: 2;

}

/* Layout spacer */

.summit-spacer {

    width: 100%;

}

/* =========================================================
LAYOUT SPACER
========================================================= */

#layoutSpacer {

    height: calc(
        var(--top-ad-height)
        + var(--nav-height)
    );

}

/* =========================================================
SUMMIT BACKGROUND + OVERLAY
========================================================= */

.summit-bg {

    position: absolute;

    inset: 0;

    z-index: 0;

    transform: translateY(0) scale(1.05);

    will-change: transform;

    transition: transform 0.08s linear;

}

.summit-overlay {

    position: absolute;

    inset: 0;

    z-index: 1;

    pointer-events: none;

    will-change: background;

    transition: background 0.08s linear;

}

/* =========================================================
SUMMIT MEDIA
========================================================= */

#top-ad.summit {

    width: 100%;

    height: var(--desktop-summit-height);

    max-height: var(--desktop-summit-height);

    transform-origin: top center;

    will-change: transform;

}

/* Ensure full height inheritance */

#top-ad .row,
#top-ad .col-12,
#top-ad .col-md-8,
#top-ad .col-md-4 {

    height: 100%;

}

/* Media container */

.summit-media {

    position: relative;

    height: 100%;

    overflow: hidden;

}

/* Desktop behavior */

.summit-media img,
.summit-media video {

    width: 100%;

    height: 100%;

    object-fit: cover;

}

/* Video column */

.summit-video {

    border-left: 1px solid rgba(255,255,255,0.15);

}

/* =========================================================
CLICK LAYERS
========================================================= */

.video-click-layer,
.image-click-layer {

    position: absolute;

    inset: 0;

    z-index: 2;

}

.image-click-layer {

    display: none;

}

/* =========================================================
VIDEO UI
========================================================= */

.video-overlay {

    position: absolute;

    inset: 0;

    z-index: 5;

    display: flex;

    justify-content: space-between;

    align-items: flex-end;

    padding: 10px;

    pointer-events: none;

}

.video-controls,
.video-cta {

    pointer-events: auto;

}

/* =========================================================
VIDEO CONTROLS
========================================================= */

.video-controls {

    display: flex;

    gap: 8px;

    opacity: 0;

    transition: 0.2s;

}

.video-controls button {

    width: 36px;

    height: 36px;

    border: none;

    border-radius: 6px;

    cursor: pointer;

    background: rgba(0,0,0,0.6);

    color: #fff;

}

/* =========================================================
VIDEO PROGRESS
========================================================= */

.video-progress {

    position: absolute;

    bottom: 0;

    width: 100%;

    height: 6px;

    background: rgba(255,255,255,0.2);

    cursor: pointer;

    opacity: 0;

    transition: 0.2s;

}

.video-progress-bar {

    width: 0%;

    height: 100%;

    background: #d20e46;

}

/* =========================================================
HOVER REVEAL
========================================================= */

@media (min-width: 576px) {

    .summit-video:hover .video-controls,
    .summit-video:hover .video-progress {

        opacity: 1;

    }

}

/* =========================================================
VIDEO CTA
========================================================= */

.video-cta {

    color: #fff;

    padding: 3px 10px;

    border-radius: 4px;

    font-size: 11px;

    font-weight: 600;

    text-transform: uppercase;

    text-decoration: none;

}

/* =========================================================
UNMUTE HINT
========================================================= */

.unmute-hint {

    position: absolute;

    top: 70%;

    left: 50%;

    transform: translate(-50%, -50%);

    z-index: 6;

    background: rgba(0,0,0,0.6);

    color: #fff;

    padding: 8px 12px;

    border-radius: 8px;

    font-size: 13px;

    cursor: pointer;

    animation: pulse 2s infinite;

    transition: opacity 0.3s ease;

}

@keyframes pulse {

    0%   { transform: translate(-50%, -50%) scale(1); }

    50%  { transform: translate(-50%, -50%) scale(1.05); }

    100% { transform: translate(-50%, -50%) scale(1); }

}

/* =========================================================
CTA BAR
========================================================= */

.summit-cta-bar {

    position: fixed;

    inset: 0 auto auto 0;

    width: 100%;

    height: var(--cta-height);

    z-index: 2000;

    opacity: 0;

    visibility: hidden;

    transform: translateY(-10px);

    overflow: hidden;

    backdrop-filter: blur(6px);

    -webkit-backdrop-filter: blur(6px);

    will-change: opacity, transform;

    transition:
        opacity 0.18s linear,
        transform 0.22s ease-out,
        visibility 0s linear 0.18s;

}



.cta-bg {

    position: absolute;

    inset: 0;

    z-index: 0;

    background-size: cover;

    transform: scale(1.08);

    filter: blur(2px);

    will-change: transform, filter;

}

.cta-overlay {

    position: absolute;

    inset: 0;

    z-index: 1;

}

.summit-cta-bar .container {

    position: relative;

    z-index: 2;

}

/* CTA hover polish */

.summit-cta-bar .btn {

    transition:
        transform 0.15s ease,
        box-shadow 0.15s ease;

}

.summit-cta-bar .btn:hover {

    transform: translateY(-1px);

    box-shadow: 0 4px 12px rgba(0,0,0,0.25);

}

/* =========================================================
MOBILE / TABLET
========================================================= */

@media (max-width: 991.98px) {

    /* Mobile does NOT use spacer reservation */

    #layoutSpacer {

        display: none !important;

        height: 0 !important;

    }

    /* Summit returns to NORMAL FLOW on mobile */

    .summit-fixed-wrap {

        position: relative !important;

        inset: auto !important;

        top: auto !important;

        left: auto !important;

        right: auto !important;

        bottom: auto !important;

        transform: none !important;

        width: 100%;

        height: auto;

        z-index: 1;

        will-change: auto;

    }

    /* Remove desktop equal-height inheritance */

    #top-ad .row,
    #top-ad .col-12,
    #top-ad .col-md-8,
    #top-ad .col-md-4 {

        height: auto !important;

    }

    /* Mobile summit media */

    #top-ad.summit {

        width: 100%;

        height: auto;

        max-height: none;

        transform: none !important;

        will-change: auto;

    }

    .summit-bg {

        transform: none !important;

        will-change: auto;

    }

    .summit-overlay {

        will-change: auto;

    }

    .summit-inner {

        position: relative;

        z-index: 2;

    }

    .summit-inner.container {

        padding-left: 0 !important;

        padding-right: 0 !important;

        max-width: 100% !important;

    }

    .summit-media {

        height: auto;

    }

    .summit-media img {

        display: block;

        width: 100%;

        height: auto;

        object-fit: unset;

        background: #000;

    }

    .summit-video {

        display: none !important;

    }

    .image-click-layer {

        display: block;

    }

    .video-progress {

        display: none;

    }

    /* CTA sticky flow */

    .summit-cta-bar {

        height: 56px;

        z-index: 2000;

    }

}