/* Внутренние страницы: шапка, текст, карточки, кнопки и поля формы.
   Подключается на всех страницах шаблона kptp2023 (header.php), но действует только через свои классы page-*.
   Палитра и размеры взяты с главной (css/home-story.css) и «Тарифов» (local/components/kptp/tariffs).
   Справка по классам — в шапке каждого раздела ниже. */

:root {
  --page-primary: #008AFF;
  --page-primary-hover: #0070D6;
  --page-primary-soft: #CCE8FF;
  --page-ink: #313132;
  --page-muted: #6B6B70;
  --page-surface: #F6F7F8;
  --page-border: #E3E3E3;
  --page-border-hover: #C9C9CC;
  --page-danger: #E5484D;
  --page-danger-soft: #FDE8E8;
  --page-success: #2FB24C;
  --page-success-soft: #EEFAF0;
  --page-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 8px 24px rgba(16, 24, 40, .06);

  --page-radius: 20px;          /* карточки */
  --page-radius-sm: 12px;       /* вложенные блоки, алерты */
  --page-radius-control: 8px;   /* кнопки и поля, как .hs-btn на главной */
  --page-control-height: 48px;

  --page-text-width: 760px;     /* ширина строки текстовых страниц */
  --page-gap: 24px;             /* шаг сеток и стопок */
  --page-section-gap: 64px;     /* отступ между крупными секциями */
}
@media (max-width: 767.98px) {
  :root {
    --page-gap: 16px;
    --page-section-gap: 40px;
  }
}


/* ---------- Шапка страницы ----------
   Выводится из header.php для всех внутренних страниц:
   <div class="page-head"><h1 class="page-head__title page_title">…</h1><p class="page-head__subtitle">…</p></div>
   Свойства страницы (задаются в index.php после подключения header.php):
     $APPLICATION->SetPageProperty('subtitle', 'Текст');       — подзаголовок
     $APPLICATION->SetPageProperty('hide_page_title', 'Y');    — не выводить шапку (у страницы свой h1)
     $APPLICATION->SetPageProperty('page_head_align', 'center'); — выровнять по центру */
.page-head {
  max-width: 880px;
  color: var(--page-ink);
}
.page-head--center {
  margin: 0 auto;
  text-align: center;
}
/* Отступы висят на самих h1 и подзаголовке, а не на обёртке: старые стили страниц
   (.page_title { display: none } в price/, system.auth.*) прячут h1 — пустая обёртка места не займёт */
