/* ==========================================================================
   sections.css — стили конкретных секций лендинга.
   Подключается последним: tokens → base → components → sections.
   Правило: любые цвета и размеры — только через var(--…) из tokens.css.
   ========================================================================== */

/* ==========================================================================
   #hero — первый экран
   ========================================================================== */

.hero {
  position: relative;
  padding-block: clamp(var(--space-2xl), 9vw, var(--space-4xl));
  overflow: hidden;
}

/* Фоновое фото первого экрана */
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% 50%;   /* пара смещена вправо, под правую колонку */
  opacity: var(--hero-photo-opacity);
}

/* Затемнение поверх фото: слева, где заголовок, фон почти чистый */
.hero__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to bottom, var(--bg), transparent 22%, transparent 78%, var(--bg)),
    linear-gradient(to right, var(--hero-scrim-a) 30%, var(--hero-scrim-b));
}

.hero__grid {
  position: relative;
  z-index: var(--z-base);
  display: grid;
  gap: clamp(var(--space-2xl), 7vw, var(--space-3xl));
  align-items: center;
}

/* min-width: auto у грид-элементов раздувает трек шире контейнера */
.hero__grid > * { min-width: 0; }

.hero__title {
  max-width: 14ch;
  margin-bottom: var(--space-md);
}

.hero__lead {
  max-width: 46ch;
  color: var(--text-soft);
  font-size: var(--fs-lead);
  line-height: var(--lh-snug);
}

/* Три преимущества в ряд */
.hero__perks {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-md);
  margin-block: clamp(var(--space-xl), 4vw, var(--space-2xl));
}

.perk {
  padding-top: var(--space-sm);
  border-top: var(--border-hair) solid var(--gold);
}

.perk__ph {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  margin-bottom: var(--space-sm);
  border-radius: var(--radius-md);
}

.perk__title {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
}

.perk__text {
  margin-top: var(--space-3xs);
  font-size: var(--fs-xs);
  line-height: var(--lh-snug);
  color: var(--text-mute);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

.hero__trust {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2xs);
  margin-top: var(--space-md);
  max-width: 44ch;
  font-size: var(--fs-xs);
  line-height: var(--lh-snug);
  color: var(--text-mute);
}

.hero__trust .icon { color: var(--gold); margin-top: var(--space-3xs); }

/* ---------- Правая колонка: окна Zoom + свидетельство ---------- */
.hero__visual {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-lg);
}

/* Две плитки в стиле окон Zoom, соединённые пунктиром */
.zoom-pair {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-2xs);
  width: 100%;
  max-width: var(--container-narrow);
}

.zoom-tile {
  padding: var(--space-2xs);
  background-color: var(--surface);
  border: var(--border-hair) solid var(--line);
  border-radius: var(--radius-md);
}

.zoom-tile__screen {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: var(--radius-sm);
  background-color: var(--glass);
  border: var(--border-hair) solid var(--line);
}

.zoom-tile__city {
  display: block;
  margin-top: var(--space-2xs);
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--text-mute);
  text-align: center;
}

.zoom-link {
  width: clamp(var(--space-lg), 6vw, var(--space-2xl));
  height: var(--border-hair);
  background-image: linear-gradient(
    to right,
    var(--line-2) 0 var(--space-2xs),
    transparent var(--space-2xs) var(--space-sm)
  );
  background-size: var(--space-sm) var(--border-hair);
  background-repeat: repeat-x;
}

/* ---------- Карточка свидетельства — единственный светлый объект ----------
   Это заполненный образец записи, а не пустой бланк. */
/* Печать выходит за правую рамку на --seal-out: на узком экране карточку
   ужимаем ровно на эту величину, иначе печать срежет overflow у .hero */
.cert-figure {
  margin: 0;
  width: 100%;
  max-width: min(var(--cert-w), calc(100% - var(--seal-out)));
}

.cert {
  position: relative;
  display: flex;
  width: 100%;
  aspect-ratio: 5 / 7;
  padding: var(--space-2xs);
  background-color: var(--paper);
  color: var(--paper-ink);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-paper);
  transform: rotate(-2deg);
}

/* Гравюрная рамка: тонкие косые линии по периметру */
.cert__engrave {
  flex: 1 1 auto;
  display: flex;
  padding: var(--space-2xs);
  border: var(--border-hair) solid var(--paper-line);
  border-radius: var(--radius-sm);
  background-image: repeating-linear-gradient(
    45deg,
    var(--paper-line) 0 var(--border-hair),
    transparent var(--border-hair) var(--engrave-step)
  );
}

/* Три группы — шапка, поля, подпись — распределяются по высоте:
   свободное место уходит в поля документа, а не в пустоту снизу. */
