/* ============================================================
   Trips page  ·  SCRUM-122
   Itinerary timeline + numbered map, Quadriga dark/champagne skin
   ============================================================ */

/* ---------- centred section intro ----------
   The site's default puts these left-aligned inside a narrower column, which
   reads as a misalignment next to full-width content. On this page the intro
   is a deliberate centred block with a heavier display weight.            */
.trips-intro{
  max-width:720px;
  margin:0 auto clamp(26px,3.6vw,40px);
  text-align:center;
}
.trips-intro .section-eyebrow{
  display:inline-flex; align-items:center; justify-content:center;
  margin-bottom:14px; font-weight:600; letter-spacing:.2em;
}
.trips-intro .section-h2{
  font-weight:500;                 /* site default is 300: too thin at this size on dark */
  letter-spacing:-.01em;
  margin:0 0 14px;
}
.trips-intro .section-lead{
  margin:0 auto; max-width:56ch; color:var(--fg-muted);
}

/* ---------- overview map: all six destinations at once ---------- */
.section--chooser{padding-bottom:clamp(18px,2.5vw,30px);}
.trips-overview{
  border:1px solid var(--border-strong); border-radius:14px; overflow:hidden;
  background:var(--bg-elevated);
}
.trips-overview__map{
  width:100%; height:clamp(320px,46vh,470px); background:var(--bg-soft);
}
.trips-overview__hint{
  margin:0; padding:11px 16px; border-top:1px solid var(--border);
  font-size:var(--fs-xs); color:var(--fg-muted); text-align:center;
}
.pop-sub{color:var(--fg-muted); font-size:var(--fs-xs);}
.pop-link{
  display:inline-block; margin-top:6px; color:var(--accent);
  font-size:var(--fs-xs); font-weight:600; text-decoration:underline;
}

/* ---------- tour accordion (native <details>, one open at a time) ---------- */
.trip{
  border-top:1px solid var(--border);
}
.trip:last-of-type{border-bottom:1px solid var(--border);}
.trip > summary{list-style:none;}
.trip > summary::-webkit-details-marker{display:none;}

.trip__summary{cursor:pointer; transition:background .18s;}
.trip__summary:hover{background:var(--bg-elevated);}
.trip[open] > .trip__summary{background:var(--bg-elevated);}
.trip__summary:focus-visible{outline:2px solid var(--accent); outline-offset:-3px; box-shadow:none;}

.trip__summary-inner{
  display:flex; align-items:center; gap:18px;
  /* vertical only: the shorthand would wipe .container's side padding
     and the bar would run into the screen edges on mobile */
  padding-top:20px; padding-bottom:20px;
}
.trip__badge{
  display:grid; place-items:center; flex:0 0 42px; width:42px; height:42px;
  border-radius:50%; background:var(--accent); color:#0a0a0a;
  font-family:var(--font-mono); font-weight:700; font-size:var(--fs-lg);
}
.trip__sum-main{display:flex; flex-direction:column; gap:2px; min-width:0; flex:1 1 auto;}
.trip__sum-title{
  font-family:var(--font-display); font-weight:500; line-height:1.2;
  font-size:clamp(1.25rem,2.1vw,1.8rem); color:var(--fg-strong);
}
.trip[open] .trip__sum-title{color:var(--accent-hover);}
.trip__sum-sub{font-size:var(--fs-sm); color:var(--fg-muted);}

.trip__sum-meta{display:flex; flex-wrap:wrap; gap:8px; flex:0 0 auto;}
.trip__sum-chip{
  display:inline-flex; align-items:center; gap:6px; white-space:nowrap;
  padding:6px 12px; border:1px solid var(--border-strong); border-radius:999px;
  font-size:var(--fs-xs); color:var(--fg-muted);
}
.trip__sum-chip svg{width:14px; height:14px; stroke:var(--accent); fill:none; stroke-width:1.8;}
.trip__sum-chip--season{border-color:var(--border-accent); color:var(--accent-hover);}

