/**
 * СПб НИИФ — общие стили контента (текущий Bitrix-сайт)
 * Эталон: раздел /obrazovanie/ (#238fd4)
 *
 * Не путать с niif-2026 (новый сайт).
 * Префикс классов: nc-  |  переменные: --nc-*
 *
 * Подключение в шаблоне Bitrix (header.php):
 *   <link rel="stylesheet" href="/niif-content/css/niif-content.css">
 *
 * На странице:
 *   <div class="nc-page"> … компоненты … </div>
 */

/* ═══════════════════════════════════════════
   1. TOKENS
   ═══════════════════════════════════════════ */

:root {
  --nc-brand: #238fd4;
  --nc-brand-dark: #1b6fa8;
  --nc-brand-soft: #eef6fb;
  --nc-brand-line: #cfe4f1;
  --nc-brand-tint: #f7fbfe;
  --nc-brand-tint-2: #f3f9fd;
  --nc-brand-tint-3: #dff0fa;
  --nc-brand-tint-4: #dcecf5;
  --nc-brand-tint-5: #f4f9fd;

  --nc-text: #222222;
  --nc-text-2: #333333;
  --nc-text-3: #444444;
  --nc-text-4: #555555;
  --nc-white: #ffffff;

  --nc-alert: #9f3d3d;
  --nc-alert-border: #d56363;
  --nc-alert-soft: #fff5f5;

  --nc-radius: 12px;
  --nc-radius-sm: 10px;
  --nc-radius-xs: 8px;
  --nc-radius-pill: 999px;

  --nc-shadow: 0 5px 20px rgba(0, 0, 0, 0.06);
  --nc-shadow-sm: 0 4px 14px rgba(0, 0, 0, 0.04);
  --nc-shadow-brand: 0 10px 28px rgba(35, 143, 212, 0.25);
  --nc-shadow-hover: 0 12px 30px rgba(35, 143, 212, 0.2);
  --nc-shadow-lift: 0 10px 24px rgba(35, 143, 212, 0.2);

  --nc-grad: linear-gradient(135deg, #238fd4 0%, #1b6fa8 100%);

  --nc-gap: 30px;
  --nc-gap-sm: 22px;
  --nc-pad: 34px;
  --nc-pad-sm: 26px 24px;

  --nc-ease: 0.25s ease;
  --nc-font: inherit;
}

/* ═══════════════════════════════════════════
   2. PAGE SHELL
   ═══════════════════════════════════════════ */

.nc-page {
  font-family: var(--nc-font);
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  color: var(--nc-text);
}

.nc-page *,
.nc-page *::before,
.nc-page *::after {
  box-sizing: border-box;
}

.nc-page a {
  color: var(--nc-brand);
}

.nc-page a:hover {
  text-decoration: underline;
}

.nc-stack > * + * {
  margin-top: var(--nc-gap);
}

/* ═══════════════════════════════════════════
   3. TYPOGRAPHY
   ═══════════════════════════════════════════ */

.nc-h1,
.nc-h2,
.nc-h3 {
  font-weight: 700;
  line-height: 1.3;
  margin: 0 0 18px 0;
  color: var(--nc-brand);
}

.nc-h1 { font-size: 22pt; }
.nc-h2 { font-size: 18pt; }
.nc-h3 { font-size: 16pt; }

.nc-h1.is-dark,
.nc-h2.is-dark,
.nc-h3.is-dark {
  color: var(--nc-text);
}

.nc-lead {
  font-size: 15pt;
  line-height: 1.55;
  margin: 0 0 16px 0;
  color: var(--nc-text-2);
}

.nc-text {
  font-size: 14pt;
  line-height: 1.65;
  margin: 0 0 14px 0;
  color: var(--nc-text-2);
}

.nc-text:last-child {
  margin-bottom: 0;
}

.nc-muted {
  color: var(--nc-text-3);
  font-size: 13.5pt;
  line-height: 1.55;
}

/* ═══════════════════════════════════════════
   4. CARD
   ═══════════════════════════════════════════ */

.nc-card {
  background: var(--nc-white);
  border-radius: var(--nc-radius);
  padding: var(--nc-pad);
  box-shadow: var(--nc-shadow);
  margin-bottom: var(--nc-gap);
}

.nc-card.is-bordered {
  border: 1px solid rgba(35, 143, 212, 0.08);
}

.nc-card.is-flush {
  margin-bottom: 0;
}

.nc-card__title {
  font-size: 18pt;
  line-height: 1.3;
  font-weight: 700;
  color: var(--nc-brand);
  margin: 0 0 18px 0;
}

.nc-card__title.is-dark {
  color: var(--nc-text);
  font-size: 17pt;
}

/* Nested cards: soft cells, no double shadow */
.nc-card .nc-card {
  box-shadow: none;
  border: 1px solid var(--nc-brand-line);
  background: var(--nc-brand-tint);
  padding: 22px 20px;
  margin-bottom: 0;
  height: 100%;
}

.nc-card .nc-card .nc-card__title {
  font-size: 15pt;
  margin-bottom: 12px;
}

.nc-card p {
  font-size: 14pt;
  line-height: 1.65;
  margin: 0 0 14px 0;
  color: var(--nc-text-2);
}

.nc-card p:last-child {
  margin-bottom: 0;
}

.nc-card ul,
.nc-card ol {
  margin: 0 0 14px 0;
  padding-left: 22px;
}

.nc-card li {
  font-size: 13.5pt;
  line-height: 1.5;
  margin-bottom: 10px;
  color: var(--nc-text-2);
}

.nc-card li:last-child {
  margin-bottom: 0;
}

/* ═══════════════════════════════════════════
   5. HERO / BRAND PANEL
   ═══════════════════════════════════════════ */

.nc-hero {
  background: var(--nc-grad);
  color: var(--nc-white);
  border-radius: var(--nc-radius);
  padding: 36px 32px;
  text-align: center;
  box-shadow: var(--nc-shadow-brand);
  margin-bottom: var(--nc-gap);
}

.nc-hero.is-left {
  text-align: left;
}

/* Soft intro for content pages (keeps Bitrix H1 as title) */
.nc-hero.is-soft,
.nc-intro {
  background: var(--nc-brand-soft);
  color: var(--nc-text-2);
  border: 1px solid var(--nc-brand-line);
  border-radius: var(--nc-radius);
  box-shadow: none;
  text-align: left;
  padding: 24px 26px;
  margin-bottom: var(--nc-gap);
}

.nc-hero.is-soft .nc-hero__title,
.nc-intro .nc-hero__title,
.nc-intro__title {
  color: var(--nc-brand);
  font-size: 18pt;
  margin: 0 0 10px 0;
}

.nc-hero.is-soft .nc-hero__text,
.nc-intro .nc-hero__text,
.nc-intro__text {
  color: var(--nc-text-2);
  margin: 0;
  max-width: none;
  font-size: 14pt;
  line-height: 1.6;
}

.nc-hero.is-soft a:not(.nc-btn):not(.nc-hero__btn),
.nc-intro a:not(.nc-btn):not(.nc-hero__btn) {
  color: var(--nc-brand);
  text-decoration: underline;
}

.nc-hero__badge {
  display: inline-block;
  background: var(--nc-white);
  color: var(--nc-brand);
  font-size: 12pt;
  font-weight: 700;
  padding: 8px 18px;
  border-radius: var(--nc-radius-pill);
  margin-bottom: 18px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.nc-hero__title {
  font-size: 22pt;
  font-weight: 700;
  line-height: 1.25;
  margin: 0 0 12px 0;
  color: var(--nc-white);
}

.nc-hero__text {
  font-size: 14pt;
  line-height: 1.5;
  margin: 0 auto 20px auto;
  color: var(--nc-white);
  max-width: 980px;
}

.nc-hero__text:last-child {
  margin-bottom: 0;
}

.nc-hero a:not(.nc-btn):not(.nc-hero__btn) {
  color: var(--nc-white);
  font-weight: 400;
  text-decoration: underline;
}

/* Soft brand panel (admission / info on blue) */
.nc-panel {
  background: var(--nc-grad);
  color: var(--nc-white);
  border-radius: var(--nc-radius);
  padding: 32px 34px;
  box-shadow: var(--nc-shadow-brand);
  margin-bottom: var(--nc-gap);
}

.nc-panel__title {
  font-size: 22pt;
  line-height: 1.3;
  font-weight: 700;
  color: var(--nc-white);
  margin: 0 0 20px 0;
  text-align: center;
}

.nc-panel__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.nc-panel__item {
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: var(--nc-radius-sm);
  padding: 20px 22px;
  min-height: 100%;
}

.nc-panel__label {
  display: block;
  font-size: 13pt;
  line-height: 1.35;
  font-weight: 700;
  color: var(--nc-white);
  margin-bottom: 10px;
}

.nc-panel__text {
  font-size: 13.5pt;
  line-height: 1.55;
  margin: 0;
  color: var(--nc-white);
}

.nc-panel__text a {
  color: var(--nc-white);
  font-weight: 400;
  text-decoration: none;
}

.nc-panel__text a:hover {
  text-decoration: underline;
}

/* ═══════════════════════════════════════════
   6. BUTTONS
   ═══════════════════════════════════════════ */

.nc-btn,
.nc-hero__btn {
  display: inline-block;
  background: var(--nc-white);
  color: var(--nc-brand-dark) !important;
  font-size: 15pt;
  font-weight: 700;
  text-decoration: none !important;
  padding: 14px 28px;
  border-radius: var(--nc-radius-xs);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  border: none;
  cursor: pointer;
}

.nc-btn:hover,
.nc-hero__btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.22);
  text-decoration: none !important;
}

