/* ═══════════════════════════════════════════════════════════════
   Резюме — надстройка над styles.css.
   Свои компоненты только там, где их нет на главной: шапка резюме,
   плитка результатов, строки опыта, справочный блок и печать.
   ═══════════════════════════════════════════════════════════════ */

/* ─── Шапка страницы ─── */

.cv-hero {
  padding: calc(var(--static-space-104) + var(--static-space-48)) 0 var(--static-space-64);
  border-bottom: 1px solid var(--neutral-border-weak);
}

.cv-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--static-space-48);
  align-items: end;
}

.cv-hero__chip {
  display: inline-flex;
  align-items: center;
  gap: var(--static-space-8);
  padding: var(--static-space-8) var(--static-space-16);
  border: 1px solid var(--accent-border);
  border-radius: var(--radius-full);
  background: var(--accent-alpha-weak);
  color: var(--accent-on-background);
  font-family: var(--font-code);
  font-size: var(--font-size-label-xs);
  letter-spacing: 0.04em;
  margin-bottom: var(--static-space-24);
}

.cv-hero__title {
  font-size: clamp(2.5rem, 7vw, var(--font-size-display-l));
  line-height: 0.98;
  letter-spacing: -0.03em;
  font-weight: var(--font-weight-semiBold);
  margin: 0 0 var(--static-space-16);
  text-wrap: balance;
}

.cv-hero__role {
  font-size: var(--font-size-heading-m);
  font-weight: var(--font-weight-medium);
  color: var(--accent-on-background);
  margin: 0 0 var(--static-space-20);
  line-height: 1.35;
}

.cv-hero__role span {
  color: var(--neutral-on-background-weak);
  font-weight: var(--font-weight-normal);
}

.cv-hero__lead {
  font-size: var(--font-size-body-l);
  line-height: 1.6;
  color: var(--neutral-on-background-medium);
  max-width: 62ch;
  margin: 0 0 var(--static-space-32);
}

.cv-hero__lead strong {
  color: var(--neutral-on-background-strong);
  font-weight: var(--font-weight-medium);
}

.cv-hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--static-space-12);
}

.cv-hero__portrait {
  width: clamp(180px, 22vw, 260px);
  aspect-ratio: 1;
  border-radius: var(--radius-xl);
  overflow: hidden;
  border: 1px solid var(--neutral-border-medium);
  margin: 0;
  flex-shrink: 0;
}

/* студийный портрет держим в цвете: на резюме важно лицо, а не приём */
.cv-hero__portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--transition-macro);
}

.cv-hero__portrait:hover img { transform: scale(1.03); }

/* Строка контактов только для печати: на экране их несут кнопки */
.cv-print-contacts { display: none; }

/* ─── Плитка ключевых результатов ─── */

.kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--static-space-16);
}

.kpi {
  padding: var(--static-space-24);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-l);
  background: var(--surface-background);
  display: flex;
  flex-direction: column;
  gap: var(--static-space-8);
  transition: border-color var(--transition-micro), transform var(--transition-micro);
}

.kpi:hover {
  border-color: var(--neutral-border-strong);
  transform: translateY(-2px);
}

.kpi__num {
  font-family: var(--font-code);
  font-size: var(--font-size-heading-xl);
  font-weight: var(--font-weight-semiBold);
  letter-spacing: -0.02em;
  color: var(--neutral-on-background-strong);
  line-height: 1.1;
}

.kpi--accent { border-color: var(--accent-border); background: var(--accent-alpha-weak); }
.kpi--accent .kpi__num { color: var(--accent-on-background); }

.kpi__what {
  font-size: var(--font-size-body-s);
  line-height: 1.5;
  color: var(--neutral-on-background-medium);
}

.kpi__src {
  margin-top: auto;
  padding-top: var(--static-space-8);
  font-family: var(--font-code);
  font-size: var(--font-size-label-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--neutral-on-background-weak);
}

/* ─── Опыт ─── */

.roles { display: flex; flex-direction: column; }

.role-item {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  gap: var(--static-space-40);
  padding: var(--static-space-32) 0;
  border-top: 1px solid var(--neutral-border-weak);
}

.role-item:first-child { border-top: none; padding-top: var(--static-space-8); }

