/* ==========================================================
   MAKOLIYA SAFARI · NEW TEMPLATE · MOBILE
   The phone layer, loaded last on every page: bottom app bar,
   swipe sliders, bottom-sheet pop-ups, touch sizing, safe areas.
   ========================================================== */

:root {
  --dock-h: 66px;
  --safe-b: env(safe-area-inset-bottom, 0px);
}

/* ---------- Bottom app bar (phones only) ---------- */
.dock, .swipe-meta { display: none; }

@media (max-width: 760px) {
  body { padding-bottom: calc(var(--dock-h) + var(--safe-b)); }

  /* The bar takes over from the floating WhatsApp button and the calendar icon */
  .trip-pill, .wa-float { display: none !important; }

  .dock {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-sticky);
    display: grid; grid-template-columns: repeat(5, 1fr); align-items: stretch;
    height: calc(var(--dock-h) + var(--safe-b)); padding: 0 0.25rem var(--safe-b);
    background: rgba(255, 255, 255, 0.86); -webkit-backdrop-filter: blur(18px) saturate(1.6); backdrop-filter: blur(18px) saturate(1.6);
    box-shadow: 0 -1px 0 rgba(13, 43, 30, 0.08), 0 -14px 34px -22px rgba(13, 43, 30, 0.4);
    transition: transform 0.5s var(--ease-expo);
  }
  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .dock { background: rgba(255, 255, 255, 0.97); } }
  .nav.is-open ~ .dock { transform: translateY(calc(100% + 30px)); }

  .dock__item, .dock__plan {
    position: relative; display: grid; justify-items: center; align-content: center; gap: 0.2rem;
    font-family: var(--font-ui); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.01em; color: var(--ink-soft);
    -webkit-tap-highlight-color: transparent; transition: color 0.3s;
  }
  .dock__item svg { width: 23px; height: 23px; transition: transform 0.35s var(--ease-out); }
  .dock__item::before {
    content: ""; position: absolute; top: 0; left: 50%; width: 22px; height: 3px; margin-left: -11px; border-radius: 0 0 3px 3px;
    background: var(--gold); transform: scaleX(0); transition: transform 0.45s var(--ease-expo);
  }
  .dock__item.is-current { color: var(--forest); }
  .dock__item.is-current::before { transform: scaleX(1); }
  .dock__item:active svg { transform: scale(0.88); }
  .dock__item--wa svg { color: #1c9d4f; }
  .dock__item:focus-visible, .dock__plan:focus-visible { outline: 2px solid var(--gold); outline-offset: -4px; border-radius: 12px; }

  /* Centre button: the gold "Plan" disc rises out of the bar */
  .dock__plan { color: var(--forest); align-content: end; padding-bottom: 0.55rem; }
  .dock__disc {
    position: relative; width: 56px; height: 56px; margin-top: -22px; border-radius: 50%; display: grid; place-items: center;
    background: var(--gold); color: var(--pine);
    box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.92), 0 12px 24px -10px rgba(168, 124, 12, 0.85);
    transition: transform 0.35s var(--ease-out), background-color 0.3s;
  }
  .dock__disc svg { width: 25px; height: 25px; }
  .dock__plan:active .dock__disc { transform: scale(0.92); background: var(--gold-bright); }
  .dock__badge {
    position: absolute; top: -2px; right: -4px; min-width: 21px; height: 21px; padding: 0 5px; border-radius: 999px;
    display: grid; place-items: center; font-size: 0.68rem; font-weight: 700; background: var(--pine); color: var(--snow);
    box-shadow: 0 0 0 2px var(--snow); transform: scale(0); transition: transform 0.4s var(--ease-expo);
  }
  .dock__badge.is-on { transform: scale(1); }

  /* Trip toast sits above the bar */
  .trip-toast { bottom: calc(var(--dock-h) + var(--safe-b) + 14px); }
}

/* ---------- Swipe sliders: long stacks of cards become one swipeable row ---------- */
@media (max-width: 760px) {
  [data-swipe] {
    display: flex !important; gap: 0.8rem; overflow-x: auto; overflow-y: hidden;
    scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none;
    margin-inline: calc(var(--gutter) * -1); padding: 0.25rem var(--gutter) 0.5rem; scroll-padding-inline: var(--gutter);
  }
  [data-swipe]::-webkit-scrollbar { display: none; }
  [data-swipe] > * { flex: 0 0 84%; min-width: 0; scroll-snap-align: start; }
  /* The water sliders already sit inside a clipped pane, so they stay flush */
  .wslider[data-swipe] { margin-inline: 0; padding-inline: 0; scroll-padding-inline: 0; }

  /* Photo cards keep their look, at one steady height */
  .parks__grid[data-swipe] > .wshot, .wslider[data-swipe] > .wshot { height: 430px; grid-area: auto; }
  .wslider[data-swipe] .wshot .wshot__hook { display: block; }
  .parks__grid[data-swipe] .wshot__hook, .wslider[data-swipe] .wshot__hook { font-size: 0.9rem; line-height: 1.45; }
  .treks__grid[data-swipe] > .trek { min-height: 500px; grid-row: auto; }
  [data-swipe] > .uniq, [data-swipe] > .pkg, [data-swipe] > .stay, [data-swipe] > .crew__item { flex-basis: 80%; }
  /* Cards waiting off to the side are already in place; the row reveals as one */
  .js-motion [data-swipe] > [data-reveal].is-pending { opacity: 1; transform: none; }

  /* Progress line and "2 / 6" count under each slider */
  .swipe-meta { display: flex; align-items: center; gap: 0.9rem; margin-top: 0.85rem; }
  .swipe-meta[hidden] { display: none; }
  .swipe-meta__track { position: relative; flex: 1; height: 3px; border-radius: 3px; background: var(--line); overflow: hidden; }
  .swipe-meta__thumb { position: absolute; top: 0; bottom: 0; left: 0; width: 30%; border-radius: inherit; background: var(--gold); will-change: transform; }
  .swipe-meta__count { font-family: var(--font-ui); font-size: 0.78rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--forest); }
  .on-dark .swipe-meta__track { background: var(--line-light); }
  .on-dark .swipe-meta__count { color: var(--snow); }
}

