/* ============================================================
   WHEELS ON FIRE — tour detail, shared.

   ONE source for the tour detail design, loaded by BOTH:
     · tours.html      — the in-site quick-view sheet (modal)
     · tours/<id>.html — the standalone, shareable tour pages

   The markup it styles is generated once in assets/tour-view.js, so the
   modal and the pages can never drift apart. Modal-only positioning
   (.tov, .tov-scrim, the clip-path wipe) stays in tours.html; page-only
   chrome lives in tour.css.
   ============================================================ */

/* the book button */
.btn-ink{background:var(--ink);border-color:var(--ink);color:var(--cream)}
.btn-ink::after{background:var(--red)}
.btn-ink:hover{color:var(--cream);border-color:var(--red)}

/* still-to-confirm marker, same language as the rest of the proposal */
.sample{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--red)}

/* ---------- context bar ---------- */
.tov-bar{position:sticky;top:0;z-index:5;display:flex;justify-content:space-between;align-items:stretch;pointer-events:none}
.tov-bar > *{pointer-events:auto}
/* The tour's ground colour lives up here, on the two chips over the photo —
   the page itself reads on cream. The colour names the tour instead of
   tinting everything under it. */
.tov-ctx{display:flex;align-items:center;gap:12px;background:var(--th);color:rgba(20,17,15,.62);
  padding:12px 20px;font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  min-width:0}
