/* =========================================================
   Selezneva Elizaveta — портфолио
   Токены и размеры сняты напрямую с макета Figma
   (Desktop 1200, контент 1152, поля 24)
   ========================================================= */

:root {
  /* Цвет */
  --paper:       #ffffff;
  --dark:        #111111;
  --ink:         #000000;
  --ink-50:      rgba(0, 0, 0, .5);
  --rule:        rgba(0, 0, 0, .16);
  --rule-10:     rgba(0, 0, 0, .1);
  --light:       #ffffff;
  --light-50:    rgba(255, 255, 255, .5);
  --light-59:    rgba(255, 255, 255, .59);
  --rule-light:  rgba(255, 255, 255, .16);

  /* Сетка */
  --content:     1152px;
  --pad:         24px;
  --header-space: 134px;   /* 24 сверху + 54 пилюля + 56 отступ до контента */

  /* 12-колоночная сетка: 1152 = 12 × 74 + 11 × 24 */
  --gutter:      24px;
  --col:         calc((var(--content) - 11 * var(--gutter)) / 12);
  --span-7:      calc(var(--col) * 7 + var(--gutter) * 6);   /* 662 ≈ 661 из макета */
  --span-8:      calc(var(--col) * 8 + var(--gutter) * 7);   /* 760 ≈ 749 из макета */

  /* Типографика — крупные кегли текучие, на 1200px совпадают с макетом */
  --fs-name:     clamp(34px, 6.533vw, 78.391px);   /* 78.391 в макете */
  --fs-h1:       clamp(30px, 4.583vw, 55px);       /* 55        */
  --fs-tools:    clamp(26px, 4.583vw, 55px);       /* 55        */
  --fs-stat:     clamp(52px, 8.333vw, 100px);      /* 100       */
  --fs-footer:   clamp(32px, 4.667vw, 56px);       /* 56        */
  --fs-body:     16px;
  --fs-small:    12px;
  --fs-micro:    10px;

  /* Интерлиньяж — множители из макета */
  --lh-name:     1.2625;
  --lh-h1:       1.1818;
  --lh-body:     1.2625;
  --lh-small:    1.35;
  --lh-micro:    1.12;
}

/* ---------- Сброс ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  position: relative;
  background: var(--paper);
  color: var(--ink);
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  font-weight: 500;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: -.5px;
  -webkit-font-smoothing: antialiased;
}

p { margin: 0; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--ink); color: var(--light); padding: 12px 16px;
}
.skip-link:focus { left: 0; }

/* Общая обёртка контента: до 1152 и по центру */
.hero__intro, .hero__bottom,
.about__intro, .about__details, .about__resume,
.portfolio > .sec-head, .works,
.tools > .sec-head, .tools__body,
.stats__grid,
.footer__main, .footer__rule {
  width: 100%;
  max-width: var(--content);
  margin-inline: auto;
}

/* =========================================================
   Заголовок секции (Rule + Index + Title + Year)
   ========================================================= */
.sec-head { display: flex; flex-direction: column; gap: 12px; }

.sec-head__rule { height: 1px; background: var(--rule); }

.sec-head__meta {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  font-size: var(--fs-small);
  line-height: var(--lh-small);
}
.sec-head__index { display: inline-flex; align-items: center; gap: 6px; justify-self: start; }
.sec-head__dot   { width: 7px; height: 7px; background: var(--ink); flex: none; }
.sec-head__title { justify-self: center; }
.sec-head__year  { justify-self: end; }

.sec-head--light { color: var(--light); }
.sec-head--light .sec-head__rule { background: var(--rule-light); }
.sec-head--light .sec-head__dot  { background: var(--light); }

/* =========================================================
   Ссылка с подчёркиванием и стрелкой
   ========================================================= */
.link { display: flex; flex-direction: column; gap: 10px; width: 246px; }
.link__row { display: flex; align-items: center; justify-content: space-between; }
.link__label { font-size: var(--fs-body); line-height: var(--lh-body); }
.link__arrow { width: 8px; height: 8px; flex: none; transition: transform .25s ease; }
.link__underline { height: 1px; transition: opacity .25s ease; }

.link--light { color: var(--light); }
.link--light .link__underline { background: var(--light); }
.link--dark  { color: var(--ink); }
.link--dark  .link__underline { background: var(--ink); }

.link:hover .link__arrow { transform: translate(3px, -3px); }
.link:hover .link__underline { opacity: .5; }

