/* ===== CodArt Blog / Insights ===== */
.blog-home,
.blog-index,
.blog-article,
.svc-related-blog {
  position: relative;
  isolation: isolate;
}

.blog-home {
  padding: clamp(70px, 7vw, 110px) 0;
  background:
    radial-gradient(circle at 14% 18%, rgba(148,104,180,.10), transparent 26%),
    radial-gradient(circle at 86% 64%, rgba(148,104,180,.08), transparent 22%),
    linear-gradient(180deg, rgba(246,246,250,.96), rgba(244,244,248,.98));
  border-top: 1px solid rgba(224,223,232,.75);
}

.blog-shell {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
}

.blog-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 30px;
}

.blog-kicker {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(148,104,180,.20);
  color: #9468B4;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.blog-kicker i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #9468B4;
  box-shadow: 0 0 0 6px rgba(148,104,180,.10);
}

.blog-head h2,
.blog-index__title,
.blog-article__title {
  margin: 14px 0 0;
  color: #1a1918;
  font-weight: 900;
  letter-spacing: -.055em;
  line-height: .96;
}

.blog-head h2 { font-size: clamp(38px, 5vw, 72px); }
.blog-head p,
.blog-index__sub,
.blog-article__lead {
  color: #626670;
  font-size: 16px;
  line-height: 1.75;
  max-width: 650px;
}

.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.blog-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 330px;
  padding: 22px;
  border-radius: 28px;
  background: linear-gradient(145deg, rgba(255,255,255,.92), rgba(255,255,255,.66));
  border: 1px solid rgba(225,223,234,.95);
  box-shadow: 0 22px 58px rgba(98,83,128,.10);
  color: inherit;
  text-decoration: none;
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.blog-card:hover {
  transform: translateY(-4px);
  border-color: rgba(148,104,180,.32);
  box-shadow: 0 30px 76px rgba(98,83,128,.16);
}

.blog-card::before {
  content: "";
  position: absolute;
  right: -80px;
  top: -80px;
  width: 210px;
  height: 210px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(148,104,180,.18), transparent 66%);
}

.blog-card__visual {
  position: relative;
  height: 116px;
  border-radius: 22px;
  background:
    radial-gradient(circle at 28% 38%, rgba(148,104,180,.22), transparent 18%),
    radial-gradient(circle at 72% 52%, rgba(148,104,180,.16), transparent 22%),
    linear-gradient(135deg, rgba(250,248,253,.98), rgba(241,239,247,.98));
  border: 1px solid rgba(224,218,234,.95);
  margin-bottom: 20px;
  overflow: hidden;
}

.blog-card__visual::after {
  content: attr(data-label);
  position: absolute;
  left: 18px;
  bottom: 16px;
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.78);
  color: #9468B4;
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .08em;
}

.blog-card__meta {
  position: relative;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
  color: #737782;
  font-size: 12px;
  font-weight: 800;
}

.blog-card__meta span:first-child {
  color: #9468B4;
}

.blog-card h3 {
  position: relative;
  margin: 0 0 12px;
  color: #1a1918;
  font-size: 22px;
  line-height: 1.18;
  letter-spacing: -.035em;
}

.blog-card p {
  position: relative;
  margin: 0;
  color: #626670;
  font-size: 14px;
  line-height: 1.65;
}

.blog-card__foot {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: auto;
  padding-top: 20px;
  color: #9468B4;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.blog-tags {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 16px;
}

.blog-tags span {
  padding: 6px 9px;
  border-radius: 999px;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(224,218,234,.95);
  color: #686d78;
  font-size: 11px;
  font-weight: 800;
}

.blog-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 18px;
  border-radius: 16px;
  border: 1px solid rgba(148,104,180,.22);
  background: rgba(255,255,255,.70);
  color: #9468B4;
  text-decoration: none;
  font-weight: 900;
  box-shadow: 0 12px 28px rgba(98,83,128,.08);
}

