/* ============================================================
   mobile.css — shared responsive layer for Kavkazland
   ------------------------------------------------------------
   Loaded on every page. ALL layout rules live inside
   @media (max-width: 768px) / (max-width: 480px), so desktop
   (> 768px) is completely unaffected. !important is used so
   these win over inline styles (e.g. tour_detail footer grid)
   regardless of stylesheet source order.
   ============================================================ */

/* Hamburger button — hidden on desktop, revealed on mobile below.
   Inert on desktop (the drawer it opens is never reachable). */
.wb-burger { display: none; }

/* Slide-in drawer + overlay — sit off-screen / hidden until opened.
   Harmless on desktop since the burger that opens them is display:none. */
.wb-drawer-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.5);
  opacity: 0; visibility: hidden; transition: opacity .25s ease; z-index: 1199;
}
.wb-drawer-overlay.open { opacity: 1; visibility: visible; }
.wb-drawer {
  position: fixed; top: 0; left: 0; bottom: 0;
  width: 82%; max-width: 320px;
  background: #141d2b; color: #fff; z-index: 1200;
  transform: translateX(-100%); transition: transform .28s ease;
  display: flex; flex-direction: column; padding: 16px 0 28px;
  box-shadow: 2px 0 26px rgba(0,0,0,.4); overflow-y: auto;
  font-family: "Space Grotesk", "Inter", system-ui, sans-serif;
}
.wb-drawer.open { transform: translateX(0); }
.wb-drawer-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 4px 22px 14px;
}
/* A link now, so it needs the anchor styling the drawer's own rules would
   otherwise give it. */
.wb-drawer-brand { font-size: 20px; font-weight: 600; color: #fff; letter-spacing: .01em;
                   text-decoration: none; }
