/* šablona Doma – recenze jako lepicí lístky a videorecenze jako polaroidy */

/*
    Prvek Recenze ve stylu „lístky“ (cm-review-notes): lístky v novinových sloupcích, barvy
    palety a natočení se střídají podle pořadí, podpis ručním písmem. Prvek Galerie videí ve stylu
    „polaroidy“ (cm-video-polaroids): náhled videa v papírovém rámečku s páskou, zlaté tlačítko
    přehrát a popisek ručním písmem, video se přehraje v okně. Lístky i polaroidy jsou papír,
    takže mají světlý kontext i uvnitř tmavé sekce.

    Rozměry jsou v rem (1rem = 10px) a písmo se nastavuje i potomkům - web má velikost písma
    nastavenou na každém prvku. Natočení a nadzvednutí používá vlastnosti rotate/translate,
    aby se skládaly s animací vjezdu (transform).
*/

/* světlý kontext papíru (stejné hodnoty jako stránka v theme.css) */
.theme-doma :is(.cm-review-note-paper,.cm-video-polaroid-paper){
    --doma-text:var(--palette-brown);
    --doma-text-soft:color-mix(in oklab, var(--palette-brown) 91%, var(--palette-cream));
    --doma-text-body:color-mix(in oklab, var(--palette-brown) 83%, var(--palette-cream));
    --doma-line:color-mix(in oklab, var(--palette-brown) 10%, color-mix(in oklab, var(--palette-gold) 20%, var(--palette-cream)));
    --link-color:var(--palette-terracotta);
    --text-color:var(--palette-brown);
    color:var(--doma-text-soft);
}

/* ------------------------------------------------------------------------------------------
    Recenze - lepicí lístky
------------------------------------------------------------------------------------------ */
/* jeden nebo dva lístky vedle sebe uprostřed, od tří lístků novinové sloupce jako v návrhu */
.theme-doma .cm-review-notes{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    align-items:flex-start;
    gap:2.8rem;
    margin:0;
    padding:0;
    list-style:none;
}
.theme-doma .cm-review-note{
    display:block;
    width:min(46rem, 100%);
    margin:0;
    padding:0;
    break-inside:avoid;
}
/*
    Ve sloupcích Safari (WebKit) kreslí jen to, co leží v rozsahu sloupce: natočený a nadzvednutý roh
    lístku nad začátkem sloupce se kreslí na konci předchozího sloupce (tenké proužky pod lístky)
    a stín pod koncem sloupce se useknutý přelije na začátek dalšího. Obal lístku proto má nahoře
    místo na roh (polovina mezery) a dole na celý stín (--cm-review-notes-reach); další lístek se
    k předchozímu přitáhne záporným okrajem, který Safari na začátku sloupce zahodí. Seznam odsazení
    na začátku vrací a na konci nechá jen mezeru. Prázdné místo obalu nereaguje na myš - zvedá jen
    najetí na lístek (::after pod lístkem drží najetí, když lístek odjede nahoru).
*/
.theme-doma .cm-review-notes:has(> .cm-review-note:nth-child(3)){
    --cm-review-notes-gap:2.8rem;
    --cm-review-notes-reach:6.6rem;
    display:block;
    columns:3 300px;
    column-gap:2.8rem;
    margin:calc(var(--cm-review-notes-gap) / -2) 0 calc(var(--cm-review-notes-gap) - var(--cm-review-notes-reach));
}
.theme-doma .cm-review-notes:has(> .cm-review-note:nth-child(3)) > .cm-review-note{
    width:auto;
    padding:calc(var(--cm-review-notes-gap) / 2) 0 var(--cm-review-notes-reach);
    pointer-events:none;
}
.theme-doma .cm-review-notes:has(> .cm-review-note:nth-child(3)) > .cm-review-note + .cm-review-note{
    margin-top:calc(var(--cm-review-notes-gap) / 2 - var(--cm-review-notes-reach));
}
.theme-doma .cm-review-notes:has(> .cm-review-note:nth-child(3)) > .cm-review-note > .cm-review-note-paper{
    pointer-events:auto;
}
.theme-doma .cm-review-notes:has(> .cm-review-note:nth-child(3)) > .cm-review-note > .cm-review-note-paper::after{
    content:"";
    position:absolute;
    top:100%;
    left:0;
    right:0;
    height:.8rem;
}
/* další recenze - záporný okraj konce seznamu se nesmí sečíst s okrajem dalšího seznamu */
.theme-doma .cm-review-notes-rest:not([hidden]){
    display:flow-root;
}
.theme-doma .cm-review-note::marker{
    content:none;
}