.nc-btn--brand {
  background: var(--nc-brand);
  color: var(--nc-white) !important;
}

.nc-btn--brand:hover {
  background: var(--nc-brand-dark);
}

.nc-btn--outline {
  background: transparent;
  color: var(--nc-brand) !important;
  border: 2px solid var(--nc-brand);
  box-shadow: none;
}

.nc-btn--outline:hover {
  background: var(--nc-brand);
  color: var(--nc-white) !important;
}

/* ═══════════════════════════════════════════
   7. LINK / TILE GRID
   ═══════════════════════════════════════════ */

.nc-grid {
  display: grid;
  gap: var(--nc-gap-sm);
  margin-bottom: var(--nc-gap);
}

.nc-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.nc-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.nc-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.nc-tile {
  background: var(--nc-white);
  border-radius: var(--nc-radius-sm);
  padding: 30px 20px;
  text-align: center;
  min-height: 105px;
  box-shadow: var(--nc-shadow);
  transition: transform var(--nc-ease), box-shadow var(--nc-ease), background var(--nc-ease);
}

.nc-tile:hover {
  background: var(--nc-brand);
  transform: translateY(-4px);
  box-shadow: var(--nc-shadow-hover);
}

.nc-tile a,
a.nc-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 45px;
  font-size: 15pt;
  line-height: 1.35;
  font-weight: 700;
  text-decoration: none !important;
  color: var(--nc-brand);
  transition: color var(--nc-ease);
}

