/* Переменные для цветов */

.faq-page-shell {
  --faq-ink: #251e19;
  --faq-copy: #40332b;
  --faq-muted: #77706b;
  --faq-soft: #f2efed;
  --faq-border: #d8d3cf;
  --faq-accent: #a85f34;
  color: var(--faq-ink);
}

.faq-page-shell .info__container {
  max-width: 82rem;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.faq-page {
  max-width: 75rem;
  margin: 0 auto;
  padding-bottom: clamp(4rem, 7vw, 7rem);
}

.faq-page .breadcrumbs {
  margin-bottom: 0;
}

.faq-page .breadcrumbs__container {
  padding-right: 0;
  padding-left: 0;
}

.faq-page__hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(20rem, 0.8fr);
  gap: clamp(3rem, 8vw, 8rem);
  align-items: end;
  padding: clamp(3.5rem, 7vw, 6.5rem) 0 clamp(3rem, 6vw, 5rem);
}

.faq-page h1,
.faq-page h2,
.faq-page p {
  margin-top: 0;
}

.faq-page h1,
.faq-page h2 {
  color: var(--faq-ink);
}

.faq-page h1 {
  max-width: 10ch;
  margin-bottom: 0;
  font-size: 3.5rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: normal;
}

.faq-page__hero p {
  max-width: 34rem;
  margin-bottom: 0.3rem;
  color: var(--faq-copy);
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  line-height: 1.5;
}

.faq-page__groups {
  border-top: 0.0625rem solid var(--faq-ink);
}

.faq-page__group {
  display: grid;
  grid-template-columns: minmax(15rem, 0.36fr) minmax(0, 0.64fr);
  gap: clamp(2rem, 6vw, 6rem);
  padding: clamp(3rem, 6vw, 5rem) 0;
}

.faq-page__group + .faq-page__group {
  border-top: 0.0625rem solid var(--faq-border);
}

.faq-page__group > h2 {
  align-self: start;
  position: sticky;
  top: 6rem;
  max-width: 13ch;
  margin-bottom: 0;
  font-size: clamp(1.75rem, 2.3vw, 2rem);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.025em;
}

.faq-page__list {
  border-top: 0.0625rem solid var(--faq-border);
}

.faq-page__list details {
  border-bottom: 0.0625rem solid var(--faq-border);
}

.faq-page__list summary {
  display: flex;
  gap: 1.5rem;
  align-items: center;
  justify-content: space-between;
  min-height: 5.25rem;
  padding: 1.35rem 0;
  color: var(--faq-ink);
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.35;
  cursor: pointer;
  list-style: none;
}

.faq-page__list summary::-webkit-details-marker {
  display: none;
}

.faq-page__list summary > span {
  position: relative;
  flex: 0 0 1.25rem;
  width: 1.25rem;
  height: 1.25rem;
}

.faq-page__list summary > span::before,
.faq-page__list summary > span::after {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  background-color: currentColor;
  transition: opacity 0.2s ease 0s;
}