.cert__inner {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(var(--space-sm), 3.5vw, var(--space-lg));
  background-color: var(--paper);
  border: var(--border-hair) solid var(--paper-line);
  border-radius: var(--radius-xs);
}

/* Шапка: штат слева, номер записи справа */
.cert__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2xs);
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--paper-soft);
}

.cert__state,
.cert__record { white-space: nowrap; }

.cert__title {
  margin-top: var(--space-2xs);
  font-family: var(--font-display);
  font-size: var(--fs-cert-title);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-heading);
  text-align: center;
  color: var(--paper-ink);
}

.cert__rule {
  height: var(--border-hair);
  margin-block: var(--space-sm);
  background-color: var(--paper-line);
}

/* Отступы между полями на треть меньше прежних */
.cert__rows {
  display: grid;
  gap: var(--space-2xs);
}

.cert__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-sm);
  padding-bottom: var(--space-3xs);
  border-bottom: var(--border-hair) solid var(--paper-line);
}

.cert__label {
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--paper-soft);
}

/* Значения крупнее подписей: Cormorant 500 */
.cert__value {
  font-family: var(--font-display);
  font-size: var(--fs-cert-value);
  font-weight: var(--fw-medium);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-wide);
  text-align: right;
  color: var(--paper-ink);
}

.cert__foot { margin-top: 0; }

.cert__sign { display: block; }

/* Рукописный росчерк над линией подписи */
.cert__autograph {
  width: var(--autograph-w);
  height: auto;
  margin-bottom: calc(-1 * var(--space-3xs));
  fill: none;
  stroke: currentColor;
  stroke-width: var(--stroke-icon);
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  color: var(--paper-ink);
}

.cert__sign-line {
  display: block;
  height: var(--border-hair);
  margin-bottom: var(--space-3xs);
  background-color: var(--paper-line);
}

.cert__sign-label {
  display: block;
  max-width: 84%;   /* дальше начинается печать — текст под неё не заводим */
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  line-height: var(--lh-snug);
  color: var(--paper-soft);
}

/* Золотая печать: на треть выходит за правую рамку и заходит на подпись */
.seal {
  position: absolute;
  right: calc(-1 * var(--seal-out));
  bottom: var(--space-lg);
  z-index: var(--z-base);
  width: var(--seal-size);
  height: auto;
  color: var(--gold);
  transform: rotate(var(--seal-tilt));
}

.seal__ring {
  fill: none;
  stroke: currentColor;
  stroke-width: var(--stroke-icon);
}

.seal__disc {
  fill: var(--paper);
  stroke: none;
}

.seal__text {
  fill: currentColor;
  stroke: none;
  font-family: var(--font-mono);
  font-size: var(--fs-seal);
  letter-spacing: var(--ls-seal);
  text-transform: uppercase;
}

.seal__mark {
  fill: none;
  stroke: currentColor;
  stroke-width: var(--stroke-icon);
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ==========================================================================
   #audience — кому мы помогаем
   ========================================================================== */

.audience__grid {
  display: grid;
  gap: var(--space-md);
  grid-template-columns: 1fr;
}

/* Картинка тянется на всю ширину карточки, поэтому карточка
   без внутреннего отступа — текст отбивает .audience__body. */
.audience__card {
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.audience__ph {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-bottom: var(--border-hair) solid var(--line);
}

.audience__body { padding: clamp(var(--space-md), 2vw, var(--space-lg)); }

.audience__card .card__title { font-size: var(--fs-h4); }

.audience__card .card__text {
  margin-top: var(--space-2xs);
  font-size: var(--fs-sm);
}

/* ==========================================================================
   #legal — 100% легальность
   ========================================================================== */

/* Верх блока: слева заголовок, справа фотокарточка, по нижнему краю */
.legal__top {
  display: grid;
  gap: clamp(var(--space-xl), 4vw, var(--space-2xl));
  align-items: end;
  margin-bottom: clamp(var(--space-xl), 5vw, var(--space-3xl));
}

.legal__head { margin-bottom: 0; }

.legal__figure {
  margin: 0;
  width: 100%;
  max-width: var(--legal-photo-w);
  justify-self: start;
}

/* Обёртка нужна, чтобы наложить градиент поверх картинки */
.legal__frame {
  position: relative;
  display: block;
  overflow: hidden;
  border: var(--border-hair) solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-photo);
}

.legal__photo {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  filter: var(--photo-tone);
}

/* Растворяем нижний и правый край в фоне страницы, чтобы карточка
   не выглядела вырезанной и наклеенной */
.legal__frame::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: var(--photo-scrim-opacity);
  background-image:
    linear-gradient(to top, var(--bg), transparent 45%),
    linear-gradient(to left, var(--bg), transparent 45%);
}

