/* Product + booking page - same language as the landing (lakeview composition,
   direction B tokens). Everything here runs on real Bókun data. */

.tour-page { padding-top: 68px; }
.tour { max-width: 1360px; margin-inline: auto; padding: clamp(2rem, 4vw, 3.5rem) var(--gutter) 6rem; }
.tour__loading { padding-block: 6rem; text-align: center; }

/* ---- head ---- */
.tour__crumb { display: flex; gap: 0.5rem; align-items: center; color: var(--muted); font-size: 0.875rem; }
.tour__crumb a { text-decoration: none; }
.tour__crumb a:hover { color: var(--accent); }
.tour__title { font-family: var(--sans); font-weight: 400; font-size: clamp(2rem, 4.2vw, 3.5rem); line-height: 1.1; letter-spacing: -0.01em; color: var(--ink); margin-top: 0.9rem; max-width: 20ch; }
.tour__meta { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; margin-top: 1rem; color: var(--muted); }
.tour__meta .mono { color: var(--muted); }

/* ---- gallery ---- */
.tour__gallery { display: grid; grid-template-columns: 2fr 1fr; gap: 0.9rem; margin-top: 2rem; }
.tour__gallery figure { border-radius: var(--r-card); overflow: hidden; }
.tour__gallery img { width: 100%; height: 100%; object-fit: cover; }
.tour__gallery .g-main { height: clamp(320px, 46vw, 560px); }
.tour__gallery .g-side { display: grid; gap: 0.9rem; }
.tour__gallery .g-side figure { height: calc((clamp(320px, 46vw, 560px) - 0.9rem) / 2); }
@media (max-width: 767px) { .tour__gallery { grid-template-columns: 1fr; } .tour__gallery .g-side { display: none; } }

/* ---- body split ---- */
.tour__body { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2rem, 4vw, 4rem); margin-top: 3rem; align-items: start; }
@media (max-width: 900px) { .tour__body { grid-template-columns: 1fr; } }

.tour__section + .tour__section { margin-top: 2.5rem; padding-top: 2.5rem; border-top: 1px solid var(--hairline); }
.tour__section h2 { font-family: var(--sans); font-weight: 500; font-size: 1.375rem; color: var(--ink); }
.tour__section p { margin-top: 0.75rem; max-width: 62ch; }
.tour__facts { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 2rem; margin-top: 1.25rem; }
.tour__facts li { display: flex; justify-content: space-between; gap: 1rem; padding-bottom: 0.7rem; border-bottom: 1px solid var(--hairline); }
.tour__facts dt, .tour__facts .k { color: var(--muted); font-size: 0.9375rem; }
.tour__facts .v { font-family: var(--mono); font-size: 0.8125rem; color: var(--ink); text-align: right; }
@media (max-width: 599px) { .tour__facts { grid-template-columns: 1fr; } }

/* ---- booking panel ---- */
.book {
  position: sticky; top: 92px;
  background: var(--surface); border-radius: var(--r-card);
  padding: clamp(1.25rem, 2vw, 1.75rem);
  box-shadow: 0 18px 46px rgba(18, 21, 26, 0.07);
}
.book__from { display: flex; align-items: baseline; gap: 0.5rem; }
.book__from .lbl { color: var(--muted); font-size: 0.9375rem; }
.book__from .amt { font-family: var(--mono); font-size: 1.5rem; color: var(--ink); }
.book__step { margin-top: 1.5rem; }
.book__step h3 { font-size: 0.75rem; font-family: var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }

/* date strip */
.dates { display: flex; gap: 0.5rem; overflow-x: auto; padding-bottom: 0.4rem; margin-top: 0.75rem; scrollbar-width: none; }
.dates::-webkit-scrollbar { display: none; }
/* iOS Safari keeps a <button>'s NATIVE rendering until you opt out of it, and
   native rendering paints the label in the system blue no matter what `color`
   you set. Nothing in this stylesheet had ever reset appearance, so on an
   iPhone 17 the date numbers and the departure times came out link-blue while
   the day names and seat counts beside them - which are plain spans - were
   correct. Desktop never showed it. Setting the colour alone did not fix it;
   the appearance reset is what does. */
.date, .time, .stepper button { -webkit-appearance: none; appearance: none; }