.wb-drawer-brand:hover { color: #fff; }
.wb-drawer-close {
  background: none; border: none; color: rgba(255,255,255,.7);
  font-size: 26px; line-height: 1; cursor: pointer; padding: 0 4px;
}
.wb-drawer a, .wb-drawer .wb-drawer-item {
  display: block; width: 100%; text-align: left;
  padding: 13px 24px; font-size: 15px; cursor: pointer;
  color: rgba(255,255,255,.85); text-decoration: none;
  background: none; border: none; font-family: inherit;
}
.wb-drawer a:hover, .wb-drawer a:active,
.wb-drawer .wb-drawer-item:hover { background: rgba(255,255,255,.08); color: #fff; }
.wb-drawer-sep { height: 1px; background: rgba(255,255,255,.12); margin: 10px 18px; }

/* ============================================================
   TABLET / PHONE  (≤ 768px)
   ============================================================ */
@media (max-width: 768px) {
  /* Hard guard: nothing may cause sideways page scroll.
     overflow-x:clip (not hidden) keeps position:sticky working. */
  html, body { overflow-x: clip !important; max-width: 100%; }
  img, svg, video, iframe { max-width: 100%; height: auto; }

  /* ---- Nav: show burger, hide the desktop link row + search ---- */
  .wb-burger {
    display: flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; margin-right: 10px; flex-shrink: 0;
    background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2);
    border-radius: 9px; cursor: pointer; padding: 0;
  }
  .wb-burger span {
    display: block; width: 18px; height: 2px; margin: 2.5px 0;
    background: #fff; border-radius: 2px;
  }
  .nav-links { display: none !important; }
  .nav-search { display: none !important; }

  /* ---- Homepage / dashboards ---- */
  .hero-tiles { grid-template-columns: 1fr 1fr !important; }
  .stats, .stats-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .card-grid { grid-template-columns: 1fr 1fr !important; }
  .featured-grid, .topics-grid { grid-template-columns: 1fr 1fr !important; }
  .trust { grid-template-columns: 1fr !important; }

  /* ---- Footer (every page family) ---- */
  .foot-grid,
  .footer-top,
  .footer-middle,
  .sitemap-bar { grid-template-columns: 1fr 1fr !important; }

  /* ---- Tour detail page ---- */
  .page-body { grid-template-columns: 1fr !important; }
  .sidebar-col {
    position: static !important; max-height: none !important;
    top: auto !important; overflow: visible !important; width: 100% !important;
  }
  .overview-strip { grid-template-columns: repeat(2, 1fr) !important; }
  .tour-cards-row { grid-template-columns: 1fr 1fr !important; }
  .conditions-grid, .arrival-grid { grid-template-columns: 1fr !important; }
  .mosaic-left, .mosaic-right { flex: 1 1 100% !important; }

  /* ---- Trim oversized horizontal padding so content keeps full width ---- */
  .hero,
  .site-footer,
  .pills,
  .card-scroll,
  .feat-row { padding-left: 16px !important; padding-right: 16px !important; }
}

/* ============================================================
   SMALL PHONE  (≤ 480px) — collapse the remaining 2-col grids
   ============================================================ */
@media (max-width: 480px) {
  .hero-tiles,
  .card-grid,
  .featured-grid, .topics-grid,
  .overview-strip,
  .tour-cards-row { grid-template-columns: 1fr !important; }

  /* Footers + stats stay 2-up (a tall single column looks bad, and the
     tour-detail footer-top has 5 sections — 1-col made it very long). */
  .stats, .stats-grid, .foot-grid,
  .footer-top, .footer-middle, .sitemap-bar { grid-template-columns: 1fr 1fr !important; }
}

/* ============================================================
   PAGE-SPECIFIC FIXES (≤ 768px) — found via screenshot QA
   ============================================================ */
@media (max-width: 768px) {
  /* Header: everything on the right (Sign in / List a tour / RU / avatar)
     now lives in the slide-in drawer, so drop it from the bar. Leaves a
     clean [☰] waybound header that never overflows. */
  .nav-r, .nav-r-wrap { display: none !important; }
  /* With only [burger] + [logo] left, stop space-between from flinging the
     logo to the far right — keep them together on the left. */
  .nav, .site-nav { justify-content: flex-start !important; }

  /* Adventures hero search — stack the fields vertically instead of one
     cramped row. */
  .search-bar { flex-direction: column !important; max-width: 100% !important; }
  .search-bar .sb-field {
    width: 100% !important; flex: none !important;
    border-right: none !important;
    border-bottom: 1px solid var(--ln, rgba(0,0,0,.1)) !important;
  }
  .search-bar .sb-btn { width: 100% !important; }
  .search-hero > div { padding: 0 16px !important; }

  /* Category / filter pills — wrap onto multiple rows rather than a
     horizontal-scroll strip. */
  .pills { flex-wrap: wrap !important; overflow-x: visible !important; }

  /* Adventures category strip below the search (.sh-cats: All trips /
     Trekking / Wildlife …) — was a horizontal-scroll row; wrap it. */
  .sh-cats { flex-wrap: wrap !important; overflow-x: visible !important; }

  /* Tour-detail footer was bigger + misaligned vs other pages: footer-top
     is a 5-col grid with a tall brand/Trustpilot cell. Put the brand on
     its own full-width row, tighten padding/gap so it matches the rest. */
  .site-footer { padding: 30px 18px 22px !important; }
  .footer-top { gap: 22px 16px !important; margin-bottom: 24px !important; }
  /* Brand stays a normal grid cell (not full-width) so the footer is a
     balanced 2x2 — [brand][Explore] / [Company][Legal] — exactly like the
     other pages, instead of a wide brand row on top. */
  .footer-brand p { max-width: none !important; }
  /* Match the other pages' footer type scale (this footer ran bigger:
     24px logo / 13.5px links vs 18px / 12px elsewhere). */
  .footer-brand .logo { font-size: 18px !important; }
  .footer-col a, .footer-brand p { font-size: 12px !important; }
  .footer-col h5 { font-size: 11px !important; }
  /* The Trustpilot trust badge exists only in this footer (no other page
     has it), which made the brand block taller/inconsistent. Hide it on
     mobile so the footer matches the rest of the site. */
  .site-footer .trustpilot { display: none !important; }

  /* Homepage tour/style carousels — convert the horizontal-scroll flex
     strips into grids so nothing scrolls sideways or gets clipped.
     .feat-row = image-heavy tour cards → full-width stack (matches the
     adventures cards). .card-scroll = smaller style cards → 2-up. */
  .feat-row {
    display: grid !important; grid-template-columns: 1fr !important;
    overflow-x: visible !important; gap: 14px !important;
    padding: 0 16px 22px !important;
  }
  .card-scroll {
    display: grid !important; grid-template-columns: 1fr 1fr !important;
    overflow-x: visible !important; gap: 12px !important;
    padding: 14px 16px 24px !important;
  }
  .feat-row > *, .card-scroll > * {
    width: auto !important; flex: none !important; min-width: 0 !important;
  }

  /* Stat bands below the header that were cut off on phones.
     about.html → .stats-band (4-col grid); operator.html / "list a tour"
     → .oh-stats (no-wrap flex row that overflowed). */
  .stats-band { grid-template-columns: repeat(2, 1fr) !important; }
  .oh-stats { flex-wrap: wrap !important; gap: 16px !important; }
  .oh-stats .oh-stat { flex: 1 1 40% !important; }

  /* Legal pages (terms, terms-experts, privacy): the 220px sticky TOC
     sidebar doesn't fit — stack it above the content as a static block. */
  .legal-layout {
    grid-template-columns: 1fr !important; gap: 20px !important;
    padding-left: 16px !important; padding-right: 16px !important;
  }
  .toc { position: static !important; top: auto !important; }

  /* Contact: stack the two columns. */
  .contact-grid { grid-template-columns: 1fr !important; }

  /* Operator / "list a tour" hero — 2-col grid with a fixed 420px signup
     card that overflowed. Stack it. */
  .op-hero-inner { grid-template-columns: 1fr !important; gap: 28px !important; }
  .op-hero { padding-left: 16px !important; padding-right: 16px !important; }

  /* Operator page lower sections that overflowed (grid tracks couldn't
     shrink below their content): why-cards (3-col), promise numbers
     (4-col), and the sample tour preview (280px image + content split). */
  .why-grid { grid-template-columns: 1fr !important; }
  .promise-grid { grid-template-columns: 1fr 1fr !important; }
  .sample-inner { grid-template-columns: 1fr !important; }
  .sample-img { min-height: 180px !important; }

  /* Tour-detail "Day-by-day programme" header: title + PDF/Expand buttons
     was a no-wrap space-between row that clipped the buttons. Wrap it. */
  .itin-header { flex-wrap: wrap !important; gap: 10px !important; padding: 16px 18px !important; }

  /* Photo gallery modal — the prev/next arrows live at left/right:-56px
     (just outside the image on desktop) which is off-screen on a
     full-width phone. Pull them inside, and bring the close button +
     counter into view. (Swipe is wired up in nav.js.) */
  .photo-modal-inner { max-width: 100vw !important; }
  .photo-modal-content { width: 94vw !important; height: auto !important; max-height: 78vh !important; }
  .photo-modal-nav {
    width: 40px !important; height: 40px !important;
    background: rgba(0,0,0,.5) !important; z-index: 2;
  }
  .photo-modal-prev { left: 8px !important; }
  .photo-modal-next { right: 8px !important; }
  /* On desktop these sit outside the photo, on the near-black backdrop, so
     white-on-nothing is fine. Mobile moves them onto the image itself, where a
     bright photo swallows them. Give them the dark chip the nav arrows and the
     Grid button already use: legibility then comes from the control, not from
     whatever the photo happens to look like — which no choice of white or dark
     text can guarantee on its own. */
  .photo-modal-close {
    top: 10px !important; right: 10px !important;
    width: 36px !important; height: 36px !important; padding: 0 !important;
    border-radius: 50% !important; background: rgba(0,0,0,.55) !important;
    font-size: 18px !important; line-height: 1 !important;
    display: flex !important; align-items: center !important;
    justify-content: center !important; z-index: 3;
  }
  .photo-modal-counter {
    bottom: 10px !important;
    background: rgba(0,0,0,.55) !important; color: #fff !important;
    padding: 4px 12px !important; border-radius: 100px !important; z-index: 3;
  }

  /* Tour-detail photo gallery — stack the mosaic: big image on top,
     thumbnails in a single row underneath. */
  .photo-mosaic {
    flex-direction: column !important; height: auto !important;
    padding: 0 16px !important; gap: 6px !important;
  }
  .mosaic-left { flex: none !important; height: 240px !important; }
  .mosaic-left img { height: 240px !important; }
  .mosaic-right {
    grid-template-columns: repeat(4, 1fr) !important;
    grid-template-rows: 64px !important; height: 64px !important;
  }
}

/* ============================================================
   OPERATOR "CREATE TOUR" (≤ 800px)
   Deliberately 800px, not 768px: that is the breakpoint the page's own
   stylesheet uses, and between the two the sidebar would otherwise stay
   hidden with nothing putting it back.
   ============================================================ */
@media (max-width: 800px) {
  /* The page hid .form-sidebar wholesale on mobile — but that sidebar holds
     the ONLY "Submit for review" button, the "Save draft" button, and the
     verification / profile banners that explain why submitting might fail.
     A tour could be written on a phone and then never submitted, with no
     visible reason. Restore the card as a normal block after the form; only
     the section-jump nav stays hidden, since scrolling already covers it. */
  .form-sidebar {
    display: block !important;
    position: static !important;
    top: auto !important;
    order: 2;
  }
  .form-content { order: 1; }
  .form-nav { display: none !important; }
}

/* ============================================================
   SETTINGS (≤ 680px)
   Deliberately 680px, not 768px: that is where settings.html's own
   stylesheet collapses the two-column grid. Above it the sidebar is still
   a real column, where sticky is what you want.
   ============================================================ */
@media (max-width: 680px) {
  /* Stacking the nav above the panel wasted the width and pushed the content
     you came for below the fold. Keep the two columns instead, collapsing the
     sidebar to an icon rail — every row already carries an icon, so the labels
     are the only thing that has to go.

     The rail is ~52px, leaving roughly 330px of content on a 390px phone, and
     it stays sticky: it is short enough not to steal vertical space, and a
     fixed rail means switching section never involves scrolling back up. */
  .settings-wrap {
    grid-template-columns: 72px 1fr !important;
    gap: 11px !important;
  }
  .settings-nav {
    position: sticky !important;
    top: 68px !important;
    border-radius: 10px !important;
  }
  /* Group headings ("Account", "Preferences") cannot fit in the rail. The
     section borders still separate the groups. */
  .settings-nav-label { display: none !important; }

  /* Icon over a small label rather than icon alone. Ten unlabelled emoji is
     too many to tell apart — verification, credentials and payout are all the
     same document-ish idea. An expand toggle would be worse: a control to
     discover, and if you open it every time to find anything then collapsing
     bought nothing. 9px costs ~20px of rail width and removes the guessing.
     The label is a bare text node after .sn-ico, so column direction puts it
     on its own line with no markup change. */
  .settings-nav-item {
    flex-direction: column !important;
    align-items: center !important;
    gap: 3px !important;
    font-size: 9px !important;
    line-height: 1.2 !important;
    text-align: center !important;
    padding: 9px 3px !important;
    word-break: break-word;
  }
  .sn-ico { font-size: 17px !important; width: auto !important; }

  /* .settings-wrap uses align-items:start, so each column sizes to its own
     content and the two boxes end at different heights. A short section
     (Language, Appearance) leaves the rail jutting out below it.

     Stretching the columns would even them up but kill the sticky rail —
     a stretched grid item fills the row and has nothing to stick within, and
     the sticky rail is the point. Giving the panel a floor instead matches the
     two on short sections; long ones simply grow past it, which is the case
     where you want the rail pinned anyway. */
  .settings-panels {
    min-height: 430px;
  }

  .settings-nav-section + .settings-nav-section {
    border-top: 1px solid var(--ln, rgba(0,0,0,.1)) !important;
  }
}

/* ============================================================
   TOUR DETAIL — photo mosaic + lightbox (≤ 768px)
   ============================================================ */
@media (max-width: 768px) {
  /* The "+N more" badge is 18px, sized for the desktop mosaic. On mobile the
     right-hand slots collapse to 64px-tall quarter-width thumbnails, so the
     text no longer fits its box and reads as off-centre. It is already
     flex-centred; it just needs to be small enough to sit inside. */
  .mosaic-more {
    font-size: 12px !important;
    line-height: 1.1 !important;
    text-align: center !important;
    padding: 2px !important;
  }

  /* The page behind is now pinned in JS (_lockPageScroll), because iOS Safari
     ignores body{overflow:hidden}. This block used to add touch-action:none
     here instead, which stopped the page but also stopped the photo grid from
     scrolling — touch-action on an ancestor constrains every touch that starts
     inside it, so the grid's own pan-y could not win it back. */
  .photo-modal-bg.open {
    position: fixed !important;
    inset: 0 !important;
    overscroll-behavior: contain !important;
  }

  /* The grid container is height:auto on mobile, so pin the scroller to the
     viewport or it grows past the modal and gets clipped. */
  .photo-modal-content.is-grid { height: 72vh !important; }
}

/* ── About: the team grid ────────────────────────────────────────────────────
   Ten cards in a hard-coded four-column grid, each photo a fixed 180px, and
   not one media query on the page. The photos are what pin it: a 1fr track
   cannot shrink below its content, so the grid stays 774px wide inside a
   390px phone. Worse, the overflow is clipped rather than scrollable — so
   seven of the ten people were not merely awkward to read, they were
   unreachable.

   The photo has to become fluid before the columns can give way; changing the
   column count alone would leave the tracks pinned exactly where they are. */
@media (max-width: 860px) {
  .team-grid { grid-template-columns: repeat(3, 1fr) !important; }
  .team-card { min-width: 0 !important; }
  .team-photo {
    width: 100% !important;
    max-width: 150px !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
  }
}
@media (max-width: 680px) {
  .team-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 24px 14px !important; }
}
@media (max-width: 430px) {
  .team-grid  { gap: 20px 10px !important; }
  .team-photo { max-width: 118px !important; }
}

