/* Full-screen community entry flow. Each homepage module is a single, deliberate stop. */

html {
    scroll-snap-type: y mandatory;
    scroll-padding-top: 0;
}

body.entry-snap-mode {
    overflow-x: clip;
    background: #edf8f7;
}

body.entry-snap-mode .scroll-container {
    width: 100%;
}

body.entry-snap-mode .section {
    position: relative;
    display: grid !important;
    min-height: 100dvh !important;
    height: 100dvh;
    padding: 0 !important;
    overflow: clip;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    scroll-margin-top: 0;
}

body.entry-snap-mode .entry-section {
    display: block !important;
    background: #edf8f7 !important;
}

body.entry-snap-mode .entry-section > .section-container[hidden],
body.entry-snap-mode .entry-section > [hidden] { display: none !important; }

body.entry-snap-mode .entry-poster {
    position: absolute;
    inset: 0;
    isolation: isolate;
    display: block;
    width: 100%;
    min-height: 0;
    height: auto;
    overflow: hidden;
    background: #e5f3f0;
}

body.entry-snap-mode .entry-media {
    position: absolute;
    z-index: 0;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
}

body.entry-snap-mode .entry-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

body.entry-snap-mode .entry-poster::after {
    position: absolute;
    z-index: 1;
    inset: 0;
    content: '';
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(246, 253, 252, .98) 0%, rgba(246, 253, 252, .9) 27%, rgba(246, 253, 252, .52) 46%, rgba(246, 253, 252, .04) 69%),
        linear-gradient(180deg, rgba(246, 253, 252, .15), rgba(246, 253, 252, 0));
}

body.entry-snap-mode .entry-copy {
    position: absolute;
    z-index: 2;
    top: 50%;
    left: max(36px, calc((100vw - 1240px) / 2));
    display: flex;
    width: min(31rem, 40vw);
    flex-direction: column;
    align-items: flex-start;
    transform: translateY(-46%);
}

body.entry-snap-mode .entry-kicker {
    margin: 0 0 14px;
    color: #238f8e;
    font-size: .86rem;
    font-weight: 800;
    letter-spacing: .04em;
}

body.entry-snap-mode .entry-copy h2 {
    margin: 0;
    color: #173f4b;
    font-size: clamp(3.1rem, 5.2vw, 5.75rem);
    line-height: .98;
    letter-spacing: .02em;
    text-wrap: balance;
}

body.entry-snap-mode .entry-copy > p:not(.entry-kicker) {
    max-width: 29rem;
    margin: 20px 0 28px;
    color: #4f727d;
    font-size: clamp(1rem, 1.35vw, 1.12rem);
    line-height: 1.75;
}

body.entry-snap-mode .entry-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .65rem;
    min-height: 3.3rem;
    padding: .88rem 1.22rem;
    border: 1px solid #238f8e;
    border-radius: 999px;
    background: #238f8e;
    color: #fff !important;
    font-weight: 800;
    line-height: 1;
    text-decoration: none;
    box-shadow: 0 16px 30px rgba(35, 143, 142, .22);
    transition: transform .24s ease, background-color .24s ease, box-shadow .24s ease;
}

