/* ============================================================================
 * accordion.css — tc-accordion
 * ----------------------------------------------------------------------------
 * FUNDAMENT-KOMPONENTE (Schicht 0). Aufklappbare Sektionen / Progressive
 * Disclosure. Abstrahiert aus der Best-Practice-Vorlage .gm-tools-section
 * (seit 09.09.2026 in css/pf-gm.css, davor pathfinder-ui.css) — bewaehrtes
 * GM-Werkzeug-Akkordeon.
 *
 * THEME-GETRIEBEN: Farben aus --tc-* / aktivem .theme-*.
 * Auszeichnungsfarbe (--tc-highlight, Gold) fuer Titel + offenen Chevron.
 *
 * Struktur (BEM):
 *   .tc-accordion                       Block (Container fuer mehrere Items)
 *     .tc-accordion__item               Eine aufklappbare Sektion
 *       .tc-accordion__head             Klickbarer Kopf (Toggle)
 *         .tc-accordion__icon           (optional) Icon links
 *         .tc-accordion__title          Titel (Cinzel, Gold)
 *           .tc-accordion__title-en     (optional) Zweitname darunter, klein (#877)
 *         .tc-accordion__sub            (optional) Sub-Text rechts (ellipsis)
 *         .tc-accordion__chevron        Chevron (rotiert bei .is-open)
 *       .tc-accordion__body             Inhalt (nur sichtbar bei .is-open)
 *
 * State: .is-open auf dem __item (von TC.Accordion gesetzt; CSS-only via
 *        :has() als Fallback falls JS fehlt — siehe unten).
 *
 * Modifier:
 *   --bordered   jedes Item mit eigener Border + Radius (Default-Look)
 *   --flush      randlos, nur Trennlinien zwischen Items (kompakte Listen)
 *   (--single / --multi sind VERHALTEN -> TC.Accordion-Helper, kein CSS)
 *
 * Joy-of-Use: Chevron-Rotation 0->180deg, Body-Fade-Slide beim Aufklappen,
 *   Click-Bounce-Easing (cubic-bezier) auf dem Head.
 * ============================================================================ */

/* === BLOCK ================================================================ */
.tc-accordion {
  display: flex;
  flex-direction: column;
  gap: var(--tc-space-2, 8px);
}

/* === ITEM ================================================================= */
.tc-accordion__item {
  /* ⚠️ min-width: 0 (07.09.2026, #166): Das Item ist Flex-Kind einer Spalte
     und haette sonst `min-width: auto` — die Mindestbreite seines INHALTS.
     Ein nowrap-Text tief im Koerper (Kartenname mit Ellipsis) machte so das
     ganze Akkordeon 404px breit in einer 325px-Spalte; sichtbar erst im
     Browser. CLAUDE.md §10: „min-width: 0 die ganze Kette hinunter". */
  min-width: 0;
  border: 1px solid var(--tc-deco-warm-border, rgba(255,255,255,0.10));
  border-radius: var(--tc-radius-lg, 12px);
  background: rgba(0, 0, 0, 0.30);
  overflow: hidden;
  transition: border-color var(--tc-motion-fast, 120ms),
              background var(--tc-motion-fast, 120ms);
}
.tc-accordion__item:hover {
  border-color: rgba(var(--tc-highlight-rgb), 0.30);
}
.tc-accordion__item.is-open {
  border-color: rgba(var(--tc-highlight-rgb), 0.40);
  background: rgba(0, 0, 0, 0.45);
}

/* === HEAD (Toggle) ======================================================== */
.tc-accordion__head {
  width: 100%;
  padding: 13px 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 13px;
  background: transparent;
  border: none;
  text-align: left;
  user-select: none;
  font-family: inherit;
  /* Click-Bounce-Easing (Joy) */
  transition: background var(--tc-motion-fast, 120ms),
              transform var(--tc-motion-bounce, 300ms cubic-bezier(0.34, 1.56, 0.64, 1));
}
.tc-accordion__head:hover {
  background: rgba(var(--tc-highlight-rgb), 0.05);
}
.tc-accordion__head:active {
  transform: scale(0.99);
}
.tc-accordion__head:focus-visible {
  outline: 2px solid var(--tc-highlight);
  outline-offset: -2px;
}
.tc-accordion__item.is-open .tc-accordion__head {
  background: rgba(var(--tc-highlight-rgb), 0.08);
  border-bottom: 1px solid rgba(var(--tc-highlight-rgb), 0.18);
}

