/* ============================================================
   TOUR PAGE. Fields, chips, counters and the ticket come from rental.css.
   ============================================================ */

/* ---------- hero ---------- */
.tour-hero{
  overflow:hidden; padding:calc(var(--nav-h) + clamp(30px, 6vh, 70px)) 0 clamp(50px, 8vh, 90px);
  background:linear-gradient(180deg, #FFFFFF 0%, #EFF8FD 70%, var(--paper) 100%);
}
.tour-hero-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px, 5vw, 64px); align-items:center; }
.tour-hero h1{ font-size:clamp(2.3rem, 4.8vw, 4rem); }
.tour-hero .hero-actions{ justify-content:flex-start; }

.collage{ position:relative; aspect-ratio:1 / .92; }
.collage-img{ position:absolute; object-fit:cover; border-radius:22px; box-shadow:var(--shadow-lift); will-change:transform; }
.collage-img--a{ left:0; top:6%; width:60%; height:46%; transform:translateY(calc(var(--p) * -30px)); }
.collage-img--b{ right:0; top:0; width:36%; height:50%; transform:translateY(calc(var(--p) * 40px)); }
.collage-img--c{ left:8%; bottom:0; width:34%; height:44%; transform:translateY(calc(var(--p) * 60px)); }
.collage-img--d{ right:4%; bottom:4%; width:50%; height:42%; transform:translateY(calc(var(--p) * -50px)); }

/* ---------- destinations ---------- */
.places{ padding-top:clamp(40px, 7vw, 80px); padding-bottom:clamp(40px, 6vw, 70px); }
.places .section-head{ margin-bottom:22px; }
.like-bar{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px; margin-bottom:24px; }

.place-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; }
.place{
  display:flex; flex-direction:column; border-radius:24px; overflow:hidden; background:var(--white);
  box-shadow:inset 0 0 0 1.5px var(--line);
  animation:cardIn .8s var(--ease) calc(var(--i) * 60ms) both;
  transition:box-shadow .35s ease, transform .6s var(--ease);
}
.place:hover{ transform:translateY(-3px); box-shadow:inset 0 0 0 1.5px var(--line), 0 28px 48px -28px rgba(20,41,59,.5); }
.place--wide{ grid-column:span 2; }
.place.is-added{ box-shadow:inset 0 0 0 2.5px var(--teal), 0 28px 48px -28px rgba(28,110,140,.55); }

.place-photo{
  position:relative; display:block; width:100%; height:clamp(200px, 22vw, 270px); padding:0; border:none; overflow:hidden;
  background:var(--mist); cursor:zoom-in;
}
.place-photo img{ display:block; width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--ease); }
.place:hover .place-photo img{ transform:scale(1.06); }
.place-count{
  position:absolute; right:12px; bottom:12px; padding:5px 11px; border-radius:999px; font:700 .76rem/1.2 var(--font);
  color:var(--white); background:rgba(20,41,59,.72); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
}
/* until a photo is supplied */
.place-tile{
  position:relative; display:flex; align-items:flex-end; height:clamp(200px, 22vw, 270px); padding:20px; overflow:hidden;
  background:linear-gradient(145deg, var(--teal), #0F3E55 75%);
}
.place-tile::before,.place-tile::after{
  content:""; position:absolute; left:-20%; right:-20%; height:70%; border-radius:50%; background:rgba(124,203,236,.16);
}
.place-tile::before{ bottom:-44%; }
.place-tile::after{ bottom:-56%; background:rgba(124,203,236,.2); }
.place-tile span{ position:relative; z-index:1; font-size:clamp(1.8rem, 3.4vw, 2.6rem); font-weight:800; letter-spacing:-.03em; color:var(--white); }

.place-body{ flex:1; display:flex; flex-direction:column; padding:17px 18px 18px; }
.place-body h3{ font-size:1.22rem; font-weight:800; margin-bottom:4px; }
.place-body p{ flex:1; margin:0 0 14px; font-size:.92rem; line-height:1.45; color:var(--ink-70); }
.place-match{
  display:none; align-self:flex-start; margin-bottom:9px; padding:4px 10px; border-radius:999px;
  background:var(--sky); color:var(--teal); font-size:.74rem; font-weight:700;
}
.place.is-match .place-match{ display:block; animation:panelIn .5s var(--ease) both; }
.place-add{
  align-self:flex-start; display:inline-flex; align-items:center; gap:7px; padding:10px 16px; border-radius:999px; cursor:pointer;
  border:1.5px solid rgba(31,74,102,.28); background:var(--white); color:var(--navy); font:700 .86rem/1.2 var(--font);
  transition:background .25s ease, color .25s ease, border-color .25s ease, transform .5s var(--ease);
}
.place-add:hover{ border-color:var(--navy); transform:translateY(-1px); }
.place-add[aria-pressed="true"]{ background:var(--teal); border-color:var(--teal); color:var(--white); }

/* ---------- builder ---------- */
.tour-builder{ padding-top:clamp(36px, 6vw, 70px); scroll-margin-top:calc(var(--nav-h) + 8px); }
.tour-builder .section-head{ margin-bottom:26px; }
.tour-counters{ display:flex; flex-wrap:wrap; gap:18px 36px; margin-bottom:24px; }
.field--short{ max-width:300px; }
.field-optional{ font-weight:500; color:var(--ink-55); font-size:.84rem; }
.chip.is-on,.chip[aria-pressed="true"]{ background:var(--ink); border-color:var(--ink); color:var(--white); }

.level-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; }
.level{ position:relative; display:block; margin:0 !important; cursor:pointer; }
.level input{ position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:pointer; }
.level span{
  display:block; height:100%; padding:14px 15px; border-radius:16px; border:1.5px solid var(--line);
  transition:background .25s ease, border-color .25s ease, color .25s ease, transform .5s var(--ease);
}
.level b{ display:block; font-size:1.02rem; font-weight:800; margin-bottom:3px; }
.level small{ display:block; font-size:.82rem; font-weight:500; line-height:1.4; color:var(--ink-70); transition:color .25s ease; }
.level:hover span{ border-color:var(--teal); transform:translateY(-2px); }
.level input:checked + span{ background:var(--teal); border-color:var(--teal); color:var(--white); }
.level input:checked + span small{ color:rgba(255,255,255,.84); }
.level input:focus-visible + span{ outline:3px solid var(--cyan); outline-offset:3px; }
.level-note{ margin:10px 0 0; font-size:.84rem; }

