/* ── Shell sizing ─────────────────────────────────────────────────────── */
#pageShellWrapper {
    min-height: 100dvh;
}

@media (min-width: 1024px) {
    #pageShellWrapper {
        height: 100dvh;
        min-height: 0;
    }
}

/* ── Section dividers ─────────────────────────────────────────────────── */
[horizon] > [data-profile-section] + [data-profile-section] {
    border-left: 1px solid color-mix(in srgb, var(--moroc-surface-border, rgba(255, 255, 255, 0.08)) 95%, transparent);
}
@media (max-width: 1023px) {
    [horizon] > [data-profile-section] + [data-profile-section] {
        border-left: none;
        border-top: 1px solid color-mix(in srgb, var(--moroc-surface-border, rgba(255, 255, 255, 0.08)) 95%, transparent);
    }
}

/* ── Mobile / tablet: vertical + document-native scroll ────────────────── */
@media (max-width: 1023px) {
    html,
    body {
        max-width: 100vw;
        overflow-x: hidden;
        overflow-x: clip;
    }

    #pageShellWrapper,
    #pageAnimationWrapper,
    #pageContentRow,
    [horizon-scroller],
    [horizon],
    [horizon] > [data-profile-section],
    [horizon] > [data-profile-section] > section,
    [horizon] > [data-profile-section] > div {
        box-sizing: border-box;
        width: 100% !important;
        max-width: 100vw !important;
        min-width: 0 !important;
    }

    #pageShellWrapper {
        overflow-x: hidden;
        overflow-x: clip;
        padding-bottom: calc(var(--moroc-toolbar-height, 60px) + env(safe-area-inset-bottom, 0px));
    }

    #pageAnimationWrapper {
        min-height: 0;
        overflow: visible !important;
    }

    #pageAnimationWrapper.canvas-is-open {
        height: 100dvh;
        min-height: 100dvh;
        overflow: hidden !important;
    }

    #pageAnimationWrapper.canvas-is-open #pageCanvas {
        position: fixed !important;
        top: 0 !important;
        right: 0 !important;
        bottom: calc(var(--moroc-toolbar-height, 60px) + env(safe-area-inset-bottom, 0px)) !important;
        left: 0 !important;
        z-index: 90;
    }

    #pageAnimationWrapper.canvas-is-open #pageContentRow {
        transform: translateY(100dvh) !important;
    }

    #pageContentRow {
        display: block !important;
        height: auto !important;
    }

    #ownerDock [data-owner-dock-toolbar]::-webkit-scrollbar {
        display: none;
    }

    [horizon-scroller] > .scroll-content {
        box-sizing: border-box;
        width: 100% !important;
        max-width: 100vw !important;
        min-width: 0 !important;
        transform: none !important;
    }

    [horizon-scroller] {
        display: block !important;
        flex: 0 1 auto !important;
        min-height: 0 !important;
        overflow-y: visible !important;
        overflow-x: hidden !important;
    }

    [horizon] {
        display: flex;
        flex-direction: column !important;
        height: auto !important;
    }

    [horizon] > [data-profile-section] {
        width: 100% !important;
    }

    /* Content-surface tracks are horizontal on desktop. On mobile/tablet the
       page shell returns to document-native vertical scroll, so the root track
       must stay strictly page-width to avoid leaking x-overflow. */
    [data-updates-rail-track],
    section[data-content-surface-section-rail] > [data-content-surface-section-track] {
        box-sizing: border-box !important;
        flex-direction: column !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        overflow-x: hidden !important;
        overflow-y: visible !important;
    }

    section[data-content-surface-section-rail] {
        overflow-x: hidden !important;
        overflow-x: clip !important;
    }

    [data-updates-rail-track] > [data-content-surface-card],
    [data-updates-rail-track] > [data-updates-rail-load-more-card],
    section[data-content-surface-section-rail] > [data-content-surface-section-track] > [data-content-surface-card],
    section[data-content-surface-section-rail] > [data-content-surface-section-track] > [data-content-surface-section-portal-card] {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
    }

    section[data-content-surface-section-rail] [data-content-surface-card] {
        display: flex !important;
        flex-direction: column !important;
        aspect-ratio: auto !important;
    }

    section[data-content-surface-section-rail] [data-content-surface-card] > [data-content-surface-card-media-frame],
    section[data-content-surface-section-rail] [data-content-surface-card] > .moroc-content-surface-card-swiper,
    section[data-content-surface-section-rail] [data-content-surface-card] > .moroc-content-surface-player-frame,
    section[data-content-surface-section-rail] [data-content-surface-card] > picture,
    section[data-content-surface-section-rail] [data-content-surface-card] > img {
        position: relative !important;
        inset: auto !important;
        display: block !important;
        flex: 0 0 auto !important;
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 1 / 1 !important;
        overflow: hidden;
    }

    section[data-content-surface-section-rail] [data-content-surface-card] > .moroc-content-surface-card-swiper,
    section[data-content-surface-section-rail] [data-content-surface-card] > .moroc-content-surface-player-frame,
    section[data-content-surface-section-rail] [data-content-surface-card] > picture,
    section[data-content-surface-section-rail] [data-content-surface-card] > img {
        position: relative !important;
    }

    section[data-content-surface-section-rail] [data-content-surface-card] > [data-content-surface-card-media-frame] > .moroc-content-surface-card-swiper,
    section[data-content-surface-section-rail] [data-content-surface-card] > [data-content-surface-card-media-frame] > .moroc-content-surface-player-frame,
    section[data-content-surface-section-rail] [data-content-surface-card] > [data-content-surface-card-media-frame] > picture,
    section[data-content-surface-section-rail] [data-content-surface-card] > [data-content-surface-card-media-frame] > img {
        position: absolute !important;
        inset: 0 !important;
        display: block !important;
        width: 100% !important;
        height: 100% !important;
    }

    section[data-content-surface-section-rail] [data-content-surface-card] > [data-content-surface-card-media-frame] > picture > img,
    section[data-content-surface-section-rail] [data-content-surface-card] > [data-content-surface-card-media-frame] > img,
    section[data-content-surface-section-rail] [data-content-surface-card] > picture > img,
    section[data-content-surface-section-rail] [data-content-surface-card] > img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover;
    }

    section[data-content-surface-section-rail] [data-content-surface-card] > [data-content-surface-card-media-frame] > .moroc-content-surface-player-frame > video,
    section[data-content-surface-section-rail] [data-content-surface-card] > [data-content-surface-card-media-frame] > .moroc-content-surface-player-frame > [data-content-surface-player-poster],
    section[data-content-surface-section-rail] [data-content-surface-card] > .moroc-content-surface-player-frame > video,
    section[data-content-surface-section-rail] [data-content-surface-card] > .moroc-content-surface-player-frame > [data-content-surface-player-poster] {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover;
    }

    section[data-content-surface-section-rail] [data-content-surface-caption-overlay] {
        position: static !important;
        inset: auto !important;
        z-index: auto !important;
        display: block !important;
        height: auto !important;
        min-height: 0 !important;
        background: transparent !important;
        pointer-events: auto !important;
    }

    section[data-content-surface-section-rail] [data-content-surface-caption-block] {
        padding: 0.75rem !important;
        color: var(--moroc-fg, currentColor);
    }

    section[data-content-surface-section-rail] [data-content-surface-mobile-row-shell] {
        box-sizing: border-box;
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        overflow-x: auto;
        overflow-y: visible;
        overscroll-behavior-x: contain;
        scroll-snap-type: x proximity;
        scrollbar-width: thin;
        scrollbar-color: color-mix(in srgb, var(--moroc-fg, #111) 40%, transparent) transparent;
        -webkit-overflow-scrolling: touch;
    }

    section[data-content-surface-section-rail] [data-content-surface-mobile-row-shell]::-webkit-scrollbar {
        height: 0.45rem;
    }

    section[data-content-surface-section-rail] [data-content-surface-mobile-row-shell]::-webkit-scrollbar-track {
        background: transparent;
    }

    section[data-content-surface-section-rail] [data-content-surface-mobile-row-shell]::-webkit-scrollbar-thumb {
        border-radius: 999px;
        background: color-mix(in srgb, var(--moroc-fg, #111) 32%, transparent);
    }

    section[data-content-surface-section-rail] [data-content-surface-mobile-row-inner] {
        box-sizing: border-box;
        --content-surface-mobile-row-gap: clamp(0.75rem, 3vw, 1rem);
        display: flex !important;
        flex-flow: row nowrap !important;
        align-items: stretch !important;
        gap: var(--content-surface-mobile-row-gap);
        width: 100%;
        min-width: 100%;
        margin: 0;
        padding: 0 0 0.35rem;
        list-style: none;
    }

    section[data-content-surface-section-rail] [data-content-surface-mobile-row-inner] > [data-content-surface-card] {
        flex: 0 0 75% !important;
        width: 75% !important;
        min-width: 0 !important;
        max-width: 75% !important;
        height: auto !important;
        aspect-ratio: auto !important;
        scroll-snap-align: start;
    }

    section[data-content-surface-section-rail] [data-content-surface-mobile-row-inner] > [data-content-surface-card]:only-child {
        flex-basis: 100% !important;
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* ── Desktop: horizontal + smooth-scrollbar, sections fill viewport ───── */
@media (min-width: 1024px) {
    #pageShellWrapper {
        padding-bottom: 0;
    }

    [horizon-scroller] {
        display: flex !important;
        overflow: hidden;
    }
    [horizon] > [data-profile-section],
    [horizon] > [data-profile-section] > section,
    [horizon] > [data-profile-section] > div {
        height: 100% !important;
        min-height: 100% !important;
        max-height: 100% !important;
    }
}

/* Lazy-image placeholder.
   Before behavior_horizon_scroller.js hydrates a lazy <img>, the element has
   no src — browsers render it as a white box with a broken-image icon and
   alt-text leakage. Hydration removes these attributes, so this rule
   self-disables once the real src is set. */
img[data-moroc-lazy-src],
img[data-content-surface-lazy-src],
img[data-moroc-lazy-srcset],
img[data-content-surface-lazy-srcset] {
    background-color: var(--moroc-surface, #1a1a1a);
    color: transparent;
    font-size: 0;
}