/* Арт раздела фоном шапки (24.10.2026): гайды, механики, подборки (_detail.php), словарь, калькуляторы.
   Разметка: шапка с классом xh-has-sec-art, первым ребёнком <div class="xh-sec-art" aria-hidden="true"><picture>…</picture></div>.
   Картинка видна справа, слева затемнение под текст, снизу уход в фон страницы. Арты — media/v2/img/kb-art/ (GPT, реализм). */
.xh-has-sec-art { position: relative; overflow: hidden; }
.xh-has-sec-art > :not(.xh-sec-art) { position: relative; z-index: 1; }
.xh-sec-art { position: absolute; inset: 0; z-index: 0; }
.xh-sec-art picture, .xh-sec-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 72% 40%; }
.xh-sec-art::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, var(--xh-bg-deep) 0%, color-mix(in srgb, var(--xh-bg-deep) 90%, transparent) 34%, color-mix(in srgb, var(--xh-bg-deep) 40%, transparent) 62%, color-mix(in srgb, var(--xh-bg-deep) 15%, transparent) 100%),
    linear-gradient(180deg, color-mix(in srgb, var(--xh-bg-deep) 30%, transparent) 0%, transparent 25%, transparent 70%, var(--xh-bg-deep) 100%);
}
@media (max-width: 767px) {
  .xh-sec-art img { object-position: 80% 30%; }
  .xh-sec-art::after { background: linear-gradient(180deg, color-mix(in srgb, var(--xh-bg-deep) 55%, transparent) 0%, color-mix(in srgb, var(--xh-bg-deep) 85%, transparent) 55%, var(--xh-bg-deep) 100%); }
}