/* Страница кейса /work/<адрес> */
/* --side - поля по бокам, как у логотипа в шапке: на образце кейс почти во всю ширину (~6% по бокам).
   Сетка кейса - 4 колонки с промежутком --gap: по ним стоят факты, текст разделов и цифры результата */
.case { --side: calc(129 * var(--k)); --gap: calc(40 * var(--k)); color: #1C1D20; font-family: 'PP Neue Montreal', 'Manrope', sans-serif; }

/* ===== Шапка: «Все проекты / Кейс», название, описание, факты ===== */
.case-hero .wrap { padding: calc(276 * var(--k)) 0 0; }
.case-hero__inner { padding: 0 var(--side); }
.case-crumbs { margin-bottom: calc(36 * var(--k)); }
.case-crumbs a { color: inherit; transition: color .2s; }
@media (hover: hover) { .case-crumbs a:hover { color: #1C1D20; } }
.case-hero__title { margin: 0; font-weight: 500; font-size: max(56px, calc(150 * var(--k))); line-height: 1; letter-spacing: -0.03em; white-space: nowrap; }
/* ширина описания - две колонки сетки (2 x 385.5 + промежуток при 1920) */
.case-hero__lead { max-width: max(320px, calc(811 * var(--k))); margin: calc(44 * var(--k)) 0 0; font-weight: 400; font-size: max(16px, calc(22 * var(--k))); line-height: 1.5; color: #45464A; }
/* факты - в ряд под чертой, по колонкам сетки (8 половинок = 4 колонки): каждый факт - колонка; когда фактов пять,
   короткие «Срок» и «Год» делят последнюю колонку пополам */
.case-facts { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); column-gap: var(--gap); margin-top: calc(80 * var(--k)); padding-top: calc(28 * var(--k)); border-top: 1px solid rgba(28,29,32,0.18); }
.case-fact { grid-column: span 2; }
.case-fact:nth-child(4):nth-last-child(2),
.case-fact:nth-child(5):last-child { grid-column: span 1; }
.case-fact__value { margin: calc(14 * var(--k)) 0 0; font-weight: 400; font-size: max(15px, calc(19 * var(--k))); line-height: calc(28 / 19); }

/* ===== Обложка и кнопка «Открыть сайт» ===== */
.case-cover { margin-top: calc(120 * var(--k)); }
.case-cover .wrap { padding: 0 calc(110 * var(--k)); }
.case-cover__frame { overflow: hidden; aspect-ratio: 16 / 9; background: #E9EAEB; }
.case-cover__media { display: block; width: 100%; height: 100%; object-fit: cover; scale: 1.15; }
/* мокап - прямо на белом фоне страницы. Фон фото не чисто белый (#FDFDFD) - brightness дотягивает его до белого,
   иначе по краю фото виден шов. На фото сверху и снизу ~10% пустого поля (server/mockups/duo.png) - срезаем по 8.5%,
   иначе над и под обложкой пустые дыры; тени устройств остаются */
.case-cover--mockup { margin-top: calc(90 * var(--k)); }
.case-cover--mockup .wrap { padding: 0 var(--side); }
.case-cover__mockup { display: block; width: 100%; max-width: calc(1400 * var(--k)); height: auto; aspect-ratio: 1600 / 881; object-fit: cover; margin: 0 auto; filter: brightness(1.012); }
.case-live { --s: max(110px, calc(180 * var(--k))); position: absolute; z-index: 2; top: calc(var(--s) / -2); right: calc(260 * var(--k)); display: flex; align-items: center; justify-content: center; width: var(--s); height: var(--s); border-radius: 50%; background: #166FF5; color: #FFFFFF; font-weight: 400; font-size: max(14px, calc(18 * var(--k))); white-space: nowrap; }
.case-live { --fill: #2F84FF; }

/* ===== «01 Задача», «02 Результат»: номер, подпись и заголовок слева, текст справа ===== */
.case-sec { padding: calc(150 * var(--k)) 0 calc(130 * var(--k)); }
/* заголовок - две левые колонки сетки, текст - две правые: начинается ровно над третьей цифрой результата */
.case-sec__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--gap); padding: 0 var(--side); }
.case-sec__head { grid-column: span 2; padding-right: calc(60 * var(--k)); }
.case-sec__body { grid-column: span 2; }
/* номер висит в левом поле вплотную к подписи: подпись и заголовок стоят по общему краю с названием и фактами */
.case-sec__label { position: relative; }
.case-sec__num { position: absolute; right: 100%; margin-right: max(10px, calc(16 * var(--k))); color: #1C1D20; }
.case-sec__title { margin: calc(26 * var(--k)) 0 0; font-weight: 500; font-size: max(26px, calc(46 * var(--k))); line-height: 1.15; letter-spacing: -0.01em; }
.case-sec__body { max-width: 680px; font-weight: 400; font-size: max(16px, calc(20 * var(--k))); line-height: 1.6; color: #45464A; }
.case-sec__body p { margin: 0 0 0.8em; }

/* цифры результата - в ряд под чертами */
.case-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--gap); margin: calc(100 * var(--k)) var(--side) 0; }
.case-metric { padding-top: calc(28 * var(--k)); border-top: 1px solid rgba(28,29,32,0.18); }
.case-metrics .reveal-fade { transition-delay: calc(var(--d, 0) * 0.08s); }
.case-metric__value { margin: 0; font-weight: 500; font-size: max(32px, calc(60 * var(--k))); line-height: 1; letter-spacing: -0.02em; white-space: nowrap; color: #1C1D20; }
.case-metric__label { max-width: 280px; margin: calc(16 * var(--k)) 0 0; font-weight: 400; font-size: max(14px, calc(17 * var(--k))); line-height: 1.45; color: #6E6F73; }

/* текстовый блок старого конструктора */
.case-text__grid { display: grid; grid-template-columns: calc(380 * var(--k)) minmax(0, 1fr); column-gap: calc(60 * var(--k)); padding: 0 var(--side); }
.case-text__label { padding-top: calc(10 * var(--k)); }
.case-text__body { max-width: 860px; font-weight: 400; font-size: max(16px, calc(22 * var(--k))); line-height: 1.55; letter-spacing: -0.005em; }
.case-text__body p { margin: 0 0 0.8em; }

/* карточка ТЗ - белая с рамкой, в одну строку, как на образце; узко - кнопки уходят на вторую строку */
.brief-card { display: flex; flex-wrap: wrap; align-items: center; gap: 12px max(14px, calc(20 * var(--k))); margin-top: calc(40 * var(--k)); padding: max(12px, calc(16 * var(--k))) max(14px, calc(20 * var(--k))); border-radius: max(12px, calc(16 * var(--k))); background: #FFFFFF; box-shadow: inset 0 0 0 1px rgba(28,29,32,0.14); }
.brief-card__icon { flex: none; display: flex; align-items: center; justify-content: center; width: max(44px, calc(56 * var(--k))); height: max(44px, calc(56 * var(--k))); border-radius: 10px; background: #1C1D20; color: #FFFFFF; font-weight: 500; font-size: 12px; letter-spacing: 0.06em; }
.brief-card__info { flex: 1 1 150px; min-width: 0; }
.brief-card__title { margin: 0; font-weight: 400; font-size: max(15px, calc(19 * var(--k))); }
.brief-card__meta { margin: 2px 0 0; font-size: max(13px, calc(15 * var(--k))); color: #6E6F73; }
.brief-card__actions { display: flex; gap: 6px; margin-left: auto; }
/* «Открыть» - контуром, «Скачать ↓» - текстом */
.brief-card__btn { --fill: #1C1D20; --fill-text: #FFFFFF; display: inline-flex; align-items: center; justify-content: center; height: max(38px, calc(46 * var(--k))); padding: 0 max(14px, calc(20 * var(--k))); border: 0; border-radius: 999px; background: transparent; box-shadow: inset 0 0 0 1px rgba(28,29,32,0.2); color: #1C1D20; font-family: inherit; font-weight: 400; font-size: max(14px, calc(16 * var(--k))); white-space: nowrap; cursor: pointer; }
.brief-card__btn--ghost { box-shadow: none; }

/* ===== Блоки показа ===== */
.case-block { padding: calc(130 * var(--k)) 0; }
.case-block--grey { background: #F2F3F4; }
.case-block--full { padding: calc(80 * var(--k)) 0; background: #F2F3F4; }
.case-block + .case-block:not(.case-block--grey):not(.case-block--full):not(.case-block--laptop) { padding-top: 0; }
.case-block--full + .case-block--full { padding-top: 0; }
/* видео сайта - в ноутбуке на серо-зелёной полосе (цвета - с образца владельца); видео подряд - на одной полосе */
.case-block--laptop { padding: calc(170 * var(--k)) 0 calc(110 * var(--k)); background: #C1CAC9; }
.case-block--laptop + .case-block--laptop { padding-top: 0; }
.device__media { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.case-missing { display: flex; align-items: center; justify-content: center; aspect-ratio: 16 / 10; background: #DEDFE1; color: #5F6064; font-size: 14px; }

/* ноутбук (MacBook Pro): чёрная крышка с тонкой рамкой и серым «подбородком», основание шире крышки - с выемкой и ножками */
/* крупно, как на образце: основание - около 72% ширины окна, но ноутбук целиком помещается по высоте (его высота - 0,64 ширины крышки) */
.device-laptop { width: min(58vw, 130vh); margin: 0 auto; }
.device-laptop__lid { position: relative; padding: 1.1% 1.1% 3.3%; border-radius: max(10px, calc(20 * var(--k))) max(10px, calc(20 * var(--k))) 0 0; background: #000000; box-shadow: inset 0 0 0 max(1px, calc(2 * var(--k))) #3A3C3F; }
.device-laptop__lid::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; aspect-ratio: 45 / 1; background: #202022; }
.device-laptop__screen { overflow: hidden; aspect-ratio: 16 / 10; border-radius: 2px; background: #000000; }
.device-laptop__screen--video { aspect-ratio: 16 / 9; } /* запись экрана - 16:9: целиком, без обрезки по краям */
.device-laptop__base { position: relative; width: 124%; margin-left: -12%; aspect-ratio: 28 / 1; border-radius: 0 0 max(8px, calc(18 * var(--k))) max(8px, calc(18 * var(--k))); background: linear-gradient(#94969C, #9A9CA2 45%, #74767C 72%, #515259); box-shadow: inset max(2px, calc(4 * var(--k))) 0 0 rgba(255,255,255,0.3), inset calc(-1 * max(2px, calc(4 * var(--k)))) 0 0 rgba(255,255,255,0.3); }
.device-laptop__base::before { content: ''; position: absolute; left: 42.5%; top: 0; width: 15%; height: 32%; border-radius: 0 0 max(6px, calc(12 * var(--k))) max(6px, calc(12 * var(--k))); background: linear-gradient(#EEEEF0, #C9CBCF); }
.device-laptop__base::after { content: ''; position: absolute; left: 5%; right: 5%; top: 100%; height: max(2px, calc(4 * var(--k))); border-radius: 0 0 3px 3px; background: linear-gradient(to right, #46484C 0 7%, transparent 7% 93%, #46484C 93%); }

/* скриншот без устройства */
.case-screen { overflow: hidden; margin: 0 calc(160 * var(--k)); border-radius: max(10px, calc(18 * var(--k))); box-shadow: 0 30px 90px rgba(28,29,32,0.14); }
.case-screen__media { display: block; width: 100%; height: auto; }

/* широкий скриншот - в скруглённой рамке на серой полосе, чуть шире текста, как на образце */
.case-full { overflow: hidden; margin: 0 calc(72 * var(--k)); border-radius: max(10px, calc(18 * var(--k))); box-shadow: 0 30px 90px rgba(28,29,32,0.10); }
.case-full__media { display: block; width: 100%; height: auto; }

/* фото-мокап (макбук / айфон / оба) - по центру, небольшой */
.case-mockup__media { display: block; width: 100%; max-width: calc(1060 * var(--k)); height: auto; margin: 0 auto; }

/* телефоны */
.case-phones { display: flex; justify-content: center; gap: calc(90 * var(--k)); }
.case-phones + .case-phones { margin-top: calc(90 * var(--k)); }
.device-phone { width: max(170px, calc(380 * var(--k))); padding: 2.6%; border-radius: max(28px, calc(58 * var(--k))); background: #0D0D0F; box-shadow: inset 0 0 0 2px #2A2B2E, 0 40px 80px rgba(28,29,32,0.18); }
.device-phone__screen { position: relative; overflow: hidden; aspect-ratio: 9 / 16; border-radius: max(22px, calc(46 * var(--k))); background: #000000; }
.device-phone__screen::after { content: ''; position: absolute; left: 36%; top: 2.4%; width: 28%; height: 3.4%; border-radius: 999px; background: #0D0D0F; }
.case-phones .reveal-fade { transition-delay: calc(var(--d, 0) * 0.12s); }

/* картинки открываются на весь экран */
[data-lightbox] { cursor: zoom-in; }

/* ===== Следующий проект ===== */
.case-next { padding: calc(190 * var(--k)) 0 calc(170 * var(--k)); text-align: center; }
.case-next__label { margin-bottom: calc(30 * var(--k)); }
.case-next__link { display: inline-block; color: #1C1D20; transition: opacity .3s; }
@media (hover: hover) { .case-next__link:hover { opacity: 0.5; } }
.case-next__title { font-weight: 500; font-size: max(64px, calc(210 * var(--k))); line-height: 1; letter-spacing: -0.03em; white-space: nowrap; }
.case-next__all { display: flex; justify-content: center; margin-top: calc(70 * var(--k)); }

/* ===== Просмотр картинки и ТЗ поверх страницы ===== */
.lightbox,
.pdf-modal { position: fixed; inset: 0; z-index: 95; background: rgba(15,15,17,0.95); }
.lightbox { display: flex; align-items: center; justify-content: center; }
.lightbox__img { max-width: 88vw; max-height: 86vh; object-fit: contain; box-shadow: 0 30px 90px rgba(0,0,0,0.5); }
.lightbox button,
.pdf-modal__close { display: flex; align-items: center; justify-content: center; border: 0; background: #FFFFFF; color: #1C1D20; font-family: 'PP Neue Montreal', 'Manrope', sans-serif; cursor: pointer; transition: opacity .2s; }
@media (hover: hover) {
  .lightbox button:hover,
  .pdf-modal__close:hover { opacity: 0.8; }
}
.lightbox__close { position: absolute; top: 24px; right: 24px; width: 56px; height: 56px; border-radius: 50%; font-size: 26px; }
.lightbox__prev,
.lightbox__next { position: absolute; top: 50%; width: 56px; height: 56px; margin-top: -28px; border-radius: 50%; font-size: 20px; }
.lightbox__prev { left: 24px; }
.lightbox__next { right: 24px; }
.lightbox__count { position: absolute; bottom: 24px; left: 0; right: 0; margin: 0; text-align: center; color: rgba(255,255,255,0.7); font-family: 'PP Neue Montreal', 'Manrope', sans-serif; font-size: 14px; }
.pdf-modal { display: flex; flex-direction: column; }
.pdf-modal__bar { display: flex; align-items: center; justify-content: space-between; padding: 14px 24px; }
.pdf-modal__title { margin: 0; color: #FFFFFF; font-family: 'PP Neue Montreal', 'Manrope', sans-serif; font-size: 15px; }
.pdf-modal__close { height: 44px; padding: 0 22px; border-radius: 999px; font-size: 15px; }
.pdf-modal__frame { flex: 1; width: 100%; border: 0; background: #FFFFFF; }

.case-preview-bar { position: fixed; z-index: 99; top: 16px; left: 50%; translate: -50% 0; padding: 10px 18px; border-radius: 999px; background: #166FF5; color: #FFFFFF; font-family: 'PP Neue Montreal', 'Manrope', sans-serif; font-size: 14px; }

/* ===== Планшет ===== */
@media (max-width: 900px) {
  .case-text__grid { grid-template-columns: 1fr; row-gap: 20px; }
  /* заголовок, под ним текст - во всю ширину */
  .case-sec__grid { grid-template-columns: minmax(0, 1fr); row-gap: 28px; }
  .case-sec__head,
  .case-sec__body { grid-column: auto; }
  .case-sec__head { padding-right: 0; }
  .case-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 24px; }
  .case-fact,
  .case-fact:nth-child(4):nth-last-child(2),
  .case-fact:nth-child(5):last-child { grid-column: auto; }
  .case-screen { margin: 0 calc(110 * var(--k)); }
}
.case-next__all .all-works { margin: 0; }

/* ===== Телефон ===== */
@media (max-width: 767px) {
  .case-hero .wrap { padding-top: 150px; }
  .case-hero__inner { padding: 0 20px; }
  .case-crumbs { margin-bottom: 16px; }
  .case-hero__title { font-size: clamp(44px, 14vw, 72px); white-space: normal; overflow-wrap: anywhere; }
  .case-hero__lead { margin-top: 20px; }
  .case-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 20px; column-gap: 16px; margin-top: 32px; padding-top: 20px; }
  .case-fact__value { margin-top: 6px; }

  .case-cover { margin-top: 48px; }
  .case-cover .wrap { padding: 0; }
  .case-cover--mockup { margin-top: 40px; }
  .case-cover--mockup .wrap { padding: 0 12px; }
  .case-cover__mockup { max-width: 100%; }
  .case-live { --s: 96px; right: 20px; font-size: 14px; }

  .case-sec { padding: 72px 0 32px; }
  /* поля узкие - номер не висит, а стоит в строке перед подписью */
  .case-sec__grid { row-gap: 16px; padding: 0 20px; }
  .case-sec__num { position: static; margin-right: 12px; }
  .case-sec__title { margin-top: 12px; font-size: 26px; }
  .case-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 16px; margin: 40px 20px 0; }
  .case-metric { padding-top: 16px; }
  .case-metric__label { margin-top: 8px; }
  .case-text__grid { row-gap: 12px; padding: 0 20px; }
  .case-text__label { padding-top: 0; }
  .brief-card { gap: 14px; margin-top: 24px; padding: 16px; }
  .brief-card__actions { width: 100%; }
  .brief-card__btn { flex: 1; height: 44px; }
  .brief-card__btn--ghost { box-shadow: inset 0 0 0 1px rgba(28,29,32,0.2); }

  .case-block { padding: 56px 0; }
  .case-block--full { padding: 24px 0; }
  .case-full { margin: 0 12px; border-radius: 10px; }
  .case-block--laptop { padding: 56px 0 40px; }
  .device-laptop { width: calc((100% - 32px) / 1.24); } /* основание шире крышки на 24% - по 16px до краёв экрана */
  .case-screen { margin: 0 20px; border-radius: 10px; }
  .case-mockup__media { max-width: 100%; }
  /* телефоны в ряд делят ширину поровну */
  .case-phones { gap: 12px; padding: 0 20px; }
  .case-phones + .case-phones { margin-top: 32px; }
  .device-phone { flex: 1 1 0; min-width: 0; max-width: 200px; width: auto; border-radius: 22px; }
  .device-phone__screen { border-radius: 16px; }

  .case-next { padding: 88px 20px 72px; }
  .case-next__label { margin-bottom: 16px; }
  .case-next__title { font-size: clamp(48px, 16vw, 96px); white-space: normal; overflow-wrap: anywhere; }
  .case-next__all { margin-top: 40px; }

  .lightbox__img { max-width: 100vw; }
  .lightbox__close { top: 12px; right: 12px; width: 48px; height: 48px; }
  .lightbox__prev,
  .lightbox__next { top: auto; bottom: 16px; width: 48px; height: 48px; margin-top: 0; }
  .lightbox__prev { left: 16px; }
  .lightbox__next { right: 16px; }
  .lightbox__count { bottom: 30px; }
  .pdf-modal__bar { gap: 12px; padding: 10px 12px 10px 20px; }
}