/**
 * 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,
/* Video v carouselu je čistě vizuální — žádné ovládací prvky, žádný zvuk
   (rozhodnutí klienta 8/2026).

   YouTube ale kolem přehrávače kreslí vlastní vrstvu, kterou NELZE vypnout
   parametrem v adrese: nahoře titulek videa s názvem kanálu, dole logo
   YouTube a tlačítko sdílení, a při pozastavení i velká tlačítka uprostřed.
   `controls=0` schová jen spodní časovou osu a `pointer-events: none` brání
   kliknutí, ale ne tomu, aby se vrstva ukázala sama.

   Řešíme to standardní technikou pro videa na pozadí: iframe je větší než
   viditelná plocha a vycentrovaný, takže titulek i logo přetečou mimo ořez.
   Ořezává rodič (.hc-yt má overflow: hidden). */
.wp-block-custom-intro-carousel .hc-iframe {
    position: absolute;
    top: 50%;
    left: 50%;
    /* rozměr drží 16:9 vůči té straně, která zrovna „nestačí“ */
    width: max(100%, 177.78vh);
    height: max(100%, 56.25vw);
    transform: translate(-50%, -50%) scale(1.32);
    transform-origin: center;
    display: block;
    border: 0;
    pointer-events: none;
}

.wp-block-custom-intro-carousel .hc-yt {
    position: absolute;
    inset: 0;
    overflow: hidden;   /* ořez přetékajícího iframu */
}

.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);
    }
}

/* Při „omezit pohyb" je automatické přehrávání vypnuté (rotace stojí na CSS animaci)
   — tlačítko play/pause by nic nedělalo, tak se schová (hlášeno kolegy). */
@media (prefers-reduced-motion: reduce) {
    .wp-block-custom-intro-carousel .hc-playpause {
        display: none;
    }
}

/* Vypnuté automatické přehrávání → tlačítko play/pause nemá co ovládat a jen mátlo
   (hlášeno kolegy dvakrát). Klíčuje se na data-autoplay v kořeni bloku, který je
   součástí už uloženého HTML — funguje tedy zpětně na celé flotile bez zásahu do save(). */
.wp-block-custom-intro-carousel[data-autoplay="false"] .hc-playpause {
    display: none;
}

/* ============================================================
   1.9.7 — připomínky ABF ke carouselu
   ============================================================ */

/* Obrázek na pozadí byl deformovaný (připomínka ABF).
   Důvod: .hc-img sdílel pravidlo s video iframem, tedy overscan pro 16:9
   (`width: max(100%, 177.78vh)`, `height: max(100%, 56.25vw)`, `scale(1.32)`).
   U videa to dává smysl — schová to vrstvu YouTube. U obrázku to ale znamená
   natažení podle poměru okna. Obrázek proto dostává vlastní, prosté krytí. */
.wp-block-custom-intro-carousel .hc-img {
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transform: none;
}

/* Delší text dosahoval až k hornímu okraji (připomínka ABF, nejvíc na telefonu).
   Obsah je zarovnaný ke spodní hraně, takže horní odsazení krátké texty
   nijak neposune — projeví se, až když text doroste nahoru. */
.wp-block-custom-intro-carousel .hc-content.content-container,
.wp-block-custom-intro-carousel .hc-content.content-container.hero {
    padding-top: clamp(72px, 12vh, 160px);
}

/* Lišta s přepínáním slidů — ABF ji nechce vidět.
   Schovává se ale jen PRUH S PŘEPÍNÁNÍM, ne celé ovládání: tlačítko pauzy
   musí zůstat dosažitelné i myší a dotykem. Automaticky se přepínající obsah
   bez dostupné pauzy je porušení WCAG 2.2.2 a hover-pauza je navíc navázaná
   právě na .hc-controls — s `pointer-events: none` by přestala fungovat.
   Lišta proto zmizí vizuálně (pozadí, odsazení, přepínače), pauza zůstane. */
.wp-block-custom-intro-carousel[data-hide-bar="true"] .hc-controls {
    position: absolute;
    right: 0;
    bottom: 0;
    left: auto;
    width: auto;
    /* Nad obsahem slidu (.hc-content má z-index: 2), jinak by kliknutí na pauzu
       spadlo na text pod ní — ověřeno přes elementFromPoint. */
    z-index: 3;
    background: none;
    padding: 16px 4vw;
    pointer-events: none;
}

