/* ============================================================
   CASE STUDY PAGE — Grain idea
   Desktop 1440 / Tablet 768 / Mobile 390

   Шапка, футер, кнопка, hover-зум и след курсора берутся
   из styles.css — главная страница эталонная.
   ============================================================ */

.page--case{ gap:0; }

/* ---------- Заголовок ----------
   В Figma 24px между заголовком и подписью и 48px до фото — это
   расстояния между рамками текста. line-height добавляет полулидинг,
   поэтому из отступов он вычитается. */
.case__title-group{
  display:flex;
  padding:120px 80px 0 80px;
  flex-direction:column;
  align-items:flex-start;
  align-self:stretch;
}
.case__title{
  margin:0;
  color:#000;
  font-size:48px;
  font-weight:600;
  line-height:56px;
}
.case__lead{
  /* 24px от базовой линии заголовка до верха строчных букв описания.
     Метрики Inter добавляют 21px, поэтому margin 3px. */
  margin:7px 0 0 0;
  max-width:620px;
  color:#000;
  font-size:20px;
  font-weight:400;
  line-height:28px;
  text-transform:none;
}

/* ---------- Медиа ---------- */
.case__media{ margin:0; width:100%; }
.case__media picture{ display:block; width:100%; }
.case__media img,
.case__media video{ width:100%; height:auto; display:block; }

/* Видео со сборкой домиков запускается кликом по всему кадру. */
.case__video-toggle{
  position:relative;
  display:block;
  width:100%;
  padding:0;
  border:0;
  background:#111111;
  cursor:pointer;
  overflow:hidden;
}
.case__video-toggle video{ pointer-events:none; }
.case__video-toggle:focus-visible{
  outline:2px solid #111111;
  outline-offset:6px;
}
.case__video-play{
  position:absolute;
  left:50%;
  top:50%;
  width:56px;
  height:56px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:rgba(17,17,17,.55);
  transform:translate(-50%, -50%);
  transition:opacity .2s ease, transform .2s ease;
  pointer-events:none;
}
.case__video-play svg{ width:28px; height:28px; }
.case__video-toggle.is-playing .case__video-play{
  opacity:0;
  transform:translate(-50%, -50%) scale(.8);
}

@media (max-width:767px){
  .case__video-play{ width:44px; height:44px; }
  .case__video-play svg{ width:22px; height:22px; }
}

/* 48px от базовой линии последней строки описания до верха изображения.
   Полулидинг снизу у текста — 7px, поэтому padding 41px.
   Итого A=24, B=48 — ровно вдвое, как в макете. */
.case__hero{
  display:flex;
  padding:41px 80px 0 80px;
  flex-direction:column;
  align-items:flex-start;
  align-self:stretch;
}
.case__hero--video .case__media video{
  width:100%;
  aspect-ratio:16 / 9;
  object-fit:cover;
}
.case__text--compact{ padding-top:0; }

.case__full{
  display:flex;
  padding:0 80px;
  flex-direction:column;
  align-items:flex-start;
  align-self:stretch;
}
/* 120px между соседними изображениями. */
.case__full--gap-120{ padding-top:120px; }

/* ---------- Текстовые блоки ----------
   12-колоночная сетка в долях: колонки пересчитываются от фактической
   ширины страницы, поэтому раскладка верна на любом мониторе, а не
   только при 1440. Подпись — колонки 5-6, текст — колонки 7-12,
   правый край текста упирается в край сетки. */
.case__text{
  display:grid;
  grid-template-columns:repeat(12, 1fr);
  column-gap:20px;
  padding:110px 80px;
  align-items:start;
  align-self:stretch;
}
.case__label{
  grid-column:5 / 7;
  margin:0;
  color:#000;
  font-size:20px;
  font-weight:400;
  line-height:28px;
  text-transform:none;
}
.case__body{
  grid-column:7 / 13;
  margin:0;
  color:#000;
  font-size:20px;
  font-weight:400;
  line-height:28px;
  text-transform:none;
}

/* ---------- Пары изображений ----------
   На референсе кадры в паре стоят на разной высоте. Сдвиг задан
   расстоянием между верхними краями кадров. */
