/* Переиспользуемые компоненты. Годятся для любых страниц сайта. */

/* ── Раскладка ─────────────────────────────────────────────── */
.container { max-width: var(--maxw); margin: 0 auto; padding-inline: var(--gutter); }
.section { padding-top: calc(var(--section-pad) * 1.5); }
.section--last { padding-bottom: calc(var(--section-pad) * 1.5); }
.section--band { background: var(--band-bg); color: var(--on-dark); position: relative; padding-block: calc(var(--section-pad) * 1.5); }
.section--band h2, .section--band h3, .section--band h4 { color: #fff; }
.section-kicker {
  font-family: var(--font-heading);
  font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--signal); margin-bottom: var(--space-3);
}
.section-lead { max-width: 46em; margin-bottom: var(--section-pad); }
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-6); flex-wrap: wrap; margin-bottom: var(--section-pad); }
.stack { display: flex; flex-direction: column; gap: var(--space-3); }
.row { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.grid { display: grid; gap: var(--space-6); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
.grid-lines { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--color-divider); border: 1px solid var(--color-divider); }

/* Сетка-подложка «чертёж» */
.blueprint-grid {
  position: absolute; inset: 0; opacity: 0.38; pointer-events: none;
  background-image:
    linear-gradient(rgba(148, 188, 227, 0.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148, 188, 227, 0.10) 1px, transparent 1px);
  background-size: 64px 64px;
}

/* ── Кнопки ────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 16px; line-height: 1.2; text-decoration: none; cursor: pointer;
  padding: var(--space-3) var(--space-5, 17px);
  border: 1px solid var(--color-divider); border-radius: var(--radius);
  background: transparent; color: var(--color-text);
  transition: filter .18s ease, background .18s ease, border-color .18s ease;
}
.btn--signal { background: var(--signal); border-color: var(--signal); color: var(--on-signal); }
.btn--signal:hover { filter: brightness(1.12); color: var(--on-signal); }
.btn--outline { border-color: var(--color-divider); color: inherit; }
.btn--outline:hover { background: rgba(245, 245, 248, 0.10); color: inherit; }
.btn--lg { padding: var(--space-4) var(--space-8); font-size: 18px; }
.btn--sm { padding: var(--space-2) var(--space-6); font-size: 15px; }

/* ── Карточки ──────────────────────────────────────────────── */
.card {
  border: 1px solid var(--color-divider); background: var(--color-surface);
  display: flex; flex-direction: column;
  transition: transform .18s ease, border-color .18s ease;
}
.card--lift:hover { transform: translateY(-4px); border-color: var(--signal); }
.card__media { border-bottom: 1px solid var(--color-divider); }
.card__body { padding: var(--space-8); display: flex; flex-direction: column; gap: var(--space-3); }
.card__kicker { font-family: var(--font-heading); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--signal); }
.card__text { font-size: 16px; margin: 0; color: color-mix(in srgb, var(--color-text) 80%, transparent); }
.card__foot { border-top: 1px solid var(--color-divider); padding-top: var(--space-3); margin-top: auto; display: flex; flex-direction: column; gap: var(--space-2); }

/* Список с «+» */
.plus-list { display: flex; flex-direction: column; gap: var(--space-2); }
.plus-list li { font-size: 15px; display: flex; gap: var(--space-2); }
.plus-list li::before { content: "+"; color: var(--signal); font-weight: 600; }

/* ── Фото-плитка с затемнением (услуги) ────────────────────── */
.tile {
  position: relative; overflow: hidden; min-height: 380px;
  border: 1px solid var(--color-divider);
  display: flex; flex-direction: column; justify-content: flex-end;
  transition: border-color .18s ease;
}
.tile:hover { border-color: var(--signal); }
.tile__scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(16,27,37,0.15) 30%, rgba(16,27,37,0.93) 100%); }
.tile__body { position: relative; padding: var(--space-8); color: var(--on-dark); }
.tile__body p { font-size: 15px; margin: 0; color: var(--on-dark-muted); }

/* ── Изображения: дуотон + проявление цвета при наведении ──── */
.media { position: relative; overflow: hidden; background: var(--deep-bg); }
.media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.media::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: var(--color-accent); mix-blend-mode: color;
  transition: opacity .45s ease;
}
.media:hover::after { opacity: 0; }
.media:hover img { transform: scale(1.04); }
.media--fill { position: absolute; inset: 0; height: 100%; }
.media--h200 { height: 200px; }
.media--h220 { height: 220px; }
.media--h540 { height: 540px; }

