/*
 * IN-KluSo article-enhance.css
 * Styles for the related-articles + share-row + validation-badge shrink.
 * Loaded on every article page via the same global include as article-enhance.js.
 */

.article-enhance {
  max-width: 780px;
  margin: 2.5rem auto 0;
  padding: 0 32px;
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
}

/* ───────── Tag chips ───────── */
.article-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 14px 0 0;
  margin-bottom: 18px;
  font-size: 13px;
}
.article-tags .tags-label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #8A8578;
  margin-right: 6px;
}
.article-tags .tag-chip-inline {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.5px;
  padding: 4px 10px;
  border: 1px solid #E8E4DC;
  background: #FAF6EE;
  color: #555;
  text-decoration: none;
  border-radius: 12px;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.article-tags .tag-chip-inline:hover {
  background: #E8602C;
  color: #fff;
  border-color: #E8602C;
}
html:not(.light-mode) .article-tags .tags-label { color: #888; }
html:not(.light-mode) .article-tags .tag-chip-inline {
  background: #1a1a1a;
  border-color: #2a2a2a;
  color: #C8C5C0;
}
html:not(.light-mode) .article-tags .tag-chip-inline:hover {
  background: #E8602C;
  color: #FAF6EE;
  border-color: #E8602C;
}

/* ───────── Share row ───────── */
.article-share {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 14px 0 18px;
  border-top: 1px solid #E8E4DC;
  border-bottom: 1px solid #E8E4DC;
  margin-bottom: 2.5rem;
  font-size: 13px;
}
.article-share .as-label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #8A8578;
  margin-right: 8px;
}
.article-share .as-btn {
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 12px;
  letter-spacing: 0.02em;
  padding: 6px 12px;
  border: 1px solid #E8E4DC;
  background: #FAF6EE;
  color: #111;
  text-decoration: none;
  border-radius: 3px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.article-share .as-btn:hover {
  background: #111;
  color: #FAF6EE;
  border-color: #111;
}
.article-share .as-copy {
  font-family: inherit;
}

html.light-mode .article-share { border-color: #E8E4DC; }
html:not(.light-mode) .article-share {
  border-color: #2a2a2a;
}
html:not(.light-mode) .article-share .as-label { color: #888; }
html:not(.light-mode) .article-share .as-btn {
  background: #1a1a1a;
  color: #FAF6EE;
  border-color: #2a2a2a;
}
html:not(.light-mode) .article-share .as-btn:hover {
  background: #FAF6EE;
  color: #111;
  border-color: #FAF6EE;
}

/* ───────── Related articles ───────── */
.related-articles {
  margin-bottom: 2rem;
}
.related-articles .re-section + .re-section {
  margin-top: 2rem;
}
.related-articles .re-heading {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #8A8578;
  margin: 0 0 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid #E8E4DC;
}

.re-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.re-grid-lead {
  grid-template-columns: 1fr;
}

.re-card {
  display: block;
  text-decoration: none;
  color: inherit;
  background: #FAF6EE;
  border: 1px solid #E8E4DC;
  border-radius: 4px;
  padding: 14px 16px 12px;
  transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
}
.re-card:hover {
  border-color: #111;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
}
.re-card .re-meta {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9.5px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #E8602C;
  margin-bottom: 6px;
}
.re-card .re-title {
  font-family: 'IBM Plex Sans', sans-serif;
  font-weight: 600;
  font-size: 16px;
  line-height: 1.25;
  color: #111;
  margin-bottom: 6px;
  letter-spacing: -0.2px;
}
.re-card .re-desc {
  font-size: 13px;
  line-height: 1.55;
  color: #555;
  margin-bottom: 8px;
}
.re-card .re-cta {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #2E9B6F;
  font-weight: 600;
}

.re-card-lead {
  padding: 18px 20px;
}
.re-card-lead .re-title {
  font-size: 20px;
}
.re-card-lead .re-desc {
  font-size: 14px;
  max-width: 640px;
}

html:not(.light-mode) .related-articles .re-heading {
  color: #888;
  border-color: #2a2a2a;
}
html:not(.light-mode) .re-card {
  background: #1a1a1a;
  border-color: #2a2a2a;
}
html:not(.light-mode) .re-card:hover {
  border-color: #FAF6EE;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
}
html:not(.light-mode) .re-card .re-title { color: #FAF6EE; }
html:not(.light-mode) .re-card .re-desc { color: #C8C5C0; }

@media (max-width: 720px) {
  .article-enhance {
    padding: 0 18px;
    margin-top: 2rem;
  }
  .re-grid {
    grid-template-columns: 1fr;
  }
  .re-card-lead .re-title {
    font-size: 18px;
  }
  .article-share {
    gap: 6px;
    font-size: 12px;
  }
  .article-share .as-btn {
    padding: 5px 10px;
    font-size: 11px;
  }
}

/* ───────── Validation badge — shrink to a single-line callout ───────── */
/* The inline-styled validation badge container has style="margin:3rem 0 1rem;" */
[style*="margin:3rem 0 1rem"] > [style*="border:2px solid"] {
  padding: 12px 16px !important;
  border-width: 1px !important;
}
[style*="margin:3rem 0 1rem"] > [style*="border:2px solid"] > div:first-child {
  margin-bottom: 6px !important;
}
[style*="margin:3rem 0 1rem"] > [style*="border:2px solid"] > div:first-child > div:first-child {
  width: 28px !important;
  height: 28px !important;
  font-size: 9px !important;
}
[style*="margin:3rem 0 1rem"] > [style*="border:2px solid"] #vb-name {
  font-size: 14px !important;
}
[style*="margin:3rem 0 1rem"] > [style*="border:2px solid"] #vb-label {
  font-size: 9px !important;
}
[style*="margin:3rem 0 1rem"] > [style*="border:2px solid"] #vb-body {
  font-size: 12px !important;
  margin-bottom: 4px !important;
}