/* 
    Theme name: Magic Drones
    Version: 2.0
    Description: WordPress šablona pro společnost Magic Drones.
    Author: Petr Svoboda
*/


:root {
    --logo-blue: rgb(41, 212, 255);
    --logo-purple: rgb(155, 121, 241);

    --page-color: rgb(41, 212, 255);
    --text-color: black;

    --dark-blue-background: rgb(4, 5, 22);

    --black: rgb(13, 13, 13);


    --header-font: 'Noto Sans', sans-serif;
    --main-font: 'Montserrat', sans-serif;
}

*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--main-font);
    background-color: var(--dark-blue-background);
    color: white;
    line-height: 1.6;


    min-height: 100vh;
    display: grid;
    /* grid-template-rows: auto 1fr auto; */
    grid-template-rows: 1fr auto;

    position: relative;
    overflow-x: hidden;
}

/* ! EXPAND ON CLICK IMAGES */
.scrim {
    /* BACKGROUND */
    background-color: var(--dark-blue-background) !important;
}

/* ! ----------------------------------------------- */
/* ! ------------ OPAKUJÍCÍ SE STYLY --------------- */
/* ! ----------------------------------------------- */

/* From Uiverse.io by jawad_8494 */
.super-button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 8px 28px;
    background: linear-gradient(145deg, #0f0f0f, #1c1c1c);
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 100px;
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.5px;
    cursor: pointer;
    overflow: hidden;
    transition: all 0.4s ease-in-out;
    box-shadow: 0 0 20px rgba(0, 255, 255, 0.1);
    backdrop-filter: blur(8px);
    z-index: 1;

    text-decoration: none;
    text-align: center;

    &::before {
        content: "";
        position: absolute;
        top: -50%;
        left: -50%;
        width: 200%;
        height: 200%;
        background: conic-gradient(from 0deg, #00ffff, #ff00ff, #00ffff);
        animation: rotate 5s linear infinite;
        z-index: -2;
    }

    &::after {
        content: "";
        position: absolute;
        inset: 2px;
        background: #0a0a0a;
        border-radius: inherit;
        z-index: -1;
    }

    &:hover {
        transform: scale(1.05);
        box-shadow: 0 0 40px rgba(0, 255, 255, 0.2);
    }

    &:hover .arrow {
        transform: translateX(6px);
    }

    .arrow {
        width: 22px;
        height: 22px;
        transition: transform 0.3s ease-in-out;
        color: #00ffff;
    }
}

@keyframes glow-pulse {
    from {
        /* Jemnější stín - azurová vlevo, purpurová vpravo */
        text-shadow:
            -5px 0 15px rgba(0, 255, 255, 0.6),
            5px 0 15px rgba(255, 0, 255, 0.6),
            0 0 20px rgba(255, 255, 255, 0.2);
    }

    to {
        /* Intenzivnější záře s větším rozptylem */
        text-shadow:
            -8px 0 25px rgba(0, 255, 255, 0.8),
            8px 0 25px rgba(255, 0, 255, 0.8),
            0 0 40px rgba(255, 255, 255, 0.4);
    }
}


h2 {
    font-family: var(--header-font);
    font-size: 25px;
    /* text-transform: uppercase; */
    font-weight: 700;

    position: relative;

    margin-bottom: 20px !important;

    &::after {
        position: absolute;
        bottom: -15px;
        left: 0;

        content: "";
        display: block;
        width: 300px;
        max-width: 80%;
        height: 2px;
        background: linear-gradient(90deg,
                #00ffff,
                #ff00ff);
    }

    &.center {
        display: block;
        width: stretch;
        margin: 0 auto !important;
        margin-bottom: 20px !important;

        text-align: center;

        &::after {
            left: 50%;
            transform: translateX(-50%);
        }
    }
}

.image-form-article>div {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 20px;

    margin: 20px 0;

    .images-container {
        display: flex;
        justify-content: center;
        flex-direction: column;
        gap: 20px;

        figure {
            width: 80%;

            border: 2px solid var(--page-color);
            border-radius: 12px;

            box-shadow: 0px 0px 10px 5px rgba(255, 255, 255, 0.6);

            overflow: hidden;

            img {
                width: 100%;
                height: 100%;
                object-fit: cover;
            }

            &:nth-child(even) {
                margin-left: auto;
            }

            &:nth-child(odd) {
                margin-right: auto;
            }
        }
    }
}

.form-container {
    background: var(--black);

    /* padding: 20px; */

    border-radius: 10px;

    /* margin: auto 20px; */

    .msg {
        padding: 15px;
        border-radius: 4px;
        margin-bottom: 20px;
        font-weight: bold;
        text-align: center;

        &.success {
            background: rgba(0, 255, 0, 0.1);
            color: #00ff00;
            border: 1px solid #00ff00;
        }

        &.error {
            background: rgba(255, 0, 0, 0.1);
            color: #ff4d4d;
            border: 1px solid #ff4d4d;
        }
    }


    .kontaktni-formular {
        width: 100%;
        max-width: 750px;

        margin: 0 auto;

        display: flex;
        flex-direction: column;
        gap: 20px;

        padding: 20px;
        /* Tmavé pozadí formuláře */
        color: #ffffff;
        /* Bílá barva textu */

        border-radius: 8px;

        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);

        .form-row {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;

            place-items: stretch;
        }

        /* Společný styl pro všechny skupiny polí */
        .form-group {
            display: flex;
            flex-direction: column;
            gap: 5px;

            label {
                font-weight: 600;
            }

            /* Styling pro inputy, select a textareu */
            input[type="text"],
            input[type="email"],
            input[type="tel"],
            input[type="date"],
            select,
            textarea {
                box-sizing: border-box !important;

                all: unset;

                width: 100%;
                height: 50px;
                padding: 12px;
                background-color: #2a2a2a;
                border: 1px solid #444;
                border-radius: 4px;
                color: #ffffff;
                font-size: 1rem;
                transition: border-color 0.3s ease, box-shadow 0.3s ease;

                border-color: var(--page-color);


                &::placeholder {
                    color: #888;
                }

                /* Efekt při kliknutí/aktivitě s využitím tvé proměnné */
                &:focus {
                    outline: none;
                    box-shadow: 0 0 5px 2px var(--page-color);
                }
            }

            /* Specifický fix pro šipku u selectu v tmavém režimu */
            select option {
                background: #2a2a2a;
                color: #fff;
            }
        }

        /* Poznámka o povinných polích */
        em {
            display: block;
            color: #bbb;
            font-size: 0.9rem;
        }

        textarea {
            height: auto !important;
        }

        /* Tlačítko pro odeslání */
        button[type="submit"] {
            width: 100%;
            max-width: 100%;

            height: fit-content;

            padding: 10px 15px;
            background-color: var(--page-color);
            color: var(--text-color);
            border: none;
            border-radius: 4px;
            font-size: 1.1rem;
            font-weight: bold;
            cursor: pointer;
            transition: opacity 0.3s ease, transform 0.1s ease;

            &:hover {
                opacity: 0.9;
            }

            &:active {
                transform: scale(0.98);
            }
        }

        /* Úprava reCAPTCHA boxu pro mobilní zařízení */
        .g-recaptcha {
            display: flex;
            justify-content: flex-start;

            div {
                scale: 0.9;
            }
        }
    }
}

@media screen and (max-width: 1000px) {
    .form-container {
        overflow-x: hidden;
    }

    .image-form-article>div {
        grid-template-columns: 1fr !important;

    }

    .kontaktni-formular {
        .form-row {
            grid-template-columns: 1fr !important;
        }
    }

    .g-recaptcha {
        transform: scale(0.85);
        /* Zmenší box na cca 255px */
        transform-origin: 0 0;
        /* Ukotví zmenšení vlevo nahoře */
        width: 100%;
        /* overflow: hidden; */
    }
}

main ul {
    list-style: none;
    list-style-position: inside;
    padding-left: 20px;


    li {
        display: flex;
        align-items: flex-start;
    }

    li::before {
        content: "\f105";
        font-family: "FontAwesome";
        color: var(--page-color);

        margin-right: 10px;
        flex-shrink: 0;

        font-weight: 900;

        line-height: inherit;
    }
}

/* ! ----------------------------------------------- */
/* ! -------------------- HEADER ------------------- */
/* ! ----------------------------------------------- */



header {
    width: 100%;
    position: absolute;
    z-index: 1000;

    /* background-color: rgba(4, 5, 22, 0.55); */

    background: linear-gradient(to bottom, rgba(4, 5, 22, 0.85), rgba(4, 5, 22, 0.0));


    nav#desktop-nav {

        width: 100%;
        max-width: 1300px;
        margin: 0 auto;

        height: 85px;

        display: flex;
        justify-content: flex-start;
        align-items: stretch;
        gap: 40px;


        /* background-color: red; */

        padding: 10px 20px;

        .nav-logo {
            img {
                /* width: 100px; */
                height: 60px;
            }
        }

        .nav-menu {
            /* height: 100%; */
            flex-grow: 1;

            >ul {
                height: 100%;
                display: flex;
                align-items: stretch;
                gap: 30px;

                list-style: none;

                /* position: relative; */

                &>li::before {
                    display: none !important;
                }

                li {
                    height: 100%;

                    display: flex;
                    align-items: center;

                    position: relative;

                    a {
                        text-decoration: none;
                        color: white;

                        text-transform: uppercase;
                        font-weight: 600;
                        font-size: 14px;
                        /* letter-spacing: 1px; */

                        position: relative;
                    }

                    ul {
                        display: none;
                    }

                    &:hover ul {
                        position: absolute;
                        top: 100%;
                        left: 0;

                        display: flex;
                        flex-direction: column;
                        gap: 10px !important;
                        padding: 15px 10px !important;

                        background: white;

                        width: max-content;
                        height: max-content;

                        background:
                            linear-gradient(var(--dark-blue-background), var(--dark-blue-background)) padding-box,
                            conic-gradient(#00ffff, #ff00ff, #00ffff) border-box;

                        border: 2px solid transparent;
                        border-radius: 12px;

                        z-index: 100;

                        li {
                            height: max-content;

                            padding: 5px 10px;

                            a {
                                display: block;
                                position: relative;

                                height: max-content;
                            }
                        }
                    }

                    a::after {
                        content: "";
                        display: block;
                        position: absolute;
                        left: 0;
                        bottom: -4px;

                        width: 100%;
                        height: 2px;

                        background: linear-gradient(90deg,
                                #00ffff,
                                #ff00ff);

                        transform: scaleX(0);
                        transform-origin: left;
                        transition: transform 0.25s ease;

                        z-index: 10;
                    }

                    a:hover::after {
                        transform: scaleX(1);
                    }

                    &.current_page_item a::after,
                    &.current-menu-ancestor>a::after {
                        transform: scaleX(1);
                    }

                    .new-label {
                        font-weight: 600;
                        line-height: 1;
                        white-space: nowrap;

                        color: #ff00ff;
                    }
                }
            }
        }

        .contact-lang {
            display: flex;
            align-items: center;
            gap: 20px;

            position: relative;

            a {
                text-decoration: none;
                color: white;

                font-weight: 600;
                font-size: 14px;

                text-transform: uppercase;
            }

            span#lang-icon {
                height: 100%;

                display: flex;
                align-items: center;

                cursor: pointer;

                padding: 10px;

                position: relative;

                display: none;
            }

            #flags {
                display: none;
            }

            span:hover+#flags,
            #flags:hover {
                display: flex;

                position: absolute;
                top: 100%;
                right: 0;

                flex-direction: column;
                gap: 5px;
                padding: 10px 20px;

                background: white;

                width: max-content;
                height: max-content;

                background:
                    linear-gradient(var(--dark-blue-background), var(--dark-blue-background)) padding-box,
                    conic-gradient(#00ffff, #ff00ff, #00ffff) border-box;

                border: 2px solid transparent;
                border-radius: 12px;

                z-index: 100;


                list-style-type: none;

                li {
                    height: max-content;

                    a {
                        text-decoration: none;
                        color: white;

                        display: flex;
                        align-items: center;
                        gap: 10px;

                        font-weight: 600;

                        img {
                            width: 20px;
                        }

                        &:hover {
                            color: #00ffff;
                        }
                    }



                }
            }
        }

        #mobile-icon {
            display: none;
        }
    }

    nav#mobile-nav {
        display: none;
    }
}

