/*
    Šablona Doma - vzhled koláže (rozvržení míst je v _base/collage.css). Obyčejná fotka (bez stylu)
    a video v místě koláže dostanou papírový rámeček s páskou jako fotka nalepená na lednici,
    polaroid, lístek a dýchací kolečko mají vzhled ze svého stylu. Koláž má ozdoby (hvězdičky,
    u dvojice srdíčko) a na počítači se rámečky při najetí myší jemně nadzvednou.
    Natočení a nadzvednutí používá vlastnosti rotate/translate, ne transform (stejně jako theme.css).
*/

/* místo nahoře pro pásky a ozdoby, aby nezasahovaly do obsahu nad koláží */
.theme-doma .cm-collage{
    padding-top:1.6rem;
}

/* místo je kontejner - dýchací kolečko a další prvky se můžou přizpůsobit šířce místa (cqw) */
.theme-doma .cm-collage-slot{
    container-type:inline-size;
}

/* dýchací kolečko v místě koláže má velikost místa (v heroA malé kolečko přes roh fotky) */
.theme-doma .cm-collage-slot .cm-style-breath{
    --doma-breath-size:min(100cqw, 18rem);
}

/* ------------------------------------------------------------------------------------------
    Papírový rámeček s páskou - obyčejná fotka a video (s náhledem i bez)
------------------------------------------------------------------------------------------ */
.theme-doma .cm-collage-slot :not([class*="cm-style-"]) > .cm-image-content,
.theme-doma .cm-collage-slot .cm-video-content,
.theme-doma .cm-collage-slot .cm-youtube-vimeo-container{
    position:relative;
    padding:10px;
    border-radius:22px;
    background-color:var(--palette-paper);
    box-shadow:0 30px 60px -30px var(--doma-shadow);
    transition:translate .9s var(--doma-ease), box-shadow .9s var(--doma-ease);
}
.theme-doma .cm-collage-slot :not([class*="cm-style-"]) > .cm-image-content img,
.theme-doma .cm-collage-slot .cm-video-preview,
.theme-doma .cm-collage-slot .cm-video-preview img{
    border-radius:14px;
}
/* stín má rámeček, náhled videa uvnitř vlastní nepotřebuje */
.theme-doma .cm-collage-slot :is(.cm-video-content,.cm-youtube-vimeo-container) .cm-video-preview{
    box-shadow:none;
}
.theme-doma .cm-collage-slot :not([class*="cm-style-"]) > .cm-image-content::before,
.theme-doma .cm-collage-slot .cm-video-content::before,
.theme-doma .cm-collage-slot .cm-youtube-vimeo-container::before{
    content:"";
    position:absolute;
    z-index:3;
    top:-14px;
    left:40%;
    width:11.2rem;
    max-width:40%;
    height:3rem;
    background-color:color-mix(in srgb, var(--palette-butter) 92%, transparent);
    box-shadow:0 2px 4px var(--doma-shadow-tape);
    rotate:-4deg;
    pointer-events:none;
}
/* páska menší fotky jde na druhou stranu a má barvu levandule */
.theme-doma .cm-collage-heroA .cm-collage-slot-2 :not([class*="cm-style-"]) > .cm-image-content::before,
.theme-doma .cm-collage-pair .cm-collage-slot-2 :not([class*="cm-style-"]) > .cm-image-content::before{
    left:auto;
    right:22%;
    rotate:7deg;
    background-color:color-mix(in srgb, var(--palette-lavender) 95%, transparent);
}

/* nadzvednutí při najetí myší - jako u polaroidu a lístku */
@media (hover: hover) and (prefers-reduced-motion: no-preference){
    .theme-doma .cm-collage-slot :not([class*="cm-style-"]) > .cm-image-content:hover,
    .theme-doma .cm-collage-slot .cm-video-content:hover,
    .theme-doma .cm-collage-slot .cm-youtube-vimeo-container:hover{
        translate:0 -6px;
        box-shadow:0 36px 60px -30px var(--doma-shadow-strong);
    }
}

/* ------------------------------------------------------------------------------------------
    Ozdoby koláže - hvězdičky u heroA (vlevo nad velkou fotkou), srdíčko u dvojice (vpravo nahoře).
    Kreslí je pseudoprvky kontejneru, barva přes currentColor a masku, obsah nezakrývají pro myš.
------------------------------------------------------------------------------------------ */
.theme-doma .cm-collage::before,
.theme-doma .cm-collage::after{
    content:"";
    position:absolute;
    z-index:5;
    pointer-events:none;
    background-color:currentColor;
    -webkit-mask:url(decorations/star.svg) center / contain no-repeat;
    mask:url(decorations/star.svg) center / contain no-repeat;
    animation:cm-doma-float 5.5s ease-in-out infinite;
}
.theme-doma .cm-collage-heroA::before{
    left:1%;
    top:1%;
    width:3rem;
    height:3rem;
    color:var(--palette-gold);
}
.theme-doma .cm-collage-heroA::after{
    left:8%;
    top:-1%;
    width:1.8rem;
    height:1.8rem;
    color:color-mix(in oklab, var(--palette-apricot) 70%, var(--palette-terracotta));
    animation-duration:7s;
    animation-delay:-2.5s;
}
.theme-doma .cm-collage-pair::before{
    right:4%;
    top:6%;
    width:3.4rem;
    height:3.4rem;
    color:var(--palette-terracotta);
    -webkit-mask-image:url(svg/icon-heart.svg);
    mask-image:url(svg/icon-heart.svg);
}
.theme-doma .cm-collage-pair::after{
    content:none;
}

/* ------------------------------------------------------------------------------------------
    Telefon - ozdoby menší, text dýchacího kolečka se zmenšuje s kolečkem (kolečko má velikost
    místa koláže, na telefonu je malé a slova by z něj přetekla)
------------------------------------------------------------------------------------------ */
@media (max-width: 767px){
    .theme-doma .cm-collage::before{
        width:2.4rem;
        height:2.4rem;
    }
    .theme-doma .cm-collage-heroA::after{
        width:1.4rem;
        height:1.4rem;
    }
    .theme-doma .cm-collage-slot .cm-style-breath p{
        padding:0 .6rem;
    }
    .theme-doma .cm-collage-slot .cm-style-breath :is(p,p *){
        font-size:min(1em, calc(var(--doma-breath-size) * .19));
    }
}

/* ------------------------------------------------------------------------------------------
    Omezení pohybu - ozdoby stojí, rámečky se nenadzvedávají
------------------------------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce){
    .theme-doma .cm-collage::before,
    .theme-doma .cm-collage::after{
        animation:none !important;
    }
    .theme-doma .cm-collage-slot :not([class*="cm-style-"]) > .cm-image-content,
    .theme-doma .cm-collage-slot .cm-video-content,
    .theme-doma .cm-collage-slot .cm-youtube-vimeo-container{
        transition:none !important;
    }
}