/* ============================================================
   Информационные страницы /info/kontakty и /info/o-sajte. Раньше
   приезжали со старого сайта на Bootstrap-разметке (карточки
   «Время работы», каталог школ, нерабочая форма) — переверстаны
   на токенах дизайн-системы, legacy.css им больше не нужен.
   Подключается только на этих страницах (inc/enqueue.php).
   ============================================================ */

/* --- Общее для обеих страниц --- */
.el-info .lead{font-size:1.1875rem;color:var(--body);max-width:64ch;margin:0 0 10px}
.el-info h2{margin-top:38px}
.el-info h2:first-of-type{margin-top:30px}
.el-info ul{color:var(--body)}

/* --- «О сайте»: карточки возможностей --- */
.el-feats{display:grid;grid-template-columns:repeat(auto-fit,minmax(400px,1fr));gap:16px;margin:22px 0 8px}
.el-feat{padding:22px 24px;border-radius:var(--r-card);background:var(--surface);
  border:1px solid var(--card-border);box-shadow:var(--shadow-soft)}
.el-feat h3{margin:0 0 6px;font-size:1.1875rem;font-weight:700}
.el-feat p{margin:0;font-size:1rem;color:var(--body);line-height:1.55}

/* --- «О сайте»: кому подойдёт (пастельные плитки) --- */
.el-fits{display:grid;grid-template-columns:repeat(auto-fit,minmax(400px,1fr));gap:16px;margin:22px 0 8px}
.el-fit{padding:20px 22px;border-radius:var(--r-card)}
.el-fit h3{margin:0 0 8px;font-size:1.0625rem;font-weight:700}
.el-fit ul{margin:0;padding-left:1.1em;font-size:.9375rem;line-height:1.5}
.el-fit li{margin-bottom:4px}
.el-fit.yellow{background:var(--p-yellow)}.el-fit.yellow h3,.el-fit.yellow ul{color:var(--d-yellow)}
.el-fit.lilac{background:var(--p-lilac)}.el-fit.lilac h3,.el-fit.lilac ul{color:var(--d-lilac)}
.el-fit.mint{background:var(--p-mint)}.el-fit.mint h3,.el-fit.mint ul{color:var(--d-mint)}
.el-fit.sage{background:var(--p-sage)}.el-fit.sage h3,.el-fit.sage ul{color:var(--d-sage)}

/* --- «О сайте»: цифры --- */
.el-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:16px;margin:22px 0 8px}
.el-stat{padding:22px;border-radius:var(--r-card);background:var(--band);text-align:center}
.el-stat .n{font-size:2rem;font-weight:800;letter-spacing:-.02em;color:var(--orange-deep);line-height:1.1}
.el-stat .l{font-size:.875rem;color:var(--muted);margin-top:4px}

/* --- «О сайте»: финальный блок «с чего начать» --- */
.el-start{margin-top:30px;padding:26px 28px;border-radius:22px;background:var(--cta-strip)}
.el-start h2{margin:0 0 8px;font-size:1.375rem}
.el-start p{margin:0 0 16px;color:var(--body)}
.el-start .acts{display:flex;gap:12px;flex-wrap:wrap}

.el-contacts .lead{font-size:1.1875rem;color:var(--body);max-width:64ch;margin:0 0 8px}
.el-contacts h2{margin-top:38px}
.el-contacts h2:first-of-type{margin-top:30px}

/* --- Способы связи: карточки-ссылки --- */
.el-ways{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin:22px 0 8px}
.el-way{display:flex;align-items:center;gap:14px;padding:18px 20px;border-radius:var(--r-card);
  background:var(--surface);border:1px solid var(--card-border);box-shadow:var(--shadow-soft);
  text-decoration:none;color:var(--ink);transition:box-shadow .15s,border-color .15s}
.el-way:hover{box-shadow:var(--shadow);color:var(--ink)}
.el-way .ic{width:44px;height:44px;border-radius:13px;flex:0 0 44px;display:flex;align-items:center;justify-content:center;background:var(--band)}
.el-way .ic svg{width:26px;height:26px}
.el-way .nm{font-weight:700;font-size:1.0625rem;display:block}
.el-way .sub{color:var(--muted);font-size:.875rem;display:block;margin-top:2px}

/* --- Список тем обращений --- */
.el-topics{margin:0;padding-left:1.2em;color:var(--body)}
.el-topics li{margin-bottom:8px}

/* --- Форма обратной связи --- */
.el-cf{margin-top:8px}
/* Селектор с классом формы обязателен: у родительской темы правила вида
   input[type="text"] специфичнее одиночного .inp и перекрашивают поля в серый. */
.el-cf .inp{background:var(--field-bg);border:1.5px solid var(--field-border);border-radius:14px;
  color:var(--ink);box-shadow:none;padding:13px 16px}
.el-cf .inp:focus{border-color:var(--orange);background:var(--field-bg);color:var(--ink)}
.el-cf .grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.el-cf .grid .full{grid-column:1/-1}
.el-cf label{display:block;font-weight:700;font-size:.9375rem;margin-bottom:6px;color:var(--ink)}
.el-cf .req{color:var(--state-no-fg)}
/* .inp (base.css) задаёт фон/рамку/радиус и кегль 1rem — на телефоне без авто-зума. */
.el-cf textarea.inp{min-height:150px;resize:vertical;line-height:1.55}
.el-cf select.inp{appearance:none;background-image:none}
.el-cf .hint{color:var(--muted);font-size:.875rem;margin-top:6px}
/* Honeypot: поле-ловушка для ботов, человеку не показывается. */
.el-cf .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
/* Согласие с политикой (DESIGN.md §5): тап-таргет ≥44px, акцент чекбокса — оранжевый. */
.el-cf .consent{display:flex;align-items:flex-start;gap:12px;font-weight:400;font-size:.9375rem;
  color:var(--body);line-height:1.5;cursor:pointer;margin:0;padding:4px 0;min-height:44px}
.el-cf .consent input[type="checkbox"]{width:22px;height:22px;flex:0 0 22px;margin-top:1px;
  accent-color:var(--orange);cursor:pointer}
.el-cf .consent a{color:var(--orange-deep);text-decoration:underline}
.el-cf .err{display:none;color:var(--state-no-fg);font-size:.875rem;margin-top:6px}
.el-cf.checked :invalid~.err{display:block}
.el-cf.checked .consent:has(input:invalid)+.err{display:block}
.el-cf.checked .inp:invalid{border-color:var(--state-no-fg)}
.el-cf .submit{margin-top:4px}

/* Результат отправки — компонент .state (components.css). */
.el-cf-result{margin-bottom:22px}
.el-cf-result .state{align-items:flex-start;font-weight:500;line-height:1.5}
.el-cf-result .state strong{font-weight:700}

@media(max-width:640px){
  .el-cf .grid{grid-template-columns:1fr}
}