/* =========================================================================
   Лёша Исанов — портфолио
   --------------------------------------------------------------------------
   СТРАТЕГИЯ АДАПТИВА
   • Макет нарисован для брейкпоинта 1200px (контент 1160px = 1200 − 2×20).
   • Контейнер .page фиксируется на max-width:1200px и центрируется. Он же —
     container query context (container-type: inline-size), поэтому единица
     1cqw == 1% его ширины. Все РАЗМЕРЫ ЛЕЙАУТА (отступы, гэпы, радиусы)
     заданы в cqw → ниже 1200px они масштабируются строго пропорционально,
     а на 1200px и выше «замораживаются» на дизайнерских значениях.
   • Картинки заданы через aspect-ratio (ассеты экспортированы под точные
     пропорции слотов) → тоже масштабируются пропорционально.
   • ТЕКСТ намеренно НЕ масштабируется в cqw. Размеры шрифта фиксированы
     ступенями под десктоп / планшет / мобилку (см. блок «ТИПОГРАФИКА»)
     и держатся в читаемых рамках.
   ========================================================================= */

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-feature-settings: "zero" 1;
  color: #202020;
  background: #ffffff;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; }
ul { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }

/* =========================================================================
   ТИПОГРАФИКА — фиксированные ступени размеров шрифта
   ========================================================================= */
:root {
  /* Десктоп (дизайн ≥1200px) */
  --fs-title:     24px;   /* заголовки кейсов / секций */
  --fs-body:      24px;   /* описания */
  --fs-sm:        20px;   /* теги, кнопки */
  --fs-hero-name: 24px;
  --fs-hero-sub:  20px;
  --fs-header:    20px;
  --fs-footer:    24px;
}
/* Планшет */
@media (max-width: 1199px) {
  :root {
    --fs-title:     21px;
    --fs-body:      21px;
    --fs-sm:        17px;
    --fs-hero-name: 21px;
    --fs-hero-sub:  17px;
    --fs-header:    18px;
    --fs-footer:    21px;
  }
}
/* Мобилка */
@media (max-width: 767px) {
  :root {
    --fs-title:     18px;
    --fs-body:      17px;
    --fs-sm:        15px;
    --fs-hero-name: 18px;
    --fs-hero-sub:  16px;
    --fs-header:    15px;
    --fs-footer:    18px;
  }
}
/* Узкая мобилка */
@media (max-width: 400px) {
  :root {
    --fs-title:     17px;
    --fs-body:      16px;
    --fs-sm:        14px;
    --fs-hero-name: 17px;
    --fs-hero-sub:  15px;
    --fs-header:    14px;
    --fs-footer:    17px;
  }
}

/* =========================================================================
   КОНТЕЙНЕР
   ========================================================================= */
.page {
  width: 100%;
  max-width: 1920px;          /* тянемся до 1920, дальше центрируем */
  margin: 0 auto;
  padding-inline: 20px;       /* 20px до краёв на десктопе/планшете */
  padding-top: 20px;          /* контент начинается с y=20 (как в макете) */
  padding-bottom: 20px;
  container-type: inline-size; /* 1cqw == 1% ширины контента */
}
@media (max-width: 767px) {
  .page { padding-inline: 4px; } /* 4px до краёв на мобилке */
}

/* Вертикальный ритм между крупными блоками (пропорционально ширине) */
.block        { margin-top: 20.7cqw; }  /* ≈ 240px на десктопе */
.block--first { margin-top: 10.3cqw; }  /* ≈ 120px после hero   */

/* =========================================================================
   ШАПКА (плавающая, поверх hero)
   ========================================================================= */
