/* Bewertungen (Phase 13f): Zusammenfassung, Liste, Eingabe.

   Getragen von js/ui/ratingSection.js in der Detailansicht und - ohne
   Formular - von server/views/place.njk auf der JS-freien Zielseite. Beide
   Ansichten nutzen dieselben Klassen, damit eine Bewertung überall gleich
   aussieht. */

/* --- Hilfsklasse ---------------------------------------------------------

   Optisch versteckt, aber fuer Screenreader und die TASTATUR vorhanden.

   Die Clip-Technik statt display:none oder visibility:hidden ist hier keine
   Geschmacksfrage: Die Sterne-Eingabe ist eine echte Radiogruppe, und ihre
   Eingabefelder tragen diese Klasse. Mit display:none waeren sie nicht mehr
   fokussierbar - Pfeiltasten und Tab funktionierten nicht mehr, und damit
   waere genau der Vorteil weg, wegen dem dort echte Radios stehen.

   Bewusst allgemein benannt und nicht rating-spezifisch: Es ist die erste
   Hilfsklasse dieser Art im Projekt, und die naechste Stelle, die sie
   braucht, soll sie hier finden. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* --- Sternreihe (Anzeige) ------------------------------------------------
   Immer aria-hidden. Ein Screenreader liest "★★★★☆" je nach Stimme als
   "schwarzer Stern schwarzer Stern ..." oder gar nicht - die Bedeutung
   traegt der Text daneben (starsLabel aus js/models/validateRating.js). */

.rating-stars {
  color: #e8a317;
  letter-spacing: 0.06em;
  line-height: 1;
  white-space: nowrap;
}

/* --- Zusammenfassung unter dem Titel der Detailansicht ------------------- */

.detail-rating-summary:empty {
  display: none;
}

.rating-summary {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: 0.95rem;
}

.rating-summary__text {
  color: var(--color-text-muted);
}

/* --- Der Abschnitt ------------------------------------------------------- */

.detail-rating {
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-border);
}

.rating-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

/* Pflichtangabe nach § 5b Abs. 3 UWG: ob geprueft wird, dass Bewertende vor
   Ort waren. Klein, aber nicht versteckt - sie steht bei den Bewertungen,
   nicht im Impressum. */
.rating-section__disclosure {
  font-size: 0.8rem;
  line-height: 1.4;
  color: var(--color-text-muted);
}

.rating-section__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.rating-section__summary {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-sm);
}

.rating-section__average {
  font-size: 1.25rem;
  font-weight: 700;
}

.rating-section__count {
  color: var(--color-text-muted);
}

.rating-section__more {
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

.rating-section__failure {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-sm);
}

/* --- Liste fremder Bewertungen ------------------------------------------- */

.rating-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.rating-item {
  padding-bottom: var(--space-md);
  border-bottom: 1px solid var(--color-border);
}

.rating-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.rating-item__head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-sm);
  margin-bottom: var(--space-xs);
}

/* Die ausgeschriebene Fassung der Sterne. Fuer Sehende ueberfluessig - die
   Reihe daneben sagt dasselbe -, deshalb klein und gedaempft; fuer einen
   Screenreader ist sie die einzige verstaendliche Angabe. */
.rating-item__stars-text {
  font-size: 0.8rem;
  color: var(--color-text-muted);
}

/* Der Name des Verfassers (Phase 13g). Kraeftiger als Sternentext und Datum
   daneben: Er ist die Angabe, an der man Bewertungen desselben Ziels
   auseinanderhaelt, und keine Fussnote.

   Ein sehr langer Name (bis 30 Zeichen) darf umbrechen, statt die Zeile zu
   sprengen - der Kopf ist ohnehin flex-wrap. */
