/* ============================================================
   HERO ВИДЕО СЛАЙДЕР  (includes/hero-slider.php + assets/js/hero-slider.js)
   ============================================================ */

.hero.hero-slider {
    isolation: isolate;          /* z-index-ите по-долу остават вътре в секцията */
}
.hero.hero-slider::before {
    background: none !important;
}

/* --- Видеата ------------------------------------------------ */
.hero-slider__stage {
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: hidden;
}

.hero-slider__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center bottom;
    opacity: 0;
    transition: opacity var(--hero-fade, 700ms) ease;
    pointer-events: none;
}

.hero-slider__video.is-active {
    opacity: 1;
}



/* --- Текстове ----------------------------------------------- */
.hero-slider__captions {
    position: relative;
    z-index: 3;
    display: grid;               /* всички текстове стоят един върху друг */
    width: 100%;
    padding-inline: 1.5rem;
    pointer-events: none;
}
.hero-slider__caption {
    grid-area: 1 / 1;
    opacity: 0;
    visibility: hidden;
    transform: translateY(14px);
    transition: opacity .6s ease, transform .6s ease, visibility 0s linear .6s;
}
.hero-slider__caption.is-active {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity .6s ease .2s, transform .6s ease .2s, visibility 0s linear 0s;
}
.hero-slider__caption a,
.hero-slider__caption button {
    pointer-events: auto;
}

/* --- Стрелки ------------------------------------------------ */
.hero-slider__arrow {
    position: absolute;
    top: 50%;
    z-index: 4;
    width: 33px;
    height: 33px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, .6);
    background: rgba(0, 0, 0, .1);
    -webkit-backdrop-filter: blur(1px);
    backdrop-filter: blur(1px);
    color: #fff;
    cursor: pointer;
    transform: translateY(-50%);
    transition: background-color .25s ease, border-color .25s ease, color .25s ease, transform .25s ease;
}
.hero-slider__arrow--prev { left: clamp(10px, 2.5vw, 40px); }
.hero-slider__arrow--next { right: clamp(10px, 2.5vw, 40px); }