.page-head__title {
  margin: 0;
  padding: 24px 0 40px;
  font-size: clamp(32px, 3.6vw, 48px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.02em;
  color: var(--page-ink);
  overflow-wrap: break-word;
}
.page-head--with-subtitle .page-head__title { padding-bottom: 0; }
.page-head__subtitle {
  max-width: var(--page-text-width);
  margin: 16px 0 0;
  padding-bottom: 40px;
  font-size: 18px;
  line-height: 1.55;
  color: var(--page-muted);
}
.page-head--center .page-head__subtitle {
  margin-left: auto;
  margin-right: auto;
}
.page-head__subtitle a {
  color: var(--page-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}
@media (max-width: 767.98px) {
  .page-head__title { padding: 16px 0 28px; }
  .page-head--with-subtitle .page-head__title { padding-bottom: 0; }
  .page-head__subtitle {
    margin-top: 12px;
    padding-bottom: 28px;
    font-size: 16px;
  }
}


/* ---------- Секции и сетки ----------
   .page-section — блок с нижним отступом var(--page-section-gap)
   .page-grid — адаптивная сетка карточек (минимум 300px на колонку);
   .page-grid--2 / --3 — фиксированное число колонок на десктопе, одна колонка на мобильном */
.page-section {
  margin-bottom: var(--page-section-gap);
}
.page-section__title {
  margin: 0 0 20px;
  font-size: clamp(24px, 2.4vw, 32px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.02em;
  color: var(--page-ink);
}
.page-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
  gap: var(--page-gap);
}
.page-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.page-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 991.98px) {
  .page-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767.98px) {
  .page-grid--2,
  .page-grid--3 { grid-template-columns: 1fr; }
}


/* ---------- Текстовая страница ----------
   <div class="page-text">…обычная HTML-разметка: h2, h3, p, ul, ol, table, blockquote…</div>
   Ширина строки ~760px; .page-text--wide снимает ограничение (например, для широких таблиц). */
.page-text {
  max-width: var(--page-text-width);
  padding-bottom: 24px;
  font-size: 16px;
  line-height: 1.7;
  color: var(--page-ink);
  overflow-wrap: break-word;
}
.page-text--wide { max-width: none; }
.page-text > :first-child { margin-top: 0; }
.page-text > :last-child { margin-bottom: 0; }
.page-text h2 {
  margin: 48px 0 16px;
  font-size: clamp(22px, 2.2vw, 28px);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -.01em;
}
.page-text h3 {
  margin: 32px 0 12px;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.35;
}
.page-text h4 {
  margin: 24px 0 8px;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.4;
}
.page-text p {
  margin: 0 0 16px;
  line-height: 1.7;
}
.page-text ul,
.page-text ol {
  margin: 0 0 16px;
  padding-left: 1.5em;
}
.page-text ul > li { list-style: disc; }
.page-text ol > li { list-style: decimal; }
.page-text li {
  margin-bottom: 8px;
  padding-left: .25em;
}
.page-text li::marker { color: var(--page-muted); }
.page-text li > ul,
.page-text li > ol { margin: 8px 0 0; }
.page-text a {
  color: var(--page-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.page-text a:hover { color: var(--page-primary-hover); }
.page-text strong,
.page-text b { font-weight: 600; }
.page-text hr {
  height: 1px;
  margin: 32px 0;
  background: var(--page-border);
}
.page-text blockquote {
  margin: 0 0 16px;
  padding: 16px 20px;
  border-left: 3px solid var(--page-primary);
  border-radius: 0 var(--page-radius-sm) var(--page-radius-sm) 0;
  background: var(--page-surface);
}
.page-text img {
  max-width: 100%;
  height: auto;
  border-radius: var(--page-radius-sm);
}
.page-text table {
  width: 100%;
  margin: 0 0 24px;
  border-collapse: collapse;
  font-size: 15px;
  line-height: 1.5;
}
.page-text th,
.page-text td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--page-border);
  text-align: left;
  vertical-align: top;
}
.page-text th {
  font-weight: 600;
  background: var(--page-surface);
}
.page-text .page-text__meta {
  margin-bottom: 24px;
  font-size: 14px;
  color: var(--page-muted);
}
@media (max-width: 767.98px) {
  .page-text { font-size: 15px; }
  .page-text h2 { margin-top: 36px; }
  .page-text h3 { margin-top: 24px; }
  /* широкая таблица прокручивается внутри себя, страница не уезжает */
  .page-text table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}


/* ---------- Карточка ----------
   <div class="page-card">
     <h2 class="page-card__title">…</h2>
     <p class="page-card__text">…</p>
     <div class="page-card__actions"><a class="page-btn page-btn--primary">…</a></div>
   </div>
   Модификаторы: .page-card--muted (серый фон без тени), .page-card--link (вся карточка — ссылка, подъём при наведении),
   .page-card--flush (без внутренних отступов, например для картинки на всю ширину; отступ контенту даёт .page-card__body).
   .page-card__media — блок под картинку/превью 16:9. */
.page-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 32px;
  border: 1px solid var(--page-border);
  border-radius: var(--page-radius);
  background: #fff;
  box-shadow: var(--page-shadow);
  color: var(--page-ink);
}
.page-card--muted {
  border-color: transparent;
  background: var(--page-surface);
  box-shadow: none;
}
.page-card--flush { padding: 0; overflow: hidden; }
.page-card__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  padding: 24px;
}
.page-card--link {
  text-decoration: none;
  transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.page-card--link:hover {
  border-color: var(--page-border-hover);
  box-shadow: 0 12px 32px rgba(16, 38, 72, .1);
  transform: translateY(-2px);
}
.page-card--link:focus-visible {
  outline: 3px solid var(--page-primary-soft);
  outline-offset: 2px;
}
.page-card__media {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--page-surface);
}
.page-card__media img,
.page-card__media picture,
.page-card__media video,
.page-card__media iframe {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.page-card__eyebrow {
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--page-primary);
}
.page-card__title {
  margin: 0 0 8px;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -.01em;
  color: var(--page-ink);
}
.page-card__text {
  margin: 0;
  font-size: 16px;
  line-height: 1.55;
  color: var(--page-muted);
}
.page-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: auto;
  padding-top: 24px;
}
@media (max-width: 767.98px) {
  .page-card { padding: 20px; }
  .page-card--flush { padding: 0; }
  .page-card__body { padding: 20px; }
  .page-card__title { font-size: 20px; }
  .page-card__actions .page-btn { flex: 1 1 auto; }
}


