/* ============================================================
   Статья «Дефицит железа: полный гид» — v2, поверх calc-phenoage.css.
   ============================================================ */

.v2-after-hero .med-term { color: var(--v2-ink); }

/* ── Features (4 функции железа) ───────────────────────────── */
.ar-features {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin: 8px 0 20px;
}
@media (max-width: 640px) { .ar-features { grid-template-columns: 1fr; } }
.ar-feature {
  display: flex; flex-direction: column; gap: 10px;
  background: var(--v2-surface);
  border: 1px solid var(--v2-border);
  border-radius: var(--v2-radius);
  padding: 22px;
  transition: border-color .2s, transform .2s, box-shadow .2s;
}
.ar-feature:hover {
  border-color: rgba(42,52,238,.28);
  transform: translateY(-2px);
  box-shadow: 0 12px 28px -18px rgba(19,20,31,.2);
}
.ar-feature__icon {
  display: grid; place-items: center;
  width: 46px; height: 46px;
  border-radius: 12px;
  background: rgba(42,52,238,.08);
  color: var(--v2-brand-2);
}
.ar-feature__icon .material-symbols-outlined { font-size: 24px !important; }
.ar-feature__title {
  font-family: var(--v2-font-display);
  font-size: 16px; font-weight: 700;
  color: var(--v2-ink);
  letter-spacing: -.01em;
}
.ar-feature__text { font-size: 13.5px; color: var(--v2-ink-3); line-height: 1.55; }

