/* Страница материала (шаблон «Материал», шаг 14), в духе главной (сборка 31.10): первый экран — фото во всю ширину
   и почти во весь экран, заголовок, абзац и кнопка прямо на фото над затемнением низа, без плашки и без подписи поверх
   фото. План Б (спечённый камень, фото нет) — тот же экран на глубоком цвете, как заставка главной.
   Появление текста — reveal.js; фото на входе медленно оседает. Значения — только из tokens.css. 900px = --bp-desktop. */
main { padding: 0; }
.mhero {
  position: relative;
  display: grid;
  grid-template: 100% / 100%;
  height: var(--mhero-h);
  min-height: 28rem;
  overflow: hidden;
  background: var(--c-deep);
  color: var(--c-on-panel);
}
.mhero__photo { grid-area: 1 / 1; position: relative; margin: 0; }
.mhero__photo picture { display: block; height: 100%; }
.mhero__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* оседает, когда фото пришло (класс ставит reveal.js), а не по таймеру с открытия страницы — разбор движения 02.11 */
.rv-on .mhero__photo img { transform: scale(1.12); }  /* до старта — уже в начальном масштабе, без скачка 1 → 1.12 */
.rv-on .mhero__photo.is-ready img { transform: none; animation: mhero-settle 1.8s cubic-bezier(0.25, 0.7, 0.25, 1) both; }
@keyframes mhero-settle { from { transform: scale(1.12); } }
.mhero__photo::after {  /* затемнение низа под заголовком (как на главной) и верха под шапкой — светлое небо съедает её */
  content: '';
  position: absolute;
  inset: 0;
  /* верх — под шапку; низ — по высоте текста: --mhero-text-h ставит chrome.js, без JS — 60 %. Градиент только
     перерисовывается: отдельный блок под текстом сдвигался при подмене шрифта и давал CLS 0,13 (шаг 22) */
  background:
    linear-gradient(to top, var(--c-scrim-text) var(--mhero-text-h, 60%), transparent calc(var(--mhero-text-h, 60%) + var(--scrim-ramp))),
    linear-gradient(var(--c-scrim-hdr) var(--header-h), transparent calc(var(--header-h) + var(--scrim-ramp)));
}
/* телефон поперёк: нижний предел 28rem выше экрана, и кнопка уходила за край (шаг 19). Секция растёт по тексту:
   на совсем низком экране ничего не обрезается, а уходит в прокрутку; фото заполняет её целиком */
@media (width < 900px) and (orientation: landscape) {
  .mhero { height: auto; min-height: 100svh; grid-template: auto / 100%; }
  .mhero__photo { position: absolute; inset: 0; }
  .mhero__text { margin-top: calc(var(--header-h) + var(--sp-4)); }
}
.mhero__text {
  grid-area: 1 / 1;
  align-self: end;
  position: relative;
  display: grid;
  gap: var(--sp-4);
  justify-items: start;
  padding: 0 var(--gutter) var(--sp-8);
}
.mhero h1 { margin: 0; max-width: 18ch; font-size: var(--fs-hero-material); text-wrap: balance; }
.mhero :focus-visible { outline-color: var(--c-focus-dark); }
/* абзац и кнопка — после заголовка */
.rv-on .mhero .rv-b { transition-delay: calc(var(--k, 0) * 150ms + 650ms); }
/* EL «Πυροσυσσωματωμένη» шире экрана 320 px — без JS переносим по слогам; с JS слово делится на буквы и переносится
   между ними (переносов по слогам у разбитого текста нет) */
.mhero h1, main h2 { hyphens: auto; overflow-wrap: break-word; }

.gallery, .others { padding: var(--section-y) var(--gutter); }
/* описание материала — сразу за первым экраном (владелец 01.11); строка не шире --measure, чтобы читалось */
.use { padding: var(--section-y) var(--gutter) 0; }
.use p { max-width: var(--measure); margin: 0; }
.use__blocks { display: grid; gap: var(--sp-8); margin-top: var(--sp-8); }
.use h3 { margin: 0 0 var(--sp-2); font: var(--fw-display) var(--fs-sub) / var(--lh-display) var(--font-display); }
@media (width >= 900px) { .use__blocks { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-10) var(--sp-14); margin-top: var(--sp-10); } }
.samples { padding: 0 var(--gutter) var(--section-y); }
.tiles--samples .tile img { aspect-ratio: 1; }
.others ul { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: 0; padding: 0; list-style: none; }
.pill-link {
  display: inline-flex;
  align-items: center;
  min-height: var(--control-min);
  padding: var(--sp-2) var(--sp-5);
  border: var(--line-w) solid var(--c-panel);
  border-radius: var(--radius-pill);
  color: var(--c-panel);
  text-decoration: none;
}

@media (width >= 900px) {
  .mhero { height: var(--mhero-h-wide); }
  .mhero__text { padding-bottom: var(--sp-14); }
}
/* «Show all (N)»: остальные фото — второй сеткой под кнопкой; открыли — кнопка пропадает, отступ как между рядами */
.more > summary { margin-top: var(--sp-8); cursor: pointer; list-style: none; }
.more > summary::-webkit-details-marker { display: none; }
.more[open] > summary { display: none; }
.more > .tiles { margin-top: var(--sp-6); }
@media (width >= 900px) { .more > .tiles { margin-top: var(--sp-10); } }