/* Цвета, которые повторно используются по всему сайту. */
:root {
  color-scheme: light; /* Просит браузер использовать светлые системные элементы управления. */
  --page: #f5f6f1; /* Светлый фон всей страницы. */
  --surface: #fff; /* Белый фон карточек, кнопок и фото. */
  --text: #1d2723; /* Основной тёмный цвет текста. */
  --muted: #68736d; /* Менее контрастный цвет поясняющего текста. */
  --line: #e2e7df; /* Светлый цвет рамок и разделительных линий. */
  --accent: #526fd1; /* Основной синий акцент для кнопок и выделений. */
  --accent-dark: #3e57ac; /* Более тёмный акцент для наведения и меток. */
}

/* Включает рамки и отступы в расчёт ширины каждого элемента. */
* {
  box-sizing: border-box; /* Предотвращает неожиданное увеличение размеров блоков. */
}

/* Настройки поведения прокрутки страницы. */
html {
  scroll-behavior: smooth; /* Плавно прокручивает страницу к выбранным секциям. */
}

/* Базовое оформление всей страницы. */
body {
  margin: 0; /* Убирает стандартный внешний отступ браузера вокруг страницы. */
  background: var(--page); /* Задаёт светлый фон из палитры. */
  color: var(--text); /* Задаёт основной цвет текста. */
  font: 16px/1.6 Inter, "Segoe UI", sans-serif; /* Настраивает шрифт, размер и высоту строк. */
}

/* Общий вид ссылок: без стандартного подчёркивания. */
a {
  color: inherit; /* Использует цвет текста родительского элемента. */
  text-decoration: none; /* Убирает подчёркивание у ссылок. */
}

/* Контейнер центрирует содержимое и ограничивает ширину на больших экранах. */
.page-shell {
  width: min(100% - 40px, 1000px); /* Оставляет поля по краям и ограничивает ширину 1000 пикселями. */
  margin: auto; /* Выравнивает контейнер по центру окна. */
}

/* Общая раскладка для шапки, подвала и горизонтальных панелей. */
.site-header,
.site-footer,
.section-heading,
.contact-panel {
  display: flex; /* Располагает вложенные элементы в гибкую строку. */
  align-items: center; /* Выравнивает вложенные элементы по вертикали. */
  justify-content: space-between; /* Раздвигает содержимое к левому и правому краю. */
  gap: 24px; /* Оставляет промежуток между элементами, если места мало. */
}

/* Высота верхней шапки. */
.site-header {
  min-height: 76px; /* Сохраняет достаточное пространство вокруг имени. */
}

/* Имя и значок владельца страницы. */
.brand {
  display: flex; /* Ставит букву-значок и имя в одну строку. */
  align-items: center; /* Выравнивает значок и имя по центру. */
  gap: 10px; /* Добавляет промежуток между значком и именем. */
  font-weight: 700; /* Делает имя полужирным. */
}

/* Квадратный значок с первой буквой имени. */
.brand-mark {
  display: grid; /* Позволяет удобно центрировать букву внутри значка. */
  width: 38px; /* Задаёт ширину значка. */
  height: 38px; /* Задаёт высоту значка. */
  place-items: center; /* Центрирует букву по горизонтали и вертикали. */
  border-radius: 12px; /* Скругляет углы значка. */
  background: var(--accent); /* Заливает значок основным акцентным цветом. */
  color: white; /* Делает букву белой и контрастной. */
}

/* Группы элементов, которые размещаются рядом и переносятся при нехватке места. */
.main-nav,
.hero-actions,
.skills,
.contact-links {
  display: flex; /* Раскладывает дочерние элементы в строку. */
  flex-wrap: wrap; /* Переносит элементы на новую строку, когда они не помещаются. */
  gap: 12px; /* Добавляет одинаковое расстояние между элементами группы. */
}

/* Если навигация используется, задаёт расстояние и спокойный цвет ссылок. */
.main-nav {
  gap: 24px; /* Увеличивает промежуток между пунктами навигации. */
  color: var(--muted); /* Делает текст навигации менее ярким, чем основной текст. */
  font-size: 14px; /* Немного уменьшает размер пунктов навигации. */
}

/* Цвет ссылок меняется при наведении мыши. */
.main-nav a:hover,
.text-link:hover {
  color: var(--accent-dark); /* Выделяет ссылку синим при наведении. */
}

/* Первый экран делит текст и фотографию на две колонки. */
.hero {
  display: grid; /* Включает сеточную раскладку главного блока. */
  grid-template-columns: 1.1fr 0.9fr; /* Отводит тексту немного больше места, чем фотографии. */
  align-items: center; /* Выравнивает текст и фотографию по вертикали. */
  gap: 56px; /* Разделяет две колонки. */
  padding: 56px 0 72px; /* Добавляет свободное место сверху и снизу первого экрана. */
}

