/* ═══════════════════════════════════════════════════
   New UI — unified spacing (8px base rhythm)
   Homepage · inner pages · tour detail · customer portal
   Spec: dashboard_gapping / homepage-spacing / DESIGN_PATTERNS
   Load after new-ui-core.css + new-ui-inner-mobile.css
   ═══════════════════════════════════════════════════ */

/* ── Sticky header scroll offset ──────────────────
   ndl-header is sticky at top:0 with height 68px.
   All anchor targets get scroll-margin-top so headings
   are not hidden under the sticky bar when navigating.
   ─────────────────────────────────────────────────── */
:target {
    scroll-margin-top: 88px;
}

.ntd-section[id],
.nui-section[id],
.ab-section[id],
.nid-section[id],
.nic-section[id],
.nd-dest-grid-section[id],
.nd-cat-section[id],
.ntd-about-card[id],
.ntd-itin-card[id],
.ntd-incl-card[id],
.ntd-gallery-card[id],
.ntd-faq-card[id] {
    scroll-margin-top: 88px;
}

/* Section head chip + title gap — keep consistent across all sections */
.nui-chip + .nui-section-title,
.nd-dest-chip + .nd-dest-section-title,
.nd-pkg-chip + .nd-pkg-section-title,
.nd-styles-chip + .nui-section-title,
.nd-blog-chip + .nd-blog-section-title,
.nd-why-chip + .nd-why-section-title,
.ab-chip + .ab-title {
    margin-top: 6px !important;
}

:root {
    /* Canonical tokens */
    --nui-gap-section: var(--space-16, 64px);
    --nui-gap-section-y: var(--space-8, 32px);
    --nui-gap-block: var(--space-8, 32px);
    --nui-gap-cards: var(--space-4, 16px);
    --nui-gap-tight: var(--space-6, 24px);
    --nui-gap-footer: var(--space-20, 80px);
    --nui-gap-hero-search: var(--space-6, 24px);
    --nui-gap-planner-nav: var(--space-8, 32px);
    --nui-gap-title: var(--space-3, 12px);
    --nui-gap-chip: var(--space-2, 8px);

    /* Homepage aliases (backward compat) */
    --nd-home-gap-section: var(--nui-gap-section);
    --nd-home-gap-block: var(--nui-gap-block);
    --nd-home-gap-cards: var(--nui-gap-cards);
    --nd-home-gap-tight: var(--nui-gap-tight);
    --nd-home-gap-footer: var(--nui-gap-footer);
    --nd-home-hero-search: var(--nui-gap-hero-search);
    --nd-home-planner-nav: var(--nui-gap-planner-nav);
    --nd-home-section-y: var(--nui-gap-section-y);
}

/* ═══════════════════════════════════════════════════
   HOMEPAGE (new-dashboard)
   ═══════════════════════════════════════════════════ */

.nd-hero .container-nd {
    padding-top: var(--nui-gap-section-y) !important;
}

.nd-hero-heading {
    margin-bottom: var(--nui-gap-hero-search) !important;
}

.nd-hero-subtext {
    margin-bottom: var(--nui-gap-title) !important;
}

.nd-hero-stats {
    margin-top: var(--nui-gap-cards) !important;
}

.nd-hero-inner {
    gap: 34px !important;
}

.nd-nav-panel {
    margin-bottom: 0 !important;
}

.nd-proof,
.nd-styles-section,
.nd-pkg-section,
.nd-price-cta-section,
.nd-blog-section,
.nd-why-section,
.nd-cta,
.nd-faq-app-section {
    padding-top: var(--nui-gap-section-y) !important;
    padding-bottom: var(--nui-gap-section-y) !important;
}

.nd-dest-section {
    padding-top: var(--nui-gap-planner-nav) !important;
    padding-bottom: var(--nui-gap-section-y) !important;
}

.nd-pkg-section {
    padding-bottom: var(--nui-gap-tight) !important;
}

.nd-pkg-section + .nd-price-cta-section {
    padding-top: var(--nui-gap-tight) !important;
    padding-bottom: var(--nui-gap-section-y) !important;
}

.nd-cta,
.nd-faq-app-section {
    padding-bottom: var(--nui-gap-footer) !important;
}

