/* WORK-PAGE MOBILE MASTER — ЕДИНСТВЕННЫЙ источник mobile-геометрии для
   всех 9 work-detail. Ни одна работа не имеет права на собственные
   top/left/width/height/transform/background-position/background-size/
   calc()/font-size в @media — вся геометрия только здесь. Страница
   передаёт исключительно данные из своего data-блока .work{}:
     image-slots  --work-hero-mobile / --work-gallery-1..4
     скаляры hero --work-hero-ar / --work-hero-pos / --work-hero-top /
                  --work-hero-pb / --work-h1-mobile / --work-h1-lh-mobile /
                  --work-lead-mobile
   Различие «паттерн A» (выделенная сцена {name}-hero-scene-mobile.png) и
   «паттерн B» (кроп левой части композита {name}-work-background-v1-16x9.png
   через --work-hero-ar:100/92 + --work-hero-pos:0% 50%) выражается
   ТОЛЬКО значениями этих prop. Если конкретной работе не хватает набора —
   правится MASTER или формат ассета, а не страница.
   body{overflow:auto} и скрытие .background на mobile
   (.work .background{display:none}) — здесь, единым правилом для всех 9. */

.work__portrait,
.work__gallery { display: none; }

@media (max-width: 900px) {
  body { overflow: auto; }
  /* desktop-фон/композит .background на mobile не участвует — hero целиком
     несёт .work__portrait (см. ниже). Единый источник, было per-page. */
  .work .background { display: none; }
  .sections { display: none; }
  .content { left: 4vw; width: 260px; }
  .details { width: 36vw; }
  .counter { top: 13%; }

  /* 1. Hero: единый full-bleed кадр для ВСЕХ work-detail. Механика —
     только здесь; страница передаёт лишь данные через custom properties
     (значения по умолчанию — паттерн A с квадратной сценой 960×941):
       --work-hero-mobile  url() кадра (обязателен, в data-блоке страницы)
       --work-hero-ar      aspect-ratio бокса (замена height:XXvw)
       --work-hero-pos      background-position
       --work-hero-top      вертикальный сдвиг бокса
       --work-hero-pb       запас высоты под absolute-портрет
       --work-h1-mobile / --work-h1-lh-mobile  размер/интерлиньяж H1
     Ни одна работа не задаёт эти величины напрямую — только через prop. */
  .work__hero {
    position: relative;
    display: block;
    padding-bottom: var(--work-hero-pb, 170px);
  }
  .work__hero-text { min-width: 0; }
  main.work section.content .work__hero h1 {
    font-size: var(--work-h1-mobile, 40px) !important;
    line-height: var(--work-h1-lh-mobile, 1.05) !important;
  }
  .work__hero-text h1 { margin: 0; }
  .work__hero-text .lead {
    margin: 12px 0 0;
    font-size: var(--work-lead-mobile, clamp(17px, 1.25vw, 21px));
  }
  .work__hero-text .rule { margin: 16px 0 0; }

  .work__portrait {
    display: block;
    position: absolute;
    top: var(--work-hero-top, -128px);
    /* full-bleed без 100vw (тот включает полосу прокрутки → +overflow):
       якорим к краям .work через горизонтальный padding .work>.content
       (24px, задан responsive-shell Шаг 3, стабилен для всех work). */
    left: -24px;
    right: -24px;
    width: auto;
    transform: none;
    aspect-ratio: var(--work-hero-ar, 960 / 941);
    min-height: 0;
    margin: 0;
    overflow: hidden;
    border-radius: 0;
    background-image: var(--work-hero-mobile);
    background-repeat: no-repeat;
    background-position: var(--work-hero-pos, center top);
    background-size: cover;
    z-index: -1;
  }

  /* 2. Editorial-блок: TASK/RESULT/tags слева, gallery 2×2 справа —
     одна композиция за счёт общей grid-обвязки .work__hero + .work__summary. */
  .work__summary {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 10px;
    margin-top: 22px;
  }
  .work__summary h2 { margin-top: 0 !important; }
  .content .work__summary p { font-size: 10px; line-height: 1.5; }

  .work__gallery {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    width: 100%;
    margin-top: 16px;
    /* обрезаем 1px-выступ ячеек (см. margin ниже) по внешнему краю. */
    overflow: hidden;
  }
  .work__gallery-cell {
    /* +2px и margin:-1px ниже → каждая плитка на 1px залезает под каждого
       соседа по ОБЕИМ осям (grid со стретчем игнорировал горизонтальный
       отрицательный margin, оставляя вертикальный шов между колонками). */
    width: calc(100% + 2px);
    aspect-ratio: 1 / 1;
    overflow: hidden;
    /* плитки стыкуются вплотную (gap:0) — скругление углов отводило бы
       картинку от общих граней и открывало светлый фон «крестиком». */
    border-radius: 0;
    /* ширина трека 163.333px не ложится на целые пиксели устройства →
       между соседними плитками просвечивал фон тонким швом. Растягиваем
       каждую плитку на 1px во все стороны — соседи гарантированно
       перекрываются при любом dpr, шва нет (внешний выступ режется
       overflow:hidden родителя). */
    margin: -1px;
    background-repeat: no-repeat;
    background-position: center;
    /* не cover: у части исходников галереи впечатана светлая кромка
       (до ~9px, на левом ИЛИ правом крае — «движение»-ассеты), при cover
       она ложится на шов между плитками белой полосой. Зум 110% срезает
       ~5% с каждой стороны — кромку у всех единообразно, лица по центру
       не страдают. */
    background-size: 110%;
  }
  .work__gallery-tl { background-image: var(--work-gallery-1); }
  .work__gallery-tr { background-image: var(--work-gallery-2); }
  .work__gallery-bl { background-image: var(--work-gallery-3); }
  .work__gallery-br { background-image: var(--work-gallery-4); }

  /* 4. Горизонтальная строка характеристик. */
  dl { grid-template-columns: repeat(4, 1fr); gap: 8px 10px; margin-left: 0; }
  dl div { min-width: 0; flex-direction: column; gap: 2px; }
  dt, dd { overflow-wrap: break-word; }
}