.faq {
  padding-top: clamp(6.25rem, 5rem + 6.25vw, 12.5rem);
}

.faq__head {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-m);
}

.faq__deco {
  position: absolute;
  width: clamp(3rem, 2.475rem + 2.625vw, 5.625rem);
  height: clamp(4.25rem, 3.5rem + 3.75vw, 8rem);
  flex-shrink: 0;
  bottom: 0;
  right: clamp(0.625rem, -0.85rem + 7.375vw, 8rem);
}

.faq__list {
  margin-top: clamp(0rem, -0.25rem + 1.25vw, 1.25rem);
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.faq__item {
  border-radius: clamp(1rem, 0.9rem + 0.5vw, 1.5rem);
  background-color: var(--color-surface);
  overflow: hidden;
}

.faq__item.is-open {
  background-color: var(--color-primary);
  color: var(--color-text-invert);
}

.faq__question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-s);
  padding: clamp(1rem, 0.925rem + 0.375vw, 1.375rem)
    clamp(1rem, 0.575rem + 2.125vw, 3.125rem)
    clamp(1rem, 0.925rem + 0.375vw, 1.375rem)
    clamp(1rem, 0.825rem + 0.875vw, 1.875rem);
  font-family: var(--font-body-semibold);
  font-size: clamp(0.875rem, 0.55rem + 1.625vw, 2.5rem);
  line-height: 105%;
  text-align: left;
  color: inherit;
}

.faq__item-deco {
  flex-shrink: 0;
  width: clamp(1.6875rem, 1.1rem + 2.9375vw, 4.625rem);
  height: clamp(1.5625rem, 1rem + 2.8125vw, 4.375rem);
}

.faq__answer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.4s ease;
}

.faq__item.is-open .faq__answer {
  grid-template-rows: 1fr;
}

.faq__answer-inner {
  overflow: hidden;
  /* Safari не перемальовує вміст під час transition grid-template-rows без contain: layout */
  contain: layout;
  padding: 0 clamp(1rem, 0.8rem + 1vw, 1.75rem);
  opacity: 0;
  transition: opacity 0.4s ease;
}

.faq__item.is-open .faq__answer-inner {
  opacity: 1;
}

.faq__answer-inner > :last-child {
  padding-bottom: clamp(0.875rem, 0.75rem + 0.625vw, 1.5rem);
}

.faq__answer p {
  font-family: var(--font-body-regular);
  font-size: clamp(0.8125rem, 0.6625rem + 0.75vw, 1.5625rem);
  line-height: clamp(1.125rem, 0.925rem + 1vw, 2.125rem);
}

.faq__answer p + p {
  margin-top: 0.75em;
}

.faq__all {
  margin-top: clamp(1.875rem, 1.625rem + 1.25vw, 3.125rem);
}

@media (min-width: 961px) {
  .faq__answer {
    max-width: 75rem;
  }
  .faq__deco {
    bottom: calc(var(--space-s) * -1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .faq__answer,
  .faq__answer-inner {
    transition: none;
  }
}

/* "до всіх питань" (js/modules/faq.js): extra questions fade in when shown,
   and the arrow flips while the full list is open. */
.faq__item[hidden] {
  display: none;
}

.faq__all .btn--link__arrow {
  transition: transform 0.3s ease;
}

.faq__all.is-expanded .btn--link__arrow {
  transform: rotate(180deg);
}

/* Keep the flip on hover (animations.css nudges the arrow on .btn--link:hover). */
.faq__all.is-expanded:hover .btn--link__arrow {
  transform: rotate(180deg) translateX(4px);
}

@media (prefers-reduced-motion: no-preference) {
  .faq__item.is-revealed {
    animation: faq-item-reveal 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
  }

  .faq__item.is-revealed:nth-child(n + 6) {
    animation-delay: 60ms;
  }

  .faq__item.is-revealed:nth-child(n + 7) {
    animation-delay: 120ms;
  }
}

@keyframes faq-item-reveal {
  from {
    opacity: 0;
    transform: translate3d(0, 10px, 0);
  }
}