/* =========================================================
   asatoma-par.ru · faq.css
   ─────────────────────────────────────────────────────────
   GEO V2 · видимая FAQ-разметка — нативный аккордеон
   <details>/<summary> без JS. Секция на тёмно-синем фоне
   (.faq-section bg-sapphire). 13 вопросов, синхронны с
   FAQPage JSON-LD.
   ========================================================= */

.faq__list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: none;          /* нормализация сетки: список во всю ширину контейнера (#faq и #safety) */
}

.faq__item {
  border-top: 1px solid rgba(239, 231, 218, 0.16);
}
.faq__item:last-child {
  border-bottom: 1px solid rgba(239, 231, 218, 0.16);
}

.faq__item details {
  margin: 0;
}

.faq__item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 0;
  font-family: var(--aa-font-display, 'Cormorant Garamond', Georgia, serif);
  font-weight: 400;
  font-size: 21px;
  line-height: 1.3;
  color: var(--color-pearl, #EFE7DA);
  transition: color 200ms ease;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary:hover { color: #FFFFFF; }
.faq__item summary:focus-visible {
  outline: 2px solid var(--color-pearl, #EFE7DA);
  outline-offset: 4px;
}

/* Плюс/крестик — маркер раскрытия */
.faq__item summary::after {
  content: '';
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 6px;
  position: relative;
  background:
    linear-gradient(currentColor, currentColor) center/100% 1.5px no-repeat,
    linear-gradient(currentColor, currentColor) center/1.5px 100% no-repeat;
  transition: transform 240ms cubic-bezier(.22,.61,.36,1);
}
.faq__item details[open] summary::after {
  transform: rotate(45deg);
}

.faq__item details > p {
  margin: 0;
  padding: 0 38px 24px 0;
  font-family: var(--aa-font-body, 'Manrope', sans-serif);
  font-size: 15px;
  line-height: 1.65;
  color: rgba(239, 231, 218, 0.74);
  text-wrap: pretty;
}

@media (max-width: 767px) {
  .faq__item summary {
    font-size: 18px;
    padding: 18px 0;
    gap: 14px;
  }
  .faq__item details > p {
    font-size: 14px;
    padding-right: 0;
    padding-bottom: 20px;
  }
}

/* ═══════════════════════════════════════════════════════════
   UX-2 · «Безопасность» как аккордеон (паттерн FAQ, та же тёмная секция).
   Переиспользует .faq__list/.faq__item/details/summary; добавляет
   стиль вложенного <ul> и цветные маркеры групп (ok/cond/no).
   ═══════════════════════════════════════════════════════════ */
.safety-acc details > ul { margin: 0; padding: 4px 0 10px; list-style: none; }
.safety-acc details > ul li {
  padding: 9px 0;
  border-bottom: 1px solid rgba(239,231,218,0.12);
  color: var(--fg-on-inverse-muted);
  line-height: 1.5;
}
.safety-acc details > ul li:last-child { border-bottom: 0; }
.safety-acc summary::before {
  content: ""; display: inline-block; width: 8px; height: 8px;
  border-radius: 50%; margin-right: 11px; vertical-align: middle;
  background: var(--color-ink-400);
}
.safety-acc .col-ok   summary::before { background: var(--color-success); }
.safety-acc .col-cond summary::before { background: var(--color-warning); }
.safety-acc .col-no   summary::before { background: var(--color-error); }

/* ═══ FAQ-озвучка · кнопка ▶/⏸ (44px латунный кружок) + кольцо прогресса ═══ */
.faq__item summary .faq__q { flex: 1 1 auto; min-width: 0; }
.faq__audio {
  flex: none;
  width: 44px; height: 44px;
  margin-top: -2px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  border: 1.5px solid var(--aa-brass, #b08d57);
  background: transparent; color: var(--aa-brass, #b08d57);
  cursor: pointer; position: relative;
  -webkit-tap-highlight-color: transparent;
  transition: background 200ms ease, color 200ms ease, transform 160ms ease;
}
.faq__audio:hover { background: rgba(176, 141, 87, .12); }
.faq__audio:focus-visible { outline: 2px solid var(--color-pearl, #EFE7DA); outline-offset: 3px; }
.faq__audio:active { transform: scale(.94); }
.faq__audio .faq__audio-ico { width: 18px; height: 18px; fill: currentColor; display: block; }
.faq__audio .faq__audio-ico--pause { display: none; }            /* в покое только ▶ */
.faq__audio.is-playing { background: var(--aa-brass, #b08d57); color: var(--color-sapphire-900, #14203a); }
.faq__audio.is-playing .faq__audio-ico--play { display: none; }  /* при игре ▶→⏸ */
.faq__audio.is-playing .faq__audio-ico--pause { display: block; }
.faq__audio::before {
  content: ''; position: absolute; inset: -4px; border-radius: 50%; pointer-events: none;
  background: conic-gradient(var(--aa-brass, #b08d57) calc(var(--faq-prog, 0) * 360deg), transparent 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
  opacity: 0; transition: opacity .2s;
}
.faq__audio.is-playing::before { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .faq__audio, .faq__audio:active { transition: none; transform: none; }
}