/* A <button> with no `color` does not inherit one - it takes the UA default,
   and on iOS Safari that default is the system blue. Measured on an iPhone 17:
   every part of this panel that set a colour rendered correctly and every part
   that did not came out link-blue, so the date numbers and the departure times
   were blue while the day names and the seat counts beside them were grey.
   Desktop never showed it, because desktop's button default is near-black. */
.date {
  flex: none; min-width: 74px; padding: 0.6rem 0.7rem; border-radius: 10px;
  color: var(--ink);
  border: 1px solid var(--hairline); background: var(--surface); cursor: pointer;
  text-align: center; transition: border-color 0.3s var(--ease), background-color 0.3s var(--ease), transform 0.3s var(--ease);
}
.date:hover { border-color: var(--ink); transform: translateY(-2px); }
.date.is-on { background: var(--ink); border-color: var(--ink); color: #fff; }
.date .dow { display: block; font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }
.date.is-on .dow { color: rgba(255,255,255,0.7); }
.date .dnum { display: block; font-family: var(--mono); font-size: 1.05rem; margin-top: 0.15rem; }

/* departure times */
.times { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.75rem; }
.time {
  padding: 0.55rem 0.9rem; border-radius: 999px; border: 1px solid var(--hairline);
  color: var(--ink);
  background: var(--surface); cursor: pointer; font-size: 0.9375rem;
  display: flex; align-items: baseline; gap: 0.5rem;
  transition: border-color 0.3s var(--ease), background-color 0.3s var(--ease);
}
.time:hover:not(:disabled) { border-color: var(--ink); }
.time.is-on { background: var(--ink); border-color: var(--ink); color: #fff; }
.time .seats { font-family: var(--mono); font-size: 0.6875rem; color: var(--muted); }
.time.is-on .seats { color: rgba(255,255,255,0.75); }
.time:disabled { opacity: 0.4; cursor: not-allowed; text-decoration: line-through; }
.time.is-low .seats { color: #9A3412; }

/* passengers */
.pax { display: flex; flex-direction: column; gap: 0.9rem; margin-top: 0.75rem; }
.pax__row { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.pax__row .t { font-size: 0.9375rem; color: var(--ink); }
.pax__row .sub { display: block; font-size: 0.8125rem; color: var(--muted); }
.stepper { display: flex; align-items: center; gap: 0.75rem; }
.stepper button {
  width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--hairline);
  background: var(--surface); cursor: pointer; font-size: 1.05rem; line-height: 1; color: var(--ink);
  transition: border-color 0.3s var(--ease), background-color 0.3s var(--ease);
}
.stepper button:hover:not(:disabled) { border-color: var(--ink); }
.stepper button:disabled { opacity: 0.35; cursor: not-allowed; }
.stepper .n { font-family: var(--mono); min-width: 1.5ch; text-align: center; }

/* total + cta */
.book__total { display: flex; justify-content: space-between; align-items: baseline; margin-top: 1.75rem; padding-top: 1.25rem; border-top: 1px solid var(--hairline); }
.book__total .lbl { color: var(--muted); }
.book__total .amt { font-family: var(--mono); font-size: 1.5rem; color: var(--ink); }
.book__cta { width: 100%; justify-content: center; margin-top: 1rem; }
.book__cta:disabled { opacity: 0.4; cursor: not-allowed; }
.book__note { margin-top: 0.9rem; font-size: 0.8125rem; color: var(--muted); text-align: center; line-height: 1.5; }
.book__err { margin-top: 0.75rem; font-size: 0.875rem; color: #9A3412; }
.book__hand { margin-top: 1rem; padding: 0.9rem 1rem; border-radius: 10px; background: var(--tint); font-size: 0.8125rem; color: var(--body); line-height: 1.5; }
.book__hand b { color: var(--ink); font-weight: 600; }

/* skeletons */
.sk { background: linear-gradient(90deg, var(--tint) 25%, #E4E7EC 37%, var(--tint) 63%); background-size: 400% 100%; animation: sk 1.4s ease infinite; border-radius: 8px; }
@keyframes sk { 0% { background-position: 100% 50% } 100% { background-position: 0 50% } }
@media (prefers-reduced-motion: reduce) { .sk { animation: none } }
.sk--dates { height: 68px; margin-top: 0.75rem; }
.sk--times { height: 40px; margin-top: 0.75rem; }
.book__hand--note { margin-top: 0.6rem; background: transparent; border: 1px solid var(--hairline); }

/* ---- tour-page header: must exist at EVERY width (the landing page's nav is
   hidden on mobile because the burger takes over, but the tour page has no
   burger, so hiding it left mobile with no navigation and no way back) ---- */
@media (max-width: 767px) {
  .nav--tour { display: block; }
  .nav--tour .nav__links, .nav--tour .nav__wordmark, .nav--tour .nav__cta { display: none; }
  .nav--tour .nav__back { display: inline-flex; }
  .nav--tour .nav__inner { justify-content: flex-start; height: 60px; }
}
.nav__back { display: none; align-items: center; gap: 0.55rem; text-decoration: none; font-size: 0.9375rem; font-weight: 500; color: var(--ink); }
.nav__back-arrow { display: inline-block; transition: transform 0.35s var(--ease); }
.nav__back:hover .nav__back-arrow { transform: translateX(-3px); }

/* ---- mobile overflow: grid and flex children default to min-width:auto, so a
   wide child (the 60-button date strip) refuses to shrink and pushes the page
   sideways. These let the columns actually be narrower than their content. ---- */
.tour__body { min-width: 0; }
.tour__body > * { min-width: 0; }
.book { min-width: 0; max-width: 100%; }
.dates { min-width: 0; max-width: 100%; }
.tour__meta, .tour__facts { min-width: 0; }
@media (max-width: 767px) {
  .tour-page { padding-top: 60px; }
  .book { position: static; }
}

/* ---- touch targets: 44px minimum on coarse pointers (Apple HIG / WCAG) ---- */
@media (pointer: coarse) {
  .nav__back { min-height: 44px; }
  .time { min-height: 44px; }
  .date { min-height: 60px; }
  .stepper button { width: 44px; height: 44px; }
  .tour__crumb a { display: inline-block; padding-block: 0.6rem; }
}
@media (pointer: coarse) { .tour__crumb a, .tour__crumb { min-height: 44px; display: inline-flex; align-items: center; } }

/* `hidden` is an attribute, and an element with its own `display` rule wins
   against the user-agent sheet that implements it. `.ask{display:grid}` and
   `.book__cta{display:inline-flex}` both did, so the form showed before it was
   asked for and the button stayed put underneath it. Settle it once, here,
   rather than juggling a parallel is-open class. */
[hidden] { display: none !important; }

/* ---- the request form ----
   Flat, hairline-ruled, the same grammar as the steps above it. Deliberately
   not a rounded card sitting inside the booking card: a panel inside a panel
   inside a panel is the tell that gives a generated interface away. */
.ask { display: grid; gap: 0.9rem; margin-top: 0.25rem; }
.ask__lead {
  font-size: 0.9375rem; line-height: 1.5; color: var(--body);
  border-left: 2px solid var(--ink); padding-left: 0.75rem;
}
.ask__f { display: grid; gap: 0.35rem; }
.ask__f > span {
  font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--muted);
}
.ask__f > span i { font-style: normal; text-transform: none; letter-spacing: 0.02em; opacity: 0.75; }
.ask__f input, .ask__f textarea {
  font-family: var(--sans); font-size: 1rem; line-height: 1.4; color: var(--ink);
  background: var(--surface); border: 1px solid var(--hairline); border-radius: 2px;
  padding: 0.7rem 0.75rem; width: 100%; min-height: 44px;
  transition: border-color 160ms cubic-bezier(0.22, 1, 0.36, 1);
}
.ask__f textarea { resize: vertical; min-height: 88px; }
.ask__f input:focus-visible, .ask__f textarea:focus-visible {
  outline: none; border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink);
}
.ask__send { width: 100%; justify-content: center; }
.ask__back {
  background: none; border: 0; padding: 0.35rem 0; cursor: pointer; min-height: 44px;
  font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--muted); text-decoration: underline;
  text-underline-offset: 4px; text-decoration-color: var(--hairline);
}
.ask__back:hover { color: var(--ink); text-decoration-color: currentColor; }
.ask__done {
  font-size: 0.9375rem; line-height: 1.55; color: var(--body);
  border-left: 2px solid var(--accent); padding-left: 0.75rem;
}
.ask__done b { color: var(--ink); }

@media (prefers-reduced-motion: reduce) {
  .ask__f input, .ask__f textarea { transition: none; }
}

/* ---- prerendered operator copy ----
   Bókun descriptions arrive as the operator wrote them: paragraphs, lists, the
   odd sub-heading. They are typeset, not redesigned. */
.tour__prose p { margin: 0 0 0.9rem; color: var(--body); line-height: 1.65; max-width: 66ch; }
.tour__prose ul, .tour__prose ol { margin: 0.4rem 0 1rem 1.2rem; padding: 0; color: var(--body); line-height: 1.6; max-width: 66ch; }
.tour__prose li { margin: 0.25rem 0; }
.tour__prose h3 { font-family: var(--sans); font-weight: 500; font-size: 1.0625rem; color: var(--ink); margin: 1.2rem 0 0.5rem; }
.tour__prose strong { color: var(--ink); font-weight: 500; }
.tour__crumb a { color: inherit; text-decoration: none; }
.tour__crumb a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
.tour__related .all__list { margin-top: 0.75rem; }
.book__note a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--hairline); text-underline-offset: 4px; }
.book__note a:hover { text-decoration-color: currentColor; }

/* the tour page footer: the landing footer's grammar without the giant
   pointer-lit wordmark, which needs main.js and a full-height band */
.footer--tour { margin-top: clamp(3rem, 8vw, 6rem); padding-top: clamp(2.5rem, 6vw, 4rem); }
.footer--tour .footer__nav a, .footer--tour .footer__tag, .footer--tour .footer__meta p { opacity: 1; transform: none; }
/* the operator's minimum party size, shown only where there is one */
.book__min { margin: 0.35rem 0 0; font-size: 0.8125rem; color: var(--muted); line-height: 1.45; }

/* ---- legal pages: one measured column, nothing decorative ---- */
.legal { max-width: 68ch; margin-top: clamp(2rem, 5vw, 3rem); }
.legal h2 { font-family: var(--sans); font-weight: 500; font-size: 1.1875rem; color: var(--ink); margin: 2.2rem 0 0.6rem; }
.legal h2:first-child { margin-top: 0; }
.legal p { margin: 0 0 0.9rem; color: var(--body); line-height: 1.65; }
.legal ul { margin: 0.4rem 0 1.1rem 1.2rem; padding: 0; color: var(--body); line-height: 1.65; }
.legal li { margin: 0.3rem 0; }
.legal strong { color: var(--ink); font-weight: 500; }
.legal code { font-family: var(--mono); font-size: 0.875em; background: var(--tint); padding: 0.1em 0.35em; border-radius: 2px; }

/* ---- region pages: the site's own card grid, with the region's own words ---- */
.region { margin-top: clamp(2rem, 4vw, 3rem); }
.region__lede { font-size: clamp(1.0625rem, 1.5vw, 1.25rem); line-height: 1.6; color: var(--body); max-width: 68ch; }
.region__deps { margin-top: 0.9rem; font-size: 0.75rem; color: var(--muted); letter-spacing: 0.04em; }
.region__group { margin-top: clamp(2.5rem, 5vw, 4rem); }
.region__h {
  font-family: var(--sans); font-weight: 500; font-size: 1.375rem; color: var(--ink);
  display: flex; align-items: baseline; gap: 0.75rem;
  padding-bottom: 0.9rem; border-bottom: 1px solid var(--hairline); margin-bottom: 1.75rem;
}
.region__h .mono { font-size: 0.75rem; color: var(--muted); letter-spacing: 0.08em; }
.region__ops { color: var(--body); line-height: 1.65; max-width: 66ch; }
.region__others { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem; }
.region__others li { display: flex; align-items: baseline; gap: 0.6rem; }
.region__others a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--hairline); text-underline-offset: 4px; }
.region__others a:hover { text-decoration-color: currentColor; }
.region__others .mono { font-size: 0.75rem; color: var(--muted); }
/* related trips sit in the narrower main column, so two up rather than four */
.cards--related { grid-template-columns: 1fr 1fr; gap: 1.1rem; margin-top: 0.25rem; }
@media (max-width: 599px) { .cards--related { grid-template-columns: 1fr 1fr; gap: 0.85rem; } }