/*
 * Die öffentliche Seite einer Sehenswürdigkeit -- nach Thema geschnitten, weil die
 * Blöcke darin nur dort vorkommen. Entwurf `claude_design/point-trail-1.html`, vom User
 * am 26. Oktober 2026 angenommen.
 *
 * Das Bild selbst steht nicht hier: `media` steht in components/media.css, weil die
 * Mediathek im Adminbereich dieselbe Darstellung braucht.
 *
 * point-head     der Kopf im weißen Abschnitt: Titel, Titelbild bzw. Platzhalter
 *                (__media), Stempeln und Text; am Desktop das Bild rechts
 * point-stamp    „Hier stempeln", die Zeile für Meldungen (__status) und der Weg zurück
 *                zur Wanderung (__back) -- ohne Karte drumherum
 * point-text     die Beschreibung, in Lesebreite
 * point-audio    der Player als eine Karte über die ganze Breite: oben die Sprachen als
 *                Umschalter (tabs) in einer Zeile -- Marken, die umbrechen, sehen am
 *                Handy durcheinander aus --, darunter je Sprache die Aufnahme
 * audio-track    eine Aufnahme mit Titel, Player und dem Text zum Mitlesen
 * audio-player   der eigene Player (audio-player.js): runder Knopf, Leiste, Zeit
 * gallery        weitere Bilder; am Desktop drei nebeneinander
 * facts          „Wo es liegt": die Angaben als Karte
 *
 * Jeder Block steht für sich: Fehlen Bilder oder Aufnahmen, fällt der ganze Abschnitt
 * weg und die Seite bleibt vollständig.
 */

/* ---------- Kopf ---------- */

.point-head {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.point-head__media {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-large);
  overflow: hidden;
}

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

.point-head__media .media__image {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  border-radius: 0;
}

/* ---------- Stempeln ---------- */

.point-stamp {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-2);
}

.layout__band .point-stamp__button {
  min-height: 3.5rem;
  font-size: var(--font-size-large);
}

/* Leer, bis stamp.js eine Meldung setzt */
.point-stamp__status:empty {
  display: none;
}

.point-stamp__back {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: var(--space-1);
  min-block-size: var(--tap-target);
  color: var(--color-primary);
  font-weight: var(--font-weight-bold);
}

.point-stamp__back svg {
  flex: none;
  inline-size: 1.25rem;
  block-size: 1.25rem;
}

.point-text {
  max-inline-size: 62ch;
  font-size: var(--font-size-large);
}

/* ---------- Zum Anhören ---------- */

.point-audio {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-5) 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);
}

/* Die Sprachen als Umschalter: gleich breite Teile in einer Zeile, egal wie viele es
   gibt. Der Rahmen hat 3:1 zum Grund, die gewählte Sprache ist gefüllt. */
.point-audio .tabs__list {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: var(--space-1);
  padding: var(--space-1);
  border: var(--border-width) solid var(--color-border-strong);
  border-radius: var(--radius-full);
  background-color: var(--color-card);
}

.point-audio .tabs__tab {
  justify-content: center;
  min-width: 0;
  padding-inline: var(--space-2);
  border: 0;
  border-radius: var(--radius-full);
  color: var(--color-text);
  font-weight: var(--font-weight-bold);
}

/* Die gewählte Sprache ist gefüllt. Welche es ist, steht am versteckten Auswahlknopf
   (tabs.css); eine Regel je Platz, weil CSS nicht rechnen kann -- wie dort bis sechs */
.point-audio:has(.tabs__input[data-tab="1"]:checked) .tabs__tab[data-tab="1"],
.point-audio:has(.tabs__input[data-tab="2"]:checked) .tabs__tab[data-tab="2"],
.point-audio:has(.tabs__input[data-tab="3"]:checked) .tabs__tab[data-tab="3"],
.point-audio:has(.tabs__input[data-tab="4"]:checked) .tabs__tab[data-tab="4"],
.point-audio:has(.tabs__input[data-tab="5"]:checked) .tabs__tab[data-tab="5"],
.point-audio:has(.tabs__input[data-tab="6"]:checked) .tabs__tab[data-tab="6"] {
  background-color: var(--color-primary);
  color: var(--color-on-primary);
}

@media (min-width: 48rem) {
  .point-audio {
    padding: var(--space-6);
  }

  .point-audio .tabs__list {
    max-inline-size: 30rem;
  }
}

/* Sehr schmal: Sprachnamen passen nur kleiner und mit schmalerem Rand der Karte in ihr
   Drittel, sonst brächen sie im Wort */
@media (max-width: 22rem) {
  .point-audio {
    padding-inline: var(--space-3);
  }

  .point-audio .tabs__tab {
    padding-inline: 0;
    font-size: var(--font-size-small);
  }
}