.tov-ctx i{font-style:normal;flex:none}
.tov-ctx i::after{content:'—';margin-left:12px;opacity:.45}
.tov-ctx b{font-weight:400;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tov-close{display:flex;align-items:center;gap:10px;
  background:var(--th);color:var(--ink);border:0;cursor:pointer;padding:12px 18px;
  transition:opacity .3s ease;
  font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase}
.tov-close .x{position:relative;width:16px;height:16px;flex:none}
.tov-close .x span{position:absolute;top:7px;left:0;width:16px;height:2px;background:var(--ink)}
.tov-close .x span:first-child{transform:rotate(45deg)}
.tov-close .x span:last-child{transform:rotate(-45deg)}
@media (max-width:640px){.tov-ctx i{display:none}.tov-ctx{padding:12px 14px}}

/* ---------- hero + body ---------- */
.tov-hero{position:relative;height:clamp(260px,42svh,460px);overflow:hidden}
.tov-hero img{width:100%;height:100%;object-fit:cover}
.tov-body{padding:clamp(34px,4.4vw,64px) var(--pad) clamp(48px,7vh,96px);max-width:1500px;margin:0 auto}
@media (max-width:860px){.tov-hero{height:clamp(220px,34svh,340px)}}

/* ---------- title row: the name, and the way to book it ---------- */
.tv-top{display:flex;justify-content:space-between;align-items:flex-end;gap:clamp(20px,4vw,60px);
  flex-wrap:wrap;margin-bottom:clamp(30px,5vh,56px)}
.tov h3,.tsheet h1,.tv-top h1,.tv-top h3{font-family:var(--disp);font-weight:700;text-transform:uppercase;
  letter-spacing:-0.03em;font-size:clamp(38px,5.4vw,86px);line-height:.86;margin:0}
.tv-buy{display:flex;align-items:center;gap:clamp(16px,2.2vw,30px);flex-wrap:wrap}
.tv-price{font-family:var(--med);font-size:14px;white-space:nowrap}
.tv-price b{font-family:var(--disp);font-weight:700;font-size:26px;letter-spacing:-0.02em;color:#333333}

/* ---------- the three columns ---------- */
/* Column one is sized so the spec's three chips hold one line: measured, they
   want 388px and the old .85fr gave 362 at 1440, which wrapped "Max 3 ppl"
   onto a line of its own. */
.tv-grid{display:grid;grid-template-columns:1.05fr 1fr .85fr;gap:clamp(24px,3.4vw,60px);align-items:start}
@media (max-width:1040px){.tv-grid{grid-template-columns:1fr 1fr}.tv-side{grid-column:1 / -1}}
@media (max-width:700px){.tv-grid{grid-template-columns:1fr}}

/* ---------- column 1 — the spec ----------
   The client's own layout: what the tour is on the first line, then one line
   per kind of day it runs, then what is included. Red hairlines between, and a
   red rule standing the list off its label. `tspec` and not `spec` because the
   Our Bikes page already owns that name for the Travel / Wheels / Sizes strip.

   The rows come from each tour's `rates` in tours-data.js, so a tour that only
   runs half days prints one row — there is no empty second line to explain. */
.tspec{font-family:var(--mono);color:rgba(20,17,15,.82)}
.tspec i{font-style:normal;color:var(--red);padding:0 2px}

/* The first line says what the tour is. The level is the fact the reader is
   deciding against, so it gets the red outline; bike and group size sit in the
   same grey wash as the Trail difficulty panel, as supporting detail. */
.tspec-tags{display:flex;gap:7px;flex-wrap:wrap;padding-bottom:18px}
.tspec-tag{font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;
  text-transform:uppercase;padding:5px 10px;background:transparent;
  border:1px solid rgba(20,17,15,.3);color:var(--ink)}
.tspec-tag.lv{border-color:var(--red);color:var(--red)}

/* One row per kind of day the tour runs, set as three fields with room to
   breathe between them rather than a run of words. The face is monospaced and
   the words are the same length either way — HALF DAY / FULL DAY, 3–4 / 5–6 —
   so day, hours and price line up down the block without any column maths. */
.tspec-row{display:flex;align-items:baseline;gap:clamp(12px,1.6vw,24px);
  font-size:13px;letter-spacing:.06em;padding:16px 0;
  border-bottom:1px solid rgba(20,17,15,.16)}
.tspec-row:first-of-type{border-top:1px solid rgba(20,17,15,.16)}
.tspec-row b{font-family:var(--monob);font-weight:400;text-transform:uppercase;
  letter-spacing:.1em;color:var(--ink)}
/* the separators carry their own gap now, so they do not add to it */
.tspec-row i{padding:0}

/* Included: red square bullets with a hairline under each line, which is how
   the old site set this list and what the client asked to keep. */
.tspec-inc{padding-top:clamp(34px,4vh,48px)}
.tspec-inc-t{display:block;font-family:var(--monob);font-size:13px;color:var(--ink);
  text-transform:uppercase;letter-spacing:.14em;margin-bottom:14px}
.tspec-inc ul{list-style:none}
.tspec-inc li{display:flex;align-items:baseline;gap:12px;font-size:13px;
  padding:9px 0;border-bottom:1px solid rgba(20,17,15,.16)}
.tspec-inc li:last-child{border-bottom:0}
.tspec-inc li::before{content:'';flex:none;width:6px;height:6px;background:var(--red)}

/* The insurance line is a caption under the block, not one of its facts —
   smaller, stood off, so it reads as the footnote it is. */
.tspec-note{font-family:var(--mono);font-size:11px;line-height:1.6;
  color:rgba(20,17,15,.6);margin-top:26px}

.tov-pending{font-size:11px;color:var(--red);letter-spacing:.04em;margin-top:16px}

/* column 2 — the ride, in the client's words */
.tv-story p{font-size:14px;line-height:1.7;color:rgba(20,17,15,.8);margin-bottom:18px}
.tv-story p:last-child{margin-bottom:0}

/* column 3 — terrain and grading, on a panel */
.tv-side{background:rgba(20,17,15,.07);padding:clamp(18px,2.2vw,30px)}
.tv-terrain{font-family:var(--monob);font-size:12.5px;line-height:1.6;color:rgba(20,17,15,.82);
  padding-bottom:clamp(16px,2.4vh,24px);margin-bottom:clamp(16px,2.4vh,24px);
  border-bottom:1px solid rgba(20,17,15,.24)}
.tv-side h4{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  font-family:var(--disp);font-weight:700;text-transform:uppercase;letter-spacing:-0.02em;
  font-size:clamp(19px,2.1vw,27px);line-height:1;margin-bottom:14px}
.tv-diff{border-top:1px solid rgba(20,17,15,.24)}
.tv-diff > div{display:flex;gap:12px;padding:11px 0;border-bottom:1px solid rgba(20,17,15,.16)}
.tv-diff > div:last-child{border-bottom:0}
.tv-diff dt{flex:none;min-width:74px;font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;
  text-transform:uppercase;color:rgba(20,17,15,.6);padding-top:2px}
.tv-diff dd{font-size:13px;line-height:1.5;color:rgba(20,17,15,.82)}

/* ---------- gallery ---------- */
.tv-gal-sec{margin-top:clamp(48px,7.5vh,100px)}
/* The two section titles inside a tour detail — Tour gallery and the rail of
   other tours at the foot — are the same object, so they are one rule. */
.tv-gal-title,.t-more .rail-head h2{font-family:var(--disp);font-weight:700;text-transform:uppercase;
  letter-spacing:-0.02em;font-size:clamp(24px,3vw,40px);line-height:1}
.tv-gal-title{margin-bottom:clamp(20px,3vh,32px)}
/* a rail rather than a grid: the client keeps adding photos per tour.
   It bleeds off the right edge of the page — the photos are meant to run on
   past the measure, not stop at it. 50% is the content box, 50vw the viewport,
   so the difference is exactly the distance left to the edge. Both the page
   (body overflow-x:clip) and the modal sheet (overflow-x:hidden) clip it. */
.tv-gal{margin-right:calc(50% - 50vw);display:grid;grid-auto-flow:column;grid-auto-columns:clamp(240px,30vw,420px);
  gap:clamp(10px,1.4vw,20px);align-items:start;overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;padding-bottom:4px;scroll-behavior:smooth}
.tv-gal::-webkit-scrollbar{display:none}
.tv-gal a{display:block;overflow:hidden;aspect-ratio:4/3;scroll-snap-align:start;background:rgba(20,17,15,.1)}
.tv-gal img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.22,1,.36,1)}
.tv-gal a:hover img{transform:scale(1.05)}

