/*
    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>   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: koláž je vždy celá, každé rozložení má pro úzkou šířku vlastní uspořádání míst.
*/
.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 - koláž je vždy celá, jen s vlastním rozložením na úzkou šířku
------------------------------------------------------------------------------------------ */
@media (max-width:767px){
    .cm-collage{
        max-width:none;
    }

    /*
        heroA: 1 velká fotka nebo video přes celou šířku, 4 kolečko přes její pravý horní roh,
        pod ní 3 lístek vlevo a 2 menší fotka vpravo - kousek přes sebe a jen kousek přes spodní
        okraj velké fotky (ovládání videa zůstane volné), lístek svisle uprostřed vedle fotky
        sloupce mřížky (v procentech šířky): 0 | 55 | 58 | 74 | 100
    */
    .cm-collage-heroA > .cm-collage-grid{
        grid-template-columns:minmax(0,55fr) minmax(0,3fr) minmax(0,16fr) minmax(0,26fr);
    }
    .cm-collage-heroA > .cm-collage-grid::before{
        padding-top:8%;
    }
    .cm-collage-heroA > .cm-collage-grid::after{
        padding-top:68%;
    }
    .cm-collage-heroA > .cm-collage-grid > .cm-collage-slot-1{
        grid-column:1 / -1;
        grid-row:2 / 4;
        rotate:-1deg;
    }
    .cm-collage-heroA > .cm-collage-grid > .cm-collage-slot-2{
        grid-column:2 / -1;
        grid-row:3;
        rotate:3deg;
    }
    .cm-collage-heroA > .cm-collage-grid > .cm-collage-slot-3{
        grid-column:1 / 3;
        grid-row:3;
        align-self:center;
    }
    .cm-collage-heroA > .cm-collage-grid > .cm-collage-slot-4{
        grid-column:4 / 5;
        grid-row:1 / 3;
        rotate:6deg;
    }

    /* pair: méně přes sebe než na počítači, ať jsou obě fotky celé vidět */
    .cm-collage-pair > .cm-collage-grid{
        grid-template-columns:minmax(0,40fr) minmax(0,20fr) minmax(0,40fr);
    }
    .cm-collage-pair > .cm-collage-grid::before{
        padding-top:72%;
    }
}