/* ── Nav: swap to the burger at 900px, not 768px ─────────────────────────────
   The drawer took over at 768px, but the desktop bar stopped fitting well
   before that — around 780px in English and around 900px in Russian, where
   "Вход / Регистрация" and "Добавить тур" are simply longer words. In the band
   between, the right-hand group pushed the page sideways: 176px of it at 780px
   in Russian, on every page of the site, because this bar is shared.

   Only the nav swap moves up. The 768px block keeps the rest of its layout
   work, and deliberately keeps its overflow-x:clip guard down there too —
   raising that as well would hide any future tablet-band overflow instead of
   letting the screenshot QA catch it. */
@media (max-width: 900px) {
  .wb-burger {
    display: flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; margin-right: 10px; flex-shrink: 0;
    background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2);
    border-radius: 9px; cursor: pointer; padding: 0;
  }
  .wb-burger span {
    display: block; width: 18px; height: 2px; margin: 2.5px 0;
    background: #fff; border-radius: 2px;
  }
  .nav-links  { display: none !important; }
  .nav-search { display: none !important; }
  .nav-r, .nav-r-wrap { display: none !important; }
  .nav, .site-nav { justify-content: flex-start !important; }
}

/* ── Booking: stack at the same 900px the nav does ───────────────────────────
   The page dropped to one column at 840px, which was enough for English and
   20px short for Russian: a 1fr track will not shrink below its own
   min-content, and the Russian labels are wider, so the two-column layout
   pushed the page sideways in the 841–880px band.

   Matching the nav breakpoint gives one tablet story instead of three, and
   min-width:0 stops a longer string in either language doing this again. */