/* Blog listing */
.blog-index {
  padding: 145px 0 80px;
  min-height: 100vh;
  background:
    radial-gradient(circle at 16% 12%, rgba(148,104,180,.10), transparent 24%),
    radial-gradient(circle at 82% 35%, rgba(148,104,180,.08), transparent 22%),
    linear-gradient(180deg, #f7f7fb, #f4f4f8);
}

.blog-index__hero {
  margin-bottom: 36px;
}

.blog-index__title {
  max-width: 780px;
  font-size: clamp(54px, 8vw, 104px);
}

.blog-index__sub {
  margin-top: 18px;
}

.blog-filter-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 30px 0 34px;
}

.blog-filter-row span {
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.68);
  border: 1px solid rgba(224,218,234,.95);
  color: #646a74;
  font-size: 12px;
  font-weight: 900;
}

.blog-filter-row span:first-child {
  color: #fff;
  background: linear-gradient(135deg, #a56bc0 0%, #8244a6 100%);
  border-color: transparent;
}

.blog-index .blog-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* Blog article */
.blog-article {
  padding: 135px 0 80px;
  background:
    radial-gradient(circle at 12% 10%, rgba(148,104,180,.10), transparent 24%),
    radial-gradient(circle at 82% 28%, rgba(148,104,180,.08), transparent 22%),
    linear-gradient(180deg, #f7f7fb, #f4f4f8);
}

.blog-article__wrap {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 24px;
}

.blog-back {
  display: inline-flex;
  color: #9468B4;
  text-decoration: none;
  font-weight: 900;
  margin-bottom: 28px;
}

.blog-article__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 22px;
}

.blog-article__meta span {
  padding: 9px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.70);
  border: 1px solid rgba(224,218,234,.95);
  color: #656a74;
  font-size: 12px;
  font-weight: 900;
}

.blog-article__meta span:first-child { color: #9468B4; }

.blog-article__title {
  max-width: 880px;
  font-size: clamp(46px, 7vw, 88px);
}

.blog-article__lead {
  margin-top: 24px;
  font-size: 18px;
}

.blog-article__cover {
  position: relative;
  height: 300px;
  margin: 42px 0;
  border-radius: 34px;
  border: 1px solid rgba(224,218,234,.95);
  background:
    radial-gradient(circle at 38% 48%, rgba(148,104,180,.28), transparent 16%),
    radial-gradient(circle at 64% 42%, rgba(148,104,180,.16), transparent 22%),
    linear-gradient(135deg, rgba(255,255,255,.88), rgba(240,238,247,.96));
  overflow: hidden;
  box-shadow: 0 30px 86px rgba(98,83,128,.13);
}

.blog-article__cover::before,
.blog-article__cover::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(148,104,180,.18);
  inset: 52px 260px 52px 260px;
}

.blog-article__cover::after {
  inset: 88px 335px 88px 335px;
  background: rgba(255,255,255,.46);
}

.blog-article__cover span {
  position: absolute;
  left: 34px;
  bottom: 30px;
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.76);
  color: #9468B4;
  font-family: "JetBrains Mono", monospace;
  font-weight: 900;
  letter-spacing: .10em;
}

.blog-content {
  display: grid;
  gap: 22px;
}

.blog-content section,
.blog-checklist,
.blog-takeaway {
  padding: 28px;
  border-radius: 28px;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(224,218,234,.95);
  box-shadow: 0 18px 46px rgba(98,83,128,.08);
}

.blog-content h2 {
  margin: 0 0 12px;
  color: #1a1918;
  font-size: 28px;
  letter-spacing: -.035em;
}

.blog-content p,
.blog-checklist li,
.blog-takeaway p {
  margin: 0;
  color: #626670;
  font-size: 16px;
  line-height: 1.75;
}

.blog-checklist h2,
.blog-takeaway h2 {
  margin-top: 0;
}

.blog-checklist ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.blog-checklist li {
  position: relative;
  padding-left: 26px;
}

.blog-checklist li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: #9468B4;
  font-weight: 900;
}

.blog-takeaway {
  background: linear-gradient(135deg, rgba(255,255,255,.82), rgba(246,239,251,.92));
}

.svc-related-blog {
  margin: clamp(54px, 7vw, 90px) 0;
}

.svc-related-blog .blog-head {
  align-items: end;
}

.svc-related-blog .blog-head h2 {
  font-size: clamp(34px, 5vw, 62px);
}

.svc-related-blog .blog-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.svc-related-blog .blog-card {
  min-height: 300px;
}