/* Pruh s náhledy slidů a odpočtem — jen ten ABF vadí. Zůstává v pořadí
   tabulátoru, takže klávesnicí se na přepínání pořád dá dostat; při zaostření
   se ukáže. */
.wp-block-custom-intro-carousel[data-hide-bar="true"] .hc-strip {
    position: absolute;
    right: 4vw;
    bottom: 100%;
    opacity: 0;
    pointer-events: none;
    transform: translateY(8px);
    transition: opacity .2s, transform .2s;
}

.wp-block-custom-intro-carousel[data-hide-bar="true"] .hc-strip:focus-within {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
    /* Vyskočí přes fotku — bez vlastního podkladu by poloprůhledné popisky
       na světlé fotce nešly přečíst. Stejná barva jako běžná lišta. */
    padding: 10px 14px;
    background: #191919;
    border-radius: 6px;
}

/* Pauza zůstává vidět i klikatelná — jinak by se autoplay nedal zastavit
   myší ani na dotyku. */
.wp-block-custom-intro-carousel[data-hide-bar="true"] .hc-playpause {
    pointer-events: auto;
    background: rgba(0, 0, 0, .45);
    backdrop-filter: blur(2px);
}

@media (prefers-reduced-motion: reduce) {
    .wp-block-custom-intro-carousel[data-hide-bar="true"] .hc-strip {
        transition: none;
    }
}

/* Plaketa s termínem a místem nad nadpisem (1.9.7).
   Vzhled celý přebírá `.date-place-wrapper` z Webflow exportu — je to doslova
   stejný prvek jako v bloku „Intro video". Tady řešíme jen odstup od nadpisu;
   `.hc-content` je sloupcový flex bez gapu, tak si ho plaketa přidá sama.
   Vkládá ji server filtrem render_block, ne save() — po změně termínu
   v nastavení se projeví hned, bez přeukládání stránky. */
.wp-block-custom-intro-carousel .hc-date-place {
    flex: 0 0 auto;
    margin-bottom: 24px;
}

@media screen and (max-width: 767px) {
    .wp-block-custom-intro-carousel .hc-date-place {
        margin-bottom: 16px;
    }
}

/* ============================================================
   Zarovnání obsahu carouselu se zbytkem webu (připomínka 23. 9.)
   ============================================================
   Nadpis a tlačítka začínaly o kus víc vpravo než footer, CTA pruh i ostatní
   sekce. Zbytek webu staví obsah do dvou vnořených prvků:
       .section          → padding 0 8 %   (nad 1200 px; pod ním 0)
       .content-container→ max-width 1280 px, vycentrovaný; pod 1200 px padding 5 %
   Carousel je ale full-bleed, takže odsazení sekce ruší a 8 % si dává sám —
   jenže UVNITŘ max-width: 1280 px. Tím se obsah posunul o dalších ~102 px
   dovnitř (na 1707px okně 213 px webu vs. 316 px carouselu).

   Řešení bez zásahu do save(): necháme padding 8 % na místě a jen zvětšíme
   max-width o oněch 16 %, které padding zabírá. Tím se vnitřní box vrátí přesně
   na 1280 px a jeho levá hrana padne tam, kde ji má zbytek webu — algebraicky
   je to totéž vnoření jako .section + .content-container, jen v jednom prvku.
   Ověřeno na 1600 / 1400 / 1250 / 1201 px: sedí na pixel s footerem. */
.wp-block-custom-intro-carousel .hc-content.content-container,
.wp-block-custom-intro-carousel .hc-content.content-container.hero {
    max-width: calc(1280px + 16%);
}

/* Pod 1200 px přestává Webflow odsazovat sekce a odsazení přebírá
   .content-container s 5 %. Držíme se stejného čísla, ať linka sedí i tady. */
@media screen and (max-width: 1200px) {
    .wp-block-custom-intro-carousel .hc-content.content-container,
    .wp-block-custom-intro-carousel .hc-content.content-container.hero {
        max-width: none;
        padding-left: 5%;
        padding-right: 5%;
    }
}