.site-header {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  width: calc(100% - 40px);
  max-width: 640px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 24px;
  border-radius: 12px;
  border: 1px solid rgba(218, 218, 218, 0.4);
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  transition: transform 0.35s ease; /* плавный уезд/возврат */
}
/* Спрятан: уезжает вверх за край экрана (сохраняя центрирование по X) */
.site-header--hidden {
  transform: translateX(-50%) translateY(calc(-100% - 24px));
}
.site-header__group {
  display: flex;
  align-items: center;
  gap: 24px;
  flex: 1;
  min-width: 0;
  font-size: var(--fs-header);
  font-weight: 500;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.site-header__group--end { justify-content: flex-end; }
.site-header__group a { transition: opacity 0.15s ease; }
.site-header__group a:hover { opacity: 0.55; }
.site-header__avatar {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  overflow: hidden;
  background: #fff;
}
.site-header__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Бургер — показывается только на мобилке (см. медиазапрос ниже) */
.site-header__burger {
  display: none;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  position: relative;
}
.site-header__burger span {
  position: absolute;
  left: 9px;
  right: 9px;
  height: 2px;
  border-radius: 2px;
  background: #202020;
  transition: transform 0.25s ease, opacity 0.2s ease;
}
.site-header__burger span:nth-child(1) { top: 14px; }
.site-header__burger span:nth-child(2) { top: 19px; }
.site-header__burger span:nth-child(3) { top: 24px; }
/* Открыто → крестик */
.site-header--open .site-header__burger span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.site-header--open .site-header__burger span:nth-child(2) { opacity: 0; }
.site-header--open .site-header__burger span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

@media (max-width: 767px) {
  .site-header { gap: 10px; padding: 10px 16px; }
  .site-header__avatar { width: 40px; height: 40px; order: 0; }  /* слева */
  .site-header__burger { display: inline-block; order: 1; }       /* справа */
  /* Ссылки в баре скрыты — показываются в полноэкранном меню (.mobile-menu) */
  .site-header__group,
  .site-header__group--end { display: none; }
}

/* =========================================================================
   ПОЛНОЭКРАННОЕ МЕНЮ (мобилка)
   ========================================================================= */
.mobile-menu { display: none; }            /* на десктопе отсутствует */
@media (max-width: 767px) {
  .mobile-menu {
    display: flex;
    position: fixed;
    inset: 0;
    z-index: 90;                /* ниже шапки (100): аватар и крестик остаются сверху */
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.96);
    -webkit-backdrop-filter: blur(24px);
    backdrop-filter: blur(24px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
  }
  .mobile-menu--open { opacity: 1; pointer-events: auto; }
  .mobile-menu__list {
    display: flex;
    flex-direction: column;
    align-items: center;        /* центральная выключка */
    text-align: center;
    gap: 28px;
  }
  .mobile-menu__list a {
    font-size: 28px;
    font-weight: 500;
    letter-spacing: -0.02em;
    color: #202020;
    transition: opacity 0.15s ease;
  }
  .mobile-menu__list a:active { opacity: 0.55; }
  body.menu-open { overflow: hidden; }      /* блокируем прокрутку фона */
}

/* =========================================================================
   КНОПКА (Telegram)
   ========================================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 24px;
  border-radius: 30px;
  background: #00a1ef;
  color: #fff;
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1;
  white-space: nowrap;
  box-shadow: inset 0 0 12px 0 #fff;
  transition: filter 0.15s ease, transform 0.15s ease;
}
.btn:hover { filter: brightness(1.05); }
.btn:active { transform: translateY(1px); }
.btn__icon { width: 20px; height: 20px; flex: 0 0 auto; }

/* =========================================================================
   HERO
   ========================================================================= */
.hero {
  position: relative;
  width: 100%;
  aspect-ratio: 1160 / 900;  /* выше, чем в макете (было 800) — длиннее путь пина заголовка */
  border-radius: 8px;
  overflow: hidden;
}
.hero__avatar {
  position: absolute;
  left: 50%;
  bottom: 0;              /* прибит к нижнему краю hero-блока */
  transform: translateX(-50%);
  width: 53.97%;          /* 1252/2320 — портретный кадр (как в макете, дизайн в 2×) */
  aspect-ratio: 1252 / 1166;  /* почти квадрат — человек заполняет кадр */
}
.hero__avatar-img {
  position: absolute;
  inset: 0;
}
.hero__avatar-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: bottom center;
}
/* Дефолтный слой ВСЕГДА непрозрачен (нижний). Это убирает «провал» в белый:
   во время перехода всегда есть полностью непрозрачная подложка.
   Плавно проявляем только верхний слой (улыбка). */
