/* ==========================================================
   MAURADIAN GUTTERS
   D1-R1 FINAL SHELL — ACTUAL DOM

   LEFT   county nav
   TOP    city nav
   CENTER live MapLibre + existing transition
   RIGHT  one vertical video + evidence post
   BOTTOM four benefits
   ========================================================== */

:root {
    --mg-gold: #f4b600;
    --mg-deep: #020a13;
    --mg-panel: #04121e;
    --mg-line: rgba(244,182,0,.30);

    --mg-county-width: 205px;
    --mg-right-width: 300px;
}

/* ----------------------------------------------------------
   BODY / MAIN
   ---------------------------------------------------------- */

html,
body {
    margin: 0 !important;
    padding: 0 !important;
    background: #010812 !important;
}

main {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* ----------------------------------------------------------
   REMOVE REJECTED SECTIONS
   ---------------------------------------------------------- */

.next-cities,
.feature-row {
    display: none !important;
}

/* ----------------------------------------------------------
   TOP = CITY NAVIGATION ONLY
   ---------------------------------------------------------- */

.gold-topbar {
    display: block !important;

    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    min-height: 0 !important;

    background:
        linear-gradient(
            180deg,
            #03111d 0%,
            #020a13 100%
        ) !important;

    border-bottom:
        1px solid rgba(244,182,0,.30) !important;
}

/*
 County nav is moved out of header by JS,
 leaving only the city nav here.
*/

.gold-city-nav {
    display: block !important;

    width: 100% !important;

    margin: 0 !important;
    padding: 9px 12px !important;

    box-sizing: border-box !important;

    background: transparent !important;
}

/* Old instructional material is not part of Gold shell. */
.gold-city-nav .city-rail-instructions,
.gold-city-nav #city-rail-title,
.gold-city-nav .view-all,
.gold-city-nav button.view-all {
    display: none !important;
}

#city-list {
    display: flex !important;
    flex-wrap: nowrap !important;

    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    gap: 7px !important;

    overflow-x: auto !important;
    overflow-y: hidden !important;

    scrollbar-width: thin;
}

#city-list .city-button {
    flex: 0 0 auto !important;

    min-height: 32px !important;

    margin: 0 !important;
    padding: 6px 12px !important;

    border:
        1px solid rgba(255,255,255,.30) !important;

    border-radius: 3px !important;

    background:
        rgba(2,10,19,.92) !important;

    color: #f5f5f5 !important;

    font-size: 11px !important;
    white-space: nowrap !important;
}

#city-list .city-button.active {
    background: var(--mg-gold) !important;
    border-color: var(--mg-gold) !important;

    color: #05080b !important;
    font-weight: 900 !important;
}

/* ----------------------------------------------------------
   APP SHELL = LEFT / CENTER / RIGHT
   ---------------------------------------------------------- */

.app-shell {
    display: grid !important;

    grid-template-columns:
        var(--mg-county-width)
        minmax(0, 1fr)
        var(--mg-right-width) !important;

    grid-template-rows: minmax(680px, auto) !important;

    gap: 10px !important;

    width: 100% !important;
    max-width: none !important;

    margin: 0 !important;
    padding: 10px !important;

    box-sizing: border-box !important;

    align-items: stretch !important;

    background:
        linear-gradient(
            180deg,
            #020b15,
            #010811
        ) !important;
}

/* ----------------------------------------------------------
   LEFT = COUNTY NAV
   ---------------------------------------------------------- */

.gold-county-nav.d1r1-left-county-nav {
    display: flex !important;
    flex-direction: column !important;

    width: auto !important;
    min-width: 0 !important;

    height: 100% !important;

    margin: 0 !important;
    padding: 13px 11px !important;

    box-sizing: border-box !important;

    border:
        1px solid var(--mg-line) !important;

    border-radius: 4px !important;

    background:
        linear-gradient(
            180deg,
            #051724,
            #020b14
        ) !important;

    overflow: hidden !important;
}

.d1r1-county-title {
    flex: 0 0 auto;

    margin: 0 0 11px;
    padding: 2px 4px 10px;

    border-bottom:
        1px solid rgba(244,182,0,.30);

    color: var(--mg-gold);

    font-size: 11px;
    font-weight: 900;

    letter-spacing: .13em;
    text-transform: uppercase;
}

.gold-county-nav #county-buttons {
    display: flex !important;
    flex-direction: column !important;

    gap: 7px !important;

    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow-y: auto !important;
}

.gold-county-nav .county-button {
    width: 100% !important;

    min-height: 32px !important;

    margin: 0 !important;
    padding: 6px 10px !important;

    box-sizing: border-box !important;

    border:
        1px solid rgba(255,255,255,.30) !important;

    border-radius: 18px !important;

    background: transparent !important;
    color: #f3f5f6 !important;

    text-align: left !important;

    font-size: 10px !important;
}

.gold-county-nav .county-button.active {
    background: var(--mg-gold) !important;
    border-color: var(--mg-gold) !important;

    color: #04080b !important;
    font-weight: 900 !important;
}

/* ----------------------------------------------------------
   CENTER = EXISTING MAP-COLUMN — DO NOT REBUILD
   ---------------------------------------------------------- */

