/* =========================================================
   EILEMA STICKER LANDING PAGE
   ========================================================= */

.com_content, 
.eilema-page {
    
    --blue: #61a4daff;
    --pink: #e18aac;
    --yellow: #ffd20a;
    --white: #fff;
    
    --blue-font: #4ba3e7;

    --dark-pink: #c95f82;
    
    font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
    font-weight: 600;
    
    --mobil-width: 767px;
    
    /* általános oldalbeállítások */
    background: var(--blue);
    color: var(--pink);
    
    background-image: url('/images/page_parts/background_color.png');
    background-repeat: repeat;
    
    .blog-items {
        margin: 0 !important;
    }
    
    .site-grid {
        
        @media (max-width: 767px) {
            grid-gap: 0;
        }
        
        .container-component {
            background-image: 
                url('/images/page_parts/top_right.png'),
                url('/images/band_photos/band_background.jpg');
            background-repeat: 
                no-repeat,
                no-repeat;
            background-position: 
                calc(100% - 55px) top,
                center -35px;
            background-size: 
                25%,
                85% auto;
            background-attachment: 
                fixed,
                fixed;
            @media (max-width: 767px) {
                background-size: 
                    28vw, 
                    110vw;
                background-position: 
                    calc(100% + 22px) top,
                    left top;
            }
        }
    }
    
    div > div > main {
        margin-top: 0;
    }

    .eilema-hero {
        min-height: 450px;
        position: relative;
        
        @media (max-width: 767px) {
            min-height: 192px;
            background: none;
        }
        
        .top-left-link {
            position: absolute;
            top: 0;
            left: 0;
            img {
                display: block;
                width: 250px;
                height: auto;
            }
            @media (max-width: 767px) {
                img {
                    width: 115px;
                }
            }
        }
        
        
    }
}


/* ---------------------------------------------------------
   Hero
   --------------------------------------------------------- */

.com_content .eilema-hero, 
.eilema-page .eilema-hero {
    /* ... */
}


/* ---------------------------------------------------------
   Sticker bemutató
   --------------------------------------------------------- */
.com_content .eilema-album,
.eilema-page .eilema-album {
    
    /*
    display: flex;
    justify-content: center;
    */
    background-image: url('/images/page_parts/section_album_background.png');
    background-repeat: no-repeat;
    background-position: center center;
    /*
    background-size: 100%;
    */
    background-size: 95% 100%;
        
    padding-top: 25px;
    padding-bottom: 25px;
    
    @media (max-width: 767px) {
        /*
        background-size: 280%;
        */
        background-size: auto 100%;
        padding-top: 50px;
        padding-bottom: 50px;
    }
    
    .album-content {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        width: 100%;
        
        /*
        margin-top: 35px;
        margin-bottom: 35px;
        */
        
        @media (max-width: 767px) {
            gap: 10px;
            /*
            justify-content: space-around;
            */
        }
    }
    
    .album-cover {
        flex: 0 0 300px;
        display: block;
        @media (max-width: 767px) {
            flex: 0 0 145px;
            /* display: none; */
        }
    }
    
    .album-cover img {
        display: block;
        width: 90%;
        height: auto;
        border-radius: 2px;
        
        transform: rotate(-3deg);
        
        @media (max-width: 767px) {
            width: 100%;
        }
        
    }
    
    .album-player {
        flex: 0 0 350px;
        
        @media (max-width: 767px) {
            flex: unset;
        }
        
        
        .album-player-desktop {
            display: block;
            
            @media (max-width: 767px) {
                display: none;
            }
        }
        .album-player-mobile {
            display: none;
            
            @media (max-width: 767px) {
                display: block;
            }
        }
    }

}




/* ---------------------------------------------------------
   CTA
   --------------------------------------------------------- */

.com_content .eilema-cta,
.eilema-page .eilema-cta {
    /* ... */
}


/* ---------------------------------------------------------
   Footer / egyéb
   --------------------------------------------------------- */
.com_content .eilema-footer,
.eilema-page .eilema-footer {

        min-height: 178px;
        background-image: 
            url('/images/page_parts/footer.png'),
            url('/images/page_parts/white_background.png');
        background-size: 100vw auto, auto;
        background-position: center top, center 60px;
        background-repeat: no-repeat, repeat-x;
        
        position: relative;
        
        .follow-container { 
            display: flex; 
            align-items: center; 
            position: relative; 
            min-height: 150px;
            
            @media (max-width: 767px) {
                display: -webkit-box; 
                position: absolute;
                bottom: 17px;
                width: 100%;
            }
        } 
        .follow-image { 
            display: flex; 
            align-items: center; 
            .follow-desktop {
                display: block;
            }
            .follow-mobile {
                display: none;
            }
            @media (max-width: 767px) {
                display: grid;
                width: 100%;
                .follow-desktop {
                    display: none;
                }
                .follow-mobile {
                    display: block;
                    margin-bottom: 40px;
                }
            }
        } 
        .follow-image img { 
            display: block; 
            width: 280px; 
            height: auto; 
            margin-left: 42px;
            @media (max-width: 767px) {
                margin: auto;
            }
        } 
        .social-container { 
            position: absolute; 
            left: 50%; 
            transform: translateX(-50%); 
            display: flex; 
            justify-content: center; 
            align-items: center; 
        } 
        .social-icons { 
            display: flex; 
            justify-content: center; 
            align-items: 
            center; 
            gap: 20px; 
        } 
        .social-icons a { 
            display: block; 
        } 
        .social-icons img { 
            display: block; 
            width: 35px; 
            height: 35px; 
            object-fit: contain; 
            
            @media (max-width: 767px) {
                width: 45px; 
                height: 45px; 
            }
        }
        
        .copyright {
            position: absolute;
            left: 46px;
            bottom: 0;
            height: 35px;
            color: var(--blue-font);
            opacity: 0.7;
            font-size: 80%;
            
            @media (max-width: 767px) {
                bottom: 10px;
                left: auto;
                width: 100%;
                font-size: 60%;
                text-align: center;
            }
        }
        
        .scratch {
            background-image: url('/images/page_parts/scratch.png');
            background-size: 80%;
            background-position: right bottom;
            background-repeat: no-repeat;
            
            position: absolute;
            right: 37px;
            bottom: 21px;
            width: 107px;
            height: 35px;
            
            @media (max-width: 767px) {
                display: none;
            }
        }
        
        @media (max-width: 767px) {
            background-size: 100vw auto;
        }
}