/* Фасад главной (С8, ключевой ход; дизайн.md инвариант 9, motion-brief.md К1): закреплён — на компьютере справа,
   на телефоне полосой во всю ширину над блоками материалов; облицовка меняется только прозрачностью слоёв,
   её задаёт src/js/facade.js от прокрутки. Без JS — серый фасад. Значения — только из tokens.css. 900px = --bp-desktop. */
.facade { position: relative; margin: 0; }
.facade img { display: block; width: 100%; height: auto; object-fit: cover; }
.facade__layer,
.strip__layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
}
.facade__layer img { width: 100%; height: 100%; }
.is-start { opacity: 1; }  /* материал из адреса рекламы — виден сразу (С9) */
/* подпись «Illustration», метка материала и подсказка «прокрутите» убраны — решение владельца 31.10 */
/* фасад — ссылка на материал, чья облицовка сейчас видна (владелец 07.11); серый фасад никуда не ведёт */
.facade-link { position: absolute; inset: 0; }
.facade-link[hidden] { display: none; }

@media (width < 900px) {
  /* прижат к верху: небо под шапкой всегда видно целиком (от 28 px на 320), а не тонкой полоской на коротких экранах;
     срезается низ картинки — он под панелью с текстом (С10в) */
  .facade img { height: calc(100svh - var(--header-h)); object-position: 50% 0; }
  /* первый экран телефона: серый, а при входе с рекламы — сразу её материал; меняется облицовка на полосе ниже */
  .facade .facade__layer:not(.is-start) { display: none; }
  .strip {
    position: sticky;
    top: var(--header-h);
    z-index: 2;
    aspect-ratio: var(--facade-ratio-phone);
    overflow: hidden;
  }
  .strip > img { display: block; width: 100%; height: 100%; object-fit: cover; }
}
/* телефон поперёк: высота от ширины (7:5) больше экрана, и полоса закрывала блоки материалов целиком (шаг 19) */
@media (width < 900px) and (orientation: landscape) {
  .strip { aspect-ratio: auto; height: var(--facade-h-landscape); }
}
/* фокус с клавиатуры не должен прятаться под закреплённой полосой (WCAG 2.4.11) */
@media (width < 900px) {
  .mats a { scroll-margin-top: calc(var(--header-h) + 100vw / (var(--facade-ratio-phone)) + var(--sp-4)); }
}
@media (width < 900px) and (orientation: landscape) {
  .mats a { scroll-margin-top: calc(var(--header-h) + var(--facade-h-landscape) + var(--sp-4)); }
}

@media (width >= 900px) {
  .strip { display: none; }
  .facade-rail { grid-column: 2; grid-row: 1 / span 2; }
  .facade img { aspect-ratio: var(--facade-ratio-desktop); }
  /* фасад и подпись под ним закреплены одной обёрткой (ревью Codex 01.11: два отдельных sticky в конце колонки
     прижимались к одному низу, и подпись наезжала на фасад). Сдвиг сверху считает facade.js: низ фасада на --sp-18
     ниже полосы (инвариант 2); без JS — --sp-14 */
  .facade-pin {
    position: sticky;
    top: calc(var(--header-h) + var(--sp-4));
    margin-top: var(--facade-offset, var(--sp-14));
  }
  .facade { box-shadow: var(--shadow-facade); }
  /* под фасадом — название материала облицовки и номер «02 / 05» (владелец 01.11 — вариант 6 из 8, демо прототипы/под-фасадом/);
     текст ставит facade.js. Скрыта — без смены высоты обёртки (visibility): так facade.js меряет, помещается ли
     обёртка в экран; не помещается (низкое окно) — подпись не показывается, фасад важнее */
  .facade-name {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--sp-4);
    margin: var(--sp-4) 0 0;
  }
  .facade-name[hidden] { display: flex; visibility: hidden; }
  .facade-name__text {
    font: italic var(--fw-display) var(--fs-h2) / var(--lh-display) var(--font-display);
    letter-spacing: var(--tracking-display);
  }
  .facade-name__num { font: var(--fw-ui) var(--fs-ui) / 1 var(--font-text); color: var(--c-muted);
    font-variant-numeric: tabular-nums; white-space: nowrap; }
}
@media (width < 900px) {
  .facade-name { display: none; }
}