@media screen and (max-width: 1000px) {
    nav {
        justify-content: space-between;

        .nav-menu {
            display: none !important;
        }

        .contact-lang {
            display: none !important;
        }
    }

    nav#desktop-nav {
        justify-content: space-between !important;
        align-items: center !important;

        #mobile-icon {
            display: block !important;

            span {
                font-size: 35px;
                cursor: pointer;
            }
        }
    }

    nav#mobile-nav.active {
        position: absolute;
        top: 85px;
        right: 0;

        height: calc(100vh - 85px);
        width: clamp(300px, 50%, 500px);
        padding: 50px 40px 50px 20px;

        display: flex !important;
        justify-content: flex-start;
        flex-direction: column;
        gap: 30px;

        background: linear-gradient(var(--dark-blue-background), var(--dark-blue-background)) padding-box,
            conic-gradient(#00ffff, #ff00ff, #00ffff) border-box;

        border-left: 2px solid transparent;
        border-radius: 12px;

        z-index: 100;

        ul#primary-menu-mobile {
            display: flex;
            flex-direction: column;
            gap: 10px;

            list-style: none;

            li {
                a {
                    text-decoration: none;
                    color: white;

                    text-transform: uppercase;
                    font-weight: 600;
                    font-size: 16px;
                    /* letter-spacing: 1px; */

                    position: relative;
                }

                a::after {
                    content: "";
                    display: block;
                    position: absolute;
                    left: 0;
                    bottom: -4px;


                    width: 100%;
                    height: 2px;

                    background: linear-gradient(90deg,
                            #00ffff,
                            #ff00ff);

                    transform: scaleX(0);
                    transform-origin: left;
                    transition: transform 0.25s ease;


                    z-index: 10;
                }

                a:hover::after {
                    transform: scaleX(1);
                }

                &.current_page_item a::after,
                &.current-menu-ancestor>a::after {
                    transform: scaleX(1);
                }

                .new-label {
                    font-weight: 600;
                    line-height: 1;
                    white-space: nowrap;

                    color: #ff00ff;
                }

                ul {
                    display: flex;
                    flex-direction: column;
                    gap: 10px;

                    margin-left: 20px;
                    margin-top: 10px;

                    list-style: none;
                }
            }
        }

    }

    #mobile-contact-button {
        /* display: block !important; */
        width: max-content;

        margin: 0 auto;
        padding: 10px 40px;
    }

    #mobile-lang-selector {
        width: 60%;
        display: flex;
        align-items: center;
        justify-content: space-evenly;
        gap: 10px;

        margin: 0 auto;

        list-style: none;

        display: none;

        li a {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 10px;

            color: white;
            text-decoration: none;

            img {
                width: 20px;
            }
        }
    }


}