.case__pair{
  display:flex;
  padding:0 80px;
  align-items:flex-start;
  gap:20px;
  align-self:stretch;
}
.case__pair .case__media{ flex:1 1 0; min-width:0; }
.case__pair .case__media img,
.case__pair .case__media video{
  height:420px;
  object-fit:cover;
}
/* 120px до предыдущего изображения. Правило идёт ПОСЛЕ .case__pair:
   shorthand padding в .case__pair обнуляет padding-top, если стоит ниже. */
.case__pair--gap-120{ padding-top:120px; }

/* Пара «видео + ТЦ в сумерках»: свои форматы по макету.
   Видео 628x658, фото 630x735 — высоты разные, поэтому общее
   правило .case__pair img/video (420px) здесь переопределяется. */
.case__pair--sample .case__media--sample video{
  width:628px;
  height:658px;
  object-fit:cover;
}
.case__pair--sample .case__media--dusk img{
  width:630px;
  height:735px;
  object-fit:cover;
}
/* label-peel → house-plate: 126px между верхними краями. */
.case__pair--offset-126 .case__media:last-child{ margin-top:126px; }
/* segment → hands: 125px между верхними краями, segment выше. */
.case__pair--offset-257 .case__media:last-child{ margin-top:125px; }

/* Медиаблоки проекта Apero. */
.case__pair--apero-brand .case__media:first-child video{
  object-fit:cover;
  background:#34440D;
}
.case__pair--apero-palette .case__media:first-child video{
  object-fit:cover;
  background:#FFFFFF;
}

/* Точный формат новой схемы Lactobar только на десктопе. */
@media (min-width:1024px){
  /* Точные размеры фреймов Apero из десктопного макета Figma. */
  .case__pair--apero-brand .case__media:first-child video{
    width:100%;
    height:auto;
    aspect-ratio:630 / 419;
  }
  .case__pair--apero-brand .case__media:last-child img{
    width:100%;
    height:auto;
    aspect-ratio:630 / 380;
  }
  .case__pair--apero-palette .case__media:first-child video{
    width:100%;
    height:auto;
    aspect-ratio:630 / 296;
  }
  .case__pair--apero-palette .case__media:last-child img{
    width:100%;
    height:auto;
    aspect-ratio:630 / 508;
  }
  .case__pair--apero-bags .case__media:first-child img{
    width:100%;
    height:auto;
    aspect-ratio:630 / 467;
  }
  .case__pair--apero-bags .case__media:last-child img{
    width:100%;
    height:auto;
    aspect-ratio:630 / 449;
  }

  .case__media--scheme img{
    width:626px;
    height:378px;
    object-fit:cover;
  }

  /* У .case__text по умолчанию 110px снизу. Здесь его убираем,
     а следующие 120px задаёт .case__pair--gap-120. */
  .case__text--palette{ padding-bottom:0; }
}

/* Блок «логотип»: локап в колонках 1-6, тубус в 7-12.
   Сетка в долях — правый кадр прижат к 7-й колонке на любой ширине. */
.case__pair--logo{
  display:grid;
  grid-template-columns:repeat(12, 1fr);
  column-gap:20px;
  align-items:start;
}
.case__pair--logo .case__media--lockup{ grid-column:1 / 7; }
.case__pair--logo .case__media--lockup img,
.case__pair--logo .case__media--lockup video{
  width:100%;
  height:auto;
  object-fit:contain;
  background:#FFFFFF;
}
.case__pair--logo .case__media--tube{ grid-column:7 / 13; }
.case__pair--logo .case__media--tube img{
  width:100%;
  height:699px;
  object-fit:cover;
}

/* Видео с лого в колонках 1-6, кадр «у окна» в 7-12, центры на одной линии. */
.case__pair--window{
  display:grid;
  grid-template-columns:repeat(12, 1fr);
  column-gap:20px;
  align-items:center;
  padding:120px 80px 0 80px;
}
.case__pair--window .case__media--logo-video{ grid-column:1 / 7; }
.case__pair--window .case__media--logo-video video,
.case__pair--window .case__media--logo-video img{
  /* 6 колонок = 630px, это и есть заданные 631 в пределах округления. */
  width:100%;
  height:492px;
  object-fit:contain;
  background:#FFFFFF;
}
.case__pair--window .case__media--window{ grid-column:7 / 13; }
.case__pair--window .case__media--window img{
  width:100%;
  height:676px;
  object-fit:cover;
}