@media (max-width: 900px) {
  .bk-page {
    grid-template-columns: 1fr !important;
    padding: 24px 16px 48px !important;
  }
  .bk-page > * { min-width: 0 !important; }
}

/* ── About: the founder story and the beliefs grid ───────────────────────────
   Both are two-column grids with no media query, so at 390px the story was
   setting its text in a 143px column and the belief cards in 161px ones. That
   is what made them feel endless: a paragraph three words wide is mostly
   line breaks, and the section grows to fit them. Widening the measure makes
   the same words markedly shorter as well as readable. */
@media (max-width: 700px) {
  .story {
    grid-template-columns: 1fr !important;
    gap: 22px !important;
    padding: 40px 20px !important;
  }
  /* A tall portrait crop wastes the fold on a phone; a banner still sets the
     place without pushing the story itself below the screen. */
  .story-img { height: 200px !important; }
  .story-title { font-size: 25px !important; }
}

@media (max-width: 560px) {
  .beliefs { padding: 40px 18px !important; }
  .beliefs-grid { grid-template-columns: 1fr !important; gap: 12px !important; }

  /* Icon above heading costs 54px of height per card and buys nothing once
     the card is full width. On one line it reads as a label instead. */
  .belief-card {
    display: grid !important;
    grid-template-columns: 34px 1fr !important;
    column-gap: 12px !important;
    align-items: center !important;
    padding: 15px 16px !important;
  }
  .belief-icon {
    width: 34px !important; height: 34px !important;
    font-size: 16px !important; margin-bottom: 0 !important;
  }
  .belief-h { margin-bottom: 0 !important; }
  .belief-p { grid-column: 1 / -1 !important; margin-top: 9px !important; }
}