/* Маленькие заглавные подписи над главным заголовком и заголовками секций. */
.eyebrow,
.section-kicker {
  color: var(--accent-dark); /* Выделяет подпись тёмно-синим цветом. */
  font-size: 12px; /* Делает подпись компактной. */
  font-weight: 700; /* Делает подпись жирной. */
  letter-spacing: 0.1em; /* Раздвигает буквы для оформления метки. */
  text-transform: uppercase; /* Отображает подпись заглавными буквами. */
}

/* Убирает стандартный верхний отступ у заголовков и параграфов. */
h1,
h2,
h3,
p {
  margin-top: 0; /* Сохраняет предсказуемые расстояния между блоками. */
}

/* Главный заголовок на первом экране. */
h1 {
  margin-bottom: 16px; /* Оставляет место между заголовком и текстом под ним. */
  font-size: clamp(40px, 6vw, 64px); /* Адаптирует размер от 40 до 64 пикселей под ширину окна. */
  letter-spacing: -0.06em; /* Немного сближает буквы крупного заголовка. */
  line-height: 1.1; /* Делает строки заголовка компактнее. */
}

/* Цвет имени внутри главного заголовка. */
h1 span {
  color: var(--accent); /* Окрашивает имя синим акцентным цветом. */
}

/* Цвет поясняющего текста в описании и карточках. */
.hero-copy,
.section-intro,
.project-card p,
.contact-panel p {
  color: var(--muted); /* Визуально отделяет пояснения от заголовков. */
}

/* Ограничивает ширину описания рядом с фотографией. */
.hero-copy {
  max-width: 500px; /* Не даёт строкам текста становиться слишком длинными. */
  margin-bottom: 24px; /* Отделяет описание от кнопок. */
}

/* Общий вид кнопок и ссылок контактов. */
.button,
.contact-link {
  display: inline-flex; /* Позволяет выровнять текст и иконку в одну строку. */
  align-items: center; /* Центрирует содержимое по вертикали. */
  justify-content: center; /* Центрирует содержимое по горизонтали. */
  gap: 8px; /* Добавляет расстояние между подписью и иконкой. */
  border: 1px solid var(--line); /* Рисует тонкую светлую рамку. */
  border-radius: 10px; /* Скругляет углы. */
  background: var(--surface); /* Задаёт белый фон элемента. */
  font-size: 13px; /* Устанавливает компактный размер подписи. */
  font-weight: 650; /* Делает подпись кнопки заметной. */
}

/* Размер и поведение кнопок на первом экране. */
.button {
  min-height: 46px; /* Делает кнопку достаточно высокой для нажатия. */
  padding: 0 16px; /* Добавляет пространство слева и справа от текста. */
  cursor: pointer; /* Показывает курсор-указатель над кнопкой. */
}

/* Акцентная кнопка призыва к действию. */
.button-primary {
  border-color: var(--accent); /* Подбирает рамку под основной цвет кнопки. */
  background: var(--accent); /* Заливает кнопку основным синим цветом. */
  color: white; /* Делает текст кнопки контрастным. */
}

/* Затемняет акцентную кнопку при наведении. */
.button-primary:hover {
  background: var(--accent-dark); /* Показывает пользователю, что кнопка активна. */
}

/* Обратная связь при наведении на вторичную кнопку и ссылки. */
.button-secondary:hover,
.contact-link:hover {
  border-color: var(--accent); /* Подсвечивает рамку акцентным цветом. */
  color: var(--accent-dark); /* Окрашивает текст элемента в тёмно-синий. */
}

/* Размер иконок внутри кнопок и контактных ссылок. */
.button svg,
.contact-link svg {
  width: 17px; /* Ограничивает ширину иконки. */
  height: 17px; /* Ограничивает высоту иконки. */
}

/* Светлая рамка-карточка вокруг фотографии. */
.photo-frame {
  position: relative; /* Создаёт локальную систему координат для содержимого фото. */
  width: min(100%, 360px); /* Не даёт рамке быть шире колонки или 360 пикселей. */
  justify-self: end; /* Прижимает фотографию к правому краю колонки. */
  padding: 12px; /* Оставляет внутреннее поле вокруг фото. */
  border: 1px solid var(--line); /* Рисует тонкую рамку карточки. */
  border-radius: 24px; /* Скругляет внешние углы карточки. */
  background: var(--surface); /* Делает фон карточки белым. */
  box-shadow: 0 16px 44px #23342814; /* Добавляет мягкую тень под карточкой. */
}

