/* Doma – marketing (fáze 3) */

/*
    Marketingové bannery na konci blogu a článku jako otevřený kroužkový sešit a newsletter jako
    lístek s linkou. Značky vykresluje web jen u šablony s "marketing": {"layout": "notebook"}
    a "newsletter": {"layout": "note"} (theme.json) - MarketingBannerNotebook.js, NewsletterNote.js.
    Rozměry jsou v rem (1rem = 10px).
*/

/* ==========================================================================================
    BANNERY – OTEVŘENÝ SEŠIT
    Na jedné stránce vlepená fotka, na druhé linkovaný papír s textem, uprostřed kroužková vazba.
    Další banner zrcadlí strany, barva desek a záložky se střídá podle pořadí (bez nového pole),
    typ tmavý má hnědou stránku se zlatými linkami. Dvoustrana je od 992 px, na telefonu
    a tabletu je z ní jedna stránka se spirálou nahoře (fotka nad textem).
========================================================================================== */
/* otáčená stránka při animaci přečnívá do strany - ořízne ji obal stránky (_base/base.css), ne sešit */
.theme-doma .cm-marketing-notebooks{
    position:relative;
}
.theme-doma .cm-marketing-notebook{
    /* desky, záložka a stránka s textem - světlý banner */
    --nb-cover:var(--palette-apricot);
    --nb-ribbon-from:color-mix(in oklab, var(--palette-gold) 82%, var(--palette-brown));
    --nb-ribbon-to:var(--palette-gold);
    --nb-page:var(--palette-paper);
    --nb-line:var(--doma-line);
    --nb-margin-line:color-mix(in srgb, var(--palette-terracotta) 32%, transparent);
    --nb-spine:color-mix(in srgb, var(--doma-shadow-base) 14%, transparent);
    --nb-kicker:var(--doma-gold-deep);
    --nb-heading:var(--palette-brown);
    --nb-text:color-mix(in oklab, var(--palette-brown) 90%, var(--palette-cream));

    /* fotka a kovové kroužky - stejné u světlého i tmavého banneru */
    --nb-photo-spine:color-mix(in srgb, var(--doma-shadow-base) 12%, transparent);
    --nb-dots:color-mix(in srgb, var(--doma-gold-deep) 16%, transparent);
    --nb-ring-dark:color-mix(in srgb, var(--palette-brown) 55%, var(--palette-cream));
    --nb-ring-light:color-mix(in srgb, var(--palette-brown) 10%, var(--palette-cream));
    --nb-tape-1:color-mix(in srgb, var(--palette-butter) 92%, transparent);
    --nb-tape-2:color-mix(in srgb, var(--palette-lavender) 95%, transparent);
    --nb-photo-rotate:-1.8deg;

    position:relative;
}
.theme-doma .cm-marketing-notebook:nth-child(3n+2){
    --nb-cover:var(--palette-lavender);
    --nb-ribbon-from:color-mix(in oklab, var(--palette-terracotta) 92%, var(--palette-brown));
    --nb-ribbon-to:color-mix(in oklab, var(--palette-terracotta) 85%, var(--palette-apricot));
    --nb-tape-1:color-mix(in srgb, var(--palette-apricot) 95%, transparent);
    --nb-tape-2:color-mix(in srgb, var(--palette-butter) 92%, transparent);
}
.theme-doma .cm-marketing-notebook:nth-child(3n){
    --nb-cover:var(--palette-butter);
    --nb-tape-1:color-mix(in srgb, var(--palette-lavender) 95%, transparent);
    --nb-tape-2:color-mix(in srgb, var(--palette-apricot) 95%, transparent);
}
.theme-doma .cm-marketing-notebook:nth-child(even){
    --nb-photo-rotate:1.6deg;
}
/* typ tmavý - hnědá stránka se zlatými linkami, hnědé desky */
.theme-doma .cm-marketing-notebook.cm-marketing-notebook-dark,
.theme-doma .cm-marketing-diary-spread.cm-marketing-notebook-dark{
    --nb-cover:color-mix(in srgb, var(--palette-brown) 72%, var(--palette-cream));
    --nb-ribbon-from:color-mix(in oklab, var(--palette-gold) 82%, var(--palette-brown));
    --nb-ribbon-to:var(--palette-lightgold);
    --nb-page:var(--palette-brown);
    --nb-line:color-mix(in srgb, var(--palette-lightgold) 16%, transparent);
    --nb-margin-line:color-mix(in srgb, var(--palette-lightgold) 32%, transparent);
    --nb-spine:color-mix(in srgb, #000 30%, transparent);
    --nb-kicker:var(--palette-lightgold);
    --nb-heading:var(--palette-cream);
    --nb-text:color-mix(in oklab, var(--palette-cream) 90%, var(--palette-brown));
}

.theme-doma .cm-marketing-notebook-book{
    position:relative;
    margin:0 auto;
}
/* desky sešitu */
.theme-doma .cm-marketing-notebook-book::before{
    content:"";
    position:absolute;
    background-color:var(--nb-cover);
}
.theme-doma .cm-marketing-notebook-spread{
    position:relative;
}
.theme-doma .cm-marketing-notebook-photo-page,
.theme-doma .cm-marketing-notebook-text-page{
    position:relative;
    min-width:0;
    box-sizing:border-box;
}

/* banner bez tlačítka, ale s odkazem - klikací celý sešit */
.theme-doma .cm-marketing-notebook-link{
    position:absolute;
    z-index:3;
    inset:0;
    border-radius:1.2rem;
}
.theme-doma .cm-marketing-notebook-link:focus-visible{
    outline:3px solid var(--palette-terracotta);
    outline-offset:1.4rem;
    border-radius:2rem;
}

/* vlepená fotka s páskami přes rohy */
.theme-doma .cm-marketing-notebook-photo-link{
    display:block;
    width:100%;
    color:inherit;
    text-decoration:none;
}
.theme-doma .cm-marketing-notebook-photo{
    position:relative;
    width:100%;
    margin:0;
    box-sizing:border-box;
    background-color:var(--palette-paper);
    rotate:var(--nb-photo-rotate);
}
.theme-doma .cm-marketing-notebook-photo::before,
.theme-doma .cm-marketing-notebook-photo::after{
    content:"";
    position:absolute;
    z-index:2;
}
.theme-doma .cm-marketing-notebook-photo::before{
    background-color:var(--nb-tape-1);
}
.theme-doma .cm-marketing-notebook-photo::after{
    background-color:var(--nb-tape-2);
}
.theme-doma .cm-marketing-notebook-photo picture{
    display:block;
}
.theme-doma .cm-marketing-notebook-photo img{
    display:block;
    width:100%;
    height:auto;
    aspect-ratio:4 / 3;
    object-fit:cover;
    border-radius:.3rem;
}

/* text banneru z editoru - menší nadpisy jako ručně psaný nadtitulek, větší jako nadpis, odstavce na linkách */
.theme-doma .cm-marketing-notebook-text-page{
    color:var(--nb-text);
}
.theme-doma .cm-marketing-notebook-text{
    position:relative;
    width:100%;
    color:var(--nb-text);
}
.theme-doma .cm-marketing-notebook-text > :first-child{
    margin-top:0;
}
.theme-doma .cm-marketing-notebook-text :is(p,li,span,strong,em){
    font-size:inherit;
    line-height:inherit;
}
.theme-doma .cm-marketing-notebook-text p{
    color:var(--nb-text);
}
.theme-doma .cm-marketing-notebook-text :is(h1,h2){
    font-family:var(--font-heading, inherit);
    font-weight:400;
    letter-spacing:-.01em;
    color:var(--nb-heading);
    text-wrap:balance;
}
.theme-doma .cm-marketing-notebook-text :is(h3,h4,h5,h6){
    width:fit-content;
    max-width:100%;
    font-family:var(--font-accent, cursive);
    font-weight:700;
    color:var(--nb-kicker);
    rotate:-2deg;
}
/* nadtitulek zarovnaný v editoru na střed nebo doprava (editor k tomu často přidá margin:0) - přes celou šířku */
.theme-doma .cm-marketing-notebook-text :is(h3,h4,h5,h6):is([style*="center"],[style*="right"]){
    width:auto;
}
.theme-doma .cm-marketing-notebook-text :is(h1,h2,h3,h4,h5,h6) *{
    font:inherit;
}

/* tlačítko s ručně kreslenou šipkou */
.theme-doma .cm-marketing-notebook-text-page .btn{
    display:inline-flex;
    align-items:center;
    gap:1rem;
    min-width:0;
    border-radius:999px;
    text-decoration:none;
}
/* text zarovnaný v editoru na střed - tlačítko pod ním taky */
.theme-doma .cm-marketing-notebook-text:has(> :last-child[style*="center"]) ~ .btn{
    align-self:center;
}
/*
    Barvy dnešních bannerů přes fotku (bílá, zelená…) by na papíře zanikly - jiné než hlavní tlačítko
    je v sešitu hnědé, na tmavé stránce zlaté. Hlavní tlačítko má barvy šablony.
*/
.theme-doma .cm-marketing-notebook-text-page .btn:not(.btn-primary),
.theme-doma .cm-marketing-notebook-text-page .btn:not(.btn-primary):hover{
    border:0;
    background:var(--palette-brown);
    color:var(--palette-cream) !important;
    box-shadow:none;
}
.theme-doma .cm-marketing-notebook-dark .cm-marketing-notebook-text-page .btn:not(.btn-primary),
.theme-doma .cm-marketing-notebook-dark .cm-marketing-notebook-text-page .btn:not(.btn-primary):hover{
    background:linear-gradient(180deg, var(--palette-lightgold), var(--palette-gold));
    color:var(--palette-brown) !important;
}
.theme-doma .cm-marketing-notebook-dark .cm-marketing-notebook-text-page .btn:focus-visible{
    outline-color:var(--palette-lightgold);
}
.theme-doma .cm-marketing-notebook-arrow{
    flex:none;
}

/* kroužková vazba */
.theme-doma .cm-marketing-notebook-rings{
    position:absolute;
    display:flex;
    justify-content:space-between;
    pointer-events:none;
}
.theme-doma .cm-marketing-notebook-rings > span{
    display:block;
    border-radius:6px;
}

/* jemné reakce na najetí myší - fotka se narovná, šipka popojede */
@media (hover: hover) and (prefers-reduced-motion: no-preference){
    .theme-doma .cm-marketing-notebook-photo{
        transition:rotate .9s var(--doma-ease);
    }
    .theme-doma .cm-marketing-notebook:hover .cm-marketing-notebook-photo{
        rotate:0deg;
    }
    .theme-doma .cm-marketing-notebook-arrow{
        transition:translate .6s var(--doma-ease);
    }
    .theme-doma .cm-marketing-notebook-text-page .btn:hover .cm-marketing-notebook-arrow{
        translate:4px 0;
    }
}

/* ------------------------------------------------------------------------------------------
    Počítač - dvoustrana: fotka na tečkovaném papíře, text na linkách, vazba uprostřed, záložka dole
------------------------------------------------------------------------------------------ */
@media (min-width: 992px){
    .theme-doma .cm-marketing-notebook{
        padding:5rem 3.2rem 8rem;
    }
    .theme-doma .cm-marketing-notebook:first-child{
        padding-top:10rem;
    }
    .theme-doma .cm-marketing-notebook-book{
        max-width:114rem;
    }
    .theme-doma .cm-marketing-notebook-book::before{
        inset:-1.4rem -1.6rem -1.8rem -1.6rem;
        border-radius:2rem;
        box-shadow:0 50px 90px -50px var(--doma-shadow-strong);
    }
    /* záložka - leží pod stránkami, vykukuje dole */
    .theme-doma .cm-marketing-notebook-ribbon{
        position:absolute;
        left:61%;
        bottom:-6.6rem;
        width:2.6rem;
        height:9.6rem;
        background:linear-gradient(180deg, var(--nb-ribbon-from), var(--nb-ribbon-to));
        clip-path:polygon(0 0, 100% 0, 100% 100%, 50% 86%, 0 100%);
    }
    .theme-doma .cm-marketing-notebook-spread{
        display:flex;
        perspective:2400px;
    }
    .theme-doma .cm-marketing-notebook-photo-page,
    .theme-doma .cm-marketing-notebook-text-page{
        flex:1 1 50%;
    }

    /* stránka s vlepenou fotkou - tečkovaný papír, stín u hřbetu */
    .theme-doma .cm-marketing-notebook-photo-page{
        display:flex;
        align-items:center;
        justify-content:center;
        padding:4.6rem 5.8rem 4.6rem 4.4rem;
        border-radius:1.2rem .3rem .3rem 1.2rem;
        background-color:var(--palette-paper);
        background-image:linear-gradient(90deg, transparent 86%, var(--nb-photo-spine)), radial-gradient(circle, var(--nb-dots) 1.2px, transparent 1.6px);
        background-size:100% 100%, 26px 26px;
    }
    .theme-doma .cm-marketing-notebook-photo{
        padding:1rem;
        border-radius:.6rem;
        box-shadow:0 22px 40px -26px var(--doma-shadow-strong);
    }
    .theme-doma .cm-marketing-notebook-photo::before,
    .theme-doma .cm-marketing-notebook-photo::after{
        width:9.6rem;
        height:2.6rem;
        rotate:-32deg;
    }
    .theme-doma .cm-marketing-notebook-photo::before{
        top:-1.2rem;
        left:-1.8rem;
    }
    .theme-doma .cm-marketing-notebook-photo::after{
        bottom:-1rem;
        right:-1.8rem;
    }

    /* stránka s textem - linkovaný papír s okrajovou linkou, otáčí se kolem hřbetu */
    .theme-doma .cm-marketing-notebook-text-page{
        display:flex;
        flex-direction:column;
        align-items:flex-start;
        justify-content:center;
        padding:5.4rem 5.6rem 5.4rem 9.2rem;
        border-radius:.3rem 1.2rem 1.2rem .3rem;
        background-color:var(--nb-page);
        background-image:linear-gradient(90deg, var(--nb-spine), transparent 12%), repeating-linear-gradient(180deg, transparent 0 35px, var(--nb-line) 35px 36px);
        background-position:0 0, 0 18px;
        transform-origin:0 50%;
        backface-visibility:hidden;
    }
    .theme-doma .cm-marketing-notebook-text-page::before{
        content:"";
        position:absolute;
        left:6.4rem;
        top:0;
        bottom:0;
        width:2px;
        background-color:var(--nb-margin-line);
    }
    .theme-doma .cm-marketing-notebook-text{
        font-size:1.8rem;
        line-height:3.6rem;
    }
    .theme-doma .cm-marketing-notebook-text > *{
        margin:1.6rem 0 0;
    }
    .theme-doma .cm-marketing-notebook-text :is(h1,h2){
        margin-top:.8rem;
        font-size:clamp(3.2rem, 3.4vw, 4.8rem);
        line-height:1.12;
    }
    .theme-doma .cm-marketing-notebook-text :is(h3,h4,h5,h6){
        font-size:3.2rem;
        line-height:3.6rem;
    }
    .theme-doma .cm-marketing-notebook-text-page .btn{
        min-height:5.4rem;
        margin-top:2.2rem;
        padding:0 2.8rem;
        font-size:1.6rem;
    }

    .theme-doma .cm-marketing-notebook-rings{
        left:50%;
        top:2.6rem;
        bottom:2.6rem;
        width:4.6rem;
        margin-left:-2.3rem;
        flex-direction:column;
    }
    .theme-doma .cm-marketing-notebook-rings > span{
        height:7px;
        background:linear-gradient(90deg, var(--nb-ring-dark), var(--nb-ring-light) 50%, var(--nb-ring-dark));
        box-shadow:0 2px 2px color-mix(in srgb, var(--palette-brown) 25%, transparent);
    }

    /* zrcadlený banner (každý druhý) - fotka vpravo, text vlevo, stránka se otáčí kolem pravého hřbetu */
    .theme-doma .cm-marketing-notebook:nth-child(even) .cm-marketing-notebook-spread{
        flex-direction:row-reverse;
    }
    .theme-doma .cm-marketing-notebook:nth-child(even) .cm-marketing-notebook-ribbon{
        left:28%;
    }
    .theme-doma .cm-marketing-notebook:nth-child(even) .cm-marketing-notebook-photo-page{
        padding:4.6rem 4.4rem 4.6rem 5.8rem;
        border-radius:.3rem 1.2rem 1.2rem .3rem;
        background-image:linear-gradient(90deg, var(--nb-photo-spine), transparent 14%), radial-gradient(circle, var(--nb-dots) 1.2px, transparent 1.6px);
    }
    .theme-doma .cm-marketing-notebook:nth-child(even) .cm-marketing-notebook-photo::before{
        left:auto;
        right:-1.8rem;
        rotate:32deg;
    }
    .theme-doma .cm-marketing-notebook:nth-child(even) .cm-marketing-notebook-photo::after{
        right:auto;
        left:-1.8rem;
        rotate:32deg;
    }
    .theme-doma .cm-marketing-notebook:nth-child(even) .cm-marketing-notebook-text-page{
        padding:5.4rem 6.4rem 5.4rem 9.2rem;
        border-radius:1.2rem .3rem .3rem 1.2rem;
        background-image:linear-gradient(90deg, transparent 88%, var(--nb-spine)), repeating-linear-gradient(180deg, transparent 0 35px, var(--nb-line) 35px 36px);
        transform-origin:100% 50%;
    }

    /* banner bez fotky - jen stránka s textem, vazba vlevo */
    .theme-doma .cm-marketing-notebook.cm-marketing-notebook-no-photo .cm-marketing-notebook-book{
        max-width:80rem;
    }
    .theme-doma .cm-marketing-notebook.cm-marketing-notebook-no-photo .cm-marketing-notebook-text-page{
        padding-right:5.6rem;
        border-radius:.3rem 1.2rem 1.2rem .3rem;
        background-image:linear-gradient(90deg, var(--nb-spine), transparent 12%), repeating-linear-gradient(180deg, transparent 0 35px, var(--nb-line) 35px 36px);
        transform-origin:0 50%;
    }
    .theme-doma .cm-marketing-notebook.cm-marketing-notebook-no-photo .cm-marketing-notebook-rings{
        left:0;
        justify-content:space-around;
    }
    .theme-doma .cm-marketing-notebook.cm-marketing-notebook-no-photo .cm-marketing-notebook-rings > span:nth-child(even){
        display:none;
    }
}

/* ------------------------------------------------------------------------------------------
    Telefon a tablet - jedna linkovaná stránka se spirálou nahoře, fotka (na telefonu na výšku) nad textem
------------------------------------------------------------------------------------------ */
@media (max-width: 991px){
    .theme-doma .cm-marketing-notebook{
        padding:4rem 2.2rem;
    }
    .theme-doma .cm-marketing-notebook:first-child{
        padding-top:7rem;
    }
    .theme-doma .cm-marketing-notebook:last-child{
        padding-bottom:7rem;
    }
    .theme-doma .cm-marketing-notebook-book{
        max-width:64rem;
        margin-top:1.4rem;
        perspective:1400px;
    }
    .theme-doma .cm-marketing-notebook-book::before{
        inset:-.8rem -.9rem -1.4rem -.9rem;
        border-radius:1.6rem;
        box-shadow:0 36px 60px -36px var(--doma-shadow-strong);
    }
    .theme-doma .cm-marketing-notebook-ribbon{
        display:none;
    }
    .theme-doma .cm-marketing-notebook-spread{
        display:flex;
        flex-direction:column;
        align-items:stretch;
        padding:4rem 2.2rem 3.4rem 4.4rem;
        border-radius:.6rem .6rem 1.2rem 1.2rem;
        background-color:var(--nb-page);
        background-image:repeating-linear-gradient(180deg, transparent 0 31px, var(--nb-line) 31px 32px);
        background-position:0 14px;
        transform-origin:50% 0;
        backface-visibility:hidden;
    }
    .theme-doma .cm-marketing-notebook-spread::before{
        content:"";
        position:absolute;
        left:3rem;
        top:0;
        bottom:0;
        width:2px;
        background-color:var(--nb-margin-line);
    }
    .theme-doma .cm-marketing-notebook-photo-page{
        margin-bottom:2.2rem;
    }
    .theme-doma .cm-marketing-notebook-text-page{
        display:flex;
        flex-direction:column;
        align-items:flex-start;
    }
    .theme-doma .cm-marketing-notebook-photo{
        padding:.8rem;
        border-radius:.5rem;
        box-shadow:0 18px 30px -20px var(--doma-shadow-strong);
    }
    .theme-doma .cm-marketing-notebook-dark .cm-marketing-notebook-photo{
        box-shadow:0 18px 30px -16px color-mix(in srgb, #000 50%, transparent);
    }
    .theme-doma .cm-marketing-notebook-photo::before,
    .theme-doma .cm-marketing-notebook-photo::after{
        width:7.6rem;
        height:2.2rem;
        rotate:-30deg;
    }
    .theme-doma .cm-marketing-notebook-photo::before{
        top:-1rem;
        left:-1.4rem;
    }
    .theme-doma .cm-marketing-notebook-photo::after{
        bottom:-.8rem;
        right:-1.4rem;
    }
    .theme-doma .cm-marketing-notebook:nth-child(even) .cm-marketing-notebook-photo::before{
        left:auto;
        right:-1.4rem;
        rotate:30deg;
    }
    .theme-doma .cm-marketing-notebook:nth-child(even) .cm-marketing-notebook-photo::after{
        right:auto;
        left:-1.4rem;
        rotate:30deg;
    }
    .theme-doma .cm-marketing-notebook-text{
        font-size:1.65rem;
        line-height:3.2rem;
    }
    .theme-doma .cm-marketing-notebook-text > *{
        margin:1.2rem 0 0;
    }
    .theme-doma .cm-marketing-notebook-text :is(h1,h2){
        margin-top:.4rem;
        font-size:3.1rem;
        line-height:1.14;
    }
    .theme-doma .cm-marketing-notebook-text :is(h3,h4,h5,h6){
        font-size:2.7rem;
        line-height:3.2rem;
    }
    .theme-doma .cm-marketing-notebook-text-page .btn{
        min-height:5rem;
        margin-top:1.6rem;
        padding:0 2.4rem;
        font-size:1.55rem;
    }
    .theme-doma .cm-marketing-notebook-rings{
        left:2.2rem;
        right:2.2rem;
        top:-1.4rem;
        flex-direction:row;
    }
    .theme-doma .cm-marketing-notebook-rings > span{
        width:7px;
        height:2.6rem;
        background:linear-gradient(180deg, var(--nb-ring-dark), var(--nb-ring-light) 50%, var(--nb-ring-dark));
        box-shadow:1px 2px 2px color-mix(in srgb, var(--palette-brown) 25%, transparent);
    }
    .theme-doma .cm-marketing-notebook-rings > span:nth-child(n+12){
        display:none;
    }
}
@media (max-width: 767px){
    .theme-doma .cm-marketing-notebook-photo img{
        aspect-ratio:4 / 5;
    }
}

/*
    Otevření sešitu při posunu. S animation-timeline: sešit vyjede zespodu a stránka s textem
    se přetočí z kolmé polohy na místo (telefon: celá stránka se překlopí kolem spirály nahoře).
    Bez něj to samé spustí IntersectionObserver (třídy -observe a -open z MarketingBannerNotebook.js).
    Při omezeném pohybu je sešit rovnou otevřený.
*/
@keyframes cm-notebook-rise{
    from{
        opacity:0;
        transform:translateY(50px);
    }
}
@keyframes cm-notebook-turn{
    from{
        transform:rotateY(-104deg);
    }
}
@keyframes cm-notebook-turn-back{
    from{
        transform:rotateY(104deg);
    }
}
@keyframes cm-notebook-flip{
    from{
        opacity:.4;
        transform:rotateX(-96deg);
    }
}

@media (prefers-reduced-motion: no-preference){
    @supports (animation-timeline: view()){
        .theme-doma .cm-marketing-notebook:not(.cm-marketing-diary) .cm-marketing-notebook-book{
            animation:cm-notebook-rise linear backwards;
            animation-timeline:view();
            animation-range:entry 0% entry 40%;
        }
    }
    .theme-doma .cm-marketing-notebook-observe .cm-marketing-notebook-book{
        opacity:0;
        transform:translateY(50px);
        transition:opacity .9s var(--doma-ease), transform .9s var(--doma-ease);
    }
    .theme-doma .cm-marketing-notebook-observe.cm-marketing-notebook-open .cm-marketing-notebook-book{
        opacity:1;
        transform:none;
    }
}

@media (prefers-reduced-motion: no-preference) and (min-width: 992px){
    @supports (animation-timeline: view()){
        .theme-doma .cm-marketing-notebook:not(.cm-marketing-diary) .cm-marketing-notebook-text-page{
            animation:cm-notebook-turn linear backwards;
            animation-timeline:view();
            animation-range:entry 30% entry 95%;
        }
        .theme-doma .cm-marketing-notebook:nth-child(even):not(.cm-marketing-notebook-no-photo) .cm-marketing-notebook-text-page{
            animation-name:cm-notebook-turn-back;
        }
    }
    .theme-doma .cm-marketing-notebook-observe .cm-marketing-notebook-text-page{
        transform:rotateY(-104deg);
        transition:transform 1.3s .35s var(--doma-ease);
    }
    .theme-doma .cm-marketing-notebook-observe:nth-child(even):not(.cm-marketing-notebook-no-photo) .cm-marketing-notebook-text-page{
        transform:rotateY(104deg);
    }
    .theme-doma .cm-marketing-notebook-observe.cm-marketing-notebook-open .cm-marketing-notebook-text-page{
        transform:none;
    }
}

@media (prefers-reduced-motion: no-preference) and (max-width: 991px){
    @supports (animation-timeline: view()){
        .theme-doma .cm-marketing-notebook:not(.cm-marketing-diary) .cm-marketing-notebook-book{
            animation-range:entry 0% entry 30%;
        }
        .theme-doma .cm-marketing-notebook:not(.cm-marketing-diary) .cm-marketing-notebook-spread{
            animation:cm-notebook-flip linear backwards;
            animation-timeline:view();
            animation-range:entry 10% entry 60%;
        }
    }
    .theme-doma .cm-marketing-notebook-observe .cm-marketing-notebook-spread{
        opacity:.4;
        transform:rotateX(-96deg);
        transition:opacity 1s .3s var(--doma-ease), transform 1.2s .3s var(--doma-ease);
    }
    .theme-doma .cm-marketing-notebook-observe.cm-marketing-notebook-open .cm-marketing-notebook-spread{
        opacity:1;
        transform:none;
    }
}


/* ==========================================================================================
    VÍC BANNERŮ – JEDEN SEŠIT, JEHOŽ STRÁNKY SE PŘI POSUNU OTÁČEJÍ (MarketingBannerDiary)
    Dvoustrany leží na sobě, sešit drží na obrazovce (sticky) a průběh posunu sekce otáčí pravé
    stránky kolem hřbetu (telefon: celé stránky nahoru kolem spirály). Na rubu otáčené stránky je
    fotka další dvoustrany, takže po otočení se další dvoustrana odkryje bez švu. Průběh nastavuje
    UseMarketingDiary.js (--nb-rise, --nb-open, --nb-top, --nb-turn) a jen s třídou -ready - bez JS
    a při omezeném pohybu jsou dvoustrany statické pod sebou, každá s vlastními deskami.
    Desky celého sešitu mají jednu barvu, fotka je vždy vlevo a text vpravo.
========================================================================================== */
.theme-doma .cm-marketing-diary{
    --nb-step:75vh;
}
.theme-doma .cm-marketing-diary .cm-marketing-diary-spread{
    display:grid;
}
.theme-doma .cm-marketing-diary-leaf{
    position:relative;
    display:grid;
    min-width:0;
}
.theme-doma .cm-marketing-diary-leaf > *{
    grid-area:1 / 1;
}
.theme-doma .cm-marketing-diary .cm-marketing-diary-back{
    display:none;
}
.theme-doma .cm-marketing-diary-cover{
    position:absolute;
    background-color:var(--nb-cover);
}

/* statické dvoustrany (bez JS, omezený pohyb) - každá s vlastními deskami, bez záložky a sticky */
.theme-doma .cm-marketing-diary:not(.cm-marketing-diary-ready) .cm-marketing-notebook-book::before,
.theme-doma .cm-marketing-diary:not(.cm-marketing-diary-ready) .cm-marketing-notebook-ribbon,
.theme-doma .cm-marketing-diary:not(.cm-marketing-diary-ready) .cm-marketing-diary-spacer{
    display:none;
}

/* sešit - dvoustrany na sobě, viditelná je ta aktuální (a pod otáčenou stránkou další) */
.theme-doma .cm-marketing-diary-ready .cm-marketing-diary-cover{
    display:none;
}
.theme-doma .cm-marketing-diary-ready .cm-marketing-diary-sticky{
    position:sticky;
    top:var(--nb-top, 12vh);
}
.theme-doma .cm-marketing-diary-ready .cm-marketing-diary-spacer{
    height:calc(var(--nb-steps, 1) * var(--nb-step));
}
.theme-doma .cm-marketing-diary-ready .cm-marketing-diary-stack{
    display:grid;
}
.theme-doma .cm-marketing-diary-ready .cm-marketing-diary-stack > *{
    grid-area:1 / 1;
}
/*
    Otočené a další dvoustrany jsou průhledné (ne visibility:hidden - prohlížeč by viditelnost odkazů
    uvnitř přepočítal až o snímek později a fokus z klávesnice by na ně nešel). Fokus z nich bere inert.
*/
.theme-doma .cm-marketing-diary-ready .cm-marketing-diary-stack > .cm-marketing-diary-spread:is([data-state="past"],[data-state="future"]){
    opacity:0;
}
/* skrytá a spodní dvoustrana nebere myš - klik patří vždy aktuální dvoustraně */
.theme-doma .cm-marketing-diary-ready .cm-marketing-diary-spread:not([data-state="current"]){
    pointer-events:none;
}
.theme-doma .cm-marketing-diary-ready .cm-marketing-notebook-book{
    opacity:var(--nb-rise, 1);
    transform:translateY(calc((1 - var(--nb-rise, 1)) * 50px));
}

@media (min-width: 992px){
    .theme-doma .cm-marketing-diary .cm-marketing-diary-spread{
        grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    }
    .theme-doma .cm-marketing-diary-cover{
        inset:-1.4rem -1.6rem -1.8rem -1.6rem;
        border-radius:2rem;
        box-shadow:0 50px 90px -50px var(--doma-shadow-strong);
    }
    .theme-doma .cm-marketing-diary:not(.cm-marketing-diary-ready) .cm-marketing-diary-spread + .cm-marketing-diary-spread{
        margin-top:12rem;
    }

    /* pravá stránka (list) se otáčí kolem hřbetu doleva, první se navíc při vjezdu otevře */
    .theme-doma .cm-marketing-diary-ready .cm-marketing-diary-leaf{
        transform-origin:0 50%;
        transform-style:preserve-3d;
        transform:rotateY(calc(var(--nb-turn, 0) * -180deg));
    }
    .theme-doma .cm-marketing-diary-ready .cm-marketing-diary-spread:first-child .cm-marketing-diary-leaf{
        transform:rotateY(calc(var(--nb-turn, 0) * -180deg - (1 - var(--nb-open, 1)) * 104deg));
    }
    .theme-doma .cm-marketing-diary-ready .cm-marketing-diary-back{
        display:flex;
        transform:rotateY(180deg);
        backface-visibility:hidden;
    }
    /* za polovinou otočení zakrývá levou stránku rub listu - vlastní fotka dvoustrany už není potřeba */
    .theme-doma .cm-marketing-diary-ready .cm-marketing-diary-spread[data-flipped] > .cm-marketing-notebook-photo-page{
        visibility:hidden;
    }
}

@media (max-width: 991px){
    .theme-doma .cm-marketing-diary{
        --nb-step:70vh;
    }
    .theme-doma .cm-marketing-diary .cm-marketing-diary-spread{
        grid-template-columns:minmax(0,1fr);
    }
    .theme-doma .cm-marketing-diary-cover{
        inset:-.8rem -.9rem -1.4rem -.9rem;
        border-radius:1.6rem;
        box-shadow:0 36px 60px -36px var(--doma-shadow-strong);
    }
    .theme-doma .cm-marketing-diary:not(.cm-marketing-diary-ready) .cm-marketing-diary-spread + .cm-marketing-diary-spread{
        margin-top:7rem;
    }
    /* banner bez fotky má na telefonu jen text, prázdná stránka s fotkou se nekreslí */
    .theme-doma .cm-marketing-diary-spread.cm-marketing-notebook-no-photo > .cm-marketing-notebook-photo-page{
        display:none;
    }

    /* celá stránka se otáčí nahoru kolem spirály, první se navíc při vjezdu překlopí dolů na místo */
    .theme-doma .cm-marketing-diary-ready .cm-marketing-diary-stack{
        perspective:1400px;
    }
    .theme-doma .cm-marketing-diary-ready .cm-marketing-diary-spread{
        transform:rotateX(calc(var(--nb-turn, 0) * -100deg));
    }
    .theme-doma .cm-marketing-diary-ready .cm-marketing-diary-spread:first-child{
        opacity:calc(.4 + .6 * var(--nb-open, 1));
        transform:rotateX(calc(var(--nb-turn, 0) * -100deg - (1 - var(--nb-open, 1)) * 96deg));
    }
    /* sešit drží na obrazovce celý - fotka na výšku se zmenší, aby se stránka vešla */
    .theme-doma .cm-marketing-diary-ready .cm-marketing-notebook-photo img{
        max-height:36vh;
    }
}


/* ==========================================================================================
    NEWSLETTER – LÍSTEK S LINKOU
    Máslový lístek s linkami a páskou. Formulář se čte jako věta, kterou člověk dopíše
    („Ahoj, oslovuj mě … a piš mi na …“), pole jsou světlé řádky s linkou. Chyba: vlnka pod
    polem, popisek zčervená, hláška u pole. Po odeslání ho nahradí potvrzení se zlatou fajfkou.
    Prvek Newsletter ve sloupci se stylem karta je bez vlastního lístku (lístkem je karta).
========================================================================================== */
.theme-doma .cm-newsletter-note{
    --note-paper:var(--palette-butter);
    --note-line:color-mix(in srgb, var(--doma-gold-deep) 20%, transparent);
    --note-field:color-mix(in srgb, var(--palette-paper) 62%, transparent);
    --note-ink:var(--palette-brown);
    --note-muted:color-mix(in oklab, var(--palette-brown) 80%, var(--palette-butter));
    --note-kicker:color-mix(in oklab, var(--doma-gold-deep) 70%, var(--palette-brown));
    --note-error:color-mix(in oklab, var(--palette-terracotta) 62%, var(--palette-brown));
    --note-error-line:var(--palette-terracotta);

    container-type:inline-size;
    position:relative;
    box-sizing:border-box;
    /* samostatný lístek se neroztahuje přes celou sekci - věta by se rozpadla do dálky */
    max-width:76rem;
    margin:0 auto;
    padding:4.2rem 4.2rem 3.6rem;
    border-radius:.8rem .8rem 3rem .8rem;
    background-color:var(--note-paper);
    background-image:repeating-linear-gradient(180deg, transparent 0 37px, var(--note-line) 37px 38px);
    background-position:0 24px;
    rotate:-.8deg;
    box-shadow:0 32px 60px -36px var(--doma-shadow-strong);
    color:var(--note-ink);
    text-align:left;
}
/* páska */
.theme-doma .cm-newsletter-note::before{
    content:"";
    position:absolute;
    top:-1.4rem;
    right:4.4rem;
    width:11rem;
    height:2.8rem;
    background-color:color-mix(in srgb, var(--palette-lavender) 95%, transparent);
    rotate:4deg;
    box-shadow:0 2px 4px var(--doma-shadow-tape);
}
/* ve sloupci se stylem karta je lístkem karta sama */
.theme-doma .cm-style-card .cm-newsletter-note{
    max-width:none;
    padding:0;
    border-radius:0;
    background:none;
    rotate:none;
    box-shadow:none;
}
.theme-doma .cm-style-card .cm-newsletter-note::before{
    display:none;
}

/* nadtitulek a nadpis (newsletter pod blogem a článkem) */
.theme-doma .cm-newsletter-note-kicker{
    width:fit-content;
    margin:0;
    font-family:var(--font-accent, cursive);
    font-size:2.8rem;
    font-weight:700;
    line-height:1;
    color:var(--note-kicker);
    rotate:-2deg;
    transform-origin:0 50%;
}
.theme-doma .cm-newsletter-note-headline{
    margin:1rem 0 0;
    font-family:var(--font-heading, inherit);
    font-size:3rem;
    font-weight:400;
    line-height:1.2;
    letter-spacing:-.005em;
    color:var(--note-ink);
    text-wrap:balance;
}
.theme-doma .cm-newsletter-note-headline + .cm-newsletter-note-form,
.theme-doma .cm-newsletter-note-headline + .cm-newsletter-note-done{
    margin-top:1.8rem;
}

/* formulář jako věta */
.theme-doma .cm-newsletter-note-form{
    display:flex;
    flex-direction:column;
    gap:1.4rem;
    margin:0;
}
.theme-doma .cm-newsletter-note-row{
    display:flex;
    flex-wrap:wrap;
    align-items:baseline;
    gap:.4rem 1.4rem;
}
.theme-doma .cm-newsletter-note-label{
    flex:none;
    max-width:100%;
    margin:0;
    font-family:var(--font-accent, cursive);
    font-size:3rem;
    font-weight:700;
    line-height:1.2;
    color:var(--note-ink);
}
.theme-doma .cm-newsletter-note-field{
    position:relative;
    flex:1 1 24rem;
    min-width:0;
    display:flex;
}
.theme-doma .cm-newsletter-note-field :is(input,select){
    display:block;
    width:auto;
    min-width:0;
    min-height:4.6rem;
    margin:0;
    padding:0 1.2rem;
    border:0;
    border-bottom:2px solid var(--note-ink);
    border-radius:.8rem .8rem 0 0;
    background-color:var(--note-field);
    box-shadow:none;
    color:var(--note-ink);
    font-family:var(--font-body, inherit);
    font-size:1.8rem;
    line-height:1.2;
    transition:background-color .4s, border-color .4s, box-shadow .4s;
}
/* šířku dává pole, ne vlastní šířka inputu (20 znaků) - ta by na úzkém telefonu s předvolbou přetekla */
.theme-doma .cm-newsletter-note-field input{
    flex:1 1 auto;
    width:0;
}
.theme-doma .cm-newsletter-note-field input::placeholder{
    color:color-mix(in oklab, var(--palette-brown) 66%, var(--palette-butter));
    opacity:1;
}
.theme-doma .cm-newsletter-note-field :is(input,select):focus{
    outline:none;
    border-bottom-color:var(--doma-gold-deep);
    background-color:var(--palette-paper);
}
.theme-doma .cm-newsletter-note-field :is(input,select):focus-visible{
    box-shadow:0 2px 0 0 var(--doma-gold-deep);
}
/* telefon - předvolba a číslo na jednom řádku */
.theme-doma .cm-newsletter-note-tel{
    gap:.8rem;
}
.theme-doma .cm-newsletter-note-tel select{
    flex:none;
    padding-right:.6rem;
    cursor:pointer;
}

/* chyba u pole */
.theme-doma .cm-newsletter-note-invalid .cm-newsletter-note-label{
    color:var(--note-error);
}
.theme-doma .cm-newsletter-note-invalid .cm-newsletter-note-field input{
    border-bottom-color:transparent;
    background-color:color-mix(in srgb, var(--palette-paper) 78%, transparent);
}
.theme-doma .cm-newsletter-note-wave{
    position:absolute;
    left:0;
    right:0;
    bottom:-4px;
    width:100%;
    height:9px;
    overflow:visible;
    pointer-events:none;
}
.theme-doma .cm-newsletter-note-wave path{
    fill:none;
    stroke:var(--note-error-line);
    stroke-width:2.6;
    vector-effect:non-scaling-stroke;
}
.theme-doma .cm-newsletter-note-error{
    flex:1 1 100%;
    display:flex;
    align-items:flex-start;
    gap:1rem;
    margin:.8rem 0 0;
    font-size:1.55rem;
    font-weight:700;
    line-height:1.5;
    color:var(--note-error);
}
.theme-doma .cm-newsletter-note-error-icon{
    flex:none;
    margin-top:.1rem;
}
.theme-doma .cm-newsletter-note-error-icon path:first-child{
    fill:var(--palette-paper);
    stroke:var(--note-error-line);
    stroke-width:1.7;
}
.theme-doma .cm-newsletter-note-error-icon path:nth-child(2){
    fill:none;
    stroke:var(--note-error);
    stroke-width:2.2;
    stroke-linecap:round;
}
.theme-doma .cm-newsletter-note-error-icon circle{
    fill:var(--note-error);
}

/* tlačítko a poznámka o odhlášení */
.theme-doma .cm-newsletter-note-actions{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:1.4rem 2.2rem;
    margin-top:1rem;
}
.theme-doma .cm-newsletter-note-actions .btn,
.theme-doma .cm-newsletter-note-actions .btn:hover{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:1rem;
    min-width:0;
    min-height:5.6rem;
    padding:0 2.8rem;
    border:0;
    border-radius:999px;
    background:var(--palette-brown);
    color:var(--palette-cream) !important;
    box-shadow:none;
    font-size:1.6rem;
}
.theme-doma .cm-newsletter-note-actions .btn :is(div,p){
    display:inline;
    margin:0;
}
.theme-doma .cm-newsletter-note-pencil{
    flex:none;
}
.theme-doma .cm-newsletter-note-pencil path{
    fill:none;
    stroke:var(--palette-lightgold);
    stroke-width:1.8;
    stroke-linejoin:round;
}
.theme-doma .cm-newsletter-note-hint{
    flex:1 1 22rem;
    margin:0;
    font-size:1.4rem;
    line-height:1.5;
    color:var(--note-muted);
}

/* odesláno - potvrzení nahradí formulář a zůstane */
.theme-doma .cm-newsletter-note-done{
    display:flex;
    align-items:center;
    gap:2.4rem;
}
/* fokus sem přejde jen programově (aby se po zmizení tlačítka neztratil), není to ovládací prvek */
.theme-doma .cm-newsletter-note-done:focus{
    outline:none;
}
.theme-doma .cm-newsletter-note-check{
    flex:none;
}
.theme-doma .cm-newsletter-note-check circle{
    fill:var(--palette-paper);
    opacity:.7;
}
.theme-doma .cm-newsletter-note-check path{
    fill:none;
    stroke:var(--doma-gold-deep);
    stroke-width:6;
    stroke-linecap:round;
    stroke-linejoin:round;
}
.theme-doma .cm-newsletter-note-done-content{
    min-width:0;
}
.theme-doma .cm-newsletter-note-done-title{
    margin:0;
    font-family:var(--font-heading, inherit);
    font-size:2.8rem;
    line-height:1.2;
    color:var(--note-ink);
}
.theme-doma .cm-newsletter-note-done-text{
    margin:.8rem 0 0;
    font-size:1.65rem;
    line-height:1.6;
    color:var(--note-muted);
}

/* úzký lístek (telefon, úzký sloupec) - popisky nad poli, tlačítko přes celou šířku */
@container (max-width: 480px){
    .theme-doma .cm-newsletter-note-row{
        flex-direction:column;
        align-items:stretch;
        gap:.6rem;
    }
    .theme-doma .cm-newsletter-note-field{
        flex:none;
    }
    .theme-doma .cm-newsletter-note-label{
        font-size:2.7rem;
    }
    .theme-doma .cm-newsletter-note-actions .btn{
        width:100%;
    }
    .theme-doma .cm-newsletter-note-done{
        flex-direction:column;
        align-items:flex-start;
        gap:1.2rem;
    }
    .theme-doma .cm-newsletter-note-check{
        width:7.6rem;
        height:7.6rem;
    }
}

/* newsletter pod blogem a článkem - lístek v toku stránky */
.theme-doma .cm-newsletter-section{
    position:relative;
    box-sizing:border-box;
    max-width:78.4rem;
    margin:0 auto;
    padding:8rem 3.2rem 12rem;
}

@media (max-width: 767px){
    .theme-doma .cm-newsletter-note{
        padding:3.6rem 2.4rem 2.8rem;
        border-radius:.6rem .6rem 2.6rem .6rem;
        background-image:repeating-linear-gradient(180deg, transparent 0 35px, var(--note-line) 35px 36px);
        background-position:0 22px;
        rotate:-1deg;
    }
    .theme-doma .cm-newsletter-note::before{
        right:3.6rem;
        width:9.6rem;
        height:2.6rem;
        top:-1.3rem;
    }
    .theme-doma .cm-newsletter-note-kicker{
        font-size:2.6rem;
    }
    .theme-doma .cm-newsletter-note-headline{
        font-size:2.6rem;
    }
    .theme-doma .cm-newsletter-note-field :is(input,select){
        min-height:4.8rem;
        font-size:1.7rem;
    }
    .theme-doma .cm-newsletter-section{
        padding:6rem 1.6rem 9rem;
    }
}

/* lístek po odeslání se jemně zhoupne a fajfka se dokreslí */
@keyframes cm-note-wobble{
    0%,100%{rotate:-1.4deg;}
    30%{rotate:1.2deg;}
    60%{rotate:-2.2deg;}
}
@keyframes cm-note-draw{
    to{stroke-dashoffset:0;}
}
@media (prefers-reduced-motion: no-preference){
    .theme-doma .cm-newsletter-note-sent:not(.cm-style-card .cm-newsletter-note){
        animation:cm-note-wobble .8s .5s ease-in-out both;
    }
    .theme-doma .cm-newsletter-note-check path{
        stroke-dasharray:100;
        stroke-dashoffset:100;
        animation:cm-note-draw 1.4s .4s cubic-bezier(.65,0,.35,1) forwards;
    }
}