.hero-slider__arrow svg {
    width: 22px;
    height: 22px;
}
.hero-slider__arrow:hover {
    background: var(--color-deep-yellow, #D2BC5D);
    border-color: var(--color-deep-yellow, #D2BC5D);
}
.hero-slider__arrow--prev:hover { transform: translateY(-50%) translateX(-2px); }
.hero-slider__arrow--next:hover { transform: translateY(-50%) translateX(2px); }
.hero-slider__arrow:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
}

/* --- Индикатори (точки) ------------------------------------- */

.hero-slider__dots {
    position: absolute;
    left: 50%;
    bottom: 1.5rem;
    z-index: 4;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transform: translateX(-50%);
}
.hero-slider__dot {
    position: relative;
    width: 10px;
    height: 10px;
    padding: 0;
    border: none;
    border-radius: 999px;
    background-color: #E0E0E0;
    cursor: pointer;
    transition: width 0.2s ease, background-color 0.2s ease;
	/*box-shadow: 0 0 4px rgba(0, 0, 0, .35);*/
}
.hero-slider__dot.is-active {
    width: 56px;
    background-color: var(--color-deep-yellow, #D2BC5D);
}

.hero-slider__dot:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 4px;
}

.hero-slider__dot::before {       
    content: "";
    position: absolute;
    inset: -10px -4px;
}

/* с тирета
.hero-slider__dots {
    position: absolute;
    left: 50%;
    bottom: 1.5rem;
    z-index: 4;
    display: flex;
    gap: 10px;
    transform: translateX(-50%);
}
.hero-slider__dot {
    position: relative;
    width: 28px;
    height: 4px;
    padding: 0;
    border: 0;
    border-radius: 2px;
    background: rgba(255, 255, 255, .55);
    cursor: pointer;
    transition: width .3s ease, background-color .3s ease;
}

.hero-slider__dot.is-active {
    width: 56px;
    background: var(--color-deep-yellow, #D2BC5D);
}
.hero-slider__dot:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 4px;
}

.hero-slider__dot::before {       
    content: "";
    position: absolute;
    inset: -10px -4px;
}
*/

/* --- Мобилни: цялото видео се вижда, без изрязване ---------- */
@media (max-width: 800px) {
    .hero.hero-slider {
        display: block;
        min-height: 0;
        height: auto;
        padding-top: 0;
        padding-bottom: 0;
    }
    .hero-slider__stage {
        position: relative;
        inset: auto;
        width: 100%;
        aspect-ratio: var(--hero-ratio, 16 / 9);   /* JS го сверява с размера на текущия клип */
    }
    .hero-slider__captions {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        padding: .3rem 1.5rem 0;
    }
    .hero-slider__caption .hero__title {
        font-size: 1rem !important;
        line-height: 1 !important;
        margin: 6px !important;
        padding: 0 !important;
    }
    .hero-slider__caption .hero__subtitle {
        font-size: .8rem !important;
        line-height: 1 !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    .hero-slider__arrow {
        width: 34px;
        height: 34px;
    }
    .hero-slider__arrow svg {
        width: 16px;
        height: 16px;
    }
	
	/*** с точки ***/
	.hero-slider__dots {
        bottom: .5rem;
        gap: 0.4rem;
    }
    .hero-slider__dot           { width: 8px; height: 8px; /*box-shadow: 0 0 4px rgba(0, 0, 0, .35); */ }
    .hero-slider__dot.is-active { width: 36px; }
	
	/*** с тирета
    .hero-slider__dots {
        bottom: .5rem;
        gap: 6px;
    }
    .hero-slider__dot         { width: 16px; height: 3px; }
    .hero-slider__dot.is-active { width: 32px; }
	*/
}

/* --- Потребители с изключени анимации ----------------------- */
@media (prefers-reduced-motion: reduce) {
    .hero-slider__video,
    .hero-slider__caption,
    .hero-slider__arrow,
    .hero-slider__dot {
        transition: none !important;
    }
}


/* --- Бутон например „Виж“ в текста на клипа ------------------------- */
.hero-slider__btn {
    display: inline-flex;
    align-items: center;
    gap: .35em;
    margin-left: .5em;
    padding: .5em 1.1em;
    vertical-align: middle;
    font-size: 15px;                 /* фиксиран размер – не зависи от голямото заглавие */
    font-weight: 500;
    line-height: 1;
    letter-spacing: .04em;
    text-transform: none;
    text-decoration: none;
    white-space: nowrap;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 1); /* .7 = 0.7 */
    border-radius: 999px;
    background: rgba(255, 255, 255, .5);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    pointer-events: auto;
    transition: background-color .25s ease, border-color .25s ease, color .25s ease;
	text-shadow: 0 2px 12px rgba(0, 0, 0, .45);
}
.hero-slider__btn svg {
    width: 1em;
    height: 1em;
    transition: transform .25s ease;
}
.hero-slider__btn:hover,
.hero-slider__btn:focus-visible {
    color: #000;
    background: var(--color-deep-yellow, #D2BC5D);
    border-color: var(--color-deep-yellow, #D2BC5D);
    text-decoration: none;
}
.hero-slider__btn:hover svg { transform: translateX(3px); }
.hero-slider__btn:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
}
.hero-slider__actions {
    margin-top: 1rem;
}
.hero-slider__actions .hero-slider__btn {
    margin-left: 0;
}

@media (max-width: 800px) {
    .hero-slider__btn {
        font-size: 11px;
        padding: .45em .9em;
        margin-left: .4em;
    }
    .hero-slider__actions {
        margin-top: .4rem;
    }
}

/* --- Размер на текстовете в слайдера ---------------------- */
.hero-slider__caption .hero__title {
    font-size: clamp(24px, 4vw, 54px);   /* беше clamp(30px, 8vw, 75px) */
	color: #FFFFFF; /* #D2BC5D; фирменото жълто */
	text-shadow: 0 2px 12px rgba(0, 0, 0, .45);
}
.hero-slider__caption .hero__subtitle {
    font-size: 23px;                     /* беше 19px */
	 color: #FFFFFF;          /* #f2f2f2 леко сиво-бяло */
	 text-shadow: 0 2px 12px rgba(0, 0, 0, .45); /* за по-добра четимост върху светли кадри */

}