.nc-tile:hover a,
a.nc-tile:hover {
  color: var(--nc-white);
  text-decoration: none !important;
}

.nc-tile p {
  margin: 0;
}

/* Soft info cells (inside cards) */
.nc-info-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 20px;
}

.nc-info {
  background: var(--nc-brand-soft);
  border: 1px solid var(--nc-brand-line);
  border-radius: var(--nc-radius-sm);
  padding: 16px 18px;
  font-size: 14pt;
  line-height: 1.45;
  color: var(--nc-text-2);
}

.nc-info b,
.nc-info strong {
  color: var(--nc-brand-dark);
}

.nc-info p {
  margin: 0 0 10px 0;
}

.nc-info p:last-child {
  margin-bottom: 0;
}

.nc-info ul,
.nc-info ol {
  margin: 8px 0 0;
  padding-left: 18px;
}

.nc-info li {
  font-size: 13pt;
  line-height: 1.45;
  margin-bottom: 6px;
  color: var(--nc-text-2);
}

.nc-card > .nc-grid:last-child {
  margin-bottom: 0;
}

/* Tag / specialty chips (education hubs) */
.nc-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding: 0;
  margin: 22px 0 0;
  list-style: none;
}

.nc-tags li,
.nc-tag {
  background: var(--nc-brand-soft);
  color: var(--nc-brand-dark);
  border: 1px solid var(--nc-brand-line);
  border-radius: 999px;
  padding: 10px 18px;
  font-size: 14pt;
  font-weight: 700;
}

