/* =============================================================================
   FAQ — секція 12.

   Ритм за art-direction §7: панель, липкий заголовок і колонка питань.
   Розкладка дзеркальна: питання ліворуч, заголовок ліпне праворуч. Причина —
   сусіди. 11 «Про мене» це текст ліворуч і блок праворуч, 03 «Проблеми» —
   липкий заголовок ліворуч і рядки праворуч; при прямій розкладці 12 повторює
   обидві. Дзеркало розвертає вісь: читання починається зі списку, а заголовок
   стоїть як бортовий підпис приладу.

   Активний пункт світиться номером і лівою рамкою: увімкнений канал, та сама
   мова, що на рейці й у тарифах.
   ============================================================================= */

.faq__inner {
  display: grid;
  gap: var(--space-xl);
}

/* Розкладка шапки — у base.css разом із рештою шапок секцій. Тут лишається
   тільки те, що стосується саме FAQ (див. блок 64rem нижче). */

.faq__list { border-block-start: var(--border-hairline); }

.faq__item {
  border-block-end: var(--border-hairline);
  border-inline-start: var(--border-width-hair) solid transparent;
  padding-inline-start: var(--space-md);
  transition: border-inline-start-color var(--dur-base) var(--ease-out);
}

.faq__item[data-open="true"] { border-inline-start-color: var(--accent); }

.faq__q {
  inline-size: 100%;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--space-md);
  align-items: baseline;
  padding-block: var(--row-pad);
  background: none;
  border: 0;
  text-align: start;
  cursor: pointer;
}

.faq__index {
  color: var(--text-muted);
  transition: color var(--dur-base) var(--ease-out);
}

.faq__item[data-open="true"] .faq__index { color: var(--accent); }

.faq__label {
  font-size: var(--fs-h4);
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
  transition: color var(--dur-fast) var(--ease-out);
}

.faq__q:hover .faq__label { color: var(--accent); }

/* Знак «розгорнути». Коло тримає розмір, хрестик усередині намальований
   лініями: текстовий "+" має власні метрики, тому в колі стояв трохи вище
   центру, а при повороті на 45° перекіс подвоювався. */
.faq__sign {
  flex: none;
  inline-size: var(--pill-height);
  block-size: var(--pill-height);
  display: grid;
  place-items: center;
  border: var(--border-hairline);
  border-radius: var(--radius-chip);
  color: var(--accent);
  transition:
    transform var(--dur-base) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out);
}

.faq__sign-icon {
  inline-size: var(--icon-size-sm);
  block-size: var(--icon-size-sm);
  fill: none;
  stroke: currentColor;
  stroke-width: var(--icon-stroke);
  stroke-linecap: butt;
}

.faq__item[data-open="true"] .faq__sign {
  transform: rotate(45deg);
  border-color: var(--accent);
}

.faq__a {
  display: none;
  padding-block-end: var(--row-pad);
  padding-inline-end: var(--space-2xl);
  color: var(--text-secondary);
  max-inline-size: var(--measure);
}

.faq__item[data-open="true"] .faq__a { display: block; }

/* Питання, якого немає в списку, — теж питання. Рядок тримає нижній край
   заголовка й закриває порожнечу під ним у правій колонці.
   Власного відступу не має: проміжок під заголовком задає сітка шапки в
   base.css, і додатковий марджин робив тут 32px там, де в решті секцій 24. */
.faq__note {
  color: var(--text-muted);
}

.faq__note-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3xs);
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
  transition: color var(--dur-fast) var(--ease-out);
}

.faq__note-link:hover { color: var(--accent); }

.faq__note-link .arrow-icon {
  inline-size: var(--icon-size-sm);
  block-size: var(--icon-size-sm);
}

@media (min-width: 64rem) {
  .faq__inner {
    grid-template-columns: repeat(var(--columns), minmax(0, 1fr));
    gap: var(--gutter);
  }
  .faq__head {
    grid-column: 8 / -1;
    grid-row: 1;
    position: sticky;
    inset-block-start: calc(var(--header-height) + var(--space-2xl));
    align-self: start;
  }
  /* Рядок задається явно обом: заголовок стоїть у розмітці першим, а сітка не
     розміщує назад — без цього список падав би в другий рядок. */
  .faq__list {
    grid-column: 1 / 7;
    grid-row: 1;
  }
}

/* ---- телефон ------------------------------------------------------------------
   Шість питань по 24px поля зверху й знизу дають 288px повітря в списку, який
   на телефоні і так іде на весь екран. Кнопка питання лишається вищою за
   поріг дотикової цілі: 16px поля + рядок 20px = 52px. */
@media not all and (min-width: 48rem) {
  .faq__inner { gap: var(--space-lg); }

  .faq__q { padding-block: var(--space-sm); }
}

@media (prefers-reduced-motion: reduce) {
  .faq__item,
  .faq__index,
  .faq__label,
  .faq__note-link,
  .faq__sign { transition: none; }
}