/* =========================================================
   Jetigen — этно-фон (etno_bg.css)
   Добавляет кыргызские этно-орнаменты как фон body
   и hero-секции на ключевых страницах.
   Подключается в base.html после site_modern.css.
   ========================================================= */

/* ---------- ОСНОВНОЙ BODY-ФОН ---------- */
/* Поверх тёмной темы site_modern.css кладём войлочный орнамент
   (etno6.jpg — тёмный с красным узором) через очень низкую opacity,
   чтобы не перебивать читаемость и звёздный эффект. */
body {
    background-image:
        radial-gradient(ellipse 80% 60% at 50% 0%, rgba(212, 175, 55, 0.06) 0%, transparent 60%),
        linear-gradient(180deg, rgba(11, 18, 32, 0.88) 0%, rgba(17, 26, 46, 0.92) 100%),
        url('../img/etno6.jpg') !important;
    background-size: auto, auto, cover !important;
    background-position: center top, center, center !important;
    background-repeat: no-repeat, no-repeat, no-repeat !important;
    background-attachment: scroll, scroll, fixed !important;
}

/* На мобилках background-attachment: fixed лагает — переключаем на scroll */
@media (max-width: 768px) {
    body {
        background-attachment: scroll, scroll, scroll !important;
    }
}

/* ---------- ЗВЁЗДНЫЙ СЛОЙ: поверх этно-фона ---------- */
/* body::before и body::after из site_modern.css продолжают работать —
   они через z-index: 0 / pointer-events: none накладываются поверх фона. */

/* ---------- HERO-БАННЕРЫ ДЛЯ РАЗДЕЛОВ ---------- */
/* Общая структура: .etno-page-hero — полноширинная секция с фоном,
   высотой ~240px, тёмным overlay и заголовком страницы. */
.etno-page-hero {
    position: relative;
    width: 100%;
    min-height: 200px;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    margin-bottom: 32px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.etno-page-hero__bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: transform 8s ease;
    will-change: transform;
}

.etno-page-hero:hover .etno-page-hero__bg {
    transform: scale(1.04);
}

/* Тёмный gradient-overlay — снизу вверх, чтобы заголовок читался */
.etno-page-hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(5, 9, 18, 0.90) 0%,
        rgba(5, 9, 18, 0.55) 50%,
        rgba(5, 9, 18, 0.25) 100%
    );
    z-index: 1;
}

.etno-page-hero__content {
    position: relative;
    z-index: 2;
    padding: 28px 24px 24px;
    width: 100%;
}

.etno-page-hero__title {
    color: #fff;
    font-family: 'Ubuntu Condensed', 'Istok Web', sans-serif;
    font-size: clamp(1.4rem, 4vw, 2.4rem);
    font-weight: 700;
    letter-spacing: -0.01em;
    text-shadow: 0 2px 24px rgba(0, 0, 0, 0.8);
    margin: 0;
    line-height: 1.2;
}

.etno-page-hero__sub {
    color: rgba(230, 210, 150, 0.85);
    font-size: 0.9rem;
    margin-top: 6px;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.7);
}

/* Орнаментальная полоска снизу hero */
.etno-page-hero__border {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(212, 175, 55, 0.6) 20%,
        rgba(212, 175, 55, 0.9) 50%,
        rgba(212, 175, 55, 0.6) 80%,
        transparent 100%
    );
    z-index: 3;
}

/* ---------- ФОНЫ ДЛЯ КОНКРЕТНЫХ HERO-СЕКЦИЙ ---------- */

/* Тарых (история) — etno5.jpg: интерьер юрты, тёплые тона */
.etno-hero--history .etno-page-hero__bg {
    background-image: url('../img/etno5.jpg');
}

/* Санжыра / дерево — etno2.jpg: тундук с лучами рассвета */
.etno-hero--sanjyra .etno-page-hero__bg {
    background-image: url('../img/etno2.jpg');
    background-position: center top;
}

