/* Round 25 (2026-10-27): trip page on phones and tablets (< 992px), rebuilt after benchmarking Nepal Hiking Team and
   Magical Nepal on a 390px phone. Loaded after trip.css + trip-sidebar.css; desktop (>= 992px) is untouched.
   Order on a phone: photo -> title, rating, fact chips -> booking card + trust row -> sticky section tabs ->
   facts -> overview (folds) -> "questions?" card -> itinerary (days collapsed) -> "tailor-made" card -> the rest,
   with the bottom bar (price + WhatsApp + Enquire + Book) always in reach. */

.mbk, .mhp { display: none; }

@media (max-width: 991.98px) {

    /* ---------- 1. hero: photo on top, title block on white below (benchmark: photo grid + title + chips) ---------- */
    .tp-hero { display: block; min-height: 0 !important; max-height: none !important; background: #fff; color: #0a2540; overflow: visible; }
    .tp-hero-img { position: relative; inset: auto; display: block; width: 100%; height: min(64vw, 360px); object-fit: cover; z-index: 0; transform: none; animation: none; }
    .tp-hero-shade { display: none; }
    .tp-hero-inner { padding: 14px 16px 2px !important; color: #0a2540; }
    .tp-crumbs { margin-bottom: 8px; font-size: 12px; color: #5b6f85; gap: 6px; }
    .tp-crumbs a { color: #0073ad; font-weight: 600; }
    .tp-crumbs span { color: #9aabbd; }
    .tp-title { margin: 0 0 12px !important; font-size: 27px !important; line-height: 1.15 !important; font-weight: 800 !important; letter-spacing: -.01em; color: #0a2540 !important; text-shadow: none !important; }
    .tp-meta { display: flex; flex-wrap: wrap; gap: 6px !important; margin: 0 0 6px !important; font-size: 12.5px !important; color: #33465b; }
    .tp-meta li { padding: 6px 10px !important; border: 1px solid #dbe4ec !important; border-radius: 999px; background: #f5f8fb; color: #33465b; line-height: 1.2; }
    .tp-meta li:first-child { padding-left: 10px !important; border-left: 1px solid #dbe4ec !important; }
    .tp-meta b { color: #0a2540 !important; }
    .tp-meta li .tp-meta-sub { display: inline; margin: 0 0 0 4px; font-size: 1em; opacity: .75; }
    .tp-meta li .tp-meta-sub::before { content: "("; } .tp-meta li .tp-meta-sub::after { content: ")"; }
    .tp-meta-rating { order: -1; background: #fff8e6 !important; border-color: #f6dc9a !important; }
    .tp-hero-actions .tp-btn.primary, .tp-hero-actions .tp-btn.ghost { display: none !important; }
    /* "View all photos" sits on the photo, bottom right */
    .tp-hero #tp-photos { position: absolute; right: 12px; top: calc(min(64vw, 360px) - 52px); z-index: 2; min-height: 38px; padding: 0 14px; font-size: 13px; border-radius: 999px; background: rgba(10, 37, 64, .72); color: #fff; border: 0; backdrop-filter: blur(6px); }
    .tp-hero-actions { margin: 0; }
    .mdrn--band { margin-top: 10px; }

    /* ---------- 2. booking card (benchmark: price box + "check availability" right after the facts) ---------- */
    .mbk { display: block; padding: 12px 0 6px; background: #fff; }
    .mbk .container { padding-left: 16px; padding-right: 16px; }
    .mbk-card { border: 1px solid #d5e1ea; border-radius: 18px; padding: 16px; background: #fff; box-shadow: 0 10px 28px -18px rgba(10, 37, 64, .45); }
    .mbk-price small { display: block; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #5b6f85; }
    .mbk-price b { display: inline-block; margin-top: 2px; font-size: 28px; line-height: 1.1; font-weight: 800; color: #0a2540; font-variant-numeric: tabular-nums; }
    .mbk-price b.is-quote { font-size: 22px; }
    .mbk-price del { margin-left: 8px; color: #8a9bb0; font-size: 15px; }
    .mbk-price em { display: block; margin-top: 4px; font-style: normal; font-size: 12.5px; color: #5b6f85; line-height: 1.4; }
    .mbk-actions { display: grid; gap: 8px; margin-top: 14px; }
    .mbk-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
    .mbk-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 14px; border-radius: 999px; font-weight: 800; font-size: 15px; text-decoration: none !important; white-space: nowrap; }
    .mbk-btn--primary { background: #15803d; color: #fff !important; }
    .mbk-btn--primary:active { background: #188a4c; }
    .mbk-btn--ghost { border: 1.5px solid #0a2540; color: #0a2540 !important; background: #fff; font-size: 14px; }
    .mbk-btn--wa { background: #15803d; color: #fff !important; font-size: 14px; }
    .mbk-custom { display: block; margin-top: 2px; font-size: 13px; color: #33465b !important; text-align: center; text-decoration: none !important; }
    .mbk-custom b { color: #0073ad; text-decoration: underline; text-underline-offset: 3px; }
    .mbk-terms { list-style: none; margin: 14px 0 0; padding: 12px 0 0; border-top: 1px dashed #d5e1ea; display: grid; gap: 6px; }
    .mbk-terms li { display: flex; gap: 8px; font-size: 12.5px; line-height: 1.45; color: #33465b; }
    .mbk-terms i { color: #15803d; margin-top: 2px; }
    /* trust row (benchmark: 2 x 2 trust badges) */
    .mbk-trust { list-style: none; margin: 10px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
    .mbk-trust li { display: flex; gap: 8px; align-items: flex-start; padding: 10px; border: 1px solid #e3ebf2; border-radius: 12px; background: #f7fafc; }
    .mbk-trust i { flex: 0 0 auto; width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: #e4f1fa; color: #0073ad; font-size: 12px; }
    .mbk-trust span { font-size: 11.5px; line-height: 1.3; color: #5b6f85; min-width: 0; }
    .mbk-trust b { display: block; font-size: 12.5px; color: #0a2540; }

    /* ---------- 3. sticky section tabs (benchmark: tabs pinned to the top while the header is hidden) ---------- */
    .pack-details { padding-top: 0 !important; }
    .tp-nav { margin: 0 -12px 14px !important; padding: 6px 0 !important; border-bottom: 1px solid #e3e9ef; box-shadow: 0 6px 14px -12px rgba(10, 37, 64, .5); }
    .tp-nav .tp-nav-label { display: none !important; }
    .tp-nav .navbar-nav { padding: 0 12px !important; gap: 4px !important; scroll-behavior: smooth; }
    .tp-nav .nav-link { padding: 8px 12px !important; font-size: 13px !important; white-space: nowrap; border-radius: 999px; }
    .tp-nav .nav-link i { display: none; }

    /* ---------- 4. readable width: one card level, 16px side padding (the old nesting left ~200px for text) ---------- */
    .pack-details > .container { padding-left: 12px; padding-right: 12px; }
    .pack-details .col-md-8 > .content > [id], .pack-details .col-md-8 > .content > .icon-all-top { padding: 18px 16px !important; margin-bottom: 12px !important; border-radius: 16px !important; }
    .pack-details .col-md-8 > .content :is(.overview, .accordion-body) { padding-left: 0 !important; padding-right: 0 !important; margin-left: 0 !important; margin-right: 0 !important; }
    .pack-details .col-md-8 > .content p, .pack-details .col-md-8 > .content li { font-size: 15.5px; line-height: 1.65; }
    .pack-details .col-md-8 > .content h2 { font-size: 21px !important; line-height: 1.25 !important; }
    .pack-details .col-md-8 > .content h3 { font-size: 17px !important; }

    /* facts: compact 2-column grid */
    .pack-details .icon-all-top .all-icon-detail { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px 12px !important; }
    .pack-details .icon-all-top .all-icon-detail .content { display: flex !important; gap: 8px; align-items: flex-start; padding: 0 !important; margin: 0 !important; border: 0 !important; }
    .pack-details .icon-all-top .all-icon-detail .content > i, .pack-details .icon-all-top .all-icon-detail .content > svg, .pack-details .icon-all-top .all-icon-detail .content > img { flex: 0 0 auto; width: 20px !important; height: 20px !important; font-size: 18px; margin-top: 2px; }
    .pack-details .icon-all-top .cont1 strong { display: block; font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: #5b6f85; }
    .pack-details .icon-all-top .cont1 b { display: block; font-size: 14px !important; line-height: 1.3 !important; color: #0a2540; }

    /* ---------- 5. itinerary: one-line day rows, details on tap (benchmark: collapsed list with altitude / time) ---------- */
    #itinerary .accordion-item { border: 0 !important; border-bottom: 1px solid #e3e9ef !important; margin: 0 !important; background: none !important; }
    #itinerary .accordion-item::before, #itinerary .accordion-item::after { display: none !important; }
    #itinerary .accordion-header { padding: 12px 0 !important; gap: 10px; }
    #itinerary .accordion-button { padding: 0 !important; background: none !important; box-shadow: none !important; }
    #itinerary .accordion-button::after { display: none !important; }
    #itinerary .itn-h { margin: 0 !important; font-size: 15px !important; line-height: 1.35 !important; font-weight: 700 !important; color: #0a2540; }
    #itinerary .itn-h .itn-day { display: inline-block; margin-right: 6px; padding: 2px 8px; border-radius: 999px; background: #e4f1fa; color: #0073ad; font-size: 12px; font-weight: 800; vertical-align: 1px; }
    #itinerary .accordion-header svg { transition: transform .2s; color: #0073ad; }
    #itinerary .accordion-header:has(.accordion-button:not(.collapsed)) svg { transform: rotate(180deg); }
    #itinerary .accordion-body { padding: 0 0 14px !important; }
    #itinerary .itinerary-expand-btn { font-size: 13px; font-weight: 700; white-space: nowrap; padding: 6px 12px; border: 1px solid #d5e1ea; border-radius: 999px; }
    /* walking time / distance / bed / meals as small chips (the icons were blowing up to full width) */
    #itinerary .ifacts { display: flex !important; flex-wrap: wrap !important; gap: 6px !important; padding: 0 0 10px !important; }
    #itinerary .ifacts span { display: inline-flex !important; align-items: center; gap: 5px; margin: 0 !important; padding: 4px 9px; border-radius: 999px; background: #f3f6f9; font-size: 12.5px; white-space: nowrap !important; overflow-wrap: normal !important; word-break: normal !important; }
    #itinerary .ifacts span img { width: 14px !important; height: 14px !important; max-width: 14px !important; margin: 0 !important; opacity: .7; }

    /* ---------- 6. conversion cards between sections ---------- */
    .mhp { display: block; margin: 0 0 12px; padding: 16px; border-radius: 16px; background: #eef6fb; border: 1px solid #cfe3f1; }
    .mhp--custom { background: #effaf3; border-color: #c7ebd4; }
    .mhp-head { display: flex; gap: 12px; align-items: center; }
    .mhp-head img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; }
    .mhp-title { margin: 0 !important; font-size: 16px; font-weight: 800; color: #0a2540; line-height: 1.3; }
    .mhp-title small { display: block; margin-top: 2px; font-size: 12.5px; font-weight: 500; color: #5b6f85; }
    .mhp-text { margin: 6px 0 12px !important; font-size: 14px !important; line-height: 1.55 !important; color: #33465b; }
    .mhp-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
    .mhp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 999px; font-weight: 800; font-size: 14px; text-decoration: none !important; background: #0073ad; color: #fff !important; }
    .mhp-btn--wa { background: #15803d; }
    .mhp-btn--ghost { background: #fff; color: #0a2540 !important; border: 1.5px solid #0a2540; }
    .mhp--custom .mhp-btn { background: #15803d; }

    /* ---------- 7. bottom bar: always in reach, never covering content ---------- */
    .tp-mobilebar { box-shadow: 0 -8px 20px -12px rgba(10, 37, 64, .35); }
    body:has(.tp-mobilebar) { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }

    /* sidebar on phones: the booking card above already does its job - keep the expert card + PDF/share */
    .pack-details .tsb .tsb-panel { display: none !important; }
}

@media (min-width: 576px) and (max-width: 991.98px) {
    .tp-title { font-size: 34px !important; }
    .mbk-card { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; align-items: start; }
    .mbk-actions { margin-top: 0; }
    .mbk-terms { grid-column: 1 / -1; }
    .mbk-trust { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* overview fold (button sits inside the card, over the fade) */
@media (max-width: 991.98px) {
    #overview.tp-fold--overview { max-height: 760px; padding-bottom: 64px !important; }
    #overview.tp-fold--overview.is-open { max-height: none; }
    #overview.tp-fold--overview::after { bottom: 0; height: 160px; }
    #overview.tp-fold--overview > .tp-fold-btn { display: inline-flex !important; position: absolute; left: 16px; bottom: 14px; z-index: 2; margin: 0; }
    #overview.tp-fold--overview.is-open > .tp-fold-btn { position: static; margin-top: 12px; }
}

/* round 25b: measured on a 390px phone - text column was 247-287px. Win over older, more specific rules. */
@media (max-width: 991.98px) {
    html body .pack-details .row > .col-md-8, html body .pack-details .row > .col-md-4 { padding-left: 0 !important; padding-right: 0 !important; }
    html body .pack-details .row { margin-left: 0 !important; margin-right: 0 !important; }
    html body .pack-details .col-md-8 > .content > [id], html body .pack-details .col-md-8 > .content > .icon-all-top { padding: 18px 16px !important; border-left-width: 1px; }
    html body #itinerary .accordion-item { padding-left: 0 !important; padding-right: 0 !important; }
    html body #itinerary .accordion::before, html body #itinerary .accordion-item::before, html body #itinerary .accordion-header::before { display: none !important; content: none !important; }
    html body #itinerary .accordion-header { display: flex !important; flex-direction: row !important; align-items: flex-start !important; justify-content: space-between !important; cursor: pointer; }
    html body #itinerary .accordion-header > .accordion-button { flex: 1 1 auto; min-width: 0; }
    html body #itinerary .accordion-header > div:last-child { flex: 0 0 auto; padding-top: 3px; }
    html body #itinerary .accordion-button > *:not(.itn-h) { display: none !important; } /* the stray ">" glyph */
    html body .tp-hero .tp-hero-inner { position: static !important; }
}
@media (max-width: 991.98px) { html body #itinerary .accordion-header { flex-wrap: nowrap !important; } }
@media (max-width: 991.98px) {
    html body #itinerary :is(.accordion-collapse, .accordion-body, .content-section) { border-left: 0 !important; margin-left: 0 !important; padding-left: 0 !important; }
    html body #itinerary :is(.accordion-collapse, .accordion-body, .content-section)::before { display: none !important; content: none !important; }
}

/* round 25c: the desktop timeline (2px line + day dot drawn by .accordion-item::before/::after in trip.css/style.css)
   ran through the day text on phones - those rules are more specific than the ones above, so match them */
@media (max-width: 991.98px) {
    html body .pack-details .content #itinerary .accordion-item::before,
    html body .pack-details .content #itinerary .accordion-item:first-child::before,
    html body .pack-details .content #itinerary .accordion-item:before,
    html body .pack-details .content #itinerary .accordion-item::after,
    html body .pack-details .content #itinerary .accordion-item:after { content: none !important; display: none !important; width: 0 !important; background: none !important; border: 0 !important; }
}