.faq-page__list summary > span::before {
  width: 1rem;
  height: 1rem;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.91633 8.93319e-05C7.69546 0.00332621 7.48491 0.0941158 7.33094 0.252509C7.17697 0.410902 7.09218 0.623942 7.0952 0.844816V7.09482H0.845202C0.734775 7.09325 0.62514 7.11366 0.522666 7.15483C0.420193 7.19601 0.326925 7.25715 0.248284 7.33468C0.169642 7.41222 0.107195 7.50461 0.0645723 7.60649C0.0219492 7.70837 0 7.81771 0 7.92815C0 8.03859 0.0219492 8.14792 0.0645723 8.2498C0.107195 8.35169 0.169642 8.44408 0.248284 8.52162C0.326925 8.59915 0.420193 8.66029 0.522666 8.70147C0.62514 8.74264 0.734775 8.76304 0.845202 8.76148H7.0952V15.0115C7.09364 15.1219 7.11404 15.2315 7.15522 15.334C7.1964 15.4365 7.25753 15.5298 7.33507 15.6084C7.41261 15.687 7.505 15.7495 7.60688 15.7921C7.70876 15.8347 7.8181 15.8567 7.92854 15.8567C8.03897 15.8567 8.14831 15.8347 8.25019 15.7921C8.35207 15.7495 8.44447 15.687 8.522 15.6084C8.59954 15.5298 8.66067 15.4365 8.70185 15.334C8.74303 15.2315 8.76343 15.1219 8.76187 15.0115L8.76187 8.76148H15.0119C15.1223 8.76304 15.2319 8.74264 15.3344 8.70147C15.4369 8.66029 15.5301 8.59915 15.6088 8.52162C15.6874 8.44408 15.7499 8.35169 15.7925 8.2498C15.8351 8.14792 15.8571 8.03859 15.8571 7.92815C15.8571 7.81771 15.8351 7.70837 15.7925 7.60649C15.7499 7.50461 15.6874 7.41222 15.6088 7.33468C15.5301 7.25715 15.4369 7.19601 15.3344 7.15483C15.2319 7.11366 15.1223 7.09325 15.0119 7.09482L8.76187 7.09482V0.844816C8.76339 0.733394 8.74256 0.622798 8.70059 0.519569C8.65863 0.416341 8.59639 0.322575 8.51756 0.243818C8.43873 0.165062 8.3449 0.102914 8.24163 0.0610506C8.13836 0.019187 8.02775 -0.0015421 7.91633 8.93319e-05Z' fill='black'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.91633 8.93319e-05C7.69546 0.00332621 7.48491 0.0941158 7.33094 0.252509C7.17697 0.410902 7.09218 0.623942 7.0952 0.844816V7.09482H0.845202C0.734775 7.09325 0.62514 7.11366 0.522666 7.15483C0.420193 7.19601 0.326925 7.25715 0.248284 7.33468C0.169642 7.41222 0.107195 7.50461 0.0645723 7.60649C0.0219492 7.70837 0 7.81771 0 7.92815C0 8.03859 0.0219492 8.14792 0.0645723 8.2498C0.107195 8.35169 0.169642 8.44408 0.248284 8.52162C0.326925 8.59915 0.420193 8.66029 0.522666 8.70147C0.62514 8.74264 0.734775 8.76304 0.845202 8.76148H7.0952V15.0115C7.09364 15.1219 7.11404 15.2315 7.15522 15.334C7.1964 15.4365 7.25753 15.5298 7.33507 15.6084C7.41261 15.687 7.505 15.7495 7.60688 15.7921C7.70876 15.8347 7.8181 15.8567 7.92854 15.8567C8.03897 15.8567 8.14831 15.8347 8.25019 15.7921C8.35207 15.7495 8.44447 15.687 8.522 15.6084C8.59954 15.5298 8.66067 15.4365 8.70185 15.334C8.74303 15.2315 8.76343 15.1219 8.76187 15.0115L8.76187 8.76148H15.0119C15.1223 8.76304 15.2319 8.74264 15.3344 8.70147C15.4369 8.66029 15.5301 8.59915 15.6088 8.52162C15.6874 8.44408 15.7499 8.35169 15.7925 8.2498C15.8351 8.14792 15.8571 8.03859 15.8571 7.92815C15.8571 7.81771 15.8351 7.70837 15.7925 7.60649C15.7499 7.50461 15.6874 7.41222 15.6088 7.33468C15.5301 7.25715 15.4369 7.19601 15.3344 7.15483C15.2319 7.11366 15.1223 7.09325 15.0119 7.09482L8.76187 7.09482V0.844816C8.76339 0.733394 8.74256 0.622798 8.70059 0.519569C8.65863 0.416341 8.59639 0.322575 8.51756 0.243818C8.43873 0.165062 8.3449 0.102914 8.24163 0.0610506C8.13836 0.019187 8.02775 -0.0015421 7.91633 8.93319e-05Z' fill='black'/%3E%3C/svg%3E");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

.faq-page__list summary > span::after {
  width: 1rem;
  height: 0.125rem;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='16' height='2' viewBox='0 0 16 2' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.845202 8.33409e-05C0.734775 -0.00147837 0.62514 0.0189223 0.522666 0.0601004C0.420193 0.101279 0.326925 0.162413 0.248284 0.23995C0.169642 0.317487 0.107195 0.40988 0.0645723 0.511761C0.0219492 0.613642 0 0.722979 0 0.833417C0 0.943854 0.0219492 1.05319 0.0645723 1.15507C0.107195 1.25695 0.169642 1.34935 0.248284 1.42688C0.326925 1.50442 0.420193 1.56555 0.522666 1.60673C0.62514 1.64791 0.734775 1.66831 0.845202 1.66675H15.0119C15.1223 1.66831 15.2319 1.64791 15.3344 1.60673C15.4369 1.56555 15.5301 1.50442 15.6088 1.42688C15.6874 1.34935 15.7499 1.25695 15.7925 1.15507C15.8351 1.05319 15.8571 0.943854 15.8571 0.833417C15.8571 0.722979 15.8351 0.613642 15.7925 0.511761C15.7499 0.40988 15.6874 0.317487 15.6088 0.23995C15.5301 0.162413 15.4369 0.101279 15.3344 0.0601004C15.2319 0.0189223 15.1223 -0.00147837 15.0119 8.33409e-05H0.845202Z' fill='black'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg width='16' height='2' viewBox='0 0 16 2' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.845202 8.33409e-05C0.734775 -0.00147837 0.62514 0.0189223 0.522666 0.0601004C0.420193 0.101279 0.326925 0.162413 0.248284 0.23995C0.169642 0.317487 0.107195 0.40988 0.0645723 0.511761C0.0219492 0.613642 0 0.722979 0 0.833417C0 0.943854 0.0219492 1.05319 0.0645723 1.15507C0.107195 1.25695 0.169642 1.34935 0.248284 1.42688C0.326925 1.50442 0.420193 1.56555 0.522666 1.60673C0.62514 1.64791 0.734775 1.66831 0.845202 1.66675H15.0119C15.1223 1.66831 15.2319 1.64791 15.3344 1.60673C15.4369 1.56555 15.5301 1.50442 15.6088 1.42688C15.6874 1.34935 15.7499 1.25695 15.7925 1.15507C15.8351 1.05319 15.8571 0.943854 15.8571 0.833417C15.8571 0.722979 15.8351 0.613642 15.7925 0.511761C15.7499 0.40988 15.6874 0.317487 15.6088 0.23995C15.5301 0.162413 15.4369 0.101279 15.3344 0.0601004C15.2319 0.0189223 15.1223 -0.00147837 15.0119 8.33409e-05H0.845202Z' fill='black'/%3E%3C/svg%3E");
  -webkit-mask-size: 1rem 0.125rem;
  mask-size: 1rem 0.125rem;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  opacity: 1;
}

.faq-page__list details[open] summary > span::before {
  opacity: 0;
}

.faq-page__list details > div {
  max-width: 43rem;
  padding: 0 3.5rem 1.75rem 0;
}

.faq-page__list details p {
  margin-bottom: 0;
  color: var(--faq-copy);
  font-size: 1rem;
  line-height: 1.55;
}

.faq-page a:not(.faq-page__button) {
  color: var(--faq-accent);
  text-decoration: underline;
  text-decoration-thickness: 0.0625rem;
  text-underline-offset: 0.22rem;
}

.faq-page__help {
  display: flex !important;
  gap: 3rem;
  align-items: center;
  justify-content: space-between;
  margin-top: clamp(1rem, 3vw, 2rem);
  padding: clamp(2rem, 4vw, 3.5rem);
  border-radius: 1rem;
  background: var(--faq-soft);
}

.faq-page__help h2 {
  margin-bottom: 0.75rem;
  font-size: clamp(1.75rem, 2.3vw, 2rem);
  font-weight: 400;
  line-height: 1.1;
}

.faq-page__help p {
  max-width: 42rem;
  margin-bottom: 0;
  color: var(--faq-copy);
  line-height: 1.5;
}

.faq-page__button {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  min-height: 3.25rem;
  padding: 0.8rem 1.5rem;
  border: 0.0625rem solid var(--faq-ink);
  border-radius: 0.55rem;
  background: var(--faq-ink);
  color: #fff !important;
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
  transition: background-color 180ms ease, color 180ms ease;
}

.faq-page__button:hover {
  background: transparent;
  color: var(--faq-ink) !important;
}

.faq-page summary:focus-visible,
.faq-page a:focus-visible {
  outline: 0.125rem solid var(--faq-accent);
  outline-offset: 0.25rem;
}

/* Адаптив */
@media (max-width: 767px) {
  .faq-page {
    padding-bottom: 3rem;
  }

  .faq-page__hero {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    padding: 3rem 0;
  }

  .faq-page h1 {
    font-size: 2.75rem;
  }

  .faq-page__group {
    grid-template-columns: 1fr;
    gap: 1.75rem;
    padding: 3rem 0;
  }

  .faq-page__group > h2 {
    position: static;
    max-width: none;
  }

  .faq-page__list summary {
    min-height: 4.75rem;
    font-size: 1rem;
  }

  .faq-page__list details > div {
    padding-right: 2rem;
  }

  .faq-page__help {
    align-items: stretch;
    flex-direction: column;
    gap: 1.75rem;
    padding: 2rem 1.5rem;
  }

  .faq-page__button {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .faq-page *,
  .faq-page *::before,
  .faq-page *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}
