/* Постраничные раскладки. Компоненты — в components.css. */

/* ══ Главная · первый экран ═══════════════════════════════════════════════
   Не 100vh с одной центрированной фразой: высота задаётся содержимым,
   основная ось — левая. */
.hero { padding-block: var(--space-2xl) var(--space-xl); }

/* Первый экран — типографский, в одну колонку. Основная ось левая,
   правое поле остаётся пустым намеренно. Визуальный вес даёт схема
   в следующей секции, поэтому герой не нуждается в иллюстрации. */
.hero__inner { display: grid; align-content: start; }

.hero__text { display: grid; align-content: start; gap: var(--space-lg); max-width: 46rem; }

.hero__path { color: var(--color-muted); letter-spacing: 0.04em; }
.hero__arrow { color: var(--color-accent-dim); margin-inline: var(--space-3xs); }

.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); }

@media (min-width: 64rem) {
  .hero { padding-block: var(--space-3xl) var(--space-2xl); }
}

/* ══ Направления деятельности — правая колонка первого экрана ════════════
   Не три равные колонки с иконками, а размеченный список: код вида
   деятельности, название, одна строка пояснения. */
.dirs { list-style: none; margin: 0; padding: 0; display: grid; }

.dirs__item {
  display: grid;
  gap: var(--space-2xs);
  padding-block: var(--space-md);
  border-block-start: var(--rule-hair) solid var(--color-rule-2);
}
.dirs__item:last-child { border-block-end: var(--rule-hair) solid var(--color-rule-2); }

.dirs__code  { color: var(--color-accent); }
.dirs__title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-display-bold);
  color: var(--color-ink);
}
.dirs__body { font-size: var(--text-sm); color: var(--color-muted); max-width: 46ch; }

@media (min-width: 48rem) {
  .dirs__item {
    grid-template-columns: 4.5rem minmax(0, 1fr);
    column-gap: var(--space-lg);
    align-items: baseline;
  }
  .dirs__code  { grid-row: span 2; }
  .dirs__title { grid-column: 2; }
  .dirs__body  { grid-column: 2; }
}

/* ══ Текущая разработка на главной ═══════════════════════════════════════ */
.work { display: grid; gap: var(--space-xl); align-items: start; }
.work__text { display: grid; gap: var(--space-md); align-content: start; max-width: 42rem; }
@media (min-width: 64rem) {
  .work { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: var(--space-2xl); }
}

/* ══ Схема комплекса ══════════════════════════════════════════════════════ */
.schematic { margin: 0; }
.schematic__svg { width: 100%; height: auto; }
.schematic__cap {
  margin-block-start: var(--space-md);
  font-size: var(--text-xs);
  color: var(--color-muted);
  max-width: 56ch;
}

.sch-soil__1 { fill: var(--color-paper-2); }
.sch-soil__2 { fill: var(--color-paper-3); }
.sch-soil__3 { fill: var(--color-paper-2); }
.sch-soil__rule { stroke: var(--color-rule); stroke-width: 1; }
.sch-hatch { stroke: var(--color-border); stroke-width: 0.75; }

/* Дневная поверхность — самая заметная линия разреза */
.sch-surface { stroke: var(--color-ink); stroke-width: 2; }

/* Конструкция светлее грунта: так разрез читается с одного взгляда */
.sch-struct__body  { fill: var(--color-paper-3); stroke: var(--color-ink-2); stroke-width: 1.5; }
.sch-struct__base  { fill: var(--color-paper-3); stroke: var(--color-ink-2); stroke-width: 1.5; }
.sch-struct__floor { stroke: var(--color-border); stroke-width: 1; }

/* Скважина — единственный «инструментованный» элемент разреза */
.sch-bore { fill: var(--color-paper); stroke: var(--color-accent-dim); stroke-width: 1.5; }

.sch-cable   { stroke: var(--color-accent-dim); stroke-width: 2; }
.sch-sensors circle { fill: var(--color-accent); }
.sch-depth line { stroke: var(--color-border); stroke-width: 1; stroke-dasharray: 2 3; }

