/**
 * @file lieder.css
 * Lieder-Seite: Liedsammlungen + Akkordeon je Lied + Bausteine
 * (Strophe/Refrain/Hinweis).
 * Mobile-first, Design-Tokens, Festival-Optik.
 */

/* ========================================================================
   /lieder-Übersicht: schmale Lesespalte
   ======================================================================== */
.view--liederliste {
  max-width: var(--layout-width-narrow);
  margin: 0 auto;
}

/* ========================================================================
   Liedsammlung
   ======================================================================== */
.liedsammlung {
  margin: 0 0 var(--space-2xl);
}

.liedsammlung__title {
  margin: 0 0 var(--space-md);
  font-family: var(--font-heading);
  font-size: clamp(1.5rem, 1rem + 2vw, 2.25rem);
  line-height: 1.1;
}

.liedsammlung__lieder {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}

/* Drupal-Feld-Wrapper um die Lieder-Referenz neutralisieren. */
.liedsammlung__lieder .field,
.liedsammlung__lieder .field__items,
.liedsammlung__lieder .field__item {
  display: contents;
}

/* ========================================================================
   Lied = Akkordeon (natives <details>/<summary>)
   ======================================================================== */
.lied {
  background: var(--color-white);
  color: var(--color-text);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.lied__details {
  /* native <details> */
}

.lied__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  cursor: pointer;
  list-style: none;
  user-select: none;
}

/* Native Disclosure-Marker ausblenden (Safari/Chrome). */
.lied__summary::-webkit-details-marker {
  display: none;
}

.lied__title {
  font-family: var(--font-heading);
  font-size: var(--font-size-lg);
  font-weight: 700;
  line-height: 1.2;
  color: var(--color-text);
}

/* Eigener +/–-Indikator. */
.lied__summary::after {
  content: "+";
  flex: none;
  font-size: 1.5rem;
  font-weight: 300;
  line-height: 1;
  color: var(--color-primary);
  transition: transform var(--transition-base);
}

.lied__details[open] .lied__summary::after {
  content: "–";
}

.lied__summary:hover {
  background: color-mix(in srgb, var(--color-primary) 6%, transparent);
}

.lied__summary:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: -3px;
}

.lied__bausteine {
  padding: 0 var(--space-md) var(--space-md);
}

/* ========================================================================
   Bausteine: Strophe
   ======================================================================== */
.strophe {
  display: grid;
  grid-template-columns: 2.5rem 1fr;
  gap: var(--space-sm);
  align-items: start;
  margin: var(--space-md) 0;
}

.strophe:first-child {
  margin-top: 0;
}

.strophe .field {
  margin: 0;
  padding: 0;
}

/* Nummer/Buchstabe als kleine Plakette. */
.strophe__nummer .field__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  font-size: var(--font-size-sm);
  font-weight: 700;
  color: var(--color-white);
  background: var(--color-primary);
  border-radius: 50%;
  line-height: 1;
}

/* Strophentext mit erhaltenen Zeilenumbrüchen. */
.strophe__text .field__item {
  white-space: pre-line;
  line-height: 1.35;
}

/* ========================================================================
   Bausteine: Refrain
   ======================================================================== */
.refrain {
  position: relative;
  margin: var(--space-md) 0;
  padding: var(--space-sm) var(--space-md);
  background: color-mix(in srgb, var(--color-primary) 10%, transparent);
  border-left: 4px solid var(--color-primary);
  border-radius: var(--radius-sm);
  font-style: italic;
}

.refrain::before {
  content: "Refrain";
  display: block;
  margin-bottom: var(--space-3xs);
  font-style: normal;
  font-size: var(--font-size-sm);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-primary);
}

.refrain .field {
  margin: 0;
  padding: 0;
}

.refrain__text .field__item {
  white-space: pre-line;
  line-height: 1.35;
}

/* ========================================================================
   Bausteine: Hinweis
   ======================================================================== */
.hinweis {
  margin: var(--space-md) 0;
  font-size: var(--font-size-sm);
  font-style: italic;
  color: var(--color-text-muted);
}

.hinweis .field {
  margin: 0;
  padding: 0;
}

.hinweis__text .field__item {
  white-space: pre-line;
}