/* Инсандар — etno3.jpg: галерея ковров, глубина */
.etno-hero--people .etno-page-hero__bg {
    background-image: url('../img/etno3.jpg');
}

/* Галерея фото — etno9.jpg: шырдак, геометрия узоров */
.etno-hero--gallery .etno-page-hero__bg {
    background-image: url('../img/etno9.jpg');
}

/* Видео — etno4.jpg: интерьер юрты с предметами быта */
.etno-hero--video .etno-page-hero__bg {
    background-image: url('../img/etno4.jpg');
}

/* Жетиген-разделы (jetigen, kyrgyz, sayak, kushchu, ozduk) — etno12.jpg: купол юрты */
.etno-hero--jetigen .etno-page-hero__bg {
    background-image: url('../img/etno12.jpg');
    background-position: center 30%;
}

/* Жаңылыктар (блоги) — etno1.jpg: синий ковёр с красным орнаментом */
.etno-hero--blogs .etno-page-hero__bg {
    background-image: url('../img/etno1.jpg');
    background-position: center 40%;
}

/* О нас — etno10.jpg: шырдак, множество лоскутов */
.etno-hero--about .etno-page-hero__bg {
    background-image: url('../img/etno10.jpg');
}

/* Поиск — etno13.jpg: ковры в тёмном зале */
.etno-hero--search .etno-page-hero__bg {
    background-image: url('../img/etno13.jpg');
}

/* ---------- АДАПТИВ ---------- */
@media (max-width: 576px) {
    .etno-page-hero {
        min-height: 140px;
        margin-bottom: 20px;
    }
    .etno-page-hero__content {
        padding: 20px 16px 16px;
    }
}

@media (min-width: 1280px) {
    .etno-page-hero {
        min-height: 260px;
    }
}

/* ---------- BREADCRUMB ПОВЕРХ HERO ---------- */
/* Перемещаем breadcrumb внутрь hero, если он идёт сразу после */
.etno-page-hero + .container-fluid .breadcrumb,
.etno-page-hero + .container .breadcrumb {
    margin-top: -12px;
}

/* ---------- ДЕКОРАТИВНАЯ РАЗДЕЛИТЕЛЬНАЯ ПОЛОСА ---------- */
/* Горизонтальный орнамент-разделитель между секциями */
.etno-divider {
    width: 100%;
    height: 3px;
    background: repeating-linear-gradient(
        90deg,
        rgba(212, 175, 55, 0.0) 0px,
        rgba(212, 175, 55, 0.0) 6px,
        rgba(212, 175, 55, 0.55) 6px,
        rgba(212, 175, 55, 0.55) 12px
    );
    margin: 32px 0;
    border: none;
    opacity: 0.6;
}

/* ---------- LIST-GROUP ТЕМАТИЧЕСКИЙ СТИЛЬ ---------- */
/* Страницы истории, jetigen используют list-group-item-light —
   переопределяем под тёмную тему */
.list-group-item-light {
    background: rgba(255, 255, 255, 0.04) !important;
    color: #e9edf5 !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    transition: background .25s ease, color .25s ease, border-color .25s ease;
}
.list-group-item-action:hover.list-group-item-light,
.list-group-item-action:focus.list-group-item-light {
    background: rgba(212, 175, 55, 0.12) !important;
    color: #ffd76b !important;
    border-color: rgba(212, 175, 55, 0.3) !important;
}

/* ---------- SCROLL HINT (polyfill для reduced-motion) ---------- */
@media (prefers-reduced-motion: reduce) {
    .etno-page-hero:hover .etno-page-hero__bg {
        transform: none;
    }
}

/* =========================================================
   ХЕДЕР (navbar) — этно-фон etno14.jpg
   Синий с красным орнамент. Overlay 0.72 с тёмно-синим
   оттенком сохраняет читаемость белых ссылок и золотых
   акцентов. Sticky и backdrop-filter сохраняются.
   ========================================================= */

