/*
    Koláž - rozložení prvku Sloupce (columns.layout = "collage"), společné pro všechny šablony.
    Načítá ho web i náhled v content manageru adminu, vzhled (rámečky, stíny, ozdoby) dává šablona
    ve svém collage.css. Pseudoprvky .cm-collage (::before, ::after) jsou volné pro ozdoby šablony.

    Značky (web i náhled v adminu stejné):
    .cm-collage.cm-collage-<rozložení>        kontejner prvku
      .cm-collage-grid                       mřížka, ve které se místa překrývají
        .cm-col.cm-collage-slot.cm-collage-slot-<n>[.cm-collage-main]   místo = sloupec, n od 1

    Svislé odstupy míst drží pomocné řádky mřížky (::before a ::after .cm-collage-grid) s výškou
    v procentech šířky koláže - koláž si tak drží tvar při každé šířce. Když je obsah místa delší,
    než rozložení počítá, koláž se zvětší, nic nepřeteče do dalšího obsahu. Okraje míst se na pozici
    nepoužívají, okraje nastavené u sloupce proto místo jen posunou.
    Natočení je vlastnost rotate (ne transform) - animace vjezdu (cm-anim-*) jdou přes transform.
    Místa navíc (víc sloupců, než má rozložení) jdou pod koláž přes celou šířku, aby se obsah neztratil.
    Telefon: jen hlavní místo přes celou šířku, v náhledu adminu jsou ostatní místa vidět zeslabená.
*/
.cm-collage{
    position:relative;
    width:100%;
    margin-left:auto;
    margin-right:auto;
}
/* nad rámečkem výběru prvku v náhledu adminu (z-index 3), vrstvy míst zůstávají uvnitř mřížky */
.cm-collage-grid{
    position:relative;
    z-index:4;
    display:grid;
    grid-template-columns:minmax(0,1fr);
    grid-auto-rows:auto;
}
.cm-collage-grid::before,
.cm-collage-grid::after{
    grid-column:1 / -1;
    pointer-events:none;
}
.cm-collage-grid > .cm-collage-slot{
    grid-column:1 / -1;
    min-width:0;
}

/* fotka a náhled videa v místě - jemný stín, aby se překrývající se místa od sebe oddělila */
.cm-collage-slot :is(.cm-image-content,.cm-video-preview){
    box-shadow:0 14px 32px -18px rgba(0,0,0,.45);
}

/* ------------------------------------------------------------------------------------------
    heroA - čtyři místa: 1 velká fotka nebo video vlevo nahoře, 2 menší fotka vpravo dole,
    3 lístek vlevo dole, 4 malé kolečko vpravo nahoře (přes roh fotky)
    sloupce mřížky (v procentech šířky): 0 | 4 | 48 | 62 | 78 | 84 | 99 | 100
------------------------------------------------------------------------------------------ */
.cm-collage-heroA{
    max-width:60rem;
}
.cm-collage-heroA > .cm-collage-grid{
    grid-template-columns:minmax(0,4fr) minmax(0,44fr) minmax(0,14fr) minmax(0,16fr) minmax(0,6fr) minmax(0,15fr) minmax(0,1fr);
}
/* odstup od kolečka k fotce a od fotky k menší fotce a lístku */
.cm-collage-heroA > .cm-collage-grid::before{
    content:"";
    grid-row:1;
    padding-top:10%;
}
.cm-collage-heroA > .cm-collage-grid::after{
    content:"";
    grid-row:2;
    padding-top:46%;
}
.cm-collage-heroA > .cm-collage-grid > .cm-collage-slot-1{
    grid-column:2 / 6;
    grid-row:2 / 4;
    align-self:start;
    z-index:1;
    rotate:-2.5deg;
}
.cm-collage-heroA > .cm-collage-grid > .cm-collage-slot-2{
    grid-column:4 / 8;
    grid-row:3;
    align-self:start;
    z-index:2;
    rotate:4deg;
}
.cm-collage-heroA > .cm-collage-grid > .cm-collage-slot-3{
    grid-column:1 / 3;
    grid-row:3;
    align-self:end;
    z-index:3;
    rotate:-3deg;
}
.cm-collage-heroA > .cm-collage-grid > .cm-collage-slot-4{
    grid-column:5 / 7;
    grid-row:1 / 3;
    align-self:start;
    z-index:4;
    rotate:8deg;
}
.cm-collage-heroA .cm-collage-slot-1 :is(.cm-image-content:not(.cm-has-dimensions) img,.cm-video-preview img){
    height:auto;
    aspect-ratio:4 / 3;
    object-fit:cover;
}
.cm-collage-heroA .cm-collage-slot-2 :is(.cm-image-content:not(.cm-has-dimensions) img,.cm-video-preview img){
    height:auto;
    aspect-ratio:4 / 5;
    object-fit:cover;
}

