/* ==========================================================================
   Страницы профессий и справочник /professii. Основа: prof.css (токены, кнопки, шапка, FAQ).
   ========================================================================== */
.seo-main { max-width: 980px; }
.crumbs { font-size: 14px; color: var(--muted); padding: 4px 0 6px; display: flex; flex-wrap: wrap; gap: 6px; }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--blue); }
.seo-hero { padding: 14px 0 10px; }
.seo-hero h1 { font-size: clamp(28px, 4.4vw, 46px); font-weight: 850; margin: 14px 0 12px; }
.seo-hero .lead { max-width: 760px; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }

.seo-sec { margin-top: 26px; }
.seo-sec > h2, .card > h2, .cta-card > h2 { font-size: clamp(21px, 2.4vw, 27px); font-weight: 800; margin-bottom: 14px; }
.seo-sec h3 { font-size: 18px; margin: 22px 0 10px; }
.seo-sec.two { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.seo-sec.two > .card { margin: 0; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: clamp(18px, 3vw, 28px); box-shadow: var(--shadow); }
.card p + p, .card p + ul, .card ul + p { margin-top: 12px; }
.card p { color: var(--text-2); }

.types { list-style: none; padding: 0; margin: 12px 0; display: grid; gap: 8px; }
.types li { display: flex; gap: 10px; align-items: baseline; color: var(--text-2); }
.tdot { flex: none; width: 11px; height: 11px; border-radius: 50%; transform: translateY(1px); }

.lead-s { font-size: 18px; color: var(--text-2); }
.kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 18px 0 8px; }
.kpi { background: var(--surface-2); border-radius: 16px; padding: 14px 16px; }
.kpi small { display: block; color: var(--muted); font-size: 13.5px; }
.kpi b { display: block; font-size: clamp(19px, 2.4vw, 25px); font-weight: 850; margin-top: 4px; font-variant-numeric: tabular-nums; }
.note { font-size: 14px; color: var(--muted); margin-top: 8px; }

.tbl-wrap { overflow-x: auto; }
.tbl { width: 100%; border-collapse: collapse; font-size: 15.5px; font-variant-numeric: tabular-nums; }
.tbl th { text-align: left; font-size: 13.5px; color: var(--muted); font-weight: 600; padding: 8px 10px; border-bottom: 1px solid var(--line); }
.tbl td { padding: 9px 10px; border-bottom: 1px solid var(--line); }
.tbl th:not(:first-child), .tbl td:not(:first-child) { text-align: right; white-space: nowrap; }

.vac-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.vac-list li { border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; display: grid; gap: 2px; }
.vac-list b { font-size: 15.5px; }
.vac-list span { color: var(--teal); font-weight: 700; font-size: 15px; }
.vac-list small { color: var(--muted); font-size: 13.5px; }
.cta-row { margin-top: 20px; }