.trip__chev{flex:0 0 auto; display:grid; place-items:center; width:30px; height:30px; color:var(--fg-muted);}
.trip__chev svg{width:22px; height:22px; stroke:currentColor; fill:none; stroke-width:2; transition:transform .22s;}
.trip[open] .trip__chev svg{transform:rotate(180deg); color:var(--accent);}

.trip__body{padding:4px 0 clamp(34px,5vw,58px);}

@media (max-width:760px){
  .trip__summary-inner{flex-wrap:wrap; gap:12px 14px; padding-top:16px; padding-bottom:16px;}
  .trip__badge{order:1; flex:0 0 36px; width:36px; height:36px; font-size:var(--fs-base);}
  .trip__chev{order:2; margin-left:auto;}
  .trip__sum-main{order:3; flex:1 1 100%;}
  .trip__sum-meta{order:4; flex:1 1 100%;}
}
@media (prefers-reduced-motion:reduce){
  .trip__chev svg,.trip__summary{transition:none;}
}
.trip__tagline{
  font-family:var(--font-display); font-style:italic;
  color:var(--accent); font-size:var(--fs-lg); margin:6px 0 0;
}
.trip__intro p{color:var(--fg-muted); margin:0 0 12px; max-width:70ch;}

/* meta chips: duration / vehicles / seasonal */
.trip__meta{display:flex; flex-wrap:wrap; gap:10px; margin:18px 0 0;}
.trip-meta{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 14px; border:1px solid var(--border-strong); border-radius:8px;
  background:var(--bg-elevated); font-size:var(--fs-sm); color:var(--fg);
}
.trip-meta svg{width:16px; height:16px; stroke:var(--accent); fill:none; stroke-width:1.8; flex:0 0 16px;}
.trip-meta--season{border-color:var(--border-accent); background:var(--accent-soft); color:var(--accent-hover);}

/* ---------- highlights ---------- */
.trip-highlights{margin:26px 0 0;}
.trip-highlights__list{
  list-style:none; margin:12px 0 0; padding:0;
  display:grid; gap:8px 22px;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
}
.trip-highlights__list li{
  position:relative; padding-left:24px; color:var(--fg); font-size:var(--fs-sm); line-height:1.5;
}
.trip-highlights__list li::before{
  content:""; position:absolute; left:0; top:.5em;
  width:9px; height:9px; border-radius:50%;
  background:var(--accent); box-shadow:0 0 0 3px var(--accent-soft);
}

/* ---------- itinerary + map layout ---------- */
.trip-plan{
  display:grid; gap:28px; margin-top:34px;
  grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  align-items:start;
}
@media (max-width:900px){ .trip-plan{grid-template-columns:1fr; gap:22px;} }

.trip-plan__title{
  font-family:var(--font-display); font-size:var(--fs-xl); color:var(--fg-strong);
  margin:0 0 18px; font-weight:500;
}

/* ---------- timeline ---------- */
.itin{list-style:none; margin:0; padding:0; position:relative;}
.itin__item{position:relative; padding:0 0 26px 46px;}
.itin__item:last-child{padding-bottom:0;}
/* dotted connector */
.itin__item::before{
  content:""; position:absolute; left:15px; top:26px; bottom:-4px;
  border-left:2px dotted var(--border-strong);
}
.itin__item:last-child::before{display:none;}

.itin__marker{
  position:absolute; left:0; top:0;
  display:grid; place-items:center;
  width:32px; height:32px; border-radius:50%;
  background:var(--accent); color:#0a0a0a;
  font-size:var(--fs-sm); font-weight:700; line-height:1;
  box-shadow:0 0 0 4px var(--bg), 0 0 0 5px var(--border-strong);
}
.itin__marker--pill{
  width:auto; min-width:52px; height:30px; border-radius:999px;
  padding:0 12px; font-size:var(--fs-2xs); letter-spacing:.08em; text-transform:uppercase;
}
.itin__marker--plain{
  background:var(--bg-soft); color:var(--fg-dim);
  box-shadow:0 0 0 4px var(--bg), 0 0 0 5px var(--border);
  width:16px; height:16px; margin:8px 0 0 8px;
}

