/* ============================================================
   nl-svgDraw.css
   Night life section grid/media layout — all selectors scoped
   to #nightlifeBody to avoid conflicts with mustang-svgDraw.css.
    Source: migrated from legacy prototype layout
   ============================================================ */

#nightlifeBody .vkDivsNSvg {
    position: relative;
    /* 90% of the viewport width, centered */
    width: 90%;
    max-width: 100%;
    margin: 0 auto;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    overflow: hidden;
}

/* Ensure fullscreen videos inside the vk container respect its width */
#nightlifeBody .vkDivsNSvg .fullscreen-video,
#nightlifeBody .vkDivsNSvg .velvetvideo .fullscreen-video,
#nightlifeBody .vkDivsNSvg #velvetvideo .fullscreen-video {
    width: 100%;
    max-width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

#nightlifeBody .roadmapCon {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow-x: clip;
    overflow-y: visible;
    scrollbar-width: none;
}

#nightlifeBody .roadmapCon::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
}

#nightlifeBody .velvetvideo {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 5%;
    pointer-events: auto;
}

#nightlifeBody #velvetvideo,
#nightlifeBody #velvetvideo .fullscreen-video {
    pointer-events: auto;
}

/* Shorten the top shine for the large velvet video */
#nightlifeBody #velvetvideo .vkMediaFrame .shine,
#nightlifeBody #velvetvideo .vkMediaFrame .shine::before,
#nightlifeBody #velvetvideo .vkMediaFrame .shine::after {
    width: 30%;
    right: calc(var(--border) * -1);
    top: calc(var(--border) * -1);
}

/* Smoother, softer shine for velvet video */
#nightlifeBody #velvetvideo .vkMediaFrame .shine,
#nightlifeBody #velvetvideo .vkMediaFrame .shine::before,
#nightlifeBody #velvetvideo .vkMediaFrame .shine::after {
    -webkit-mask: none !important;
            mask: none !important;
    background: linear-gradient(90deg, rgba(255,255,255,0.95), rgba(255,255,255,0.55) 40%, rgba(255,255,255,0.08) 100%);
    filter: blur(6px);
}

#nightlifeBody #velvetvideo .vkMediaFrame .glow,
#nightlifeBody #velvetvideo .vkMediaFrame .glow::before,
#nightlifeBody #velvetvideo .vkMediaFrame .glow::after {
    -webkit-mask: none !important;
            mask: none !important;
    filter: blur(14px) saturate(1) brightness(0.6);
}

#nightlifeBody .headlines {
    display: flex;
    flex-direction: column;
    align-items: center;
}

#nightlifeBody .nl-vkGrid {
    display: flex;
    flex-direction: column;
    width: 100%;
    overflow-x: clip;
    overflow-y: visible;
    scrollbar-width: none;
}

#nightlifeBody .nl-vkGrid::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
}

/* Per-row grid so we can alternate column ratios */
#nightlifeBody .nl-vkRow {
    display: grid;
    grid-template-columns: 2fr 1fr; /* default: image larger */
    align-items: stretch;
    min-height: 50vh;
}

#nightlifeBody .nl-vkRow--reverse {
    grid-template-columns: 1fr 2fr;
}

#nightlifeBody .nl-vkRow--full {
    grid-template-columns: 1fr;
}

#nightlifeBody .nl-vkRow {
    width: 100%;
    gap: 0.75rem;
}

#nightlifeBody .nl-vkRow > .nl-vkImg,
#nightlifeBody .nl-vkRow > .nl-vkTextCon {
    height: 100%;
    min-width: 0;
    box-sizing: border-box;
}