@media (max-width: 900px) {
  .blog-head { display: block; }
  .blog-more { margin-top: 20px; }
  .blog-grid,
  .blog-index .blog-grid,
  .svc-related-blog .blog-grid {
    grid-template-columns: 1fr;
  }
  .blog-card { min-height: auto; }
  .blog-checklist ul { grid-template-columns: 1fr; }
  .blog-article__cover { height: 220px; }
}

@media (max-width: 560px) {
  .blog-shell,
  .blog-article__wrap { padding: 0 16px; }
  .blog-index { padding-top: 112px; }
  .blog-article { padding-top: 112px; }
  .blog-card { border-radius: 22px; padding: 18px; }
  .blog-card__visual { height: 96px; }
  .blog-content section,
  .blog-checklist,
  .blog-takeaway { padding: 20px; border-radius: 22px; }
}

/* ===== Blog width refinement: make homepage/service/blog blocks match full site width ===== */
.blog-shell {
  max-width: 1440px;
  padding-left: clamp(24px, 3vw, 46px);
  padding-right: clamp(24px, 3vw, 46px);
}

.blog-home .blog-shell,
.blog-index .blog-shell {
  max-width: 1500px;
}

.blog-head {
  margin-bottom: 38px;
}

.blog-head p,
.blog-index__sub,
.blog-article__lead {
  max-width: 820px;
}

.blog-grid,
.blog-index .blog-grid,
.svc-related-blog .blog-grid {
  gap: 24px;
}

.blog-card {
  min-height: 360px;
  padding: 26px;
  border-radius: 30px;
}

.blog-card__visual {
  height: 138px;
  border-radius: 24px;
}

.blog-card h3 {
  font-size: 24px;
  line-height: 1.16;
}

.blog-card p {
  font-size: 15px;
  line-height: 1.68;
}

/* Homepage block should feel same width as the main service/catalog blocks */
.blog-home {
  padding-top: clamp(78px, 7vw, 118px);
  padding-bottom: clamp(78px, 7vw, 118px);
}

/* Related blog inside service pages: break out of the narrower service container and center */
.svc-modern .svc-related-blog {
  width: min(1500px, calc(100vw - 56px));
  max-width: none;
  margin-left: 50%;
  transform: translateX(-50%);
  padding: clamp(12px, 1.4vw, 22px) 0 0;
}

.svc-modern .svc-related-blog .blog-card {
  min-height: 345px;
}

/* Blog listing: allow 4 cards per row on wide screens */
@media (min-width: 1320px) {
  .blog-index .blog-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .blog-index .blog-card {
    min-height: 350px;
  }
  .blog-index .blog-card h3 {
    font-size: 22px;
  }
}

/* Blog article: wider page and two-column content cards */
.blog-article__wrap {
  max-width: 1280px;
  padding-left: clamp(24px, 3vw, 46px);
  padding-right: clamp(24px, 3vw, 46px);
}

.blog-article__title {
  max-width: 1180px;
}

.blog-article__lead {
  max-width: 980px;
}

.blog-article__cover {
  height: clamp(320px, 28vw, 430px);
  border-radius: 38px;
}

.blog-content {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 26px;
}

.blog-checklist,
.blog-takeaway {
  grid-column: 1 / -1;
}

.blog-content section,
.blog-checklist,
.blog-takeaway {
  padding: 32px;
}

.blog-content h2 {
  font-size: 30px;
}

.blog-content p,
.blog-checklist li,
.blog-takeaway p {
  font-size: 17px;
}

.blog-article .blog-shell {
  max-width: 1500px;
}

@media (max-width: 1180px) {
  .blog-index .blog-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .svc-modern .svc-related-blog {
    width: 100%;
    margin-left: 0;
    transform: none;
  }
}

@media (max-width: 900px) {
  .blog-shell,
  .blog-article__wrap {
    padding-left: 22px;
    padding-right: 22px;
  }
  .blog-grid,
  .blog-index .blog-grid,
  .svc-related-blog .blog-grid {
    grid-template-columns: 1fr;
  }
  .blog-content {
    grid-template-columns: 1fr;
  }
  .blog-card,
  .svc-modern .svc-related-blog .blog-card {
    min-height: auto;
  }
  .blog-card__visual {
    height: 120px;
  }
}