.sch-module { fill: var(--color-paper-3); stroke: var(--color-accent-dim); stroke-width: 1.5; }
.sch-module__code {
  fill: var(--color-accent);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  text-anchor: middle;
}
.sch-link { stroke: var(--color-accent-dim); stroke-width: 1.5; }

.sch-label {
  fill: var(--color-ink-2);
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.04em;
}
.sch-note { fill: var(--color-muted); font-family: var(--font-body); font-size: 14px; }
.sch-unit text, .sch-unit-lg {
  fill: var(--color-accent);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}
.sch-unit text { font-size: 13px; font-weight: 500; }
.sch-unit-lg { font-size: 19px; font-weight: 700; }

.sch-flow__line { fill: none; stroke: var(--color-border); stroke-width: 1; stroke-dasharray: 3 4; }
.sch-flow__pulse { fill: var(--color-accent); }
.sch-arrow { fill: var(--color-border); }

.sch-box { fill: var(--color-paper-2); stroke: var(--color-border); stroke-width: 1.5; }
.sch-box--server { fill: var(--color-paper-3); }
.sch-box__code {
  fill: var(--color-accent);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.sch-box__name { fill: var(--color-ink); font-family: var(--font-body); font-size: 16px; font-weight: 500; }
.sch-box__meta { fill: var(--color-muted); font-family: var(--font-body); font-size: 13px; }

/* Отрисовка узел за узлом при попадании в поле зрения. Не более пяти узлов.
   Схема видна по умолчанию: прятать её берётся только скрипт, выставляя
   data-armed. Без JS и при отключённой анимации схема просто на месте. */
[data-schematic][data-armed] .sch-node {
  opacity: 0;
  transition: opacity var(--dur-long) var(--ease-out);
}
[data-schematic][data-armed].is-drawn .sch-node { opacity: 1; }
[data-schematic][data-armed].is-drawn .sch-node[data-node="1"] { transition-delay:   0ms; }
[data-schematic][data-armed].is-drawn .sch-node[data-node="2"] { transition-delay: 140ms; }
[data-schematic][data-armed].is-drawn .sch-node[data-node="3"] { transition-delay: 280ms; }
[data-schematic][data-armed].is-drawn .sch-node[data-node="4"] { transition-delay: 420ms; }
[data-schematic][data-armed].is-drawn .sch-node[data-node="5"] { transition-delay: 560ms; }

@media (prefers-reduced-motion: reduce) {
  [data-schematic][data-armed] .sch-node { opacity: 1; transition: none; }
  .sch-flow__pulse { display: none; }
}

/* ══ Общие блоки страниц ══════════════════════════════════════════════════ */
.sect-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-md);
  margin-block-end: var(--space-lg);
}

.quantities { max-width: 52rem; margin-block-start: var(--space-lg); }
.quantities td.spec__value { color: var(--color-ink-2); }
.measured-note { margin-block-start: var(--space-lg); }

/* ══ Состав комплекса — список, а не три одинаковые колонки ══════════════ */
.parts { list-style: none; margin: 0; padding: 0; display: grid; }
.parts__item { border-block-start: var(--rule-hair) solid var(--color-rule-2); }
.parts__item:last-child { border-block-end: var(--rule-hair) solid var(--color-rule-2); }

.parts__link {
  display: grid;
  gap: var(--space-2xs);
  padding-block: var(--space-md);
  color: var(--color-ink);
  transition: background-color var(--dur-short) var(--ease-out);
}
.parts__link:hover { background: var(--color-paper-2); }
.parts__code { color: var(--color-accent); }
.parts__name { font-family: var(--font-display); font-size: var(--text-lg); font-weight: var(--weight-display-bold); }
.parts__purpose { font-size: var(--text-sm); color: var(--color-muted); }

@media (min-width: 60rem) {
  .parts__link {
    grid-template-columns: 7rem minmax(0, 16rem) minmax(0, 1fr);
    align-items: baseline;
    gap: var(--space-lg);
    padding-inline: var(--space-sm);
  }
}

/* ══ Призыв к действию ════════════════════════════════════════════════════ */
.fund-cta { display: grid; gap: var(--space-lg); align-items: center; }
@media (min-width: 60rem) {
  .fund-cta { grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-2xl); }
}