/* ------------------------------------------------------------------------------------------
    pair - dvě překrývající se fotky: 1 vlevo nahoře (navrchu, aby jí druhá nezakryla popisek),
    2 vpravo dole
    sloupce mřížky (v procentech šířky): 0 | 38 | 62 | 100
------------------------------------------------------------------------------------------ */
.cm-collage-pair{
    max-width:44rem;
}
.cm-collage-pair > .cm-collage-grid{
    grid-template-columns:minmax(0,38fr) minmax(0,24fr) minmax(0,38fr);
}
.cm-collage-pair > .cm-collage-grid::before{
    content:"";
    grid-row:1;
    padding-top:56%;
}
.cm-collage-pair > .cm-collage-grid > .cm-collage-slot-1{
    grid-column:1 / 3;
    grid-row:1 / 3;
    align-self:start;
    z-index:2;
    rotate:-5deg;
}
.cm-collage-pair > .cm-collage-grid > .cm-collage-slot-2{
    grid-column:2 / 4;
    grid-row:2;
    align-self:start;
    z-index:1;
    rotate:4deg;
}
.cm-collage-pair .cm-collage-slot :is(.cm-image-content:not(.cm-has-dimensions) img,.cm-video-preview img){
    height:auto;
    aspect-ratio:1 / 1;
    object-fit:cover;
}

/* ------------------------------------------------------------------------------------------
    Náhled v adminu (iframe má třídu šablony theme-<klíč> přímo na body, web ji má na obalu
    stránky) - prázdná místa koláže se dají vybrat přes rámeček prvku, vybrané místo jde nahoru,
    aby jeho ovládání nezakrylo jiné místo
------------------------------------------------------------------------------------------ */
body[class*="theme-"] .cm-collage-grid{
    pointer-events:none;
}
body[class*="theme-"] .cm-collage-grid > .cm-collage-slot:has(.cm-selected){
    z-index:20;
}

/* ------------------------------------------------------------------------------------------
    Telefon - jen hlavní místo přes celou šířku, bez natočení
------------------------------------------------------------------------------------------ */
@media (max-width:767px){
    .cm-collage{
        max-width:none;
    }
    .cm-collage > .cm-collage-grid{
        display:block;
    }
    .cm-collage > .cm-collage-grid::before,
    .cm-collage > .cm-collage-grid::after{
        content:none;
    }
    .cm-collage > .cm-collage-grid > .cm-collage-slot{
        display:none;
    }
    .cm-collage > .cm-collage-grid > .cm-collage-slot.cm-collage-main{
        display:block;
        rotate:none;
    }

    /* náhled v adminu - ostatní místa zůstanou pod hlavním zeslabená, aby šla upravit */
    body[class*="theme-"] .cm-collage > .cm-collage-grid{
        display:flex;
        flex-direction:column;
        gap:2rem;
    }
    body[class*="theme-"] .cm-collage > .cm-collage-grid > .cm-collage-slot{
        display:block;
        align-self:stretch;
        opacity:.45;
        rotate:none;
    }
    body[class*="theme-"] .cm-collage > .cm-collage-grid > .cm-collage-slot.cm-collage-main{
        order:-1;
        opacity:1;
    }
    body[class*="theme-"] .cm-collage > .cm-collage-grid > .cm-collage-slot:has(.cm-selected){
        opacity:1;
    }
}