/* ticket photo strip */
.ticket-photos{ display:flex; height:110px; background:linear-gradient(145deg, var(--teal), #0F3E55 75%); }
.ticket-photos > *{ flex:1; min-width:0; height:100%; object-fit:cover; animation:panelIn .6s var(--ease) both; }
.ticket-tile{ display:flex; align-items:center; justify-content:center; padding:6px; text-align:center; font-size:.76rem; font-weight:800; color:var(--white); }
.ticket-rows dd.is-long{ font-weight:500; white-space:pre-line; }

/* ---------- photo viewer ---------- */
.viewer{
  width:min(1040px, calc(100vw - 24px)); max-width:none; max-height:calc(100vh - 24px); padding:0; border:none; border-radius:22px;
  overflow:hidden; background:var(--ink); color:var(--white);
}
.viewer::backdrop{ background:rgba(10,20,30,.78); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
.viewer[open]{ display:flex; flex-direction:column; animation:panelIn .5s var(--ease) both; }
.viewer-top{ display:flex; align-items:center; justify-content:space-between; gap:14px; padding:12px 14px 12px 20px; font-size:.92rem; }
.viewer-top span{ margin-left:8px; color:var(--on-dark); font-size:.84rem; }
.viewer-stage{ position:relative; display:flex; align-items:center; justify-content:center; flex:1; min-height:0; padding:0 14px 14px; }
.viewer-stage img{ display:block; max-width:100%; max-height:calc(100vh - 110px); border-radius:12px; object-fit:contain; animation:panelIn .45s var(--ease) both; }
.viewer-btn{
  display:grid; place-items:center; flex:none; width:42px; height:42px; border:none; border-radius:50%; cursor:pointer;
  background:rgba(255,255,255,.14); color:var(--white); transition:background .25s ease, transform .5s var(--ease);
}
.viewer-btn:hover{ background:rgba(255,255,255,.28); transform:scale(1.06); }
.viewer-prev,.viewer-next{ position:absolute; top:50%; margin-top:-28px; background:rgba(20,41,59,.72); }
.viewer-prev{ left:24px; }
.viewer-next{ right:24px; }

/* ---------- responsive ---------- */
@media (max-width: 980px){
  .tour-hero-grid{ grid-template-columns:1fr; }
  .collage{ aspect-ratio:1 / .68; }
  .place-grid{ grid-template-columns:repeat(2, 1fr); }
  .place--wide{ grid-column:span 2; }
}
@media (max-width: 640px){
  .place-grid{ grid-template-columns:1fr; }
  .place--wide{ grid-column:auto; }
  .place-photo,.place-tile{ height:220px; }
  .level-grid{ grid-template-columns:1fr; }
  .field--short{ max-width:none; }
  .like-bar .chips{ flex-wrap:nowrap; overflow-x:auto; margin:0 -24px; padding:2px 24px 6px; scrollbar-width:none; }
  .like-bar .chips::-webkit-scrollbar{ display:none; }
  .viewer-prev{ left:20px; }
  .viewer-next{ right:20px; }
}