.nd-dest-section-head,
.nd-pkg-head,
.nd-blog-head,
.nd-styles-head,
.nd-why-head,
.nd-faq-head {
    margin-bottom: var(--nui-gap-block) !important;
}

.nd-dest-carousel,
.nd-pkg-carousel,
.nd-why-features,
.nd-styles-grid,
.nd-blog-grid {
    gap: var(--nui-gap-cards) !important;
}

.nd-dest-carousel-wrap,
.nd-pkg-carousel-wrap {
    gap: var(--nui-gap-cards);
}

.nd-proof-stats {
    margin-bottom: var(--nui-gap-block) !important;
}

.nd-price-cta-section .nd-pkg-trust {
    margin-top: var(--nui-gap-block) !important;
}

.nd-price-cta-section .nd-pkg-banner {
    margin-top: 0 !important;
}

.nd-dest-chip,
.nd-styles-chip,
.nd-pkg-chip,
.nd-blog-chip,
.nd-why-chip {
    display: block !important;
    margin-bottom: var(--nui-gap-chip) !important;
}

/* ═══════════════════════════════════════════════════
   INNER PAGES — listing / destination / blog / static
   ═══════════════════════════════════════════════════ */

.nui-section,
.ab-section,
.ct-section,
.nbl-section,
.nbs-related,
.nd-dest-grid-section,
.nd-cat-section,
.nic-section,
.nid-section,
.nsr-results-section,
.lp-section {
    padding-block: var(--nui-gap-section-y) !important;
}

.nui-section-head,
.nd-dest-section-head,
.nd-pkg-head,
.nd-blog-head,
.nd-cat-section-head,
.nbl-section-head,
.ct-section-head,
.lp-section-header {
    margin-bottom: var(--nui-gap-block) !important;
    gap: var(--nui-gap-cards) !important;
}

/* Body shells after hero / floating bars */
.nic-body,
.nid-body,
.nsr-body,
.tc-body,
.nbl-body,
.nd-dest-body,
.nd-cat-body,
.nbs-body,
.nbs-article-wrap,
.ab-page .ab-container,
.ct-page .ct-container {
    padding-top: var(--nui-gap-planner-nav) !important;
    padding-bottom: var(--nui-gap-section) !important;
}

.nid-section-top,
.nic-section-top,
.nd-dest-results-bar,
.nd-cat-results-bar,
.nsr-results-head {
    margin-bottom: var(--nui-gap-block) !important;
    gap: var(--nui-gap-cards) !important;
}

.nid-section-intro,
.nic-section-intro {
    margin-bottom: var(--nui-gap-tight) !important;
}

.nid-chip,
.nic-chip,
.nbl-chip,
.nsr-chip,
.ab-chip,
.ab-hero-chip,
.ct-section-chip,
.nd-cat-chip {
    margin-bottom: var(--nui-gap-chip) !important;
}

.nid-section-title,
.nic-section-title,
.nbl-section-title,
.nbs-section-title,
.nd-dest-section-title,
.nd-cat-section-title,
.nsr-results-title,
.ab-section-title,
.ct-section-title {
    margin-bottom: var(--nui-gap-title) !important;
}

.nid-section-sub,
.nic-section-sub,
.nd-dest-hero-sub {
    margin-bottom: var(--nui-gap-tight) !important;
}

/* Card / tour grids */
.nid-tours-grid,
.nic-tours-grid,
.nd-dest-grid,
.nd-cat-grid,
.nbl-grid,
.nbs-related-grid,
.nbs-tours-grid,
.nsr-results-grid,
.idx-grid,
.wl-grid,
.doc-grid {
    gap: var(--nui-gap-cards) !important;
}

.nid-help-banner,
.nic-help-banner,
.nbs-help-banner,
.nd-dest-help-banner,
.nd-cat-help-banner {
    margin-top: var(--nui-gap-tight) !important;
    margin-bottom: var(--nui-gap-tight) !important;
}

.nid-post-tours-block,
.nic-post-tours-block {
    margin-top: var(--nui-gap-section-y) !important;
    margin-bottom: var(--nui-gap-tight) !important;
}