/* ═══════════════════════════════════════════
   8. DOCUMENT / RESOURCE LINKS
   ═══════════════════════════════════════════ */

.nc-docs {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: nc-docs;
}

.nc-docs--grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.nc-docs--grid > li {
  margin-bottom: 0;
  display: flex;
}

.nc-docs > li {
  counter-increment: nc-docs;
  margin-bottom: 14px;
}

.nc-docs > li:last-child {
  margin-bottom: 0;
}

.nc-doc {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--nc-white);
  border: 1px solid rgba(35, 143, 212, 0.18);
  border-radius: var(--nc-radius-sm);
  padding: 18px 20px;
  text-decoration: none !important;
  color: var(--nc-text-2);
  box-shadow: var(--nc-shadow-sm);
  min-height: 100%;
  width: 100%;
  transition:
    background var(--nc-ease),
    color var(--nc-ease),
    box-shadow var(--nc-ease),
    transform var(--nc-ease),
    border-color var(--nc-ease);
}

.nc-doc:hover {
  background: var(--nc-brand);
  color: var(--nc-white);
  border-color: var(--nc-brand);
  box-shadow: var(--nc-shadow-lift);
  transform: translateY(-2px);
  text-decoration: none !important;
}

.nc-doc__num,
.nc-doc__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  min-width: 38px;
  border-radius: 50%;
  background: var(--nc-brand);
  color: var(--nc-white);
  font-size: 12.5pt;
  font-weight: 700;
  transition: background var(--nc-ease), color var(--nc-ease);
}

.nc-doc__icon {
  width: 46px;
  height: 46px;
  min-width: 46px;
  font-size: 11pt;
  text-transform: uppercase;
}

.nc-doc__num::before {
  content: counter(nc-docs);
}

.nc-doc:hover .nc-doc__num,
.nc-doc:hover .nc-doc__icon {
  background: var(--nc-white);
  color: var(--nc-brand);
}

.nc-doc__body {
  flex: 1;
  min-width: 0;
}

.nc-doc__name {
  display: block;
  font-size: 13.5pt;
  line-height: 1.5;
  font-weight: 700;
  color: inherit;
}

.nc-doc__desc {
  display: block;
  font-size: 12pt;
  line-height: 1.4;
  margin-top: 4px;
  opacity: 0.85;
}

.nc-doc__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 58px;
  padding: 6px 10px;
  border-radius: var(--nc-radius-pill);
  background: var(--nc-brand-soft);
  color: var(--nc-brand);
  font-size: 10.5pt;
  font-weight: 700;
  text-transform: uppercase;
  transition: background var(--nc-ease), color var(--nc-ease);
}

.nc-doc:hover .nc-doc__badge {
  background: rgba(255, 255, 255, 0.2);
  color: var(--nc-white);
}

/* ═══════════════════════════════════════════
   9. NOTE / ALERT
   ═══════════════════════════════════════════ */

