/* ХОРОШКОЛА · СТИЛИ РАЗДЕЛА «ЖИЗНЬ ШКОЛЫ»
   Парный файл: скрипт лежит в «HTML-код внутрь HEAD».
   Фирменные цвета — переменные в :root ниже.
   После правки обязательно «Опубликовать все страницы». */

:root{
  --hk-accent:#F5A97F;
  --hk-accent-soft:#FDF0E7;
  --hk-ink:#1D1D1D;
  --hk-muted:#7A7A7A;
  --hk-line:#E6E6E6;
  --hk-bg-soft:#EFF5F5;
  --hk-radius:14px;
  --hk-maxw:1200px;
}
.hk{max-width:var(--hk-maxw);margin:0 auto;padding:0 20px;
    font-family:Arial,Helvetica,sans-serif;color:var(--hk-ink)}
.hk *{box-sizing:border-box}
.hk a{color:inherit}

/* крошки */
.hk-crumbs{font:14px/1.4 Arial,sans-serif;padding:14px 20px;max-width:var(--hk-maxw);
  margin:0 auto;color:var(--hk-muted)}
.hk-crumbs a{color:var(--hk-muted);text-decoration:none;
  border-bottom:1px solid rgba(122,122,122,.3)}
.hk-crumbs a:hover{color:var(--hk-ink);border-bottom-color:var(--hk-ink)}
.hk-crumbs .hk-sep{margin:0 8px;opacity:.5}
.hk-crumbs [aria-current]{color:var(--hk-ink)}

/* типографика */
.hk-h1{font-size:clamp(30px,5vw,48px);line-height:1.12;margin:8px 0 14px;font-weight:700}
.hk-lead{font-size:clamp(17px,2.2vw,21px);line-height:1.45;color:var(--hk-muted);
  max-width:760px;margin:0 0 36px}
.hk-h2{font-size:clamp(23px,3.2vw,32px);line-height:1.2;margin:0 0 8px;font-weight:700}
.hk-sec{margin:56px 0}
.hk-sec__head{display:flex;align-items:baseline;justify-content:space-between;
  gap:16px;flex-wrap:wrap;margin-bottom:22px}
.hk a.hk-more{white-space:nowrap;font-size:16px;text-decoration:none;
  border-bottom:1px solid var(--hk-accent);padding-bottom:2px}
.hk a.hk-more:hover{border-bottom-width:2px}
.hk-prose{max-width:760px;font-size:17px;line-height:1.65;margin:0 0 40px}
.hk-prose p{margin:0 0 14px}
.hk-prose a{color:var(--hk-ink);text-decoration:underline;text-underline-offset:3px}

/* плитка навигации */
.hk-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:16px;list-style:none;margin:0 0 48px;padding:0}
.hk-tile{display:flex;flex-direction:column;justify-content:flex-start;gap:10px;
  min-height:118px;padding:22px;border-radius:var(--hk-radius);
  background:var(--hk-accent-soft);text-decoration:none;transition:.15s}
.hk-tile:hover{transform:translateY(-3px);box-shadow:0 8px 24px rgba(0,0,0,.07)}
.hk-tile b{font-size:19px;font-weight:700;line-height:1.25}
/* margin-top:auto прижимает подпись вниз только когда она есть — */
/* тизеры без подписи не растягиваются пустотой */
.hk-tile span{font-size:14px;color:var(--hk-muted);margin-top:auto}

/* сетка каталога */
.hk-cat__filter{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 28px}
.hk-cat__btn{appearance:none;border:1px solid var(--hk-line);background:#fff;
  border-radius:100px;padding:9px 18px;font-size:15px;cursor:pointer;
  transition:.15s;color:var(--hk-ink);font-family:inherit}
.hk-cat__btn:hover{border-color:var(--hk-muted)}
.hk-cat__btn.is-active{background:var(--hk-ink);border-color:var(--hk-ink);color:#fff}
.hk-cat__btn i{font-style:normal;opacity:.55;margin-left:6px;font-size:13px}
.hk-cat__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(255px,1fr));
  gap:18px;list-style:none;margin:0;padding:0}
.hk-cat__item.is-hidden{display:none}
.hk-cat__link{display:flex;align-items:center;min-height:104px;padding:22px;
  border:1px solid var(--hk-line);border-radius:var(--hk-radius);text-decoration:none;
  font-size:17px;line-height:1.35;height:100%;transition:.15s}
.hk-cat__link:hover{border-color:var(--hk-ink);transform:translateY(-2px)}

/* FAQ */
.hk-faq{max-width:820px;margin:0}
.hk-faq details{border-bottom:1px solid var(--hk-line);padding:18px 0}
.hk-faq summary{cursor:pointer;font-size:18px;font-weight:700;list-style:none}
.hk-faq summary::-webkit-details-marker{display:none}
.hk-faq summary::after{content:"+";float:right;color:var(--hk-accent);font-size:22px;line-height:1}
.hk-faq details[open] summary::after{content:"–"}
.hk-faq p{font-size:16px;line-height:1.6;color:var(--hk-muted);margin:12px 0 0}

/* CTA */
.hk-cta{background:var(--hk-bg-soft);border-radius:var(--hk-radius);
  padding:clamp(28px,5vw,52px);text-align:center;margin:56px 0}
.hk-cta p{font-size:17px;color:var(--hk-muted);max-width:560px;margin:10px auto 24px}
/* Префикс .hk обязателен — иначе .hk a{color:inherit} выигрывает */
/* по специфичности и у кнопки CTA пропадает белый текст. */
.hk a.hk-btn{display:inline-block;background:var(--hk-ink);color:#fff;text-decoration:none;
  padding:15px 34px;border-radius:100px;font-size:17px;transition:.15s}