.nid-post-tours-block .nd-pkg-trust,
.nic-post-tours-block .nd-pkg-trust,
.nid-content .nd-pkg-trust,
.nic-content .nd-pkg-trust,
.nbs-body .nd-pkg-trust {
    margin-top: 40px !important;
    gap: var(--nui-gap-cards) !important;
}

.nbs-sidebar {
    gap: var(--nui-gap-tight) !important;
}

.nbs-meta-wrap {
    margin-bottom: var(--nui-gap-tight) !important;
}

/* ═══════════════════════════════════════════════════
   TOUR DETAIL
   ═══════════════════════════════════════════════════ */

.ntd-body {
    --ntd-gap-block: var(--nui-gap-cards);
    --ntd-gap-band: var(--nui-gap-tight);
    --ntd-gap-inner: var(--nui-gap-cards);
    --ntd-gap-title: var(--nui-gap-title);
    --ntd-body-pt: var(--nui-gap-planner-nav);
    --ntd-body-pb: var(--nui-gap-section);
    --ntd-card-pad: var(--space-5, 20px);
    --ntd-section-start-mt: calc(var(--nui-gap-section-y) + var(--nui-gap-tight));
    --ntd-about-start-mt: calc(var(--ntd-section-start-mt) / 2);
}

.ntd-body {
    padding-top: var(--ntd-body-pt) !important;
    padding-bottom: var(--ntd-body-pb) !important;
}

@media (min-width: 1025px) {
    .ntd-body {
        --ntd-body-pt: 0;
        padding-top: 0 !important;
    }

    .ntd-content > .ntd-about-card:first-child,
    .ntd-sidebar-stack {
        margin-top: var(--ntd-about-start-mt) !important;
    }

    .ntd-sidebar-stack {
        gap: var(--nui-gap-cards) !important;
    }
}

.ntd-content,
.ntd-main-grid {
    gap: var(--ntd-gap-block) !important;
}

.ntd-sidebar-stack {
    gap: var(--ntd-gap-inner) !important;
}

.ntd-incl-gallery-band {
    margin-top: var(--ntd-gap-band) !important;
}

.ntd-incl-gallery-row {
    gap: var(--ntd-gap-inner) !important;
}

.ntd-section-title {
    margin-bottom: var(--ntd-gap-title) !important;
}

.ntd-about-card,
.ntd-itin-card,
.ntd-incl-card,
.ntd-gallery-card,
.ntd-trip-card,
.ntd-journey-card,
.ntd-why-card,
.ntd-recent-card,
.ntd-faq-card {
    padding: var(--ntd-card-pad) !important;
}

.ntd-about-text {
    margin-bottom: var(--nui-gap-cards) !important;
}

.ntd-highlights {
    padding-top: var(--nui-gap-tight) !important;
    gap: var(--ntd-gap-inner) !important;
}

.ntd-content .nd-pkg-banner {
    margin-top: 0 !important;
    padding: 22px 24px !important;
}

.ntd-content .nd-pkg-trust {
    margin-top: var(--ntd-gap-inner) !important;
    gap: var(--ntd-gap-inner) !important;
}

.ntd-mobile-cta {
    margin-bottom: var(--ntd-gap-inner) !important;
}

.ntd-section {
    margin-bottom: 0 !important;
}

/* Tour detail section anchors need extra scroll-margin-top because
   both the main sticky header (68px) AND the sticky tabs bar (~48px) stack up.
   Override the 88px global rule set at the top of this file. */
.ntd-about-card[id],
.ntd-itin-card[id],
.ntd-incl-card[id],
#ntd-exclusions,
.ntd-gallery-card[id],
.ntd-faq-card[id] {
    scroll-margin-top: 132px;
}

@media (max-width: 768px) {
    .ntd-about-card[id],
    .ntd-itin-card[id],
    .ntd-incl-card[id],
    #ntd-exclusions,
    .ntd-gallery-card[id],
    .ntd-faq-card[id] {
        scroll-margin-top: 116px;
    }
}

@media (max-width: 640px) {
    .ntd-about-card[id],
    .ntd-itin-card[id],
    .ntd-incl-card[id],
    #ntd-exclusions,
    .ntd-gallery-card[id],
    .ntd-faq-card[id] {
        scroll-margin-top: 108px;
    }
}

