/* Главная kazmed.kz — стили карточной раскладки.
   Собрано скриптом scripts/home_css_build.py из макета, править надо там.
   Всё живёт внутри .kzhome, чтобы не задеть Astra на остальных страницах. */

.kzhome { max-width: 1120px; margin: 0 auto; padding: 0 4px;
          font-family: 'PT Sans', 'Segoe UI', system-ui, sans-serif;
          font-size: 16px; line-height: 1.5; color: var(--ink); }
.kzhome a { color: inherit; text-decoration: none; }
.kzhome h1, .kzhome h2, .kzhome h3 { font-family: 'Golos Text', system-ui, sans-serif; }
/* Astra красит кнопки в белый и вешает свои отступы на заголовки —
   гасим только внутри главной */
.kzhome .search button { color: #fff; }
.kzhome h2 { margin-top: 0; }

.kzhome { --ground:#f2f6f8; --surface:#ffffff; --surface-2:#eaf2f5; --ink:#132430; --ink-2:#4c6270; --ink-3:#7b8f9b; --line:#d8e4ea; --line-soft:#e7eff3; --accent:#0f6f8c; --accent-ink:#0b5670; --accent-soft:#dceef4; --warm:#b8451f; --warm-soft:#fbeae4; --display:'Golos Text',system-ui,sans-serif; --body:'PT Sans','Segoe UI',system-ui,sans-serif; --wrap:1120px; }
.kzhome * { box-sizing:border-box }
.kzhome a { color:inherit;text-decoration:none }
.kzhome a:focus-visible, .kzhome button:focus-visible { outline:2px solid var(--accent);outline-offset:2px;border-radius:4px }
.kzhome .wrap { max-width:var(--wrap);margin:0 auto;padding:0 20px }
.kzhome .hero { padding:44px 0 8px }
.kzhome h1 { font-family:var(--display);font-weight:700;font-size:clamp(28px,4.2vw,42px);line-height:1.12;letter-spacing:-.02em;margin:0 0 12px;text-wrap:balance;max-width:16ch }
.kzhome .lede { font-size:17px;color:var(--ink-2);max-width:62ch;margin:0 0 22px }
.kzhome form.search { display:flex;gap:8px;max-width:620px;margin-bottom:14px }
.kzhome form.search input { flex:1;min-width:0;font:inherit;padding:13px 15px;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--ink) }
.kzhome form.search input::placeholder { color:var(--ink-3) }
.kzhome form.search button { font-family:var(--display);font-weight:600;font-size:15px;padding:13px 20px;border:0;border-radius:10px;background:var(--accent);color:#fff;cursor:pointer }
.kzhome .hints { font-size:14px;color:var(--ink-3);margin:0 0 30px }
.kzhome .hints a { color:var(--accent-ink);border-bottom:1px solid var(--accent-soft) }
.kzhome .tasks { display:grid;grid-template-columns:repeat(auto-fit,minmax(232px,1fr));gap:14px;margin-bottom:44px }
.kzhome .task { background:var(--surface);border:1px solid var(--line);border-radius:14px;overflow:hidden;display:flex;flex-direction:column }
.kzhome .task:hover { border-color:var(--accent) }
.kzhome .task .ph { aspect-ratio:16/9;background:var(--surface-2);overflow:hidden }
.kzhome .task .ph img { width:100%;height:100%;object-fit:cover;display:block }
.kzhome .task .body { padding:14px 16px 15px;display:flex;flex-direction:column;gap:5px;flex:1 }
.kzhome .task .kicker { font-family:var(--display);font-size:11px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--accent-ink) }
.kzhome .task h3 { font-family:var(--display);font-weight:600;font-size:18px;margin:0;line-height:1.25 }
.kzhome .task p { margin:0;font-size:14px;color:var(--ink-2);line-height:1.45 }
.kzhome .task .go { margin-top:auto;padding-top:6px;font-size:14px;color:var(--accent-ink);font-weight:700 }
.kzhome .lead { display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px;margin-bottom:6px }
.kzhome .lead a { display:block }
.kzhome .lead .ph { aspect-ratio:16/9;border-radius:11px;overflow:hidden;background:var(--surface-2);margin-bottom:9px }
.kzhome .lead .ph img { width:100%;height:100%;object-fit:cover;display:block;transition:transform .25s ease }
.kzhome .lead a:hover .ph img { transform:scale(1.03) }
.kzhome .lead .t { font-family:var(--display);font-weight:600;font-size:16px;line-height:1.3;display:block }
.kzhome .lead a:hover .t { color:var(--accent-ink) }
.kzhome .lead .m { font-size:13px;color:var(--ink-3);margin-top:4px;display:block }
@media (prefers-reduced-motion:reduce) {
  .kzhome .lead .ph img { transition:none }
}
.kzhome section { margin-bottom:44px }
.kzhome .head { display:flex;align-items:baseline;gap:14px;margin-bottom:16px;padding-bottom:10px;border-bottom:2px solid var(--line) }
.kzhome .head h2 { font-family:var(--display);font-weight:700;font-size:23px;margin:0;letter-spacing:-.01em }
.kzhome .count { font-size:13px;color:var(--ink-3);font-variant-numeric:tabular-nums }
.kzhome .all { margin-left:auto;font-size:14px;color:var(--accent-ink);font-weight:700 }
.kzhome .tools { display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px }
.kzhome .tool { background:var(--surface-2);border-radius:12px;padding:15px 16px;display:flex;flex-direction:column;gap:4px }
.kzhome .tool:hover { background:var(--accent-soft) }
.kzhome .tool b { font-family:var(--display);font-weight:600;font-size:16px }
.kzhome .tool span { font-size:13px;color:var(--ink-2) }
.kzhome .grid { display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:0 26px }
.kzhome .item { display:block;padding:14px 0;border-bottom:1px solid var(--line-soft) }
.kzhome .item:hover .t { color:var(--accent-ink) }
.kzhome .item .t { font-family:var(--display);font-weight:500;font-size:16px;line-height:1.35;display:block }
.kzhome .item .m { font-size:13px;color:var(--ink-3);margin-top:4px }
.kzhome .kz { background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--accent);border-radius:14px;padding:22px 24px }
.kzhome .kz .head { border-bottom-color:var(--line-soft) }
.kzhome .news { display:flex;flex-direction:column }
.kzhome .news .item { display:flex;gap:14px;align-items:baseline }
.kzhome .news .d { font-size:13px;color:var(--ink-3);white-space:nowrap;font-variant-numeric:tabular-nums }
@media (max-width:600px) {
  .kzhome .hero { padding-top:28px }
  .kzhome .tasks { gap:10px }
  .kzhome .task { min-height:0 }
}