.hero__avatar-img--hover {
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
  will-change: opacity;
}
.hero__avatar:hover .hero__avatar-img--hover { opacity: 1; }
.hero__name,
.hero__sub {
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  margin: 0;
}
.hero__name {
  top: 27.9%;             /* центр на y223 из 800 */
  width: 55.2%;           /* 640 / 1160 */
  font-size: var(--fs-hero-name);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.0417em;  /* -1px @ 24px */
  /* Скролл-пин: --pin задаётся из JS (см. index.html). Пока 0 —
     заголовок в обычной позиции; при скролле едет вниз, оставаясь
     визуально на месте, пока не дойдёт до линии очков.
     z-index НЕ задаём: заголовок в DOM раньше фото, поэтому фото
     рисуется поверх — заголовок уходит ЗА изображение человека. */
  transform: translate(-50%, calc(-50% + var(--pin, 0px)));
  will-change: transform;
}
.hero__sub {
  top: 86.5%;             /* центр на y692 из 800 */
  width: 53.5%;           /* 620 / 1160 */
  font-size: var(--fs-hero-sub);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.025em;
}
.hero__btn {
  position: absolute;
  left: 50%;
  bottom: 2.5%;           /* 20 / 800 */
  transform: translateX(-50%);
}
.muted { color: #7e7e7e; }

/* Обёртка низа hero. На десктопе «прозрачна» (display:contents) — подзаголовок
   и кнопка остаются абсолютными, как заданы выше. На мобилке (ниже) становится
   флекс-колонкой у нижнего края с равными отступами текст↔кнопка↔край. */
.hero__bottom { display: contents; }

/* Мобилка: сохраняем ТОТ ЖЕ оверлей, что и на десктопе (нужен для скролл-пина
   заголовка за фото — поэтому объекты остаются absolute из базовых правил).
   Холст делаем портретным и повыше, а объекты — шире под узкий экран. */
@media (max-width: 767px) {
  .hero { aspect-ratio: 100 / 195; }   /* выше — чтобы путь пина остался комфортным при крупном фото */
  .hero__avatar { width: 129%; }       /* 86% × 1.5 — крупный портрет, плечи уходят за края (клипается hero) */
  .hero__name   { width: 90%; }
  /* Подзаголовок + кнопка — флекс-колонка у нижнего края.
     gap == padding-bottom → отступ текст↔кнопка равен отступу кнопка↔край блока. */
  .hero__bottom {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    gap: 24px;
    padding: 0 16px 24px;
  }
  .hero__sub,
  .hero__btn {
    position: static;
    transform: none;
  }
  .hero__sub { width: 92%; }
}

/* =========================================================================
   ЗАГОЛОВКИ / БЛОК «ABOUT» (заголовок кейса + описание + теги)
   ========================================================================= */
.section-title {
  margin: 0;
  font-size: var(--fs-title);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.0417em;  /* -1px @ 24px */
}

.about {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1cqw;                 /* 12px колонка */
  align-items: start;        /* заголовок кейса прижат к верху — на линии с описанием */
}
.about__title {
  margin: 0;
  font-size: var(--fs-title);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.0417em;  /* -1px @ 24px */
}
.about__body { align-self: start; }
.about__desc {
  margin: 0;
  font-size: var(--fs-body);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.0208em;  /* -0.5px @ 24px */
  color: #939393;
}
.about__tags {
  display: flex;
  gap: 0.34cqw;             /* 4px */
  margin-top: 3.4cqw;       /* ≈ 40px */
}
.tag {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 12px 24px;
  border-radius: 12px;
  background: #fafafa;
  border: 1px solid rgba(218, 218, 218, 0.4);
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: -0.025em;
  white-space: nowrap;
}

/* «About» на мобилке: в столбик, заголовок слева */
@media (max-width: 767px) {
  .about { grid-template-columns: 1fr; gap: 2.4cqw; }
  .about__title { text-align: left; }
  .about__tags { margin-top: 4cqw; flex-wrap: wrap; }
  .tag { flex: 1 1 auto; padding: 10px 14px; }
}

/* =========================================================================
   ГАЛЕРЕЯ КЕЙСА
   ========================================================================= */
.gallery {
  display: flex;
  flex-direction: column;
  gap: 12px;                /* фикс. 12px между рядами (десктоп/планшет) */
  margin-top: 6.9cqw;       /* ≈ 80px от заголовка/about до галереи */
}
.row { width: 100%; }
/* Рамки изображений: скругление и обрезка на КОНТЕЙНЕРЕ, чтобы картинка
   могла зумиться внутри рамки, не раздвигая её. */
.row--full,
.row--tall,
.row--short,
.row--self,
.cell {
  overflow: hidden;
  border-radius: 8px;
}
.row img,
.cell img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
  transition: transform 0.45s ease;   /* плавный зум по ховеру */
}
.row picture,
.cell picture { display: block; width: 100%; height: 100%; }
/* Лёгкий зум картинки внутри своей рамки (рамка остаётся на месте) */
.row--full:hover img,
.row--tall:hover img,
.row--short:hover img,
.row--self:hover img,
.cell:hover img { transform: scale(1.05); }