@media (max-width: 560px) {
  .blog-shell,
  .blog-article__wrap {
    padding-left: 16px;
    padding-right: 16px;
  }
  .blog-card {
    padding: 18px;
    border-radius: 22px;
  }
  .blog-card__visual {
    height: 98px;
  }
  .blog-article__cover {
    height: 220px;
    border-radius: 26px;
  }
  .blog-content section,
  .blog-checklist,
  .blog-takeaway {
    padding: 20px;
  }
}


/* ===== Blog refinement: compact hero, working filters, stronger cards/articles ===== */
.blog-index--refined {
  padding: 108px 0 88px !important;
  overflow: hidden;
}

.blog-index--refined .blog-shell,
.blog-home .blog-shell,
.svc-related-blog .blog-shell {
  max-width: 1480px;
}

.blog-index__hero--refined {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 470px);
  align-items: end;
  gap: clamp(34px, 5vw, 76px);
  margin-bottom: 30px;
  min-height: 0;
}

.blog-index__copy {
  padding-top: clamp(22px, 4vw, 54px);
}

.blog-index--refined .blog-index__title {
  max-width: 760px;
  margin-top: 22px;
  font-size: clamp(54px, 7vw, 92px);
  line-height: .96;
  letter-spacing: -.07em;
}

.blog-index--refined .blog-index__sub {
  max-width: 760px;
  margin-top: 18px;
  font-size: 18px;
  line-height: 1.72;
}

.blog-filter-row--buttons {
  margin: 28px 0 0;
}

.blog-filter-row--buttons button {
  appearance: none;
  border: 1px solid rgba(224,218,234,.95);
  background: rgba(255,255,255,.74);
  color: #646a74;
  font-size: 12px;
  font-weight: 950;
  border-radius: 999px;
  padding: 11px 15px;
  cursor: pointer;
  transition: transform .2s ease, border-color .2s ease, background .2s ease, color .2s ease;
}

.blog-filter-row--buttons button:hover {
  transform: translateY(-1px);
  border-color: rgba(148,104,180,.32);
  color: #9468B4;
}

.blog-filter-row--buttons button.is-active {
  color: #fff;
  background: linear-gradient(135deg, #a56bc0 0%, #8244a6 100%);
  border-color: transparent;
  box-shadow: 0 16px 34px rgba(148,104,180,.22);
}

.blog-featured-card {
  display: block;
  text-decoration: none;
  color: inherit;
  padding: 24px;
  border-radius: 34px;
  background: linear-gradient(145deg, rgba(255,255,255,.90), rgba(255,255,255,.62));
  border: 1px solid rgba(224,218,234,.95);
  box-shadow: 0 30px 90px rgba(98,83,128,.13);
  overflow: hidden;
  position: relative;
}

.blog-featured-card::before {
  content: "";
  position: absolute;
  inset: -90px -90px auto auto;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(148,104,180,.18), transparent 64%);
}

.blog-featured-card__top,
.blog-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.blog-featured-card__top {
  position: relative;
  z-index: 1;
  margin-bottom: 18px;
  color: #9468B4;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: .10em;
  text-transform: uppercase;
  font-weight: 950;
}

.blog-featured-card__top b {
  color: #74707e;
  font-size: 10px;
}

.blog-featured-card__visual {
  position: relative;
  height: 230px;
  border-radius: 28px;
  border: 1px solid rgba(224,218,234,.95);
  background:
    radial-gradient(circle at 50% 52%, rgba(148,104,180,.30), transparent 10%),
    radial-gradient(circle at 30% 38%, rgba(148,104,180,.14), transparent 18%),
    radial-gradient(circle at 70% 56%, rgba(148,104,180,.12), transparent 20%),
    linear-gradient(135deg, rgba(251,249,253,.98), rgba(241,239,247,.96));
  overflow: hidden;
}

.blog-featured-card__visual::before,
.blog-featured-card__visual::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(148,104,180,.18);
  inset: 34px 84px;
}

.blog-featured-card__visual::after { inset: 64px 130px; background: rgba(255,255,255,.34); }