/* === HEAD-SLOTS =========================================================== */
.tc-accordion__icon {
  font-size: 1.4rem;
  flex-shrink: 0;
  line-height: 1;
}
.tc-accordion__title {
  font-family: var(--tc-font-display, 'Cinzel', serif);
  font-size: var(--tc-text-base, 0.96rem);
  font-weight: 700;
  color: var(--tc-highlight);
}
/* Zweitname unter dem Titel (#877): der englische Name einer Warscroll unter
   dem deutschen — gleiche Gestalt wie `.aos-warscroll__name-en` (organisms.css). */
.tc-accordion__title-en {
  display: block;
  font-family: var(--tc-font-body);
  font-size: var(--tc-text-xs);
  font-weight: var(--tc-weight-normal);
  color: var(--tc-text-muted);
}
.tc-accordion__sub {
  flex: 1;
  font-size: var(--tc-text-xs, 0.78rem);
  color: var(--tc-text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: right;
}
.tc-accordion__chevron {
  font-size: 0.7rem;
  color: var(--tc-text-muted);
  transition: transform 0.25s var(--tc-motion-bounce-ease, cubic-bezier(0.34, 1.56, 0.64, 1)),
              color 0.25s;
  flex-shrink: 0;
  /* `auto` statt 6px (04.10.2026, #816): Unter 900 px blendet die Regel unten
     __sub aus, und ohne den wachsenden Untertitel stand der Pfeil direkt
     hinter dem Titel statt am rechten Rand. Mit __sub (flex: 1) aendert sich
     nichts — der Abstand kommt dort aus dem `gap` des Kopfes. */
  margin-left: auto;
}
.tc-accordion__item.is-open .tc-accordion__chevron {
  transform: rotate(180deg);
  color: var(--tc-highlight);
}

/* === BODY ================================================================= */
.tc-accordion__body {
  display: none;
  padding: 14px 16px 16px;
}
.tc-accordion__item.is-open .tc-accordion__body {
  display: block;
  animation: tc-accordion-fade 0.2s ease;
}
@keyframes tc-accordion-fade {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* === CSS-ONLY-FALLBACK (kein JS) ==========================================
   Wenn das Markup <details>/<summary> nutzt statt .is-open, funktioniert das
   Aufklappen nativ. Diese Regeln spiegeln den offenen Zustand. */
details.tc-accordion__item[open] { border-color: rgba(var(--tc-highlight-rgb), 0.40); background: rgba(0,0,0,0.45); }
details.tc-accordion__item[open] > summary.tc-accordion__head { background: rgba(var(--tc-highlight-rgb), 0.08); border-bottom: 1px solid rgba(var(--tc-highlight-rgb), 0.18); }
details.tc-accordion__item[open] .tc-accordion__chevron { transform: rotate(180deg); color: var(--tc-highlight); }
details.tc-accordion__item[open] > .tc-accordion__body { display: block; animation: tc-accordion-fade 0.2s ease; }
summary.tc-accordion__head { list-style: none; }
summary.tc-accordion__head::-webkit-details-marker { display: none; }

/* === MODIFIER · --flush (randlos, nur Trennlinien) ======================== */
.tc-accordion--flush { gap: 0; }
.tc-accordion--flush .tc-accordion__item {
  border: none;
  border-bottom: 1px solid var(--tc-border-subtle, rgba(255,255,255,0.06));
  border-radius: 0;
  background: transparent;
}
.tc-accordion--flush .tc-accordion__item.is-open { background: rgba(var(--tc-highlight-rgb), 0.04); }
.tc-accordion--flush .tc-accordion__item:last-child { border-bottom: none; }

/* === MODIFIER · --bordered (explizit, = Default-Look) ===================== */
.tc-accordion--bordered .tc-accordion__item {
  border: 1px solid var(--tc-deco-warm-border, rgba(255,255,255,0.10));
  border-radius: var(--tc-radius-lg, 12px);
}

/* === MOBILE =============================================================== */
@media (max-width: 900px) {
  .tc-accordion__head  { padding: 11px 13px; gap: 10px; }
  .tc-accordion__title { font-size: var(--tc-text-sm, 0.88rem); }
  .tc-accordion__sub   { display: none; }
  .tc-accordion__body  { padding: 11px 13px 13px; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .tc-accordion__head,
  .tc-accordion__chevron { transition: none; }
  .tc-accordion__item.is-open .tc-accordion__body,
  details.tc-accordion__item[open] > .tc-accordion__body { animation-duration: 0.01ms;
 animation-iteration-count: 1;
 animation-delay: -1ms; }
}