/* Astra подчёркивает ссылки, а здесь ссылка — это целая карточка:
   подчёркнутыми оказываются и заголовок, и описание, и подпись.
   !important тут не от лени: правило темы «a, a:focus, a:hover, a:visited»
   печатается инлайном в <head> ПОСЛЕ подключения этого файла, поэтому
   более конкретный селектор проигрывает ему по порядку, а не по весу.
   Задавать decoration потомкам бесполезно — подчёркивание рисует предок. */
.kzhome a, .kzhome a:link, .kzhome a:visited,
.kzhome a:hover, .kzhome a:focus { text-decoration: none !important; }

/* Место под картинку — это <span>, то есть по умолчанию строчный элемент,
   а display ему в макете нигде не задан. В плитках первого экрана это не
   проявлялось: .task — флекс-контейнер, а он делает своих детей блочными.
   Но в карточках разделов .lead a блочный, и .ph оставался строчным:
   aspect-ratio на строчный бокс не действует, высота карточки считалась
   практически без заголовка и подписи, контейнер .lead выходил на 65
   пикселей короче своего содержимого, и следующий блок наезжал прямо на
   текст заголовков. Одно объявление лечит и .lead, и .task, и заглушку. */
.kzhome .ph { display: block; }

/* Первый экран: слева маршруты, справа «что изменилось».
   Правая колонка сознательно текстовая — она стоит выше сгиба, а полевой
   LCP страницы 2902 мс при пороге 2500, и любая картинка здесь стала бы
   LCP-элементом. */