#nightlifeBody .nl-vkTextCon.nl-vKitem-2-1,
#nightlifeBody .nl-vkImg.nl-vKitem-2-img,
#nightlifeBody .nl-vkImg.nl-vKitem-3-img {
    --vk-glass-hue1: 255;
    --vk-glass-hue2: 222;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border-radius: 22px;
    border: 1px solid hsl(var(--vk-glass-hue2) 18% 30% / 0.3);
    background:
        linear-gradient(235deg, hsl(var(--vk-glass-hue1) 50% 18% / 0.3), hsl(var(--vk-glass-hue1) 50% 18% / 0) 33%),
        linear-gradient(45deg, hsl(var(--vk-glass-hue2) 50% 18% / 0.3), hsl(var(--vk-glass-hue2) 50% 18% / 0) 33%);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
}

#nightlifeBody .nl-vkTextCon.nl-vKitem-2-1 {
    width: 100%;
    max-width: 100%;
}

/* The global .tier-model[data-poster] { aspect-ratio: 16/9 } rule would
   lock these cells to a wide 16:9 box instead of letting them fill the
   full grid-row height.  Override it here so the canvas occupies the
   complete cell, matching desktop behaviour on touch/iPad. */
#nightlifeBody .nl-vkTextCon.tier-model[data-poster],
#nightlifeBody .nl-vkImg.tier-model[data-poster] {
    aspect-ratio: unset;
    min-height: 240px;
}

#nightlifeBody .nl-vkTextCon.nl-vKitem-2-1 canvas,
#nightlifeBody .nl-vkTextCon.nl-vKitem-2-1 img,
#nightlifeBody .nl-vkTextCon.nl-vKitem-2-1 video,
#nightlifeBody .nl-vkTextCon.nl-vKitem-2-1 picture,
#nightlifeBody .nl-vkTextCon.nl-vKitem-2-1 picture > img,
#nightlifeBody .nl-vkImg.nl-vKitem-2-img canvas,
#nightlifeBody .nl-vkImg.nl-vKitem-2-img img,
#nightlifeBody .nl-vkImg.nl-vKitem-2-img video,
#nightlifeBody .nl-vkImg.nl-vKitem-2-img picture,
#nightlifeBody .nl-vkImg.nl-vKitem-2-img picture > img,
#nightlifeBody .nl-vkImg.nl-vKitem-3-img canvas,
#nightlifeBody .nl-vkImg.nl-vKitem-3-img img,
#nightlifeBody .nl-vkImg.nl-vKitem-3-img picture,
#nightlifeBody .nl-vkImg.nl-vKitem-3-img picture > img,
#nightlifeBody .nl-vkImg.nl-vKitem-3-img video {
    border-radius: inherit;
}

#nightlifeBody .media-row {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    justify-content: flex-start;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    height: 100%;
    box-sizing: border-box;
}

#nightlifeBody .media-row > img,
#nightlifeBody .media-row > video,
#nightlifeBody .media-row > picture,
#nightlifeBody .media-row > picture > img {
    flex: 0 0 auto;
    min-width: 0;
    width: auto;
    height: 100%;
    object-fit: cover;
    display: block;
    background: #000;
}

#nightlifeBody .nl-vkRow .media-row {
    justify-content: flex-start;
    align-items: flex-start;
    overflow: hidden;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

#nightlifeBody .nl-vkRow .media-row > img,
#nightlifeBody .nl-vkRow .media-row > video,
#nightlifeBody .nl-vkRow .media-row > picture,
#nightlifeBody .nl-vkRow .media-row > picture > img,
#nightlifeBody .nl-vkRow .media-row > .playbtn-host,
#nightlifeBody .nl-vkRow .media-row > .dynamic-video-controls-wrap,
#nightlifeBody .nl-vkRow .media-row > .vkMediaFrame,
#nightlifeBody .nl-vkRow .media-row > .nl-vkMediaFrame {
    flex: 0 0 auto;
    min-width: 0;
    max-width: 100%;
    width: auto;
    height: var(--vk-media-row-height, auto);
    display: block;
    object-fit: contain;
}