/* =========================================================
   01 HERO
   ========================================================= */
.hero {
  position: relative;
  min-height: 100vh;                 /* фолбэк для старых браузеров */
  min-height: 100svh;                /* реальная высота экрана на мобильных */
  padding: var(--header-space) var(--pad) var(--pad);
  display: flex;
  flex-direction: column;
  gap: 40px;
  background: var(--dark);
  color: var(--light);
  overflow: hidden;
}
.hero__bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
}
.hero > *:not(.hero__bg) { position: relative; z-index: 1; }


.nav__item { display: flex; gap: 12px; align-items: flex-end; }
.nav__label {
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  transition: opacity .2s ease;
}
.nav__idx {
  font-weight: 600;
  font-size: var(--fs-micro);
  line-height: var(--lh-micro);
  letter-spacing: 0;
  color: var(--light-50);
  padding-bottom: 8px;
}
.nav__item:hover .nav__label { opacity: .6; }

.burger { display: none; }

.hero__intro { display: flex; flex-direction: column; align-items: flex-end; gap: 40px; margin-top: auto; }
.hero__lead {
  width: 299px;
  color: var(--light-59);
}
.hero__cta { width: 299px; }

.hero__bottom { display: flex; flex-direction: column; align-items: flex-end; gap: 40px; margin-top: auto; }
.hero__specs { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.hero__name {
  font-size: var(--fs-name);
  line-height: var(--lh-name);
  letter-spacing: -.03125em;
  white-space: nowrap;
}

/* =========================================================
   02 ABOUT
   ========================================================= */
.about {
  background: var(--paper);
  padding: var(--pad) var(--pad) 80px;
}
.about__intro { display: flex; flex-direction: column; gap: 80px; }

.about__heading {
  margin: 0;
  font-family: 'Be Vietnam Pro', 'Inter', sans-serif;
  font-weight: 500;
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  letter-spacing: -.0382em;
}

.about__details {
  display: flex;
  flex-direction: column;
  gap: 80px;
  padding-top: 110px;      /* Spacer из макета */
  padding-bottom: 48px;
}
.about__row { display: flex; gap: 200px; align-items: flex-start; }
.about__key {
  width: 100px; flex: none;
  font-size: var(--fs-small);
  line-height: var(--lh-small);
}
.about__value { color: var(--ink-50); max-width: 640px; }

/* =========================================================
   03 PORTFOLIO
   ========================================================= */
.portfolio {
  background: var(--paper);
  padding: var(--pad) var(--pad) 120px;
  display: flex;
  flex-direction: column;
  gap: 80px;
}

.works {
  max-width: 800px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.card { display: flex; flex-direction: column; gap: 10px; }
.card__media {
  position: relative;
  border-radius: 5px;
  overflow: hidden;
  background: var(--ink);
  aspect-ratio: 800 / 452;
}
.card__media--tall { aspect-ratio: 800 / 424; }
.card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: .95;
  transition: transform .5s ease, opacity .3s ease;
}
.card:hover .card__media img { transform: scale(1.02); opacity: 1; }

.card__meta {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding-right: 10px;
  font-size: var(--fs-small);
  line-height: var(--lh-small);
}
.card__info {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  width: 390px;
}
.card__num, .card__year { flex: none; }
.card__titles { display: flex; flex-direction: column; padding-right: 16px; }
.card__title { color: var(--ink); }
.card__subtitle { color: var(--ink-50); }

/* =========================================================
   05 TOOLS
   ========================================================= */
.tools {
  background: var(--dark);
  color: var(--light);
  padding: var(--pad) var(--pad) 120px;
  display: flex;
  flex-direction: column;
}

.tools__body { position: relative; padding-top: 231px; }

.tools__portrait {
  position: absolute;
  top: 55px; left: 0;
  width: 178px; height: 232px;
  border-radius: 5px;
  overflow: hidden;
  background: #222;
}
.tools__portrait img { width: 100%; height: 100%; object-fit: cover; }

.tools__list {
  font-size: var(--fs-tools);
  line-height: 1.09;
  letter-spacing: -.0382em;
  display: flex;
  flex-direction: column;
  gap: .35em;
}
/* Отступ только у первой строки — как в макете (текст обтекает портрет) */
.tools__list p { text-indent: 210px; }

/* =========================================================
   06 DIVIDER
   ========================================================= */
.divider { height: 60px; background: var(--paper); }

/* =========================================================
   07 STATS
   ========================================================= */
.stats {
  background: var(--paper);
  padding: var(--pad) var(--pad) 100px;
}
.stats__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 110px;
  row-gap: 80px;
}
.stat { display: flex; flex-direction: column; gap: 10px; max-width: 521px; }
.stat__value {
  font-size: var(--fs-stat);
  line-height: 1;
  letter-spacing: -.03em;
}
.stat__caption { display: flex; flex-direction: column; gap: 14px; }
.stat__rule { height: 1px; background: var(--rule-10); }
.stat__label { margin-bottom: -4px; }
.stat__desc {
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  color: var(--ink-50);
}

