/* ==========================================================
   #hero — секция первого экрана (Pavel-Avto, v2025-10)
   СКОУП: только внутри #hero
   Политика: планшет 60/40, десктоп 7/5 (от HTML col-lg-7/5),
             высота всегда auto; картинка и контент — центрированы.
   Токены: --paper-100/200/300, --terracotta/hover, --ink/ink-60,
           --radius, --shadow, --btnshadow, --header-h, --gap
   ========================================================== */

/* 0) Базовые страховки: высота секции всегда авто */
#hero,
#hero .container,
#hero .row.align-items-center {
  height: auto !important;
  min-height: 65vh !important;
  max-height: none !important;
}

/* 1) Вертикальные отступы секции (мобайл/планшет компактнее) */
#hero {
  /* на десктопе поведение «как было», мобильные правки ниже */
  background: var(--paper-100);
}
@media (max-width: 991.98px) {
  #hero {
    padding-block: clamp(18px, 5vh, 32px);
  }
}

/* 2) Текстовая колонка: мягкий отступ сверху для заголовка (мобайл/планшет) */
@media (min-width: 768px) and (max-width: 1199.98px) {
  #hero .hero-title {
    margin-top: clamp(8px, 2vh, 24px);
    font-size: clamp(1.9rem, 3.4vw, 2.4rem);
    line-height: 1.15;
  }
  #hero .hero-highlight { font-size: clamp(1rem, 1.8vw, 1.15rem); }
  #hero .hero-subtitle  { font-size: clamp(.95rem, 1.6vw, 1.05rem); letter-spacing:.02em; }
  #hero .hero-lead      { font-size: clamp(.95rem, 1.7vw, 1.05rem); }
}

@media (max-width: 991.98px) {
  #hero .hero-title {
    margin-top: clamp(10px, 3vh, 28px);
    font-size: clamp(1.6rem, 6vw, 2rem);
    line-height: 1.12;
    letter-spacing: .01em;
  }
  #hero .hero-highlight { font-size: clamp(.95rem, 3.2vw, 1.05rem); margin-bottom: .35rem !important; }
  #hero .hero-subtitle  { font-size: clamp(.9rem, 3vw, 1rem);      margin-bottom: .9rem !important; }
  #hero .hero-lead      { font-size: clamp(.95rem, 3.2vw, 1.05rem); margin-bottom: 1rem !important; }
}

/* 3) Кнопка CTA — компактнее на мобайле/планшете */
@media (min-width: 768px) and (max-width: 1199.98px) {
  #hero .cta-btn {
    font-size: 1rem;
    padding: .65rem 1rem;
    line-height: 1.15;
    border-radius: 999px;
    box-shadow: var(--btnshadow);
  }
}
@media (max-width: 991.98px) {
  #hero .cta-btn {
    font-size: .95rem;
    padding: .6rem .9rem;
    border-radius: 999px;
    box-shadow: var(--btnshadow);
  }
}

/* 4) Изображение: центрирование во всех состояниях + уменьшение на моб/таб */
#hero .col-12.col-lg-5 {
  display: flex;
  justify-content: center;   /* по центру по горизонтали */
  align-items: center;       /* по центру по вертикали */
}
#hero .hero-image {
  display: grid;
  place-items: center;       /* резервное центрирование содержимого */
}
#hero .hero-image img {
  display: block;
  height: auto;
  margin-inline: auto;       /* центрируем сам <img> */
  border-radius: 16px;       /* согласовано с --radius по стилю бренда */
  box-shadow: var(--shadow);
  object-fit: contain;
}

@media (min-width: 768px) and (max-width: 1199.98px) {
  #hero .hero-image img { max-width: 88%; }
}
@media (max-width: 991.98px) {
  #hero .hero-image img { max-width: 82%; }
}

/* 5) Планшет 60/40 без правки HTML (универсальный паттерн проекта) */
@media (min-width: 768px) and (max-width: 1199.98px) {
  #hero .row > .col-12.col-lg-7 { flex: 0 0 60%; max-width: 60%; }
  #hero .row > .col-12.col-lg-5 { flex: 0 0 40%; max-width: 40%; }
}

/* 6) Якоря: единый оффсет под фикс-хедер (синхронизировано с header.js) */
#hero[ id ] { scroll-margin-top: calc(var(--header-h) + 14px); }




@media (min-width: 1200px){
  #hero .hero-title{
    font-size: clamp(2.6rem, 3vw, 3.2rem);  /* крупнее на десктопе */
    line-height: 1.06;
    font-weight: 900;
    letter-spacing: .01em;
  }
}