.role-item__when {
  font-family: var(--font-code);
  font-size: var(--font-size-body-s);
  color: var(--neutral-on-background-medium);
  line-height: 1.5;
}

.role-item__dur {
  display: block;
  color: var(--neutral-on-background-weak);
  font-size: var(--font-size-label-xs);
  margin-top: var(--static-space-4);
}

.role-item__title {
  font-size: var(--font-size-heading-m);
  font-weight: var(--font-weight-semiBold);
  margin: 0 0 var(--static-space-4);
  line-height: 1.3;
}

.role-item__org {
  font-size: var(--font-size-body-s);
  color: var(--neutral-on-background-medium);
  margin: 0 0 var(--static-space-16);
}

.role-item__org a { color: inherit; border-bottom: 1px solid var(--neutral-border-medium); }
.role-item__org a:hover { color: var(--accent-on-background); border-color: var(--accent-border); }
.role-item__org em { font-style: normal; color: var(--neutral-on-background-weak); }

.role-item ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--static-space-8);
}

.role-item li {
  position: relative;
  padding-left: var(--static-space-20);
  font-size: var(--font-size-body-m);
  line-height: 1.55;
  color: var(--neutral-on-background-medium);
  max-width: 72ch;
}

.role-item li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.68em;
  width: 8px;
  height: 1px;
  background: var(--neutral-border-strong);
}

.role-item li.is-win {
  color: var(--neutral-on-background-strong);
  font-weight: var(--font-weight-medium);
}

.role-item li.is-win::before { background: var(--accent-solid); height: 2px; }

.role-item--live .role-item__title::after {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-left: var(--static-space-12);
  border-radius: var(--radius-full);
  background: var(--accent-solid);
  vertical-align: middle;
}

/* ─── Продукты ─── */

/* сетка на главной рассчитана на четыре карточки; в резюме карточка одна и занимает всю строку */
#products .card { grid-column: 1 / -1; }

/* ─── Справочный блок: образование, языки, занятость ─── */

.facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--static-space-32);
}

.fact h3 {
  font-family: var(--font-code);
  font-size: var(--font-size-label-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--neutral-on-background-weak);
  font-weight: var(--font-weight-normal);
  margin: 0 0 var(--static-space-12);
  padding-bottom: var(--static-space-8);
  border-bottom: 1px solid var(--neutral-border-weak);
}

.fact ul { list-style: none; margin: 0; padding: 0; }

.fact li {
  font-size: var(--font-size-body-s);
  line-height: 1.55;
  color: var(--neutral-on-background-medium);
  margin-bottom: var(--static-space-8);
}

.fact li strong {
  display: block;
  color: var(--neutral-on-background-strong);
  font-weight: var(--font-weight-medium);
}

.fact li em {
  font-style: normal;
  color: var(--neutral-on-background-weak);
  font-size: var(--font-size-body-xs);
}

/* ─── Компактный список публикаций ─── */

.press--compact .press__item a { padding: var(--static-space-16) 0; }

.cv-press__all {
  margin-top: var(--static-space-24);
  display: inline-flex;
  align-items: center;
  gap: var(--static-space-8);
  font-size: var(--font-size-body-s);
  color: var(--neutral-on-background-medium);
  border-bottom: 1px solid var(--neutral-border-medium);
  padding-bottom: 2px;
}

.cv-press__all:hover { color: var(--accent-on-background); border-color: var(--accent-border); }

/* ─── Адаптив ─── */

@media (max-width: 900px) {
  .cv-hero__grid { grid-template-columns: minmax(0, 1fr); }
  .cv-hero__portrait { display: none; }
  .role-item { grid-template-columns: minmax(0, 1fr); gap: var(--static-space-12); }
  .role-item__dur { display: inline; margin-left: var(--static-space-8); }
}

/* ─── Печать: страница сама себе PDF ─── */

