/* ВЫСОТА ФОТО У РАСКЛАДОК С ФОТО СБОКУ (SCRUM-541, решение владельца 06.10.2026).

   Свой файл, а не правка китов: `offer.css` и `site-contacts.css` - зеркала, их правят только
   прогоны. Признак `data-imgh` печатает корень секции (`sc_site_imgh_attr()`), и только у
   раскладок, где фото стоит рядом с содержимым; без признака - как задумала раскладка, то есть
   готовые сайты не сдвигаются ни на точку.

   Режимы:
   - `text` - фото ровно по высоте текста рядом: коробка фото не участвует в высоте ряда
     (`contain:size`) и тянется по нему;
   - `full` - в край секции сверху и снизу: поле секции снимается отрицательным полем;
   - `s` / `m` / `l` - низкая, средняя, высокая: своя высота, фото по центру ряда.

   Высоты считаются от ширины страницы сайта (контейнер `ls`), а не окна: в редакторе бумага
   уже окна, и мерить окно значило бы показать в холсте не то, что увидит посетитель.
   «По тексту» и «в край» - только на широкой бумаге: на узкой фото встаёт над текстом, и
   высоты рядом у него нет. Только логические свойства. */

.ls-off[data-imgh],
.ls-contacts[data-imgh] {
  --ls-imgh-s: 320px;
  --ls-imgh-m: 480px;
  --ls-imgh-l: 640px;
}

@container ls (max-width: 700px) {
  .ls-off[data-imgh],
  .ls-contacts[data-imgh] {
    --ls-imgh-s: 220px;
    --ls-imgh-m: 300px;
    --ls-imgh-l: 400px;
  }
}

.ls-off[data-imgh="s"],
.ls-contacts[data-imgh="s"] { --ls-imgh: var(--ls-imgh-s); }
.ls-off[data-imgh="m"],
.ls-contacts[data-imgh="m"] { --ls-imgh: var(--ls-imgh-m); }
.ls-off[data-imgh="l"],
.ls-contacts[data-imgh="l"] { --ls-imgh: var(--ls-imgh-l); }

/* --- предложение: коробка фото у каждой раскладки своя --------------------------------- */

.ls-off[data-imgh="s"] :is(.ls-a1__mw, .ls-a2__mw, .ls-a4__mw, .ls-c2__m, .ls-d1__mw),
.ls-off[data-imgh="m"] :is(.ls-a1__mw, .ls-a2__mw, .ls-a4__mw, .ls-c2__m, .ls-d1__mw),
.ls-off[data-imgh="l"] :is(.ls-a1__mw, .ls-a2__mw, .ls-a4__mw, .ls-c2__m, .ls-d1__mw) {
  align-self: center;
  min-block-size: 0;
  block-size: var(--ls-imgh);
  margin-block: 0;
  aspect-ratio: auto;
}

@container ls (min-width: 701px) {
  /* Предел снизу 200: замерено на витрине - у раскладки без текста рядом «по тексту» давало
     фото нулевой высоты, то есть пропажу картинки. */
  .ls-off[data-imgh="text"] :is(.ls-a1__mw, .ls-a2__mw, .ls-a4__mw, .ls-c2__m, .ls-d1__mw) {
    align-self: stretch;
    min-block-size: 200px;
    block-size: auto;
    margin-block: 0;
    aspect-ratio: auto;
    contain: size;
  }

  /* У A4 фото держится на месте при прокрутке; «по тексту» значит во всю высоту списка, и
     держать там нечего. */
  .ls-off[data-imgh="text"] .ls-a4__mw {
    position: relative;
    inset-block-start: auto;
  }
}

/* --- контакты: «форма и фото» и «без формы» ------------------------------------------- */

.ls-contacts[data-imgh="s"] .ls-contacts__col--media,
.ls-contacts[data-imgh="m"] .ls-contacts__col--media,
.ls-contacts[data-imgh="l"] .ls-contacts__col--media {
  align-self: center;
}

.ls-contacts[data-imgh="s"] .ls-contacts__frame,
.ls-contacts[data-imgh="m"] .ls-contacts__frame,
.ls-contacts[data-imgh="l"] .ls-contacts__frame {
  min-block-size: 0;
  block-size: var(--ls-imgh);
  aspect-ratio: auto;
}

@container ls (min-width: 701px) {
  .ls-contacts[data-imgh="text"] .ls-contacts__col--media {
    align-self: stretch;
    contain: size;
  }

  .ls-contacts[data-imgh="text"] .ls-contacts__frame {
    min-block-size: 200px;
    block-size: 100%;
    aspect-ratio: auto;
  }

  /* В край: поле секции снимается тем же выражением, что его задаёт (`site-contacts.css`,
     `.ls-contacts`), - иначе край разъехался бы на промежуточных ширинах. Угол у кромки
     секции не нужен: фото стоит в край. */
  .ls-contacts[data-imgh="full"] .ls-contacts__col--media {
    align-self: stretch;
    margin-block: calc(clamp(64px, 7vw, 112px) * -1);
  }

  .ls-contacts[data-imgh="full"] .ls-contacts__frame {
    min-block-size: 0;
    block-size: 100%;
    border-radius: 0;
  }
}