#nightlifeBody .nl-vkRow .media-row > .playbtn-host > .dynamic-video-controls-wrap,
#nightlifeBody .nl-vkRow .media-row > .dynamic-video-controls-wrap,
#nightlifeBody .nl-vkRow .media-row > .vkMediaFrame > .playbtn-host,
#nightlifeBody .nl-vkRow .media-row > .vkMediaFrame > .dynamic-video-controls-wrap,
#nightlifeBody .nl-vkRow .media-row > .vkMediaFrame > .playbtn-host > .dynamic-video-controls-wrap,
#nightlifeBody .nl-vkRow .media-row > .nl-vkMediaFrame > .playbtn-host,
#nightlifeBody .nl-vkRow .media-row > .nl-vkMediaFrame > .dynamic-video-controls-wrap,
#nightlifeBody .nl-vkRow .media-row > .nl-vkMediaFrame > .playbtn-host > .dynamic-video-controls-wrap {
    width: 100%;
    max-width: 100%;
    height: 100%;
    min-width: 0;
    display: block;
    box-sizing: border-box;
}

#nightlifeBody .nl-vkRow .media-row > .playbtn-host > .dynamic-video-controls-wrap > video,
#nightlifeBody .nl-vkRow .media-row > .dynamic-video-controls-wrap > video,
#nightlifeBody .nl-vkRow .media-row > .vkMediaFrame > .playbtn-host > .dynamic-video-controls-wrap > video,
#nightlifeBody .nl-vkRow .media-row > .vkMediaFrame > .dynamic-video-controls-wrap > video,
#nightlifeBody .nl-vkRow .media-row > .nl-vkMediaFrame > .playbtn-host > .dynamic-video-controls-wrap > video {
    width: 100%;
    max-width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
}

/* Nightlife bottom row grid */
#nightlifeBody .nightlife-bottom-media-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
    align-items: stretch;
    justify-content: center;
    justify-items: stretch;
    box-sizing: border-box;
    width: 100%;
}

#nightlifeBody .nightlife-bottom-media-row > * {
    width: 100%;
    height: 100%;
    display: block;
    box-sizing: border-box;
}

#nightlifeBody .nightlife-bottom-media-row > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: #000;
}

#nightlifeBody .nightlife-bottom-media-row > video {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
}

#nightlifeBody .nightlife-bottom-media-row > picture {
    width: 100%;
    height: 100%;
    display: block;
    box-sizing: border-box;
}

#nightlifeBody .nightlife-bottom-media-row > picture > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: #000;
    display: block;
}

/* When nl-vkMediaLayout wraps row media into vkMediaFrame, keep cells full-width. */
#nightlifeBody .nightlife-bottom-media-row > .vkMediaFrame {
    width: 100%;
    height: 100%;
}

@media (max-width: 900px) {
    #nightlifeBody .nightlife-bottom-media-row {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 480px) {
    #nightlifeBody .nightlife-bottom-media-row {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

#nightlifeBody .nl-vkTextCon,
#nightlifeBody .nl-vkImg {
    min-height: 50vh;
    height: 100%;
    box-sizing: border-box;
}

#nightlifeBody .nl-vKitem-1 {
    grid-column-start: 1;
    grid-row-start: 1;
}

#nightlifeBody .nl-vKitem-2-img {
    grid-column-start: 1;
    grid-row-start: 2;
}

#nightlifeBody .nl-vKitem-1-1 {
    grid-column-start: 1;
    grid-row-start: 2;
}

#nightlifeBody .nl-vKitem-2 {
    grid-column-start: 2;
    grid-row-start: 2;
}

#nightlifeBody .nl-vKitem-3 {
    grid-column-start: 1;
    grid-row-start: 3;
}

#nightlifeBody .nl-vKitem-3-img {
    grid-column-start: 2;
    grid-row-start: 3;
}

#nightlifeBody .nl-vKitem-4 {
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 4;
}

#nightlifeBody .nl-vkImg img {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: cover;
    display: block;
    background-color: navy;
}

#nightlifeBody .nl-vkImg,
#nightlifeBody .nl-vKitem-1 {
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