.nc-note {
  border-left: 5px solid var(--nc-alert-border);
  border-radius: var(--nc-radius-sm);
  color: var(--nc-alert);
  font-size: 13.5pt;
  line-height: 1.6;
  box-shadow: 0 5px 20px rgba(187, 78, 78, 0.1);
  padding: 22px 26px;
  text-align: left;
  background: var(--nc-white);
  margin: 0 0 var(--nc-gap) 0;
}

.nc-note p {
  margin: 0;
}

.nc-note a {
  color: var(--nc-alert);
  font-weight: 700;
}

.nc-note--info {
  border-left-color: var(--nc-brand);
  color: var(--nc-text-2);
  box-shadow: var(--nc-shadow);
  background: var(--nc-brand-tint-5);
}

.nc-note--info a {
  color: var(--nc-brand);
}

/* ═══════════════════════════════════════════
   9b. ACCORDION (native details — без зависимости от theme JS)
   ═══════════════════════════════════════════ */

.nc-acc {
  border: 1px solid var(--nc-brand-line);
  border-radius: var(--nc-radius-sm);
  background: rgba(204, 228, 234, 0.15);
  margin: 0 0 12px 0;
  padding: 4px 16px 4px 16px;
}

.nc-acc > summary {
  list-style: none;
  cursor: pointer;
  position: relative;
  padding: 14px 12px 14px 44px;
  font-size: 15pt;
  line-height: 1.45;
  font-weight: 700;
  color: var(--nc-text);
  outline: none;
}

.nc-acc > summary::-webkit-details-marker {
  display: none;
}

.nc-acc > summary::after {
  content: "";
  position: absolute;
  left: 0;
  top: 12px;
  width: 30px;
  height: 30px;
  background: url("/bitrix/templates/beauty_modern_s1/images/all-icons-blue.png") 0 -90px no-repeat;
}

.nc-acc[open] > summary::after {
  background-position: 0 -120px;
}

.nc-acc__body {
  padding: 0 12px 18px 44px;
  font-size: 13.5pt;
  line-height: 1.55;
  color: var(--nc-text-2);
}

.nc-acc__body ul {
  margin: 0;
  padding-left: 20px;
}

.nc-acc__body li {
  margin-bottom: 8px;
}

.nc-acc__body p {
  margin: 0 0 10px 0;
}

/*
 * Bitrix services-list accordion — надёжный режим через <details>,
 * без зависимости от jQuery toggleClass('active').
 * Разметка: <details class="services-list-item">
 *             <summary class="services-list-header">…</summary>
 *             <div class="services-list-content">…</div>
 *           </details>
 */
details.services-list-item > summary.services-list-header {
  list-style: none;
  display: block;
}

details.services-list-item > summary.services-list-header::-webkit-details-marker {
  display: none;
}

details.services-list-item[open] > .services-list-content,
details.services-list-item[open] > .services-list-content-small {
  display: block !important;
}

details.services-list-item[open] > .services-list-header::after,
details.services-list-item[open] > summary.services-list-header::after {
  background-position: 0 -120px;
}

/* Имена сотрудников — всегда синие (в т.ч. ссылки) */
.nc-page .nc-person__name,
.nc-page .nc-person__name a {
  color: var(--nc-brand);
}

.nc-final {
  background: var(--nc-white);
  border-radius: var(--nc-radius);
  padding: 28px 30px;
  box-shadow: var(--nc-shadow);
  margin-bottom: var(--nc-gap);
  text-align: center;
  border-left: 5px solid var(--nc-brand);
}

.nc-final a {
  font-size: 18pt;
  line-height: 1.4;
  color: var(--nc-brand);
  font-weight: 700;
  text-decoration: none;
}

.nc-final a:hover {
  text-decoration: underline;
}

/* ═══════════════════════════════════════════
   10. PERSON / DIRECTOR
   ═══════════════════════════════════════════ */

.nc-person {
  background: var(--nc-white);
  border-radius: var(--nc-radius);
  padding: var(--nc-pad);
  box-shadow: var(--nc-shadow);
  margin-bottom: var(--nc-gap);
  text-align: center;
}