.rating-item__author {
  font-size: 0.85rem;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.rating-item__date {
  margin-left: auto;
  font-size: 0.8rem;
  color: var(--color-text-muted);
}

/* Die einmalige Namensabfrage fuer Konten aus der Zeit vor Phase 13g. Wie das
   Formular darunter aufgebaut, damit der Abschnitt beim Wechsel nicht
   springt. */
.rating-form__username-gate {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  align-items: flex-start;
}

/* pre-line, damit Absaetze des Verfassers erhalten bleiben - der Text kommt
   ueber textContent in den Knoten, Auszeichnungen sind also ausgeschlossen.
   overflow-wrap, weil eine durchgehende Zeichenkette ohne Leerzeichen sonst
   die Spalte auf dem Smartphone sprengt. */
.rating-item__comment {
  line-height: 1.5;
  white-space: pre-line;
  overflow-wrap: anywhere;
}

/* --- Eingabe ------------------------------------------------------------- */

.rating-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-border);
}

.rating-input {
  border: none;
  margin: 0;
  padding: 0;
}

.rating-input__legend {
  padding: 0;
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--color-text-muted);
  margin-bottom: var(--space-xs);
}

.rating-input__row {
  display: flex;
  gap: var(--space-xs);
}

/* Das Label ist die Trefferflaeche, nicht das (geclippte) Eingabefeld - auf
   dem Smartphone der verlaesslichere Weg, und iOS-Safari behandelt sehr
   kleine Eingabefelder beim Tippen gelegentlich eigenwillig. 44 Pixel ist
   das uebliche Mindestmass fuer eine Fingerflaeche. */
.rating-input__label {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: var(--color-border);
  font-size: 1.75rem;
  line-height: 1;
  transition: color 120ms ease, transform 120ms ease;
}

/* Alle Sterne BIS ZUM gewaehlten faerben sich, nicht nur der eine - das ist
   die gewohnte Lesart einer Sterneskala. Faerbte sich nur der gewaehlte,
   saehe "3 von 5" wie ein Anzeigefehler aus.

   In zwei Schritten, weil CSS nur nach vorn zeigen kann: erst alle faerben,
   sobald ueberhaupt etwas gewaehlt ist, dann alles hinter dem gewaehlten
   wieder zuruecknehmen. Der Aufbau ist Radio-Label-Radio-Label..., deshalb
   "+ Label ~ Label": das Label direkt hinter dem gewaehlten Feld ist dessen
   EIGENES und muss gefaerbt bleiben. */
.rating-input__row:has(.rating-input__radio:checked) .rating-input__label {
  color: #e8a317;
}

.rating-input__radio:checked + .rating-input__label ~ .rating-input__label {
  color: var(--color-border);
}

/* Vergroesserung statt Farbwechsel beim Ueberfahren: eine Farbe muesste
   gegen die beiden Regeln oben ankommen und deren Zusammenspiel wieder
   aufloesen. Die Bewegung sagt dasselbe und bleibt davon unberuehrt. */
.rating-input__label:hover {
  transform: scale(1.12);
}

/* Der Fokus wandert mit den Pfeiltasten durch die Gruppe. Weil das
   Eingabefeld geclippt ist, muss der Rahmen am Label sichtbar werden - sonst
   sieht ein Tastaturnutzer nicht, wo er steht. */
.rating-input__radio:focus-visible + .rating-input__label {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .rating-input__label {
    transition: none;
  }

  .rating-input__label:hover {
    transform: none;
  }
}

.rating-form__textarea {
  width: 100%;
  padding: var(--space-sm);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font: inherit;
  resize: vertical;
}

.rating-form__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

.rating-form__error {
  color: var(--color-danger);
  font-size: 0.9rem;
}

.rating-form__error[hidden] {
  display: none;
}

.rating-form__hint {
  font-size: 0.9rem;
  color: var(--color-text-muted);
}

/* Der Verfasser ist der Einzige, der seine verborgene Bewertung in der Liste
   nicht findet - er hat ein Recht darauf, den Grund zu erfahren. */
.rating-form__hidden-note {
  padding: var(--space-sm);
  border-left: 3px solid var(--color-danger);
  background: var(--color-background);
  font-size: 0.9rem;
  line-height: 1.45;
}

.rating-form__login {
  align-self: flex-start;
}

/* --- Auf der Listenkarte -------------------------------------------------
   Eine Zeile, knapp: "★ 4,2 (12)". Der ausgeschriebene Text steht im title. */

.place-card__rating {
  font-size: 0.85rem;
  color: #b07a00;
  font-weight: 600;
}