/* ---------- Другие работы ---------- */
.case__other{
  display:flex;
  padding:200px 80px 0 80px;
  flex-direction:column;
  align-items:flex-start;
  gap:48px;
  align-self:stretch;
}
.case__other-title{
  margin:0;
  color:#000;
  font-size:24px;
  font-weight:400;
  line-height:normal;
  text-transform:none;
}
.case__other-grid{
  display:flex;
  align-items:flex-start;
  gap:20px;
  align-self:stretch;
}
.case__card{ flex:0 0 413px; max-width:413px; }
.case__card-media{ margin:0; width:100%; overflow:hidden; }
.case__card-media img,
.case__card-media video{
  width:413px;
  height:274px;
  object-fit:cover;
  display:block;
}
/* 20px от фото до заголовка. */
.case__card-title{
  margin:20px 0 0 0;
  color:#111;
  font-size:16px;
  font-weight:500;
  line-height:28px;
}
/* Подпись поднята на 16px ближе к заголовку: 10 - 16 = -6px. */
.case__card-sub{
  margin:-6px 0 0 0;
  color:#BDBDBD;
  font-size:16px;
  font-weight:400;
  line-height:28px;
}

/* ---------- Кнопка ---------- */
.case__button-row{
  display:flex;
  /* 120px от нижнего края кнопки до серого фона футера. */
  padding:100px 80px 120px 80px;
  flex-direction:column;
  align-items:center;
  align-self:stretch;
}
.case__button-row .button{ font-size:16px; line-height:24px; }

/* ============================================================
   TABLET — 768
   ============================================================ */
@media (min-width:768px) and (max-width:1023px){
  .case__title-group{ padding:56px 40px 0 40px; }
  .case__title{ font-size:32px; line-height:40px; }
  .case__year{ font-size:16px; line-height:24px; }
  .case__lead{ margin-top:12px; font-size:16px; line-height:24px; font-weight:400; max-width:520px; }

  .case__hero{ padding:36px 40px 0 40px; }

  /* 60px от изображения до подписи, 40px после текста.
     Подпись и текст прижаты к началу сетки и занимают всю её ширину:
     базовый grid с колонками 5-12 здесь не нужен. */
  .case__text{
    display:flex;
    flex-direction:column;
    padding:60px 40px 40px 40px;
  }
  .case__label{
    grid-column:auto;
    margin:0;
    flex:0 0 auto;
    font-size:16px;
    line-height:24px;
    font-weight:600;
  }
  .case__body{
    grid-column:auto;
    margin:12px 0 0 0;
    flex:1 1 auto;
    width:100%;
    font-size:16px;
    line-height:24px;
    font-weight:400;
  }

  /* 40px между изображениями. */
  .case__full{ padding:0 40px; }
  .case__full--gap-120{ padding-top:40px; }

  /* Парные кадры выровнены и одной высоты. */
  .case__pair{
    padding:0 40px;
    align-items:stretch;
    gap:16px;
  }
  .case__pair .case__media{ flex:1 1 0; }
  .case__pair .case__media img,
  .case__pair .case__media video{ height:240px; }
  .case__pair--apero-brand .case__media img,
  .case__pair--apero-brand .case__media video,
  .case__pair--apero-palette .case__media img,
  .case__pair--apero-palette .case__media video,
  .case__pair--apero-bags .case__media img{ height:300px; }
  .case__pair--offset-126 .case__media:last-child,
  .case__pair--offset-257 .case__media:last-child{ margin-top:0; }
  /* 40px до предыдущего изображения — после .case__pair. */
  .case__pair--gap-120{ padding-top:40px; }

  /* Базовый блок — grid, здесь нужен flex. */
  .case__pair--logo{ display:flex; gap:16px; align-items:stretch; }
  .case__pair--logo .case__media--lockup,
  .case__pair--logo .case__media--tube{ flex:1 1 0; }
  .case__pair--logo .case__media--lockup img,
  .case__pair--logo .case__media--lockup video{ height:240px; object-fit:contain; }
  .case__pair--logo .case__media--tube img{ width:100%; height:240px; }

  /* window 336x336, видео с лого рядом той же высоты. */
  .case__pair--window{
    display:flex;
    padding:40px 40px 0 40px;
    gap:16px;
    align-items:center;
    justify-content:space-between;
  }
  .case__pair--window .case__media--window{ flex:0 0 336px; }
  .case__pair--window .case__media--window img{ width:336px; height:336px; }
  .case__pair--window .case__media--logo-video{ flex:0 0 336px; }
  .case__pair--window .case__media--logo-video video,
  .case__pair--window .case__media--logo-video img{ width:336px; height:262px; }

  /* Последнее видео и 110px до «других работ». */
  .case__video-full{ padding:40px 40px 0 40px; }

  /* 110px от видео до заголовка блока. */
  .case__other{ padding:110px 40px 0 40px; gap:32px; }
  .case__other-title{ font-size:20px; }
  .case__other-grid{ gap:16px; }
  /* Две карточки 332x234. */
  .case__card{ flex:0 0 332px; max-width:332px; }
  .case__card-media img,
  .case__card-media video{ width:332px; height:234px; }
  /* Urban скрыт только на планшете: по референсу здесь две карточки. */
  .case__card--hidden{ display:none; }
  .case__card-title{ margin-top:11px; font-size:14px; line-height:20px; }
  .case__card-sub{ margin-top:-2px; font-size:14px; line-height:20px; }

  .case__button-row{ padding:64px 40px 80px 40px; }
  .case__button-row .button{ font-size:16px; line-height:24px; }
}

