.cmx-front-page,
.cmx-blog,
.cmx-single {
  --cmx-color-brand-10: var(--cmx-brand-10);
  --cmx-color-brand-60: var(--cmx-brand-60);
  --cmx-color-brand-80: var(--cmx-brand-80);
  --cmx-color-brand-100: var(--cmx-brand-100);
  --cmx-color-text-primary: var(--cmx-text-primary);
  --cmx-color-text-secondary: var(--cmx-text-secondary);
  --cmx-color-bg-card: var(--cmx-bg-card);
  --cmx-color-bg-soft: var(--cmx-bg-soft);
  --cmx-color-border: var(--cmx-border-default);
  --cmx-shadow-sm: 0 10px 24px #0f172a12;
  --cmx-type-h4-size: var(--cmx-font-size-heading-4);
  --cmx-type-body-small-size: var(--cmx-font-size-body-sm);
  --cmx-type-body-small-line: var(--cmx-line-height-body-sm);
  --cmx-type-body-xsmall-size: var(--cmx-font-size-caption);
  --cmx-type-body-xsmall-line: var(--cmx-line-height-caption);
  --cmx-type-button-line: var(--cmx-line-height-body-md);
}

.cmx-post-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--cmx-space-3);
  color: var(--cmx-color-text-secondary);
  font-size: var(--cmx-type-body-xsmall-size);
  font-weight: 500;
  line-height: var(--cmx-type-body-xsmall-line);
}

.cmx-badge {
  display: inline-flex;
  min-height: 26px;
  align-items: center;
  border-radius: var(--cmx-radius-pill);
  padding: var(--cmx-space-2) var(--cmx-space-3);
  background: var(--cmx-color-brand-10);
  color: var(--cmx-color-brand-100);
  font-size: var(--cmx-type-body-xsmall-size);
  font-weight: 500;
  line-height: var(--cmx-type-body-xsmall-line);
}

.cmx-badge--md {
  padding: 5px var(--cmx-space-4);
  font-size: var(--cmx-type-body-small-size);
  line-height: var(--cmx-type-body-small-line);
}

.cmx-badge--neutral {
  background: var(--cmx-color-bg-soft);
  color: var(--cmx-color-text-secondary);
}

.cmx-badge--primary {
  background: var(--cmx-color-brand-10);
  color: var(--cmx-color-brand-80);
}

.cmx-post-card {
  display: flex;
  min-height: 100%;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--cmx-color-border);
  border-radius: var(--cmx-radius-md);
  background: var(--cmx-color-bg-card);
  transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.cmx-post-card:hover,
.cmx-post-card:focus-within {
  border-color: var(--cmx-color-border);
  box-shadow: var(--cmx-shadow-sm);
  transform: translateY(-2px);
}

.cmx-post-card__media {
  display: block;
  flex: 0 0 auto;
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--cmx-color-bg-soft);
}

.cmx-post-card__media img,
.cmx-post-card > img {
  display: block;
  width: 100%;
  background: var(--cmx-color-bg-soft);
  object-fit: cover;
}

.cmx-post-card__media img {
  height: 100%;
}

.cmx-post-card__media img:is([sizes="auto" i], [sizes^="auto," i]),
.cmx-post-card > img:is([sizes="auto" i], [sizes^="auto," i]) {
  contain-intrinsic-size: 640px 400px;
}

.cmx-post-card > img {
  aspect-ratio: 16 / 10;
}

.cmx-post-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: var(--cmx-space-5);
}

.cmx-post-card__footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--cmx-space-3);
  padding: var(--cmx-space-4) var(--cmx-space-5);
  border-top: 1px solid var(--cmx-color-border);
}

.cmx-post-card .cmx-button-secondary {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  gap: var(--cmx-space-3);
  border: 1px solid var(--cmx-color-border) !important;
  border-radius: var(--cmx-radius-pill) !important;
  padding: var(--cmx-space-3) var(--cmx-space-5);
  background: var(--cmx-color-bg-card) !important;
  color: var(--cmx-color-text-primary) !important;
  box-shadow: none;
  font-family: var(--cmx-font-body) !important;
  font-weight: 500;
  line-height: var(--cmx-type-button-line);
  text-decoration: none;
  text-shadow: none;
  transition: border-color 180ms ease, background-color 180ms ease, color 180ms ease, transform 180ms ease;
}

.cmx-post-card .cmx-button-secondary:hover,
.cmx-post-card .cmx-button-secondary:focus {
  border-color: var(--cmx-color-brand-60) !important;
  background: var(--cmx-color-brand-10) !important;
  color: var(--cmx-color-brand-100) !important;
  transform: translateY(-1px);
}

.cmx-post-card .cmx-button-secondary .cmx-icon {
  font-size: 0.86em;
  transition: transform 180ms ease;
}

.cmx-post-card .cmx-button-secondary:hover .cmx-icon,
.cmx-post-card .cmx-button-secondary:focus .cmx-icon {
  transform: translateX(3px);
}

.cmx-post-card h3 {
  margin: var(--cmx-space-4) 0 var(--cmx-space-3);
  font-family: var(--cmx-font-heading) !important;
  font-size: clamp(1.125rem, 1.6vw, var(--cmx-type-h4-size)) !important;
  font-weight: 600;
  line-height: 1.28 !important;
}

.cmx-post-card h3 a {
  color: inherit !important;
  font-family: var(--cmx-font-heading) !important;
  font-weight: inherit !important;
}

.cmx-post-card p {
  display: -webkit-box;
  min-height: 3rem;
  margin: 0;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  color: var(--cmx-color-text-secondary);
}

@media (max-width: 640px) {
  .cmx-post-card__footer {
    justify-content: stretch;
  }

  .cmx-post-card .cmx-button-secondary {
    width: 100%;
  }
}