.legal__grid {
  position: relative;
  z-index: var(--z-base);
  display: grid;
  gap: var(--space-xl);
  grid-template-columns: 1fr;
}

.legal__item { padding-left: var(--space-md); border-left: var(--border-hair) solid var(--gold); }

.legal__item-title {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-heading);
  margin-bottom: var(--space-2xs);
}

.legal__item-text { color: var(--text-soft); }

.legal__item .badge { margin-top: var(--space-md); }

/* ==========================================================================
   Бегущая строка между легальностью и процессом
   ========================================================================== */

.marquee-section { background-color: var(--bg); }

/* ==========================================================================
   #process — простой путь к свадьбе
   ========================================================================== */

.timeline {
  position: relative;
  display: grid;
  gap: clamp(var(--space-xl), 5vw, var(--space-3xl));
}

.timeline__rail {
  position: absolute;
  top: var(--space-2xs);
  bottom: var(--space-2xs);
  left: var(--step-col);
  width: var(--border-hair);
  background-color: var(--line);
}

.timeline__fill {
  position: absolute;
  inset: 0;
  background-color: var(--gold);
  transform-origin: top center;
}

.step {
  display: grid;
  grid-template-columns: var(--step-col) minmax(0, 1fr);
  align-items: start;
}

.step__num {
  font-family: var(--font-mono);
  font-size: var(--fs-step);
  font-weight: var(--fw-medium);
  line-height: 1;
  color: var(--gold);
  padding-right: var(--space-sm);
}

.step__body { padding-left: clamp(var(--space-md), 3vw, var(--space-xl)); }

.step__title {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-heading);
  margin-bottom: var(--space-2xs);
}

.step__text {
  color: var(--text-soft);
  max-width: 56ch;
}

.step__pill { margin-top: var(--space-sm); }

/* ==========================================================================
   #pricing — тарифы
   ========================================================================== */

.pricing__grid {
  display: grid;
  gap: var(--space-lg);
  grid-template-columns: 1fr;
  align-items: start;
}

.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  padding: clamp(var(--space-lg), 4vw, var(--space-xl));
}

.plan__badge {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  white-space: nowrap;
}

.plan__name {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-heading);
}

.plan__price {
  margin-top: var(--space-2xs);
  font-family: var(--font-display);
  font-size: var(--fs-price);
  font-weight: var(--fw-semibold);
  line-height: 1;
  letter-spacing: var(--ls-tight);
}

.plan--featured .plan__price { color: var(--gold); }

.plan__note-top {
  margin-top: var(--space-xs);
  max-width: 34ch;
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
  color: var(--text-soft);
}

.plan__list {
  display: grid;
  gap: var(--space-xs);
  margin: 0;
  padding: 0;
  list-style: none;
}

.plan__list li {
  display: grid;
  grid-template-columns: var(--icon-sm) minmax(0, 1fr);
  gap: var(--space-2xs);
  align-items: start;
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
  color: var(--text-soft);
}

.plan__list .icon {
  width: var(--icon-sm);
  height: var(--icon-sm);
  margin-top: var(--space-3xs);
  color: var(--green);
}

.plan__foot { margin-top: auto; }

.plan__notes {
  margin-top: var(--space-md);
  display: grid;
  gap: var(--space-3xs);
  font-size: var(--fs-xs);
  line-height: var(--lh-snug);
  color: var(--text-mute);
}

/* ==========================================================================
   #founder — личная история
   ========================================================================== */

.founder__grid {
  display: grid;
  gap: clamp(var(--space-xl), 6vw, var(--space-3xl));
  grid-template-columns: 1fr;
  align-items: start;
}

.founder__media {
  display: grid;
  gap: var(--space-md);
}

.founder__portrait { max-width: var(--portrait-w); }

.founder__quote {
  margin: 0 0 var(--space-lg);
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-quote);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  color: var(--text);
}

.founder__text {
  display: grid;
  gap: var(--space-md);
  color: var(--text-soft);
  max-width: 58ch;
}

.founder__sign {
  margin-top: var(--space-lg);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-wide);
  color: var(--text-mute);
}

/* ==========================================================================
   #faq — частые вопросы
   ========================================================================== */

.faq__list { margin-top: var(--space-xl); }

/* ==========================================================================
   Финальный CTA — единственный светлый блок страницы кроме свидетельства
   ========================================================================== */

.cta { padding-block: var(--section-y-sm); }

