/* ============================================================
   components.css — кнопки, фишки, карточки, аватары, модалки,
   аккордеон, формы. Переиспользуется на всех страницах.
   ============================================================ */

/* ---------- Кнопки ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 52px;
  padding: .8rem 1.7rem;
  border: 0;
  border-radius: var(--radius-pill);
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  transition: transform .2s var(--ease-out), background .2s, box-shadow .2s;
}
.btn:active { transform: scale(.97); }

.btn--primary {
  background: var(--c-accent);
  color: #fff;
  box-shadow: 0 8px 22px rgba(192, 85, 16, .30);
}
.btn--primary:hover {
  background: var(--c-accent-dk);
  color: #fff;
  transform: translateY(-2px);
}

/* обводка --c-line (1.23 к фону) делала кнопку похожей на простую надпись */
.btn--ghost {
  background: transparent;
  color: var(--c-ink);
  box-shadow: inset 0 0 0 2px var(--c-line-dk);
}
.btn--ghost:hover { box-shadow: inset 0 0 0 2px var(--c-ink); color: var(--c-ink); }

.btn--small { min-height: 44px; padding: .5rem 1.15rem; font-size: .92rem; }
.btn--wide { width: 100%; }

/* ---------- Модалка (нативный dialog) ---------- */
.modal {
  border: 0;
  border-radius: var(--radius-card);
  padding: 0;
  width: min(92vw, 560px);
  max-height: 86dvh;
  overflow-y: auto;          /* длинная биография прокручивается внутри окна */
  margin: auto;              /* окно по центру экрана: сброс `* { margin: 0 }`
                                иначе перебивает браузерный margin у <dialog> */
  background: var(--c-surface);
  color: var(--c-ink);
  box-shadow: var(--shadow-pop);
}
.modal::backdrop { background: rgba(52, 52, 52, .55); backdrop-filter: blur(3px); }
.modal__in { padding: clamp(1.4rem, 4vw, 2.2rem); }
/* крестик остаётся на виду, пока прокручивается длинная биография */
.modal__close {
  position: sticky;
  top: .9rem;
  float: right;
  z-index: 2;
  width: 44px; height: 44px;
  border: 0;
  border-radius: 50%;
  background: var(--c-bg-alt);
  /* белый ореол: прокручиваемый текст не наезжает на кнопку */
  box-shadow: 0 0 0 7px var(--c-surface);
  font-size: 1.15rem;
  line-height: 1;
}
.modal__close:hover { background: var(--c-sun-soft); }
.modal__head { display: flex; gap: 1rem; align-items: center; margin-bottom: 1.1rem; padding-right: 2.5rem; }
.modal__topic {
  margin: 1.1rem 0;
  padding: .9rem 1.1rem;
  background: var(--c-sun-soft);
  border-radius: 14px;
  font-weight: 600;
}
.modal__bio { list-style: none; padding: 0; display: grid; gap: .5rem; color: var(--c-ink-soft); }
.modal__bio li { padding-left: 1.2rem; position: relative; }
.modal__bio li::before {
  content: '';
  position: absolute;
  left: 0; top: .58em;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--c-sage-ink);
}

/* ---------- Аккордеон (details) ---------- */
.faq-item {
  background: var(--c-surface);
  border-radius: 18px;
  box-shadow: var(--shadow-card);
}
.faq-item + .faq-item { margin-top: .8rem; }
.faq-item summary {
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 1.1rem 1.3rem;
  min-height: 48px;
  font-weight: 700;
  cursor: pointer;
  border-radius: 18px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '+';
  flex: none;
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--c-bg-alt);
  font-size: 1.25rem;
  font-weight: 500;
  transition: transform .25s var(--ease-out), background .25s;
}
.faq-item[open] summary::after { transform: rotate(45deg); background: var(--c-sun); }
.faq-item__body { padding: 0 1.3rem 1.2rem; color: var(--c-ink-soft); max-width: 60ch; }
/* ссылка внутри ответа — строчная, высотой всего в строку текста.
   Вертикальные отступы на строчном элементе не двигают вёрстку,
   но увеличивают площадь нажатия пальцем вдвое */
.faq-item__body a { padding-block: .55rem; }

/* ---------- Видео-приглашение ----------
   Файл не грузится, пока человек не нажал: preload="none" + свой постер.
   Кнопку поверх ставит js/video.js — без него остаются кнопки браузера */
.videobox { margin: 0; }
/* вертикальный кадр 9:16 быстро перерастает и экран, и соседнюю колонку —
   во всю ширину он только на телефоне */
@media (min-width: 520px) { .videobox { max-width: 21rem; } }

.videobox__frame {
  position: relative;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  border-radius: 26px;
  background: var(--c-bg-alt);
  box-shadow: var(--shadow-card);
}

.videobox__player {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* кнопка занимает весь кадр — промахнуться пальцем невозможно,
   а сама надпись с кругом сидит внизу, чтобы не закрывать лицо на постере */
.videobox__play {
  position: absolute;
  inset: 0;
  display: grid;
  align-content: end;
  justify-content: center;
  justify-items: center;
  gap: .7rem;
  width: 100%;
  padding: 0 1rem 1.5rem;
  border: 0;
  cursor: pointer;
  font: inherit;
  font-weight: 600;
  color: #fff;
  text-shadow: 0 1px 12px rgba(52, 52, 52, .55);
  /* тень только внизу: подпись читается, лицо на постере не притемнено */
  background: linear-gradient(180deg, transparent 42%, rgba(52, 52, 52, .74));
  transition: background .25s var(--ease-out);
}
.videobox__play:hover { background: linear-gradient(180deg, rgba(52, 52, 52, .1) 30%, rgba(52, 52, 52, .7)); }
.videobox__play:focus-visible { outline: 3px solid var(--c-sun); outline-offset: -6px; }

.videobox__icon {
  width: 68px; height: 68px;
  border-radius: 50%;
  background: var(--c-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M8 5.5v13l11-6.5z'/%3E%3C/svg%3E") 54% 50% / 26px no-repeat;
  box-shadow: 0 8px 26px rgba(52, 52, 52, .3);
  transition: transform .25s var(--ease-out);
}
.videobox__play:hover .videobox__icon { transform: scale(1.07); }
@media (prefers-reduced-motion: reduce) {
  .videobox__icon, .videobox__play { transition: none; }
  .videobox__play:hover .videobox__icon { transform: none; }
}

.videobox.is-playing .videobox__play { display: none; }

.videobox__cap {
  margin-top: .9rem;
  font-size: .88rem;
  line-height: 1.45;
  color: var(--c-ink-soft);
}

/* ---------- Картинка-кружок рядом с заголовком ----------
   Только на телефоне: на широком экране заголовок и без неё
   держит строку, а картинка сбоку ломала бы ритм секций */
.h2-ico {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}
.h2-ico > span { flex: 1 1 auto; }

.head-ico {
  flex: none;
  display: block;
  width: 78px;
  height: 78px;
  margin-top: .15rem;
  border-radius: 50%;
  overflow: hidden;
  /* подложка видна, пока картинка грузится */
  background: linear-gradient(150deg, var(--c-sage-soft), var(--c-peach));
}
.head-ico img { width: 100%; height: 100%; object-fit: cover; }

@media (min-width: 900px) {
  .head-ico { display: none; }
}