/* ═══════════════════════════════════════════════════
   New UI — inner pages responsive (all screens)
   Canonical breakpoints: 1100 / 900 / 768 / 640 / 480
   Loaded by layouts/new-dashboard + layouts/new-customer
   ═══════════════════════════════════════════════════ */

/* ── Tablet landscape ─────────────────────────────── */
@media (max-width: 1100px) {
    :root {
        --nd-gutter-x: 16px;
    }

    .ndl-header-inner,
    .ndl-topbar-inner,
    .ndl-footer-grid,
    .ndl-footer-bar {
        padding-left: 16px;
        padding-right: 16px;
    }

    .prop-page-shell,
    .ntd-main-grid {
        gap: 18px;
    }
}

/* ── Tablet portrait ──────────────────────────────── */
@media (max-width: 900px) {
    :root {
        --nd-gutter-x: 14px;
        --nd-gap-half: 16px;
    }

    .nui-section,
    .ab-section,
    .ct-section,
    .nbl-section,
    .nic-section,
    .nid-section,
    .nsr-section {
        padding-top: 16px;
        padding-bottom: 16px;
    }

    /* Generic 2-col → 1-col */
    .nui-two-col,
    .ct-grid,
    .ab-grid,
    .nbl-layout {
        grid-template-columns: 1fr !important;
    }

    /* Destination / category listing */
    .nid-tours-grid,
    .nic-tours-grid,
    .nd-dest-grid,
    .nd-cat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .nid-duration-trust,
    .nic-duration-trust {
        display: none;
    }

    .nid-trust-row,
    .nic-trust-row,
    .nid-post-tours-block .nd-pkg-trust {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
    }

    .nid-section-top,
    .nic-section-top,
    .nd-dest-section-head,
    .nd-cat-section-head {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 10px;
    }

    .nid-section-controls,
    .nic-section-controls {
        width: 100%;
        justify-content: space-between;
    }

    /* Tour detail sidebar cards */
    .ntd-sidebar-stack {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ntd-journey-card,
    .ntd-recent-card {
        grid-column: 1 / -1;
    }

    /* Customer portal grids */
    .cd-top,
    .cd-bottom,
    .cd-mid,
    .cd-mid.reverse {
        grid-template-columns: 1fr !important;
    }

    .ce-list-header,
    .cb-list-header {
        flex-wrap: wrap;
        gap: 10px;
    }
}

/* ── Small tablet / large phone ───────────────────── */
@media (max-width: 768px) {
    .ndl-header-inner,
    .ncp-nav-inner {
        padding-left: 16px;
        padding-right: 16px;
    }

    .nid-hero,
    .nic-hero,
    .nsr-hero,
    .ab-hero,
    .ct-hero,
    .nbl-hero {
        min-height: 360px;
    }

    .nid-hero-inner,
    .nic-hero-inner,
    .nsr-hero-inner {
        padding-left: 16px;
        padding-right: 16px;
    }

    .nid-body,
    .nic-body,
    .nsr-body {
        padding-left: 16px;
        padding-right: 16px;
    }

    .ntd-tabs-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .ntd-tabs-wrap::-webkit-scrollbar {
        display: none;
    }

    .ntd-tabs {
        flex-wrap: nowrap;
        min-width: max-content;
        padding-bottom: 2px;
    }

    .ntd-tab-btn {
        flex-shrink: 0;
        white-space: nowrap;
    }

    .ntd-itin-stats {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .prop-pkg-grid {
        grid-template-columns: 1fr;
    }

    .prop-quick-bar {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ce-card,
    .cb-card {
        padding: 14px 16px;
    }

    .ce-card-meta,
    .cb-card-meta {
        flex-wrap: wrap;
        gap: 8px;
    }
}

/* ── Mobile ───────────────────────────────────────── */
@media (max-width: 640px) {
    :root {
        --nd-gutter-x: 16px;
        --nd-gap-half: 14px;
    }

    /* Overlap bars — less negative margin */
    .nui-overlap-wrap,
    .ab-stats-wrap,
    .nic-duration-wrap,
    .nid-duration-wrap,
    .nd-dest-filter-wrap,
    .nd-cat-filter-wrap,
    .nsr-filter-wrap {
        margin-top: -40px;
    }

    .ab-hero-stats {
        grid-template-columns: 1fr 1fr;
    }

    .ab-hero-stat:nth-child(2) {
        border-right: none;
    }

    .ab-hero-stat:nth-child(odd) {
        border-right: 1px solid #f1f5f9;
    }

    /* Section heads stack */
    .nd-dest-section-head,
    .nd-pkg-head,
    .nd-blog-head,
    .nd-cat-section-head,
    .nbl-section-head,
    .nsr-results-head {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 8px;
    }

    /* Hide carousel arrows — swipe only */
    .nd-dest-arr,
    .nd-pkg-arr,
    .nid-more-arr,
    .nui-carousel-arr,
    .nd-blog-arr {
        display: none !important;
    }

    /* Listing grids → single column */
    .nid-tours-grid,
    .nic-tours-grid,
    .nd-dest-grid,
    .nd-cat-grid,
    .nsr-tours-grid {
        grid-template-columns: 1fr !important;
    }

    .nid-trust-row,
    .nic-trust-row,
    .nid-post-tours-block .nd-pkg-trust,
    .nic-post-tours-block .nd-pkg-trust,
    .ntd-content .nd-pkg-trust {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 14px 12px !important;
    }

    /* Hero typography */
    .nid-hero,
    .nic-hero {
        min-height: 320px;
    }

    /* Listing page hero titles: align with Phase-1 clamp minimum (~28px per client spec) */
    .nid-hero-title,
    .nic-hero-title,
    .nsr-hero-title {
        font-size: 1.75rem !important;
        line-height: 1.18;
    }

    .ntd-hero {
        min-height: 380px;
    }

    /* Tour detail hero: slightly larger heading on phone */
    .ntd-hero-title {
        font-size: 1.625rem !important;
    }

    .nui-section-title,
    .ab-title,
    .nd-dest-section-title,
    .ntd-section-title,
    .prop-sec-title {
        font-size: 1.375rem;
    }

    /* Tour detail */
    .ntd-sidebar-stack {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .ntd-body {
        padding: 12px 0 calc(56px + env(safe-area-inset-bottom, 0px));
    }

    .ntd-itin-layout {
        grid-template-columns: 1fr;
    }

    .ntd-itin-day-img {
        height: 180px;
    }

    .ntd-itin-highlights {
        grid-template-columns: 1fr;
    }

    .ntd-itin-mini-gallery {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ntd-itin-body-inner {
        padding-left: 0;
    }

    /* Thumbnail + stats sizing handled in _itinerary partial — do not override here */

    .ntd-cta-bar {
        padding: 12px 14px calc(12px + env(safe-area-inset-bottom, 0px));
    }

    .ntd-cta-bar-inner {
        flex-direction: row;
        align-items: center;
        gap: 10px;
    }

    .ntd-cta-bar-copy {
        display: none;
    }

    .ntd-cta-bar-actions {
        width: 100%;
        justify-content: stretch;
    }

    .ntd-cta-wa-btn,
    .ntd-cta-cb-btn {
        flex: 1;
        justify-content: center;
        min-height: 44px;
    }

    .ntd-cta-cb-btn span {
        display: none;
    }

    /* Customer portal nav */
    .ncp-hamburger {
        display: flex !important;
    }

    .ncp-help-phone-label,
    .ncp-help-phone-num {
        display: none;
    }

    .ncp-nav {
        height: 56px;
    }

    .ncp-nav-inner {
        gap: 10px;
    }

    .ncp-user-name {
        display: none;
    }

    .ncp-user {
        padding: 4px;
        border-radius: 50%;
    }

    .ncp-main,
    .ncp-main.ncp-main--compact {
        padding: 12px 12px calc(88px + env(safe-area-inset-bottom, 0px));
    }

    /* Proposal / enquiry detail */
    .prop-hero-img {
        height: 160px;
    }

    .prop-hero-title {
        font-size: 18px;
    }

    .prop-hero-body {
        padding: 14px 16px 16px;
    }

    .prop-pkg-card {
        min-width: 0;
    }

    .prop-hotel-track {
        margin-left: -4px;
        margin-right: -4px;
    }

    .prop-hotel-card {
        flex-basis: 148px;
        min-width: 148px;
        max-width: 148px;
    }

    .prop-policy-grid,
    .prop-transport-grid {
        grid-template-columns: 1fr;
    }

    .prop-quick-bar {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .prop-journey-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }

    /* Blog */
    .nbl-grid,
    .nbs-related-grid {
        grid-template-columns: 1fr !important;
    }

    .nbs-article-layout {
        grid-template-columns: 1fr !important;
    }

    /* About: team stays 2-col on mobile so portrait cards aren't oversized */
    .ab-team-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .ct-info-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .ct-form-row {
        grid-template-columns: 1fr !important;
    }

    .ct-page {
        padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px));
    }

    .ct-submit-btn {
        min-height: 48px;
    }

    /* Search filters */
    .nsr-filter-row {
        flex-direction: column;
        align-items: stretch;
    }

    .nsr-filter-row > * {
        width: 100%;
    }

    /* Lead capture modal */
    .lead-cap-row {
        grid-template-columns: 1fr;
    }

    .lead-cap-modal-body {
        max-height: min(78vh, 640px);
        padding: 16px;
    }

    #leadCaptureModal .modal-dialog {
        margin: 10px;
        max-width: calc(100% - 20px);
    }

    /* Category sticky enquiry */
    .cat-sticky-enq-form {
        grid-template-columns: 1fr;
        padding: 0 14px 14px;
    }

    .cat-sticky-enq-inner {
        padding: 10px 14px;
    }

    .cat-sticky-enq-copy strong {
        font-size: 12px;
    }

    .cat-sticky-enq-copy span {
        font-size: 10.5px;
    }

    /* Tables → horizontal scroll wrapper */
    .ncp-table-wrap,
    .ce-table-wrap,
    .mobile-table-scroll {
        margin-left: -4px;
        margin-right: -4px;
        padding-left: 4px;
        padding-right: 4px;
    }

    /* Banner blocks — align with homepage mint band on mobile */
    .nd-pkg-banner {
        grid-template-columns: 1fr !important;
        padding: 18px 16px !important;
        border-radius: 16px !important;
        margin-top: 0 !important;
    }

    .nd-pkg-banner-left {
        flex-direction: row !important;
        align-items: center !important;
        text-align: left !important;
        gap: 12px;
        padding-right: 0;
    }

    .nd-pkg-banner--has-callback .nd-pkg-banner-cta {
        transform: none !important;
        padding-top: 0;
    }

    .nd-pkg-banner-cta-row {
        flex-direction: column;
        width: 100%;
        flex-wrap: wrap;
    }

    .nd-pkg-banner-cta-row .nd-pkg-banner-btn,
    .nd-pkg-banner-cta-row .nd-pkg-cb-btn,
    .nd-pkg-banner-cta-row .nd-pkg-banner-btn-cb {
        width: 100%;
        justify-content: center;
        min-height: 44px;
    }

    .nd-pkg-trust-item {
        align-items: center;
    }

    .nd-pkg-trust-title {
        font-size: 12px;
        line-height: 1.35;
    }
}

/* ── Small phones ─────────────────────────────────── */
@media (max-width: 480px) {
    :root {
        --nd-gutter-x: 12px;
    }

    .ab-hero-stats {
        grid-template-columns: 1fr 1fr;
        gap: 0;
    }

    .nui-section-title,
    .ab-title,
    .nd-dest-section-title {
        font-size: 1.25rem;
    }

    .prop-quick-bar {
        grid-template-columns: 1fr;
    }

    .prop-hero-meta {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .ntd-cta-bar-actions {
        flex-direction: column;
    }

    .ntd-cta-wa-btn,
    .ntd-cta-cb-btn {
        width: 100%;
    }

    .ncp-nav-inner {
        padding-left: 12px;
        padding-right: 12px;
    }

    .ncp-main,
    .ncp-main.ncp-main--compact {
        padding: 10px 10px calc(88px + env(safe-area-inset-bottom, 0px));
    }

    /* Keep tap targets at 44px — do not shrink icon buttons */
    .ncp-nav-icon-btn,
    .ncp-hamburger {
        min-width: 44px;
        min-height: 44px;
    }

    .cd-trust-bar,
    .cd-booking-chips {
        grid-template-columns: 1fr !important;
    }

    .ndl-mobile-drawer {
        width: min(300px, 92vw);
    }

    .ct-info-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ── Utility: horizontal scroll tabs (add class in markup) ── */
@media (max-width: 640px) {
    .mobile-scroll-tabs {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        gap: 8px;
        padding-bottom: 4px;
    }

.mobile-scroll-tabs::-webkit-scrollbar {
    display: none;
}

/* ═══════════════════════════════════════════════════
   Inner pages — mobile polish (all screens)
   Destinations · tours · blog · static · customer
   ═══════════════════════════════════════════════════ */
@media (max-width: 640px) {
    /* Page shells — no horizontal bleed */
    .nd-dest-page,
    .nid-page,
    .nic-page,
    .nsr-page,
    .nbl-page,
    .nbs-page,
    .ab-page,
    .ct-page,
    .ntd-page,
    .ncp-shell {
        overflow-x: clip;
        max-width: 100%;
    }

    /* Section heads with “view all” — keep title + link on one row */
    .nid-more-head,
    .nd-dest-section-head,
    .nd-cat-section-head,
    .nbl-section-head,
    .nsr-results-head {
        flex-direction: row !important;
        align-items: flex-end !important;
        justify-content: space-between;
        flex-wrap: nowrap;
        gap: 10px;
    }

    .nid-more-head > div:first-child,
    .nd-dest-section-head > div:first-child {
        flex: 1;
        min-width: 0;
    }

    .nid-more-title,
    .nd-dest-section-title {
        max-width: none !important;
    }

    .nid-more-link,
    .nd-view-all {
        flex-shrink: 0;
        font-size: 12px;
        align-self: flex-end;
        margin-bottom: 2px;
    }

    /* Destination carousel — edge swipe */
    .nid-more-carousel-wrap {
        overflow-x: clip;
        margin-left: calc(-1 * var(--nd-gutter-x, 16px));
        margin-right: calc(-1 * var(--nd-gutter-x, 16px));
        padding-left: var(--nd-gutter-x, 16px);
        padding-right: var(--nd-gutter-x, 16px);
    }

    .nid-more-carousel {
        scroll-padding-left: var(--nd-gutter-x, 16px);
        padding-right: var(--nd-gutter-x, 16px);
    }

    /* Dark / light help & CTA bands */
    .nd-dest-cta {
        padding: 22px 18px;
        border-radius: 16px;
        margin-top: 40px;
        gap: 16px;
    }

    .nd-dest-cta-btns {
        width: 100%;
        flex-direction: column;
        gap: 10px;
    }

    .nd-dest-cta-btn {
        width: 100%;
        justify-content: center;
        min-height: 44px;
    }

    .nic-help-banner,
    .nid-help-banner,
    .nsr-help-banner,
    .nbs-help-banner {
        padding: 20px 18px;
        border-radius: 16px;
        flex-direction: column;
        align-items: stretch;
        text-align: left;
        gap: 14px;
    }

    .nic-help-btns,
    .nid-help-btns,
    .nsr-help-btns,
    .nic-help-banner > div:last-child,
    .nsr-help-banner > div:last-child,
    .nbs-help-banner > div:last-child {
        display: flex;
        flex-direction: column;
        width: 100%;
        gap: 10px;
    }

    .nic-help-btn,
    .nid-help-btn,
    .nsr-help-btn,
    .nbs-help-btn {
        width: 100%;
        justify-content: center;
        min-height: 44px;
    }

    /* Tour cards — full-width action buttons */
    .nid-tour-btns,
    .nic-tour-btns,
    .nsr-tour-btns {
        grid-template-columns: 1fr !important;
        gap: 8px;
    }

    .nid-tour-btn-outline,
    .nid-tour-btn-fill,
    .nic-tour-btn-outline,
    .nic-tour-btn-fill,
    .nsr-tour-btn-outline,
    .nsr-tour-btn-fill {
        min-height: 44px;
        justify-content: center;
    }

    /* Customer dashboard trust chips */
    .cd-trust-bar {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px;
    }

    .cd-trust-section-head {
        flex-wrap: wrap;
        gap: 8px;
    }

    .cd-trust-section-title {
        font-size: 14px;
    }

    .cd-card-head {
        align-items: flex-start;
    }

    .cd-card-link {
        font-size: 11px;
        padding: 6px 10px;
    }

    .cd-explore-scroll,
    .cd-dest-scroll {
        scroll-padding-left: 2px;
    }

    .cd-explore-btn,
    .cd-booking-detail-btn,
    .cd-exp-btn {
        min-height: 44px;
    }

    /* My Enquiries — mobile polish */
    .enq-page-head {
        grid-template-columns: 1fr !important;
    }

    .enq-search-wrap {
        max-width: none !important;
    }

    .enq-filter-tabs {
        flex-wrap: nowrap !important;
    }

    .enq-card-name {
        white-space: normal;
    }

    /* Proposal — mobile summary first, full-width CTAs */
    .prop-page-shell {
        display: flex !important;
        flex-direction: column !important;
    }

    .prop-sidebar {
        order: -1 !important;
        position: static !important;
    }

    .prop-sidebar-btn,
    .prop-sidebar-actions .prop-sidebar-btn,
    .prop-sidebar-actions form .prop-sidebar-btn {
        width: 100%;
        min-height: 44px;
    }

    .prop-pkg-grid {
        flex-wrap: nowrap !important;
    }

    /* Booking detail — payment near top, full-width CTAs */
    .bkd-layout {
        display: flex !important;
        flex-direction: column !important;
    }

    .bkd-sidebar {
        order: -1 !important;
        position: static !important;
    }

    .bkd-pay-btn,
    .bkd-pay-history-btn,
    .bkd-support-phone,
    .bkd-support-wa {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .nid-trust-row,
    .nic-trust-row,
    .nid-post-tours-block .nd-pkg-trust,
    .nic-post-tours-block .nd-pkg-trust,
    .ntd-content .nd-pkg-trust {
        grid-template-columns: 1fr !important;
    }

    .nd-dest-cta-title {
        font-size: 1.05rem !important;
    }

    .cd-trust-bar {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 640px) {
    .mobile-scroll-tabs > * {
        flex-shrink: 0;
    }
}