/* Раздел «Ветеринарным врачам» — /vracham/
   Токены берутся из style.css: светлая/тёмная тема переключается там же. */

.vr { padding-bottom: 5rem; }
.vr-wrap { max-width: 52rem; margin: 0 auto; padding: 0 1.25rem; }

/* ── ШАПКА РАЗДЕЛА ────────────────────────────────── */
.vr-hero {
  background: linear-gradient(160deg, var(--color-primary) 0%, var(--color-primary-hover) 100%);
  color: var(--color-text-inverse);
  padding: 4rem 0 3.4rem; margin-bottom: 2.5rem;
}
.vr-hero .vr-wrap { max-width: 56rem; }
.vr-eyebrow {
  font-size: 0.78rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--color-accent-highlight); margin: 0 0 1rem; font-weight: 700;
}
.vr-hero h1 { font-size: clamp(1.9rem, 5vw, 2.9rem); line-height: 1.12; margin: 0 0 1rem; }
.vr-lede { font-size: 1.12rem; max-width: 42rem; opacity: 0.92; margin: 0; }
.vr-facts { display: flex; gap: 2rem; flex-wrap: wrap; margin-top: 2rem; }
.vr-facts div { min-width: 8rem; }
.vr-facts b { display: block; font-size: 1.7rem; color: var(--color-accent-highlight); line-height: 1; }
.vr-facts span { font-size: 0.85rem; opacity: 0.8; }

/* ── ТИПОГРАФИКА СТРАНИЦЫ ─────────────────────────── */
.vr-crumbs { font-size: 0.86rem; color: var(--color-text-muted); padding: 1.6rem 0 0; }
.vr-crumbs a { color: var(--color-text-muted); }
.vr h1 { font-size: clamp(1.8rem, 4.4vw, 2.5rem); line-height: 1.16; margin: 0.7rem 0 0.6rem; }
.vr-sub { color: var(--color-text-muted); font-size: 1.05rem; margin: 0 0 0.4rem; max-width: 42rem; }
.vr-dt { color: var(--color-text-faint); font-size: 0.85rem; margin: 0 0 1.8rem; }
.vr h2 {
  font-size: clamp(1.35rem, 3vw, 1.75rem); margin: 2.8rem 0 0.7rem;
  padding-bottom: 0.4rem; border-bottom: 2px solid var(--color-accent); display: inline-block;
}
.vr h3 { font-size: 1.18rem; margin: 1.8rem 0 0.5rem; }
.vr h4 { font-size: 1.04rem; margin: 1.4rem 0 0.4rem; }
.vr p { margin: 0 0 0.9rem; line-height: 1.7; }
.vr ul, .vr ol { margin: 0 0 1.1rem; padding-left: 1.35rem; line-height: 1.7; }
.vr li { margin-bottom: 0.45rem; }
.vr a { color: var(--color-primary); }
.vr blockquote {
  margin: 0 0 1.2rem; padding: 0.9rem 1.2rem;
  background: var(--color-surface); border-left: 4px solid var(--color-accent);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}
.vr blockquote p:last-child { margin-bottom: 0; }

/* ── ВЫЖИМКА ──────────────────────────────────────── */
.vr-tldr {
  background: var(--color-accent-highlight); border: 1px solid var(--color-accent);
  border-radius: var(--radius-lg); padding: 1.4rem 1.7rem; margin: 0 0 2rem; color: #16232e;
}
.vr-tldr .lbl {
  font-size: 0.74rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--color-accent-active); margin-bottom: 0.7rem;
}
.vr-tldr ul { margin: 0; padding-left: 1.2rem; }
.vr-tldr li { margin-bottom: 0.55rem; }

