/* Blog index page */

.blog-index-page .blog-index-hero {
  padding-top: clamp(6.2rem, 8vw, 8rem);
  padding-bottom: clamp(3rem, 5vw, 4.6rem);
  background:
    radial-gradient(circle at 50% 0%, rgba(122, 166, 160, 0.04), transparent 34rem),
    var(--min-bg);
}

.blog-index-page .blog-index-hero .eyebrow {
  margin-bottom: 2rem;
  color: var(--min-accent);
}

.blog-index-title {
  margin: 0;
  color: var(--min-text);
  font-family: var(--f-disp);
  font-size: clamp(4.5rem, 10vw, 9rem);
  line-height: 0.9;
}

.blog-index-subtitle {
  max-width: 58ch;
  margin: clamp(1.4rem, 2.5vw, 2rem) 0 0;
  color: var(--min-copy);
  font-size: clamp(1.05rem, 1.35vw, 1.22rem);
  line-height: 1.68;
}

.blog-index-section {
  padding-top: clamp(2.6rem, 4.5vw, 4rem);
  padding-bottom: clamp(4rem, 7vw, 6rem);
  border-top: 1px solid var(--min-line);
}

.blog-index-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: clamp(1.6rem, 3vw, 2.4rem);
}

.blog-index-heading .eyebrow {
  margin: 0;
  color: var(--min-accent);
}

.blog-index-count {
  margin: 0;
  color: var(--min-dim);
  font-family: var(--f-mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.blog-index-grid {
  display: grid;
  gap: 1.05rem;
}

.blog-index-card {
  position: relative;
  border: 1px solid rgba(216, 222, 230, 0.12);
  border-radius: 24px;
  background:
    radial-gradient(circle at 90% 0%, rgba(122, 166, 160, 0.06), transparent 26rem),
    rgba(16, 17, 19, 0.54);
  overflow: hidden;
  transition:
    border-color 180ms var(--min-ease),
    background-color 180ms var(--min-ease),
    transform 180ms var(--min-ease);
}

.blog-index-card:hover {
  border-color: rgba(127, 159, 150, 0.34);
  background-color: rgba(18, 21, 23, 0.68);
  transform: translateY(-2px);
}

.blog-index-card-link {
  display: grid;
  grid-template-columns: minmax(240px, 0.78fr) minmax(0, 1fr);
  gap: clamp(1.1rem, 2vw, 1.6rem);
  padding: clamp(0.9rem, 1.5vw, 1.15rem);
  color: inherit;
  text-decoration: none;
}

.blog-index-card--featured .blog-index-card-link {
  grid-template-columns: minmax(300px, 0.92fr) minmax(0, 1fr);
  padding: clamp(1rem, 1.8vw, 1.35rem);
}

.blog-index-card-media {
  min-height: 100%;
  border-radius: 18px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.035);
  aspect-ratio: 16 / 10;
}

.blog-index-card-media img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 15rem;
  object-fit: cover;
  filter: saturate(0.92) contrast(1.04);
  transform: scale(1.01);
}

.blog-index-card-copy {
  align-self: center;
  padding: clamp(0.7rem, 1.6vw, 1.3rem) clamp(0.4rem, 1vw, 1rem) clamp(0.7rem, 1.6vw, 1.3rem) 0;
}

.blog-index-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin-bottom: 1rem;
  color: var(--min-dim);
  font-family: var(--f-mono);
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.blog-index-card h2 {
  max-width: 14ch;
  margin: 0;
  color: var(--min-text);
  font-family: var(--f-disp);
  font-size: clamp(2.3rem, 4.4vw, 4.5rem);
  line-height: 0.96;
}

.blog-index-card:not(.blog-index-card--featured) h2 {
  font-size: clamp(2rem, 3.2vw, 3.15rem);
}

.blog-index-card p {
  max-width: 58ch;
  margin: 1rem 0 0;
  color: var(--min-copy);
  font-size: clamp(0.98rem, 1.15vw, 1.08rem);
  line-height: 1.68;
}

.blog-index-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.46rem;
  margin-top: 1.15rem;
}