#nightlifeBody .nl-vkImg img,
#nightlifeBody .nl-vkImg video,
#nightlifeBody .nl-vkImg picture > img,
#nightlifeBody .nl-vKitem-1 img,
#nightlifeBody .nl-vKitem-1 video,
#nightlifeBody .nl-vKitem-1 picture > img {
    height: auto;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    display: block;
}

/* Card-flip animation */
#nightlifeBody .callout-socials-card-layout {
    perspective: 1400px;
    -webkit-perspective: 1400px;
}

#nightlifeBody .callout-socials-card-layout .nl-vkImg,
#nightlifeBody .callout-socials-card-layout .nl-vKitem-1 {
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
}

#nightlifeBody .callout-socials-card-layout .nl-vkImg img,
#nightlifeBody .callout-socials-card-layout .nl-vkImg video,
#nightlifeBody .callout-socials-card-layout .nl-vKitem-1 img,
#nightlifeBody .callout-socials-card-layout .nl-vKitem-1 video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform-origin: 50% 50%;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform: translateZ(0) rotateX(0deg);
    animation-name: nl-cardFlipIn;
    animation-duration: 700ms;
    animation-fill-mode: both;
    animation-timing-function: cubic-bezier(.2,.9,.25,1);
}

@keyframes nl-cardFlipIn {
    0%   { transform: translateZ(-220px) rotateX(90deg); opacity: 0; }
    45%  { transform: translateZ(40px)   rotateX(-12deg); opacity: 1; }
    100% { transform: translateZ(0)      rotateX(0deg);   opacity: 1; }
}

#nightlifeBody .callout-socials-card-layout .nl-vkImg:nth-child(1) img  { animation-delay:   0ms; }
#nightlifeBody .callout-socials-card-layout .nl-vkImg:nth-child(1) video  { animation-delay:   0ms; }
#nightlifeBody .callout-socials-card-layout .nl-vkImg:nth-child(2) img  { animation-delay:  80ms; }
#nightlifeBody .callout-socials-card-layout .nl-vkImg:nth-child(2) video  { animation-delay:  80ms; }
#nightlifeBody .callout-socials-card-layout .nl-vkImg:nth-child(3) img  { animation-delay: 160ms; }
#nightlifeBody .callout-socials-card-layout .nl-vkImg:nth-child(3) video  { animation-delay: 160ms; }
#nightlifeBody .callout-socials-card-layout .nl-vkImg:nth-child(4) img  { animation-delay: 240ms; }
#nightlifeBody .callout-socials-card-layout .nl-vkImg:nth-child(4) video  { animation-delay: 240ms; }
#nightlifeBody .callout-socials-card-layout .nl-vkImg:nth-child(5) img  { animation-delay: 320ms; }
#nightlifeBody .callout-socials-card-layout .nl-vkImg:nth-child(5) video  { animation-delay: 320ms; }
#nightlifeBody .callout-socials-card-layout .nl-vkImg:nth-child(6) img  { animation-delay: 400ms; }
#nightlifeBody .callout-socials-card-layout .nl-vkImg:nth-child(6) video  { animation-delay: 400ms; }
#nightlifeBody .callout-socials-card-layout .nl-vkImg:nth-child(7) img  { animation-delay: 480ms; }
#nightlifeBody .callout-socials-card-layout .nl-vkImg:nth-child(7) video  { animation-delay: 480ms; }
#nightlifeBody .callout-socials-card-layout .nl-vkImg:nth-child(8) img  { animation-delay: 560ms; }
#nightlifeBody .callout-socials-card-layout .nl-vkImg:nth-child(8) video  { animation-delay: 560ms; }
#nightlifeBody .callout-socials-card-layout .nl-vkImg:nth-child(9) img  { animation-delay: 640ms; }
#nightlifeBody .callout-socials-card-layout .nl-vkImg:nth-child(9) video  { animation-delay: 640ms; }
#nightlifeBody .callout-socials-card-layout .nl-vkImg:nth-child(10) img { animation-delay: 720ms; }
#nightlifeBody .callout-socials-card-layout .nl-vkImg:nth-child(10) video { animation-delay: 720ms; }
#nightlifeBody .callout-socials-card-layout .nl-vkImg:nth-child(11) img { animation-delay: 800ms; }
#nightlifeBody .callout-socials-card-layout .nl-vkImg:nth-child(11) video { animation-delay: 800ms; }
#nightlifeBody .callout-socials-card-layout .nl-vkImg:nth-child(12) img { animation-delay: 880ms; }
#nightlifeBody .callout-socials-card-layout .nl-vkImg:nth-child(12) video { animation-delay: 880ms; }