/*
    nadzvednutí lístku řídí proměnná --cm-review-note-lift (0 = leží natočený, 1 = narovnaný
    a nadzvednutý). Plynule se mění proměnná, ne rotate/translate: Safari (WebKit) při plynulé
    změně rotate/translate ve sloupcové sazbě přestane kreslit celý sloupec a lístky pod myší
    mizí. Prohlížeč bez @property lístek nadzvedne bez přechodu.
*/
@property --cm-review-note-lift{
    syntax:"<number>";
    inherits:false;
    initial-value:0;
}

/* lístek - barva a natočení podle pořadí (žlutá, papír, levandulová, meruňková, papír) */
.theme-doma .cm-review-note-paper{
    --cm-review-note-color:var(--palette-butter);
    --cm-review-note-rotate:-1.2deg;
    position:relative;
    margin:0;
    padding:2.8rem 2.8rem 2.6rem;
    border-radius:6px 6px 22px 6px;
    background-color:var(--cm-review-note-color);
    box-shadow:0 22px 40px -26px var(--doma-shadow);
    rotate:calc(var(--cm-review-note-rotate) * (1 - var(--cm-review-note-lift)));
    translate:0 calc(var(--cm-review-note-lift) * -6px);
    transition:--cm-review-note-lift .9s var(--doma-ease), box-shadow .9s var(--doma-ease);
}
.theme-doma .cm-review-note:nth-child(5n+2) .cm-review-note-paper{
    --cm-review-note-color:var(--palette-paper);
    --cm-review-note-rotate:1deg;
}
.theme-doma .cm-review-note:nth-child(5n+3) .cm-review-note-paper{
    --cm-review-note-color:var(--palette-lavender);
    --cm-review-note-rotate:-.6deg;
}
.theme-doma .cm-review-note:nth-child(5n+4) .cm-review-note-paper{
    --cm-review-note-color:var(--palette-apricot);
    --cm-review-note-rotate:.8deg;
}
.theme-doma .cm-review-note:nth-child(5n) .cm-review-note-paper{
    --cm-review-note-color:var(--palette-paper);
    --cm-review-note-rotate:-1deg;
}

/*
    další lístky za tlačítkem „Zobrazit další recenze“ (pod lístky uprostřed, papírová pilulka
    s linkou); první nově ukázaný lístek dostane fokus kvůli čtečkám, ale bez rámečku - prohlížeč
    by ho ukázal i po kliknutí myší
*/
.theme-doma .cm-review-notes-more{
    display:flex;
    justify-content:center;
    margin:.8rem 0 0;
}
.theme-doma .cm-review-notes-more-button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:4.8rem;
    padding:1.1rem 2.8rem;
    border:1.5px solid var(--doma-gold-line);
    border-radius:999px;
    background-color:var(--palette-paper);
    box-shadow:0 14px 30px -18px var(--doma-shadow);
    cursor:pointer;
    color:var(--palette-brown);
    transition:background-color .3s, border-color .3s;
}
.theme-doma .cm-review-notes-more-button span{
    font-family:var(--font-body, inherit);
    font-size:1.6rem;
    font-weight:700;
    line-height:1.3;
    color:var(--palette-brown);
}
.theme-doma .cm-review-notes-more-button:hover{
    border-color:var(--palette-gold);
    background-color:var(--palette-butter);
}
.theme-doma .cm-review-notes-more-button:focus-visible{
    outline:3px solid var(--palette-terracotta);
    outline-offset:3px;
}
.theme-doma .cm-review-note:focus{
    outline:none;
}