/* ── Callout ───────────────────────────────────────────────── */
.ar-callout {
  display: flex; gap: 14px; align-items: flex-start;
  background: var(--v2-bg-alt);
  border: 1px solid var(--v2-border);
  border-left: 4px solid var(--v2-brand-2);
  border-radius: var(--v2-radius);
  padding: 18px 20px;
  margin: 4px 0 8px;
  font-size: 14px; color: var(--v2-ink-2); line-height: 1.6;
}
.ar-callout--success { border-left-color: #10b981; }
.ar-callout__icon {
  flex-shrink: 0;
  display: grid; place-items: center;
  width: 38px; height: 38px;
  border-radius: 10px;
  background: rgba(42,52,238,.08);
  color: var(--v2-brand-2);
}
.ar-callout--success .ar-callout__icon { background: rgba(16,185,129,.12); color: #059669; }
.ar-callout__icon .material-symbols-outlined { font-size: 20px !important; }
.ar-callout strong { color: var(--v2-ink); }

/* ── Stages ────────────────────────────────────────────────── */
.ar-stages { display: flex; flex-direction: column; gap: 14px; margin: 8px 0 16px; }
.ar-stage {
  display: flex; gap: 18px;
  background: var(--v2-surface);
  border: 1px solid var(--v2-border);
  border-left: 4px solid var(--v2-ink-3);
  border-radius: var(--v2-radius);
  padding: 22px 24px;
}
.ar-stage--1 { border-left-color: #f59e0b; }
.ar-stage--2 { border-left-color: #f97316; }
.ar-stage--3 { border-left-color: #ef4444; }
.ar-stage__num {
  flex-shrink: 0;
  font-family: var(--v2-font-display);
  font-size: 30px; font-weight: 700;
  color: var(--v2-border);
  letter-spacing: -.02em;
  line-height: 1;
}
.ar-stage__title {
  font-family: var(--v2-font-display);
  font-size: 17px; font-weight: 700;
  color: var(--v2-ink);
  margin-bottom: 10px;
}
.ar-stage__markers { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.ar-badge {
  display: inline-flex;
  padding: 4px 10px;
  border-radius: 100rem;
  font-size: 11.5px; font-weight: 600;
  background: var(--v2-bg-alt);
  color: var(--v2-ink-3);
}
.ar-badge--down { background: rgba(239,68,68,.10);  color: #dc2626; }
.ar-badge--up   { background: rgba(245,158,11,.12); color: #d97706; }
.ar-badge--warn { background: rgba(249,115,22,.12); color: #ea580c; }
.ar-badge--ok   { background: rgba(16,185,129,.12); color: #059669; }
.ar-stage__text { font-size: 13.5px; color: var(--v2-ink-2); line-height: 1.6; margin: 0; }

/* ── Symptoms ──────────────────────────────────────────────── */
.ar-symptoms {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin: 8px 0 16px;
}
@media (max-width: 860px) { .ar-symptoms { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .ar-symptoms { grid-template-columns: 1fr; } }
.ar-symptom {
  background: var(--v2-surface);
  border: 1px solid var(--v2-border);
  border-radius: var(--v2-radius);
  padding: 18px;
  text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.ar-symptom__icon {
  display: grid; place-items: center;
  width: 44px; height: 44px;
  border-radius: 12px;
  background: rgba(220,38,38,.08);
  color: #dc2626;
}
.ar-symptom__icon .material-symbols-outlined { font-size: 22px !important; }
.ar-symptom__name {
  font-family: var(--v2-font-display);
  font-size: 14px; font-weight: 700;
  color: var(--v2-ink);
}
.ar-symptom__desc { font-size: 12.5px; color: var(--v2-ink-3); line-height: 1.5; }

/* ── Markers ───────────────────────────────────────────────── */
.ar-markers {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin: 8px 0 16px;
}
@media (max-width: 640px) { .ar-markers { grid-template-columns: 1fr; } }
.ar-marker-card {
  background: var(--v2-surface);
  border: 1px solid var(--v2-border);
  border-radius: var(--v2-radius);
  padding: 20px 22px;
}
.ar-marker-card--full { grid-column: 1 / -1; }
.ar-marker-card__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  margin-bottom: 10px;
}
.ar-marker-card__name {
  font-family: var(--v2-font-display);
  font-size: 16px; font-weight: 700;
  color: var(--v2-ink);
}
.ar-marker-card__norm {
  font-size: 12px; font-weight: 600;
  color: var(--v2-ink-3);
  white-space: nowrap;
}
.ar-marker-card__text { font-size: 13px; color: var(--v2-ink-3); line-height: 1.55; margin: 0 0 14px; }
.ar-ranges { display: flex; flex-direction: column; gap: 6px; }
.ar-range {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 12px;
  border-radius: 9px;
  font-size: 12.5px;
  background: var(--v2-bg-alt);
}
.ar-range span:last-child { font-family: var(--v2-font-display); font-weight: 700; font-variant-numeric: tabular-nums; }
.ar-range--danger { background: rgba(239,68,68,.08); color: #dc2626; }
.ar-range--warn   { background: rgba(245,158,11,.10); color: #d97706; }
.ar-range--ok     { background: rgba(16,185,129,.08); color: #059669; }

/* ── Risk groups ───────────────────────────────────────────── */
.ar-risks {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin: 8px 0 16px;
}
@media (max-width: 720px) { .ar-risks { grid-template-columns: 1fr; } }
.ar-risk {
  display: flex; gap: 14px; align-items: flex-start;
  background: var(--v2-surface);
  border: 1px solid var(--v2-border);
  border-radius: var(--v2-radius);
  padding: 18px 20px;
}
.ar-risk__icon {
  flex-shrink: 0;
  display: grid; place-items: center;
  width: 40px; height: 40px;
  border-radius: 11px;
  background: rgba(42,52,238,.08);
  color: var(--v2-brand-2);
}
.ar-risk__icon .material-symbols-outlined { font-size: 21px !important; }
.ar-risk strong {
  display: block;
  font-family: var(--v2-font-display);
  font-size: 14.5px; font-weight: 700;
  color: var(--v2-ink);
  margin-bottom: 4px;
}
.ar-risk p { font-size: 13px; color: var(--v2-ink-3); line-height: 1.55; margin: 0; }