/* ── Multi-column grids that never collapsed ─────────────────────────────────
   Found by measuring text width rather than by eye: on a 390px phone these
   were setting body copy into columns between 65px and 145px wide. At that
   measure a sentence is mostly line breaks, so each one read as a tall,
   unreadable ribbon — the same fault as the About page, in five more places.
   Widths quoted below are the text measure before the fix. */

/* contact — 3 cards across, 65px of text each. The worst on the site. */
@media (max-width: 720px) {
  .trust-strip { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 520px) {
  .trust-strip { grid-template-columns: 1fr !important; }
  .trust-item  { text-align: left !important; }
}

/* list a tour — the stat cards, already halved to two by an earlier rule but
   still only 119px of text; and the checklist, two columns of 129px. */
@media (max-width: 560px) {
  .promise-grid { grid-template-columns: 1fr !important; }
}
@media (max-width: 820px) {
  .checklist { grid-template-columns: 1fr !important; gap: 28px !important; padding: 40px 20px !important; }
}

/* small groups — 116px of text per card. */
@media (max-width: 560px) {
  .benefits-grid { grid-template-columns: 1fr !important; }
}

/* how it works — an 80px rail for a 56px circle, leaving the step text 188px
   and running it to fifteen lines. Shrink the rail rather than stacking, so
   the numbers still read as a sequence down the page. */
@media (max-width: 600px) {
  .step-row  { grid-template-columns: 46px 1fr !important; gap: 12px !important; }
  .step-num  { width: 42px !important; height: 42px !important; font-size: 17px !important; border-width: 2px !important; }
  .step-content { padding: 16px !important; }
}

/* privacy — a real table cannot reflow, so let it scroll inside itself
   instead of crushing its columns to 119px. */
@media (max-width: 700px) {
  .data-table { display: block !important; overflow-x: auto !important; white-space: nowrap !important; }
  .data-table td, .data-table th { white-space: normal !important; min-width: 150px !important; }
}

/* reset password — the decorative quote panel sat beside the form on a phone,
   taking half the width off it. Its twin on sign-in and sign-up is hidden by
   a rule naming .auth-visual; this page calls the same thing .auth-side, so
   that rule never matched it and nobody noticed. */
@media (max-width: 820px) {
  .auth-side { display: none !important; }
}