/* Verityprep — Almanca ses kayıtları (MainTR/AlmancaSesKayitlari).
   Hero/prose comes from shared exam-resources.css (.vp-res-* — untouched);
   exam-resources.css has no card/list-row family, so this file adds the
   audio card list only. Colors from verityprep_main_theme_tokens.css.
   FLAT policy: radius 0, no shadows, hairline borders, hover feedback =
   border-color emphasis.
   NOTE: .audio-container / .audio-item class names are the page's inline
   JS contract (click-to-reveal player) — do not rename. */

.vp-audio-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.audio-container {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 20px;
  background: var(--vp-bg-secondary-color);
  border: 1px solid var(--vp-border-primary-color);
  cursor: pointer;
  transition: border-color .2s ease;
}
.audio-container:hover { border-color: rgb(var(--vp-blue-rgb) / .5); }

.vp-audio-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 22px;
  font-weight: var(--vp-text-heading-weight);
  color: var(--vp-text-heading-color);
}

.vp-audio-icon {
  width: 22px;
  height: 22px;
  display: inline-grid;
  place-items: center;
  color: var(--vp-accent-primary-color);
}
.vp-audio-icon svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.audio-item { display: flex; }