/* KeywordStat — Astra content pages under the design guide.
   Learning Center (category archive), single posts and legal pages are rendered
   by Astra templates. This layer aligns them to the Style Guide without
   replacing templates.

   Tokens taken from keywordstat style guide.md: colours, radius, shadow, spacing.
   NOT taken: "Body Text 14px" — that guide describes the dashboard (KPI cards,
   table rows). 14px would be unreadable for long-form articles, so body copy
   keeps a readable size. */

:root {
  --ksc-blue: #2563eb;
  --ksc-blue-dark: #1d4ed8;
  --ksc-text: #111827;
  --ksc-sub: #4b5563;
  --ksc-muted: #6b7280;
  --ksc-bg: #f8fafc;
  --ksc-soft: #f9fafb;
  --ksc-border: #e5e7eb;
  --ksc-radius: 16px;
  --ksc-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 2px 8px rgba(0, 0, 0, .03);
  --ksc-shadow-hover: 0 4px 16px rgba(15, 23, 42, .08);
}

/* ── Page canvas ───────────────────────────────────────────────── */
body.archive,
body.single-post,
body.page:not(.ks-app-page) {
  background: var(--ksc-bg);
  color: var(--ksc-text);
}

/* ── Archive title (Learning Center) ───────────────────────────── */
body.archive .ast-archive-description {
  background: transparent;
  border: 0;
  padding: 40px 0 8px;
  max-width: none;
  text-align: center;
}
body.archive .ast-archive-title,
body.archive .ast-archive-description h1 {
  color: var(--ksc-text);
  font-weight: 800;
  letter-spacing: -1px;
}
body.archive .ast-archive-description p {
  color: var(--ksc-sub);
}

/* ── Post cards ────────────────────────────────────────────────── */
body.archive .ast-row { align-items: stretch; }

/* Карткою робимо ТІЛЬКИ внутрішню обгортку Astra (.ast-article-inner).
   Зовнішній <article> теж має клас .ast-article-post — якщо стилізувати обидва,
   виходить картка в картці, а padding зовнішньої перебивається темою. */
body.archive article.ast-article-post {
  display: flex;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

body.archive .ast-article-inner {
  display: flex;
  flex-direction: column;
  width: 100%;
  background: #fff;
  border: 1px solid var(--ksc-border);
  border-radius: var(--ksc-radius);
  padding: 24px;
  box-shadow: var(--ksc-shadow);
  transition: box-shadow .15s ease, transform .15s ease;
}
body.archive .ast-article-inner:hover {
  box-shadow: var(--ksc-shadow-hover);
  transform: translateY(-2px);
}

/* thumbnail inside the card */
body.archive .post-thumb-img-content,
body.archive .ast-blog-featured-section img {
  border-radius: 12px;
  overflow: hidden;
}

/* card title */
body.archive .entry-title { margin-bottom: 8px; }
body.archive .entry-title a {
  color: var(--ksc-text);
  font-weight: 700;
  letter-spacing: -.3px;
  text-decoration: none;
}
body.archive .entry-title a:hover { color: var(--ksc-blue); }

/* excerpt */
body.archive .ast-excerpt-container,
body.archive .entry-content p {
  color: var(--ksc-sub);
  font-size: 15px;
  line-height: 1.65;
}

/* read-more as a pill button */
body.archive .ast-button,
body.archive .read-more a {
  background: var(--ksc-blue);
  color: #fff;
  border: 0;
  border-radius: 12px;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}
body.archive .ast-button:hover,
body.archive .read-more a:hover {
  background: var(--ksc-blue-dark);
  color: #fff;
}

/* ── Single post + legal pages: readable long-form ─────────────── */
body.single-post .ast-separate-container .ast-article-single,
body.page:not(.ks-app-page) .ast-separate-container .ast-article-single {
  background: #fff;
  border: 1px solid var(--ksc-border);
  border-radius: var(--ksc-radius);
  box-shadow: var(--ksc-shadow);
}

body.single-post .entry-content,
body.page:not(.ks-app-page) .entry-content {
  color: var(--ksc-sub);
}
body.single-post .entry-content h2,
body.single-post .entry-content h3,
body.page:not(.ks-app-page) .entry-content h2,
body.page:not(.ks-app-page) .entry-content h3 {
  color: var(--ksc-text);
  letter-spacing: -.4px;
  margin-top: 1.6em;
  margin-bottom: .5em;
}
body.single-post .entry-content a,
body.page:not(.ks-app-page) .entry-content a {
  color: var(--ksc-blue);
  text-decoration: underline;
  text-underline-offset: 2px;
}
body.single-post .entry-content a:hover,
body.page:not(.ks-app-page) .entry-content a:hover { color: var(--ksc-blue-dark); }

/* blockquote — brand accent */
body.single-post .entry-content blockquote,
body.page:not(.ks-app-page) .entry-content blockquote {
  border-left: 3px solid var(--ksc-blue);
  background: var(--ksc-soft);
  border-radius: 0 12px 12px 0;
  padding: 16px 20px;
  color: var(--ksc-text);
}

/* code / pre */
body.single-post .entry-content code,
body.page:not(.ks-app-page) .entry-content code {
  background: var(--ksc-soft);
  border: 1px solid var(--ksc-border);
  border-radius: 6px;
  padding: 2px 6px;
  font-size: .9em;
}

/* tables inside articles never push the page */
body.single-post .entry-content table,
body.page:not(.ks-app-page) .entry-content table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  border-radius: 12px;
}

