/* ==========================================================
   hero.css — Hero Swiper (production)
   ========================================================== */

.jyl-hero{
    position:relative;display:flex;flex-direction:column;
    min-height:75.47vh;overflow:hidden;
}
@media(min-width:1198px){
    .jyl-hero{min-height:81.01vh;padding-top:var(--jyl-hdr-h-desk)}
}

/* -- Background swiper -- */
.jyl-hero-swiper--bg{
    position:absolute;inset:0;width:100%;height:100%;z-index:0;overflow:hidden;
}
.jyl-hero-swiper--bg .swiper-wrapper{height:100%}
.jyl-hero-swiper--bg .swiper-slide{height:100%}
.jyl-hero-slide__bg{position:relative;width:100%;height:100%;overflow:hidden}

/* -- Parallax wrap --
   Target: initial scale(1), GSAP scrubs to ~scale(1.05)+translateY(3-5%) */
.jyl-hero__parallax-wrap{
    position:absolute;inset:0;
    will-change:transform;
    transform:translateY(0%) scale(1) translateZ(0);
}

/* -- Image/Video -- */
.jyl-hero__parallax{
    position:absolute;top:0;left:0;right:0;bottom:0;width:100%;height:100%;
    object-fit:cover;
    transition-timing-function:var(--jyl-ease-sharp);
    transition-duration:var(--jyl-t1600);
}
@media(max-width:597px){
    .jyl-hero__parallax{height:100% !important;top:0}
}

/* -- Overlay -- */
.jyl-hero__overlay{
    position:absolute;inset:0;pointer-events:none;z-index:1;
    background:linear-gradient(0deg,rgba(0,0,0,.20) 0%,transparent 50%);
}
@media(min-width:1198px){
    .jyl-hero__overlay{background:linear-gradient(90deg,rgba(0,0,0,.20) 0%,transparent 50%)}
}

/* -- Content -- */
.jyl-hero__content-wrap{
    position:relative;z-index:10;flex:1;display:flex;flex-direction:column;
    width:100%;max-width:var(--jyl-max-w);margin-left:auto;margin-right:auto;
}
.jyl-hero__content{position:relative;z-index:10;width:100%;padding:0 12px 4rem}
@media(min-width:598px){.jyl-hero__content{padding:0 1.5rem 4rem}}
@media(min-width:1198px){.jyl-hero__content{padding:0 2rem 4rem}}
.jyl-hero__content-inner{width:100%;max-width:720px}

/* -- Heading -- */
.jyl-hero__h1{
    font-size:var(--jyl-fs-40);font-weight:var(--jyl-fw-bold);
    line-height:var(--jyl-lh-tight);color:var(--jyl-white);overflow:hidden;
}
@media(min-width:898px){.jyl-hero__h1{font-size:3.125rem}}
@media(min-width:1198px){.jyl-hero__h1{font-size:var(--jyl-fs-64)}}
@media(min-width:1918px){.jyl-hero__h1{font-size:4.167vw}}
.jyl-hero__h1-line{display:block;overflow:hidden}
.jyl-hero__h1-inner{display:block}
.jyl-hero__h1 br{display:block}

/* -- Subtitle -- */
.jyl-hero__subtitle{
    font-size:var(--jyl-fs-16);letter-spacing:var(--jyl-ls-lg);
    color:var(--jyl-white);margin-top:1rem;
}
@media(min-width:1198px){.jyl-hero__subtitle{font-size:var(--jyl-fs-24)}}

/* -- Fade elements: initial hidden state for non-active slides only.
      Active slide fade-els are pre-set by JS inline style before GSAP runs. -- */
[data-slide-content]:not(.is-active) .jyl-hero__fade-el{opacity:0}

/* -- Buttons -- */
.jyl-hero__btns{display:flex;flex-wrap:wrap;gap:12px}
.jyl-hero__btns .jyl-btn--ghost{
    background:transparent;border-color:rgba(255,255,255,.5);color:var(--jyl-white);
}
.jyl-hero__btns .jyl-btn--ghost:hover{
    background:rgba(255,255,255,.15);border-color:var(--jyl-white);
}

/* ==========================================================
   Progress Pagination
   - Firefox fix: explicit block display + min-height
   - Visual: inactive=dim+narrow, active=bright+wide
   ========================================================== */
.jyl-hero-pagination{
    position:absolute;bottom:2rem;z-index:20;
    display:flex;align-items:center;gap:4px;
    right:2rem;left:auto;
}
@media(max-width:597px){.jyl-hero-pagination{right:auto;left:13px}}

