/*
    Společné styly šablon designu webu. Načítá je web i náhled v content manageru adminu
    ze serveru (/Public/Themes/_base/base.css), takže se nikam nekopírují.
    Platí pro všechny šablony - styly konkrétní šablony jsou v její složce (theme.css).
*/

/*
    animace při zobrazení - jen CSS, bez skriptu; prohlížeč bez animation-timeline obsah ukáže hned.
    Výplň jen "backwards": před vjezdem do okna je prvek schovaný, po animaci už na něm nic neběží.
    S výplní "both" by měl prvek trvale vlastní vrstvu (pozadí další sekce by zakrylo, co do ní
    přesahuje, třeba „+“ v náhledu adminu) a kvůli transform i vlastní rámec pro position:fixed.
*/
@keyframes cm-anim-rise{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
@keyframes cm-anim-fade{from{opacity:0}to{opacity:1}}

@supports (animation-timeline: view()){
    .cm-anim-rise{animation:cm-anim-rise linear backwards;animation-timeline:view();animation-range:entry 0% entry 55%}
    .cm-anim-fade{animation:cm-anim-fade linear backwards;animation-timeline:view();animation-range:entry 0% entry 55%}
}

/*
    dekorace sekce - vzhled každé dekorace dává šablona, tady jen umístění na připravené pozice.
    Vrstva 1 je nad videem na pozadí a pod obsahem (kontejner sekce má z-index 2). Ostatním dětem
    sekce se pozice ani vrstva nemění - video a prolnutí jsou absolutní a sekce nesmí mít vlastní
    vrstvu, jinak by v náhledu adminu zakryla „+“ přesahující do další sekce.
*/
.cm-has-decorations{overflow-x:clip}
.cm-decoration{position:absolute;z-index:1;pointer-events:none;color:var(--cm-decoration-color,currentColor)}
.cm-decoration-pos-top-left{left:0;top:0;transform:translate(-35%,-25%)}
.cm-decoration-pos-top-right{right:0;top:0;transform:translate(35%,-25%)}
.cm-decoration-pos-bottom-left{left:0;bottom:0;transform:translate(-35%,25%)}
.cm-decoration-pos-bottom-right{right:0;bottom:0;transform:translate(35%,25%)}
.cm-decoration-pos-center{left:50%;top:50%;transform:translate(-50%,-50%)}

/* na telefonu jsou dekorace menší a průhlednější, aby nepřekážely textu */
@media (max-width:767px){
    .cm-decoration{scale:.55;opacity:.6}
}

/*
    nadtitulek nad nadpisem (prvek Nadpis) - malý text nad nadpisem, zarovnaný stejně jako nadpis
*/
.cm-headline-kicker{display:block;margin:0 0 1.2rem;font-size:1.4rem;font-weight:600;line-height:1.4;letter-spacing:.12em;text-transform:uppercase}

/*
    zvýraznění slov v textu a nadpisu (formáty editoru „Zvýraznit“ a „Zakroužkovat“) - základní vzhled
    je decentní linka a obrys barvou odkazů, šablona si je může nakreslit po svém
*/
.cm-mark{text-decoration:underline;text-decoration-color:var(--link-color,currentColor);text-decoration-thickness:.12em;text-underline-offset:.2em;text-decoration-skip-ink:none}
.cm-mark.cm-mark-circle{text-decoration:none;padding:0 .25em;border:2px solid var(--link-color,currentColor);border-radius:999px;-webkit-box-decoration-break:clone;box-decoration-break:clone}

/*
    popisek polaroidu - text obrázku se u stylu polaroid vykresluje pod fotkou místo překryvu.
    Editor ukládá text jako nadpis, v popisku se proto bloky chovají jako obyčejný text.
*/
.cm-image-content:has(> .cm-polaroid-caption){flex-direction:column}
.cm-polaroid-caption{display:block;margin-top:1rem;font-size:1.6rem;line-height:1.35;text-align:center}
.cm-polaroid-caption :is(h1,h2,h3,h4,h5,h6,p,div){margin:0;font:inherit;color:inherit}

/*
    tmavá barva palety na pozadí sekce nebo sloupce - šablona přepne text, nadpisy a odkazy sama,
    tady jen pojistka, aby text nebyl tmavý na tmavém
*/
.cm-bg-dark{color:#fff}

/*
    video s náhledem - obrázek s tlačítkem přehrát, přehrávač se načte až po kliknutí
    (na místě nebo v okně). Výška obrázku se řídí rozměry videa, bez nich poměrem 16:9.
*/
.cm-video-preview{position:relative;display:block;width:100%;height:100%;overflow:hidden}
.cm-video-preview img{display:block;width:100%;height:100%;aspect-ratio:16/9;object-fit:cover}
.cm-video-play{position:absolute;left:50%;top:50%;display:flex;align-items:center;justify-content:center;width:76px;height:76px;margin:-38px 0 0 -38px;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.92);color:#222;cursor:pointer;box-shadow:0 10px 30px -10px rgba(0,0,0,.45);transition:transform .2s ease}
.cm-video-play:hover{transform:scale(1.06)}
.cm-video-play:focus-visible{outline:3px solid #fff;outline-offset:4px;box-shadow:0 0 0 7px rgba(0,0,0,.55)}
.cm-video-play-icon{width:0;height:0;margin-left:6px;border-style:solid;border-width:13px 0 13px 22px;border-color:transparent transparent transparent currentColor}
.cm-video-player{position:relative;width:100%}
.cm-video-player iframe{display:block;width:100%;height:auto;aspect-ratio:16/9;border:0}
.cm-video-player video{display:block;width:100%;height:auto;max-height:85vh}

/* okno s videem */
.cm-video-modal{position:fixed;inset:0;z-index:10000;display:flex;align-items:center;justify-content:center;padding:64px 16px 16px}
.cm-video-modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.82)}
.cm-video-modal-content{position:relative;width:min(1100px,100%);max-height:100%}
.cm-video-modal-close{position:absolute;right:0;bottom:100%;width:44px;height:44px;margin-bottom:10px;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.92);color:#222;cursor:pointer}
.cm-video-modal-close::before,.cm-video-modal-close::after{content:"";position:absolute;left:50%;top:50%;width:18px;height:2px;margin:-1px 0 0 -9px;background:currentColor;transform:rotate(45deg)}
.cm-video-modal-close::after{transform:rotate(-45deg)}
.cm-video-modal-close:focus-visible{outline:3px solid #fff;outline-offset:3px}
.cm-video-modal .cm-video-player video{max-height:calc(100vh - 96px)}

@media (prefers-reduced-motion: reduce){
    .cm-anim-rise,.cm-anim-fade{animation:none}
    .cm-decoration{animation:none !important}
    .cm-video-play{transition:none}
    .cm-video-play:hover{transform:none}
}