/* =========================================================
   08 FOOTER
   ========================================================= */
.footer {
  background: var(--dark);
  color: var(--light);
  padding: 45px var(--pad) 24px;
  display: flex;
  flex-direction: column;
  gap: 30px;
}
.footer__main { display: flex; justify-content: space-between; align-items: flex-start; gap: 40px; }

.footer__contact { display: flex; flex-direction: column; gap: 24px; max-width: 692px; flex: 1 1 auto; }
.footer__kicker {
  font-size: var(--fs-footer);
  line-height: 1;
  letter-spacing: -.0304em;
  color: var(--light-50);
}
.footer__email {
  font-size: var(--fs-footer);
  line-height: 1;
  letter-spacing: -.0304em;
  word-break: break-word;
  transition: opacity .2s ease;
}
.footer__email:hover { opacity: .7; }

.footer__social img { width: 50px; height: 50px; transition: opacity .2s ease; }
.footer__social a:hover img { opacity: .7; }

.footer__nav {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 460px;
  flex: none;
}
.fnav__item {
  display: flex; gap: 12px; align-items: flex-end;
  transition: opacity .2s ease;
}
.fnav__item--dim { opacity: .5; }
.fnav__item:hover { opacity: 1; }
.fnav__rule { height: 1px; background: var(--rule-light); }

.footer__rule { height: 1px; background: var(--rule-light); }

/* =========================================================
   TABLET — 1024
   ========================================================= */
@media (max-width: 1024px) {
  .site-nav { gap: 40px; }

  .about__row { gap: 60px; }

  .stats__grid { column-gap: 60px; row-gap: 60px; }

  .tools__list p { text-indent: 0; }
  .tools__body { padding-top: 0; display: flex; flex-direction: column; gap: 48px; }
  .tools__portrait { position: static; }

  .footer__nav { width: 340px; }
}

/* =========================================================
   TABLET — 810
   ========================================================= */
@media (max-width: 810px) {
  .hero { gap: 64px; }
  .hero__lead, .hero__cta { width: min(340px, 100%); }
  .hero__name { white-space: normal; }

  .about { padding-bottom: 64px; }
  .about__intro { gap: 48px; }
  .about__details { padding-top: 64px; gap: 48px; }
  .about__row { flex-direction: column; gap: 12px; }
  .about__key { width: auto; }
  .about__value { max-width: none; }

  .portfolio { gap: 48px; padding-bottom: 80px; }

  .card__meta { flex-direction: column; gap: 8px; }
  .card__info { width: 100%; }

  .stats__grid { grid-template-columns: minmax(0, 1fr); row-gap: 48px; }
  .stat { max-width: none; }

  .footer__main { flex-direction: column; gap: 48px; }
  .footer__nav { width: 100%; }

  /* Бургер */
  /* Бургер — тоже без заливки, полоски перекрашиваются вместе с текстом */
  .burger {
    pointer-events: auto;
    display: flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 54px; height: 54px; padding: 16px;
    background: none; border: 0; border-radius: 999px;
    cursor: pointer;
  }
  .burger span {
    display: block; height: 1px; width: 100%;
    background: var(--ink);
    transition: transform .3s ease, background-color .3s ease;
  }
  .is-on-dark .burger span { background: var(--light); }
  .burger.is-open span:first-child { transform: translateY(3px) rotate(45deg); }
  .burger.is-open span:last-child  { transform: translateY(-3px) rotate(-45deg); }

  /* На главной четыре пункта в строку не помещаются — раскрываем вертикально */
  .site-header:has(.burger) .site-nav {
    display: none;
    position: absolute; top: calc(100% + 12px); right: 0;
    flex-direction: column; align-items: flex-end; gap: 20px;
    padding: 22px 26px;
    border-radius: 22px;          /* в раскрытом виде это панель, а не пилюля */
    min-width: 190px;
    background: rgba(255, 255, 255, .92);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(0, 0, 0, .08);
    box-shadow: 0 8px 32px rgba(0, 0, 0, .16);
  }
  /* внутри раскрытой белой панели текст всегда тёмный */
  .site-header-wrap.is-on-dark .site-nav.is-open .nav__label { color: var(--ink); }
  .site-header-wrap.is-on-dark .site-nav.is-open .nav__idx   { color: var(--ink-50); }
  .site-header:has(.burger) .site-nav.is-open { display: flex; }
  .site-header { position: relative; }
}