/* ---------- Pop-ups become bottom sheets on phones ---------- */
@media (max-width: 760px) {
  .plan-dialog, .enq {
    inset: auto 0 0 0; margin: auto 0 0; width: 100%; max-width: 100%;
    max-height: 92vh; max-height: 92dvh; border-radius: 24px 24px 0 0; padding-bottom: var(--safe-b);
  }
  .plan-dialog[open], .enq[open] { animation: sheetIn 0.55s var(--ease-expo); }
  .plan-dialog.is-closing, .enq.is-closing { animation: sheetOut 0.26s ease-in forwards; }
  .plan-dialog.is-dragging, .enq.is-dragging { animation: none; transition: none; }
  .plan-dialog.is-settling, .enq.is-settling { transition: transform 0.35s var(--ease-expo); }
  /* Grab handle: drag it down to close */
  .plan-dialog__head, .enq__top { padding-top: 1.35rem; touch-action: none; }
  .plan-dialog__head::before, .enq__top::before {
    content: ""; position: absolute; top: 8px; left: 50%; width: 42px; height: 5px; margin-left: -21px;
    border-radius: 5px; background: rgba(13, 43, 30, 0.2);
  }
  .plan-dialog .form__row { grid-template-columns: 1fr 1fr; }
  .plan-dialog .field input, .plan-dialog .field select, .plan-dialog .field textarea { min-height: 46px; font-size: 16px; }
  .plan-dialog .btn--block { min-height: 52px; font-size: 0.95rem; }
  .plan-dialog__close, .enq__close { width: 44px; height: 44px; }
}
@keyframes sheetIn { from { transform: translateY(100%); } to { transform: none; } }
@keyframes sheetOut { to { transform: translateY(100%); } }

/* ---------- Phone layout fixes, section by section ---------- */
@media (max-width: 760px) {
  /* Hero: the bar covers the bottom edge, so lift the content above it; no calendar icon to clear */
  .hero__content { padding-bottom: calc(var(--dock-h) + var(--safe-b) + 1.25rem); }
  .hero__tabs { margin-left: 0; gap: 0.5rem; }
  .hero__tabname { font-size: 0.76rem; line-height: 1.25; }
  .hero__ctas .btn { min-height: 50px; }

  /* Small labels: nothing under 12px */
  .peak-card__zone, .wshot__type, .trek__badge, .trek__tags li { font-size: 0.75rem; }

  /* Section heads breathe less on a small screen */
  .treks__head, .parks__head { margin-bottom: 1.5rem; }

  /* Water: the guide-book and water-day buttons fill the width instead of wrapping */
  .water__more { padding: 1.15rem; }
  .water__more-actions { display: grid; grid-template-columns: 1fr; }
  .water__more-actions .btn { width: 100%; padding-inline: 1rem; font-size: 0.88rem; text-align: center; }

  /* Climb and park pages: the section tabs fade at the edge to show they scroll */
  .subnav ul { -webkit-mask-image: linear-gradient(to right, #000 82%, transparent); mask-image: linear-gradient(to right, #000 82%, transparent); padding-right: 2rem; }

  /* Footer: the last links stay clear of the bar */
  .footer__bottom { padding-bottom: 0.5rem; }
}

/* ---------- Touch: bigger targets, press feedback instead of hover ---------- */
@media (pointer: coarse) {
  .link-arrow { min-height: 44px; }
  .footer__grid a { display: inline-block; padding-block: 0.45rem; }
  .footer__credits summary { padding-block: 0.6rem; }
  .qrot__dot { position: relative; }
  .qrot__dot::after { content: ""; position: absolute; inset: -18px -5px; }
}
@media (hover: none) {
  .btn:active { transform: scale(0.97); }
  .wshot:active img, .trek:active img { filter: brightness(1.08); }
}

/* ---------- Notched phones in landscape: keep content out of the cut-outs ---------- */
@supports (padding: max(0px)) {
  .wrap { width: min(100% - max(var(--gutter), env(safe-area-inset-left), env(safe-area-inset-right)) * 2, var(--max)); }
}

@media (prefers-reduced-motion: reduce) {
  .dock, .dock__badge, .dock__item::before { transition: none; }
  .plan-dialog[open], .enq[open], .plan-dialog.is-closing, .enq.is-closing { animation: none; }
}