/* Портрет: задаёт размер, форму и способ кадрирования исходной фотографии. */
.profile-photo {
  display: block; /* Убирает лишнюю базовую линию вокруг изображения. */
  width: 100%; /* Растягивает фото на всю внутреннюю ширину рамки. */
  aspect-ratio: 1 / 1.08; /* Делает фото чуть выше, чем шире. */
  border-radius: 16px; /* Скругляет углы самого изображения. */
  object-fit: cover; /* Заполняет область фото без искажения пропорций. */
  object-position: center 36%; /* Выбирает область кадра с учётом положения лица. */
}

/* Подпись с галочкой находится под изображением и не закрывает его. */
.photo-caption {
  display: flex; /* Выстраивает значок и текст подписи в одну строку. */
  align-items: center; /* Выравнивает значок относительно текста по вертикали. */
  gap: 8px; /* Оставляет промежуток между значком и подписью. */
  margin: 10px 4px 2px; /* Отделяет подпись от фото и краёв рамки. */
  font-size: 12px; /* Делает подпись небольшой. */
  font-weight: 700; /* Делает подпись заметной. */
}

/* Цветной квадрат вокруг значка-галочки. */
.caption-icon {
  display: grid; /* Используется для центрирования галочки. */
  width: 26px; /* Задаёт ширину квадрата значка. */
  height: 26px; /* Задаёт высоту квадрата значка. */
  flex: 0 0 auto; /* Не позволяет значку сжиматься при нехватке места. */
  place-items: center; /* Центрирует галочку по горизонтали и вертикали. */
  border-radius: 8px; /* Скругляет углы квадрата. */
  background: #e8edff; /* Заливает значок светло-синим фоном. */
  color: var(--accent-dark); /* Окрашивает галочку в тёмно-синий цвет. */
}

/* Размер и отображение SVG-галочки. */
.caption-icon svg {
  display: block; /* Убирает лишнее пустое место под SVG. */
  width: 15px; /* Задаёт ширину галочки. */
  height: 15px; /* Задаёт высоту галочки. */
}

/* Отступы и линия, которая визуально разделяет секции страницы. */
.section {
  padding: 48px 0; /* Добавляет вертикальный отступ внутри каждой секции. */
  border-top: 1px solid var(--line); /* Проводит линию над секцией. */
}

/* Заголовок секции и его пояснение. */
.section-heading {
  align-items: end; /* Выравнивает нижние края заголовка и пояснения. */
  margin-bottom: 24px; /* Отделяет заголовок секции от содержимого. */
}

/* Отступ под короткой меткой секции. */
.section-kicker {
  margin-bottom: 6px; /* Отделяет метку от заголовка секции. */
}

/* Заголовки секций. */
h2 {
  margin-bottom: 0; /* Убирает лишний отступ снизу заголовка. */
  font-size: clamp(26px, 4vw, 34px); /* Адаптирует размер для разных экранов. */
  letter-spacing: -0.04em; /* Немного сближает буквы заголовка. */
  line-height: 1.2; /* Настраивает расстояние между строками заголовка. */
}

/* Поясняющий текст рядом с заголовком секции. */
.section-intro {
  max-width: 400px; /* Ограничивает длину строки, чтобы текст было удобно читать. */
  margin-bottom: 0; /* Убирает стандартный отступ параграфа снизу. */
  font-size: 14px; /* Делает пояснение компактнее основного текста. */
}

/* Контейнер .skills в HTML группирует все теги навыков в одну переносимую строку. */
.skills {
  gap: 9px; /* Равномерно раздвигает теги навыков. */
}

/* Каждый элемент span.skill-tag — отдельный навык, например «Тест-дизайн» или «Баг-репорты». */
.skill-tag {
  padding: 8px 13px; /* Добавляет свободное место внутри тега. */
  border: 1px solid var(--line); /* Отделяет тег от фона тонкой рамкой. */
  border-radius: 99px; /* Делает края тега полностью округлыми. */
  background: var(--surface); /* Задаёт белый фон тегу. */
  font-size: 12px; /* Уменьшает текст, чтобы теги выглядели компактно. */
}

/* Контейнер .cards содержит все карточки article.project-card и выстраивает их в три колонки. */
.cards {
  display: grid; /* Включает сетку для карточек. */
  grid-template-columns: repeat(3, 1fr); /* Создаёт три одинаковые колонки. */
  gap: 14px; /* Оставляет пространство между карточками. */
}

/* Каждый article.project-card показывает отдельную тему практики.
   .contact-panel использует те же рамку, отступы и фон для контактного блока. */
.project-card,
.contact-panel {
  padding: 22px; /* Добавляет внутреннее пространство вокруг содержимого. */
  border: 1px solid var(--line); /* Рисует тонкую границу карточки. */
  border-radius: 16px; /* Скругляет углы карточки. */
  background: var(--surface); /* Задаёт белый фон. */
}