/* ══ Каталог ══════════════════════════════════════════════════════════════ */
.catalog-group { margin-block-end: var(--space-2xl); }
.catalog-group__head { margin-block-end: var(--space-md); }
.catalog-group__desc { color: var(--color-muted); font-size: var(--text-sm); max-width: var(--measure); }

.cards {
  list-style: none; margin: var(--space-lg) 0 0; padding: 0;
  display: grid; gap: var(--space-md);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}

/* ══ Карточка изделия ═════════════════════════════════════════════════════ */
.product { display: grid; gap: var(--space-2xl); }
@media (min-width: 64rem) {
  .product { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); }
}
.product__price {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--color-accent);
}
.product__price-note { font-size: var(--text-xs); color: var(--color-muted); }
.product__list { margin: 0; padding-inline-start: var(--space-md); color: var(--color-ink-2); font-size: var(--text-sm); }
.product__list li { margin-block-end: var(--space-2xs); }

/* ══ Применение — диптих, направление чередуется ═════════════════════════ */
.split { display: grid; gap: var(--space-lg); padding-block: var(--space-xl);
         border-block-start: var(--rule-hair) solid var(--color-rule-2); }
@media (min-width: 60rem) {
  .split { grid-template-columns: minmax(0, 0.45fr) minmax(0, 0.55fr); gap: var(--space-2xl); }
  .split:nth-child(even) .split__text { order: 2; }
}
.split__what { color: var(--color-muted); font-size: var(--text-sm); }

/* ══ Стадии работы ════════════════════════════════════════════════════════ */
.stages { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-xl); }
.stage { display: grid; gap: var(--space-sm); padding-block-start: var(--space-lg);
         border-block-start: var(--rule-hair) solid var(--color-rule-2); }
.stage__idx { font-family: var(--font-mono); font-size: var(--text-sm); font-weight: 700;
              color: var(--color-accent); font-variant-numeric: tabular-nums; }
@media (min-width: 60rem) {
  .stage { grid-template-columns: 4rem minmax(0, 1fr); gap: var(--space-xl); align-items: start; }
}

/* ══ Новости ══════════════════════════════════════════════════════════════ */
.news { list-style: none; margin: 0; padding: 0; display: grid; }
.news__item { border-block-start: var(--rule-hair) solid var(--color-rule-2); }
.news__item:last-child { border-block-end: var(--rule-hair) solid var(--color-rule-2); }
.news__link { display: grid; gap: var(--space-2xs); padding-block: var(--space-lg); color: var(--color-ink);
              transition: background-color var(--dur-short) var(--ease-out); }
.news__link:hover { background: var(--color-paper-2); }
.news__date { font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--color-muted);
              font-variant-numeric: tabular-nums; letter-spacing: var(--tracking-label); }
.news__title { font-family: var(--font-display); font-size: var(--text-xl); font-weight: var(--weight-display-bold); }
.news__lead { font-size: var(--text-sm); color: var(--color-ink-2); max-width: var(--measure); }
@media (min-width: 60rem) {
  .news__link { grid-template-columns: 8rem minmax(0, 1fr); gap: var(--space-xl); padding-inline: var(--space-sm); }
  .news__date { grid-row: span 2; }
}

.article { max-width: 44rem; }
.article__body p { margin-block-end: var(--space-md); color: var(--color-ink-2); }

/* ══ О компании ═══════════════════════════════════════════════════════════ */
.facts { list-style: none; margin: var(--space-xl) 0 0; padding: 0;
         display: grid; gap: var(--space-lg);
         grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }
.facts__item { display: grid; gap: var(--space-2xs); padding-block-start: var(--space-sm);
               border-block-start: 2px solid var(--color-rule); }
.facts__val { font-family: var(--font-mono); font-size: var(--text-lg); font-weight: 700;
              color: var(--color-ink); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.facts__key { font-size: var(--text-xs); color: var(--color-muted); }

/* ══ Контакты ═════════════════════════════════════════════════════════════ */
/* align-items: start — колонки не растягиваются под самую высокую */
.contacts { display: grid; gap: var(--space-2xl); align-items: start; }
@media (min-width: 64rem) {
  .contacts { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-3xl); }
}