.tv-gal-foot{display:flex;align-items:center;gap:clamp(18px,3vw,40px);margin-top:clamp(18px,2.6vh,28px)}
.tv-gal-nav{display:flex;gap:8px;flex:none}
.tv-gal-btn{width:44px;height:44px;border:1px solid rgba(20,17,15,.35);background:transparent;
  color:var(--ink);display:grid;place-items:center;cursor:pointer;
  transition:background .25s ease,color .25s ease,border-color .25s ease,opacity .25s ease}
.tv-gal-btn svg{width:22px;height:16px}
.tv-gal-btn:hover:not(:disabled){background:var(--ink);color:var(--th);border-color:var(--ink)}
.tv-gal-btn:disabled{opacity:.28;cursor:default}
/* how far through the rail you are */
.tv-gal-bar{flex:1;height:2px;background:rgba(20,17,15,.2);position:relative}
.tv-gal-bar i{display:block;height:100%;background:var(--ink);width:0;
  transition:width .25s ease,transform .25s ease}
@media (max-width:560px){.tv-gal{grid-auto-columns:78vw}}

/* ---------- the weather disclaimer ----------
   Only Enduro Paradise carries one today, from `warn` in tours-data.js. The
   page is cream, so a dark ground is what makes an alert read as an alert, and
   the red bar on the leading edge is the site's own way of saying "stop here
   and read this". Same component serves the booking flow. */
.tv-warn{display:block;margin:0 0 clamp(28px,4vh,44px);
  background:rgba(12,10,9,.08);border-left:4px solid var(--red);
  padding:clamp(14px,1.8vw,20px) clamp(16px,2vw,24px);
  font-family:var(--mono);font-size:12.5px;line-height:1.65;color:rgba(20,17,15,.88)}
/* `display:block` above beats the UA stylesheet's [hidden]{display:none}, so the
   empty panel stayed on the page when another tour was picked. */
.tv-warn[hidden]{display:none}
/* The gap above comes from .tv-top's own bottom margin, which collapses with
   this one and wins. So it is shortened at the source, and only when a warning
   is what follows the title row. */
.tv-top:has(+ .tv-warn){margin-bottom:clamp(14px,2vh,22px)}
.tv-warn b{font-family:var(--monob);font-weight:400;color:var(--red);
  text-transform:uppercase;letter-spacing:.1em}
/* the condition itself, held in the bold mono but in the body colour */
.tv-warn strong{font-family:var(--monob);font-weight:400;color:var(--ink)}

/* Same on the tour gallery — the progress bar stays as the affordance. */
@media (max-width:860px){ .tv-gal-nav{display:none} }