/* ==========================================================================
   GLAMSTORE - Videa v galerii produktu                             [v1.0]

   Patri k videa-v-galerii.js, tam je popis zadavani v administraci.

   Nacita se v HLAVICCE, aby cesta k videu nikdy neproblikla.

   ROZDIL PROTI AUME
   Na aume byl blok "Doplnkove parametry" prazdny (jen Kategorie + VIDEO),
   takze ho CSS mohlo schovat pres display:none a nechat schovany. Glamstore
   ma v tom bloku skutecny obsah (EAN, Material, Slozeni), ktery zakaznik vidi.
   Proto se schovava jen VIDITELNOST - blok si drzi misto v toku a po odkryti
   skriptem nedojde k poskoceni stranky. Zmizi jen nas jediny radek.

   SMUPRAVY
   Na eshopu je starsi video doplnek od jineho dodavatele (SMupravy/video),
   ktery ma pravidlo .type-detail .p-image-wrapper video { position:absolute;
   top:0; left:0; width:100%; height:100%; background:#fff; z-index:9 }.
   Pas miniatur lezi uvnitr .p-image-wrapper, takze by to pravidlo zasahlo
   i nase video na platne i miniaturu. Nize je proto prebito vyssi
   specificitou - nesahat.

   Fotky produktu jsou na vysku (1024x1365), video muze byt jakekoli, proto
   object-fit: contain na podkladu - z videa se nic neurizne.
   ========================================================================== */

:root {
    --rk-vid-bg: #ffffff;
    --rk-vid-ovladani: rgba(0, 0, 0, .55);
    --rk-vid-ovladani-hover: #d2b48c;   /* --color-primary eshopu */
    /* Zalohy, kdyby skript nestihl zmerit rozmery */
    /* Rozmer miniatury nastavuje skript inline podle sousedni fotky. */
}

/* --- 1) Blok doplnkovych parametru ---------------------------------------- */

/* Viditelnost, ne display - blok musi podrzet misto, aby stranka neposkocila.

   Animace s prodlevou je zachranna sit: kdyby se skript vubec nenacetl (chyba
   na FTP, blokovane soubory), blok se po 1,5 s odkryje sam. Radsi necht
   zakaznik na okamzik zahledne cestu k videu, nez aby mu EAN, Material
   a Slozeni zmizely z detailu natrvalo. Skript odkryva okamzite tridou nize,
   takze za normalniho behu na animaci nedojde. */
.type-detail .extended-description {
    visibility: hidden;
    animation: rk-vid-zachrana 0s linear 1.5s forwards;
}

.type-detail .extended-description.rk-vid__blok-hotovo {
    visibility: visible;
    animation: none;
}

@keyframes rk-vid-zachrana {
    to { visibility: visible; }
}

/* Nas radek zustava schovany i v odkrytem bloku. Skript mu navic dava
   atribut hidden, tohle je pojistka, kdyby ho sablona prebila. */
.type-detail .extended-description .rk-vid__radek {
    display: none;
}

/* --- 2) Video na miste hlavni fotky --------------------------------------- */

.type-detail .p-image {
    position: relative;
}

/* Platno prekryva cely ram hlavni fotky.

   PROC UZ SE NEMERI
   Do v1.02 si skript mereny rozmer fotky posilal sem v custom properties
   (--rk-vid-top a spol.) a platno se podle nich pokladalo presne na fotku.
   Melo to jednu slabinu: kdyz se mereni nepovedlo nebo hodnoty zastaraly,
   platilo zalozni top:0 a height:auto - platno se slozilo a vyjelo nahoru
   mimo fotku. Presne to na glamstore nastavalo, a to i po zpevneni mereni.

   Ram fotky je pritom definovany sam o sobe: .p-image ma position:relative
   a jeho vysku urcuje prave hlavni fotka, ktera v nem zustava v toku (CSS ji
   nize schovava jen viditelnosti). Staci tedy platno roztahnout pres cely
   .p-image - zadne mereni, zadne hodnoty, ktere by mohly zastarat. Samotne
   video se do ramu vepise pres object-fit: contain, takze si drzi vlastni
   pomer stran a nic se z nej neurizne. */
.type-detail .p-image .rk-vid__stage {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--rk-vid-bg);
    z-index: 10;
}

.type-detail .p-image.rk-vid-aktivni .rk-vid__stage {
    display: block;
}

/* Fotka se schovava viditelnosti, ne display:none - musi si podrzet misto
   v toku, protoze prave ona urcuje vysku galerie.

   POZOR na kombinator: na desktopu NENI .p-main-image primym potomkem
   .p-image. Sablona tam vlozi bezejmenny <div> a sipky carousel-control,
   takze skutecne deti .p-image jsou:
     div.flags.flags-extra | div (bez tridy) | span.carousel-control.left
     | span.carousel-control.right | div.rk-vid__stage
   S primym potomkem (>) se proto pravidlo nechytlo a fotka zustavala videt
   pod platnem. Nebylo to poznat, protoze platno ma neprusvitne pozadi,
   ale v letterboxu u svislych videi by fotka prosvitala. */
.type-detail .p-image.rk-vid-aktivni .p-main-image {
    visibility: hidden;
}

/* Vysku ramu drzi hlavni fotka, ktera v nem zustava v toku (schovava se jen
   viditelnosti, viz pravidlo vyse). Zadna dalsi pojistka na vysku proto neni
   potreba - a hlavne tu nesmi byt zadny pevny pomer stran, ten by ram pri
   otevreni videa prekreslil a galerie by poskocila. */