.blog-featured-card__visual span {
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #9468B4;
  box-shadow: 0 0 0 8px rgba(148,104,180,.10);
}
.blog-featured-card__visual span:nth-child(1){ left: 25%; top: 42%; }
.blog-featured-card__visual span:nth-child(2){ right: 25%; top: 34%; }
.blog-featured-card__visual span:nth-child(3){ right: 38%; bottom: 24%; }


.blog-featured-card__visual[data-label]::after {
  content: attr(data-label);
  position: absolute;
  left: 22px;
  bottom: 20px;
  z-index: 3;
  padding: 9px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.80);
  color: #9468B4;
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  font-weight: 950;
  letter-spacing: .10em;
}


.blog-featured-card__visual + .blog-featured-card__body { margin-top: 22px; }

.blog-featured-card h2 {
  margin: 10px 0 12px;
  font-size: 30px;
  line-height: 1.05;
  letter-spacing: -.045em;
  color: #1a1918;
}

.blog-featured-card p {
  margin: 0;
  color: #626670;
  font-size: 15px;
  line-height: 1.7;
}

.blog-toolbar {
  margin: 0 0 28px;
  padding: 16px 18px;
  border-radius: 22px;
  border: 1px solid rgba(224,218,234,.95);
  background: rgba(255,255,255,.62);
  box-shadow: 0 18px 50px rgba(98,83,128,.07);
}

.blog-toolbar > div:first-child {
  display: flex;
  align-items: baseline;
  gap: 8px;
  color: #686d78;
  font-weight: 850;
}

.blog-toolbar b {
  color: #9468B4;
  font-size: 24px;
  letter-spacing: -.04em;
}

.blog-search {
  position: relative;
  flex: 0 1 420px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 16px;
  height: 48px;
  border-radius: 16px;
  background: rgba(255,255,255,.88);
  border: 1px solid rgba(224,218,234,.95);
}

.blog-search span {
  color: #9468B4;
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  font-weight: 950;
  letter-spacing: .10em;
  text-transform: uppercase;
}

.blog-search input {
  width: 100%;
  border: 0;
  outline: none;
  background: transparent;
  color: #1a1918;
  font: inherit;
  font-size: 14px;
}

.blog-grid--refined {
  align-items: stretch;
}

.blog-card--article {
  min-height: 392px;
  padding: 0;
  border-radius: 32px;
  background: linear-gradient(145deg, rgba(255,255,255,.94), rgba(255,255,255,.68));
}

.blog-card--article[hidden] { display: none !important; }

.blog-card--article .blog-card__visual {
  height: 165px;
  margin: 18px 18px 0;
  border-radius: 25px;
}

.blog-card__visual[data-label]::after {
  left: 18px;
  bottom: 16px;
  z-index: 3;
}

.blog-card__number {
  position: absolute;
  top: 14px;
  right: 16px;
  z-index: 3;
  color: rgba(26,25,24,.34);
  font-family: "JetBrains Mono", monospace;
  font-weight: 950;
  font-size: 13px;
}

.blog-card__orb {
  position: absolute;
  border-radius: 50%;
  z-index: 2;
}

.blog-card__orb--one {
  width: 78px;
  height: 78px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(148,104,180,.33), rgba(148,104,180,.08) 58%, transparent 60%);
  border: 1px solid rgba(148,104,180,.18);
}

.blog-card__orb--two {
  width: 16px;
  height: 16px;
  left: 30%;
  top: 42%;
  background: #9468B4;
  box-shadow: 0 0 0 8px rgba(148,104,180,.10);
}

.blog-card__line {
  position: absolute;
  left: 18%;
  right: 18%;
  top: 50%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(148,104,180,.36), transparent);
}

.blog-card--article .blog-card__meta,
.blog-card--article h3,
.blog-card--article p,
.blog-card--article .blog-tags,
.blog-card--article .blog-card__foot {
  margin-left: 24px;
  margin-right: 24px;
}

.blog-card--article .blog-card__meta { margin-top: 22px; }
.blog-card--article h3 { font-size: 24px; }
.blog-card--article p { font-size: 15px; }
.blog-card--article .blog-card__foot { padding-bottom: 24px; }