body.entry-snap-mode .entry-button span { transition: transform .2s ease; }
body.entry-snap-mode .entry-button:hover { background: #187e7c; box-shadow: 0 20px 34px rgba(35, 143, 142, .28); transform: translateY(-2px); }
body.entry-snap-mode .entry-button:hover span { transform: translateX(4px); }
body.entry-snap-mode .entry-button:active { transform: translateY(0) scale(.98); }
body.entry-snap-mode .entry-button:focus-visible { outline: 3px solid #1b5965; outline-offset: 4px; }

body.entry-snap-mode .homepage-section { background: #edf8f7 !important; }
body.entry-snap-mode .homepage-section .entry-poster::after { background: linear-gradient(90deg, rgba(245, 253, 251, .97) 0%, rgba(245, 253, 251, .82) 34%, rgba(245, 253, 251, .2) 63%, transparent 78%); }

/* The home hero gets its own paired artwork instead of borrowing the archive image. */
body.entry-snap-mode .home-section {
    background:
        linear-gradient(90deg, rgba(246, 253, 252, .72) 0%, rgba(246, 253, 252, .43) 38%, rgba(246, 253, 252, .08) 64%, rgba(246, 253, 252, 0) 100%),
        url('../assets/community/home-community-desktop-v2.jpg') center / cover no-repeat !important;
}

@media (max-width: 900px) {
    body.entry-snap-mode .entry-copy { left: 32px; width: min(28rem, 45vw); }
    body.entry-snap-mode .entry-copy h2 { font-size: clamp(2.7rem, 6.5vw, 4.4rem); }
}

@media (max-width: 768px) {
    html { scroll-snap-type: y mandatory; }

    body.entry-snap-mode .section {
        min-height: 100svh !important;
        height: 100svh;
    }

    body.entry-snap-mode .entry-media img { object-position: center top; }

    body.entry-snap-mode .home-section {
        background:
            linear-gradient(180deg, rgba(244, 252, 251, 0) 0%, rgba(244, 252, 251, .07) 38%, rgba(244, 252, 251, .86) 67%, #f4fcfa 88%),
            url('../assets/community/home-community-mobile-v2.jpg') center top / cover no-repeat !important;
    }

    /* On a phone, let the portrait artwork breathe and keep the hero copy in its reserved lower field. */
    body.entry-snap-mode .home-section .hero-content {
        display: flex;
        width: 100%;
        min-height: 100svh;
        align-items: flex-start;
        justify-content: flex-end;
        padding: 3rem 22px calc(1.75rem + env(safe-area-inset-bottom));
    }
    body.entry-snap-mode .home-section .hero-title-wrapper { margin-bottom: 14px; }
    body.entry-snap-mode .home-section .hero-title { margin: 0 0 9px; font-size: clamp(2.35rem, 11vw, 3.45rem); line-height: 1.02; letter-spacing: .03em; }
    body.entry-snap-mode .home-section .hero-subtitle { max-width: 20rem; margin: 0; font-size: .92rem; line-height: 1.62; }
    body.entry-snap-mode .home-section .hero-community-card,
    body.entry-snap-mode .home-section .hero-routes { display: none; }
    body.entry-snap-mode .home-section .hero-buttons { width: min(100%, 17rem); margin-top: 20px; display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
    body.entry-snap-mode .home-section .hero-buttons .btn-primary { width: calc(50% - 4px); min-height: 3rem; }

    body.entry-snap-mode .entry-poster::after,
    body.entry-snap-mode .homepage-section .entry-poster::after {
        background: linear-gradient(180deg, rgba(244, 252, 251, 0) 0%, rgba(244, 252, 251, .06) 38%, rgba(244, 252, 251, .84) 62%, #f4fcfa 82%);
    }

    body.entry-snap-mode .entry-copy {
        top: auto;
        right: 0;
        bottom: calc(1.5rem + env(safe-area-inset-bottom));
        left: 0;
        width: auto;
        padding: 0 22px;
        transform: none;
    }

    body.entry-snap-mode .entry-kicker { margin-bottom: 8px; font-size: .78rem; }
    body.entry-snap-mode .entry-copy h2 { font-size: clamp(2.35rem, 11vw, 3.7rem); line-height: 1.02; }
    body.entry-snap-mode .entry-copy > p:not(.entry-kicker) { max-width: 21rem; margin: 11px 0 18px; font-size: .93rem; line-height: 1.65; }
    body.entry-snap-mode .entry-button { min-height: 3rem; padding: .78rem 1rem; font-size: .92rem; }
    body.entry-snap-mode .home-section { min-height: 100svh !important; height: 100svh; }

    /* Historical mobile rules gave #resonance an auto height and surfaced a hidden title.
       Keep it as one portrait entry screen like every other module. */
    body.community-stream.entry-snap-mode #resonance.entry-section {
        display: block !important;
        min-height: 100svh !important;
        height: 100svh !important;
        padding: 0 !important;
        overflow: clip !important;
        background: #edf8f7 !important;
    }

    body.community-stream.entry-snap-mode #resonance.entry-section .section-header.resonance-header,
    body.community-stream.entry-snap-mode #resonance.entry-section > [hidden] {
        display: none !important;
    }
}

@media (max-width: 380px) {
    body.entry-snap-mode .entry-copy { bottom: calc(1.25rem + env(safe-area-inset-bottom)); padding-inline: 18px; }
    body.entry-snap-mode .entry-copy h2 { font-size: 2.18rem; }
    body.entry-snap-mode .entry-copy > p:not(.entry-kicker) { margin: 8px 0 14px; font-size: .86rem; }
    body.entry-snap-mode .entry-button { min-height: 2.78rem; padding: .68rem .9rem; }
}

/* The entry flow is swipe-first on phones. Remove the legacy dock and reclaim its space. */
@media (max-width: 900px) {
    body.entry-snap-mode {
        padding-bottom: 0 !important;
    }

    body.entry-snap-mode .mobile-bottom-nav {
        display: none !important;
    }

    body.entry-snap-mode .back-to-top {
        bottom: calc(1.25rem + env(safe-area-inset-bottom)) !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    body.entry-snap-mode .entry-button,
    body.entry-snap-mode .entry-button span { transition: none; }
    body.entry-snap-mode .entry-button:hover,
    body.entry-snap-mode .entry-button:hover span { transform: none; }
}