/**
 * @file session.css
 * Inhaltstyp „session" – Default-/Full-Ansicht. Festival-Look.
 * Mobile-first, Design-Tokens.
 *
 * Funktioniert unabhängig von der Seiten-Hintergrundfarbe: Chip-Flächen und
 * Trenner leiten sich per color-mix aus currentColor ab, Icons sind currentColor.
 * Der Track (.session__track) ist der Hook für spätere Farb-/Icon-Logik pro Track.
 */

.node--type-session.node--view-mode-full {
  position: relative;
  max-width: var(--layout-width-narrow);
  margin: 0 auto var(--space-2xl);
}

/* ========================================================================
   Favorit (Herz) – oben rechts neben den Tracks
   ======================================================================== */
.session__fav {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  padding: 0;
  font-size: 1.75rem;
  line-height: 1;
  color: var(--color-text-muted);
  background: color-mix(in srgb, currentColor 12%, transparent);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  transition: color var(--transition-base), transform var(--transition-base);
}

.session__fav:hover {
  transform: scale(1.1);
}

.session__fav.is-favorited {
  color: var(--color-accent);
}

/* Platz für das Herz freihalten, damit Track-Pills nicht darunter laufen. */
.session__tracks {
  padding-right: 3.5rem;
}

/* ========================================================================
   Kalender-Export (ICS) – unten
   ======================================================================== */
.session__ics {
  display: inline-flex;
  align-items: center;
  min-height: 3rem;
  margin-top: var(--space-lg);
  padding: var(--space-2xs) var(--space-md);
  font-weight: 600;
  text-decoration: none;
  color: var(--color-primary);
  background: transparent;
  border: 2px solid var(--color-primary);
  border-radius: 999px;
  transition: background var(--transition-base), color var(--transition-base);
}

.session__ics:hover,
.session__ics:focus-visible {
  color: var(--color-white);
  background: var(--color-primary);
}

/* ========================================================================
   Tracks – kompakte, farbige Pills nebeneinander (mehrwertig)
   ======================================================================== */
.session__tracks {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
  margin: 0 0 var(--space-md);
  padding: 0;
  list-style: none;
}

.session__track-item {
  margin: 0;
}

.session__track {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  padding: var(--space-3xs) var(--space-sm) var(--space-3xs) var(--space-3xs);
  font-size: var(--font-size-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  line-height: 1.1;
  text-decoration: none;
  /* Track-Farbe + Kontrast-Vordergrund via Inline-Custom-Properties
     (siehe _x10_summertheme_session_track); Fallback = Akzentfarbe. */
  color: var(--track-fg, var(--color-white));
  background: var(--track-color, var(--color-accent));
  border-radius: 999px;
  transition: filter var(--transition-base), transform var(--transition-base);
}

.session__track:hover,
.session__track:focus-visible {
  color: var(--track-fg, var(--color-white));
  filter: brightness(0.96);
  transform: translateY(-1px);
}

/* Icon-Kreis: Hintergrund = Kontrastfarbe, damit das Original-Icon (gleiche
   Farbe wie der Track) sichtbar bleibt – auch das weiße Icon. */
.session__track-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: var(--track-fg, var(--color-white));
}

.session__track-icon img {
  width: 72%;
  height: 72%;
  object-fit: contain;
}

/* ========================================================================
   Titel
   ======================================================================== */
.session__title {
  margin: 0 0 var(--space-md);
  font-size: clamp(2rem, 1.2rem + 4vw, 3.5rem);
  line-height: 1.05;
  letter-spacing: -0.01em;
}

/* ========================================================================
   Eckdaten als Chips mit Icon
   ======================================================================== */
.session__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs) var(--space-sm);
  margin-bottom: var(--space-xl);
}

.session__meta-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  padding: var(--space-2xs) var(--space-sm);
  font-size: clamp(1.05rem, 0.95rem + 0.6vw, 1.3rem);
  font-weight: 600;
  line-height: 1.3;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, currentColor 12%, transparent);
}

.session__meta-item .field,
.session__meta-item .field__item,
.session__meta-item .field__items {
  display: inline;
  margin: 0;
}