/* span.card-number внутри карточки показывает её порядковый номер и направление практики. */
.card-number {
  color: var(--accent); /* Выделяет подпись основным синим цветом. */
  font-size: 11px; /* Делает подпись меньше заголовка карточки. */
  font-weight: 700; /* Делает подпись заметной. */
}

/* Заголовок h3 внутри каждой .project-card отделяется от номера и описания. */
.project-card h3 {
  margin: 16px 0 8px; /* Размещает заголовок между номером и описанием. */
  font-size: 17px; /* Задаёт размер заголовка карточки. */
}

/* Текст p внутри каждой .project-card описывает соответствующую тему QA. */
.project-card p {
  margin-bottom: 0; /* Убирает пустое пространство после последнего абзаца. */
  font-size: 13px; /* Делает описание компактным. */
}

/* У контактного блока нет дополнительного внешнего отступа сверху. */
.contact-panel {
  margin-top: 0; /* Сохраняет заданное расстояние только у секции. */
}

/* Отделяет заголовок контактов от пояснения. */
.contact-panel h2 {
  margin-bottom: 8px; /* Добавляет небольшой отступ под заголовком. */
}

/* Компактный текст внутри контактного блока. */
.contact-panel p {
  margin-bottom: 0; /* Убирает лишний нижний отступ параграфа. */
  font-size: 13px; /* Уменьшает пояснение относительно заголовка. */
}

/* Прижимает кнопки контактов к правой стороне панели. */
.contact-links {
  justify-content: end; /* Выравнивает ссылки Telegram, Email и GitHub справа. */
}

/* Высота и внутренние отступы ссылок-кнопок контактов. */
.contact-link {
  min-height: 40px; /* Делает ссылку удобной для нажатия. */
  padding: 0 12px; /* Добавляет горизонтальное пространство вокруг подписи. */
}

/* Отступ снизу у секции контактов. */
.contact-section {
  padding-bottom: 60px; /* Отделяет контакты от подвала страницы. */
}

/* Нижний колонтитул сайта. */
.site-footer {
  justify-content: center; /* Центрирует строку с копирайтом и годом. */
  min-height: 64px; /* Создаёт компактную область внизу страницы. */
  border-top: 1px solid var(--line); /* Отделяет подвал тонкой линией. */
  color: var(--muted); /* Делает служебный текст менее ярким. */
  font-size: 12px; /* Уменьшает подписи в подвале. */
}

/* Правила для экранов шириной до 700 пикселей (планшеты и небольшие окна). */
@media (max-width: 700px) {
  .hero {
    grid-template-columns: 1fr 0.8fr; /* Уменьшает долю ширины, отданную фотографии. */
    gap: 28px; /* Сокращает расстояние между текстом и фото. */
  }

  .cards {
    grid-template-columns: 1fr; /* Располагает карточки практики вертикально. */
  }

  .contact-panel {
    align-items: flex-start; /* Выравнивает содержимое к левому краю. */
    flex-direction: column; /* Ставит текст и ссылки контактов друг под другом. */
  }

  .contact-links {
    justify-content: flex-start; /* Выравнивает контактные ссылки слева. */
  }
}

/* Дополнительная адаптация для телефонов с шириной до 520 пикселей. */
@media (max-width: 520px) {
  .page-shell {
    width: calc(100% - 32px); /* Оставляет по 16 пикселей поля с каждой стороны. */
  }

  .site-header {
    min-height: 68px; /* Уменьшает высоту шапки на телефоне. */
  }

  .main-nav {
    gap: 12px; /* Сокращает промежутки пунктов навигации, если она включена. */
    font-size: 12px; /* Уменьшает навигационный текст на узком экране. */
  }

  .hero {
    grid-template-columns: 1fr; /* Ставит текст и фотографию в один столбец. */
    gap: 32px; /* Добавляет вертикальный промежуток между ними. */
    padding: 36px 0 48px; /* Уменьшает отступы первого экрана для телефона. */
  }

  .photo-frame {
    width: 82%; /* Уменьшает карточку фото относительно доступной ширины. */
    justify-self: center; /* Размещает фотографию по центру. */
  }

  .section {
    padding: 38px 0; /* Уменьшает вертикальные отступы секций на телефоне. */
  }

  .section-heading {
    align-items: flex-start; /* Выравнивает текст секции по левому краю. */
    flex-direction: column; /* Ставит заголовок и пояснение друг под другом. */
    gap: 10px; /* Добавляет небольшой зазор между ними. */
  }

  .contact-links {
    width: 100%; /* Растягивает группу контактных ссылок на ширину панели. */
  }

  .contact-link {
    flex: 1; /* Равномерно распределяет доступную ширину между кнопками контактов. */
  }
}