/* ============================================================
   ДИАЛОГ ИТ
   Форматы роликов сохранены без обрезки: 16:9 и 630×1000.
   ============================================================ */
.case__hero--dialog .case__media video,
.case__full--dialog .case__media video{
  width:100%;
  height:auto;
  aspect-ratio:16 / 9;
  object-fit:contain;
  background:#D9D9D9;
}

@media (min-width:1024px){
  .case__pair--dialog .case__media--dialog-motion img,
  .case__pair--dialog .case__media--dialog-motion video{
    width:100%;
    height:auto;
    aspect-ratio:16 / 9;
    object-fit:contain;
    background:#D9D9D9;
  }
  .case__pair--dialog .case__media--dialog-mobile video{
    width:100%;
    height:auto;
    aspect-ratio:630 / 1000;
    object-fit:contain;
    background:#999999;
  }
}

@media (min-width:768px) and (max-width:1023px){
  .case__pair--dialog .case__media--dialog-motion img,
  .case__pair--dialog .case__media--dialog-motion video{
    width:100%;
    height:auto;
    aspect-ratio:16 / 9;
    object-fit:contain;
  }
  .case__pair--dialog .case__media--dialog-mobile video{
    width:100%;
    height:auto;
    aspect-ratio:630 / 1000;
    object-fit:contain;
  }
}

@media (max-width:767px){
  .case__pair--dialog .case__media--dialog-motion img,
  .case__pair--dialog .case__media--dialog-motion video{
    width:100%;
    height:auto;
    aspect-ratio:16 / 9;
    object-fit:contain;
  }
  .case__pair--dialog .case__media--dialog-mobile video{
    width:100%;
    height:auto;
    aspect-ratio:630 / 1000;
    object-fit:contain;
  }
}

/* ============================================================
   MOBILE — 390
   ============================================================ */
