/* ccu_for_home.css — page-specific styles */

/* ===== ccu_gate.html only: restore index.html's photo-overlap hero layout,
   overriding kit-configurator.css's shared slider-style .hero__inner override.
   Scoped to .hero--photo-overlap so it doesn't leak into the other pages
   (ccu_for_home.html, ccu_radio.html, ccu_termo.html) that also load this
   file but keep the old hero__text/hero__bottom slider layout. ===== */
@media (min-width: 900px) {
  .hero--photo-overlap .hero__inner {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    position: relative;
    min-height: 440px;
    gap: 0;
  }
}

/* ===== Kit Section ===== */
.kit-section {
  background: var(--color-primary);
  padding-block: var(--space-xl);
  scroll-margin-top: var(--header-h);
}

.kit-section__header {
  display: flex;
  align-items: center;
  gap: var(--space-xl);
  margin-block: var(--space-lg);
}

.kit-section__composition {
  flex: 1;
}

.kit-section__composition-title {
  font-family: var(--font-heading);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
  margin-bottom: var(--space-sm);
}

ul + .kit-section__composition-title {
  margin-top: var(--space-md);
}

.kit-section__image-wrap {
  flex: 0 0 auto;
}

.kit-section__image-wrap .slider {
  width: 100%;
  max-width: 560px;
}

.enclosure-switcher {
  display: flex;
  gap: var(--space-sm);
  margin-top: var(--space-md);
  flex-wrap: wrap;
}

.kit-section__image-wrap img {
  max-width: 560px;
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-card);
  background: #fff;
}

.kit-section__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}

/* ===== Kit Tile ===== */
.kit-tile {
  background: var(--color-primary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-md) var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  transition: box-shadow var(--transition), border-color var(--transition);
}

.kit-tile:hover {
  border-color: var(--color-accent);
  box-shadow: var(--shadow-card-hover);
}

.kit-tile__stat {
  display: flex;
  align-items: baseline;
  gap: 0.4em;
  margin-bottom: var(--space-xs);
}

.kit-tile__stat-num {
  font-family: var(--font-heading);
  font-size: 2.75rem;
  font-weight: 700;
  color: var(--color-accent);
  line-height: 1;
  letter-spacing: -0.03em;
}

.kit-tile__stat-label {
  font-family: var(--font-heading);
  font-size: var(--font-size-xl);
  font-weight: 600;
  color: var(--color-text);
  line-height: 1.2;
}

.kit-tile__title {
  font-family: var(--font-heading);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
  line-height: 1.25;
}

.kit-tile__desc {
  font-size: var(--font-size-base);
  color: var(--color-text-muted);
}

/* ===== Responsive ===== */
@media (max-width: 719px) {
  .kit-section__header {
    flex-direction: column;
  }

  /* sensors-slider (ccu_radio.html) и rtd-slider (ccu_termo.html): текст
     названия/описания датчика меняется при свайпе, и его высота заметно
     различается между датчиками — в колоночной раскладке текст стоит
     первым, поэтому смена высоты дёргает слайдер под пальцем. Ставим
     картинку первой, чтобы её позиция не зависела от высоты текста.
     На баг со свайпом на iOS Safari это не повлияло (причина оказалась
     в другом, см. kit-configurator.js), но само по себе разместить
     картинку сначала, а описание под ней — лучше, поэтому оставлено. */
  .kit-section__header--media-first .kit-section__image-wrap {
    order: -1;
  }
}

@media (min-width: 480px) {
  .kit-section__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 900px) {
  .kit-section__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.kit-section__cta {
  margin-top: var(--space-lg);
  text-align: center;
}

/* ===== Kit vs base-controller comparison table ===== */
.spec-table__col--highlight {
  background: var(--color-accent-light);
}

.spec-table thead th.spec-table__col--highlight {
  color: var(--color-accent-dark);
}

.mark { font-weight: var(--font-weight-bold); }
.mark--yes { color: var(--color-accent); }
.mark--no { color: var(--color-text-muted); }

/* ===== Contact section bg override (main uses primary, kit pages use surface) ===== */
.contact { background: var(--color-surface); }

.contact__info { background: var(--color-primary); }