/* Общие секции всех страниц (первая версия, шаг 14): заголовки H2, «Finished facades» и галереи, поставка с шагами
   заявки, форма, подвал. Значения — только из assets/css/tokens.css; правила — дизайн.md (инварианты 4, 5, 7, 8).
   900px = --bp-desktop: переменные в media query не работают. */
h2 {
  margin: 0 0 var(--sp-6);
  font: var(--fw-display) var(--fs-h2) / var(--lh-display) var(--font-display);
  letter-spacing: var(--tracking-display);
  text-wrap: balance;
}

/* Кнопка: на светлом — терракотовая, на терракоте — светлая (инвариант 8) */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--button-h);
  padding: 0 var(--sp-6);
  border-radius: var(--radius-pill);
  background: var(--c-panel);
  color: var(--c-on-panel);
  font: var(--fw-ui) var(--fs-ui) / var(--lh-ui) var(--font-text);
  text-decoration: none;
}
.btn--on-panel { background: var(--c-on-panel); color: var(--c-panel-deep); }

/* Плитки фото: подпись — курсив антиквы под фото, без плашки (владелец 01.11: «никаких надписей на картинках»; инвариант 7) */
.tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-6) var(--sp-2); }
/* увеличенное фото при появлении (reveal.css) выходило за плитку и давало прокрутку вбок на 768–899 px; обрезаем
   только по горизонтали и с запасом под рамку фокуса ссылки в подписи */
.tile { position: relative; margin: 0; overflow-x: clip; overflow-clip-margin: calc(var(--focus-w) + var(--focus-offset)); }
.photo-link { display: block; }
.tile img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.tile figcaption {
  padding-top: var(--sp-2);
  color: var(--c-ink);
  font: italic var(--fw-caption) var(--fs-small) / var(--lh-caption) var(--font-display);
}
.tile figcaption a {
  display: inline-block;
  /* цель нажатия --control-min при той же раскладке (шаг 19); без единицы lh — как текстовая ссылка */
  padding-block: calc((var(--control-min) - 1lh) / 2);
  margin-block: calc((1lh - var(--control-min)) / 2);
  color: inherit;
}
@media (width >= 900px) {
  .tiles { gap: var(--sp-10) var(--sp-4); }
  .tiles--gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tile figcaption { padding-top: var(--sp-3); font-size: var(--fs-caption); }
}

.projects { padding: var(--sp-14) 0; }
.projects__intro { color: var(--c-muted); }

/* Форма: одна белая карточка на светлой подложке (инвариант 8). Смена фона уже отделяет блок: секция над ней короче обычной */
main > section:has(+ .request) { padding-bottom: var(--sp-8); }
@media (width >= 900px) { main > section:has(+ .request) { padding-bottom: var(--sp-10); } }
.request { padding: var(--section-y) var(--gutter); background: var(--c-mist); scroll-margin-top: var(--sp-4); }
.request__card { max-width: 46rem; margin: 0 auto; padding: var(--sp-8) var(--sp-5); background: var(--c-surface); }
.request__intro { color: var(--c-muted); }
.form { display: grid; gap: var(--sp-5); }
.field { display: grid; gap: var(--sp-2); }
.field[hidden] { display: none; }
.field label, .pills legend { font: var(--fw-ui) var(--fs-ui) / var(--lh-label) var(--font-text); }
.field input {
  min-height: var(--control-min);
  width: 100%;
  padding: 0 var(--sp-4);
  border: 0;
  border-radius: var(--radius-field);
  background: var(--c-mist);
  color: var(--c-ink);
  font: inherit;
}
.field input[aria-invalid="true"] { outline: var(--focus-w) solid var(--c-error); }
.field input:focus-visible { outline: var(--focus-w) solid var(--c-focus-light); outline-offset: var(--focus-offset); }
.field__hint { margin: 0; font-size: var(--fs-small); color: var(--c-muted); }
.field__error { margin: 0; font-size: var(--fs-small); color: var(--c-error); }
.field__error[hidden], .form__status[hidden] { display: none; }
.pills { margin: 0; padding: 0; border: 0; min-inline-size: 0; }
.pills legend { padding: 0; margin-bottom: var(--sp-3); }
.pills__list { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.pill { position: relative; display: inline-flex; }
.pill input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.pill span {
  display: inline-flex;
  align-items: center;
  min-height: var(--control-min);
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--radius-pill);
  background: var(--c-mist);
  font-size: var(--fs-ui);
  line-height: var(--lh-label);
}
.pill input:checked + span { background: var(--c-panel); color: var(--c-on-panel); }
.pill input:focus-visible + span { outline: var(--focus-w) solid var(--c-focus-light); outline-offset: var(--focus-offset); }
.pills[aria-invalid="true"] .pill span { box-shadow: inset 0 0 0 var(--line-w) var(--c-error); }
.form__data { margin: 0; font-size: var(--fs-small); color: var(--c-muted); }
.form .btn { justify-self: start; border: 0; cursor: pointer; }
.form .btn:disabled { opacity: 0.6; cursor: progress; }
.form__status { margin: 0; padding: var(--sp-4); background: var(--c-mist); }
/* пустая строка не видна, но остаётся в дереве: иначе чтец экрана не объявит появившийся текст */
.form__status:empty { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); }
.form__status.is-error { color: var(--c-error); }
.form__status.is-success { color: var(--c-success); }
@media (width >= 900px) {
  .request__card { padding: var(--sp-10) var(--sp-14); }
}

/* Подвал: реквизиты и языки */
.ftr { padding: var(--sp-10) var(--gutter) 0; overflow: hidden; background: var(--c-deep); color: var(--c-on-ink-muted); font-size: var(--fs-small); }
/* логотип на всю ширину внизу (сборка 31.10, как у R20); по центру и целиком над краем экрана (владелец 31.10) */
.ftr .ftr__mark {
  margin: var(--sp-10) 0 var(--sp-10);
  text-align: center;
  max-width: none;
  font: 600 var(--fs-mark) / 0.8 var(--font-display);
  letter-spacing: -0.04em;
  white-space: nowrap;
  color: var(--c-on-deep);
}
.ftr p { margin: 0 0 var(--sp-3); }
.ftr a { display: inline-flex; align-items: center; min-height: var(--control-min); min-width: var(--control-min); color: var(--c-on-deep); }
.ftr :focus-visible { outline-color: var(--c-focus-dark); }