/* =========================================================
   PHONE — 600
   ========================================================= */
@media (max-width: 600px) {
  :root { --pad: 16px; }

  .hero { gap: 48px; }
  .hero__lead, .hero__cta { width: 100%; }
  .hero__intro, .hero__bottom { align-items: flex-start; }
  .hero__specs { align-items: flex-start; }

  .sec-head__meta { grid-template-columns: auto 1fr; row-gap: 4px; }
  .sec-head__title { justify-self: end; }
  .sec-head__year  { grid-column: 1 / -1; justify-self: start; opacity: .5; }

  .about { padding-bottom: 48px; }
  .about__intro { gap: 32px; }
  .about__details { padding-top: 48px; gap: 32px; padding-bottom: 32px; }
  .about__heading br { display: none; }

  .portfolio { padding-bottom: 56px; }
  .card__media, .card__media--tall { aspect-ratio: 4 / 3; }

  .tools { padding-bottom: 72px; }
  .tools__body { gap: 32px; }

  .stats { padding-bottom: 64px; }
  .stat__desc br { display: none; }

  .footer { padding-top: 32px; }
  .footer__contact { gap: 20px; }
  .link { width: 100%; max-width: 246px; }
}

/* =========================================================
   Доступность
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* =========================================================
   СТРАНИЦА КЕЙСА
   ========================================================= */

/* Обёртки контента страницы кейса */
.case-hero__content,
.screens__head, .more > *, .more__cards {
  width: 100%;
  max-width: var(--content);
  margin-inline: auto;
}

/* ---------- Шапка ---------- */
.case-hero { background: var(--paper); padding: var(--header-space) var(--pad) 48px; }

/* Шапка липнет к верху всей страницы, а не только первой секции */
/* Шапка одна на обе страницы. Лежит поверх первого экрана и уезжает
   вместе со страницей — к верху не прилипает.
   Обёртка не ловит клики, кликабельна только сама пилюля. */
.site-header-wrap {
  position: absolute; top: 0; left: 0; right: 0; z-index: 50;
  padding: 24px var(--pad) 0;
  pointer-events: none;
}
.site-header {
  display: flex; justify-content: flex-end; align-items: center;
  gap: 12px;
  min-height: 54px;
  width: 100%; max-width: var(--content); margin-inline: auto;
}

/* Без заливки: цвет текста подстраивается под секцию, над которой шапка.
   Класс is-on-dark ставит nav.js по яркости фона. */
.site-nav {
  pointer-events: auto;
  display: flex; gap: 80px; align-items: center;
  padding: 14px 28px;
  border-radius: 999px;
}
.site-nav .nav__label { color: var(--ink); transition: color .3s ease; }
.site-nav .nav__idx   { color: var(--ink-50); transition: color .3s ease; }

.site-header-wrap.is-on-dark .nav__label { color: var(--light); }
.site-header-wrap.is-on-dark .nav__idx   { color: var(--light-50); }

/* ---------- Заголовок кейса ---------- */
.case-hero__content { display: flex; flex-direction: column; gap: 32px; }
.case-hero__titles { display: flex; flex-direction: column; gap: 36px; }
.case-hero__title {
  margin: 0;
  font-weight: 500;
  font-size: clamp(38px, 5.833vw, 70px);
  line-height: 1;
  letter-spacing: -.03em;
}
.case-hero__lead {
  display: flex; flex-direction: column; gap: 4px;
  font-weight: 400;
  color: var(--ink-50);
  max-width: 563px;
}

