/*
 * route -- die Punkte einer Tour in ihrer Reihenfolge, verbunden durch eine Linie: Sie
 * zeigt, dass es ein Weg ist und keine Sammlung. Entwurf:
 * `claude_design/tour-trail-1.html`, vom User am 26. Oktober 2026 angenommen.
 *
 * route-section       Karte und Weg; am Desktop nebeneinander, die Karte bleibt beim
 *                     Lesen stehen
 * route-section__map  die Karte
 * route__item         ein Punkt; --stamp eine Stempelstelle: ihr Text steht als Karte
 * route__marker       der Kreis mit der Nummer wie auf der Karte; --stamp hellgrün
 *                     gefüllt (Hellgrün heißt „Hier wird gestempelt")
 * route__body         Titel und Marken
 * route__title        der Titel; der Verweis darin deckt den ganzen Eintrag ab
 * route__tags         die Marken: __tag grau, __tag--stamp hellgrün
 *
 * Ausgeblendet vom Filter wird mit `hidden` (`point-filter.js`).
 */

.route-section {
  display: grid;
  gap: var(--space-5);
}

.route-section__map .map__canvas {
  block-size: min(60svh, 30rem);
}

.route {
  margin: 0;
  padding: 0;
  list-style: none;
}

.route__item {
  --marker-size: 2.75rem;
  position: relative;
  display: grid;
  grid-template-columns: var(--marker-size) minmax(0, 1fr);
  column-gap: var(--space-3);
  padding-block-end: var(--space-4);
}

.route__item:last-child {
  padding-block-end: 0;
}

.route__item:not(:last-child)::after {
  content: "";
  position: absolute;
  inset-block: var(--marker-size) 0;
  inset-inline-start: calc(var(--marker-size) / 2 - 1px);
  border-inline-start: 2px solid var(--color-decorative);
}

.route__item:focus-within {
  outline: var(--focus-ring-width) solid var(--color-focus);
  outline-offset: var(--focus-ring-offset);
}

.route__marker {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  inline-size: var(--marker-size);
  block-size: var(--marker-size);
  border: 2px solid var(--color-decorative);
  border-radius: var(--radius-full);
  background-color: var(--color-band);
  color: var(--color-primary);
  font-weight: var(--font-weight-heavy);
  font-variant-numeric: tabular-nums;
}

/* Schrift darauf fast schwarz (10:1), in hell und dunkel gleich */
.route__marker--stamp {
  border-color: var(--color-brand-light);
  background-color: var(--color-brand-light);
  color: var(--color-on-brand-light);
}

.route__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-1);
  min-width: 0;
  min-block-size: var(--marker-size);
}

/* Eine Stempelstelle als Karte, der Kreis sitzt oben an ihrer Kante */
.route__item--stamp .route__body {
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-large);
  background-color: var(--color-card);
  box-shadow: var(--shadow-small);
}

.route__title {
  font-size: var(--font-size-large);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
}

.route__item--stamp .route__title {
  font-size: var(--font-size-title);
  font-weight: var(--font-weight-heavy);
}

.route__title a {
  color: inherit;
  text-decoration: none;
}

/* Der ganze Eintrag führt zum Punkt */
.route__title a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.route__title a:focus-visible {
  outline: none;
}

.route__item:hover .route__title a {
  color: var(--color-primary);
}

.route__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.route__tag {
  padding: 0 var(--space-2);
  border-radius: var(--radius-full);
  background-color: var(--color-card);
  color: var(--color-text-muted);
  font-size: var(--font-size-small);
}

/* Auf der Karte einer Stempelstelle grau statt in der Kartenfarbe */
.route__item--stamp .route__tag {
  background-color: oklch(94.5% 0.014 var(--accent-hue));
}

.route__item--stamp .route__tag--stamp,
.route__tag--stamp {
  background-color: var(--color-brand-light);
  color: var(--color-on-brand-light);
  font-weight: var(--font-weight-bold);
}

@media (prefers-color-scheme: dark) {
  .route__item--stamp .route__tag:not(.route__tag--stamp) {
    background-color: oklch(30% 0.014 var(--accent-hue));
  }
}

/* Karte links und beim Lesen stehen geblieben, Punkte rechts */
@media (min-width: 48rem) {
  .route-section {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
    column-gap: var(--space-7);
  }

  .route-section__map {
    position: sticky;
    inset-block-start: calc(var(--header-height) + var(--space-5));
  }
}