/* ==========================================================================
   AUME – 10) Videa v galerii produktu                               [v1]

   Patří k 10-videa-v-galerii.js, tam je i popis zadávání v administraci.

   DVĚ ROLE
   1) Hned schová blok "Doplňkové parametry", který Shoptet vyrobí ve chvíli,
      kdy produkt dostane informační parametr. Musí to udělat CSS, ne skript:
      soubor se načítá v hlavičce, takže cesta k videu nikdy neproblikne.
      Skript blok zase odkryje (třídou aume-vid__blok-zobrazit), pokud v něm
      kromě řádku VIDEO a Kategorie zůstane ještě nějaký další parametr.
   2) Vykreslí video na místě hlavní fotky a náhled v pásu miniatur.

   ROZMĚRY SE MĚŘÍ, NEPOČÍTAJÍ
   Šablona nedává hlavní fotce rozměr, který by šel z CSS zopakovat: na
   desktopu ji drží max-height 768 px, takže z rámu širokého 707 px vyplní
   jen 576 px, kdežto na mobilu se roztáhne na celou šířku. Naměřeno na živém
   webu: 1440 px → fotka 576×768 v rámu 707, 390 px → fotka 355×473 v rámu 355.
   Kdyby si video rozměr dopočítávalo z rámu samo, bylo by na desktopu o 97 px
   vyšší než fotka a galerie by při přepnutí poskočila.

   Proto rozměr fotky změří skript a pošle ho sem custom properties. Video pak
   leží absolutně přesně na místě fotky, fotka zůstává v toku (jen neviditelná)
   a výšku galerie určuje pořád ona – posun tím nemůže vzniknout ani teoreticky.
   Totéž u miniatur: šablona jim dává 100×100, skript to změří z první fotkové
   miniatury, hodnoty níže jsou jen záloha, kdyby měření selhalo.

   Fotky produktu jsou na výšku (1024×1365), testovací video na šířku
   (1440×1080), proto object-fit: contain na podkladu světle šedé webu –
   z videa se nic neuřízne.
   ========================================================================== */

:root {
    --aume-vid-bg: #F7F5F1;      /* světle šedá webu (--color-bg-light) */
    --aume-vid-ovladani: rgba(0, 0, 0, .55);
    /* Zálohy pro případ, že skript rozměry nestihne změřit */
    --aume-vid-thumb-w: 100px;
    --aume-vid-thumb-h: 100px;
}

/* --- 1) Blok doplňkových parametrů ---------------------------------------- */

.extended-description {
    display: none;
}

.extended-description.aume-vid__blok-zobrazit {
    display: block;
}

/* I v odkrytém bloku zůstává náš řádek schovaný. Skript mu navíc dává
   atribut hidden, tohle je pojistka pro případ, že by ho šablona přebila. */
.extended-description .aume-vid__radek {
    display: none;
}

/* --- 2) Video na místě hlavní fotky --------------------------------------- */

.p-image {
    position: relative;
}

/* Video leží na místě fotky. Souřadnice i rozměr posílá skript, hodnoty za
   čárkou platí jen do prvního změření. */
.aume-vid__stage {
    display: none;
    position: absolute;
    top: var(--aume-vid-top, 0);
    left: var(--aume-vid-left, 0);
    width: var(--aume-vid-sirka, 100%);
    height: var(--aume-vid-vyska, auto);
    background: var(--aume-vid-bg);
}

.p-image.aume-vid-aktivni .aume-vid__stage {
    display: block;
}

/* Fotka se schovává viditelností, ne display:none – musí si podržet místo
   v toku, protože právě ona určuje výšku galerie. */
.p-image.aume-vid-aktivni > .p-main-image {
    visibility: hidden;
}

/* Lupa CloudZoomu se na fotku věší zvenčí, ta by přes video prosvítala.
   Ukazuje se sice jen při najetí myší na fotku (a tam je teď video), ale
   kdyby zůstala viset z dřívějška, tohle ji spolehlivě sundá. */
.p-image.aume-vid-aktivni .cloudzoom-lens,
.p-image.aume-vid-aktivni .cloudzoom-zoom,
.p-image.aume-vid-aktivni .cloudzoom-caption {
    display: none;
}

.aume-vid__video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: var(--aume-vid-bg);
}

/* --- Ovládání -------------------------------------------------------------- */

/* Zastavit / spustit a zvuk, vpravo dole nad videem. Klepnutí do obrazu dělá
   totéž co levé tlačítko, viz obsluha ve skriptu. */
.aume-vid__ovladani {
    position: absolute;
    right: 12px;
    bottom: 12px;
    z-index: 3;
    display: flex;
    gap: 8px;
}

.aume-vid__btn {
    width: 44px;          /* pohodlný cíl prstem i na mobilu */
    height: 44px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: var(--aume-vid-ovladani);
    color: #FFFFFF;
    cursor: pointer;
    transition: background .2s ease;
}

.aume-vid__btn:hover,
.aume-vid__btn:focus-visible {
    background: rgba(0, 0, 0, .75);
}

.aume-vid__ico {
    display: flex;
}

.aume-vid__btn svg {
    width: 22px;
    height: 22px;
    fill: currentColor;
}

/* Velká značka uprostřed, když video stojí. Klik na ni musí propadnout na
   video pod ní, proto pointer-events: none. */
.aume-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(--aume-vid-ovladani);
    color: #FFFFFF;
    pointer-events: none;
}

.aume-vid__stage.je-zastaveno .aume-vid__znak {
    display: flex;
}

.aume-vid__znak svg {
    width: 34px;
    height: 34px;
    fill: currentColor;
    /* Optické vyvážení trojúhelníku v kroužku */
    margin-left: 3px;
}

.aume-vid__video {
    cursor: pointer;
}

/* --- 3) Miniatura v pásu --------------------------------------------------- */

/* Miniatura nese třídu p-thumbnail, takže rozestupy i plování si bere ze
   šablony. Šablona ale rozměr dává až obrázku uvnitř, ne odkazu – ten se jen
   smrští podle obsahu. Video má vlastní rozměr 1440×1080, takže bez pevné
   velikosti roztáhne odkaz na šířku videa a rozhodí celý pás. */
.aume-vid__thumb {
    position: relative;
    overflow: hidden;
    background: var(--aume-vid-bg);
}

.aume-vid__thumb-v {
    display: block;
    width: var(--aume-vid-thumb-w, 100px);
    height: var(--aume-vid-thumb-h, 100px);
    /* Miniatury fotek jsou čtvercové – video se ořízne stejně, ať pás drží řadu */
    object-fit: cover;
    pointer-events: none;
}

.aume-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(--aume-vid-ovladani);
    color: #FFFFFF;
    pointer-events: none;
}

.aume-vid__thumb-ico svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
    /* Optické vyvážení trojúhelníku ve svém kroužku */
    margin-left: 2px;
}

/* --- Ohled na nastavení systému -------------------------------------------- */

/* Kdo si v systému vypnul animace, nechce ani přechody na ovládání. */
@media (prefers-reduced-motion: reduce) {
    .aume-vid__btn {
        transition: none;
    }
}