/* ---------- Кнопки ----------
   <a class="page-btn page-btn--primary" href="…">Текст</a>, <button class="page-btn page-btn--secondary">…</button>
   Модификаторы: --primary (синяя), --secondary (белая с рамкой), --ghost (текстовая), --block (на всю ширину), --sm (40px).
   Работает и на <input type="submit">. Состояние загрузки: атрибут disabled или aria-busy="true". */
.page-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--page-control-height);
  padding: 0 22px;
  border: 1px solid transparent;
  border-radius: var(--page-radius-control);
  background: var(--page-primary);
  color: #fff;
  font: 600 16px/1.2 Inter, system-ui, sans-serif;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  touch-action: manipulation;
  transition: background .15s, border-color .15s, color .15s, opacity .15s;
}
.page-btn:link,
.page-btn:visited { text-decoration: none; }
.page-btn--primary,
.page-btn--primary:link,
.page-btn--primary:visited { background: var(--page-primary); color: #fff; }
.page-btn--primary:hover { background: var(--page-primary-hover); color: #fff; }
.page-btn--secondary,
.page-btn--secondary:link,
.page-btn--secondary:visited { background: #fff; border-color: var(--page-border); color: var(--page-ink); }
.page-btn--secondary:hover { border-color: var(--page-border-hover); color: var(--page-ink); }
.page-btn--ghost,
.page-btn--ghost:link,
.page-btn--ghost:visited { padding: 0 12px; background: transparent; color: var(--page-primary); }
.page-btn--ghost:hover { background: var(--page-primary-soft); color: var(--page-primary-hover); }
.page-btn--block { display: flex; width: 100%; }
.page-btn--sm { min-height: 40px; padding: 0 16px; font-size: 14px; }
.page-btn:focus-visible { outline: 3px solid var(--page-primary-soft); outline-offset: 2px; }
.page-btn:disabled,
.page-btn[aria-disabled="true"],
.page-btn[aria-busy="true"] { opacity: .55; cursor: not-allowed; pointer-events: none; }
.page-btn svg,
.page-btn img { flex: none; width: 20px; height: 20px; }
.page-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
@media (max-width: 479.98px) {
  .page-actions .page-btn { flex: 1 1 100%; }
}


/* ---------- Поля формы ----------
   <form class="page-form">
     <div class="page-field">
       <label class="page-field__label" for="f-name">Имя <span class="page-field__required">*</span></label>
       <input class="page-input" id="f-name" name="name" type="text">
       <div class="page-field__hint">Подсказка</div>
     </div>
   </form>
   Ошибка: .page-field--error на обёртке (или aria-invalid="true" на поле) + <div class="page-field__error">Текст</div>.
   .page-input подходит для input, textarea и select. .page-form--2col — поля в две колонки (на мобильном в одну),
   .page-field--full растягивает поле на обе колонки. */
.page-form {
  display: grid;
  gap: 20px;
  max-width: 640px;
}
.page-form--2col { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 880px; }
.page-form--2col .page-field--full,
.page-form--2col > .page-actions,
.page-form--2col > .page-alert { grid-column: 1 / -1; }
@media (max-width: 767.98px) {
  .page-form--2col { grid-template-columns: 1fr; }
}
.page-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.page-field__label {
  font-size: 15px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--page-ink);
}
.page-field__required { color: var(--page-danger); }
.page-field__hint {
  font-size: 13px;
  line-height: 1.45;
  color: var(--page-muted);
}
.page-field__error {
  font-size: 13px;
  line-height: 1.45;
  color: var(--page-danger);
}
.page-input {
  display: block;
  width: 100%;
  min-height: var(--page-control-height);
  padding: 11px 14px;
  border: 1px solid var(--page-border);
  border-radius: var(--page-radius-control);
  background: #fff;
  color: var(--page-ink);
  font: 400 16px/1.5 Inter, system-ui, sans-serif; /* 16px — iOS не зумит поле при фокусе */
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color .15s, box-shadow .15s;
}
.page-input::placeholder { color: #9A9EA6; }
.page-input:hover { border-color: var(--page-border-hover); }
.page-input:focus {
  border-color: var(--page-primary);
  box-shadow: 0 0 0 3px var(--page-primary-soft);
}
.page-input:disabled {
  background: var(--page-surface);
  color: var(--page-muted);
  cursor: not-allowed;
}
textarea.page-input {
  min-height: 140px;
  resize: vertical;
}
select.page-input {
  padding-right: 40px;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%236B6B70' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 14px center;
  cursor: pointer;
}
.page-field--error .page-input,
.page-input[aria-invalid="true"] { border-color: var(--page-danger); }
.page-field--error .page-input:focus,
.page-input[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px var(--page-danger-soft); }


/* ---------- Чекбоксы и радио ----------
   <label class="page-check">
     <input type="checkbox" name="consent" required>
     <span>Согласен на <a href="/soglasie/">обработку персональных данных</a></span>
   </label>
   Несколько согласий — каждое отдельным .page-check (в .page-form они встают в столбик).
   Для радио то же самое с input type="radio". Ошибка: .page-check--error. */
.page-check {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 14px;
  line-height: 20px; /* одна строка = высота квадрата, флажок стоит вровень с первой строкой */
  color: var(--page-ink);
  cursor: pointer;
}
.page-check a {
  color: var(--page-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.page-check input[type="checkbox"],
.page-check input[type="radio"] {
  flex: none;
  width: 20px;
  height: 20px;
  margin: 0;
  border: 1.5px solid #B9BCC2;
  border-radius: 6px;
  background: #fff no-repeat center / 12px 9px;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: background-color .15s, border-color .15s, box-shadow .15s;
}
.page-check input[type="radio"] { border-radius: 50%; }
.page-check input:hover { border-color: var(--page-primary); }
.page-check input:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--page-primary-soft); }
.page-check input[type="checkbox"]:checked {
  border-color: var(--page-primary);
  background-color: var(--page-primary);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='9' viewBox='0 0 12 9'%3E%3Cpath d='M1 4.5l3.5 3.5L11 1' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.page-check input[type="radio"]:checked {
  border-color: var(--page-primary);
  background: radial-gradient(circle, var(--page-primary) 0 5px, #fff 5.5px);
}
.page-check input:disabled { background-color: var(--page-surface); cursor: not-allowed; }
.page-check--error input[type="checkbox"],
.page-check--error input[type="radio"] { border-color: var(--page-danger); }


/* ---------- Сообщения ----------
   <div class="page-alert page-alert--error" role="alert">Текст</div>; варианты --error, --success, --info. */
.page-alert {
  padding: 14px 16px;
  border-radius: var(--page-radius-sm);
  background: var(--page-surface);
  font-size: 15px;
  line-height: 1.5;
  color: var(--page-ink);
}
.page-alert--error { background: var(--page-danger-soft); color: #B42318; }
.page-alert--success { background: var(--page-success-soft); color: #1E7A34; }
.page-alert--info { background: #EAF5FF; color: var(--page-primary-hover); }
.page-alert > :last-child { margin-bottom: 0; }


/* ---------- Пустое состояние ----------
   <div class="page-empty"><p class="page-empty__title">Пока пусто</p><p class="page-empty__text">…</p></div> */
.page-empty {
  padding: 48px 24px;
  border: 1px dashed var(--page-border-hover);
  border-radius: var(--page-radius);
  text-align: center;
  color: var(--page-muted);
}
.page-empty__title {
  margin: 0 0 8px;
  font-size: 20px;
  font-weight: 600;
  color: var(--page-ink);
}
.page-empty__text { margin: 0; font-size: 16px; line-height: 1.55; }
.page-empty .page-actions { justify-content: center; margin-top: 20px; }