/* ============================================================
   SUN KIDS — блог: главная, рубрики, статья
   Светлая шапка с оттенком рубрики — спокойнее для чтения
   ============================================================ */

/* Тона рубрик */
.sk-tone--blue   { --tone: #1B7FB5; --tone-soft: #E4F1F9; --tone-ink: #14638F; }
.sk-tone--yellow { --tone: #FBA919; --tone-soft: #FFF3CC; --tone-ink: #8A5E00; }
.sk-tone--coral  { --tone: #F2645A; --tone-soft: #FDECEB; --tone-ink: #C23A30; }
.sk-tone--teal   { --tone: #14868A; --tone-soft: #E1F3F2; --tone-ink: #0F6A6D; }

/* Шапка */
.sk-blog-hero {
  background: var(--tone-soft);
  padding-top: clamp(22px, 3vw, 34px); padding-bottom: clamp(30px, 4vw, 48px);
  border-bottom: 1px solid var(--sk-line);
}
.sk-crumbs--dark, .sk-crumbs--dark a { color: var(--sk-ink-soft); }
.sk-crumbs--dark a:hover { color: var(--sk-coral); }
.sk-crumbs--dark [aria-current] { color: var(--sk-ink); }
.sk-blog-hero h1 { max-width: 20em; }
.sk-blog-hero .sk-lead { margin-top: 14px; max-width: 40em; color: var(--sk-ink-soft); }

.sk-blog-cats { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.sk-blog-cat {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px; border-radius: var(--sk-r-pill);
  background: #fff; border: 1px solid var(--sk-line);
  font-size: 14.5px; font-weight: 800; color: var(--sk-ink); text-decoration: none;
  transition: border-color .15s ease, background .15s ease;
}
.sk-blog-cat span { font-size: 12px; color: var(--sk-ink-mute); }
.sk-blog-cat:hover { border-color: var(--tone, var(--sk-blue)); color: var(--sk-ink); }
.sk-blog-cat.is-current { background: var(--tone, var(--sk-blue)); border-color: var(--tone, var(--sk-blue)); color: #fff; }
.sk-blog-cat.is-current span { color: rgba(255,255,255,.8); }
.sk-blog-cat.sk-tone--yellow.is-current { color: var(--sk-ink); }

/* Сетка карточек */
.sk-blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.sk-pcard {
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--sk-line); border-radius: var(--sk-r);
  overflow: hidden; transition: box-shadow .18s ease, transform .18s ease;
}
.sk-pcard:hover { box-shadow: var(--sk-shadow-lg); transform: translateY(-2px); }
.sk-pcard__media { display: block; position: relative; aspect-ratio: 16 / 10; background: var(--tone-soft); overflow: hidden; }
.sk-pcard__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sk-pcard__art { position: absolute; inset: 0; display: grid; place-items: center; }
.sk-pcard__art .sk-sun circle { fill: var(--tone); }
.sk-pcard__art .sk-sun g { stroke: var(--tone); }
.sk-pcard__art .sk-sun { opacity: .9; }
.sk-pcard__body { display: flex; flex-direction: column; gap: 10px; padding: 20px 22px 24px; flex: 1; }
.sk-pcard__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 13px; color: var(--sk-ink-mute); font-weight: 700; }
.sk-pcard__cat {
  display: inline-block; padding: 4px 11px; border-radius: var(--sk-r-pill);
  background: var(--tone-soft); color: var(--tone-ink);
  font-size: 12.5px; font-weight: 900; letter-spacing: .02em; text-decoration: none;
}
.sk-pcard__cat:hover { background: var(--tone); color: #fff; }
.sk .sk-pcard__title { font-size: 19px; line-height: 1.3; }
.sk-pcard__title a { color: var(--sk-ink); text-decoration: none; }
.sk-pcard__title a:hover { color: var(--sk-coral); }
.sk-pcard__excerpt { font-size: 15px; line-height: 1.6; color: var(--sk-ink-soft); }
.sk-pcard__more { margin-top: auto; font-weight: 800; color: var(--sk-coral); text-decoration: none; }

.sk-pcard--big { grid-column: 1 / -1; flex-direction: row; }
.sk-pcard--big .sk-pcard__media { flex: 0 0 52%; aspect-ratio: auto; min-height: 320px; }
.sk-pcard--big .sk-pcard__body { padding: clamp(24px, 3.5vw, 44px); justify-content: center; gap: 14px; }
.sk .sk-pcard--big .sk-pcard__title { font-size: clamp(24px, 2.6vw, 32px); }
.sk-pcard--big .sk-pcard__excerpt { font-size: 16.5px; }

/* Пагинация */
.sk-pagination { display: flex; justify-content: center; gap: 8px; margin-top: 40px; }
.sk-pagination .page-numbers {
  min-width: 44px; height: 44px; padding: 0 12px; border-radius: 12px;
  display: grid; place-items: center; font-weight: 800; text-decoration: none;
  background: #fff; border: 1px solid var(--sk-line); color: var(--sk-ink);
}
.sk-pagination .page-numbers.current { background: var(--sk-blue); border-color: var(--sk-blue); color: #fff; }
.sk-pagination a.page-numbers:hover { border-color: var(--sk-blue); }

.sk-blog-cta .sk-lead { margin-bottom: 22px; }

/* ---------- Статья ---------- */
.sk-post-hero__wrap { max-width: 900px; }
.sk-post-hero .sk-pcard__cat { margin-bottom: 14px; }
.sk-post-hero h1 { font-size: clamp(28px, 4vw, 44px); }
.sk-post-meta { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 20px !important; font-size: 14px; font-weight: 700; color: var(--sk-ink-soft); }
.sk-post-meta > * + *::before { content: "·"; margin-right: 18px; color: var(--sk-ink-mute); }

.sk-post-layout { max-width: 780px; }
.sk-post-layout.has-toc { max-width: 1120px; display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 56px; align-items: start; }

.sk-toc { position: sticky; top: 110px; padding: 20px 22px; border-radius: var(--sk-r); background: var(--sk-bg); border: 1px solid var(--sk-line); }
.sk-toc__title { font-size: 12.5px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; color: var(--sk-ink-mute); margin-bottom: 12px !important; }
.sk-toc ol { margin: 0; padding-left: 18px; display: grid; gap: 9px; font-size: 14.5px; line-height: 1.4; }
.sk-toc a { color: var(--sk-ink-soft); text-decoration: none; font-weight: 700; }
.sk-toc a:hover { color: var(--sk-coral); }

/* Типографика статьи */
.sk-article { max-width: 720px; font-size: 17.5px; line-height: 1.75; color: var(--sk-ink); }
.sk-article > * + * { margin-top: 1.1em; }
.sk-article p { margin: 0; }
.sk-article h2 { font-size: clamp(24px, 2.6vw, 30px); margin-top: 1.9em !important; scroll-margin-top: 110px; }
.sk-article h3 { font-size: 20px; margin-top: 1.5em !important; }
.sk-article a { color: var(--sk-blue); text-underline-offset: 3px; }
.sk-article a:hover { color: var(--sk-coral); }
.sk-article ul, .sk-article ol { padding-left: 1.3em; }
.sk-article li + li { margin-top: .45em; }
.sk-article li::marker { color: var(--sk-blue); font-weight: 900; }
.sk-article strong { font-weight: 800; }
.sk-article blockquote { margin: 1.5em 0; padding: 4px 0 4px 22px; border-left: 4px solid var(--sk-yellow); font-style: italic; color: var(--sk-ink-soft); }
.sk-article img { max-width: 100%; height: auto; border-radius: var(--sk-r); }
.sk-article__cover { margin: 0 0 1.6em; }
.sk-article table { width: 100%; border-collapse: collapse; font-size: 15.5px; }
.sk-article th, .sk-article td { padding: 10px 12px; border-bottom: 1px solid var(--sk-line); text-align: left; }
.sk-article th { background: var(--sk-bg); font-weight: 800; }

/* Шаги и заметки внутри статьи */
.sk-article ol.sk-steps { list-style: none; padding: 0; counter-reset: st; display: grid; gap: 14px; }
.sk-article ol.sk-steps > li {
  counter-increment: st; position: relative; margin: 0;
  padding: 18px 20px 18px 70px; border-radius: var(--sk-r); background: var(--sk-bg); border: 1px solid var(--sk-line);
}
.sk-article ol.sk-steps > li::before {
  content: counter(st); position: absolute; left: 18px; top: 16px;
  width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
  background: var(--sk-coral); color: #fff; font-weight: 900; font-size: 16px;
}
.sk-article ol.sk-steps > li strong:first-child { display: block; margin-bottom: 2px; }
.sk-note {
  padding: 18px 22px; border-radius: var(--sk-r); background: var(--sk-yellow-soft); border: 1px solid #F6DC8E;
  font-size: 16px; line-height: 1.65;
}
.sk-note--blue { background: var(--sk-bg-alt); border-color: #C9DEEC; }
.sk-article .sk-faq-block h3 { font-size: 18px; }

/* CTA в конце статьи */
.sk-article__cta {
  display: flex; align-items: center; gap: 20px; margin-top: 2.4em !important;
  padding: 24px 26px; border-radius: var(--sk-r-lg); background: var(--sk-yellow-soft); border: 1px solid #F6DC8E;
}
.sk-article__cta .sk-sun { flex: 0 0 auto; width: 64px; height: 64px; }
.sk-article__cta div { flex: 1; }
.sk-article__cta p { font-size: 15.5px; line-height: 1.5; color: var(--sk-ink-soft); }
.sk-article__cta .sk-article__cta-title { font-size: 18px; font-weight: 900; color: var(--sk-ink); margin-bottom: 4px; }

.sk-post-related__title { text-align: center; margin-bottom: 30px; }

@media (max-width: 1080px) {
  .sk-blog-grid { grid-template-columns: repeat(2, 1fr); }
  .sk-post-layout.has-toc { grid-template-columns: 1fr; gap: 24px; max-width: 780px; }
  .sk-toc { position: static; }
}
@media (max-width: 760px) {
  .sk-blog-grid { grid-template-columns: 1fr; }
  .sk-pcard--big { flex-direction: column; }
  .sk-pcard--big .sk-pcard__media { min-height: 0; aspect-ratio: 16 / 10; }
  .sk-article { font-size: 17px; }
  .sk-article__cta { flex-direction: column; align-items: flex-start; }
  .sk-article ol.sk-steps > li { padding-left: 62px; }
}

/* Правки: солнце в карточках и CTA стоит на месте; отступы статьи сильнее .sk p */
.sk-pcard__art .sk-sun, .sk-article__cta .sk-sun { position: static; transform: none; }
.sk .sk-article > * + * { margin-top: 1.1em; }
.sk .sk-article > h2 { margin-top: 1.9em; margin-bottom: -.2em; }
.sk .sk-article > h3 { margin-top: 1.5em; }
.sk .sk-article li > p { margin: 0; }
.sk .sk-faq-block h3 { margin-top: 1.4em; margin-bottom: .35em; }
.sk .sk-faq-block h3:first-child { margin-top: 0; }
.sk .sk-article > p:last-of-type em { font-size: 14.5px; color: var(--sk-ink-mute); }
.sk .sk-article__cta p + p { margin-top: 0; }
.sk .sk-post-hero .sk-pcard__cat { margin-bottom: 14px; }

.sk-final.sk-final--white { background: var(--sk-white); }