/*
    text recenze - z editoru recenzí, proto všechny běžné značky. --cm-collapse-lines je limit řádků:
    delší text web po změření sbalí (cm-review-note-text-collapsed) a pod něj dá tlačítko na rozbalení
*/
.theme-doma .cm-review-note-text{
    --cm-collapse-lines:7;
    margin:0;
    padding:0;
    border:0;
    quotes:none;
}
.theme-doma .cm-review-note-text,
.theme-doma .cm-review-note-text :is(div,p,li,span,strong,b,em,i,a,u,small){
    font-family:var(--font-body, inherit);
    font-size:1.65rem;
    font-style:normal;
    line-height:1.6;
    color:var(--doma-text-soft);
}
.theme-doma .cm-review-note-text :is(strong,b){
    font-weight:700;
    color:var(--doma-text);
}
.theme-doma .cm-review-note-text a{
    color:var(--link-color);
    text-decoration:underline;
    text-decoration-thickness:.08em;
    text-underline-offset:.22em;
}
.theme-doma .cm-review-note-text :is(h1,h2,h3,h4,h5,h6),
.theme-doma .cm-review-note-text :is(h1,h2,h3,h4,h5,h6) *{
    font-family:var(--font-heading, inherit);
    font-size:1.9rem;
    font-weight:400;
    line-height:1.3;
    color:var(--doma-text);
}
.theme-doma .cm-review-note-text :is(p,ul,ol,h1,h2,h3,h4,h5,h6){
    margin:0 0 1.2rem;
}
.theme-doma .cm-review-note-text :is(ul,ol){
    padding-left:2rem;
}
.theme-doma .cm-review-note-text-content > :last-child{
    margin-bottom:0;
}