.case-cover {
  border-radius: 5px; overflow: hidden;
  background: #ebebeb;
  aspect-ratio: 1152 / 726;
}
.case-cover img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Плитка фактов ---------- */
.facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--rule-10);
  border: 1px solid var(--rule-10);
  border-radius: 5px;
  overflow: hidden;
}
.facts--two  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.facts--four { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.fact {
  display: flex; flex-direction: column; gap: 8px;
  padding: 18px;
  background: var(--paper);
  font-weight: 400;
}
.fact__key   { font-size: var(--fs-small); line-height: var(--lh-small); }
.fact__value { font-size: var(--fs-body);  line-height: var(--lh-body); }

.facts--dark { background: var(--rule-light); border-color: var(--rule-light); }
.facts--dark .fact { background: var(--dark); color: var(--light); }

.facts-group { display: flex; flex-direction: column; gap: 32px; }

/* ---------- Текстовые блоки ---------- */
.case-body {
  background: var(--paper);
  padding: 0 0 48px;
  display: grid;
  grid-template-columns:
    [full-start] minmax(var(--pad), 1fr)
    [content-start] min(var(--content), 100% - var(--pad) * 2)
    [content-end] minmax(var(--pad), 1fr) [full-end];
  row-gap: 48px;
}
.case-body > * { grid-column: content; }
.case-body--dark { background: var(--dark); padding-bottom: 100px; }

.case-col {
  display: flex; flex-direction: column; gap: 36px;
  padding-top: 32px;
  max-width: var(--span-7);       /* 7 колонок из 12, слева — как в макете */
  justify-self: start;
}
.case-col > * { width: 100%; }
.case-h2 {
  margin: 0;
  width: 100%;
  font-weight: 500;
  font-size: clamp(30px, 3.833vw, 46px);
  line-height: 1.05;
  letter-spacing: -.037em;
}
.case-h2--light { color: var(--light); }
.more > .case-h2 { margin-inline: auto; }
.case-text { font-weight: 400; color: var(--ink-50); }
.case-body--dark .case-text { color: var(--light-50); }

/* ---------- Скриншот с подписью ---------- */
.shot { margin: 0; display: flex; flex-direction: column; gap: 24px; }
.shot__media {
  border-radius: 5px; overflow: hidden;
  background: #ebebeb;
  aspect-ratio: 1152 / 556;
}
.shot__media--768 { aspect-ratio: 1152 / 768; }
.shot__media--825 { aspect-ratio: 1152 / 825; border-radius: 0; }
.shot__media img,
.shot__media video { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Если видео другого соотношения и cover его подрезает — поставь contain */
.shot__media--fit img,
.shot__media--fit video { object-fit: contain; }

.shot__caption {
  display: flex; flex-direction: column; gap: 12px;
  font-size: var(--fs-small); line-height: var(--lh-small);
  color: var(--ink-50);
  text-align: center;
}
.shot__rule { height: 1px; background: var(--rule); }

/* ---------- Экраны: карусель ---------- */
.screens {
  background: var(--dark);
  padding: 64px 0;
  display: flex; flex-direction: column; gap: 40px;
}
.screens__head {
  max-width: calc(var(--content) + var(--pad) * 2);
  padding-inline: var(--pad);
}
.screens__head { display: flex; flex-direction: column; gap: 36px; }
.screens__lead {
  font-weight: 400;
  color: rgba(255, 255, 255, .9);
  max-width: var(--span-8);       /* 8 колонок */
}

.carousel { display: flex; flex-direction: column; gap: 32px; max-width: none; }
.carousel__track {
  display: flex; gap: 24px;
  overflow-x: auto;
  /* proximity вместо mandatory: браузер не обязан доводить до точки,
     поэтому лента не перехватывает инерцию и не залипает между кадрами */
  scroll-snap-type: x proximity;
  scroll-padding-left: var(--pad);
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  padding: 0 var(--pad) 4px;
}
.carousel__track::-webkit-scrollbar { display: none; }
 /* Высота у всех слайдов одна, ширина — по пропорциям самой картинки.
   Так ни один экран не подрезается, а лента остаётся ровной. */
.carousel__slide {
  flex: 0 0 auto;
  scroll-snap-align: start;
  height: clamp(320px, 56vh, 640px);
  border-radius: 5px; overflow: hidden;
}
.carousel__slide img { height: 100%; width: auto; display: block; }

.carousel__dots { display: flex; gap: 12px; justify-content: center; }
.carousel__dot {
  width: 12px; height: 12px; padding: 0;
  flex: none;
  border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .25);
  cursor: pointer;
  transition: background .25s ease, transform .25s ease;
}
.carousel__dot.is-active { background: var(--light); transform: scale(1.1); }

/* ---------- Другие проекты ---------- */
.more {
  background: #000;
  padding: 64px var(--pad);
  display: flex; flex-direction: column; gap: 40px;
}
.more__cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
.more__card {
  display: flex; flex-direction: column; justify-content: space-between;
  gap: 56px; min-height: 188px;
  padding: 28px;
  border: 1px solid var(--rule-light);
  border-radius: 5px;
  color: var(--light);
  text-align: right;
  transition: background .25s ease, border-color .25s ease;
}
.more__card:hover { background: rgba(255, 255, 255, .04); border-color: rgba(255, 255, 255, .32); }
.more__title {
  font-weight: 400;
  font-size: clamp(24px, 2.667vw, 32px);
  line-height: 1.125;
  letter-spacing: -.031em;
}
.more__arrow { display: inline-block; transition: transform .25s ease; }
.more__card:hover .more__arrow { transform: translateX(6px); }
.more__type { font-weight: 400; font-size: 18px; line-height: 1.556; }

/* ---------- Кейс: планшет ---------- */
@media (max-width: 1024px) {

  .facts--four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .carousel__slide { height: clamp(300px, 50vh, 520px); }
}

/* ---------- Кейс: 810 ---------- */
@media (max-width: 810px) {
  .case-hero { padding-bottom: 32px; }
  .case-hero { padding-top: 110px; }
  .case-hero__content { gap: 24px; }
  .case-hero__titles { gap: 24px; }

  .case-body { row-gap: 32px; padding-bottom: 32px; }
  .case-col { gap: 24px; padding-top: 24px; max-width: none; }

  .facts, .facts--two, .facts--four { grid-template-columns: minmax(0, 1fr); }
  .facts-group { gap: 24px; }

  .screens { padding: 48px 0; gap: 32px; }
  .screens__head { gap: 24px; }
  /* На узких экранах наоборот: ширина по ленте, высота по картинке.
     flex-start нужен, иначе флекс растянет все слайды по самому высокому. */
  .carousel__track { align-items: flex-start; }
  .carousel__slide { height: auto; width: 86vw; max-width: 640px; }
  .carousel__slide img { width: 100%; height: auto; }

  .more { padding: 48px var(--pad); }
}

/* ---------- Кейс: телефон ---------- */
@media (max-width: 600px) {
  .site-nav { gap: 24px; padding: 12px 22px; }
  .case-text br, .fact__value br { display: none; }
  .case-cover { aspect-ratio: 4 / 3; }
  .shot__media, .shot__media--768, .shot__media--825 { aspect-ratio: 4 / 3; }
  .carousel__slide { width: 100%; }
  .more__card { min-height: 0; gap: 32px; padding: 20px; }
}

/* =========================================================
   КЕЙС РУСКЛИМАТ — дополнения
   ========================================================= */

/* Колонки шире базовых 7 (в макете 683 и 852 против 661) */
.case-col--wide  { max-width: calc(var(--col) * 7 + var(--gutter) * 6 + 22px); }
.case-col--wider { max-width: calc(var(--col) * 9 + var(--gutter) * 8); }
.case-text--narrow { max-width: var(--span-7); }

/* Пропорции блоков со скриншотами */
.shot__media--551 { aspect-ratio: 1152 / 551; }
.shot__media--660 { aspect-ratio: 1152 / 660; }
.shot__media--948 { aspect-ratio: 1920 / 948; border-radius: 10px; }
.shot__media--738 { aspect-ratio: 1152 / 738; border-radius: 10px; }

/* Светлая подложка — в макете картинка вписана, а не обрезана */
.shot__media--soft { background: #f4f4f4; }

/* Пустая ячейка: во втором ряду решений всего две карточки из трёх */
.fact--empty { background: var(--paper); }

/* «Экраны» здесь одна большая картинка, а не карусель */
.screens__single {
  width: 100%;
  max-width: calc(var(--content) + var(--pad) * 2);
  padding-inline: var(--pad);
  margin-inline: auto;
}

@media (max-width: 810px) {
  .case-col--wide, .case-col--wider { max-width: none; }
  .shot__media--948 { aspect-ratio: 16 / 10; }
}

@media (max-width: 600px) {
  .shot__media--551,
  .shot__media--660,
  .shot__media--738 { aspect-ratio: 4 / 3; }
  .fact--empty { display: none; }
}