.session__meta-item .field__label {
  display: none;
}

.session__meta-item a {
  color: inherit;
  text-decoration: none;
}

.session__meta-item a:hover {
  text-decoration: underline;
}

/* Icon vor jedem Chip (currentColor via mask). */
.session__meta-item::before {
  content: "";
  flex: none;
  width: 1.1em;
  height: 1.1em;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
}

.session__meta-item--time::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2712%27%20r%3D%279%27%2F%3E%3Cpath%20d%3D%27M12%207.5V12l3%202%27%2F%3E%3C%2Fsvg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2712%27%20r%3D%279%27%2F%3E%3Cpath%20d%3D%27M12%207.5V12l3%202%27%2F%3E%3C%2Fsvg%3E");
}

.session__meta-item--location::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M12%2021.5s7-6.2%207-11.5a7%207%200%201%200-14%200c0%205.3%207%2011.5%207%2011.5z%27%2F%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2710%27%20r%3D%272.5%27%2F%3E%3C%2Fsvg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M12%2021.5s7-6.2%207-11.5a7%207%200%201%200-14%200c0%205.3%207%2011.5%207%2011.5z%27%2F%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2710%27%20r%3D%272.5%27%2F%3E%3C%2Fsvg%3E");
}

.session__meta-item--format::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M20.6%2013.4l-7.2%207.2a2%202%200%200%201-2.8%200l-7.2-7.2A2%202%200%200%201%203%2012V4.5A1.5%201.5%200%200%201%204.5%203H12a2%202%200%200%201%201.4.6l7.2%207.2a2%202%200%200%201%200%202.6z%27%2F%3E%3Ccircle%20cx%3D%277.5%27%20cy%3D%277.5%27%20r%3D%271.4%27%2F%3E%3C%2Fsvg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M20.6%2013.4l-7.2%207.2a2%202%200%200%201-2.8%200l-7.2-7.2A2%202%200%200%201%203%2012V4.5A1.5%201.5%200%200%201%204.5%203H12a2%202%200%200%201%201.4.6l7.2%207.2a2%202%200%200%201%200%202.6z%27%2F%3E%3Ccircle%20cx%3D%277.5%27%20cy%3D%277.5%27%20r%3D%271.4%27%2F%3E%3C%2Fsvg%3E");
}

.session__meta-item--max::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%279%27%20cy%3D%278%27%20r%3D%273.5%27%2F%3E%3Cpath%20d%3D%27M2.5%2020a6.5%206.5%200%200%201%2013%200%27%2F%3E%3Cpath%20d%3D%27M16%205a3.5%203.5%200%200%201%200%206.5%27%2F%3E%3Cpath%20d%3D%27M18%2014.2A6.5%206.5%200%200%201%2021.5%2020%27%2F%3E%3C%2Fsvg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%279%27%20cy%3D%278%27%20r%3D%273.5%27%2F%3E%3Cpath%20d%3D%27M2.5%2020a6.5%206.5%200%200%201%2013%200%27%2F%3E%3Cpath%20d%3D%27M16%205a3.5%203.5%200%200%201%200%206.5%27%2F%3E%3Cpath%20d%3D%27M18%2014.2A6.5%206.5%200%200%201%2021.5%2020%27%2F%3E%3C%2Fsvg%3E");
}

/* „max. Teilnehmende": Wert mit Suffix verständlich machen. */
.session__meta-item--max::after {
  content: " Plätze";
  font-weight: 400;
  opacity: 0.85;
}

/* ========================================================================
   Audiodeskription – dezente Info-Box mit Kopfhörer-Icon
   ======================================================================== */
.session__audio {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  width: fit-content;
  max-width: 100%;
  margin: 0 0 var(--space-md);
  padding: var(--space-2xs) var(--space-sm);
  font-size: var(--font-size-base);
  line-height: 1.4;
  /* Weißer Panel-Hintergrund + dezenter Schatten, damit die Box auf jedem
     Seitenhintergrund (auch dem primärfarbenen body in ejbo.css) sichtbar
     bleibt. Primärer Border-Streifen + Play-Button bleiben kontrastreich. */
  color: var(--color-text);
  background: var(--color-white);
  border-left: 4px solid var(--color-primary);
  border-radius: 50px;
  box-shadow: var(--shadow-sm);
}