.blog-empty {
  margin: 34px 0 0;
  padding: 36px;
  border-radius: 28px;
  background: rgba(255,255,255,.70);
  border: 1px solid rgba(224,218,234,.95);
  text-align: center;
}
.blog-empty h2 { margin: 0 0 8px; color: #1a1918; }
.blog-empty p { margin: 0; color: #626670; }

/* Article page refinement */
.blog-article--refined { padding-top: 110px !important; }
.blog-article__wrap--refined { max-width: 1460px !important; }

.blog-article-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 500px);
  gap: clamp(36px, 5vw, 80px);
  align-items: start;
}

.blog-article-hero__copy .blog-article__title {
  max-width: 920px;
  font-size: clamp(52px, 6vw, 92px);
}

.blog-article-hero__copy .blog-article__lead {
  max-width: 820px;
}

.blog-tags--article { margin-top: 24px; }

.blog-article-hero__panel {
  position: sticky;
  top: 110px;
}

.blog-article-hero__panel .blog-article__cover {
  margin: 0;
  height: 310px;
}

.blog-article-summary {
  margin-top: 18px;
  padding: 22px;
  border-radius: 24px;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(224,218,234,.95);
  box-shadow: 0 18px 50px rgba(98,83,128,.08);
}

.blog-article-summary b,
.blog-aside-card span {
  display: block;
  color: #9468B4;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  font-weight: 950;
  letter-spacing: .10em;
  text-transform: uppercase;
  margin-bottom: 14px;
}

