/* ============================================
   SNAP-PAGE SCROLL (landing page)
   One-viewport-per-gesture scroll with CSS snap
   + JS gesture lock (js/snap-scroll.js)
   ============================================ */

/* Lock the document so the snap container owns the only scroll axis.
   Navbar / preloader / lightbox / scroll-progress stay pinned outside. */
html, body {
    margin: 0;
    height: 100%;
    overflow: hidden;
}

#snap-scroller {
    position: relative;
    height: 100dvh;
    overflow-y: scroll;
    scroll-snap-type: y mandatory;
    scroll-behavior: auto;
    overscroll-behavior: none;
    /* hide scrollbar */
    scrollbar-width: none;
    -ms-overflow-style: none;
}
#snap-scroller::-webkit-scrollbar { display: none; }

/* Existing body.no-scroll (used by mobile menu / lightbox) must also freeze the scroller */
body.no-scroll #snap-scroller { overflow: hidden; }

/* Every top-level section becomes a 100dvh snap page.
   place-items: safe center vertically centers content when it fits,
   and falls back to top-alignment when it doesn't (prevents clipped tops on short viewports). */
#snap-scroller > section {
    height: 100dvh;
    min-height: 100dvh;
    max-height: 100dvh;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    display: grid;
    place-items: safe center;
    overflow-y: auto;
    padding-top: 0;
    padding-bottom: 0;
    box-sizing: border-box;
}

#snap-scroller > section > .container {
    width: 100%;
    max-height: 100%;
}

/* Hide the per-section scrollbar when a section does need to scroll internally */
#snap-scroller > section {
    scrollbar-width: none;
    -ms-overflow-style: none;
}
#snap-scroller > section::-webkit-scrollbar { display: none; }

/* Footer: not a full snap page. Align its bottom to viewport bottom so
   the last gesture past Booking reveals it as a "peek" — booking blends
   above, footer sits flush at the bottom edge. */
#snap-scroller > footer {
    scroll-snap-align: end;
    scroll-snap-stop: normal;
}

/* ---------- Per-section neutralization / fits ---------- */

/* Hero already uses flex centering and 100vh — keep its layout, just bind to dvh */
#snap-scroller > section.hero {
    min-height: 100dvh;
    height: 100dvh;
    max-height: 100dvh;
    display: flex; /* restore hero's original flex */
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* Quote: compact, just center */
#snap-scroller > section.quote-section {
    padding: 0;
}

/* Why: keep the two-column grid, just tighten the frame to fit 100dvh.
   Top padding = navbar clearance so the image and THE STORY label aren't clipped. */
#snap-scroller > section.why-section {
    padding: 90px 0 1.5rem;
    overflow: hidden;
}
#snap-scroller > section.why-section > .container {
    max-height: calc(100dvh - 90px - 1.5rem);
}

/* Experience: neutralize xxl padding */
#snap-scroller > section.experience-section { padding: 0; }

/* Portfolio: build around a visible title first, then fit the grid below.
   Stop relying on place-items:center (which lets navbar cover the title).
   Stack as: padding-top for navbar → header → grid filling the rest. */
#snap-scroller > section.portfolio-section {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    padding: 90px 0 1rem;  /* 90px clears fixed navbar; 1rem bottom breathing */
    overflow: hidden;
}
#snap-scroller > section.portfolio-section .container {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-height: none;
}
#snap-scroller > section.portfolio-section .portfolio-header {
    flex: 0 0 auto;
    margin-bottom: var(--spacing-sm);
}
#snap-scroller > section.portfolio-section .goddess-grid {
    flex: 1 1 auto;
    min-height: 0;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: var(--spacing-sm);
    margin-top: 0;
    height: auto;
}
#snap-scroller > section.portfolio-section .goddess-card {
    aspect-ratio: auto;
    height: 100%;
    min-height: 0;
}

/* Testimonials: neutralize and fit header + quote card + script highlight. */
#snap-scroller > section.testimonials-section { padding: 0; }
#snap-scroller > section.testimonials-section .testimonials-header {
    margin-bottom: var(--spacing-sm);
}
#snap-scroller > section.testimonials-section .testimonial-card {
    padding: var(--spacing-md);
}
#snap-scroller > section.testimonials-section .quote-icon {
    font-size: 3rem;
    margin-bottom: 0;
}
#snap-scroller > section.testimonials-section .testimonial-content p {
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: var(--spacing-sm);
}
#snap-scroller > section.testimonials-section .testimonial-highlight {
    margin-top: var(--spacing-md);
}
#snap-scroller > section.testimonials-section .highlight-text {
    font-size: clamp(1.75rem, 3.5vw, 2.5rem);
}