/* ═══════════════════════════════════════════════════
   CUSTOMER PORTAL
   ═══════════════════════════════════════════════════ */

.ncp-main-inner,
.ncp-shell {
    gap: var(--nui-gap-tight) !important;
}

.ncp-main-inner {
    padding-top: var(--nui-gap-tight) !important;
    padding-bottom: var(--nui-gap-section) !important;
}

.cd-top,
.cd-bottom,
.cd-mid {
    gap: var(--nui-gap-cards) !important;
}

.cd-top {
    margin-bottom: var(--nui-gap-tight) !important;
}

.cd-mid {
    margin-bottom: var(--nui-gap-tight) !important;
}

.cd-bottom {
    margin-bottom: var(--nui-gap-section-y) !important;
}

.cd-stats-list {
    gap: var(--nui-gap-cards) !important;
}

.ce-list,
.cb-list {
    gap: var(--nui-gap-cards) !important;
}

.ce-card,
.cb-card {
    margin-bottom: var(--nui-gap-cards) !important;
}

.prop-pkg-grid,
.prop-quick-bar,
.prop-policy-grid,
.bkd-info-grid,
.bkd-inc-grid {
    gap: var(--nui-gap-cards) !important;
}

.prop-sidebar {
    gap: var(--nui-gap-tight) !important;
}

/* ═══════════════════════════════════════════════════
   TABLET
   ═══════════════════════════════════════════════════ */

@media (max-width: 991px) {
    :root {
        --nui-gap-section-y: var(--space-12, 48px);
        --nui-gap-block: var(--space-6, 24px);
        --nui-gap-footer: var(--space-16, 64px);
        --nui-gap-planner-nav: var(--space-6, 24px);
    }

    .nd-hero-inner {
        gap: 28px !important;
    }

    .ntd-body {
        --ntd-gap-block: var(--space-4, 16px);
        --ntd-gap-band: var(--space-6, 24px);
        --ntd-gap-inner: 14px;
        --ntd-body-pt: var(--space-4, 16px);
        --ntd-body-pb: var(--space-12, 48px);
        --ntd-card-pad: 18px;
        --ntd-section-start-mt: var(--nui-gap-tight);
    }

    .ntd-content > .ntd-about-card:first-child,
    .ntd-sidebar-stack {
        margin-top: calc(var(--ntd-section-start-mt) / 2) !important;
    }
}

/* ═══════════════════════════════════════════════════
   MOBILE
   ═══════════════════════════════════════════════════ */

@media (max-width: 640px) {
    :root {
        --nui-gap-section-y: var(--space-8, 32px);
        --nui-gap-block: var(--space-5, 20px);
        --nui-gap-footer: var(--space-12, 48px);
        --nui-gap-planner-nav: var(--space-5, 20px);
        --nui-gap-hero-search: var(--space-5, 20px);
    }

    .nd-hero-inner {
        gap: 8px !important;
    }

    .nd-dest-section {
        padding-top: var(--space-5, 20px) !important;
    }

    .ntd-body {
        --ntd-gap-block: var(--space-3, 12px);
        --ntd-gap-band: var(--space-5, 20px);
        --ntd-gap-inner: var(--space-3, 12px);
        --ntd-gap-title: 10px;
        --ntd-body-pt: var(--space-3, 12px);
        --ntd-body-pb: calc(var(--space-12, 48px) + env(safe-area-inset-bottom, 0px));
        --ntd-card-pad: var(--space-4, 16px);
    }

    .ntd-content .nd-pkg-banner {
        padding: 18px 16px !important;
        border-radius: 16px !important;
    }

    .ntd-highlights {
        padding-top: var(--space-3, 12px) !important;
        gap: 10px !important;
    }

    .ntd-about-text {
        margin-bottom: var(--space-3, 12px) !important;
    }

    .ntd-incl-grid {
        gap: var(--nui-gap-cards) !important;
    }
}

@media (max-width: 575px) {
    :root {
        --nui-gap-section-y: var(--space-8, 32px);
    }
}

@media (max-width: 480px) {
    .ntd-body {
        --ntd-gap-block: 10px;
        --ntd-gap-band: var(--space-4, 16px);
    }
}