/* ============================================================
   Wunderlust — curated trips
   The Places/Trips tab, the trip cards and the trip panel body.
   Its own file so cards.css and sheet.css stay under the
   200-line guideline.
   ============================================================ */

/* --- Places / Trips tab ----------------------------------- */
/* Promoted into the hero, on the same line as the stats: it decides
   WHAT you are looking at, so it belongs on the first fold rather than
   below the mood rail where a visitor met "Places" by default and
   never learned Trips existed. Riding the stats row means it costs no
   extra height — the fold assertions in check_browser.py still hold.
   Labelled rather than icon-only: "Trips" is a new idea on this page
   and a glyph alone would not teach it. */
.hero-foot {
  display: flex; flex-wrap: wrap; align-items: flex-end;
  gap: var(--gap-4); margin-top: var(--gap-5);
}
.hero-foot .hero-stats { flex: 1 1 auto; margin-top: 0; }

/* Near-opaque, not .p-glass translucent: this is a control sitting on
   an illustration, and the inactive label has to hold its contrast
   over whatever hill or blossom lands behind it. The blur and lift
   keep it reading as UI rather than as part of the artwork. */
.tab-seg {
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter: saturate(160%) blur(16px);
  -webkit-backdrop-filter: saturate(160%) blur(16px);
  box-shadow: var(--shadow-1);
}
.tab-seg button { padding: 7px 16px; }
.tab-seg button .ms { font-size: 17px; }
/* Stats first, toggle full-width beneath, once the two no longer fit
   side by side — a squeezed segmented control is worse than a stacked
   one at reading as a choice. */
@media (max-width: 560px) {
  .hero-foot { flex-direction: column; align-items: stretch; }
  .tab-seg { display: flex; }
  .tab-seg button { flex: 1; }
}

/* --- Trip cards ------------------------------------------- */
/* Wider minimum than the place grid on purpose: a trip card carries a
   blurb plus an itinerary, and at 320px a set of four laid out 3+1,
   leaving an orphan. 420px settles it into balanced pairs on a laptop
   and still gives three columns on a wide display. */
.trips {
  display: grid; gap: var(--gap-4);
  grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
}
.trips[hidden], .grid[hidden] { display: none; }
/* Below two columns the wide minimum would overflow a phone. */
@media (max-width: 900px) { .trips { grid-template-columns: 1fr; } }

.trip-card {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: var(--gap-4);
  text-align: left; cursor: pointer;
  box-shadow: var(--shadow-1);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
  scroll-margin-top: 162px; scroll-margin-bottom: 96px;
}
.trip-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); }

/* Heart clears the head text the same way the place card does: the
   head column reserves the button's footprint so a long title wraps
   before it reaches the corner. */
.trip-head > div { padding-right: 36px; }

.trip-head { display: flex; align-items: flex-start; gap: var(--gap-3); }
.trip-head > div { flex: 1 1 auto; min-width: 0; }
.trip-glyph {
  flex: 0 0 auto; width: 40px; height: 40px;
  border-radius: 12px; display: grid; place-items: center; color: #fff;
  background: linear-gradient(150deg, var(--accent), var(--accent-press));
}
.trip-glyph .ms { font-size: 22px; }
.trip-title { font: 600 var(--fs-h3)/1.3 var(--font-display); letter-spacing: -.012em; }
.trip-where { font-size: var(--fs-sm); color: var(--text-3); margin-top: 1px; }

.trip-blurb {
  margin: var(--gap-3) 0 0;
  font-size: var(--fs-sm); color: var(--text-2);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}

/* The itinerary at a glance: numbered, arrowed, one line per stop.
   Counters rather than list-style so the number can be tinted and
   sized independently of the stop name. */
.trip-mini {
  margin: var(--gap-3) 0 0; padding: 0; list-style: none;
  counter-reset: tstop;
  font-size: var(--fs-sm); color: var(--text-2);
}
.trip-mini li {
  counter-increment: tstop;
  display: flex; gap: 8px; align-items: baseline;
  padding-block: 2px;
}
.trip-mini li::before {
  content: counter(tstop);
  flex: 0 0 18px;
  font-size: var(--fs-xs); font-weight: 700; font-variant-numeric: tabular-nums;
  color: var(--accent);
}

.trip-foot {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--gap-2);
  padding-top: var(--gap-3);
  border-top: 1px solid var(--line);
  font-size: var(--fs-xs); color: var(--text-3);
  /* Pushed to the bottom so cards in a row line their feet up even
     when one blurb wraps shorter than its neighbour. */
  margin-top: auto;
}

/* --- Trip panel: the stop list ---------------------------- */
.tstops {
  margin: var(--gap-5) 0 0; padding: 0; list-style: none;
  display: grid; gap: var(--gap-3);
}
.tstop {
  display: flex; gap: var(--gap-3);
  padding-top: var(--gap-3); border-top: 1px solid var(--line);
}
.tstop:first-child { padding-top: 0; border-top: 0; }
.tstop-n {
  flex: 0 0 26px; height: 26px;
  display: grid; place-items: center;
  border-radius: var(--r-pill);
  background: var(--accent-fill); color: var(--on-accent);
  font: 700 var(--fs-xs) var(--font-ui); font-variant-numeric: tabular-nums;
}
.tstop-body { flex: 1 1 auto; min-width: 0; }
.tstop-name { font: 600 var(--fs-body) var(--font-ui); color: var(--text); }
.tstop-meta { margin: 2px 0 0; font-size: var(--fs-xs); color: var(--text-3); }
.tstop-acts { display: flex; flex-wrap: wrap; gap: var(--gap-2); margin-top: var(--gap-2); }

.trip-tip {
  display: flex; gap: 9px; align-items: flex-start;
  margin-top: var(--gap-5); padding: var(--gap-3);
  border-radius: var(--r-md);
  background: var(--surface-2);
  font-size: var(--fs-sm); color: var(--text-2);
}
.trip-tip .ms { flex: 0 0 auto; font-size: 18px; color: var(--accent); }

/* The Route launcher in the card foot: an accent pill that opens the
   whole loop in Google Maps without going through the sheet. Pushed to
   the end of the foot so the time/stops badges lead. */
.trip-route {
  margin-left: auto;
  background: var(--accent-fill); color: var(--on-accent);
  border-color: transparent; font-weight: 600;
}
.trip-route:hover { background: var(--accent-press); color: var(--on-accent); }
.trip-route .ms { color: inherit; }