/* ============================================================
   page-hero.css — крупное фото в шапке публичной страницы (единый стиль)
   ------------------------------------------------------------
   Подключается отдельным <link> из injectPageHero (build.js): часть страниц
   собирается без общего style.css, а шапка должна выглядеть одинаково везде.

   Требования владельца (2026-10-31):
     - сверху каждой публичной страницы крупное качественное фото;
     - на телефоне ничего не обрезается «некрасиво» (кадр 4:3, мягкое
       скругление, object-position задаётся на элементе из реестра);
     - никаких «прыжков»: высота и пропорции заданы до загрузки картинки.
   ============================================================ */

.page-hero {
    position: relative;
    width: 100%;
    /* НЕ шире исходника: картинка никогда не растягивается (нет «мыла»).
       Ширину задаёт реестр (page-heroes.js → --hero-w). */
    max-width: var(--hero-w, 1440px);
    margin: 0 auto;
    overflow: hidden;
    background: #0b1a2b;
    /* место под фото занято сразу — контент не прыгает при загрузке */
    aspect-ratio: 16 / 9;
    max-height: 460px;
    border-radius: 0 0 1.75rem 1.75rem;
}

.page-hero img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* лёгкая тёмная вуаль снизу — фото не «съедает» первый текстовый блок */
    filter: saturate(1.02);
}

.page-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(11, 26, 43, 0) 62%, rgba(11, 26, 43, 0.16) 100%);
}

/* Заглушка: фото нет — фирменный градиент AAG (navy + золото), без «дырки» */
.page-hero--plain {
    background:
        radial-gradient(120% 90% at 12% 0%, rgba(240, 208, 120, 0.35) 0%, rgba(240, 208, 120, 0) 55%),
        radial-gradient(90% 80% at 92% 12%, rgba(200, 160, 70, 0.22) 0%, rgba(200, 160, 70, 0) 60%),
        linear-gradient(135deg, #0d1f33 0%, #16324f 48%, #0b1a2b 100%);
}

.page-hero--plain::before {
    content: "";
    position: absolute;
    inset: 0;
    /* тонкая золотая «сетка-линия» вместо фотографии */
    background-image:
        linear-gradient(115deg, rgba(240, 208, 120, 0.18) 0 1px, transparent 1px 100%),
        linear-gradient(115deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 100%);
    background-size: 220px 220px, 90px 90px;
    opacity: 0.55;
}

@media (max-width: 640px) {
    .page-hero {
        /* на телефоне кадр ближе к 4:3 — люди и горизонт не режутся в полоску;
           ширина — по экрану, но не больше натуральной (--hero-w) */
        aspect-ratio: 4 / 3;
        max-height: 340px;
        max-width: 100%;
        border-radius: 0 0 1.25rem 1.25rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .page-hero img { filter: none; }
}