.itin__time{
  display:block; font-family:var(--font-mono); font-size:var(--fs-xs);
  color:var(--accent); letter-spacing:.04em; margin-bottom:2px;
}
.itin__name{
  display:block; font-weight:600; color:var(--fg-strong);
  font-size:var(--fs-base); line-height:1.35; margin-bottom:3px;
}
.itin__info{display:block; color:var(--fg-muted); font-size:var(--fs-sm); line-height:1.5;}
.itin__details{
  list-style:none; margin:9px 0 0; padding:0 0 0 12px;
  border-left:2px solid var(--border-strong);
}
.itin__details li{
  color:var(--fg-muted); font-size:var(--fs-sm); line-height:1.65;
}
.itin__details li::before{content:"· "; color:var(--accent);}

.itin__item--soft .itin__name{color:var(--fg-muted); font-weight:500;}
/* Start/End pills are wider than the numbered circles: keep text clear of them */
.itin__item--pill{padding-left:80px;}
@media (max-width:420px){
  /* stack the pill above the text, but keep the text aligned with the
     numbered stops so it never runs across the dotted connector */
  .itin__item--pill{padding-left:46px; padding-top:38px;}
  .itin__item--pill .itin__marker--pill{top:0; left:0;}
  .itin__item--pill::before{top:38px;}
}

/* ---------- map ---------- */
.trip-map__wrap{
  position:sticky; top:88px;
  border:1px solid var(--border-strong); border-radius:12px; overflow:hidden;
  background:var(--bg-elevated);
}
@media (max-width:900px){ .trip-map__wrap{position:static;} }

.trip-map{
  width:100%; height:min(560px,62vh); min-height:340px;
  background:var(--bg-soft);
}
@media (max-width:900px){ .trip-map{height:330px; min-height:0;} }

.trip-map__hint{
  padding:9px 14px; border-top:1px solid var(--border);
  font-size:var(--fs-xs); color:var(--fg-muted); text-align:center;
}

