/**
 * Intro carousel (custom/block-intro-carousel) — frontend styly
 *
 * ZÁMĚRNĚ samostatný stylesheet (NE přes @import v additionalStyle.css), enqueueovaný
 * s filemtime verzí v custom_blocks_enqueue_scripts(). Důvod: additionalStyle.css se
 * natahuje přes @import url(...) BEZ ?ver= → Cloudflare/prohlížeč ho cachuje natvrdo a
 * nové styly se na produkci neprojeví. Samostatný enqueue s filemtime busterne cache.
 */

.wp-block-custom-intro-carousel.hero-carousel {
    position: relative;
    padding: 0;
}

/* Neutralizace Webflow layout tříd na carouselu (section / hero-main / content-container / hero).
   Blok je full-bleed self-contained. Bez tohohle by:
   - .section { display:flex; justify-content:center; align-items:center; padding:0 8% } scvrklo média do úzkého
     vycentrovaného sloupce a ovládání vyhodilo doprostřed výšky,
   - .section.hero-main { height:80vh; max-height:560px; margin-top:120px; padding:80px; background:black } ořezalo
     výšku na ~560px, přidalo černý pruh a bílou mezeru nahoře.
   Vyšší specificita (blok-třída + Webflow třídy) přebije Webflow bez ohledu na pořadí stylů. */
.wp-block-custom-intro-carousel.section,
.wp-block-custom-intro-carousel.section.hero-main {
    display: block;
    width: 100%;
    max-width: none;
    height: auto;
    max-height: none;
    margin: 0;
    padding: 0;
    background-color: transparent;
    justify-content: normal;
    align-items: normal;
}

.wp-block-custom-intro-carousel .hc-content.content-container,
.wp-block-custom-intro-carousel .hc-content.content-container.hero {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 8% 7vh;
    flex: initial;
    z-index: 2;
}

.wp-block-custom-intro-carousel .hc-viewport {
    position: relative;
    overflow: hidden;
}

.wp-block-custom-intro-carousel .hc-slide {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: 78vh;
    overflow: hidden;
    background: #191919;
}

.wp-block-custom-intro-carousel .hc-slide[hidden] {
    display: none;
}

.wp-block-custom-intro-carousel .hc-media {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: #191919;
}

.wp-block-custom-intro-carousel .hc-img,
.wp-block-custom-intro-carousel .hc-video,
.wp-block-custom-intro-carousel .hc-iframe {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border: 0;
}

.wp-block-custom-intro-carousel .hc-yt {
    position: absolute;
    inset: 0;
}

.wp-block-custom-intro-carousel .hc-yt .hc-img {
    position: absolute;
    inset: 0;
}

.wp-block-custom-intro-carousel .hc-yt-play {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 84px;
    height: 84px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 0;
    cursor: pointer;
    color: #fff;
}

.wp-block-custom-intro-carousel .hc-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 0.65) 100%);
    pointer-events: none;
}

.wp-block-custom-intro-carousel .hc-content {
    position: relative;
    z-index: 2;
    width: 100%;
    padding-bottom: 7vh;
}

.wp-block-custom-intro-carousel .hc-heading {
    color: #fff;
}

.wp-block-custom-intro-carousel .hc-heading .hc-sub {
    display: block;
    color: var(--red, #d91920);
}

.wp-block-custom-intro-carousel .hc-buttons {
    margin-top: 1.5rem;
}

/* šipky prev/next */
.wp-block-custom-intro-carousel .hc-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 4;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 0;
    background: rgba(0, 0, 0, 0.4);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s ease;
}

.wp-block-custom-intro-carousel .hc-arrow:hover {
    background: rgba(0, 0, 0, 0.65);
}

.wp-block-custom-intro-carousel .hc-arrow--prev {
    left: 16px;
}

.wp-block-custom-intro-carousel .hc-arrow--next {
    right: 16px;
}

/* ovládací lišta s názvy slidů */
.wp-block-custom-intro-carousel .hc-controls {
    display: flex;
    align-items: stretch;
    gap: 16px;
    background: #191919;
    padding: 14px 4vw;
}

.wp-block-custom-intro-carousel .hc-playpause {
    flex: 0 0 auto;
    align-self: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.25);
    background: transparent;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.wp-block-custom-intro-carousel .hc-playpause .hc-i-play {
    display: none;
}

.wp-block-custom-intro-carousel .hc-playpause[data-playing="false"] .hc-i-pause {
    display: none;
}

.wp-block-custom-intro-carousel .hc-playpause[data-playing="false"] .hc-i-play {
    display: block;
}

.wp-block-custom-intro-carousel .hc-strip {
    display: flex;
    flex: 1 1 auto;
    gap: 18px;
    min-width: 0;
}

.wp-block-custom-intro-carousel .hc-tab {
    flex: 1 1 0;
    min-width: 0;
    background: none;
    border: 0;
    padding: 6px 0 0;
    cursor: pointer;
    text-align: left;
    color: rgba(255, 255, 255, 0.6);
    transition: color 0.2s ease;
}

.wp-block-custom-intro-carousel .hc-tab:hover {
    color: rgba(255, 255, 255, 0.85);
}

.wp-block-custom-intro-carousel .hc-tab.is-active {
    color: #fff;
}

.wp-block-custom-intro-carousel .hc-tab-label {
    display: block;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-bottom: 10px;
}

.wp-block-custom-intro-carousel .hc-bar {
    display: block;
    height: 3px;
    background: rgba(255, 255, 255, 0.22);
    border-radius: 999px;
    overflow: hidden;
}

.wp-block-custom-intro-carousel .hc-tab.is-active .hc-bar {
    background: rgba(255, 255, 255, 0.35);
}

.wp-block-custom-intro-carousel .hc-fill {
    display: block;
    height: 100%;
    width: 100%;
    transform: scaleX(0);
    transform-origin: left center;
    background: var(--red, #d91920);
}

.wp-block-custom-intro-carousel .hc-fill.hc-fill--run {
    animation: hc-fill-grow var(--slide-duration, 6s) linear forwards;
}

.wp-block-custom-intro-carousel .hc-fill.hc-fill--paused {
    animation-play-state: paused;
}

@keyframes hc-fill-grow {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
}

/* skrytá live region pro screen readery */
.wp-block-custom-intro-carousel .hc-live {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

/* jeden slide → skryj ovládání */
.wp-block-custom-intro-carousel.hc--single .hc-controls,
.wp-block-custom-intro-carousel.hc--single .hc-arrow {
    display: none;
}

@media screen and (max-width: 767px) {
    .wp-block-custom-intro-carousel .hc-slide {
        min-height: 70vh;
    }

    .wp-block-custom-intro-carousel .hc-controls {
        padding: 12px 16px;
        gap: 10px;
    }

    .wp-block-custom-intro-carousel .hc-strip {
        gap: 12px;
        overflow-x: auto;
    }

    .wp-block-custom-intro-carousel .hc-tab {
        flex: 0 0 60%;
    }

    .wp-block-custom-intro-carousel .hc-tab-label {
        font-size: 13px;
    }

    .wp-block-custom-intro-carousel .hc-arrow {
        width: 38px;
        height: 38px;
    }
}

/* prefers-reduced-motion → žádná ujíždějící linka, aktivní = plná */
@media (prefers-reduced-motion: reduce) {
    .wp-block-custom-intro-carousel .hc-fill.hc-fill--run {
        animation: none;
        transform: scaleX(1);
    }
}