/* ==========================================================================
   MASTER HERO COMPONENT - v2
   ========================================================================== */

/* Общ контейнер за всички типове Hero снимки */
.hero,
.category-hero {
    position: relative;
    overflow: hidden;
    width: 100%;
}

/* --- ВАРИАНТ 1: Начална страница (Home Hero) --- */
.hero {
    height: var(--hero-height-home); /* 60vh */
    max-height: var(--hero-max-height);
}

/* --- ВАРИАНТ 2: Категории (Category Hero) --- */
.category-hero {
    height: var(--hero-height-category); /* Тук влизат твоите 460px */
}

/* Медия (Видео или Снимка) */
.hero-video,
.hero-image,
.category-hero img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

/* Overlay слой (Тъмната пелена) */
.hero::after,
.category-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--hero-overlay-bg);
    z-index: 1;
}

/* Контейнер за текста върху снимката */
.hero-overlay {
    position: relative;
    z-index: 2;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: var(--hero-text-color);
    padding: 0 20px;
}

.hero-overlay h1 {
    font-size: 64px;
    font-weight: 300;
    letter-spacing: 3px;
    margin-bottom: 20px;
    font-family: var(--font-serif);
}

/* Адаптивност */
@media (max-width: 768px) {
    .category-hero { height: 300px; }
    .hero-overlay h1 { font-size: 36px; }
}

/* Hero Adaptive Fix */
@media (max-width: 1024px) {
    .hero {
        height: 50vh; /* Малко по-нисък на таблети/телефони */
    }

    .hero-overlay h1 {
        /* Намаляваме шрифта прогресивно */
        font-size: clamp(28px, 8vw, 42px);
        line-height: 1.2;
        letter-spacing: 1px; /* Намаляваме разстоянието между буквите */
        word-wrap: break-word; /* Ако думата е много дълга, да се пренесе */
        width: 100%;
        max-width: 90vw; /* За всеки случай да не излиза от вюпорта */
    }
}

@media (max-width: 480px) {
    .category-hero {
        height: 250px; /* Още по-компактно за малки телефони */
    }

    .hero-overlay {
        padding: 0 15px;
    }
}