/* ! ----------------------------------------------- */
/* ! ----------------- FRONT PAGE ------------------ */
/* ! ----------------------------------------------- */

main.front-page {
    section {
        width: 100%;

        padding: 20px 30px;

        .container {
            width: 100%;
            max-width: 1300px;
            margin: 0 auto;
        }


        &.show-types-section {
            /* padding: 50px 0; */

            background-image: url(./imgs/waves/blue_lines.png);
            background-size: cover;
            background-position: center;


            .show-types {
                display: grid;
                grid-template-columns: 1fr 1fr;
                gap: 50px;

                min-height: 60vh;
                /* max-height: 650px; */

                >div:nth-child(1) {
                    height: 100%;
                }


                .special-images-container {
                    position: relative;

                    height: 100%;
                    min-height: 60vh;


                    figure {
                        border: 2px solid white;
                        border-radius: 12px;

                        overflow: hidden;

                        object-fit: cover;

                        position: absolute;

                        box-shadow: 0px 0px 20px 5px rgba(255, 255, 255, 0.6)
                    }

                    .foreground-img {
                        width: 70%;
                        height: 70%;

                        top: 0;
                        right: 0;
                    }

                    .background-img {
                        width: 50%;
                        height: 50%;

                        bottom: 0;
                        left: 0;
                    }

                    img {
                        width: 100%;
                        height: 100%;

                        object-fit: cover;
                    }
                }
            }
        }

        &.indoor-outdoor-section {
            padding: 50px 0;

            /* background-color: var(--black); */

            h2 {
                width: 100%;
                text-align: center;

                margin-bottom: 20px;
            }

            .special-border-images {
                width: 100%;
                display: flex;
                align-items: center;
                justify-content: space-evenly;
                flex-wrap: wrap;

                z-index: 100;

                figure {
                    /* Tvůj původní základ pro obrázek */
                    border: 2px solid white;
                    border-radius: 12px;
                    position: relative;
                    width: 200px;
                    height: 200px;
                    /* background: #000; */
                    margin: 20px;
                    /* Zvětšený margin, aby se tam rámeček vešel */

                    /* Důležité změny: */
                    overflow: visible;
                    /* Aby modré rohy mohly "vykouknout" ven */
                    display: flex;
                    align-items: center;
                    justify-content: center;
                }

                /* Společný základ pro ty vnější modré "L" rohy */
                figure::before,
                figure::after {
                    content: "";
                    position: absolute;
                    width: 90%;
                    /* Širší než samotný figure */
                    height: 90%;
                    /* Vyšší než samotný figure */
                    border: 2px solid #3498db;
                    box-shadow: 0 0 12px rgba(52, 152, 219, 0.8);
                    pointer-events: none;
                    z-index: -1;
                    /* Volitelné: dá rámeček "pod" obrázek, pokud chceš */

                    background: transparent;
                }

                /* Horní levý roh - vysunutý ven */
                figure::before {
                    top: -15px;
                    /* Posun nahoru mimo bílý rám */
                    left: -15px;
                    /* Posun doleva mimo bílý rám */
                    border-right: none;
                    border-bottom: none;
                    border-top-left-radius: 25px;
                }

                /* Dolní pravý roh - vysunutý ven */
                figure::after {
                    bottom: -15px;
                    /* Posun dolů mimo bílý rám */
                    right: -15px;
                    /* Posun doprava mimo bílý rám */
                    border-left: none;
                    border-top: none;
                    border-bottom-right-radius: 25px;
                }

                /* Pokud máš uvnitř <img>, zajisti, aby neschoval ty rohy */
                figure img,
                figure picture {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                    border-radius: 10px;
                    /* Aby lícoval s bílým rámečkem */
                }
            }

            p {
                width: 60%;
                text-align: center;

                margin: 0 auto;
            }
        }

        &.blue-glow-box-section {
            background: url(./imgs/waves/purple_lines.jpg);
            background-size: cover;
            background-position: center;

            .blue-glow-box {
                width: 100%;
                max-width: 1200px;
                margin: 0 auto;

                display: grid;
                grid-template-columns: 7fr 8fr;
                align-items: center;
                gap: 50px;

                background-color: rgba(6, 21, 35, 0.85);
                box-shadow: 0 0 30px 20px rgba(52, 152, 219, 0.8);

                padding: 20px;
                border-radius: 12px;

                img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                    border-radius: 12px;

                    border: 2px solid white;

                    box-shadow: 0 0 10px 5px rgba(215, 220, 222, 0.908);
                }

                div {
                    width: 100%;
                    height: 100%;

                    display: flex;
                    flex-direction: column;
                    gap: 20px;
                }

                a {
                    margin: 0 auto;
                }
            }
        }
    }
}


