.st-blogs {
  background: var(--paper, #f3f7fb);
  color: var(--ink, #10243a);
  font-family: "Segoe UI", sans-serif;
}

.st-blogs a { color: inherit; }

.st-blog-hero {
  padding: 28px 0 8px;
}

.st-blog-hero h1,
.st-blog-article h1 {
  margin: 0 0 8px;
  font-size: clamp(2rem, 4vw, 3.4rem);
  line-height: 1.05;
  letter-spacing: -0.04em;
  color: var(--navy, #071d35);
}

.st-blog-hero p,
.st-blog-lead {
  max-width: 42rem;
  color: #3e5872;
  font-size: 1.08rem;
}

.st-blog-wrap {
  width: min(1120px, calc(100% - 32px));
  margin: 0 auto;
  padding-bottom: 64px;
}

.st-crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 18px 0;
  color: #5d7590;
  font-size: 0.92rem;
}

.st-crumbs a { color: var(--brand-2, #0e9cc6); text-decoration: none; }

.st-blog-filters,
.st-blog-article,
.st-blog-card,
.st-related-card {
  background: white;
  border: 1px solid #e2ebf4;
  border-radius: 22px;
  box-shadow: 0 10px 30px rgba(7, 29, 53, 0.05);
}

.st-blog-filters { padding: 16px; margin-bottom: 22px; }

.st-blog-filters form,
.st-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: end;
}

.st-blog-filters label {
  display: block;
  margin-bottom: 6px;
  font-size: 0.82rem;
  font-weight: 700;
}

.st-field { flex: 1 1 220px; }

.st-blog-filters select,
.st-blog-filters input,
.st-field input,
.st-field select,
.st-field textarea {
  width: 100%;
  box-sizing: border-box;
}

.st-blog-filters button,
.st-btn {
  border: 0;
  border-radius: 999px;
  background: var(--brand, #13b9e8);
  color: var(--navy, #071d35);
  font-weight: 800;
  padding: 12px 18px;
  cursor: pointer;
}

.st-chip-row { margin: 0 0 18px; }

.st-chip {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 7px 12px;
  background: #e7f7fd;
  color: var(--navy, #071d35);
  text-decoration: none;
  font-weight: 700;
  font-size: 0.88rem;
}

.st-chip.is-active { background: var(--navy, #071d35); color: white; }

.st-blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.st-blog-card {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 100%;
  text-decoration: none;
}

.st-blog-card.is-featured { grid-column: 1 / -1; display: grid; grid-template-columns: 1.3fr 1fr; }

.st-blog-card img,
.st-blog-figure img,
.st-related-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.st-blog-card-media { aspect-ratio: 16 / 10; background: #d7e6f2; }

.st-blog-card.is-featured .st-blog-card-media { min-height: 280px; aspect-ratio: auto; }

.st-blog-card-body { padding: 18px 18px 20px; }

.st-kicker {
  display: inline-block;
  margin-bottom: 8px;
  color: var(--brand-2, #0e9cc6);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.st-blog-card h2,
.st-related-card h3 {
  margin: 0 0 8px;
  font-size: 1.25rem;
  line-height: 1.25;
  letter-spacing: -0.03em;
}

.st-blog-card p,
.st-related-card p { color: #4d647c; }

.st-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  margin-top: 14px;
  color: #6b8196;
  font-size: 0.88rem;
}

.st-blog-article { padding: clamp(20px, 4vw, 48px); }

.st-blog-article .st-blog-lead { font-size: 1.2rem; margin: 12px 0 22px; }

.st-cover {
  width: 100%;
  aspect-ratio: 16 / 8;
  object-fit: cover;
  border-radius: 18px;
  margin: 8px 0 28px;
  background: #d7e6f2;
}

.st-blog-content {
  max-width: 44rem;
  font-size: 1.08rem;
  line-height: 1.75;
}

.st-blog-content h2 {
  margin: 1.6em 0 0.4em;
  font-size: 1.55rem;
  letter-spacing: -0.03em;
  line-height: 1.2;
}

.st-blog-content h3 { margin: 1.2em 0 0.3em; font-size: 1.15rem; }

.st-blog-content p { margin: 0 0 0.9em; }

.st-blog-content ul,
.st-blog-content ol { margin: 0 0 1em; padding-left: 1.2em; }

.st-blog-content a { color: var(--brand-2, #0e9cc6); }

.st-blog-content .blog-image-slot,
.st-blog-content p:empty { display: none; }

.blog-figure { margin: 1.4em 0 1.6em; }

.blog-figure img {
  width: 100%;
  height: auto;
  border-radius: 16px;
  background: #e7eef6;
}

.blog-figure figcaption {
  margin-top: 8px;
  color: #60778d;
  font-size: 0.9rem;
}

.st-related { margin-top: 28px; }

.st-related-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.st-related-card { overflow: hidden; text-decoration: none; }

.st-related-card div { padding: 14px; }

.st-pager { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }

.st-pager a,
.st-pager span {
  min-width: 40px;
  padding: 8px 12px;
  border-radius: 999px;
  background: white;
  text-align: center;
  text-decoration: none;
}

.st-pager .is-current { background: var(--navy, #071d35); color: white; }

.st-empty { padding: 40px 20px; text-align: center; }

@media (max-width: 900px) {
  .st-blog-grid,
  .st-related-grid,
  .st-blog-card.is-featured { grid-template-columns: 1fr; }
  .st-blog-card.is-featured { display: flex; }
}
