/* Предмет в navy-hero страницы услуги.
   Разметка: include/uslugi/_hero-art.php (figure.cds-hart первым ребёнком контейнера текста hero).
   Карта страниц и картинок (SSOT): include/uslugi/_hero-art-map.php.
   Плейбук: docs/front/ILLUSTRATIONS/README.md, раздел «Hero услуги».

   Почему float, а не колонка сетки: у страниц около 35 разных hero со своими классами.
   Float не трогает их поток, текст и кнопки просто обтекают предмет на любой ширине.
   Картинки -dk перекрашены под ровный navy (--ds-ink), поэтому фото-фон hero под предметом гасится. */

/* Размер «по пропорции» (решение владельца 13.10.2026): высота 300 px, ширина = 300 x пропорция, не больше 560.
   Раньше ширина была жёстко 400 px, и широкий предмет (конвейер DevSecOps, 2,2:1) выходил высотой 183 px.
   --hart-ar ставит _hero-art.php из размеров картинки; без него 4:3. */
.cds-hart {
  float: right;
  width: min(560px, calc(300px * var(--hart-ar, 1.333)));
  /* --hart-dy / --hart-mb: посадка предмета по центру текста hero (решение владельца 13.10.2026, вариант B, карта 'dy'/'cut').
     margin-top опускает float, и текст честно его обтекает (transform не годится: наезжал на абзац под коробкой float).
     Отрицательный низ убирает прозрачное поле под подставкой, иначе float сужает ряд цифр под кнопками. */
  margin: var(--hart-dy, 0px) 0 var(--hart-mb, 16px) 40px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.cds-hart img {
  display: block;
  width: 100%;
  height: auto;
  /* мягкая тень под предметом (эффект e1, решение владельца 13.10.2026) */
  filter: drop-shadow(0 26px 30px rgba(2, 10, 38, .6));
}
/* контейнер держит float внутри себя */
:has(> .cds-hart) {
  display: flow-root;
}
/* hero во всю ширину (section > wrap > figure): фото -> ровный navy с бликом */
section:has(> * > .cds-hart) {
  background-image: radial-gradient(circle at 88% 12%, rgba(86, 188, 239, .22) 0, transparent 46%) !important;
}
section:has(> * > .cds-hart) > [class$="-hero-bg"] {
  display: none;
}

@media (max-width: 960px) {
  /* 4:3 остаётся 240x180, как было; широкие до 280 */
  .cds-hart { width: min(280px, calc(180px * var(--hart-ar, 1.333))); margin: 0 0 16px 24px; }
}
/* мобила: вариант B (решение владельца 12.10.2026), 132 px справа вверху, текст обтекает */
@media (max-width: 600px) {
  .cds-hart { width: 132px; margin: 0 -4px 8px 12px; }
  .cds-hart img { width: auto; max-width: 100%; max-height: 96px; filter: drop-shadow(0 10px 12px rgba(2, 10, 38, .55)); }
  /* надзаголовок DS (inline-flex, моно-капс) не влезает рядом с предметом и уводит весь текст под него:
     блоком он обтекает float, как обычный абзац */
  .cds-hart ~ .cds-eyebrow { display: block; }
  .cds-hart ~ .cds-eyebrow::before { display: inline-block; margin-right: var(--sp-2, 8px); vertical-align: middle; }
}

/* Светлый hero страниц ИТ на credos-ds.css (.cds-section .xx2-hero) -> navy, как у остальных услуг
   (решение владельца 12.10.2026: фон hero тёмный). Ставится классом cds-hero-navy на section. */
.cds-hero-navy {
  background-color: var(--ds-ink, #0a225e) !important;
  color: #fff;
}
.cds-hero-navy .cds-diamond-field { display: none; }
.cds-hero-navy .cds-eyebrow { color: var(--ds-cyan-light, #56bcef); }
.cds-hero-navy .cds-lead { color: rgba(255, 255, 255, .9) !important; }
/* .cds-section в селекторе: страницы красят a.cds-btn--outline в тёмный своим .xx2 a.cds-btn--outline (0,2,1) */
.cds-section.cds-hero-navy a.cds-btn--outline { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .45); }
.cds-section.cds-hero-navy a.cds-btn--outline:hover { color: #fff; border-color: #fff; }