/* ── ТАБЛИЦЫ ──────────────────────────────────────── */
.vr-tw { overflow-x: auto; margin: 0 0 1.4rem; -webkit-overflow-scrolling: touch; }
.vr table {
  width: 100%; border-collapse: collapse; font-size: 0.93rem;
  background: var(--color-surface-2); border: 1px solid var(--color-border);
}
.vr th, .vr td {
  padding: 0.6rem 0.75rem; text-align: left; vertical-align: top;
  border-bottom: 1px solid var(--color-divider); border-right: 1px solid var(--color-divider);
}
.vr th { background: var(--color-surface-offset); font-weight: 600; font-size: 0.86rem; }
.vr tr:last-child td { border-bottom: 0; }
.vr td:last-child, .vr th:last-child { border-right: 0; }

/* ── БЛОКИ ИЗ ИСХОДНИКОВ ──────────────────────────── */
.vr .frazy, .vr .task, .vr .intro, .vr .box, .vr .note, .vr .case, .vr-note {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-md); padding: 0.9rem 1.2rem; margin: 0 0 1.2rem;
}
.vr .field {
  border: 1px dashed var(--color-border); border-radius: var(--radius-md);
  padding: 0.8rem 1.1rem; margin: 0 0 1rem; color: var(--color-text-muted);
}

/* ── АУДИО ────────────────────────────────────────── */
.vr-audio {
  background: var(--color-surface-2); border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-accent); border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: 0.9rem 1.2rem; margin: 0 0 0.9rem;
}
.vr-audio .t { font-weight: 600; margin-bottom: 0.2rem; }
.vr-audio .m { font-size: 0.82rem; color: var(--color-text-muted); margin-bottom: 0.6rem; }
.vr-audio audio { width: 100%; }

/* ── ФАЙЛЫ, ВОПРОСЫ, СВЯЗАННОЕ ────────────────────── */
.vr-files, .vr-rel { list-style: none; padding: 0; margin: 0 0 1.4rem; }
.vr-files li, .vr-rel li { margin-bottom: 0.5rem; }
.vr-files a, .vr-rel a {
  display: inline-block; background: var(--color-surface-2);
  border: 1px solid var(--color-border); border-radius: var(--radius-md);
  padding: 0.55rem 0.9rem; text-decoration: none;
  transition: border-color var(--transition-interactive);
}
.vr-files a:hover, .vr-rel a:hover { border-color: var(--color-accent); }
.vr-faq details {
  background: var(--color-surface-2); border: 1px solid var(--color-border);
  border-radius: var(--radius-md); margin: 0 0 0.6rem;
}
.vr-faq summary { cursor: pointer; padding: 0.8rem 1.1rem; font-weight: 600; list-style: none; }
.vr-faq summary::-webkit-details-marker { display: none; }
.vr-faq summary::before { content: "＋"; color: var(--color-accent); margin-right: 0.6rem; font-weight: 700; }
.vr-faq details[open] summary::before { content: "－"; }
.vr-faq .a { padding: 0 1.1rem 0.9rem; color: var(--color-text-muted); }

/* ── ХАБ: КАРТОЧКИ ────────────────────────────────── */
.vr-sect { font-size: 1.2rem !important; }
.vr-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 0.9rem; margin: 0 0 1.6rem; }
.vr-card {
  background: var(--color-surface-2); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); padding: 1rem 1.2rem;
  transition: border-color var(--transition-interactive);
}
.vr-card:hover { border-color: var(--color-accent); }
.vr-card a { display: block; font-weight: 600; text-decoration: none; margin-bottom: 0.35rem; }
.vr-card p { margin: 0; font-size: 0.87rem; color: var(--color-text-muted); line-height: 1.5; }

/* ── КТО ЭТО СДЕЛАЛ ───────────────────────────────── */
.vr-who {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); padding: 1.3rem 1.7rem; margin: 3rem 0 0;
}
.vr-who h2 { margin-top: 0; font-size: 1.2rem; }
.vr-who p { font-size: 0.95rem; }
.vr-who-links { margin-bottom: 0; }

/* ── Кредит: откуда материал ───────────────────────── */
.vr-credit {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-accent); border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: 0.85rem 1.2rem; margin: 2rem 0 0; font-size: 0.94rem;
  color: var(--color-text-muted);
}
.vr-credit b { color: var(--color-text); }