.hk a.hk-btn:hover{opacity:.85;color:#fff}
.hk a.hk-back{display:inline-block;margin:40px 0 8px;font-size:16px;
  text-decoration:none;color:var(--hk-muted)}
.hk a.hk-back:hover{color:var(--hk-ink)}

@media(max-width:640px){
  .hk,.hk-crumbs{padding-left:14px;padding-right:14px}
  .hk-cat__grid{grid-template-columns:1fr}
  .hk-sec{margin:40px 0}
}
/* — пастель по типам (добавлено 03.08) —
   Карточки отсортированы по типу, поэтому цвет читается как три группы.
   Пары переменных: фон / рамка / активное состояние кнопки. */
:root{
  --hk-t1:#FDF0E7;  --hk-t1-bd:#F1D3BC;  --hk-t1-on:#F8DDC7;
  --hk-t2:#E9F3EC;  --hk-t2-bd:#C4E0D0;  --hk-t2-on:#D5E9DC;
  --hk-t3:#ECEDF9;  --hk-t3-bd:#CFD3EE;  --hk-t3-on:#DCDFF3;
}
.hk-cat__item[data-type="poezdki"]       .hk-cat__link{background:var(--hk-t1);border-color:var(--hk-t1-bd)}
.hk-cat__item[data-type="ekskursii"]     .hk-cat__link{background:var(--hk-t2);border-color:var(--hk-t2-bd)}
.hk-cat__item[data-type="puteshestviya"] .hk-cat__link{background:var(--hk-t3);border-color:var(--hk-t3-bd)}
.hk-cat__btn[data-filter="poezdki"]       {background:var(--hk-t1);border-color:var(--hk-t1-bd)}
.hk-cat__btn[data-filter="ekskursii"]     {background:var(--hk-t2);border-color:var(--hk-t2-bd)}
.hk-cat__btn[data-filter="puteshestviya"] {background:var(--hk-t3);border-color:var(--hk-t3-bd)}
/* Активное состояние: тон глубже + тёмная рамка и жирный текст,
   иначе на пастели «нажато» неотличимо от «не нажато». */
.hk-cat__btn[data-filter="poezdki"].is-active,
.hk-cat__btn[data-filter="ekskursii"].is-active,
.hk-cat__btn[data-filter="puteshestviya"].is-active{
  color:var(--hk-ink);font-weight:700;border-color:var(--hk-ink)}
.hk-cat__btn[data-filter="poezdki"].is-active      {background:var(--hk-t1-on)}
.hk-cat__btn[data-filter="ekskursii"].is-active    {background:var(--hk-t2-on)}
.hk-cat__btn[data-filter="puteshestviya"].is-active{background:var(--hk-t3-on)}
.hk-cat__btn[data-filter]:not([data-filter="all"]):hover{border-color:var(--hk-muted)}

/* — пастель интенсивов (добавлено 03.08) —
   Своя четвёрка тонов, чтобы разделы не путались между собой. */
:root{
  --hk-t4:#E6F0FA;  --hk-t4-bd:#C6DCF0;  --hk-t4-on:#D5E5F5;   /* спорт — небесный */
  --hk-t5:#FBEAF0;  --hk-t5-bd:#F0CBDA;  --hk-t5-on:#F7DEE7;   /* творчество — розовый */
  --hk-t6:#FAF2DE;  --hk-t6-bd:#EBDCB4;  --hk-t6-on:#F4E9C9;   /* наука — песочный */
  --hk-t7:#EBEFE8;  --hk-t7-bd:#D0DAC8;  --hk-t7-on:#DEE5D8;   /* профориентация — шалфей */
}
.hk-cat__item[data-type="sport"]   .hk-cat__link{background:var(--hk-t4);border-color:var(--hk-t4-bd)}
.hk-cat__item[data-type="art"]     .hk-cat__link{background:var(--hk-t5);border-color:var(--hk-t5-bd)}
.hk-cat__item[data-type="science"] .hk-cat__link{background:var(--hk-t6);border-color:var(--hk-t6-bd)}
.hk-cat__item[data-type="prof"]    .hk-cat__link{background:var(--hk-t7);border-color:var(--hk-t7-bd)}
.hk-cat__btn[data-filter="sport"]  {background:var(--hk-t4);border-color:var(--hk-t4-bd)}
.hk-cat__btn[data-filter="art"]    {background:var(--hk-t5);border-color:var(--hk-t5-bd)}
.hk-cat__btn[data-filter="science"]{background:var(--hk-t6);border-color:var(--hk-t6-bd)}
.hk-cat__btn[data-filter="prof"]   {background:var(--hk-t7);border-color:var(--hk-t7-bd)}
.hk-cat__btn[data-filter="sport"].is-active,
.hk-cat__btn[data-filter="art"].is-active,
.hk-cat__btn[data-filter="science"].is-active,
.hk-cat__btn[data-filter="prof"].is-active{
  color:var(--hk-ink);font-weight:700;border-color:var(--hk-ink)}
.hk-cat__btn[data-filter="sport"].is-active  {background:var(--hk-t4-on)}
.hk-cat__btn[data-filter="art"].is-active    {background:var(--hk-t5-on)}
.hk-cat__btn[data-filter="science"].is-active{background:var(--hk-t6-on)}
.hk-cat__btn[data-filter="prof"].is-active   {background:var(--hk-t7-on)}