.nc-person--row {
  display: grid;
  grid-template-columns: 230px minmax(0, 1fr);
  gap: 30px;
  align-items: center;
  text-align: left;
}

.nc-person__photo {
  display: block;
  width: 250px;
  height: 250px;
  margin: 0 auto 22px auto;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: var(--nc-brand-soft);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.14);
  border: 5px solid var(--nc-white);
  outline: 2px solid rgba(35, 143, 212, 0.18);
  transition: transform var(--nc-ease), outline-color var(--nc-ease);
}

.nc-person--row .nc-person__photo {
  width: 210px;
  height: 210px;
  margin: 0 auto;
  border-width: 6px;
}

.nc-person__photo:hover {
  transform: scale(1.03);
  outline-color: rgba(35, 143, 212, 0.55);
}

.nc-person__name {
  font-size: 20pt;
  line-height: 1.3;
  font-weight: 700;
  margin: 0 0 12px 0;
  color: var(--nc-text);
}

.nc-person--row .nc-person__name {
  font-size: 23pt;
  color: var(--nc-brand);
  margin-bottom: 10px;
}

.nc-person__name a {
  color: inherit;
  text-decoration: none;
}

.nc-person__name a:hover {
  color: var(--nc-brand);
  text-decoration: none;
}

.nc-person__role {
  font-size: 14pt;
  line-height: 1.45;
  font-weight: 700;
  color: var(--nc-brand);
  margin: 0;
}

.nc-person--row .nc-person__role {
  font-size: 15.5pt;
  color: var(--nc-text-2);
  margin-bottom: 14px;
}

.nc-person__text {
  font-size: 13.5pt;
  line-height: 1.65;
  color: var(--nc-text-2);
  margin: 0 0 14px 0;
}

/* ═══════════════════════════════════════════
   11. CONTACTS
   ═══════════════════════════════════════════ */

/* Contact card grid (ordinatura / DPO / contacts pages) */
.nc-contacts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--nc-gap-sm);
  margin-bottom: var(--nc-gap);
}

/* Inline contact lines — never treat as 3-col grid */
p.nc-contacts,
.nc-person .nc-contacts,
.nc-person__meta,
.nc-card > p.nc-contacts {
  display: block;
  grid-template-columns: none;
  gap: 0;
  margin: 0;
  padding: 0;
  font-size: 13.5pt;
  line-height: 1.6;
  color: var(--nc-text-2);
  box-shadow: none;
  background: transparent;
}

.nc-person__meta {
  margin-top: 4px;
}

.nc-contact {
  background: var(--nc-white);
  border-radius: var(--nc-radius-sm);
  padding: 26px 20px;
  text-align: center;
  min-height: 175px;
  height: 100%;
  box-shadow: var(--nc-shadow);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.nc-contact img {
  margin-bottom: 14px;
  width: 64px;
  height: 64px;
  max-width: 64px;
  max-height: 64px;
  object-fit: contain;
}

.nc-contact__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--nc-brand-soft);
  color: var(--nc-brand);
  font-size: 18pt;
  font-weight: 700;
  margin-bottom: 14px;
}

.nc-contact p {
  margin: 0;
  font-size: 14pt;
  line-height: 1.45;
  color: var(--nc-text-2);
}

.nc-contact a {
  color: var(--nc-brand);
  text-decoration: none;
  font-weight: 700;
}

.nc-contact a:hover {
  text-decoration: underline;
}

/* ═══════════════════════════════════════════
   12. STEPS / PARTNERS
   ═══════════════════════════════════════════ */

.nc-steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

.nc-step {
  background: var(--nc-brand-soft);
  border: 1px solid var(--nc-brand-line);
  border-radius: var(--nc-radius-sm);
  padding: 18px 20px;
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.nc-step__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  min-width: 42px;
  border-radius: 50%;
  background: var(--nc-brand);
  color: var(--nc-white);
  font-size: 13pt;
  font-weight: 700;
}

