/*
 * point-preview -- eine Sehenswürdigkeit als Karte: in der Liste unter
 * /sehenswuerdigkeiten und auf der Seite einer Tour. Entwurf:
 * `claude_design/points-trail-1.html`, vom User am 26. Oktober 2026 angenommen.
 *
 * Eigener Block und nicht `card`: Die Karte trägt keinen Knopf, sondern ist als Ganzes
 * der Verweis zur Sehenswürdigkeit -- der runde Pfeil sagt das.
 *
 * Am Handy untereinander, ab Tablet zwei, ab Desktop drei nebeneinander. Nebeneinander
 * stehen die Teile jeder Karte auf denselben Linien wie die der Nachbarn (subgrid): Ein
 * Name über zwei Zeilen schiebt die Marken der ganzen Reihe mit, statt nur die seiner
 * Karte. Fehlen Marken oder Text, bleibt ihre Zeile leer.
 *
 * point-preview__media   Titelbild oder Platzhalter (image-placeholder), immer gleich
 *                        groß: Karten mit und ohne Bild sind gleich (User, 23. Oktober
 *                        2026)
 * point-preview__title   der Titel; der Verweis darin deckt die ganze Karte ab
 * point-preview__tags    die Kategorien als graue Marken; __tag--stamp „Hier wird
 *                        gestempelt" in Hellgrün (nur auf der Tour)
 * point-preview__teaser  der Anfang des Textes, nach zwei Zeilen zu Ende
 * point-preview__go      der runde Pfeil
 */

.point-previews {
  display: grid;
  /* minmax(0, 1fr): Ohne die Null nimmt die Spalte die Mindestbreite ihres Inhalts
     und sprengt schmale Fenster */
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Der Fokusrahmen steht um die Karte, nicht um den Titel */
.point-preview {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 0;
  padding: var(--space-3) 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);
  transition: box-shadow var(--transition-fast);
}

.point-preview:hover {
  box-shadow: 0 0 0 3px oklch(93% 0.035 115);
}

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

/* Bild und Platzhalter füllen die Fläche, ohne ihre Größe mitzubestimmen */
.point-preview__media {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: var(--radius-medium);
  overflow: hidden;
}

.point-preview__media > * {
  position: absolute;
  inset: 0;
}

.point-preview__image {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

.point-preview__title {
  padding-inline: var(--space-1);
  font-size: var(--font-size-large);
  font-weight: var(--font-weight-heavy);
  line-height: var(--line-height-tight);
}

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

.point-preview__title a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius-large);
}

.point-preview__title a:focus-visible {
  outline: none;
}

.point-preview__tags {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: var(--space-1);
  margin: 0;
  padding: 0 var(--space-1);
  list-style: none;
}

.point-preview__tag {
  padding: 0 var(--space-2);
  border-radius: var(--radius-full);
  background-color: oklch(94.5% 0.014 var(--accent-hue));
  color: var(--color-text-muted);
  font-size: var(--font-size-small);
}

/* Hellgrün heißt überall „Hier wird gestempelt"; Schrift darauf fast schwarz (10:1) */
.point-preview__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) {
  .point-preview__tag:not(.point-preview__tag--stamp) {
    background-color: oklch(30% 0.014 var(--accent-hue));
  }
}

.point-preview__teaser {
  display: -webkit-box;
  padding-inline: var(--space-1);
  color: var(--color-text-muted);
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Sieht aus wie ein Knopf, ist aber keiner: Der Verweis ist die ganze Karte */
.point-preview__go {
  display: grid;
  flex: none;
  place-items: center;
  align-self: flex-end;
  inline-size: 2.5rem;
  block-size: 2.5rem;
  margin-block-start: auto;
  border-radius: var(--radius-full);
  background-color: var(--color-primary);
  color: var(--color-on-primary);
}

.point-preview__go svg {
  inline-size: 1.25rem;
  block-size: 1.25rem;
}

/* Ab Tablet nebeneinander. Jede Karte nimmt fünf Zeilen des Rasters (subgrid), jedes
   Teil steht in seiner Zeile. */
@media (min-width: 40rem) {
  .point-previews {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .point-preview {
    display: grid;
    grid-row: span 5;
    grid-template-rows: subgrid;
    row-gap: var(--space-3);
  }

  .point-preview__media {
    grid-row: 1;
  }

  .point-preview__title {
    grid-row: 2;
  }

  .point-preview__tags {
    grid-row: 3;
  }

  .point-preview__teaser {
    grid-row: 4;
  }

  .point-preview__go {
    grid-row: 5;
    justify-self: end;
    align-self: end;
  }
}

@media (min-width: 64rem) {
  .point-previews {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: var(--space-6);
  }
}