@media screen and (max-width: 1000px) {
    section.show-types-section .show-types {
        grid-template-columns: 1fr !important;
    }

    section.blue-glow-box-section .blue-glow-box {
        grid-template-columns: 1fr !important;

        img {
            max-height: 400px;
        }
    }
}

main.post-id-16 {
    --page-color: var(--logo-purple) !important;
    --text-color: black;

    .hero-section {
        background-position: bottom;
    }
}

main.post-id-14 {
    --page-color: var(--logo-blue) !important;
    --text-color: black;
}


main {
    .wp-block-button__link {
        all: unset !important;
        cursor: pointer !important;
    }


    section {
        width: 100%;

        padding: 30px 30px;

        .container {
            width: 100%;
            max-width: 1300px;
            margin: 0 auto;
        }

        &.hero-section {
            position: relative;

            min-height: 85vh;

            display: flex;
            justify-content: center;
            align-items: center;

            background: rgba(0, 0, 0, 0.4);


            background-position: center;
            background-size: cover;
            background-repeat: no-repeat;

            >img {
                position: absolute;
                inset: 0;
                width: 100%;
                height: 100%;
                object-fit: cover;
                object-position: center bottom;
                z-index: 0;
            }

            &::before {
                content: "";
                position: absolute;
                inset: 0;
                background: rgba(0, 0, 0, 0.4);
                z-index: 1;
            }

            .container {
                position: relative;

                width: 100%;
                max-width: 1300px;
                margin: 0 auto;

                height: 100%;

                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                gap: 10px;

                text-align: center;

                padding: 100px 50px;

                z-index: 2;

                h1,
                .title {
                    font-size: clamp(45px, 10vw, 80px);
                    text-transform: uppercase;
                    font-weight: 700;

                    font-family: var(--header-font);

                    text-shadow:
                        -8px 0 25px rgba(0, 255, 255, 0.8),
                        8px 0 25px rgba(255, 0, 255, 0.8),
                        0 0 40px rgba(255, 255, 255, 0.4);

                    /* animation: glow-pulse 3s ease-in-out infinite alternate; */
                }

                .subtitle-text {
                    font-size: clamp(20px, 2vw, 30px);
                    font-weight: 600;

                    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);

                    text-shadow:
                        -8px 0 25px rgba(0, 255, 255, 0.8),
                        8px 0 25px rgba(255, 0, 255, 0.8),
                        0 0 40px rgba(255, 255, 255, 0.4);

                    /* animation: glow-pulse 3s ease-in-out infinite alternate; */
                }

                p {
                    font-size: clamp(16px, 2vw, 20px);

                    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);

                    font-weight: 600;
                }

                .wp-block-button__link {
                    all: unset;
                }
            }

            .container>div {
                width: 100%;
                max-width: 1300px;
                margin: 0 auto;

                height: 100%;

                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                gap: 10px;
            }
        }

        &.hero-section-2 {
            .container {
                display: grid;
                grid-template-columns: 1fr 1fr;

                gap: 50px;

                align-items: center;

                h1 {
                    font-size: clamp(45px, 10vw, 60px);
                    text-transform: uppercase;
                    font-weight: 700;

                    font-family: var(--header-font);

                    text-shadow:
                        -8px 0 25px rgba(0, 255, 255, 0.8),
                        8px 0 25px rgba(255, 0, 255, 0.8),
                        0 0 40px rgba(255, 255, 255, 0.4);

                    /* animation: glow-pulse 3s ease-in-out infinite alternate; */
                }

                figure {
                    width: 100%;
                    max-width: 700px;
                    margin: 0 auto;

                    border: 2px solid white;
                    border-radius: 12px;

                    box-shadow: 0px 0px 20px 5px var(--logo-blue);

                    img {
                        width: 100%;
                        height: 100%;
                        object-fit: cover;
                        border-radius: 12px;

                        margin: 0 auto;
                    }
                }


            }
        }

        &.special-images-section {

            /* background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url(./imgs/waves/W-M-5.jpg);
            background-size: cover;
            background-position: center; */

            .show-types {
                display: grid;
                grid-template-columns: 1fr 1fr;
                gap: 50px;

                min-height: 60vh;
                /* max-height: 650px; */

                >div:nth-child(1) {
                    height: 100%;
                }


                .special-images-container {
                    position: relative;

                    height: 100%;
                    min-height: 60vh;


                    figure {
                        border: 2px solid white;
                        border-radius: 12px;

                        overflow: hidden;

                        object-fit: cover;

                        position: absolute;

                        box-shadow: 0px 0px 20px 5px rgba(255, 255, 255, 0.6);
                    }

                    .foreground-img {
                        width: 70%;
                        height: 70%;

                        top: 0;
                        right: 0;
                    }

                    .background-img {
                        width: 50%;
                        height: 45%;

                        bottom: 0;
                        left: 0;
                    }

                    img {
                        width: 100%;
                        height: 100%;

                        object-fit: cover;
                    }
                }

                ul {
                    width: 100%;

                    display: flex;
                    flex-direction: column;
                    gap: 10px;

                    list-style-position: inside;

                    padding-left: 20px;
                }
            }
        }

        /* &.special-images-section.what-is-outside-show-section {
            background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url(./imgs/waves/W-O-1.jpg);
            background-size: cover;
            background-position: center;
        } */

        /* &.special-images-section.trust-section {
            background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url(./imgs/waves/W-O-2.jpg);
            background-size: cover;
            background-position: center;
        } */

        /* &.special-images-section.what-is-inside-show-section {
            background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url(./imgs/waves/W-I-1.jpg);
            background-size: cover;
            background-position: center;
        } */

        &.where-section {
            .container {
                display: flex;
                align-items: stretch;
                justify-content: center;
                gap: 20px;
            }

            /* background-color: var(--black); */

            article.places-container {
                width: 100%;

                display: flex;
                align-items: stretch;
                justify-content: center;
                flex-wrap: wrap;
                gap: 20px;

                .place div {
                    max-width: 180px;

                    height: 100%;

                    display: flex;
                    align-items: stretch;
                    justify-content: flex-start;
                    flex-direction: column;

                    gap: 5px;

                    padding: 5px 20px 10px 20px;

                    border: 2px solid white;
                    border-radius: 12px;
                    background-color: var(--black);

                    box-shadow: 6px 5px 10px 0px var(--page-color);

                    figure {
                        width: 100px;

                        align-self: center;

                        order: 1;

                        margin-bottom: 0;
                    }

                    h4 {
                        width: 100%;
                        text-align: center;

                        font-size: 18px;

                        order: 2;
                    }

                    p {
                        width: 100%;
                        text-align: center;

                        font-size: 14px;

                        order: 3;
                    }

                }
            }


            p {
                width: 60%;
                text-align: center;

                margin: 0 auto;
            }
        }

        &.process-section {
            .container {
                display: flex;
                align-items: stretch;
                justify-content: center;
                gap: 20px;
            }

            /* background-color: var(--black); */

            article.process-container {
                width: 100%;

                /* display: grid;
                grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
                grid-auto-rows: 1fr;
                justify-content: center;
                align-items: stretch;

                column-gap: 30px;
                row-gap: 100px; */

                display: flex;
                justify-content: center;
                align-items: stretch;

                column-gap: 20px;
                row-gap: 100px;
                flex-wrap: wrap;

                padding: 50px 30px 30px 30px;

                .step div {
                    width: 100%;
                    max-width: 180px;
                    height: 100%;

                    display: flex;
                    align-items: stretch;
                    justify-content: start;
                    flex-direction: column;

                    gap: 5px;

                    padding: 30px 20px 10px 20px;

                    border: 2px solid white;
                    border-top: none;
                    border-radius: 12px;

                    box-shadow: 5px 4px 10px 0px var(--page-color);

                    position: relative;


                    h4 {
                        /* width: 100%; */

                        align-self: center;
                        text-align: center;

                        font-size: 70px;

                        padding: 5px 20px;

                        order: 1;

                        position: absolute;
                        top: -70px;
                        left: 50%;
                        transform: translateX(-50%);

                        /* background-color: var(--black); */
                        color: var(--page-color);
                    }

                    figure {
                        width: 100px;

                        align-self: center;

                        order: 1;

                        margin-bottom: 0;
                    }

                    p {
                        width: 100%;
                        text-align: center;

                        font-size: 14px;

                        order: 3;
                    }

                }
            }


            p {
                width: 60%;
                text-align: center;

                margin: 0 auto;
            }
        }

        &.samples-section {
            position: relative;

            .container {
                display: flex;
                align-items: stretch;
                justify-content: center;
                gap: 20px;
            }

            .grid-samples .wp-block-group__inner-container {
                position: relative;
                overflow: hidden;
                /* Ořežeme kraje, aby nevyčnívaly mimo sekci */
                display: block !important;
                padding: 40px 0;
            }

            .carousel-track {
                display: flex;
                transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);
                align-items: center;
                will-change: transform;

                cursor: grab;

                /* Zakáže označování textu/obsahu uvnitř */
                user-select: none;
                -webkit-user-select: none;
                -moz-user-select: none;
                -ms-user-select: none;
            }

            .carousel-track:active {
                cursor: grabbing;
            }

            /* Styl jednotlivých slidů */
            .grid-samples figure.wp-block-image {
                min-width: 50%;
                /* Hlavní fotka zabere 50 % */
                margin: 0 !important;
                padding: 0 10px;
                transition: all 0.6s ease;
                opacity: 0.4;
                transform: scale(0.8);
                /* Vedlejší jsou menší */
                filter: blur(2px);
            }

            /* Aktivní (středový) snímek */
            .grid-samples figure.wp-block-image.is-active {
                opacity: 1;
                transform: scale(1.1);
                /* Hlavní je největší */
                z-index: 2;
                filter: blur(0);
            }

            /* Responzivita pro mobil */
            @media (max-width: 768px) {
                .grid-samples figure.wp-block-image {
                    min-width: 100%;
                    /* Na mobilu jen jedna fotka */
                    transform: scale(1) !important;
                    opacity: 0.3;
                }

                .grid-samples figure.wp-block-image.is-active {
                    opacity: 1;
                }
            }

            /* Šipky (upravený vzhled) */
            .carousel-arrow {
                position: absolute;
                top: 50%;
                transform: translateY(-50%);
                background: #000;
                color: #fff;
                border: none;
                width: 50px;
                height: 50px;
                border-radius: 50%;
                cursor: pointer;
                z-index: 20;
                display: flex;
                align-items: center;
                justify-content: center;
            }

            .arrow-prev {
                left: 5%;
            }

            .arrow-next {
                right: 5%;
            }

            .grid-samples figure img {
                pointer-events: none;
                -webkit-user-drag: none;
                user-select: none;
            }

            &::before {
                content: "";
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);

                width: 100%;
                height: 100%;

                background: var(--page-color);
                background: radial-gradient(circle, var(--page-color) 0%, rgba(4, 5, 22, 1) 60%);

                z-index: -1;
            }
        }

        &.faq-section {
            position: relative;

            .container {
                display: flex;
                align-items: stretch;
                justify-content: center;
                gap: 10px;
            }

            details {
                width: 95%;
                max-width: 1000px;
                border-bottom: 1px solid var(--page-color);
                /* border-radius: 12px; */

                margin: 0 auto;

                summary {
                    width: 100%;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    padding: 10px 20px;
                    cursor: pointer;
                    list-style: none;

                    font-size: 18px;
                    font-weight: 500;


                    &::-webkit-details-marker {
                        display: none;
                    }

                    &::marker {
                        display: none;
                    }

                    /* Vlastní šipka pomocí pseudo-elementu */
                    &::after {
                        content: '\e5e1';
                        /* Hex kód pro arrow_forward_ios */
                        font-family: 'Material Symbols Rounded';
                        font-weight: normal;
                        font-style: normal;
                        font-size: 24px;
                        line-height: 1;
                        letter-spacing: normal;
                        text-transform: none;
                        display: inline-block;
                        white-space: nowrap;
                        word-wrap: normal;
                        direction: ltr;
                        -webkit-font-smoothing: antialiased;

                        /* Animace při otočení */
                        transition: transform 0.3s ease;
                    }
                }

                /* Rotace šipky při otevření details */
                &[open] summary::after {
                    transform: rotate(90deg);
                }

                p {
                    width: 100%;
                    padding: 10px 20px;
                }
            }

        }

        &.form-section {
            position: relative;

            .container {
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 10px;
            }


        }

        &.special-image-section {
            &:nth-child(odd) {
                background: linear-gradient(rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.75)), url(./imgs/waves/W-M-4.jpg);
                background-size: cover;
                background-position: center;
            }

            .container {
                display: grid;
                grid-template-columns: 1fr 1fr;
                gap: 50px;

                place-items: center;

                padding: 25px 10px;

                div {
                    width: 100%;
                }


                figure {
                    width: 100%;
                    max-width: 500px;
                    margin: 0 auto;

                    border: 2px solid white;
                    border-radius: 12px;

                    box-shadow: 0px 0px 20px 5px var(--logo-blue);

                    img {
                        width: 100%;
                        height: 100%;
                        object-fit: cover;
                        border-radius: 12px;
                    }
                }
            }
        }

        &.center-highlighted-box {
            background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url(./imgs/waves/W-M-6.jpg);
            background-size: cover;
            background-position: center;

            .container {
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 20px;

                width: 100%;
                max-width: 800px;

                padding: 30px 20px;

                border: 2px solid var(--logo-blue);
                border-radius: 12px;

                box-shadow: 0px 0px 20px 5px var(--logo-blue);

                background: var(--black);

                text-align: center;
            }
        }

        &.special-boxes-section {
            .boxes-container {
                width: 100%;

                display: flex;
                justify-content: center;
                align-items: stretch;

                column-gap: 50px;
                row-gap: 40px;
                flex-wrap: wrap;

                padding: 30px 20px;

                .box {
                    width: 100%;
                    max-width: 200px;

                    display: flex;
                    align-items: center;
                    justify-content: flex-start;
                    flex-direction: column;

                    padding: 20px 10px;

                    border: 2px solid var(--logo-purple);
                    border-radius: 12px;

                    box-shadow: 0px 0px 20px 5px var(--logo-purple);

                    text-align: center;

                    img {
                        width: 80%;
                        max-width: 100px;

                        object-fit: cover;
                        margin-bottom: 10px;
                    }
                }
            }
        }

        &.reference-section {
            .reference-list {
                width: 100%;
                display: flex;
                align-items: stretch;
                justify-content: center;
                gap: 30px;
                flex-wrap: wrap;

                padding: 30px 20px;

                .reference {
                    width: 100%;
                    max-width: 150px;

                    display: grid;
                    grid-template-rows: 1fr auto;
                    place-items: center;
                    gap: 20px;

                    padding: 20px 10px;

                    border: 2px solid var(--logo-purple);
                    border-radius: 12px;

                    box-shadow: 0px 0px 10px 5px var(--logo-purple);

                    text-align: center;

                    h3 {
                        font-size: 18px;
                        font-weight: 600;
                        margin-bottom: 5px;
                    }

                    img {
                        width: 100%;
                        max-width: 90px;

                        height: max-content;

                        object-fit: contain;
                        margin-bottom: 10px;
                    }
                }
            }
        }


        &.grid-video-samples-section {
            position: relative;

            &::after {
                content: "";
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);

                width: 100%;
                height: 100%;

                background: var(--page-color);
                background: radial-gradient(circle, var(--page-color) 0%, rgba(4, 5, 22, 1) 50%, rgba(4, 5, 22, 0) 100%);

                z-index: -1;
            }

            &:nth-child(3)::after{
                background: var(--logo-purple);
                background: radial-gradient(circle, var(--logo-purple) 0%, rgba(4, 5, 22, 1) 50%, rgba(4, 5, 22, 0) 100%);
            }

            .grid-samples {
                width: 100%;
                max-width: 1000px;
                margin: 0 auto;

                position: relative;

                >div {
                    display: grid;
                    grid-template-columns: repeat(3, 1fr);
                    gap: 20px;
                    padding: 30px 20px;

                    /* === PRVNÍ VIDEO PŘES CELÝ ŘÁDEK === */
                    figure:first-child {
                        grid-column: 1 / -1;
                    }
                }
            }

            /* === YOUTUBE EMBED OPRAVY === */

            figure.wp-block-embed-youtube {
                width: 100%;
                margin: 0;
                aspect-ratio: 16 / 9;
                overflow: hidden;

                border: 3px solid white;
                border-radius: 12px;
            }

            .wp-block-embed,
            .wp-block-embed__wrapper {
                width: 100%;
                max-width: 100%;
            }

            /* WP YouTube Lyte (má inline width) */
            .lyte-wrapper {
                width: 100% !important;
                max-width: 100% !important;
                margin: 0 !important;
            }

            .lyte {
                width: 100% !important;
                height: 100% !important;
            }

            iframe {
                width: 100%;
                height: 100%;
            }

            /* === RESPONSIVE === */

            @media (max-width: 1000px) {
                .grid-samples {
                    max-width: 80vw;

                    >div {
                        grid-template-columns: repeat(1, 1fr);

                        figure:first-child {
                            grid-column: 1 / -1;
                        }
                    }
                }
            }

            @media (max-width: 640px) {
                .grid-samples>div {
                    grid-template-columns: 1fr;

                    figure:first-child {
                        grid-column: 1 / -1;
                    }
                }
            }



            .three-videos-row>div {
                display: grid;
                grid-template-columns: repeat(3, 1fr);
                gap: 20px;
                padding: 15px 20px;
            }

            @media (max-width: 1000px) {
                .three-videos-row {
                    max-width: 80vw;
                    margin: 0 auto;

                    >div {
                        width: 100%;
                        grid-template-columns: repeat(1, 1fr) !important;
                        align-items: center;
                    }
                }
            }

            .container>figure.is-type-video {
                width: 100%;
                max-width: 800px;
                margin: 0 auto;
            }
        }

        &.show-types-section {
            /* display: none; */
            .container {
                width: 100%;
                max-width: 1300px;
                /* display: grid !important;
                grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
				*/
				
				display: flex;
				align-items: stretch;
				justify-content: center;
                gap: 40px;

                article {
                    width: 100%;
                    /* height: 100%; */

                    min-width: 0;

                    display: flex;
                    align-items: center;
                    justify-content: flex-start;
                    flex-direction: column;

                    gap: 10px;

                    padding: 20px;

                    border: 2px solid white;
                    border-radius: 12px;

                    box-shadow: 0px 0px 20px 5px var(--page-color);

                    text-align: center;

                    h2 {
                        font-size: 23px;
                        font-weight: 600;
                        margin-bottom: -5px;
                    }

                    p {
                        font-size: 14px;
                    }

                    img {
                        max-width: 100%;
                        border: 2px solid white;
                        border-radius: 12px;
						
						margin-top: auto;
                    }
                }
            }
        }

        .icon-link {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;


            color: white;
            text-decoration: none;

            font-size: 16px;

            padding: 5px 10px;

            margin-bottom: -5px;


            span {
                background-color: var(--logo-purple);
                border-radius: 50%;

                padding: 10px;

                font-size: 19px;
            }

            a {
                color: white;
                text-decoration: none;
                transition: all 0.3s ease;
            }

            a:hover {
                color: var(--logo-blue);
                text-decoration: underline;
            }
        }



    }
}