/* Investment: tighten so 4 pricing cards + header + note fit 100dvh at desktop */
#snap-scroller > section.investment-section {
    padding-top: 0;
    padding-bottom: 0;
}
#snap-scroller > section.investment-section .investment-header {
    margin-bottom: var(--spacing-sm);
}
#snap-scroller > section.investment-section .investment-header .section-title {
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    margin-bottom: 0.15rem;
}
#snap-scroller > section.investment-section .investment-header .section-subtitle {
    font-size: 0.95rem;
    margin-bottom: 0.25rem;
}
#snap-scroller > section.investment-section .investment-grid-4col {
    gap: var(--spacing-sm);
    padding-top: 0;
}
#snap-scroller > section.investment-section .investment-card,
#snap-scroller > section.investment-section .investment-grid-4col .investment-card {
    padding: 0.85rem;
}
#snap-scroller > section.investment-section .investment-grid-4col .investment-card.featured {
    padding-top: 0;
}
#snap-scroller > section.investment-section .investment-grid-4col .investment-card.featured .card-header,
#snap-scroller > section.investment-section .investment-grid-4col .investment-card.featured .card-body,
#snap-scroller > section.investment-section .investment-grid-4col .investment-card.featured .card-footer {
    padding-left: 0.85rem;
    padding-right: 0.85rem;
}
#snap-scroller > section.investment-section .investment-grid-4col .investment-card.featured .card-header {
    padding-top: 0.6rem;
}
#snap-scroller > section.investment-section .investment-card .card-header {
    padding-bottom: var(--spacing-xs);
    margin-bottom: var(--spacing-xs);
}
#snap-scroller > section.investment-section .investment-card .card-header h3 {
    font-size: 1.25rem;
}
#snap-scroller > section.investment-section .investment-card .card-tagline {
    font-size: 0.8rem;
}
#snap-scroller > section.investment-section .investment-card .card-price {
    font-size: 1.8rem;
    margin: 0.15rem 0;
}
#snap-scroller > section.investment-section .investment-card .features-list {
    margin-bottom: 0.25rem;
}
#snap-scroller > section.investment-section .investment-card .features-list li {
    padding: 0.25rem 0;
    font-size: 0.85rem;
}
#snap-scroller > section.investment-section .investment-card .card-footer .btn,
#snap-scroller > section.investment-section .investment-card.featured .card-footer .btn {
    padding: 0.6rem 1.25rem;
    font-size: 0.85rem;
}
#snap-scroller > section.investment-section .investment-note {
    margin-top: var(--spacing-sm);
}
#snap-scroller > section.investment-section .investment-note p {
    margin: 0.2rem 0;
    font-size: 0.85rem;
}

/* Booking: tighten form so info + form fit 100dvh at desktop.
   Override the section's default place-items:center so the image column
   can stretch top-to-bottom instead of wrapping to its content height.
   Section padding stays 0 so the hero image reaches the very top;
   navbar clearance is applied to .booking-content (absolutely-positioned
   .booking-info-bg ignores it, so the image keeps its full bleed). */
#snap-scroller > section.booking-section {
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: stretch;
    align-items: stretch;
}
#snap-scroller > section.booking-section > .container {
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
}

/* Booking layout: stretch the info/form columns to full section height so the
   hero image reaches from the top to the bottom of the page (no centering gap). */
#snap-scroller > section.booking-section .booking-content {
    align-items: stretch;
    height: 100%;
    padding-top: 90px;
    padding-bottom: 1rem;
}
#snap-scroller > section.booking-section .booking-info {
    min-height: 0;
    height: 100%;
}

/* Booking hero image: tuned values from the image-adjust panel.
   Drop the horizontal side-fade mask so the image reaches edge-to-edge. */
#snap-scroller > section.booking-section .booking-info-bg {
    background-position: 51% 43.5%;
    background-size: 90%;
    background-repeat: no-repeat;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    animation: none;
    -webkit-mask-image: none;
    mask-image: none;
}
#snap-scroller > section.booking-section .booking-form .form-group {
    margin-bottom: 0.75rem;
}
#snap-scroller > section.booking-section .booking-form label {
    margin-bottom: 0.25rem;
}
#snap-scroller > section.booking-section .booking-form input,
#snap-scroller > section.booking-section .booking-form select,
#snap-scroller > section.booking-section .booking-form textarea {
    padding: 0.6rem 0.9rem;
}
#snap-scroller > section.booking-section .booking-form textarea {
    rows: 2;
    min-height: 4.5rem;
}

/* ---------- Mobile: honor user choice (snap on all sizes).
   Tall sections internally scroll within their 100dvh page. ---------- */
@media (max-width: 1024px) {
    #snap-scroller > section {
        max-height: none; /* allow internal scroll beyond 100dvh where content needs it */
    }
}