.kzhome .hero-split {
  display: grid; grid-template-columns: 1.3fr 1fr; gap: 34px;
  align-items: start; padding: 40px 0 30px;
}
.kzhome .hero-split h1 { margin-bottom: 22px; max-width: 14ch; }

.kzhome .routes { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; }
.kzhome .route {
  display: grid; grid-template-columns: 1fr auto; align-items: center;
  gap: 4px 14px; padding: 14px 18px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
}
.kzhome .route:hover { border-color: var(--accent); }
/* Позиции задаются явно все три. Без этого автораскладка сетки уводила
   стрелку в первую колонку, а заголовок — во вторую, и карточка читалась
   задом наперёд: стрелка слева, название прижато к правому краю. */
.kzhome .route-t { grid-column: 1; grid-row: 1;
  font-family: var(--display); font-weight: 600; font-size: 17px; }
.kzhome .route-n { grid-column: 1; grid-row: 2;
  font-size: 13px; color: var(--ink-2); }
.kzhome .route-go { grid-column: 2; grid-row: 1 / span 2; justify-self: end;
  font-size: 19px; color: var(--accent-ink); }

.kzhome .changes {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 14px; padding: 18px 20px 8px;
}
.kzhome .changes-h {
  font-family: var(--display); font-size: 12px; font-weight: 600;
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--accent-ink); margin: 0 0 12px;
}
.kzhome .changes ul { list-style: none; margin: 0; padding: 0; }
.kzhome .changes li { border-top: 1px solid var(--line-soft); }
.kzhome .changes li:first-child { border-top: 0; }
.kzhome .changes a { display: block; padding: 11px 0; }
.kzhome .changes a:hover .changes-what { color: var(--accent-ink); }
.kzhome .changes-when {
  display: block; font-size: 12px; color: var(--ink-3); margin-bottom: 2px;
}
.kzhome .changes-what { display: block; font-size: 14.5px; line-height: 1.35; }

@media (max-width: 900px) {
  /* Две колонки ниже 900 не живут: правая ужимается до нечитаемой
     полосы. Складываем, «что изменилось» уходит под маршруты. */
  .kzhome .hero-split { grid-template-columns: 1fr; gap: 22px; padding-top: 26px; }
  .kzhome .hero-split h1 { max-width: none; }
}

/* Заглушка вместо обложки: пока у статей про страхование обложки старого
   поколения, ставить на первый экран нечитаемую инфографику нельзя, а
   дырка в ряду выглядит поломкой. Спокойная плашка честнее обоих. */
.kzhome .task .ph-empty {
  aspect-ratio: 16/9;
  background: linear-gradient(135deg, var(--accent-soft), var(--surface-2));
}

/* Мобильная раскладка. В макете её фактически не было: он проверялся на
   широком экране, а auto-fit с minmax(210-268px) на экране 375px даёт одну
   колонку. Страница вытягивалась до 8222 пикселей — длиннее прежней главной,
   которую переделывали в том числе за её 6411. Две колонки возвращают
   мобильную высоту к разумной. */
@media (max-width: 700px) {
  .kzhome .tasks,
  .kzhome .tools,
  .kzhome .lead { grid-template-columns: 1fr 1fr; gap: 12px; }
  .kzhome .task { min-height: 0; }
  .kzhome .task h3 { font-size: 15px; }
  .kzhome .task p { font-size: 13px; }
  .kzhome .lead .t { font-size: 14px; }
  /* текстовые списки остаются в одну колонку: в двух заголовки
     переносятся по три-четыре слова и читаются хуже, чем длинным рядом */
  .kzhome .grid { grid-template-columns: 1fr; }
}