.blog-article-summary ul,
.blog-aside-card { margin: 0; }
.blog-article-summary ul { padding-left: 18px; color: #626670; line-height: 1.7; }

.blog-article-layout {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  gap: 34px;
  margin-top: 58px;
}

.blog-article-aside { position: relative; }
.blog-aside-card {
  position: sticky;
  top: 110px;
  padding: 18px;
  border-radius: 22px;
  background: rgba(255,255,255,.70);
  border: 1px solid rgba(224,218,234,.95);
  box-shadow: 0 18px 50px rgba(98,83,128,.08);
}

.blog-aside-card a {
  display: block;
  padding: 10px 0;
  border-top: 1px solid rgba(224,218,234,.75);
  color: #626670;
  text-decoration: none;
  font-size: 13px;
  font-weight: 800;
}

.blog-aside-card a:hover { color: #9468B4; }

.blog-content--refined {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.blog-content--refined section {
  position: relative;
  min-height: 230px;
  padding: 34px;
}

.blog-section-num {
  position: absolute;
  top: 28px;
  right: 30px;
  color: rgba(148,104,180,.32);
  font-family: "JetBrains Mono", monospace;
  font-weight: 950;
}

.blog-content--refined h2 { max-width: 82%; }
.blog-related-after-article { margin-top: clamp(70px, 7vw, 110px) !important; }

@media (min-width: 1320px) {
  .blog-index--refined .blog-grid--refined { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 1180px) {
  .blog-index__hero--refined,
  .blog-article-hero,
  .blog-article-layout { grid-template-columns: 1fr; }
  .blog-article-hero__panel,
  .blog-aside-card { position: relative; top: auto; }
  .blog-article-aside { display: none; }
  .blog-content--refined { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  .blog-index--refined { padding-top: 104px !important; }
  .blog-index--refined .blog-index__title { font-size: clamp(44px, 13vw, 64px); }
  .blog-featured-card { padding: 18px; border-radius: 26px; }
  .blog-featured-card__visual { height: 180px; border-radius: 22px; }
  .blog-toolbar { display: block; }
  .blog-search { margin-top: 14px; max-width: none; }
}

@media (max-width: 560px) {
  .blog-index--refined { padding-top: 92px !important; }
  .blog-index__copy { padding-top: 10px; }
  .blog-filter-row--buttons { gap: 8px; }
  .blog-filter-row--buttons button { padding: 10px 12px; font-size: 11px; }
  .blog-card--article .blog-card__visual { height: 130px; margin: 14px 14px 0; }
  .blog-card--article .blog-card__meta,
  .blog-card--article h3,
  .blog-card--article p,
  .blog-card--article .blog-tags,
  .blog-card--article .blog-card__foot { margin-left: 18px; margin-right: 18px; }
  .blog-article-hero__panel .blog-article__cover { height: 220px; }
  .blog-content--refined section { padding: 24px; min-height: 0; }
  .blog-content--refined h2 { max-width: none; }
}


/* ===== Blog pagination + real filters refinement ===== */
.blog-index--paginated {
  padding-top: 112px !important;
}

.blog-index__hero--compact {
  display: grid;
  grid-template-columns: minmax(0, .94fr) minmax(380px, .62fr);
  align-items: end;
  gap: clamp(28px, 4vw, 64px);
  min-height: auto !important;
  margin-bottom: clamp(28px, 4vw, 58px) !important;
  padding-top: clamp(28px, 4vw, 64px);
}

.blog-index--paginated .blog-index__title {
  max-width: 820px;
  font-size: clamp(54px, 6.6vw, 96px) !important;
  line-height: .92 !important;
}

.blog-index--paginated .blog-index__sub {
  max-width: 780px;
  font-size: 17px;
}

.blog-hero-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
}

.blog-hero-stats span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(224,218,234,.95);
  color: #646a74;
  font-size: 12px;
  font-weight: 900;
}

.blog-hero-stats b {
  color: #9468B4;
  font-size: 15px;
}

.blog-featured-card--compact {
  min-height: 440px;
  margin-top: 0;
}

.blog-catalog {
  display: grid;
  grid-template-columns: 310px minmax(0, 1fr);
  gap: 28px;
  align-items: start;
}

.blog-filter-panel {
  position: sticky;
  top: 102px;
  border-radius: 30px;
  padding: 22px;
  background: linear-gradient(145deg, rgba(255,255,255,.90), rgba(255,255,255,.62));
  border: 1px solid rgba(224,218,234,.95);
  box-shadow: 0 24px 70px rgba(98,83,128,.10);
  overflow: hidden;
}

.blog-filter-panel::before {
  content: "";
  position: absolute;
  right: -76px;
  top: -76px;
  width: 210px;
  height: 210px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(148,104,180,.18), transparent 68%);
  pointer-events: none;
}

.blog-filter-panel__head,
.blog-search--panel,
.blog-filter-list,
.blog-filter-panel__note {
  position: relative;
  z-index: 1;
}

.blog-filter-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 18px;
}

.blog-filter-panel__head span {
  color: #1a1918;
  font-size: 18px;
  font-weight: 950;
  letter-spacing: -.035em;
}

.blog-filter-panel__head b {
  min-width: 38px;
  height: 38px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(148,104,180,.10);
  border: 1px solid rgba(148,104,180,.18);
  color: #9468B4;
  font-weight: 950;
}

.blog-search--panel {
  display: block;
  margin: 0 0 18px !important;
}

.blog-search--panel span {
  display: block;
  margin-bottom: 8px;
  color: #737782;
  font-size: 11px;
  font-weight: 950;
  letter-spacing: .10em;
  text-transform: uppercase;
}

.blog-search--panel input {
  width: 100%;
  height: 48px;
  border-radius: 16px;
  border: 1px solid rgba(224,218,234,.95);
  background: rgba(255,255,255,.80);
  padding: 0 14px;
  color: #1a1918;
  font-weight: 800;
  outline: none;
}

.blog-search--panel input:focus {
  border-color: rgba(148,104,180,.42);
  box-shadow: 0 0 0 4px rgba(148,104,180,.10);
}

.blog-filter-list {
  display: grid;
  gap: 9px;
}

.blog-filter-list button {
  width: 100%;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 12px 0 14px;
  border-radius: 15px;
  border: 1px solid rgba(224,218,234,.95);
  background: rgba(255,255,255,.70);
  color: #646a74;
  font-weight: 950;
  cursor: pointer;
  transition: transform .2s ease, border-color .2s ease, background .2s ease, color .2s ease;
}

.blog-filter-list button:hover {
  transform: translateY(-1px);
  border-color: rgba(148,104,180,.28);
}

.blog-filter-list button.is-active {
  color: #fff;
  background: linear-gradient(135deg, #a56bc0 0%, #8244a6 100%);
  border-color: transparent;
  box-shadow: 0 12px 30px rgba(148,104,180,.22);
}

.blog-filter-list button b {
  min-width: 26px;
  height: 26px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(148,104,180,.10);
  color: #9468B4;
  font-size: 11px;
}

.blog-filter-list button.is-active b {
  background: rgba(255,255,255,.22);
  color: #fff;
}

.blog-filter-panel__note {
  margin-top: 18px;
  padding: 16px;
  border-radius: 18px;
  background: rgba(246,239,251,.68);
  border: 1px solid rgba(148,104,180,.12);
}

.blog-filter-panel__note b {
  display: block;
  color: #9468B4;
  font-size: 12px;
  font-weight: 950;
  margin-bottom: 6px;
}

.blog-filter-panel__note p {
  margin: 0;
  color: #686d78;
  font-size: 12px;
  line-height: 1.55;
  font-weight: 700;
}

.blog-catalog__main {
  min-width: 0;
}

.blog-toolbar--catalog {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 20px;
  padding: 18px 20px;
  border-radius: 24px;
  background: rgba(255,255,255,.70);
  border: 1px solid rgba(224,218,234,.95);
  box-shadow: 0 16px 42px rgba(98,83,128,.07);
}

.blog-toolbar--catalog b,
.blog-toolbar--catalog i {
  color: #9468B4;
  font-style: normal;
}

.blog-toolbar--catalog span {
  color: #646a74;
  font-weight: 800;
}

.blog-reset {
  min-height: 42px;
  padding: 0 14px;
  border-radius: 14px;
  border: 1px solid rgba(148,104,180,.22);
  background: rgba(255,255,255,.78);
  color: #9468B4;
  font-size: 12px;
  font-weight: 950;
  cursor: pointer;
}

.blog-grid--paginated {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  align-items: stretch;
}

.blog-card--catalog {
  min-height: 390px !important;
}

.blog-card[hidden] {
  display: none !important;
}

.blog-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 32px 0 0;
}

.blog-pagination[hidden] {
  display: none !important;
}

.blog-page-btn {
  min-width: 42px;
  height: 42px;
  padding: 0 12px;
  border-radius: 14px;
  border: 1px solid rgba(224,218,234,.95);
  background: rgba(255,255,255,.72);
  color: #626670;
  font-weight: 950;
  cursor: pointer;
  transition: transform .2s ease, border-color .2s ease, background .2s ease, color .2s ease;
}

.blog-page-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  border-color: rgba(148,104,180,.28);
  color: #9468B4;
}