.nc-step__text {
  font-size: 14pt;
  line-height: 1.6;
  color: var(--nc-text-2);
  margin: 0;
}

.nc-partners {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.nc-partner {
  display: flex;
  align-items: center;
  gap: 18px;
  background: var(--nc-brand-tint);
  border: 1px solid rgba(35, 143, 212, 0.14);
  border-radius: var(--nc-radius-sm);
  padding: 18px 20px;
  min-height: 100%;
}

.nc-partner__logo {
  width: 92px;
  height: 72px;
  min-width: 92px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--nc-white);
  border-radius: var(--nc-radius-xs);
  box-shadow: var(--nc-shadow-sm);
  overflow: hidden;
}

.nc-partner__logo img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.nc-partner__name {
  font-size: 13.5pt;
  line-height: 1.45;
  font-weight: 700;
  color: var(--nc-text);
  margin: 0 0 6px 0;
}

.nc-partner__place {
  font-size: 12.5pt;
  line-height: 1.45;
  color: var(--nc-text-3);
  margin: 0;
}

/* ═══════════════════════════════════════════
   13. TABLES (приём / квоты / документы)
   ═══════════════════════════════════════════ */

.nc-table-wrap {
  width: 100%;
  margin: 0 0 var(--nc-gap) 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.nc-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  background: var(--nc-white);
}

.nc-table th,
.nc-table td {
  border: 1px solid var(--nc-brand-line);
  padding: 14px 16px;
  font-size: 13.5pt;
  line-height: 1.45;
  text-align: left;
  vertical-align: middle;
  color: var(--nc-text-2);
  word-break: normal;
  overflow-wrap: break-word;
}

.nc-table th {
  background: var(--nc-brand-soft);
  color: var(--nc-brand-dark);
  font-weight: 700;
  text-align: center;
}

.nc-table b,
.nc-table strong {
  color: var(--nc-brand-dark);
}

.nc-table a {
  color: var(--nc-brand);
  text-decoration: none;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.nc-table a:hover {
  text-decoration: underline;
}

.nc-table .is-center {
  text-align: center !important;
}

.nc-table__section {
  padding: 0 !important;
  border: 1px solid var(--nc-brand-dark) !important;
}

.nc-table__section-inner {
  background: var(--nc-grad);
  color: var(--nc-white);
  padding: 18px 22px;
  text-align: center;
}

.nc-table__section-inner h2,
.nc-table__section-inner h3 {
  margin: 0;
  font-size: 20pt;
  line-height: 1.3;
  color: var(--nc-white);
  font-weight: 700;
}

.nc-table--actions td {
  padding: 0;
  text-align: center;
}

.nc-table__action {
  display: block;
  padding: 24px 18px;
  color: var(--nc-brand) !important;
  text-decoration: none !important;
  font-size: 15pt;
  line-height: 1.35;
  font-weight: 700;
  background: var(--nc-white);
  transition: 0.2s ease;
}

.nc-table__action:hover {
  background: var(--nc-grad);
  color: var(--nc-white) !important;
  text-decoration: none !important;
}

.nc-table--compact th,
.nc-table--compact td {
  padding: 10px;
  font-size: 11.5pt;
}

.nc-table--note td {
  padding: 18px 20px;
  font-size: 13.5pt;
  line-height: 1.6;
  vertical-align: top;
}

.nc-table__note-title {
  text-align: center;
  font-size: 16pt !important;
  font-weight: 700;
  color: var(--nc-brand-dark) !important;
  background: var(--nc-brand-soft);
}

.nc-label-cell {
  width: 32%;
  font-weight: 700;
  color: var(--nc-brand-dark);
}

/* ═══════════════════════════════════════════
   14. MEDIA / POSTER
   ═══════════════════════════════════════════ */

.nc-media {
  background: var(--nc-white);
  border-radius: var(--nc-radius-sm);
  padding: 22px;
  box-shadow: var(--nc-shadow);
  margin-bottom: var(--nc-gap);
  text-align: center;
}

.nc-media a {
  display: block;
  text-decoration: none;
}

.nc-media img {
  display: block;
  width: 100%;
  max-width: 1024px;
  height: auto;
  margin: 0 auto;
  border-radius: var(--nc-radius-sm);
  box-shadow: 0 5px 18px rgba(0, 0, 0, 0.08);
  transition: transform var(--nc-ease), box-shadow var(--nc-ease);
}

.nc-media a:hover img {
  transform: translateY(-3px);
  box-shadow: var(--nc-shadow-hover);
}

/* ═══════════════════════════════════════════
   15. ARCHIVE LIST
   ═══════════════════════════════════════════ */

.nc-archive {
  background: var(--nc-white);
  border-radius: var(--nc-radius-sm);
  padding: 28px 30px;
  box-shadow: var(--nc-shadow);
  margin-bottom: var(--nc-gap);
}

.nc-archive__title {
  font-size: 18pt;
  font-weight: 700;
  color: var(--nc-brand);
  margin: 0 0 16px 0;
}

.nc-archive ul {
  margin: 0;
  padding-left: 22px;
}

.nc-archive li {
  font-size: 13.5pt;
  line-height: 1.5;
  margin-bottom: 10px;
}

.nc-archive a {
  color: var(--nc-brand);
  font-weight: 700;
  text-decoration: none;
}

.nc-archive a:hover {
  text-decoration: underline;
}

/* ═══════════════════════════════════════════
   16. STYLEGUIDE HELPERS (только для template)
   ═══════════════════════════════════════════ */

.nc-styleguide-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: var(--nc-gap);
}