/* leaflet skin */
.leaflet-container{background:#12100e; font-family:var(--font-body);}
.leaflet-control-zoom a{
  background:var(--bg-elevated) !important; color:var(--fg) !important;
  border-color:var(--border-strong) !important;
}
.leaflet-control-zoom a:hover{background:var(--bg-soft) !important; color:var(--accent) !important;}
.leaflet-control-attribution{
  background:rgba(10,10,10,.72) !important; color:var(--fg-muted) !important; font-size:10px !important;
}
.leaflet-control-attribution a{color:var(--fg-muted) !important;}
.leaflet-popup-content-wrapper,.leaflet-popup-tip{
  background:var(--bg-elevated); color:var(--fg); border:1px solid var(--border-strong);
  box-shadow:0 6px 22px rgba(0,0,0,.55);
}
.leaflet-popup-content-wrapper{border-radius:10px;}
.leaflet-popup-content a{color:var(--accent);}
.leaflet-container a.leaflet-popup-close-button{color:var(--fg-dim);}
.leaflet-container a.leaflet-popup-close-button:hover{color:var(--accent);}
.leaflet-popup-content{margin:10px 14px; font-size:var(--fs-sm);}
.leaflet-popup-content b{color:var(--accent);}

.trip-pin{
  display:grid; place-items:center;
  width:30px; height:30px; border-radius:50%;
  background:var(--accent); color:#0a0a0a;
  font-weight:700; font-size:13px; line-height:1;
  border:2px solid #0a0a0a; box-shadow:0 2px 8px rgba(0,0,0,.55);
}
.trip-pin--origin{
  width:auto; height:auto; padding:5px 11px; border-radius:999px;
  background:var(--bg-soft); color:var(--fg); border:1px solid var(--accent);
  font-size:11px; letter-spacing:.08em; text-transform:uppercase; font-weight:600;
}

/* ---------- included / not included ---------- */
.trip-cols{
  display:grid; gap:22px; margin-top:34px;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  align-items:start;          /* size to content, no stretched empty cards */
}
.trip-card{
  border:1px solid var(--border); border-radius:12px;
  background:var(--bg-elevated); padding:22px 24px;
}
.trip-card__title{
  font-size:var(--fs-sm); letter-spacing:.12em; text-transform:uppercase;
  color:var(--accent); margin:0 0 14px; font-weight:600;
}
.trip-card ul{list-style:none; margin:0; padding:0; display:grid; gap:9px;}
.trip-card li{
  position:relative; padding-left:24px; font-size:var(--fs-sm);
  color:var(--fg); line-height:1.5;
}
/* default marker: a small gold dot, so cards without a symbol variant
   (Accessibility, Additional Information, Cancellation) are not left with
   an empty indent in front of every line */
.trip-card li::before{
  content:""; position:absolute; left:4px; top:.55em;
  width:6px; height:6px; border-radius:50%; background:var(--accent);
  font-weight:700;
}
/* symbol variants replace the dot */
.trip-card--yes li::before,
.trip-card--no li::before,
.trip-card--fees li::before{
  width:auto; height:auto; background:none; border-radius:0; left:0; top:0;
}
.trip-card--yes li::before{content:"✓"; color:var(--success);}
.trip-card--no  li::before{content:"×"; color:var(--fg-dim); font-size:1.15em; line-height:1.1;}
.trip-card--fees li::before{content:"$"; color:var(--accent); font-family:var(--font-mono);}
.trip-card__foot{
  margin:14px 0 0; font-size:var(--fs-xs); color:var(--fg-muted); font-style:italic;
}
.trip-card__group{margin:0 0 14px;}
.trip-card__group:last-child{margin-bottom:0;}
.trip-card__group-name{
  font-size:var(--fs-sm); color:var(--fg-strong); font-weight:600; margin:0 0 7px;
}

/* ---------- note + cta ---------- */
.trip-note{
  max-width:none;   /* site base.css caps <p> width; the note is a full-width block */
  margin-top:26px; padding:18px 22px;
  border:1px solid var(--border); border-left:3px solid var(--accent);
  border-radius:0 10px 10px 0; background:var(--bg-elevated);
  color:var(--fg-muted); font-size:var(--fs-sm); line-height:1.65;
}
.trip-cta{
  display:flex; flex-wrap:wrap; gap:12px; align-items:center;
  margin-top:26px;
}
.trip-cta__note{font-size:var(--fs-sm); color:var(--fg-muted);}

/* ---------- shared good-to-know ---------- */
.goodtoknow{
  display:grid; gap:22px; margin-top:26px;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  align-items:start;          /* the three policy cards differ a lot in length */
}
.goodtoknow li{font-size:var(--fs-sm); line-height:1.6;}

/* ---------- homepage teaser ---------- */
.trips-teaser__grid{
  display:grid; gap:16px; margin-top:28px;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
}
.trip-tile{
  display:flex; flex-direction:column; gap:8px;
  padding:22px 22px 20px; text-decoration:none;
  border:1px solid var(--border); border-radius:12px; background:var(--bg-elevated);
  transition:border-color .2s, transform .2s, background .2s;
}
.trip-tile:hover,.trip-tile:focus-visible{
  border-color:var(--border-accent); transform:translateY(-3px); background:var(--bg-soft);
}
.trip-tile__num{
  font-family:var(--font-mono); font-size:var(--fs-xs); color:var(--accent); letter-spacing:.1em;
}
.trip-tile__name{
  font-family:var(--font-display); font-size:var(--fs-xl); color:var(--fg-strong);
  line-height:1.2; font-weight:500;
}
.trip-tile__meta{font-size:var(--fs-xs); color:var(--fg-muted);}

@media (prefers-reduced-motion:reduce){
  .trip-tile{transition:none;}
  .trip-tile:hover{transform:none;}
}