/* Блоки материалов главной (С7): название — курсив антиквы, фото 3:2, подпись типа здания под фото, ссылка.
   Значения — только из assets/css/tokens.css; правила — дизайн.md, инварианты 5, 7. 900px = --bp-desktop.
   Запас прокрутки под последним блоком для смены облицовки добавляет src/js/facade.js (С8, С10в). */
.mats { padding: var(--sp-22) var(--gutter) 0; }  /* запас над первым блоком — отрезок смены облицовки (С8) */
.mats__title {
  margin: 0 0 var(--sp-6);
  font: var(--fw-ui) var(--fs-ui) / var(--lh-label) var(--font-text);
  letter-spacing: var(--tracking-badge);
  color: var(--c-panel);
}
.mat { display: grid; align-content: start; gap: var(--sp-4); padding: var(--sp-8) 0 var(--sp-14); }
.mat + .mat { border-top: var(--line-w) solid var(--c-line); }
.mats__title + .mat { padding-top: 0; }  /* отступ под подписью группы задаёт сама подпись */
@media (width < 900px) {
  /* переход «Materials» (#materials): начало секции — под закреплённой полосой, а не за ней (ревью Codex 26.10) */
  .mats { scroll-margin-top: calc(100vw / (var(--facade-ratio-phone))); }
}
.mat__name {
  margin: 0;
  font: var(--fw-display) var(--fs-h3) / var(--lh-display) var(--font-display);
  letter-spacing: var(--tracking-display);
}
.mat__photo { margin: 0; display: grid; gap: var(--sp-2); }
.mat__photo img { display: block; width: 100%; height: auto; aspect-ratio: var(--ratio-photo); object-fit: cover; }
/* главное фото входит с полями по бокам и растёт до полной ширины (сборка 31.10, как у R17); --g ставит motion.js */
@media (width >= 900px) {
  /* на телефоне фото сразу во всю ширину: маска больших снимков при прокрутке туда-назад дёргалась (владелец 07.11) */
  .has-motion .mat__photo img { clip-path: inset(0 calc((1 - var(--g, 1)) * var(--grow-from))); }
}
.mat__photo figcaption { font-size: var(--fs-small); color: var(--c-muted); }
.mat__go {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  min-height: var(--control-min);
  font: var(--fw-ui) var(--fs-ui) / var(--lh-caption) var(--font-text);
  color: var(--c-panel);
  text-underline-offset: var(--sp-1);
}

@media (width >= 900px) {
  .mats-wrap { grid-column: 1; grid-row: 2; }
  .mats { padding: var(--sp-22) 0 0; }
  .mat { padding: var(--sp-10) 0 var(--sp-18); }
}