/* ═══════════════════════════════════════════════════════════════════════════
   Accordion
   Основа: <details>/<summary> — повністю робочий без JS (прогресивне
   покращення; JS додає режим «одна відкрита», анімацію, aria-expanded).
   Стани: collapsed · expanded · hover · focus-visible · disabled-секція
   Елементи: accordion__item · accordion__summary · accordion__heading ·
             accordion__content
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Container: список із розділювачами ─────────────────────────────────── */
.accordion {
  font-family: var(--uris-font-family-body);
  color: var(--uris-color-semantic-text);
  border-block-start: 1px solid var(--uris-color-semantic-border);
  -webkit-font-smoothing: antialiased;
}

.accordion__item {
  border-block-end: 1px solid var(--uris-color-semantic-border);
}

/* ── Summary: кнопка розкриття ──────────────────────────────────────────── */
.accordion__summary {
  display: flex;
  align-items: center;
  gap: var(--uris-spacing-3);
  padding: var(--uris-spacing-4) var(--uris-spacing-3);
  cursor: pointer;
  list-style: none;
  transition: background-color var(--uris-duration-fast) var(--uris-ease-default);
}

/* нативний трикутник-маркер: прибрати в усіх движках */
.accordion__summary::-webkit-details-marker { display: none; }
.accordion__summary::marker { content: none; }

/* ── Heading: семантичний заголовок усередині summary ───────────────────────
   Типографіка свідомо НЕ заголовкова (e-Ukraine, base, medium):
   це рядок розкриття списку, а не заголовок сторінкового рівня */
.accordion__heading {
  flex-grow: 1;
  min-width: 0;
  margin: 0;
  font-family: var(--uris-font-family-body);
  font-size: var(--uris-text-base-size);
  line-height: var(--uris-text-base-line);
  font-weight: var(--uris-font-weight-medium);
  color: inherit;
}

/* ── Chevron: mask-патерн (форма з SVG-альфи, колір — токен) ────────────── */
.accordion__summary::after {
  content: "";
  flex-shrink: 0;
  width: var(--uris-component-icon-size-md);
  height: var(--uris-component-icon-size-md);
  background-color: var(--uris-color-semantic-text-muted);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5 7.5l5 5 5-5' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5 7.5l5 5 5-5' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 20px 20px;
  mask-size: 20px 20px;
  transition: transform var(--uris-duration-normal) var(--uris-ease-default);
}

.accordion__item[open] > .accordion__summary::after {
  transform: rotate(180deg);
}

/* ── Hover ──────────────────────────────────────────────────────────────── */
.accordion__item:not(.accordion__item--disabled) > .accordion__summary:hover {
  background-color: var(--uris-color-semantic-surface-muted);
}

.accordion__item:not(.accordion__item--disabled) > .accordion__summary:hover::after {
  background-color: var(--uris-color-semantic-text);
}

/* ── Focus-visible: кільце всередину (елементи списку впритул) ──────────── */
.accordion__summary:focus-visible {
  outline: 2px solid var(--uris-color-semantic-focus-ring);
  outline-offset: -2px;
}

/* ── Content ────────────────────────────────────────────────────────────── */
.accordion__content {
  padding: 0 var(--uris-spacing-3) var(--uris-spacing-5);
  font-size: var(--uris-text-base-size);
  line-height: var(--uris-text-base-line);
  color: var(--uris-color-semantic-secondary);
}

.accordion__content > :first-child { margin-block-start: 0; }
.accordion__content > :last-child  { margin-block-end: 0; }
.accordion__content p { margin-block: 0 var(--uris-spacing-3); }

/* ── Disabled section ───────────────────────────────────────────────────── */
.accordion__item--disabled > .accordion__summary {
  cursor: not-allowed;
  color: var(--uris-color-semantic-text-muted);
}

.accordion__item--disabled > .accordion__summary::after {
  background-color: var(--uris-color-semantic-border);
}

/* ── Reduced motion ─────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .accordion__summary,
  .accordion__summary::after {
    transition: none;
  }
}