#nightlifeBody .callout-socials-card-layout .nl-vKitem-1:nth-child(1) img  { animation-delay:   0ms; }
#nightlifeBody .callout-socials-card-layout .nl-vKitem-1:nth-child(1) video  { animation-delay:   0ms; }
#nightlifeBody .callout-socials-card-layout .nl-vKitem-1:nth-child(2) img  { animation-delay:  80ms; }
#nightlifeBody .callout-socials-card-layout .nl-vKitem-1:nth-child(2) video  { animation-delay:  80ms; }
#nightlifeBody .callout-socials-card-layout .nl-vKitem-1:nth-child(3) img  { animation-delay: 160ms; }
#nightlifeBody .callout-socials-card-layout .nl-vKitem-1:nth-child(3) video  { animation-delay: 160ms; }
#nightlifeBody .callout-socials-card-layout .nl-vKitem-1:nth-child(4) img  { animation-delay: 240ms; }
#nightlifeBody .callout-socials-card-layout .nl-vKitem-1:nth-child(4) video  { animation-delay: 240ms; }

#nightlifeBody .callout-socials-card-layout:hover .nl-vkImg img,
#nightlifeBody .callout-socials-card-layout:hover .nl-vkImg video,
#nightlifeBody .callout-socials-card-layout:hover .nl-vKitem-1 img,
#nightlifeBody .callout-socials-card-layout:hover .nl-vKitem-1 video {
    animation-name: nl-cardFlipHover;
    animation-duration: 600ms;
    animation-timing-function: cubic-bezier(.25,.8,.25,1);
}

@keyframes nl-cardFlipHover {
    0%   { transform: translateZ(0) rotateX(0deg); }
    50%  { transform: translateZ(60px) rotateX(-180deg); }
    100% { transform: translateZ(0) rotateX(0deg); }
}

#nightlifeBody .nl-vkImg.nl-vKitem-1 img,
#nightlifeBody .nl-vkImg.nl-vKitem-1 video,
#nightlifeBody .nl-vkImg.nl-vKitem-1 picture > img,
#nightlifeBody .nl-vKitem-1 .nl-vkImg img,
#nightlifeBody .nl-vKitem-1 .nl-vkImg video,
#nightlifeBody .nl-vKitem-1 .nl-vkImg picture > img,
#nightlifeBody .nl-vkImg.nl-vKitem-2 img,
#nightlifeBody .nl-vkImg.nl-vKitem-2 video,
#nightlifeBody .nl-vkImg.nl-vKitem-2 picture > img,
#nightlifeBody .nl-vKitem-2 .nl-vkImg img,
#nightlifeBody .nl-vKitem-2 .nl-vkImg video,
#nightlifeBody .nl-vKitem-2 .nl-vkImg picture > img,
#nightlifeBody .nl-vkImg.nl-vKitem-2-img img,
#nightlifeBody .nl-vkImg.nl-vKitem-2-img video,
#nightlifeBody .nl-vkImg.nl-vKitem-2-img picture > img,
#nightlifeBody .nl-vKitem-2-img .nl-vkImg img,
#nightlifeBody .nl-vKitem-2-img .nl-vkImg video,
#nightlifeBody .nl-vKitem-2-img .nl-vkImg picture > img,
#nightlifeBody .nl-vkImg.nl-vKitem-3-img img,
#nightlifeBody .nl-vkImg.nl-vKitem-3-img video,
#nightlifeBody .nl-vkImg.nl-vKitem-3-img picture > img,
#nightlifeBody .nl-vKitem-3-img .nl-vkImg img,
#nightlifeBody .nl-vKitem-3-img .nl-vkImg video,
#nightlifeBody .nl-vKitem-3-img .nl-vkImg picture > img {
    height: auto;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    display: block;
}