/* sbalený dlouhý text - limit řádků (výška řádku 1.6em) a do ztracena; fokus uvnitř textu ho ukáže celý */
.theme-doma .cm-review-note-text-collapsed{
    max-height:calc(var(--cm-collapse-lines) * 1.6em);
    overflow:clip;
    -webkit-mask-image:linear-gradient(to bottom, #000 calc(100% - 3.2em), transparent);
    mask-image:linear-gradient(to bottom, #000 calc(100% - 3.2em), transparent);
}
.theme-doma .cm-review-note-text-collapsed:focus-within{
    max-height:none;
    -webkit-mask-image:none;
    mask-image:none;
}

/* tlačítko „Číst celou recenzi“ / „Sbalit recenzi“ - podtržený text se šipkou */
.theme-doma .cm-review-note-more{
    display:inline-flex;
    align-items:center;
    gap:.8rem;
    margin:1rem 0 0;
    padding:.4rem 0;
    border:0;
    background:none;
    cursor:pointer;
    color:var(--doma-text);
}
.theme-doma .cm-review-note-more span{
    font-family:var(--font-body, inherit);
    font-size:1.5rem;
    font-weight:700;
    line-height:1.3;
    color:var(--doma-text);
    text-decoration:underline;
    text-decoration-color:var(--doma-gold-line);
    text-decoration-thickness:.12em;
    text-underline-offset:.28em;
}
.theme-doma .cm-review-note-more::after{
    content:"";
    flex:0 0 auto;
    width:.7rem;
    height:.7rem;
    border:solid currentColor;
    border-width:0 2px 2px 0;
    rotate:45deg;
    translate:0 -.2rem;
    transition:rotate .3s var(--doma-ease), translate .3s var(--doma-ease);
}
.theme-doma .cm-review-note-more[aria-expanded="true"]::after{
    rotate:-135deg;
    translate:0 .2rem;
}
.theme-doma .cm-review-note-more:hover span{
    text-decoration-color:currentColor;
}
.theme-doma .cm-review-note-more:focus-visible{
    outline:3px solid var(--palette-terracotta);
    outline-offset:3px;
    border-radius:4px;
}

/* podpis ručním písmem, u recenze s fotkou malá fotka v kruhu */
.theme-doma .cm-review-note-signature{
    display:flex;
    align-items:center;
    gap:1.2rem;
    margin:1.4rem 0 0;
}
.theme-doma .cm-review-note-photo{
    flex:0 0 auto;
    width:4.8rem;
    height:4.8rem;
    border-radius:50%;
    object-fit:cover;
    background-color:color-mix(in srgb, var(--palette-paper) 60%, transparent);
    box-shadow:0 0 0 3px var(--palette-paper);
}
.theme-doma .cm-review-note-name,
.theme-doma .cm-review-note-name :is(p,span,strong,b,em,i,a){
    margin:0;
    font-family:var(--font-accent, cursive);
    font-size:2.8rem;
    font-style:normal;
    font-weight:700;
    line-height:1.1;
    color:var(--doma-text);
}
/* podpis s doplňkem („jméno, v akademii od roku…“) - doplněk menší a lehčí */
.theme-doma .cm-review-note-name p:has(strong,b){
    font-size:2.2rem;
    font-weight:500;
}
.theme-doma .cm-review-note-name p + p{
    margin-top:.4rem;
}

/* ------------------------------------------------------------------------------------------
    Videorecenze - polaroidy
------------------------------------------------------------------------------------------ */
.theme-doma .cm-video-polaroids{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    align-items:flex-start;
    gap:3.2rem;
    margin:0;
    padding:1.4rem 0 0;
    list-style:none;
}
.theme-doma .cm-video-polaroid{
    display:block;
    width:min(26rem, 100%);
    margin:0;
    padding:0;
}
.theme-doma .cm-video-polaroid.cm-video-polaroid-landscape{
    width:min(42rem, 100%);
}
.theme-doma .cm-video-polaroid::marker{
    content:none;
}

/* rámeček - natočení a barva pásky podle pořadí (žlutá, levandulová, meruňková) */
.theme-doma .cm-video-polaroid-paper{
    --cm-video-polaroid-rotate:-2.5deg;
    --cm-video-polaroid-tape:var(--palette-butter);
    --cm-video-polaroid-tape-rotate:-4deg;
    position:relative;
    margin:0;
    padding:1rem 1rem 4.6rem;
    border-radius:12px;
    background-color:var(--palette-paper);
    box-shadow:0 30px 60px -30px var(--doma-shadow-strong);
    rotate:var(--cm-video-polaroid-rotate);
    transition:rotate .9s var(--doma-ease), translate .9s var(--doma-ease), box-shadow .9s var(--doma-ease);
}
.theme-doma .cm-video-polaroid:nth-child(3n+2) .cm-video-polaroid-paper{
    --cm-video-polaroid-rotate:1.8deg;
    --cm-video-polaroid-tape:var(--palette-lavender);
    --cm-video-polaroid-tape-rotate:3deg;
}
.theme-doma .cm-video-polaroid:nth-child(3n) .cm-video-polaroid-paper{
    --cm-video-polaroid-rotate:-1deg;
    --cm-video-polaroid-tape:var(--palette-apricot);
    --cm-video-polaroid-tape-rotate:-2deg;
}
.theme-doma .cm-video-polaroid-paper:has(> .cm-video-polaroid-caption){
    padding-bottom:0;
}
.theme-doma .cm-video-polaroid-paper::before{
    content:"";
    position:absolute;
    z-index:2;
    top:-1.2rem;
    left:50%;
    width:8.6rem;
    height:2.4rem;
    margin-left:-4.3rem;
    background-color:color-mix(in srgb, var(--cm-video-polaroid-tape) 93%, transparent);
    box-shadow:0 2px 4px var(--doma-shadow-tape);
    rotate:var(--cm-video-polaroid-tape-rotate);
    pointer-events:none;
}

/* náhled videa - na výšku jako fotka z telefonu, na šířku 16:9 */
.theme-doma .cm-video-polaroid-photo{
    position:relative;
    overflow:clip;
    aspect-ratio:496 / 790;
    border-radius:8px;
    background-color:var(--palette-cream);
}
.theme-doma .cm-video-polaroid-landscape .cm-video-polaroid-photo{
    aspect-ratio:16 / 9;
}
.theme-doma .cm-video-polaroid-photo img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
}

/* video bez náhledu - prázdný papír s čárkovaným okrajem a hvězdičkou */
.theme-doma .cm-video-polaroid-empty{
    position:absolute;
    inset:0;
    border:2px dashed var(--doma-line);
    border-radius:8px;
}
.theme-doma .cm-video-polaroid-empty::before{
    content:"";
    position:absolute;
    left:50%;
    top:24%;
    width:4rem;
    height:4rem;
    margin:-2rem 0 0 -2rem;
    background-color:var(--palette-gold);
    -webkit-mask:url(decorations/star.svg) center / contain no-repeat;
    mask:url(decorations/star.svg) center / contain no-repeat;
}

/* tlačítko přehrát - vzhled z theme.css (K9), v polaroidu menší a pod středem jako v návrhu */
.theme-doma .cm-video-polaroid .cm-video-play{
    top:56%;
    width:7.2rem;
    height:7.2rem;
    margin:-3.6rem 0 0 -3.6rem;
    box-shadow:0 0 0 8px color-mix(in srgb, var(--palette-paper) 50%, transparent), 0 14px 30px -12px var(--doma-shadow-strong);
}
.theme-doma .cm-video-polaroid-landscape .cm-video-play{
    top:50%;
}
.theme-doma .cm-video-polaroid .cm-video-play:focus-visible{
    outline:3px solid var(--palette-terracotta);
    outline-offset:6px;
}

/* popisek ručním písmem ve spodním okraji rámečku */
.theme-doma .cm-video-polaroid-caption{
    min-height:4.6rem;
    margin:0;
    padding:.8rem .6rem .9rem;
    font-family:var(--font-accent, cursive);
    font-size:2.2rem;
    font-weight:600;
    line-height:1.15;
    text-align:center;
    color:var(--doma-text);
    overflow-wrap:anywhere;
}

/* okno s videem - přehrávač podle orientace videa, aby se celé vešlo na výšku obrazovky */
:is(.theme-doma,body:has(.theme-doma)) .cm-video-polaroids-player{
    margin:0 auto;
}
:is(.theme-doma,body:has(.theme-doma)) .cm-video-polaroids-player-portrait{
    width:min(100%, calc((100vh - 112px) * 9 / 16));
}
:is(.theme-doma,body:has(.theme-doma)) .cm-video-polaroids-player-landscape{
    width:min(100%, calc((100vh - 112px) * 16 / 9));
}
:is(.theme-doma,body:has(.theme-doma)) .cm-video-polaroids-player-portrait iframe{
    aspect-ratio:9 / 16;
}
:is(.theme-doma,body:has(.theme-doma)) .cm-video-polaroids-player :is(iframe,video){
    border-radius:12px;
}
/* zavírací tlačítko u videa na výšku - okno je úzké jako přehrávač */
:is(.theme-doma,body:has(.theme-doma)) .cm-video-modal-content:has(.cm-video-polaroids-player-portrait){
    width:min(100%, calc((100vh - 112px) * 9 / 16));
}

/* ------------------------------------------------------------------------------------------
    Nadzvednutí při najetí myší (ne u omezeného pohybu)
------------------------------------------------------------------------------------------ */
@media (hover: hover) and (prefers-reduced-motion: no-preference){
    .theme-doma .cm-review-note:hover .cm-review-note-paper{
        --cm-review-note-lift:1;
        box-shadow:0 36px 60px -30px var(--doma-shadow-strong);
    }
    .theme-doma .cm-video-polaroid:hover .cm-video-polaroid-paper{
        rotate:0deg;
        translate:0 -6px;
        box-shadow:0 36px 60px -30px var(--doma-shadow-strong);
    }
}
/* fokus na tlačítku přehrát - polaroid se narovná i bez myši */
.theme-doma .cm-video-polaroid:focus-within .cm-video-polaroid-paper{
    rotate:0deg;
}

/* ------------------------------------------------------------------------------------------
    Telefon
------------------------------------------------------------------------------------------ */
@media (max-width: 767px){
    .theme-doma .cm-review-notes{
        gap:2.2rem;
    }
    .theme-doma .cm-review-notes:has(> .cm-review-note:nth-child(3)){
        --cm-review-notes-gap:2.2rem;
    }
    .theme-doma .cm-review-note-paper{
        padding:2.4rem 2.2rem 2.2rem;
    }
    .theme-doma .cm-video-polaroids{
        gap:2.8rem;
    }
}

/* ------------------------------------------------------------------------------------------
    Omezení pohybu - bez plynulých přechodů
------------------------------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce){
    .theme-doma :is(.cm-review-note-paper,.cm-video-polaroid-paper,.cm-review-notes-more-button),
    .theme-doma .cm-review-note-more::after{
        transition:none !important;
    }
}