.session__audio::before {
  content: "";
  flex: none;
  width: 1.5rem;
  height: 1.5rem;
  background-color: var(--color-primary);
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M3%2018v-6a9%209%200%200%201%2018%200v6%27%2F%3E%3Cpath%20d%3D%27M21%2019a2%202%200%200%201-2%202h-1v-7h3v5z%27%2F%3E%3Cpath%20d%3D%27M3%2019a2%202%200%200%200%202%202h1v-7H3v5z%27%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M3%2018v-6a9%209%200%200%201%2018%200v6%27%2F%3E%3Cpath%20d%3D%27M21%2019a2%202%200%200%201-2%202h-1v-7h3v5z%27%2F%3E%3Cpath%20d%3D%27M3%2019a2%202%200%200%200%202%202h1v-7H3v5z%27%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
}

/* Drupal-Field-Wrapper rund um den Player nicht extra Abstand erzeugen lassen. */
.session__audio .field,
.session__audio .field__item,
.session__audio .field__items {
  margin: 0;
  padding: 0;
  flex: 1;
  min-width: 0;
}

.session__audio .field__label {
  display: none;
}

/* Native <audio>-Player wird ausgeblendet, sobald der Custom-Player aktiv ist
   (per JS gesetzte Klasse). Ohne JS bleibt der native Player als Fallback. */
.session__audio--enhanced .field {
  display: none;
}

.session__audio audio {
  display: block;
  width: 100%;
  margin: 0;
}

.session__audio .contextual-region {
  position: static;
}

/* ----- Custom-Player ----- */
.session__audio-player {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  min-width: 0;
  max-width: 320px;
  flex: 1 1 auto;
}

.session__audio-play {
  flex: none;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  color: var(--color-white);
  background: var(--color-primary);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  transition: background var(--transition-base), transform var(--transition-base);
}

.session__audio-play:hover {
  background: var(--color-accent);
}

.session__audio-play:active {
  transform: scale(0.95);
}

.session__audio-play::before {
  content: "";
  display: block;
  width: 2.1em;
  height: 2.1em;
  margin: 0 auto;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%27M8%205v14l11-7z%27%2F%3E%3C%2Fsvg%3E") center / 75% no-repeat;
          mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%27M8%205v14l11-7z%27%2F%3E%3C%2Fsvg%3E") center / 75% no-repeat;
}

.session__audio-play.is-playing::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Crect%20x%3D%276%27%20y%3D%275%27%20width%3D%274%27%20height%3D%2714%27%2F%3E%3Crect%20x%3D%2714%27%20y%3D%275%27%20width%3D%274%27%20height%3D%2714%27%2F%3E%3C%2Fsvg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Crect%20x%3D%276%27%20y%3D%275%27%20width%3D%274%27%20height%3D%2714%27%2F%3E%3Crect%20x%3D%2714%27%20y%3D%275%27%20width%3D%274%27%20height%3D%2714%27%2F%3E%3C%2Fsvg%3E");
}

.session__audio-progress {
  flex: 1 1 auto;
  min-width: 0;
  height: 6px;
  background: color-mix(in srgb, var(--color-primary) 25%, transparent);
  border-radius: 999px;
  cursor: pointer;
  overflow: hidden;
}

.session__audio-progress:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

.session__audio-progress-fill {
  width: 0%;
  height: 100%;
  background: var(--color-primary);
  border-radius: 999px;
  transition: width 0.1s linear;
}

.session__audio-time {
  flex: none;
  min-width: 2.5rem;
  font-size: var(--font-size-sm);
  font-variant-numeric: tabular-nums;
  color: var(--color-text-muted);
  text-align: right;
}

/* ========================================================================
   Kurzbeschreibung
   ======================================================================== */
.session__description {
  font-size: var(--font-size-lg);
  line-height: 1.6;
}

.session__description > :last-child {
  margin-bottom: 0;
}