.audio-track {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.audio-track__title {
  font-size: var(--font-size-large);
  font-weight: var(--font-weight-heavy);
}

.audio-track__player {
  inline-size: 100%;
}

.audio-player {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-3);
}

.audio-player__toggle {
  display: grid;
  place-items: center;
  inline-size: 3.25rem;
  block-size: 3.25rem;
  padding: 0;
  border: 0;
  border-radius: var(--radius-full);
  background-color: var(--color-primary);
  color: var(--color-on-primary);
  cursor: pointer;
}

.audio-player__toggle:hover {
  background-color: var(--color-primary-hover);
}

.audio-player__toggle svg {
  inline-size: 1.5rem;
  block-size: 1.5rem;
}

/* Die Leiste: 44px Trefferfläche, sichtbar eine runde Bahn; links von der Stelle gefüllt */
.audio-player__position {
  --audio-track: var(--color-border-strong);
  inline-size: 100%;
  block-size: var(--tap-target);
  margin: 0;
  background: transparent;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

.audio-player__position::-webkit-slider-runnable-track {
  block-size: 0.375rem;
  border-radius: var(--radius-full);
  background: linear-gradient(to right, var(--color-primary) var(--audio-progress, 0%), var(--audio-track) var(--audio-progress, 0%));
}

.audio-player__position::-moz-range-track {
  block-size: 0.375rem;
  border-radius: var(--radius-full);
  background-color: var(--audio-track);
}

.audio-player__position::-moz-range-progress {
  block-size: 0.375rem;
  border-radius: var(--radius-full);
  background-color: var(--color-primary);
}

.audio-player__position::-webkit-slider-thumb {
  inline-size: 1.25rem;
  block-size: 1.25rem;
  margin-block-start: -0.4375rem;
  border: 3px solid var(--color-card);
  border-radius: var(--radius-full);
  background-color: var(--color-primary);
  box-shadow: 0 0 0 1px var(--color-primary);
  -webkit-appearance: none;
}

.audio-player__position::-moz-range-thumb {
  inline-size: 1rem;
  block-size: 1rem;
  border: 3px solid var(--color-card);
  border-radius: var(--radius-full);
  background-color: var(--color-primary);
  box-shadow: 0 0 0 1px var(--color-primary);
}

.audio-player__time {
  color: var(--color-text-muted);
  font-size: var(--font-size-small);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Sehr schmal: die Zeit unter die Leiste, damit die Leiste lang genug zum Spulen bleibt */
@media (max-width: 22rem) {
  .audio-player {
    grid-template-columns: auto minmax(0, 1fr);
    row-gap: 0;
  }

  .audio-player__toggle {
    grid-row: span 2;
  }

  .audio-player__time {
    grid-column: 2;
  }
}

.audio-track__transcript > summary {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-block-size: var(--tap-target);
  color: var(--color-primary);
  font-weight: var(--font-weight-bold);
  list-style: none;
  cursor: pointer;
}

.audio-track__transcript > summary::-webkit-details-marker {
  display: none;
}

/* Ein Winkel statt des Dreiecks des Browsers; offen zeigt er nach oben */
.audio-track__transcript > summary::after {
  content: "";
  inline-size: 0.5rem;
  block-size: 0.5rem;
  border-block-end: 2px solid currentColor;
  border-inline-end: 2px solid currentColor;
  rotate: 45deg;
  translate: 0 -0.125rem;
}

.audio-track__transcript[open] > summary::after {
  rotate: -135deg;
  translate: 0 0.125rem;
}

/* ---------- Bilder ---------- */

.gallery {
  display: grid;
  gap: var(--space-4);
}

.gallery .media__image {
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-large);
}

/* ---------- Wo es liegt ---------- */

.facts {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5) 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);
}

.facts__list {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-2) var(--space-4);
  align-items: baseline;
  margin: 0;
}

.facts__list dt {
  color: var(--color-text-muted);
  font-size: var(--font-size-small);
}

.facts__list dd {
  margin: 0;
  font-weight: var(--font-weight-bold);
}

.facts__coordinates {
  font-variant-numeric: tabular-nums;
}

/* ---------- Desktop ---------- */

@media (min-width: 40rem) {
  .gallery {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 48rem) {
  .layout__band .point-stamp__button {
    align-self: flex-start;
    padding-inline: var(--space-7);
  }
}

/* Ab 64rem: links Name, Stempeln und Text, rechts das Titelbild */
@media (min-width: 64rem) {
  .point-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
      "title media"
      "stamp media"
      "text media";
    grid-template-rows: auto auto 1fr;
    column-gap: var(--space-7);
    row-gap: var(--space-4);
    align-items: start;
  }

  .point-head .layout__title {
    grid-area: title;
  }

  .point-head__media {
    grid-area: media;
  }

  .point-head .point-stamp {
    grid-area: stamp;
  }

  .point-head .point-text {
    grid-area: text;
  }
}