.nc-swatch {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--nc-white);
  border-radius: var(--nc-radius-sm);
  padding: 10px 14px;
  box-shadow: var(--nc-shadow-sm);
  font-size: 12pt;
  color: var(--nc-text-2);
}

.nc-swatch__chip {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: 1px solid rgba(0, 0, 0, 0.08);
}

.nc-demo-section {
  margin-bottom: 48px;
}

.nc-demo-section > .nc-demo-label {
  font-size: 12pt;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--nc-brand-dark);
  margin: 0 0 14px 0;
  opacity: 0.85;
}

.nc-code {
  display: block;
  margin-top: 12px;
  padding: 12px 14px;
  background: #1e293b;
  color: #e2e8f0;
  border-radius: var(--nc-radius-xs);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  line-height: 1.45;
  overflow-x: auto;
  white-space: pre;
}

/* ═══════════════════════════════════════════
   17. RESPONSIVE
   ═══════════════════════════════════════════ */

@media (max-width: 1100px) {
  .nc-grid--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 1000px) {
  .nc-grid--2,
  .nc-grid--3,
  .nc-grid--4,
  .nc-panel__grid,
  .nc-contacts,
  .nc-partners,
  .nc-info-grid,
  .nc-docs--grid,
  .nc-person--row {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 700px) {
  .nc-hero,
  .nc-panel,
  .nc-card,
  .nc-person,
  .nc-final,
  .nc-archive {
    padding: var(--nc-pad-sm);
  }

  .nc-hero__title {
    font-size: 18pt;
  }

  .nc-h1,
  .nc-card__title,
  .nc-panel__title,
  .nc-hero__title,
  .nc-hero.is-soft .nc-hero__title,
  .nc-intro__title {
    font-size: 16pt;
  }

  .nc-hero.is-soft,
  .nc-intro {
    padding: 18px 16px;
  }

  .nc-person__photo {
    width: 200px;
    height: 200px;
  }

  .nc-person__name {
    font-size: 18pt;
  }

  .nc-doc {
    align-items: flex-start;
    flex-direction: column;
    gap: 12px;
  }

  .nc-partner {
    flex-direction: column;
    align-items: flex-start;
  }

  .nc-partner__logo {
    width: 100%;
    height: 90px;
  }

  .nc-final a {
    font-size: 15pt;
  }
}