@media (max-width: 700px) {
  body.archive .ast-article-inner { padding: 18px; border-radius: 12px; }
  body.archive .ast-archive-description { padding: 24px 0 4px; }
}

/* Ukrainian Learning Center page. Article content remains linked in English. */
.kslc {
  max-width: 1200px;
  margin: 0 auto;
  padding: 64px 24px 80px;
  color: var(--ksc-text);
}
.kslc-head {
  max-width: 780px;
  margin: 0 auto 40px;
  text-align: center;
}
.kslc-label {
  color: var(--ksc-blue);
  font-size: 13px;
  font-weight: 750;
  text-transform: uppercase;
  letter-spacing: 0;
  margin-bottom: 10px;
}
.kslc-head h1 {
  margin: 0 0 14px;
  color: var(--ksc-text);
  font-size: clamp(36px, 5vw, 56px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: 0;
}
.kslc-head > p {
  margin: 0;
  color: var(--ksc-sub);
  font-size: 17px;
  line-height: 1.65;
}
.kslc-language-note {
  display: inline-flex;
  margin-top: 18px;
  padding: 8px 12px;
  border: 1px solid #bfdbfe;
  border-radius: 6px;
  background: #eff6ff;
  color: #1e40af;
  font-size: 13px;
  font-weight: 600;
}
.kslc-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
.kslc-card {
  display: flex;
  min-width: 0;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--ksc-border);
  border-radius: 8px;
  background: #fff;
  box-shadow: var(--ksc-shadow);
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.kslc-card:hover {
  border-color: #cbd5e1;
  box-shadow: var(--ksc-shadow-hover);
  transform: translateY(-2px);
}
.kslc-image {
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
.kslc-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.kslc-card-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 22px;
}
.kslc-card h2 {
  margin: 0 0 10px;
  font-size: 20px;
  font-weight: 750;
  line-height: 1.25;
  letter-spacing: 0;
}
.kslc-card h2 a {
  color: var(--ksc-text);
  text-decoration: none;
}
.kslc-card h2 a:hover { color: var(--ksc-blue); }
.kslc-card p {
  margin: 0 0 18px;
  color: var(--ksc-sub);
  font-size: 14px;
  line-height: 1.6;
}
.kslc-read {
  margin-top: auto;
  color: var(--ksc-blue);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
}
.kslc-read:hover { color: var(--ksc-blue-dark); }
.kslc-empty {
  padding: 32px;
  border: 1px solid var(--ksc-border);
  border-radius: 8px;
  background: #fff;
  text-align: center;
}
@media (max-width: 900px) {
  .kslc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .kslc { padding: 42px 16px 64px; }
  .kslc-head { margin-bottom: 28px; }
  .kslc-head h1 { font-size: 38px; }
  .kslc-grid { grid-template-columns: 1fr; }
  .kslc-card-body { padding: 18px; }
}