/* Псевдоэлемент создаёт фоновый слой позади содержимого navbar.
   position:relative уже задан bootstrap/.sticky-top — добавляем
   z-index на сам navbar чтобы фон не вылез под выпадающие меню. */
.navbar.sticky-top {
    background-image:
        linear-gradient(
            180deg,
            rgba(5, 9, 22, 0.72) 0%,
            rgba(8, 14, 30, 0.75) 100%
        ),
        url('../img/etno14.jpg') !important;
    background-size: auto, cover !important;
    background-position: center, center !important;
    background-repeat: repeat, no-repeat !important;
    /* Сохраняем значение из navbar_modern.css: rgba(5,9,18,0.92) перекрывается */
    background-color: transparent !important;
}

/* Раскрытая мобильная панель — собственный фон, этно не нужен
   (Bootstrap collapse создаёт отдельный блок с фоном из navbar_modern.css) */
@media (max-width: 768px) {
    .navbar .navbar-collapse {
        /* Переопределяем только background-image — оставляем тёмный glass без этно */
        background-image: none !important;
    }
}

/* =========================================================
   ФУТЕР — этно-фон etno15.jpg
   Красно-чёрный с золотым орнаментом. Overlay тёмно-коричневый
   0.70 — теплее синего хедера, подчёркивает золотые ссылки.
   ========================================================= */
.footer {
    background-image:
        linear-gradient(
            180deg,
            rgba(10, 5, 3, 0.70) 0%,
            rgba(6, 3, 2, 0.78) 100%
        ),
        url('../img/etno15.jpg') !important;
    background-size: auto, cover !important;
    background-position: center, center !important;
    background-repeat: repeat, no-repeat !important;
    background-color: transparent !important;
}

/* Адаптив футера: на мобилках background-attachment:fixed лагает,
   но здесь scroll — уже ок. Дополнительно проверяем min-height. */
@media (max-width: 768px) {
    .footer {
        background-size: auto, 200% auto !important;
        background-position: center, center top !important;
    }
}

/* =========================================================
   ФУТЕР — кнопка статистики и подпись автора
   ========================================================= */
.footer .footer-row {
    row-gap: 0.5rem;
}

.footer .footer-copy {
    flex: 1 1 360px;
    min-width: 0;
}

.footer .footer-stats-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.35rem 0.55rem 0.35rem 0.95rem;
    border: 1px solid rgba(212, 175, 55, 0.55);
    border-radius: 999px;
    color: #f1e6c2;
    text-decoration: none;
    font-size: 0.92rem;
    line-height: 1.2;
    background: rgba(20, 12, 6, 0.55);
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.15s ease;
}

.footer .footer-stats-btn img {
    border-radius: 4px;
    box-shadow: 0 0 0 1px rgba(212, 175, 55, 0.25);
    background: #fff;
}

.footer .footer-stats-btn:hover,
.footer .footer-stats-btn:focus-visible {
    background: rgba(212, 175, 55, 0.18);
    border-color: rgba(212, 175, 55, 0.85);
    color: #fff5d1;
    transform: translateY(-1px);
    text-decoration: none;
    outline: none;
}

.footer .footer-stats-btn i {
    color: #d4af37;
    font-size: 1rem;
}

.footer .footer-credit {
    flex: 0 0 auto;
    font-size: 0.78rem;
    letter-spacing: 0.02em;
    color: rgba(241, 230, 194, 0.78);
    font-style: italic;
    white-space: nowrap;
}

.footer .footer-credit span {
    color: #d4af37;
    font-style: normal;
    font-weight: 500;
}

@media (max-width: 575.98px) {
    .footer .footer-row {
        justify-content: center !important;
        text-align: center;
    }
    .footer .footer-copy {
        flex-basis: 100%;
        text-align: center;
    }
    .footer .footer-credit {
        white-space: normal;
    }
}