.cta-card { background: var(--grad); color: #fff; border-radius: var(--r); padding: clamp(22px, 4vw, 34px); box-shadow: var(--shadow-lg); }
.cta-card p { color: rgba(255, 255, 255, .92); margin-bottom: 18px; max-width: 640px; }
.cta-card .btn-primary { background: #fff; color: var(--blue); box-shadow: none; }

.seo-sec.block { padding: 0; }
.rels { display: flex; flex-wrap: wrap; gap: 10px; }
.rel { padding: 9px 15px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--text-2);
  text-decoration: none; font-weight: 600; font-size: 15px; }
.rel:hover { border-color: var(--blue); color: var(--blue); }
.rel.all { border-color: var(--blue); color: var(--blue); }

.pgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.pcard { display: grid; gap: 6px; align-content: start; background: var(--surface); border: 1px solid var(--line); border-radius: 18px;
  padding: 16px 18px; text-decoration: none; color: var(--text); box-shadow: var(--shadow); transition: border-color .15s, transform .15s; }
.pcard:hover { border-color: var(--blue); transform: translateY(-1px); }
.pcard b { font-size: 17px; }
.pcard span { font-size: 14.5px; color: var(--text-2); line-height: 1.45; }
.pcard small { font-size: 13.5px; color: var(--teal); font-weight: 600; }

@media (max-width: 720px) {
  .seo-sec.two, .vac-list { grid-template-columns: 1fr; }
  .kpis { grid-template-columns: 1fr 1fr; }
  .kpis .kpi:first-child { grid-column: 1 / -1; }
  .hero-cta .btn { width: 100%; }
  .pf-nav .pf-link { padding: 8px 11px; font-size: 14px; }
}

/* ---------------------------------------------------------------- статьи */
.art .seo-hero h1 { font-size: clamp(28px, 4.2vw, 44px); }
.art-meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 14px; color: var(--muted); }
.art-tag { padding: 4px 10px; border-radius: 999px; background: var(--surface-2); color: var(--text-2); font-weight: 600; font-size: 13px; }
.art-body { max-width: 760px; margin-top: 18px; font-size: 17.5px; line-height: 1.7; color: var(--text-2); }
.art-body h2 { font-size: clamp(22px, 2.8vw, 29px); color: var(--text); margin: 38px 0 12px; }
.art-body h3 { font-size: 19px; color: var(--text); margin: 24px 0 8px; }
.art-body p { margin: 0 0 14px; }
.art-body ul, .art-body ol { padding-left: 22px; margin: 0 0 16px; display: grid; gap: 7px; }
.art-body b { color: var(--text); }
.art-body a { text-decoration-thickness: 1px; text-underline-offset: 3px; }
.art-body details { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; margin-bottom: 10px; }
.art-body summary { cursor: pointer; padding: 14px 18px; font-weight: 700; color: var(--text); }
.art-body details p { padding: 0 18px 12px; margin: 0; }
.art-tbl { font-size: 15px; margin: 6px 0 18px; }
.art-tbl td { vertical-align: top; }
.art-tbl th:not(:first-child), .art-tbl td:not(:first-child) { text-align: left; white-space: normal; }
.art-cta { display: grid; gap: 6px; justify-items: start; margin: 24px 0; padding: 20px 22px; border-radius: 20px; background: var(--grad-soft);
  border: 1px solid var(--line); }
.art-cta b { font-size: 19px; color: var(--text); }
.art-cta span { font-size: 15.5px; }
.art-cta .btn { margin-top: 8px; }
.art-card span { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }

/* ---------------------------------------------------------------- пример отчёта */
.sample-note { margin: 6px 0 4px; padding: 14px 18px; border-radius: 16px; background: #fff7e6; border: 1px solid #f5d38a; color: #5b4300;
  font-size: 15.5px; line-height: 1.55; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .sample-note { background: #2b2210; border-color: #6b5312; color: #f3dfae; } }
.sample-bars { margin-top: 14px; }
.sample-h { font-size: clamp(22px, 2.8vw, 30px); margin: 30px 0 14px; }
.sample-tips { margin-top: 18px; }
.prof h3 a { color: inherit; text-decoration: none; }
.prof h3 a:hover { color: var(--blue); }

/* ---------------------------------------------------------------- форма отзыва */
.review-form { display: grid; gap: 10px; max-width: 640px; margin-top: 10px; }
.rv-label { font-weight: 700; font-size: 15px; margin-top: 6px; }
.review-form textarea, .review-form input[type="text"], .review-form input:not([type]) {
  width: 100%; font: inherit; font-size: 16px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line);
  background: var(--surface); color: var(--text); }
.review-form textarea:focus, .review-form input:focus { outline: none; border-color: var(--blue); }
.rv-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.rv-check { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; color: var(--text-2); margin: 6px 0; }
.rv-check input { width: 20px; height: 20px; margin-top: 2px; flex: none; }
.rv-error { padding: 10px 14px; border-radius: 12px; background: #fee2e2; color: #991b1b; font-weight: 600; }
.stars { display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; gap: 4px; }
.stars input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.stars label { font-size: 36px; line-height: 1; color: var(--line); cursor: pointer; transition: color .12s, transform .12s; }
.stars label:hover, .stars label:hover ~ label, .stars input:checked ~ label { color: #f59e0b; }
.stars label:hover { transform: scale(1.1); }
.stars input:focus-visible + label { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 6px; }
@media (max-width: 600px) { .rv-row { grid-template-columns: 1fr; } }