.cta__panel {
  display: grid;
  gap: clamp(var(--space-xl), 5vw, var(--space-3xl));
  align-items: center;
  max-width: var(--container-cta);
  margin-inline: auto;
  padding: clamp(var(--space-lg), 5vw, var(--space-3xl));
  background-color: var(--paper);
  color: var(--paper-ink);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-cta);
}

.cta__title {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-title);
  letter-spacing: var(--ls-tight);
  color: var(--paper-ink);
  max-width: 16ch;
}

.cta__lead {
  margin-top: var(--space-sm);
  max-width: 38ch;
  font-size: var(--fs-cta-lead);
  line-height: var(--lh-snug);
  color: var(--paper-soft);
}

.cta__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-md);
  margin-top: clamp(var(--space-lg), 3vw, var(--space-xl));
}

/* Вторичное действие — текстовая ссылка, не вторая кнопка */
.cta__alt {
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--paper-soft);
  text-decoration: underline;
  text-decoration-color: var(--paper-line-2);
  text-underline-offset: var(--underline-offset);
  transition: color var(--dur-fast) var(--ease),
              text-decoration-color var(--dur-fast) var(--ease);
}

.cta__alt:hover {
  color: var(--paper-ink);
  text-decoration-color: currentColor;
}

.cta__list {
  display: grid;
  gap: var(--space-md);
  margin: 0;
  padding: 0;
  list-style: none;
}

.cta__list li {
  display: grid;
  grid-template-columns: var(--icon-sm) minmax(0, 1fr);
  gap: var(--space-2xs);
  align-items: start;
  font-size: var(--fs-body);
  line-height: var(--lh-snug);
  color: var(--paper-ink);
}

/* --gold на бумаге даёт 2.26:1 и выцветает — тот же тон, но притемнённый */
.cta__list .icon {
  margin-top: var(--space-3xs);
  color: var(--gold-ink);
}

/* ==========================================================================
   Служебные страницы: privacy / offer / 404
   ========================================================================== */

.page-simple {
  padding-block: var(--section-y-sm);
  scroll-margin-top: var(--anchor-offset);
}

.page-simple__title {
  font-size: var(--fs-h2);
  margin-bottom: var(--space-md);
}

.page-simple__text {
  color: var(--text-soft);
  font-size: var(--fs-lead);
  line-height: var(--lh-body);
}

.page-simple__actions {
  margin-top: var(--space-xl);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
}

/* ==========================================================================
   Адаптив
   ========================================================================== */

/* На узком экране три картинки 4:3 подряд отодвигают CTA за экран:
   раскладываем преимущество в строку с маленькой квадратной картинкой. */
/* На телефоне 32px внутренних полей съедают ширину строки:
   в карточках тарифов и в плашке CTA режем их вдвое, до 16px. */
@media (max-width: 599px) {
  .plan       { padding: var(--space-sm); }
  .cta__panel { padding: var(--space-sm); }
}

/* Колонки сложились — фото во всю ширину контейнера, но не выше 320px */
@media (max-width: 899px) {
  .legal__figure { max-width: 100%; }

  .legal__photo {
    aspect-ratio: auto;
    height: var(--legal-photo-h-sm);
    object-position: var(--legal-photo-focus);
  }
}

@media (max-width: 479px) {
  /* Крупная кнопка с padding 40px по бокам не влезает в строку — делаем её
     во всю ширину, тогда подпись остаётся в одну строку. */
  .cta__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .cta__alt { text-align: center; }

  .btn--xl { padding: var(--space-sm) var(--space-lg); }

  .hero__perks {
    grid-template-columns: 1fr;
    gap: var(--space-sm);
  }

  .perk {
    display: grid;
    grid-template-columns: var(--perk-ph-sm) minmax(0, 1fr);
    column-gap: var(--space-sm);
    align-content: center;
  }

  .perk__ph {
    grid-column: 1;
    grid-row: 1 / span 2;
    align-self: center;
    margin-bottom: 0;
    aspect-ratio: 1 / 1;
  }

  /* в маленьком квадрате подпись не помещается с обычным отступом */
  .perk__ph::after { padding: var(--space-3xs); }

  .perk__title,
  .perk__text { grid-column: 2; }
}

@media (min-width: 600px) {
  .audience__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pricing__grid  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 900px) {
  .cta__panel { grid-template-columns: 55fr 45fr; }

  .legal__top { grid-template-columns: 60fr 40fr; }
  .legal__figure { justify-self: end; }

  .legal__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-lg);
  }

  /* линии разделяют пункты, а не открывают первый */
  .legal__item:first-child {
    padding-left: 0;
    border-left: 0;
  }

  .founder__grid { grid-template-columns: 5fr 7fr; }
}

@media (min-width: 1000px) {
  .hero__grid { grid-template-columns: 55fr 45fr; }
  .audience__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}