/* ── Таблица цен ───────────────────────────────────────────── */
.table { width: 100%; border-collapse: collapse; font-size: 16px; }
.table td { padding: var(--space-3) 0; border-bottom: 1px solid var(--color-divider); vertical-align: top; }
.table tr:last-child td { border-bottom: 0; }
.table__name { font-weight: 500; }
.table__note { font-size: 14px; color: color-mix(in srgb, var(--color-text) 74%, transparent); }
.table__price { text-align: right; white-space: nowrap; font-family: var(--font-heading); font-weight: 600; font-size: 22px; }

/* ── Блок категории лома: фото 1/2 + позиции 1/2, стороны чередуются ── */
.price-row { display: flex; align-items: stretch; border: 1px solid var(--color-divider); background: var(--color-surface); }
.price-row > * { flex: 1 1 50%; min-width: 0; }
.price-row:nth-of-type(even) { flex-direction: row-reverse; }
.price-row__media { min-height: 560px; }
.price-row__body { padding: calc(var(--section-pad) * 0.9) calc(var(--section-pad) * 0.9); display: flex; flex-direction: column; gap: var(--space-4); justify-content: center; }
.price-row__body h3 { font-size: 34px; margin: 0; }

/* ── Прочее ────────────────────────────────────────────────── */
.stat__value { font-family: var(--font-heading); font-weight: 600; font-size: 40px; line-height: 1; color: var(--signal); }
.stat__label { font-size: 14px; margin-top: var(--space-1); color: var(--on-dark-muted); }
.step { border-top: 3px solid var(--signal); padding-top: var(--space-4); }
.step__n { font-family: var(--font-heading); font-weight: 600; font-size: 52px; line-height: 1; color: rgba(245,245,248,0.22); margin-bottom: var(--space-3); }
.step p { font-size: 15px; color: var(--on-dark-muted); margin: 0; }
.fleet-item { border: 1px solid var(--color-divider); background: var(--color-surface); border-left: 3px solid var(--signal); padding: var(--space-4) var(--space-8); display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); }
.fleet-item__name { font-family: var(--font-heading); font-weight: 600; font-size: 21px; }
.fleet-item__cap { font-family: var(--font-heading); font-weight: 600; font-size: 24px; color: var(--signal); white-space: nowrap; }
.reason { background: var(--color-bg); padding: var(--space-8); display: flex; flex-direction: column; gap: var(--space-2); transition: background .18s ease; }
.reason:hover { background: var(--color-surface); }
.reason__n { font-family: var(--font-heading); font-size: 13px; color: var(--signal); letter-spacing: 0.12em; }
.review { border: 1px solid var(--color-divider); background: var(--color-surface); padding: var(--space-8); display: flex; flex-direction: column; gap: var(--space-3); }
.review__stars { color: var(--signal); font-size: 14px; letter-spacing: 3px; }
.review__author { font-size: 13px; margin-top: auto; padding-top: var(--space-3); border-top: 1px solid var(--color-divider); }
.faq__item { border-bottom: 1px solid var(--color-divider); padding: var(--space-8) 0; }
.faq__item:first-child { border-top: 1px solid var(--color-divider); }
.hazard-strip { height: 8px; background-image: repeating-linear-gradient(135deg, var(--signal) 0 18px, var(--band-bg) 18px 36px); }

/* ── Появление при прокрутке ───────────────────────────────── */
.reveal-on [data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s var(--ease); }
.reveal-on [data-reveal].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal-on [data-reveal] { opacity: 1; transform: none; transition: none; }
  .media img, .media::after { transition: none; }
}

/* ── Адаптив ───────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .grid-lines { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 980px) {
  .price-row, .price-row:nth-of-type(even) { flex-direction: column; }
  .price-row__media { min-height: 320px; }
  .price-row__body { padding: var(--space-8); }
}
@media (max-width: 760px) {
  .grid--2, .grid--3, .grid--4, .grid-lines { grid-template-columns: 1fr; }
  .card__body, .tile__body, .review, .reason { padding: var(--space-6); }
}