/* Полноширинные ряды — пропорции под экспортированные ассеты */
.row--full  { aspect-ratio: 1160 / 600; }
.row--tall  { aspect-ratio: 1160 / 800; }
.row--short { aspect-ratio: 1160 / 472; }
.row--self  { aspect-ratio: 1160 / 648; }  /* «Обо мне» — одна широкая карточка */

/* Парный ряд: две колонки 574×600 + гэп */
.row--split {
  display: flex;
  gap: 12px;                /* фикс. 12px между парными изображениями */
}
.cell {
  flex: 1 1 0;
  min-width: 0;
  aspect-ratio: 574 / 600;
}

/* Мобилка: все изображения в один столбец, гэпы 2px */
@media (max-width: 767px) {
  .gallery { gap: 2px; }
  .row--split { flex-direction: column; gap: 2px; }
  .cell { width: 100%; }
}

/* =========================================================================
   БЛОК «ДИЗАЙН МЕНЕДЖМЕНТ» — карточки с текстом, пилюлей и (у широкой) схемой
   ========================================================================= */
.mgmt {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 6.9cqw;       /* как у .gallery — отступ от заголовка/about */
}
.mgmt-row { display: flex; gap: 12px; }
.mgmt-card {
  position: relative;
  aspect-ratio: 574 / 420;
  padding: 20px;
  border-radius: 8px;
  border: 1px solid rgba(218, 218, 218, 0.4);
  background: #fff;
  overflow: hidden;
}
.mgmt-card--wide { aspect-ratio: 1160 / 420; }
/* flex-basis нужен только половинным карточкам в ряду — иначе он обнуляет
   высоту широкой карточки в вертикальном флексе .mgmt */
.mgmt-row .mgmt-card { flex: 1 1 0; min-width: 0; }
.mgmt-card__img { position: absolute; inset: 0; display: block; z-index: 0; }
.mgmt-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 0.45s ease;
}
.mgmt-card:hover .mgmt-card__img img { transform: scale(1.05); }
.mgmt-card__head { position: relative; z-index: 1; max-width: 534px; }
.mgmt-card__title {
  margin: 0;
  font-size: calc(var(--fs-title) - 3px);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.0417em;
}
.mgmt-card__desc {
  margin: 8px 0 0;
  font-size: calc(var(--fs-body) - 3px);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.0208em;
  color: #939393;
}
.mgmt-card__pill {
  position: absolute;
  left: 20px;
  bottom: 20px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  padding: 12px 24px;
  border-radius: 12px;
  background: #fafafa;
  border: 1px solid rgba(218, 218, 218, 0.4);
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: -0.025em;
  white-space: nowrap;
}
/* Мобилка: карточки в столбик, фикс. высоты вместо пропорции */
@media (max-width: 767px) {
  .mgmt { gap: 2px; }
  .mgmt-row { flex-direction: column; gap: 2px; }
  .mgmt-card { aspect-ratio: auto; min-height: 300px; }
}

/* =========================================================================
   БЛОК «РЕКОМЕНДАЦИИ» — одна картинка по центру
   ========================================================================= */
.recs { display: flex; justify-content: center; }
.recs__img {
  display: block;
  width: 68.6%;             /* 796 / 1160 */
  max-width: 796px;
  overflow: hidden;
  border-radius: 8px;
}
.recs__img img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
  transition: transform 0.45s ease;
}
.recs__img:hover img { transform: scale(1.05); }
@media (max-width: 767px) {
  .recs__img { width: 100%; max-width: none; }
}

/* =========================================================================
   ФУТЕР
   ========================================================================= */
.footer {
  margin-top: 6.9cqw;       /* ≈ 80px */
  padding: 6.9cqw 0;        /* ≈ 80px сверху и снизу */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.7cqw;              /* ≈ 20px между заголовком и кнопкой */
  text-align: center;
}
.footer__title {
  margin: 0;
  font-size: var(--fs-footer);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.0417em;  /* -1px @ 24px */
}
@media (max-width: 767px) {
  .footer { gap: 28px; padding-top: 12cqw; padding-bottom: 24px; }
}