/* ============================================================
   base.css — базовые (общие) стили для всех страниц портфолио
   Частные стили страниц (index/resume/portfolio/contacts) наследуют
   отсюда переменные и компоненты и лишь дополняют их при необходимости.
   ============================================================ */

/* --- Дизайн-токены ------------------------------------------------ */
:root {
  --color-primary: #002b8c;   /* основной синий */
  --color-accent: #8095c5;    /* акцент при наведении */
  --color-muted: #cdd1d9;     /* неактивные элементы */
  --color-bg: #ffffff;

  --font-main: 'Alata', sans-serif;
  --line-height: 1.38;

  --title-size: 48px;
  --subtitle-size: 20px;

  --container-width: 920px;
  --container-pad-y: 88px;
  --container-pad-x: 20px;
}

/* --- Сброс / нормализация ----------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  font-family: var(--font-main);
  color: var(--color-primary);
  background-color: var(--color-bg);
}

a {
  color: inherit;
  text-decoration: none;
}

/* Alata поставляется только в одном начертании (вес 400).
   Не даём браузеру синтезировать «искусственный» жирный для bold-тегов. */
strong,
b {
  font-weight: 400;
}

img {
  display: block;
  max-width: 100%;
}

/* --- Контейнер страницы ------------------------------------------- */
/* Используется на внутренних страницах (resume / portfolio / contacts):
   центрируется по горизонтали, отступ сверху задаёт вертикальный ритм. */
.container {
  width: 100%;
  max-width: var(--container-width);
  margin: 0 auto;
  padding: var(--container-pad-y) var(--container-pad-x);
}

/* --- Заголовок-ссылка (общий навигационный компонент) ------------- */
/* Применяется и для крупной навигации на главной, и как ссылка-заголовок,
   возвращающая на главную с внутренних страниц. */
.nav-link {
  display: inline-flex;
  flex-direction: column;
  color: inherit;
  transition: transform 0.2s ease-in-out, color 0.2s ease-in-out;
}

.nav-link:hover {
  transform: scale(1.05);
  color: var(--color-accent);
}

.nav-link-title {
  font-size: var(--title-size);
  line-height: var(--line-height);
}

.nav-link-subtitle {
  font-size: var(--subtitle-size);
  line-height: var(--line-height);
}

/* --- Общие медиа-объекты ------------------------------------------ */
.avatar {
  width: 212px;
  height: 212px;
  border-radius: 4px;
  object-fit: cover;
  flex-shrink: 0;
}

.text {
  margin: 0;
  font-size: 16px;
  line-height: var(--line-height);
}

/* --- Адаптив: общие правила для планшетов и мобильных ------------- */
@media (max-width: 768px) {
  :root {
    --container-pad-y: 56px;
    --title-size: 40px;
    --subtitle-size: 18px;
  }
}

@media (max-width: 480px) {
  :root {
    --container-pad-y: 40px;
    --title-size: 36px;
  }
}