.blog-index-tag {
  display: inline-flex;
  align-items: center;
  min-height: 1.6rem;
  padding: 0.32rem 0.66rem;
  border: 1px solid rgba(216, 222, 230, 0.13);
  border-radius: 999px;
  color: var(--min-dim);
  font-family: var(--f-mono);
  font-size: 0.58rem;
  line-height: 1;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.blog-index-tag--active {
  border-color: rgba(127, 159, 150, 0.34);
  color: var(--min-accent);
}

.blog-index-card-link:focus-visible {
  outline: 2px solid var(--min-accent);
  outline-offset: 4px;
}

@media (max-width: 900px) {
  .blog-index-card-link,
  .blog-index-card--featured .blog-index-card-link {
    grid-template-columns: 1fr;
  }

  .blog-index-card-copy {
    padding: 0.25rem 0.35rem 0.7rem;
  }

  .blog-index-card h2 {
    max-width: 100%;
  }
}

@media (max-width: 768px) {
  .blog-index-page .blog-index-hero {
    padding-top: 6.95rem;
    padding-bottom: 2.8rem;
  }

  .blog-index-page .blog-index-hero .eyebrow {
    margin-bottom: 1.7rem;
    font-size: 0.58rem;
    letter-spacing: 0.22em;
  }

  .blog-index-title {
    font-size: clamp(4.1rem, 18vw, 5.9rem);
    line-height: 0.88;
  }

  .blog-index-subtitle {
    max-width: 34ch;
    margin-top: 1.35rem;
    font-size: 1.02rem;
    line-height: 1.66;
  }

  .blog-index-section {
    padding-top: 2rem;
    padding-bottom: 4.25rem;
  }

  .blog-index-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.45rem;
    margin-bottom: 1.25rem;
  }

  .blog-index-card {
    border-radius: 20px;
  }

  .blog-index-card-link,
  .blog-index-card--featured .blog-index-card-link {
    gap: 0.95rem;
    padding: 0.85rem;
  }

  .blog-index-card-media {
    border-radius: 16px;
    aspect-ratio: 16 / 9;
  }

  .blog-index-card-media img {
    min-height: 0;
  }

  .blog-index-card-copy {
    padding: 0.25rem 0.15rem 0.55rem;
  }

  .blog-index-card h2,
  .blog-index-card:not(.blog-index-card--featured) h2 {
    font-size: clamp(2.15rem, 10vw, 3.1rem);
    line-height: 0.96;
  }

  .blog-index-card p {
    margin-top: 0.82rem;
    font-size: 0.96rem;
    line-height: 1.62;
  }

  .blog-index-card-meta {
    margin-bottom: 0.78rem;
    font-size: 0.58rem;
    letter-spacing: 0.11em;
  }

  .blog-index-tags {
    gap: 0.38rem;
    margin-top: 0.95rem;
  }

  .blog-index-tag {
    min-height: 1.42rem;
    padding: 0.28rem 0.55rem;
    font-size: 0.52rem;
    letter-spacing: 0.11em;
  }
}


/* === BLOG INDEX SERIES CARDS START === */

/*
  Blog index visual model:
  - posts can be standalone or part of a series;
  - image cards use a bounded media column;
  - text-only posts use a dedicated full-width card;
  - dynamic JS and static fallback share the same classes.
*/

.blog-index-card,
.blog-index-card * {
  box-sizing: border-box;
}

.blog-index-card-link {
  display: grid;
  grid-template-columns: minmax(0, 42%) minmax(0, 1fr);
  gap: clamp(2rem, 3.2vw, 3.4rem);
  align-items: center;
  min-width: 0;
}

.blog-index-card--featured .blog-index-card-link {
  grid-template-columns: minmax(0, 42%) minmax(0, 1fr);
}

.blog-index-card-media {
  width: 100%;
  min-width: 0;
  min-height: 0;
  align-self: center;
  aspect-ratio: 16 / 9;
  border-radius: 18px;
  overflow: hidden;
}

.blog-index-card-media img {
  display: block;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  object-fit: cover;
  transform: none;
}

.blog-index-card-copy {
  position: relative;
  z-index: 1;
  min-width: 0;
  align-self: center;
  padding: clamp(1.15rem, 2vw, 1.7rem) clamp(1.5rem, 2.5vw, 2.35rem) clamp(1.15rem, 2vw, 1.7rem) 0;
}

