/* =================================================================
   SUP Oberlausitz — Bewertungssystem (Reviews)
   Ergänzendes Stylesheet. Nutzt ausschließlich die Design-Tokens aus
   main.css (:root) — Farben, Radius, Schatten, Spacing, Typo, Motion.
   Wird nur auf den Seiten geladen, die Reviews darstellen (Startseite,
   /rezensionen.html, /rezension-hinterlassen.html), damit der Cache der
   übrigen Seiten unberührt bleibt.
   Gliederung:
   1. Sterne-Anzeige (statisch)
   2. Review-Card
   3. Marquee (Startseite)
   4. Grid + Zusammenfassung (/rezensionen)
   5. Empty States
   6. Sterne-Eingabe (Formular)
   7. Formular-Ergänzungen (Zähler, Feldfehler)
   ================================================================= */

/* ---------- 1. STERNE-ANZEIGE ---------- */
.stars-display { display: inline-flex; align-items: center; gap: 2px; color: var(--sun); }
.stars-display svg { width: 1.15em; height: 1.15em; }
.stars-display .is-empty { color: var(--line-2); }

/* ---------- 2. REVIEW-CARD ---------- */
.review-card {
  display: flex; flex-direction: column; gap: var(--sp-4);
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: var(--sp-6);
  transition: transform var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out), border-color var(--t-base) var(--ease-out);
}
.review-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--green-200); }
.review-card__stars { font-size: var(--fs-500); }
.review-card__text { color: var(--ink-2); line-height: 1.6; margin: 0; }
/* Auf der Startseite Höhen angleichen: max. 5 Zeilen */
.review-card--clamp .review-card__text {
  display: -webkit-box; -webkit-line-clamp: 5; line-clamp: 5;
  -webkit-box-orient: vertical; overflow: hidden;
}
.review-card__meta { margin-top: auto; display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); }
.review-card__name { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.01em; color: var(--ink); }
.review-card__activity {
  display: inline-flex; align-items: center;
  background: var(--green-50); color: var(--brand-strong);
  font-weight: 700; font-size: var(--fs-300);
  padding: 0.3em 0.75em; border-radius: var(--r-pill);
}
.review-card__date { font-size: var(--fs-300); color: var(--muted-2); margin-left: auto; }

/* ---------- 3. MARQUEE (STARTSEITE) ---------- */
.review-marquee {
  position: relative; overflow: hidden; padding-block: var(--sp-2);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.review-marquee__track {
  display: flex; width: max-content; will-change: transform;
  animation: review-marquee var(--marquee-duration, 60s) linear infinite;
}
/* Abstand über margin (nicht gap), damit translateX(-50%) exakt eine Kopie
   ergibt und der Loop absolut sprungfrei ist. */
.review-marquee__track .review-card {
  flex: 0 0 clamp(264px, 80vw, 340px);
  margin-right: var(--sp-5);
  min-height: 100%;
}
@keyframes review-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
/* Pause bei Hover (nur echte Zeiger, nicht Touch) */
@media (hover: hover) {
  .review-marquee:hover .review-marquee__track { animation-play-state: paused; }
}
/* Statische, horizontal scrollbare Alternative (reduced motion) */
.review-marquee.is-static { overflow-x: auto; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
.review-marquee.is-static .review-marquee__track { animation: none; width: auto; }
.review-marquee.is-static .review-card { scroll-snap-align: start; }
@media (prefers-reduced-motion: reduce) {
  .review-marquee__track { animation: none; }
}

/* ---------- 4. GRID + ZUSAMMENFASSUNG (/rezensionen) ---------- */
.reviews-summary {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: var(--sp-2); margin-bottom: var(--sp-7);
}
.reviews-summary__score {
  font-family: var(--font-display); font-weight: 800; letter-spacing: -0.03em;
  font-size: clamp(2.6rem, 1.8rem + 3vw, 3.6rem); line-height: 1; color: var(--ink);
}
.reviews-summary__stars { font-size: var(--fs-700); }
.reviews-summary__count { color: var(--muted); font-weight: 600; }
.reviews-grid { display: grid; gap: var(--sp-5); grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.reviews-more { display: flex; justify-content: center; margin-top: var(--sp-7); }
/* [hidden] muss die display-Regeln dieser Komponenten sicher überschreiben */
.reviews-summary[hidden], .reviews-more[hidden], .reviews-empty[hidden] { display: none; }

/* ---------- 5. EMPTY STATES ---------- */
.reviews-empty {
  text-align: center; max-width: 46ch; margin-inline: auto;
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-4);
  padding: clamp(2rem, 1.2rem + 3vw, 3.5rem) var(--sp-5);
  background: var(--surface); border: 1px dashed var(--line-2); border-radius: var(--r-lg);
}
.reviews-empty__icon { width: 64px; height: 64px; border-radius: 50%; background: var(--green-50); color: var(--brand-strong); display: grid; place-items: center; }
.reviews-empty__icon svg { width: 32px; height: 32px; }
.reviews-empty h3 { color: var(--ink); }
.reviews-empty p { color: var(--muted); }

/* ---------- 6. STERNE-EINGABE (FORMULAR) ---------- */
.stars-input { border: 0; padding: 0; margin: 0; }
.stars-input legend { font-weight: 700; font-size: var(--fs-400); color: var(--ink); margin-bottom: var(--sp-2); padding: 0; }
.stars-input__row { display: inline-flex; gap: var(--sp-1); }
.stars-input__row label {
  display: grid; place-items: center; padding: 6px; cursor: pointer;
  color: var(--line-2); border-radius: var(--r-sm);
  transition: color var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out);
  min-width: 44px; min-height: 44px;   /* komfortables Touch-Ziel */
}
.stars-input__row label svg { width: 34px; height: 34px; }
.stars-input__row label.is-on { color: var(--sun); }
.stars-input__row label:active { transform: scale(0.9); }
.stars-input__row input:focus-visible + label { outline: 3px solid var(--blue-400); outline-offset: 2px; }
.stars-input__readout { display: block; margin-top: var(--sp-1); font-size: var(--fs-300); font-weight: 600; color: var(--muted); }
.stars-input__readout.is-set { color: var(--brand-strong); }

/* ---------- 7. FORMULAR-ERGÄNZUNGEN ---------- */
.char-counter { display: block; text-align: right; font-size: var(--fs-300); color: var(--muted-2); margin-top: 4px; }
.char-counter.is-invalid { color: #a31616; }
.field__error { display: none; color: #a31616; font-size: var(--fs-300); font-weight: 600; margin-top: 2px; }
.field__error.is-visible { display: block; }
.field input[aria-invalid="true"], .field select[aria-invalid="true"], .field textarea[aria-invalid="true"] {
  border-color: #d98a8a; box-shadow: 0 0 0 4px rgba(163,22,22,0.12);
}