.blog-page-btn.is-active {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(135deg, #a56bc0 0%, #8244a6 100%);
  box-shadow: 0 12px 30px rgba(148,104,180,.22);
}

.blog-page-btn:disabled {
  opacity: .42;
  cursor: not-allowed;
}

.blog-empty {
  margin-top: 22px;
  padding: 34px;
  border-radius: 26px;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(224,218,234,.95);
  text-align: center;
}

.blog-empty h2 {
  margin: 0 0 8px;
  color: #1a1918;
  font-size: 26px;
}

.blog-empty p {
  margin: 0;
  color: #626670;
  font-weight: 700;
}

@media (min-width: 1500px) {
  .blog-shell { max-width: 1540px; }
  .blog-catalog { grid-template-columns: 330px minmax(0, 1fr); gap: 34px; }
}

@media (max-width: 1180px) {
  .blog-index__hero--compact {
    grid-template-columns: 1fr;
  }
  .blog-featured-card--compact {
    max-width: 760px;
  }
  .blog-catalog {
    grid-template-columns: 1fr;
  }
  .blog-filter-panel {
    position: relative;
    top: auto;
  }
  .blog-filter-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .blog-grid--paginated {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 720px) {
  .blog-index--paginated {
    padding-top: 106px !important;
  }
  .blog-index--paginated .blog-index__title {
    font-size: clamp(42px, 13vw, 64px) !important;
  }
  .blog-filter-list {
    grid-template-columns: 1fr;
  }
  .blog-grid--paginated {
    grid-template-columns: 1fr !important;
  }
  .blog-toolbar--catalog {
    display: block !important;
  }
  .blog-reset {
    margin-top: 12px;
    width: 100%;
  }
  .blog-pagination {
    flex-wrap: wrap;
  }
  .blog-page-btn {
    min-width: 40px;
  }
}