@media print {
  @page { margin: 12mm 13mm; }

  :root, [data-theme="dark"], [data-theme="light"] {
    --neutral-background-weak: #fff;
    --neutral-on-background-strong: #000;
    --neutral-on-background-medium: #333;
    --neutral-on-background-weak: #777;
    --neutral-border-weak: #e2e2e2;
    --neutral-border-medium: #d0d0d0;
    --neutral-border-strong: #999;
    --accent-on-background: #4f6b00;
    --accent-solid: #4f6b00;
    --accent-border: #cfcfcf;
    --accent-alpha-weak: transparent;
    --surface-background: transparent;
    --surface-border: #dcdcdc;
  }

  body { background: #fff; font-size: 9.4pt; line-height: 1.45; }

  .nav, .grain, .footer, .cv-hero__cta, .cv-press__all,
  .section--contact, .hero__glow { display: none !important; }

  /* портрет остаётся и на печати — резюме в СНГ читают с фотографией */
  .cv-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) 26mm; gap: 8mm; align-items: start; }
  /* display переопределяем явно: ширина листа попадает в мобильный медиазапрос, где портрет скрыт */
  .cv-hero__portrait { display: block; width: 26mm; border-radius: 2mm; border-color: #ddd; }

  .section { padding: 11px 0 0; }
  .wrap { max-width: none; padding: 0; }
  .wrap--split { display: block; }
  .section__aside { position: static; margin-bottom: 6px; display: flex; align-items: baseline; gap: 10px; }
  .section__head { display: block; margin-bottom: 6px; }
  .section__title { font-size: 11.5pt; margin: 0; }
  .idx { font-size: 7pt; }
  /* пояснения к секциям — экранная роскошь, на печати только занимают место */
  .section__note { display: none; }

  .cv-hero { padding: 0 0 var(--static-space-16); }
  .cv-hero__chip { display: none; }
  .cv-hero__title { font-size: 24pt; margin-bottom: 6px; }
  .cv-hero__role { font-size: 11pt; margin-bottom: 8px; }
  .cv-hero__lead { font-size: 9.6pt; max-width: none; margin-bottom: 8px; }

  .cv-print-contacts {
    display: block;
    margin: 0;
    padding-top: 7px;
    border-top: 1px solid var(--neutral-border-weak);
    font-size: 8.6pt;
    color: var(--neutral-on-background-medium);
  }

  .kpis { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .kpi { padding: 10px 12px; gap: 3px; break-inside: avoid; border-radius: 4px; }
  .kpi__num { font-size: 13pt; }
  .kpi__what { font-size: 8.4pt; line-height: 1.35; }
  .kpi__src { font-size: 7pt; padding-top: 2px; }

  .role-item { grid-template-columns: 130px minmax(0, 1fr); gap: 18px; padding: 11px 0; }
  .role-item__title { font-size: 10pt; break-after: avoid; }
  .role-item__org { font-size: 8.6pt; margin-bottom: 6px; break-after: avoid; }
  .role-item__when { font-size: 8.2pt; }
  .role-item ul { gap: 4px; }
  .role-item li { font-size: 8.8pt; line-height: 1.4; max-width: none; break-inside: avoid; }

  .cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
  #products .card { grid-column: 1 / -1; }
  .card { padding: 10px 12px !important; break-inside: avoid; border-radius: 4px; }
  .card__title { font-size: 9.6pt !important; }
  .card__text { font-size: 8.2pt; line-height: 1.4; }
  .card__kicker { font-size: 6.8pt; }
  .card__tags, .card__arrow { display: none; }

  .stack { gap: 10px; }
  .stack__group h3 { font-size: 8.4pt; }
  .chip { font-size: 8pt; padding: 2px 7px; }

  /* печатная ширина близка к мобильной, поэтому строку публикации собираем заново */
  .press__item a {
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr) auto;
    gap: 14px;
    align-items: baseline;
    padding: 4px 0 !important;
    border-radius: 0;
  }
  /* на узкой ширине styles.css растягивает источник на всю строку — в печати возвращаем колонку */
  .press__src { grid-column: 1; }
  .press__name { grid-column: 2; }
  .press__meta { grid-column: 3; }
  .press__item { border-top: 1px solid var(--neutral-border-weak); border-bottom: none; }
  .press__item:first-child { border-top: none; }
  .press__name { font-size: 8.6pt; }
  .press__src, .press__meta { font-size: 7.4pt; }
  .press__go { display: none; }

  .facts { grid-template-columns: repeat(4, 1fr); gap: 12px; }
  .fact { break-inside: avoid; }
  .fact h3 { font-size: 7pt; }
  .fact li { font-size: 8.6pt; margin-bottom: 4px; }

  a { color: #000 !important; text-decoration: none; }
}