.map-column {
    position: relative !important;

    display: block !important;

    width: auto !important;
    min-width: 0 !important;

    height: 100% !important;
    min-height: 680px !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: hidden !important;

    border:
        1px solid rgba(244,182,0,.24) !important;

    border-radius: 4px !important;

    background: #020b14 !important;
}

.map-column .map-surface {
    position: absolute !important;
    inset: 0 !important;

    width: 100% !important;
    height: 100% !important;

    margin: 0 !important;
    padding: 0 !important;
}

.map-column #map {
    position: absolute !important;
    inset: 0 !important;

    width: 100% !important;
    height: 100% !important;

    min-width: 0 !important;
    min-height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
}

/* ----------------------------------------------------------
   EXISTING TRANSITION IS MOVED INTO MAP-COLUMN
   ---------------------------------------------------------- */

.map-column #transition-overlay {
    position: absolute !important;
    inset: 0 !important;

    width: 100% !important;
    height: 100% !important;

    overflow: hidden !important;

    z-index: 60 !important;

    pointer-events: none !important;

    background: transparent !important;
}

.map-column #transition-overlay .space-stage {
    position: absolute !important;
    inset: 0 !important;

    width: 100% !important;
    height: 100% !important;

    margin: 0 !important;
    padding: 28px !important;

    box-sizing: border-box !important;

    overflow: hidden !important;

    background: transparent !important;
}

.map-column #transition-overlay .space-earth {
    display: none !important;
}

/*
 Do not override transition animation/timing.
 Only constrain its visual footprint to the map.
*/
.map-column #transition-overlay .space-copy,
.map-column #transition-overlay .brand-transition {
    max-width: calc(100% - 40px) !important;
    box-sizing: border-box !important;
}

.map-column #transition-overlay img {
    max-width: min(190px, 32%) !important;
    height: auto !important;
}

/* ----------------------------------------------------------
   RIGHT = VIDEO + EVIDENCE POST ONLY
   ---------------------------------------------------------- */

.right-panel {
    display: flex !important;
    flex-direction: column !important;

    gap: 10px !important;

    width: auto !important;
    min-width: 0 !important;

    height: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow-y: auto !important;

    background: transparent !important;
}

/*
 Hide pre-existing descriptive/service copy in this panel.
 Keep only our video and the existing evidence panel.
*/
.right-panel >
    :not(.d1r1-video-card):not(.latest-city-panel) {
    display: none !important;
}

.d1r1-video-card {
    display: block !important;

    flex: 0 0 auto !important;

    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: hidden !important;

    border:
        1px solid rgba(244,182,0,.35) !important;

    border-radius: 4px !important;

    background: #020811 !important;
}

.d1r1-video-heading {
    margin: 0 !important;
    padding: 9px 10px !important;

    border-bottom:
        1px solid rgba(244,182,0,.28) !important;

    color: var(--mg-gold) !important;

    font-size: 10px !important;
    font-weight: 900 !important;

    letter-spacing: .12em !important;
    text-transform: uppercase !important;
}

#d1r1-project-video {
    display: block !important;

    width: 100% !important;

    aspect-ratio: 9 / 16 !important;

    max-height: 500px !important;

    object-fit: cover !important;

    background: #000 !important;
}

.latest-city-panel {
    display: block !important;

    width: 100% !important;

    margin: 0 !important;
    padding: 12px !important;

    box-sizing: border-box !important;

    border:
        1px solid rgba(244,182,0,.26) !important;

    border-radius: 4px !important;

    background: #04111d !important;
}

.latest-city-panel.d1r1-no-real-post {
    display: none !important;
}

/* ----------------------------------------------------------
   BOTTOM = FOUR BENEFITS ONLY
   ---------------------------------------------------------- */

.gold-benefit-bar {
    display: grid !important;

    grid-template-columns:
        repeat(4, minmax(0, 1fr)) !important;

    width: 100% !important;
    max-width: none !important;

    margin: 0 !important;
    padding: 0 !important;

    background: #020a13 !important;

    border-top:
        1px solid rgba(244,182,0,.30) !important;
}

.gold-benefit-bar article {
    min-height: 115px !important;
}

/* ----------------------------------------------------------
   DESKTOP SCALE
   ---------------------------------------------------------- */

@media (max-width: 1180px) {
    :root {
        --mg-county-width: 180px;
        --mg-right-width: 255px;
    }

    .app-shell {
        grid-template-rows:
            minmax(620px, auto) !important;
    }

    .map-column {
        min-height: 620px !important;
    }

    #d1r1-project-video {
        max-height: 445px !important;
    }
}

/* ----------------------------------------------------------
   MOBILE FALLBACK
   ---------------------------------------------------------- */

@media (max-width: 900px) {
    .app-shell {
        grid-template-columns: 1fr !important;
        grid-template-rows: auto !important;
    }

    .gold-county-nav #county-buttons {
        flex-direction: row !important;
        flex-wrap: wrap !important;
    }

    .gold-county-nav .county-button {
        width: auto !important;
    }

    .map-column {
        min-height: 600px !important;
    }

    .right-panel {
        align-items: center !important;
    }

    .d1r1-video-card {
        max-width: 360px !important;
    }

    .gold-benefit-bar {
        grid-template-columns:
            repeat(2, 1fr) !important;
    }
}