@media (max-width:767px){
  .case__title-group{ padding:32px 20px 0 20px; }
  .case__title{ font-size:24px; line-height:32px; }
  /* Описание проекта под заголовком — 18px regular.
     Только внутри проектов: на главной и в «других работах» кегли свои. */
  .case__lead{
    margin-top:12px;
    font-size:18px;
    line-height:26px;
    font-weight:400;
  }

  /* hero 350x225.15 */
  .case__hero{ padding:28px 20px 0 20px; }
  .case__hero .case__media img,
  .case__hero .case__media video{ width:100%; height:225.15px; object-fit:cover; }

  /* 48px от изображения до подписи, 24px после текста.
     Полулидинг 16/24 и 18/26 — по 4px. */
  /* Подпись и текст прижаты к левому краю сетки и на всю её ширину:
     базовый grid с колонками 5-12 здесь не нужен. */
  .case__text{
    display:flex;
    flex-direction:column;
    padding:44px 20px 20px 20px;
  }
  /* Подзаголовки блоков — 16px semibold. */
  .case__label{
    grid-column:auto;
    margin:0;
    flex:0 0 auto;
    font-size:16px;
    line-height:24px;
    font-weight:600;
  }
  /* Основной текст 16px regular. */
  .case__body{
    grid-column:auto;
    margin:8px 0 0 0;
    flex:1 1 auto;
    width:100%;
    font-size:16px;
    line-height:24px;
    font-weight:400;
  }

  /* 16px между всеми изображениями внутри проекта. */
  .case__full{ padding:0 20px; }
  .case__full--gap-120{ padding-top:16px; }

  .case__pair{
    flex-direction:column;
    padding:0 20px;
    gap:16px;
  }
  .case__pair .case__media{ flex:1 1 auto; }
  .case__pair .case__media img,
  .case__pair .case__media video{ height:220px; }
  .case__pair--apero-brand .case__media img,
  .case__pair--apero-brand .case__media video,
  .case__pair--apero-palette .case__media img,
  .case__pair--apero-palette .case__media video,
  .case__pair--apero-bags .case__media img{ height:220px; }
  /* Палитра Apero остаётся горизонтальной и показывается целиком. */
  .case__pair--apero-palette .case__media:first-child video{
    width:100%;
    height:auto;
    aspect-ratio:630 / 296;
    object-fit:contain;
  }
  .case__pair--offset-126 .case__media:last-child,
  .case__pair--offset-257 .case__media:last-child{ margin-top:0; }
  /* 16px до предыдущего изображения — после .case__pair. */
  .case__pair--gap-120{ padding-top:16px; }

  /* Базовый блок — grid, здесь нужен flex. */
  .case__pair--logo{ display:flex; flex-direction:column; gap:16px; }
  .case__pair--logo .case__media--lockup,
  .case__pair--logo .case__media--tube{ flex:1 1 auto; }
  .case__pair--logo .case__media--lockup img,
  .case__pair--logo .case__media--lockup video{ height:auto; }
  .case__pair--logo .case__media--tube img{ width:100%; height:320px; }

  /* window 350x324, видео с лого под ним. */
  .case__pair--window{
    display:flex;
    flex-direction:column;
    padding:16px 20px 0 20px;
    gap:16px;
    align-items:stretch;
  }
  .case__pair--window .case__media--window{ flex:1 1 auto; }
  .case__pair--window .case__media--window img{ width:100%; height:324px; }
  .case__pair--window .case__media--logo-video{ flex:1 1 auto; }
  .case__pair--window .case__media--logo-video video,
  .case__pair--window .case__media--logo-video img{ width:100%; height:auto; }

  .case__video-full{ padding:16px 20px 0 20px; }

  /* Карточки 350x245 во всю ширину сетки. */
  /* 120px от последнего видео до блока. */
  .case__other{ padding:120px 20px 0 20px; gap:24px; }
  .case__other-title{ font-size:24px; }
  .case__other-grid{ flex-direction:column; gap:32px; align-self:stretch; }
  .case__card{ flex:1 1 auto; max-width:none; width:100%; align-self:stretch; }
  .case__card-media{ width:100%; }
  .case__card-media img,
  .case__card-media video{ width:100%; height:245px; }
  /* Заголовок опущен на 2px: 20 + 2 = 22px от фото. */
  .case__card-title{ margin-top:22px; font-size:16px; line-height:28px; }
  .case__card-sub{ margin-top:-2px; font-size:16px; line-height:28px; }

  .case__button-row{ padding:48px 20px 80px 20px; }
  .case__button-row .button{ font-size:16px; line-height:24px; }
}