main.page:not(.template-page-template-show) {
    section:nth-child(1) {
        margin-top: 100px;
    }
}

@media screen and (max-width: 1000px) {

    section.special-images-section .show-types,
    section.special-images-section .show-types {
        grid-template-columns: 1fr !important;
    }

    section.samples-section article.grid-samples div {
        grid-template-columns: 1fr !important;

        figure:nth-child(1) {
            grid-column: 1 / 2 !important;
            grid-row: 1 / 2;
        }
    }

    section.special-image-section .container,
    section.hero-section-2 .container {
        grid-template-columns: 1fr !important;
    }
}




/* ! ----------------------------------------------- */
/* ! -------------------- OSTATNÍ ------------------- */
/* ! ----------------------------------------------- */

.lyte-wrapper .tT {
    display: none !important;
}


/* ! ----------------------------------------------- */
/* ! -------------------- FOOTER ------------------- */
/* ! ----------------------------------------------- */


footer {
    background-color: #000000;
    color: white;
    /* text-align: center; */
    padding: 20px 0;

    .container {
        width: 100%;
        max-width: 1300px;
        margin: 0 auto;

        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-direction: column;
        gap: 20px;

        padding: 10px 30px;

        .logo-name {
            display: flex;
            align-items: center;
            /* flex-direction: column; */
            gap: 10px;
            flex-wrap: wrap;

            img {
                height: 100px;
            }

            div {
                display: flex;
                align-items: center;
                flex-direction: column;
                gap: 0px;

                text-align: center;

                .footer-title {
                    font-size: 45px;

                    font-weight: 600;

                    text-transform: uppercase;

                    margin-bottom: -5px;

                    line-height: 1;
                }
            }
        }

        .copy {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: flex-start;
            gap: 10px;

            font-size: 0.7rem;


        }
    }
}

@media screen and (max-width: 800px) {
    .logo-name {
        flex-direction: column !important;
    }
}