#nightlifeBody .nl-vkRow,
#nightlifeBody .nl-vkImg,
#nightlifeBody .nl-vKitem-1,
#nightlifeBody .nl-vKitem-2,
#nightlifeBody .nl-vKitem-2-img,
#nightlifeBody .nl-vKitem-3-img,
#nightlifeBody .nl-vkImg .media-row,
#nightlifeBody .nl-vKitem-1 .media-row,
#nightlifeBody .nl-vKitem-2 .media-row,
#nightlifeBody .nl-vKitem-2-img .media-row,
#nightlifeBody .nl-vKitem-3-img .media-row {
    box-sizing: border-box;
    min-height: 0;
    overflow: visible;
}

#nightlifeBody .nl-vkRow.nl-vkRow--justified,
#nightlifeBody .nl-vkRow.nl-vkRow--justified > .nl-vkImg,
#nightlifeBody .nl-vkRow.nl-vkRow--justified > .nl-vkTextCon,
#nightlifeBody .nl-vkRow.nl-vkRow--justified .nl-vkImg,
#nightlifeBody .nl-vkRow.nl-vkRow--justified .media-row {
    min-height: 0;
    height: auto;
}

@media (max-width: 800px) {
    #nightlifeBody .vkDivsNSvg {
        width: 100%;
    }

    #nightlifeBody .nl-vkGrid {
        grid-template-columns: 1fr;
        grid-auto-rows: auto;
        row-gap: 1.5rem;
        width: 100%;
    }

    /* Remove the 50vh floor on mobile so empty/short rows don't create
       a tall gap above the .nl-vkRow--full bottom row. */
    #nightlifeBody .nl-vkRow {
        width: 100%;
        min-height: 0;
    }

    /* On mobile, tier-model cells can be removed at runtime.
       Reset reverse rows so remaining media uses the full row width. */
    #nightlifeBody .roadmapCon .nl-vkRow.nl-vkRow--reverse {
        grid-template-columns: 1fr;
    }

    #nightlifeBody .roadmapCon .nl-vkRow.nl-vkRow--normal {
        grid-template-columns: 1fr;
    }

    #nightlifeBody .roadmapCon .nl-vkRow.nl-vkRow--reverse > .nl-vkImg,
    #nightlifeBody .roadmapCon .nl-vkRow.nl-vkRow--reverse > .nl-vkTextCon,
    #nightlifeBody .roadmapCon .nl-vkRow.nl-vkRow--reverse > .nl-vKitem-2,
    #nightlifeBody .roadmapCon .nl-vkRow.nl-vkRow--reverse > .nl-vKitem-2-img {
        grid-column: 1;
        grid-row: auto;
    }

    #nightlifeBody .roadmapCon .nl-vkRow.nl-vkRow--normal > .nl-vkImg,
    #nightlifeBody .roadmapCon .nl-vkRow.nl-vkRow--normal > .nl-vkTextCon,
    #nightlifeBody .roadmapCon .nl-vkRow.nl-vkRow--normal > .nl-vKitem-1,
    #nightlifeBody .roadmapCon .nl-vkRow.nl-vkRow--normal > .nl-vKitem-2-1,
    #nightlifeBody .roadmapCon .nl-vkRow.nl-vkRow--normal > .nl-vKitem-3,
    #nightlifeBody .roadmapCon .nl-vkRow.nl-vkRow--normal > .nl-vKitem-3-img {
        grid-column: 1;
        grid-row: auto;
    }

    #nightlifeBody .nl-vKitem-1,
    #nightlifeBody .nl-vKitem-2,
    #nightlifeBody .nl-vKitem-2-1,
    #nightlifeBody .nl-vkImg,
    #nightlifeBody .nl-vkTextCon {
        height: auto;
        min-height: 0;
    }

    #nightlifeBody .nl-vkRow .media-row {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: stretch;
        justify-items: stretch;
        gap: 0.75rem;
        height: auto !important;
    }

    #nightlifeBody .nl-vKitem-3 .media-row {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    #nightlifeBody .nl-vKitem-1 .media-row,
    #nightlifeBody .nl-vKitem-2 .media-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    #nightlifeBody .nl-vKitem-1 .media-row > picture,
    #nightlifeBody .nl-vKitem-2 .media-row > picture {
        grid-row: 1;
    }

    /* Keep all siblings (image + video) on the same row at equal width.
       Force square aspect so landscape pictures and portrait videos
       visually match in size and never exceed their grid cell. */
    #nightlifeBody .nl-vKitem-1 .media-row > video,
    #nightlifeBody .nl-vKitem-2 .media-row > video,
    #nightlifeBody .nl-vKitem-1 .media-row > .playbtn-host,
    #nightlifeBody .nl-vKitem-2 .media-row > .playbtn-host,
    #nightlifeBody .nl-vKitem-1 .media-row > .nl-vkMediaFrame:has(video),
    #nightlifeBody .nl-vKitem-2 .media-row > .nl-vkMediaFrame:has(video),
    #nightlifeBody .nl-vKitem-1 .media-row > .vkMediaFrame:has(video),
    #nightlifeBody .nl-vKitem-2 .media-row > .vkMediaFrame:has(video) {
        grid-column: auto;
        grid-row: auto;
    }

    #nightlifeBody .nl-vkRow .media-row > .nl-vkMediaFrame,
    #nightlifeBody .nl-vkRow .media-row > .vkMediaFrame,
    #nightlifeBody .nl-vkRow .media-row > picture,
    #nightlifeBody .nl-vkRow .media-row > img,
    #nightlifeBody .nl-vkRow .media-row > video {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        min-width: 0;
        overflow: hidden;
    }

    /* .playbtn-host is the .dynamic-video-controls-wrap added by videoRoutingInit
       before nl-vkMediaLayout's decorateGridMedia() runs. Its height is driven
       by the natural video dimensions (height: auto + inner video height: auto)
       so the grid row scales to the actual video height. */
    #nightlifeBody .nl-vkRow .media-row > .playbtn-host {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        min-width: 0;
        flex: none !important;
        overflow: hidden;
    }

    /* Let the inner video size by its natural aspect ratio rather than
       inheriting 100% of an undefined parent height. */
    #nightlifeBody .nl-vkRow .media-row > .playbtn-host > video {
        height: auto !important;
        width: 100% !important;
        display: block;
    }

    #nightlifeBody .nl-vkRow .media-row > picture,
    #nightlifeBody .nl-vkRow .media-row > img,
    #nightlifeBody .nl-vkRow .media-row > .nl-vkMediaFrame:not(:has(video)),
    #nightlifeBody .nl-vkRow .media-row > .vkMediaFrame:not(:has(video)) {
        order: 1;
    }

    #nightlifeBody .nl-vkRow .media-row > video,
    #nightlifeBody .nl-vkRow .media-row > .playbtn-host,
    #nightlifeBody .nl-vkRow .media-row > .nl-vkMediaFrame:has(video),
    #nightlifeBody .nl-vkRow .media-row > .vkMediaFrame:has(video) {
        grid-column: auto;
        order: 2;
    }

    #nightlifeBody .nl-vkRow .media-row > picture > img,
    #nightlifeBody .nl-vkRow .media-row > img,
    #nightlifeBody .nl-vkRow .media-row > video,
    #nightlifeBody .nl-vkRow .media-row > .nl-vkMediaFrame > picture,
    #nightlifeBody .nl-vkRow .media-row > .nl-vkMediaFrame > picture > img,
    #nightlifeBody .nl-vkRow .media-row > .nl-vkMediaFrame > img,
    #nightlifeBody .nl-vkRow .media-row > .nl-vkMediaFrame > video,
    #nightlifeBody .nl-vkRow .media-row > .vkMediaFrame > picture,
    #nightlifeBody .nl-vkRow .media-row > .vkMediaFrame > picture > img,
    #nightlifeBody .nl-vkRow .media-row > .vkMediaFrame > img,
    #nightlifeBody .nl-vkRow .media-row > .vkMediaFrame > video,
    #nightlifeBody .nl-vkRow .media-row > .vkMediaFrame > .dynamic-video-controls-wrap,
    #nightlifeBody .nl-vkRow .media-row > .vkMediaFrame > .dynamic-video-controls-wrap > video {
        width: 100% !important;
        height: 100% !important;
        max-width: none !important;
        object-fit: cover;
    }

    #nightlifeBody .nightlife-bottom-media-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