.jyl-progress-bullet{
    position:relative;
    display:block;
    width:28px;
    height:2px;
    min-height:2px;
    background:rgba(255,255,255,.30);
    border:none;
    padding:0;
    margin:0;
    cursor:pointer;
    pointer-events:auto;
    flex-shrink:0;
    overflow:hidden;
    transition:width var(--jyl-t300) var(--jyl-ease),
               background-color var(--jyl-t300) var(--jyl-ease);
    -moz-appearance:none;
    -webkit-appearance:none;
    appearance:none;
    outline:none;
    border-radius:1px;
    box-sizing:content-box;
}
.jyl-progress-bullet::before{
    content:'';position:absolute;top:-10px;bottom:-10px;left:0;right:0;
}
.jyl-progress-bullet.is-active{
    width:80px;
    background:rgba(255,255,255,.50);
}
.jyl-progress-bar-inner{
    display:block;position:absolute;left:0;top:0;
    height:100%;width:0;background:var(--jyl-white);border-radius:1px;
}

/* -- Video / Swiper controls (pause + mute) -- */
.jyl-video-controls{
    position:absolute;z-index:20;
    display:flex;align-items:center;
    gap:8px;
    --jyl-ctrl-offset:24px;
}
.jyl-video-controls--bottom-right{
    bottom:var(--jyl-ctrl-offset);
    right:var(--jyl-ctrl-offset);
}
.jyl-video-controls--bottom-left{
    bottom:var(--jyl-ctrl-offset);
    left:var(--jyl-ctrl-offset);
}
.jyl-video-controls--top-right{
    top:calc(var(--jyl-ctrl-offset) + var(--jyl-hdr-h-desk,80px));
    right:var(--jyl-ctrl-offset);
}
.jyl-video-controls--top-left{
    top:calc(var(--jyl-ctrl-offset) + var(--jyl-hdr-h-desk,80px));
    left:var(--jyl-ctrl-offset);
}

/* -- Icon toggle states — CSS fallback (JS also manages display) -- */
.jyl-icon-btn[data-jyl-swiper-pause] .jyl-icon-play{display:none}
.jyl-icon-btn[data-jyl-swiper-pause].is-paused .jyl-icon-pause{display:none}
.jyl-icon-btn[data-jyl-swiper-pause].is-paused .jyl-icon-play{display:block}
.jyl-icon-btn[data-jyl-swiper-mute] .jyl-icon-sound-off{display:none}
.jyl-icon-btn[data-jyl-swiper-mute].is-muted .jyl-icon-sound-on{display:none}
.jyl-icon-btn[data-jyl-swiper-mute].is-muted .jyl-icon-sound-off{display:block}

/* -- Arrow buttons -- */
.jyl-hero-arrow{
    position:absolute;top:50%;transform:translateY(-50%);
    z-index:20;display:flex;align-items:center;justify-content:center;
    width:48px;height:48px;
    background:rgba(255,255,255,0.12);
    backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
    border:1px solid rgba(255,255,255,0.2);
    border-radius:50%;
    color:var(--jyl-white,#fff);
    cursor:pointer;
    transition:background var(--jyl-t300) var(--jyl-ease),
               border-color var(--jyl-t300) var(--jyl-ease),
               opacity var(--jyl-t300) var(--jyl-ease);
}
.jyl-hero-arrow:hover{
    background:rgba(255,255,255,0.25);
    border-color:rgba(255,255,255,0.4);
}
.jyl-hero-arrow--prev{left:1.5rem}
.jyl-hero-arrow--next{right:1.5rem}
@media(max-width:597px){
    .jyl-hero-arrow{width:36px;height:36px}
    .jyl-hero-arrow--prev{left:0.75rem}
    .jyl-hero-arrow--next{right:0.75rem}
}

/* -- YouTube / Vimeo embed iframe -- */
.jyl-hero__embed-iframe{
    position:absolute;inset:0;width:100%;height:100%;
    border:0;pointer-events:none;
    /* Scale up to hide black bars on 16:9 iframe in non-16:9 containers */
    transform:scale(1.5);
}
.jyl-hero__embed-poster{
    position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
}
@media(max-width:897px){
    /* On mobile autoplay iframe is often blocked — show poster instead */
    .jyl-hero__embed-iframe{display:none}
    .jyl-hero__embed-poster{display:block}
}

/* CSS fallback: block[0] fades in via pure CSS if JS is slow.
   JS heroSetInitialState sets inline opacity which overrides this immediately. */
@keyframes jyl-hero-fallback-in{
    from{opacity:0}
    to{opacity:1}
}
[data-slide-content="0"]{
    animation:jyl-hero-fallback-in 0.6s ease 0.3s both;
}

/* -- Elementor fix -- */
.elementor-widget-jyl_hero_swiper > .elementor-widget-container{display:block;height:100%}

/* CSS fallback: block[0] fades in via pure CSS if JS is slow.
   JS heroSetInitialState sets inline opacity:0 which overrides this immediately,
   so on fast loads this animation never plays. */
@keyframes jyl-hero-fallback-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}
[data-slide-content="0"] {
    animation: jyl-hero-fallback-in 0.6s ease 0.3s both;
}