/* Alpha Wolf Adventure — consolidated responsive layer
   Load this file after original-preview.css, blade-bridge.css and travel-portal.css. */

@media (min-width: 701px) and (max-width: 1100px) {
  .detail-shell { grid-template-columns: minmax(0,1fr) !important; padding: 52px 5vw !important; }
  .booking-aside { position: static !important; width: min(100%,680px) !important; max-width: 680px !important; margin: 0 auto !important; }
  .portal-tour-grid, .light-grid { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
}

@media (max-width: 700px) {
  :root { --mobile-pad: 18px; }
  html { font-size: 16px !important; scroll-behavior: smooth; }
  html, body { width: 100% !important; max-width: 100% !important; overflow-x: clip !important; }
  body.portal-body { padding-bottom: 76px !important; }
  img, video, iframe { max-width: 100%; }

  /* Header */
  .portal-head { height: 68px !important; padding: 8px 16px !important; }
  .portal-brand img { width: 40px !important; height: 40px !important; }
  .portal-brand span { font-size: .72rem !important; line-height: 1.05 !important; }
  .portal-toggle { width: 42px !important; height: 42px !important; }
  .portal-mobile { top: 68px !important; padding: 10px 18px 20px !important; max-height: calc(100vh - 68px) !important; overflow-y: auto !important; }
  .portal-mobile > a { min-height: 46px; display:flex; align-items:center; font-size:.88rem !important; }

  /* Internal hero */
  .detail-hero { height: 440px !important; min-height: 440px !important; }
  .detail-hero::after { background: linear-gradient(180deg,rgba(0,18,32,.18) 18%,rgba(0,18,32,.9) 100%) !important; }
  .detail-breadcrumb { top: 82px !important; padding: 0 var(--mobile-pad) !important; font-size: .7rem !important; }
  .detail-title { left: var(--mobile-pad) !important; right: var(--mobile-pad) !important; bottom: 28px !important; }
  .detail-title > small { font-size: .67rem !important; letter-spacing: .1em !important; }
  .detail-title h1 { font-size: clamp(2.1rem,11vw,3rem) !important; line-height: .98 !important; margin: 10px 0 18px !important; overflow-wrap:anywhere; }
  .detail-title > div { display:grid !important; grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:8px !important; }
  .detail-title b { min-height:38px; display:flex; align-items:center; justify-content:center; padding:8px !important; font-size:.64rem !important; text-align:center; }

  /* Anchor navigation */
  .detail-jump { position:sticky !important; top:0 !important; z-index:80 !important; height:52px !important; padding:0 14px !important; gap:22px !important; overflow-x:auto !important; scrollbar-width:none; background:#fff !important; box-shadow:0 8px 22px rgba(7,28,47,.08); }
  .detail-jump::-webkit-scrollbar { display:none; }
  .detail-jump a { flex:0 0 auto; min-height:52px; display:flex; align-items:center; font-size:.69rem !important; letter-spacing:.08em !important; }
  .detail-jump-book { display:none !important; }

  /* Detail content */
  .detail-shell { display:flex !important; flex-direction:column !important; width:100% !important; padding:32px var(--mobile-pad) 44px !important; gap:34px !important; }
  .detail-shell > * { min-width:0 !important; width:100% !important; }
  .trek-overview > small, .itinerary-heading > div > small, #inclusions > small, .gallery-head small { font-size:.69rem !important; letter-spacing:.11em !important; }
  .detail-content h2, .itinerary-heading h2, .gallery-head h2, #inclusions > h2 { font-size:2rem !important; line-height:1.08 !important; }
  .trek-overview > p { font-size:.96rem !important; line-height:1.75 !important; }
  .overview-points { display:grid !important; grid-template-columns:1fr !important; gap:10px !important; }
  .overview-points > * { min-height:auto !important; padding:16px !important; }

  /* Route */
  .route-strip { width:calc(100% + 36px) !important; margin:8px -18px 0 !important; padding:24px 18px 28px !important; border-radius:0 !important; overflow:hidden !important; }
  .route-strip > small { font-size:.67rem !important; }
  .route-strip > div { display:flex !important; gap:14px !important; overflow-x:auto !important; padding:6px 2px 8px !important; scroll-snap-type:x mandatory; scrollbar-width:none; }
  .route-strip > div::-webkit-scrollbar { display:none; }
  .route-strip > div > div { flex:0 0 132px !important; min-width:132px !important; scroll-snap-align:start; }
  .route-strip strong { font-size:1rem !important; line-height:1.25 !important; }

  /* Itinerary */
  .itinerary-heading { display:block !important; margin-bottom:18px !important; }
  .itinerary-heading > p { margin-top:8px !important; font-size:.86rem !important; line-height:1.55 !important; }
  .itinerary-premium details { border-radius:12px !important; margin-bottom:10px !important; overflow:hidden; }
  .itinerary-premium summary { display:grid !important; grid-template-columns:52px minmax(0,1fr) 30px !important; gap:12px !important; padding:13px 12px !important; min-height:78px !important; align-items:center !important; }
  .day-badge { width:52px !important; height:52px !important; }
  .day-badge span { font-size:.55rem !important; }
  .day-badge b { font-size:1.12rem !important; }
  .day-title { min-width:0 !important; }
  .day-title small { font-size:.57rem !important; letter-spacing:.08em !important; }
  .day-title b { display:block; font-size:1.05rem !important; line-height:1.2 !important; overflow-wrap:anywhere; }
  .itinerary-premium summary i { width:30px !important; height:30px !important; }
  .day-panel, .itinerary details > p { margin:0 !important; padding:0 16px 18px 76px !important; font-size:.88rem !important; line-height:1.65 !important; }
  .day-meta { gap:7px !important; }

  /* Inclusions and gallery */
  #inclusions > div { display:grid !important; grid-template-columns:1fr !important; gap:14px !important; }
  #inclusions > div > div { padding:20px 18px !important; }
  .detail-gallery { display:grid !important; grid-template-columns:1fr 1fr !important; grid-template-rows:220px 135px !important; gap:8px !important; }
  .detail-gallery > div:first-child { grid-column:1/-1 !important; }
  .gallery-head { display:flex !important; align-items:flex-end !important; flex-direction:row !important; gap:10px !important; }
  .gallery-head > a { white-space:nowrap; font-size:.65rem !important; }
  .video-gallery { grid-template-columns:1fr !important; }
  .safety-note { padding:20px !important; }

  /* Booking */
  .booking-aside { order:20; position:static !important; width:100% !important; max-width:none !important; margin:0 !important; }
  .detail-booking { width:100% !important; padding:20px 16px !important; }
  .detail-booking h2 { font-size:1.65rem !important; }
  .detail-booking label { font-size:.72rem !important; }
  .detail-booking input, .detail-booking select { min-height:50px !important; font-size:16px !important; }
  .detail-booking button { min-height:52px !important; font-size:.78rem !important; }

  /* Listing and destination pages */
  .portal-inner-hero { height:300px !important; min-height:300px !important; padding:95px 18px 30px !important; }
  .portal-inner-hero h1 { font-size:2.35rem !important; line-height:1 !important; overflow-wrap:anywhere; }
  .portal-listing { display:block !important; padding:28px 16px 48px !important; }
  .portal-listing aside { position:static !important; margin-bottom:22px !important; }
  .portal-results .portal-tour-grid, .destination-packages .portal-tour-grid, .light-grid { display:grid !important; grid-template-columns:1fr !important; gap:16px !important; overflow:visible !important; }
  .portal-results .portal-tour-card, .destination-packages .portal-tour-card { min-width:0 !important; width:100% !important; }
  .portal-tour-photo { height:220px !important; }
  .portal-tour-body { padding:15px !important; }
  .portal-tour-body h3 { font-size:1.1rem !important; }
  .portal-results nav svg { width:18px !important; height:18px !important; max-width:18px !important; }
  .destination-catalog-grid { grid-template-columns:1fr !important; }

  /* Gallery, About, policies */
  .season-pages, .gallery-page, .policy-layout, .about-page { padding-left:18px !important; padding-right:18px !important; }
  .gallery-grid { grid-template-columns:1fr 1fr !important; gap:10px !important; }
  .gallery-grid > * { min-width:0 !important; }
  .policy-layout { display:block !important; }
  .policy-layout aside { position:static !important; margin-bottom:24px !important; }

  /* Footer */
  .portal-footer { display:block !important; padding:44px 18px 94px !important; }
  .portal-footer-grid { width:100% !important; display:grid !important; grid-template-columns:1fr 1fr !important; gap:30px 18px !important; }
  .portal-foot-brand { grid-column:1/-1 !important; }
  .portal-footer h4 { font-size:.76rem !important; }
  .portal-footer a, .portal-footer p { font-size:.78rem !important; line-height:1.65 !important; }
  .portal-copyright { width:100% !important; display:flex !important; flex-direction:column !important; gap:7px !important; margin-top:28px !important; font-size:.72rem !important; }

  /* Persistent bottom navigation */
  .mobile-bottom-nav { height:68px !important; }
  .mobile-bottom-nav a { font-size:.62rem !important; }

  /* Trek booking shortcut, created without duplicating the form */
  body:has(.detail-booking) .mobile-bottom-nav a:nth-child(3) { color:#cf883b !important; }
}

@media (max-width: 380px) {
  .detail-title h1 { font-size:2.15rem !important; }
  .detail-gallery { grid-template-columns:1fr !important; grid-template-rows:210px 150px 150px !important; }
  .detail-gallery > div:first-child { grid-column:auto !important; }
  .gallery-grid { grid-template-columns:1fr !important; }
  .portal-footer-grid { grid-template-columns:1fr !important; }
  .portal-foot-brand { grid-column:auto !important; }
}

/* ===== COMPACT SEARCH — POSITION UNCHANGED ===== */
@media (max-width: 700px) {

    /* Trust features remain visible above search */
    .portal-trust {
        display: grid !important;
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        position: absolute !important;
        left: 16px !important;
        right: 16px !important;
        bottom: 96px !important;
        gap: 5px !important;
        z-index: 5 !important;
    }

    .portal-trust > div {
        min-width: 0 !important;
        padding: 0 2px !important;
        text-align: center !important;
    }

    .portal-trust strong {
        display: block !important;
        font-size: 0.56rem !important;
        line-height: 1.15 !important;
        white-space: normal !important;
    }

    .portal-trust span,
    .portal-trust small {
        display: block !important;
        margin-top: 4px !important;
        font-size: 0.48rem !important;
        line-height: 1.15 !important;
        white-space: normal !important;
    }

    /* Search remains in same hero-bottom position */
    .portal-finder {
        position: absolute !important;
        left: 12px !important;
        right: 12px !important;
        bottom: -42px !important;

        width: auto !important;
        height: 84px !important;
        margin: 0 !important;
        padding: 8px !important;

        display: grid !important;
        grid-template-columns:
            minmax(0, 1fr)
            minmax(0, 1fr)
            minmax(0, 1fr)
            minmax(0, 1fr)
            108px !important;
        gap: 0 !important;

        background: #ffffff !important;
        border-radius: 13px !important;
        box-shadow: 0 12px 28px rgba(4, 24, 42, 0.2) !important;
        overflow: hidden !important;
        z-index: 20 !important;
    }

    .portal-finder > div,
    .portal-finder .portal-field {
        min-width: 0 !important;
        width: 100% !important;
        height: 68px !important;
        padding: 10px 7px !important;
        border: 0 !important;
        border-right: 1px solid #e1e6eb !important;
        border-radius: 0 !important;
        background: #ffffff !important;
        overflow: hidden !important;
    }

    .portal-finder label,
    .portal-finder small {
        display: block !important;
        width: 100% !important;
        margin: 0 0 7px !important;
        color: #8a96a2 !important;
        font-size: 0.46rem !important;
        line-height: 1 !important;
        overflow: hidden !important;
        white-space: nowrap !important;
        text-overflow: ellipsis !important;
    }

    .portal-finder input,
    .portal-finder select {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        height: 28px !important;
        padding: 0 12px 0 0 !important;
        border: 0 !important;
        outline: 0 !important;
        background-color: transparent !important;
        color: #10263b !important;
        font-size: 0.59rem !important;
        font-weight: 700 !important;
        white-space: nowrap !important;
        text-overflow: ellipsis !important;
    }

    .portal-finder button,
    .portal-finder .portal-find-btn,
    .portal-finder [type="submit"] {
        grid-column: auto !important;
        width: 108px !important;
        min-width: 108px !important;
        height: 68px !important;
        min-height: 68px !important;
        margin: 0 !important;
        padding: 0 7px !important;
        border: 0 !important;
        border-radius: 10px !important;
        background: #071d33 !important;
        color: #ffffff !important;
        font-size: 0.59rem !important;
        font-weight: 800 !important;
        line-height: 1.15 !important;
        white-space: normal !important;
    }

    /* Space below overlapping form */
    .portal-section.countries {
        padding-top: 88px !important;
    }
}

@media (max-width: 370px) {
    .portal-finder {
        left: 8px !important;
        right: 8px !important;
        grid-template-columns:
            repeat(4, minmax(0, 1fr))
            94px !important;
    }

    .portal-finder button,
    .portal-finder .portal-find-btn,
    .portal-finder [type="submit"] {
        width: 94px !important;
        min-width: 94px !important;
    }
}

/* ===== SEARCH AND COUNTRIES OVERLAP FIX ===== */
@media (max-width: 700px) {

    main > .portal-section.countries,
    .portal-hero + .portal-section.countries {
        position: relative !important;
        z-index: 1 !important;
        margin-top: 0 !important;
        padding-top: 118px !important;
    }

    .portal-finder {
        z-index: 30 !important;
    }

    .countries .portal-title,
    .countries .portal-section-head {
        position: relative !important;
        z-index: 2 !important;
        margin-top: 0 !important;
        margin-bottom: 20px !important;
    }
}

@media (max-width: 380px) {
    main > .portal-section.countries,
    .portal-hero + .portal-section.countries {
        padding-top: 125px !important;
    }
}

/* ===== MISPLACED TRUST ROW FIX ===== */
@media (max-width: 700px) {

    /* This row belongs inside Best Selling section */
    .portal-trust {
        position: static !important;
        inset: auto !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        bottom: auto !important;

        width: 100% !important;
        margin: 28px 0 0 !important;
        padding: 24px 16px !important;

        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 20px 14px !important;

        background: transparent !important;
        z-index: auto !important;
    }

    .portal-trust > div {
        min-width: 0 !important;
        padding: 0 !important;
        text-align: left !important;
    }

    .portal-trust strong {
        font-size: 0.68rem !important;
        line-height: 1.3 !important;
    }

    .portal-trust span,
    .portal-trust small {
        margin-top: 4px !important;
        font-size: 0.59rem !important;
        line-height: 1.4 !important;
    }

    /* Countries heading gets clean top space */
    main > .portal-section.countries,
    .portal-hero + .portal-section.countries {
        padding-top: 100px !important;
    }

    .countries .portal-title,
    .countries .portal-section-head {
        clear: both !important;
        position: relative !important;
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
}

/* ===== ONLY BEST SELLING CARDS FIX ===== */
@media (max-width: 700px) {

    .portal-dark.portal-tours {
        overflow: hidden !important;
    }

    .portal-dark.portal-tours .portal-tour-grid {
        display: flex !important;
        grid-template-columns: none !important;
        width: 100% !important;
        gap: 12px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        padding: 6px 0 18px !important;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .portal-dark.portal-tours .portal-tour-grid::-webkit-scrollbar {
        display: none !important;
    }

    .portal-dark.portal-tours .portal-tour-card {
        flex: 0 0 72% !important;
        width: 72% !important;
        min-width: 250px !important;
        max-width: 280px !important;
        height: auto !important;
        scroll-snap-align: start;
        border-radius: 11px !important;
        overflow: hidden !important;
    }

    .portal-dark.portal-tours .portal-tour-photo {
        width: 100% !important;
        height: 180px !important;
    }

    .portal-dark.portal-tours .portal-tour-body {
        width: 100% !important;
        min-height: 185px !important;
        padding: 14px !important;
    }

    .portal-dark.portal-tours .portal-tour-body h3 {
        min-height: auto !important;
        margin-bottom: 10px !important;
        font-size: 1.05rem !important;
        line-height: 1.3 !important;
        word-break: normal !important;
        overflow-wrap: normal !important;
        white-space: normal !important;
    }

    .portal-dark.portal-tours .portal-tour-meta {
        font-size: 0.72rem !important;
        line-height: 1.7 !important;
    }

    .portal-dark.portal-tours .portal-tour-price {
        margin-top: 10px !important;
        font-size: 1rem !important;
    }
}

@media (max-width: 370px) {
    .portal-dark.portal-tours .portal-tour-card {
        flex-basis: 82% !important;
        min-width: 235px !important;
    }
}