#nightlifeBody .nl-vkRow > .nl-vkImg img,
#nightlifeBody .nl-vkRow > .nl-vkImg video,
#nightlifeBody .nl-vkRow > .nl-vkImg picture > img,
#nightlifeBody .nl-vkRow .nl-vkImg img,
#nightlifeBody .nl-vkRow .nl-vkImg video,
#nightlifeBody .nl-vkRow .nl-vkImg picture > img {
    width: auto;
    max-width: 100%;
    object-fit: contain;
    display: block;
}

@media (max-width: 768px) {
    #nightlifeBody .nl-vkGrid .nl-vkRow.nl-vkRow--normal .nl-vkTextCon.nl-vKitem-3 {
        display: none !important;
    }

    /* After JS removes the 3D can models on touch/mobile, this row is completely
       empty (.nl-vKitem-3 hidden by CSS above + tier-model removed by JS).
       Collapse it entirely so it doesn't contribute two row-gap slots before
       the --full row, which would create a visible phantom gap. */
    #nightlifeBody .nl-vkGrid .nl-vkRow:has(> .nl-vkTextCon.nl-vKitem-3) {
        display: none !important;
    }

    /* 2-up grid (not flex) so siblings split width evenly with gap subtracted,
       preventing the right item from spilling past .nl-vkGrid's edge. */
    #nightlifeBody .nl-vkGrid .nl-vkRow.nl-vkRow--normal .nl-vkImg.nl-vKitem-1 .media-row {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: stretch;
        justify-items: stretch;
        gap: 0.75rem;
    }

    #nightlifeBody .nl-vkGrid .nl-vkRow.nl-vkRow--normal .nl-vkImg.nl-vKitem-1 .media-row > :first-child {
        display: none !important;
    }

    #nightlifeBody .nl-vkGrid .nl-vkRow.nl-vkRow--normal .nl-vkImg.nl-vKitem-1 .media-row > :nth-child(2),
    #nightlifeBody .nl-vkGrid .nl-vkRow.nl-vkRow--normal .nl-vkImg.nl-vKitem-1 .media-row > :nth-child(3) {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        flex: initial;
    }

    #nightlifeBody .nl-vkGrid .nl-vkRow.nl-vkRow--reverse .nl-vkImg.nl-vKitem-2 .media-row {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: stretch;
        justify-items: stretch;
        gap: 0.75rem;
    }

    #nightlifeBody .nl-vkGrid .nl-vkRow.nl-vkRow--reverse .nl-vkImg.nl-vKitem-2 .media-row > :nth-child(3) {
        display: none !important;
    }

    #nightlifeBody .nl-vkGrid .nl-vkRow.nl-vkRow--reverse .nl-vkImg.nl-vKitem-2 .media-row > :nth-child(1),
    #nightlifeBody .nl-vkGrid .nl-vkRow.nl-vkRow--reverse .nl-vkImg.nl-vKitem-2 .media-row > :nth-child(2) {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        flex: initial;
    }
}