/* Vlajecky (sleva, Vyprodej) sedi uvnitr .p-image a sablona je dava
   bottom:10px; right:15px - presne tam, kde ma doplnek tlacitka chodu a zvuku.
   Pres bezici video navic nedavaji smysl, tyka se produktu, ne videa.
   Proto po dobu, co je video otevrene, mizi. Po zavreni se vrati. */
.type-detail .p-image.rk-vid-aktivni .flags,
.type-detail .p-image.rk-vid-aktivni .flags-extra {
    display: none !important;
}

/* Lupa CloudZoomu se na fotku vesi zvenci a prosvitala by pres video. */
.type-detail .p-image.rk-vid-aktivni .cloudzoom-lens,
.type-detail .p-image.rk-vid-aktivni .cloudzoom-zoom,
.type-detail .p-image.rk-vid-aktivni .cloudzoom-caption,
.type-detail .p-image.rk-vid-aktivni .cloud-zoom-lens,
.type-detail .p-image.rk-vid-aktivni .cloud-zoom-big {
    display: none !important;
}

/* Prebiti SMupravy pravidla - viz hlavicka souboru. */
.type-detail .p-image-wrapper .rk-vid__stage .rk-vid__video {
    position: static;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: var(--rk-vid-bg);
    cursor: pointer;
    z-index: auto;
}

/* --- Ovladani -------------------------------------------------------------- */

.type-detail .rk-vid__ovladani {
    position: absolute;
    right: 12px;
    bottom: 12px;
    z-index: 3;
    display: flex;
    gap: 8px;
}

.type-detail .rk-vid__btn {
    width: 44px;
    height: 44px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: var(--rk-vid-ovladani);
    color: #ffffff;
    cursor: pointer;
    transition: background .2s ease;
}

.type-detail .rk-vid__btn:hover,
.type-detail .rk-vid__btn:focus-visible {
    background: var(--rk-vid-ovladani-hover);
}

.type-detail .rk-vid__ico {
    display: flex;
}

.type-detail .rk-vid__btn svg {
    width: 22px;
    height: 22px;
    fill: currentColor;
}

/* Velka znacka uprostred, kdyz video stoji. Klik musi propadnout na video
   pod ni, proto pointer-events: none. */
.type-detail .rk-vid__znak {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    width: 64px;
    height: 64px;
    display: none;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--rk-vid-ovladani);
    color: #ffffff;
    pointer-events: none;
}

.type-detail .rk-vid__stage.je-zastaveno .rk-vid__znak {
    display: flex;
}

.type-detail .rk-vid__znak svg {
    width: 34px;
    height: 34px;
    fill: currentColor;
    /* Opticke vyvazeni trojuhelniku v krouzku */
    margin-left: 3px;
}

/* --- 3) Miniatura v pasu --------------------------------------------------- */

/* Miniatura nese tridu p-thumbnail, takze rozestupy i plovani si bere ze
   sablony. Sablona ale rozmer dava az obrazku uvnitr, ne odkazu - ten by se
   roztahl na sirku videa a rozhodil cely pas. */
.type-detail .p-thumbnails .rk-vid__thumb {
    position: relative;
    overflow: hidden;
    background: var(--rk-vid-bg);
}

/* Ramecek dostane velikost od sousedni fotky (nastavuje ji skript inline,
   viz srovnejMiniaturu v JS), video uvnitr lezi pres celou jeho plochu.

   Natvrdo se tu nic nerozmeruje schvalne: sablona si velikost miniatur pocita
   sama a meni ji podle sirky okna i podle toho, kdy se fotka dotahne lazy
   loadem. Jedine spolehlive cislo je proto to, ktere ma v danou chvili
   sousedni ramecek. */
.type-detail .p-thumbnails .rk-vid__thumb {
    position: relative;
    display: block;
    overflow: hidden;
}

/* Prebiti SMupravy pravidla i tady - viz hlavicka souboru. */
.type-detail .p-image-wrapper .rk-vid__thumb .rk-vid__thumb-v,
.type-detail .p-thumbnails .rk-vid__thumb .rk-vid__thumb-v {
    position: absolute;
    /* Souradnice i rozmer kopiruji obrazek sousedni fotky uvnitr jejiho odkazu
       (nastavuje skript, viz srovnejMiniaturu). Diky tomu ma video stejnou
       velikost i stejne odsazeni jako fotky vedle. */
    top: var(--rk-vid-in-t, 0);
    left: var(--rk-vid-in-l, 0);
    display: block;
    width: var(--rk-vid-in-w, 100%);
    height: var(--rk-vid-in-h, 100%);
    /* cover: plocha je stejna jako u fotek, takze ji video vyplni stejne jako
       ony. Svisle video se po stranach orizne, v nahledu to vadit nema -
       po kliknuti se v galerii zobrazi cele. */
    object-fit: cover;
    pointer-events: none;
    background: var(--rk-vid-bg);
    z-index: auto;
}

.type-detail .rk-vid__thumb-ico {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--rk-vid-ovladani);
    color: #ffffff;
    pointer-events: none;
}

.type-detail .rk-vid__thumb-ico svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
    margin-left: 2px;
}

/* Starsi doplnek SMupravy kresli vlastni play ikonu na a.video. Nase
   miniatura tu tridu nenese, takze se nedotknou - tohle je jen pojistka. */
.type-detail .p-thumbnails .rk-vid__thumb::before {
    content: none !important;
}

/* --- Ohled na nastaveni systemu -------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .type-detail .rk-vid__btn {
        transition: none;
    }
}