/* Шапка внутренней страницы с артом на всю ширину (_partials/page-hero.php, опция 'art').
   24.10.2026 — пилот посадочной /play/ogame-alternative: с первого экрана видно, что это игра про космос.
   Компактная шапка без арта не меняется: всё ниже действует только при .xh-page-hero--art. */

.xh-page-hero--art {
  position: relative;
  max-width: none;
  min-height: min(620px, 78vh);
  display: flex;
  align-items: center;
  padding: 64px var(--xh-container-pad, 24px) 72px;
  text-align: left;
  overflow: hidden;
  isolation: isolate;
}

/* Арт заходит под хлебные крошки до самой шапки сайта (владелец 24.10: «не залазят под хлебные крошки»):
   крошки (28px отступ + 46px высота + 14px) стоят в main над секцией — поднимаем секцию на их высоту. */
main:has(> .xh-breadcrumbs):has(> .xh-page-hero--art) > .xh-breadcrumbs { position: relative; z-index: 2; }
main:has(> .xh-breadcrumbs):has(> .xh-page-hero--art) > .xh-page-hero--art { margin-top: -88px; padding-top: calc(64px + 88px); min-height: calc(min(620px, 78vh) + 88px); }

.xh-page-hero--art .xh-page-hero-icon { display: none; } /* на арте значок лишний: тему задаёт картинка */

.xh-page-hero-art {
  position: absolute;
  inset: 0;
  z-index: -1;
}
.xh-page-hero-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 72% 45%;
}
/* Затемнение слева под текст и плавный уход в фон страницы снизу. */
.xh-page-hero-art::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, var(--xh-bg-deep) 0%, color-mix(in srgb, var(--xh-bg-deep) 0%, transparent) 16%),
    linear-gradient(90deg, var(--xh-bg-deep) 0%, color-mix(in srgb, var(--xh-bg-deep) 88%, transparent) 32%, color-mix(in srgb, var(--xh-bg-deep) 35%, transparent) 62%, color-mix(in srgb, var(--xh-bg-deep) 5%, transparent) 100%),
    linear-gradient(180deg, color-mix(in srgb, var(--xh-bg-deep) 0%, transparent) 60%, var(--xh-bg-deep) 100%);
}

.xh-page-hero--art .xh-page-hero-inner {
  max-width: 1180px;
  width: 100%;
  align-items: flex-start;
}
.xh-page-hero--art .xh-page-hero-title {
  max-width: 640px;
  text-shadow: 0 2px 24px rgba(0, 0, 0, .55);
}
.xh-page-hero--art .xh-page-hero-subtitle {
  max-width: 560px;
  color: var(--xh-text);
  opacity: .88;
}
.xh-page-hero--art .xh-page-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.xh-page-hero--art .xh-btn--outline {
  background: color-mix(in srgb, var(--xh-bg-deep) 45%, transparent);
  backdrop-filter: blur(4px);
}

/* Телефон: арт сверху на весь экран, текст по центру на затемнении снизу. */
@media (max-width: 767px) {
  .xh-page-hero--art {
    min-height: 0;
    padding: 220px 16px 40px;
    text-align: center;
  }
  main:has(> .xh-breadcrumbs):has(> .xh-page-hero--art) > .xh-page-hero--art { padding-top: calc(220px + 88px); min-height: 0; }
  .xh-page-hero-art img { object-position: 78% 30%; }
  .xh-page-hero-art::after {
    background: linear-gradient(180deg, var(--xh-bg-deep) 0%, color-mix(in srgb, var(--xh-bg-deep) 10%, transparent) 12%, color-mix(in srgb, var(--xh-bg-deep) 55%, transparent) 32%, var(--xh-bg-deep) 62%);
  }
  .xh-page-hero--art .xh-page-hero-inner { align-items: center; }
  /* Надпись над заголовком ложится на свечение планеты — своя подложка для контраста 4.5:1. */
  .xh-page-hero--art .xh-page-hero-eyebrow { background: color-mix(in srgb, var(--xh-bg-deep) 80%, transparent); }
  .xh-page-hero--art .xh-page-hero-actions { justify-content: center; }
  .xh-page-hero--art .xh-page-hero-actions .xh-btn { flex: 1 1 100%; justify-content: center; }
}