.blog-index-card-kicker {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  margin-bottom: clamp(0.9rem, 1.5vw, 1.15rem);
}

.blog-index-card-kicker-left {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 0.55rem;
}

.blog-index-kind,
.blog-index-series-name,
.blog-index-part {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  font-family: var(--f-mono);
  font-size: 0.58rem;
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.blog-index-kind {
  min-height: 1.5rem;
  padding: 0.3rem 0.58rem;
  border: 1px solid rgba(127, 159, 150, 0.38);
  border-radius: 999px;
  color: var(--min-accent);
  background: rgba(127, 159, 150, 0.045);
}

.blog-index-kind--standalone {
  border-color: rgba(216, 222, 230, 0.18);
  color: var(--min-soft);
  background: rgba(216, 222, 230, 0.035);
}

.blog-index-series-name {
  min-width: 0;
  overflow: hidden;
  color: var(--min-dim);
  text-overflow: ellipsis;
}

.blog-index-part {
  flex: 0 0 auto;
  min-height: 1.5rem;
  padding: 0.3rem 0.58rem;
  border: 1px solid rgba(216, 222, 230, 0.14);
  border-radius: 999px;
  color: var(--min-soft);
  background: rgba(255, 255, 255, 0.025);
}

.blog-index-card-meta {
  margin-bottom: 0.88rem;
}

.blog-index-card h2 {
  max-width: 13.5ch;
  overflow-wrap: normal;
}

.blog-index-card p {
  max-width: 58ch;
}

.blog-index-card--text-only .blog-index-card-link {
  display: block;
  padding: clamp(2rem, 3.2vw, 3rem);
}

.blog-index-card--text-only .blog-index-card-copy {
  max-width: 74ch;
  padding: 0;
}

.blog-index-card--text-only h2 {
  max-width: 15ch;
}

.blog-index-card--text-only.blog-index-card--featured h2 {
  max-width: 17ch;
}

@media (min-width: 901px) and (max-width: 1280px) {
  .blog-index-card-link,
  .blog-index-card--featured .blog-index-card-link {
    grid-template-columns: minmax(0, 39%) minmax(0, 1fr);
    gap: clamp(1.6rem, 2.4vw, 2.2rem);
  }

  .blog-index-card h2 {
    font-size: clamp(2rem, 3.1vw, 3.45rem);
  }

  .blog-index-card:not(.blog-index-card--featured) h2 {
    font-size: clamp(1.95rem, 2.7vw, 2.9rem);
  }
}

@media (max-width: 900px) {
  .blog-index-card-link,
  .blog-index-card--featured .blog-index-card-link {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .blog-index-card-copy {
    padding: 0.25rem 0.35rem 0.7rem;
  }

  .blog-index-card--text-only .blog-index-card-link {
    padding: 1.35rem;
  }

  .blog-index-card--text-only .blog-index-card-copy {
    max-width: none;
  }
}

@media (max-width: 768px) {
  .blog-index-card-kicker {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 0.78rem;
  }

  .blog-index-card-kicker-left {
    max-width: 100%;
  }

  .blog-index-kind,
  .blog-index-series-name,
  .blog-index-part {
    font-size: 0.52rem;
    letter-spacing: 0.12em;
  }

  .blog-index-kind,
  .blog-index-part {
    min-height: 1.38rem;
    padding: 0.28rem 0.5rem;
  }

  .blog-index-card h2,
  .blog-index-card:not(.blog-index-card--featured) h2,
  .blog-index-card--text-only h2 {
    max-width: 100%;
  }
}

/* === BLOG INDEX SERIES CARDS END === */


/* === BLOG INDEX CARD COMPOSITION V33 START === */

/*
  Card composition:
  - top kicker is shared across every card, so Part XX has the same anchor point;
  - body contains media + text, or text only;
  - title + subtitle carry the post identity;
  - description is secondary and smaller.
*/

.blog-index-card,
.blog-index-card * {
  box-sizing: border-box;
}

.blog-index-card-link,
.blog-index-card--featured .blog-index-card-link,
.blog-index-card--text-only .blog-index-card-link {
  display: block;
  padding: clamp(1.6rem, 2.6vw, 2.35rem);
  color: inherit;
  text-decoration: none;
}

.blog-index-card-kicker {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  margin-bottom: clamp(1.55rem, 2.4vw, 2rem);
}

.blog-index-card-kicker-left {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 0.55rem;
}

.blog-index-kind,
.blog-index-series-name,
.blog-index-part {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  font-family: var(--f-mono);
  font-size: 0.58rem;
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.blog-index-kind {
  min-height: 1.5rem;
  padding: 0.3rem 0.58rem;
  border: 1px solid rgba(127, 159, 150, 0.38);
  border-radius: 999px;
  color: var(--min-accent);
  background: rgba(127, 159, 150, 0.045);
}

.blog-index-kind--standalone {
  border-color: rgba(216, 222, 230, 0.18);
  color: var(--min-soft);
  background: rgba(216, 222, 230, 0.035);
}

.blog-index-series-name {
  min-width: 0;
  overflow: hidden;
  color: var(--min-dim);
  text-overflow: ellipsis;
}

.blog-index-part {
  flex: 0 0 auto;
  min-height: 1.5rem;
  padding: 0.3rem 0.58rem;
  border: 1px solid rgba(216, 222, 230, 0.14);
  border-radius: 999px;
  color: var(--min-soft);
  background: rgba(255, 255, 255, 0.025);
}

.blog-index-card-body {
  display: grid;
  grid-template-columns: minmax(0, 42%) minmax(0, 1fr);
  gap: clamp(2rem, 3.2vw, 3.4rem);
  align-items: center;
  min-width: 0;
}

.blog-index-card--text-only .blog-index-card-body {
  display: block;
}

.blog-index-card-media {
  width: 100%;
  min-width: 0;
  min-height: 0;
  align-self: center;
  aspect-ratio: 16 / 9;
  border-radius: 18px;
  overflow: hidden;
}

.blog-index-card-media img {
  display: block;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  object-fit: cover;
  transform: none;
}

.blog-index-card-copy,
.blog-index-card--text-only .blog-index-card-copy {
  position: relative;
  z-index: 1;
  min-width: 0;
  max-width: none;
  align-self: center;
  padding: 0;
}

.blog-index-card h2,
.blog-index-card:not(.blog-index-card--featured) h2,
.blog-index-card--text-only h2,
.blog-index-card--text-only.blog-index-card--featured h2 {
  max-width: 20ch;
  margin: 0;
  font-size: clamp(2.25rem, 3.65vw, 4.15rem);
  line-height: 0.98;
}

.blog-index-card:not(.blog-index-card--featured) h2 {
  font-size: clamp(2.05rem, 3.05vw, 3.35rem);
}

.blog-index-card--text-only h2 {
  max-width: 23ch;
}

.blog-index-card-subtitle {
  max-width: 34ch;
  margin: 0.55rem 0 0;
  color: var(--min-emphasis);
  font-family: var(--f-disp);
  font-size: clamp(1.35rem, 2.1vw, 2.05rem);
  font-style: italic;
  line-height: 1.1;
}

.blog-index-card-description {
  max-width: 64ch;
  margin: 0.9rem 0 0;
  color: var(--min-soft);
  font-size: clamp(0.9rem, 0.95vw, 0.98rem);
  line-height: 1.62;
}

.blog-index-card-meta {
  display: none;
}

.blog-index-tags {
  margin-top: 1.1rem;
}

@media (min-width: 901px) and (max-width: 1280px) {
  .blog-index-card-body {
    grid-template-columns: minmax(0, 39%) minmax(0, 1fr);
    gap: clamp(1.6rem, 2.4vw, 2.2rem);
  }

  .blog-index-card h2,
  .blog-index-card:not(.blog-index-card--featured) h2 {
    font-size: clamp(2rem, 2.75vw, 3.2rem);
  }

  .blog-index-card-subtitle {
    font-size: clamp(1.25rem, 1.65vw, 1.7rem);
  }
}

@media (max-width: 900px) {
  .blog-index-card-link,
  .blog-index-card--featured .blog-index-card-link,
  .blog-index-card--text-only .blog-index-card-link {
    padding: 1.35rem;
  }

  .blog-index-card-body {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .blog-index-card h2,
  .blog-index-card:not(.blog-index-card--featured) h2,
  .blog-index-card--text-only h2 {
    max-width: 100%;
  }
}

@media (max-width: 768px) {
  .blog-index-card-kicker {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 0.95rem;
  }

  .blog-index-card-kicker-left {
    max-width: 100%;
  }

  .blog-index-kind,
  .blog-index-series-name,
  .blog-index-part {
    font-size: 0.52rem;
    letter-spacing: 0.12em;
  }

  .blog-index-kind,
  .blog-index-part {
    min-height: 1.38rem;
    padding: 0.28rem 0.5rem;
  }

  .blog-index-card h2,
  .blog-index-card:not(.blog-index-card--featured) h2,
  .blog-index-card--text-only h2 {
    font-size: clamp(2.05rem, 9.2vw, 3rem);
    line-height: 0.98;
  }

  .blog-index-card-subtitle {
    margin-top: 0.48rem;
    font-size: clamp(1.35rem, 6.2vw, 1.9rem);
    line-height: 1.08;
  }

  .blog-index-card-description {
    margin-top: 0.78rem;
    font-size: 0.9rem;
    line-height: 1.58;
  }
}

/* === BLOG INDEX CARD COMPOSITION V33 END === */


/* === BLOG INDEX SUBTITLE EMPHASIS V34 START === */

/*
  Make the title + subtitle carry the post identity.
  Description becomes supporting copy, not the second visual headline.
*/

.blog-index-card-subtitle {
  max-width: 36ch;
  margin-top: 0.68rem;
  color: var(--min-emphasis);
  font-size: clamp(1.75rem, 2.65vw, 2.65rem);
  line-height: 1.04;
  letter-spacing: -0.012em;
}

.blog-index-card-description {
  max-width: 60ch;
  margin-top: 0.82rem;
  color: var(--min-soft);
  font-size: clamp(0.82rem, 0.86vw, 0.92rem);
  line-height: 1.56;
}

.blog-index-tags {
  margin-top: 1rem;
}

@media (min-width: 901px) and (max-width: 1280px) {
  .blog-index-card-subtitle {
    font-size: clamp(1.5rem, 2vw, 2.05rem);
    line-height: 1.05;
  }

  .blog-index-card-description {
    font-size: clamp(0.8rem, 0.9vw, 0.9rem);
    line-height: 1.54;
  }
}

@media (max-width: 768px) {
  .blog-index-card-subtitle {
    margin-top: 0.58rem;
    font-size: clamp(1.6rem, 7.1vw, 2.2rem);
    line-height: 1.04;
  }

  .blog-index-card-description {
    margin-top: 0.72rem;
    font-size: 0.86rem;
    line-height: 1.54;
  }
}

/* === BLOG INDEX SUBTITLE EMPHASIS V34 END === */


/* === BLOG INDEX SUBTITLE STRONG V35 START === */

/*
  Stronger hierarchy:
  title + subtitle are the readable post identity;
  description is intentionally supporting microcopy.
*/

.blog-index-card-subtitle {
  display: block !important;
  max-width: 38ch !important;
  margin-top: 0.62rem !important;
  color: var(--min-emphasis) !important;
  font-family: var(--f-disp) !important;
  font-style: italic !important;
  font-size: clamp(2.25rem, 3.35vw, 3.45rem) !important;
  line-height: 1.01 !important;
  letter-spacing: -0.018em !important;
}

.blog-index-card-description {
  max-width: 58ch !important;
  margin-top: 0.92rem !important;
  color: var(--min-soft) !important;
  font-size: clamp(0.76rem, 0.78vw, 0.84rem) !important;
  line-height: 1.5 !important;
}

.blog-index-card h2,
.blog-index-card:not(.blog-index-card--featured) h2,
.blog-index-card--text-only h2 {
  max-width: 22ch !important;
}

@media (min-width: 901px) and (max-width: 1280px) {
  .blog-index-card-subtitle {
    font-size: clamp(1.95rem, 2.55vw, 2.65rem) !important;
    line-height: 1.02 !important;
  }

  .blog-index-card-description {
    font-size: clamp(0.74rem, 0.82vw, 0.82rem) !important;
    line-height: 1.48 !important;
  }
}

@media (max-width: 900px) {
  .blog-index-card-subtitle {
    max-width: 100% !important;
    font-size: clamp(1.85rem, 7.6vw, 2.45rem) !important;
    line-height: 1.02 !important;
  }

  .blog-index-card-description {
    font-size: 0.84rem !important;
    line-height: 1.5 !important;
  }
}

/* === BLOG INDEX SUBTITLE STRONG V35 END === */


/* === BLOG INDEX SUBTITLE MEDIUM V36 START === */

/*
  Middle ground after v35:
  subtitle stays clearly readable, but no longer competes with the title.
*/

.blog-index-card-subtitle {
  font-size: clamp(1.95rem, 2.82vw, 2.85rem) !important;
  line-height: 1.04 !important;
  margin-top: 0.58rem !important;
  max-width: 37ch !important;
}

@media (min-width: 901px) and (max-width: 1280px) {
  .blog-index-card-subtitle {
    font-size: clamp(1.68rem, 2.15vw, 2.25rem) !important;
    line-height: 1.04 !important;
  }
}

@media (max-width: 900px) {
  .blog-index-card-subtitle {
    font-size: clamp(1.68rem, 6.8vw, 2.12rem) !important;
    line-height: 1.04 !important;
  }
}

/* === BLOG INDEX SUBTITLE MEDIUM V36 END === */


/* === BLOG INDEX SUBTITLE SLIGHTLY SMALLER V37 START === */

/*
  Small correction after v36:
  subtitle remains readable, but steps back slightly from the title.
*/

.blog-index-card-subtitle {
  font-size: clamp(1.78rem, 2.55vw, 2.62rem) !important;
  line-height: 1.045 !important;
}

@media (min-width: 901px) and (max-width: 1280px) {
  .blog-index-card-subtitle {
    font-size: clamp(1.55rem, 2.02vw, 2.1rem) !important;
    line-height: 1.045 !important;
  }
}

@media (max-width: 900px) {
  .blog-index-card-subtitle {
    font-size: clamp(1.58rem, 6.35vw, 2rem) !important;
    line-height: 1.045 !important;
  }
}

/* === BLOG INDEX SUBTITLE SLIGHTLY SMALLER V37 END === */


/* === BLOG INDEX SERIES REDESIGN V39 START === */

/*
  Better card metadata hierarchy:
  - the actual series name is the highlighted pill;
  - "Series" is just a quiet context label;
  - Part stays top-right on desktop and mobile;
  - post 05 can use post:cover when og:image is missing.
*/

.blog-index-card-kicker {
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 1rem !important;
}

.blog-index-card-kicker-left {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

.blog-index-kind {
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--min-dim) !important;
}

.blog-index-kind--standalone {
  color: var(--min-dim) !important;
}

.blog-index-series-name {
  flex: 0 1 auto !important;
  min-height: 1.5rem !important;
  padding: 0.3rem 0.62rem !important;
  border: 1px solid rgba(127, 159, 150, 0.38) !important;
  border-radius: 999px !important;
  background: rgba(127, 159, 150, 0.045) !important;
  color: var(--min-accent) !important;
}

.blog-index-card--standalone .blog-index-series-name {
  border-color: rgba(216, 222, 230, 0.18) !important;
  background: rgba(216, 222, 230, 0.035) !important;
  color: var(--min-soft) !important;
}

.blog-index-part {
  margin-left: auto !important;
}

@media (max-width: 768px) {
  .blog-index-card-kicker {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 0.75rem !important;
  }

  .blog-index-card-kicker-left {
    flex: 1 1 auto !important;
    max-width: calc(100% - 5.2rem) !important;
  }

  .blog-index-series-name {
    min-height: 1.38rem !important;
    padding: 0.28rem 0.52rem !important;
  }

  .blog-index-part {
    align-self: center !important;
    flex: 0 0 auto !important;
    margin-left: auto !important;
  }
}

/* === BLOG INDEX SERIES REDESIGN V39 END === */

.blog-index-card--image-failed .blog-index-card-media {
  display: none;
}