/* assets — responsive overrides; base reset & WebKit foundation in style.css */
@layer components {

    /* Mobile - Small screens */
    @media (max-width: 1100px) {
        @keyframes pushMore {
            0% {
                height: 67.5vh;
            }

            100% {
                height: 160vh;
            }
        }

        @keyframes pushLess {
            0% {
                height: 160vh;
            }

            100% {
                height: 67.5vh;
            }
        }

        @keyframes pushMoreSign {
            0% {
                height: 70vh;
            }

            100% {
                height: 130vh;
            }
        }

        @keyframes pushLessSign {
            0% {
                height: 130vh;
            }

            100% {
                height: 70vh;
            }
        }

        :root {
            --text-size-extra: 5vh;
            --text-size-large: 2vh;
            --text-size-medium: 1.75vh;
            --text-size-regular: 1.25vh;
            --text-size-small: 1vh;
            --carousel-item-width: 40vw;
            --carousel-item-height: 40vw;
            --carousel-2-item-height: 35vw;
            --carousel-gap: 4vw;
            --carousel-nav-offset: 2vw;
            --carousel-visible-items: 2;
            --carousel-dot-size: 2vw;
            --carousel-dot-gap: 2vw;
            --carousel-dot-bottom-offset: -6vh;
        }

        .menu {
            padding: 3vh 5vw 2vh;
            /* background-color: #fff; */
        }

        .banner {
            margin: 10.9vh 0 0vh;
        }

        /* .banner div {
            flex-direction: column;
        } */

        .right-bar #ideasJourchin,
        .right-bar #aboutUs,
        .right-bar #arvanehSign,
        .right-bar #arvanehRech,
        #verticalLine,
        #ideaSubmit,
        #arvanehLogo,
        #flowerButton {
            display: none;
        }

        .topBanner {
            display: flex;
            margin: 2vh auto 0vh;
            width: 70vw;
            gap: 5vh 0;
            flex-direction: column;
            justify-content: flex-start;
            padding-top: 7.5vh;
        }

        .topBanner p{
            font-size: var(--text-size-large) !important;
        }

        #verticalLineM {
            display: block;
        }

        #arvanehShape {
            /* position: fixed; */
            right: 25vw;
            width: 50vw;
            z-index: -1;
            /* top: 30vh; */
        }

        #hamburgarMenu {
            /* padding: 0.5vh !important; */
            display: flex !important;
            /* override .hidden from style.css */
            align-items: center;
            justify-content: center;
            background-color: transparent !important;
            /* border-radius: 15px !important; */
        }

        .carousel {
            width: 90vw;
            margin: 5vh auto;
        }

        .carousel-nav {
            width: 3vh;
        }

        .carousel-2 {
            width: 90vw;
            margin: 0 auto;
        }

        .carousel-2 .carousel-item img {
            height: fit-content;
            /* border-radius: 20px; */
        }

        .card {
            margin: 7.5vh auto;
            padding: 5vh 3.5vh;
            justify-content: center;
            font-size: var(--text-size-large);
        }

        .card #left {
            display: none;
        }

        .card #right {
            width: 100%;
        }

        #prize,
        #prizeSign {
            width: calc(80vw + 2.5vh);
            height: 67.5vh;
            margin: 5vh auto;
            padding: 5vh 3.5vh;
            justify-content: flex-end;
            flex-direction: column-reverse;
            align-items: center;
        }

        #prizeSign{
            height: 55vh;
        }

        #prizeImage,
        #prizeImageSign {
            margin: 0;
            margin-bottom: -5vh;
            width: auto;
            max-width: 65%;
            height: auto;
            max-height: 35vh;
        }

        #prizeImageSign {
            margin-bottom: -2.5vh;
        }

        #prizeExplain,
        #prizeExplainSign {
            width: 100%;
            justify-content: flex-start;
            padding: 0 0 3vh 0;
            gap: 1.5vh 0;
        }

        #prizeExplainText,
        #prizeExplainTextSign {
            margin: 0;
            padding: 0;
            font-size: var(--text-size-large);
        }

        #moreBtn,
        #moreBtnSign {
            font-size: var(--text-size-large);
            padding-right: 2.5vw;
        }

        #moreBtnSign {
            justify-content: start;
            padding-left: 0;
        }

        #prizeExplain img, #prizeExplainSign img{
            width: 3vh;
            margin-right: 0.5vh;
        }

        #footer {
            margin: 10vh auto 3vh;
        }

        #footer span {
            margin: 2vh auto;
        }

        #medalPic {
            top: 13vh;
        }

        #upIcon {
            width: 5vw;
        }
    }

    /* Carousel 2: same 65vw / 30vw / 15vh on mobile */
    @media (max-width: 600px) {
        .carousel-2 {
            height: calc(var(--carousel-2-item-height) + 5vh);
        }
    }

    /* Mobile - Medium screens */
    @media (min-width: 481px) and (max-width: 576px) {
        /* :root {
        --carousel-item-width: 38vw;
        --carousel-item-height: 38vw;
        --carousel-gap: 3.5vw;
        --carousel-visible-items: 2;
    } */
    }

    /* Tablet - Small */
    @media (min-width: 577px) and (max-width: 768px) {
        /* :root {
        --carousel-item-width: 28vw;
        --carousel-item-height: 28vw;
        --carousel-gap: 2.5vw;
        --carousel-nav-offset: 1.5vw;
        --carousel-visible-items: 3;
        --carousel-dot-size: 1.2vw;
        --carousel-dot-gap: 1.2vw;
        --carousel-dot-bottom-offset: -4vh;
    }

    .carousel,
    .carousel-2 {
        width: 92vw;
        height: calc(var(--carousel-item-height) + 6vh);
    } */
    }

    /* Tablet - Large */
    @media (min-width: 769px) and (max-width: 992px) {
        /* :root {
        --carousel-item-width: 22vw;
        --carousel-item-height: 22vw;
        --carousel-gap: 2vw;
        --carousel-visible-items: 4;
        --carousel-dot-size: 1vw;
        --carousel-dot-gap: 1vw;
    }

    .carousel,
    .carousel-2 {
        width: 90vw;
    } */
    }

    /* Desktop - Medium */
    @media (min-width: 993px) and (max-width: 1200px) {
        /* :root {
        --carousel-item-width: 17vw;
        --carousel-item-height: 17vw;
        --carousel-gap: 1.8vw;
        --carousel-visible-items: 5;
    } */
    }

    /* Desktop - Large */
    @media (min-width: 1201px) and (max-width: 1600px) {
        /* :root {
        --carousel-item-width: 15vw;
        --carousel-item-height: 15vw;
        --carousel-gap: 1.5vw;
        --carousel-visible-items: 5;
    } */
    }

    /* Desktop - Extra Large */
    @media (min-width: 1601px) {
        /* :root {
        --carousel-item-width: 240px;
        --carousel-item-height: 240px;
        --carousel-gap: 24px;
        --carousel-dot-size: 12px;
        --carousel-dot-gap: 12px;
        --carousel-visible-items: 5;
    }

    .carousel,
    .carousel-2 {
        max-width: 1600px;
    } */
    }

    /* Landscape orientation for tablets */
    @media (max-width: 768px) and (orientation: landscape) {
        /* :root {
        --carousel-item-height: 25vh;
        --carousel-item-width: 25vh;
    }

    .carousel,
    .carousel-2 {
        height: calc(var(--carousel-item-height) + 4vh);
    } */
    }

    /* Accessibility - Reduced motion */
    @media (prefers-reduced-motion: reduce) {

        .carousel-track,
        .carousel-item img,
        .carousel-nav,
        .carousel-dot {
            transition: none;
        }

        .carousel-track {
            scroll-behavior: auto;
        }
    }

    /* Accessibility - High contrast */
    @media (prefers-contrast: high) {
        .carousel-dot {
            border: 2px solid currentColor;
        }
    }

    /* Print styles */
    @media print {

        .carousel-nav,
        .carousel-dots,
        .lightbox-overlay {
            display: none !important;
        }

        .carousel-track {
            position: static;
            transform: none !important;
        }

        .carousel-item {
            page-break-inside: avoid;
        }
    }
}