/**
 * Homepage Styles
 * 
 * Extracted from index.astro inline styles
 * Requirements: 3.2
 */

/* Import CSS Variables */
@import url('/styles/variables.css');

/* ===========================================
 * VIDEO CONTAINER
 * =========================================== */
.video-container {
    margin: var(--spacing-2xl, 30px) auto 0;
    border: 3px solid var(--color-primary-dark, #f57c00);
    border-radius: 4px;
    height: 400px;
}

.video-container iframe {
    width: 45%;
    height: 100%;
    float: left;
    margin: 0 var(--spacing-2xl, 30px);
}

/* ===========================================
 * AUDIO ELEMENTS
 * =========================================== */
audio {
    width: 210px;
}

/* ===========================================
 * HOMEPAGE GAME IFRAME
 * =========================================== */
.game-card .game-iframe-sprunki {
    float: left;
    width: 69%;
    margin: 0;
    padding: 0;
    height: 600px;
    background-color: var(--color-bg-white, #fff);
    position: relative;
    background-image: linear-gradient(rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.7)), url(/tw.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

.game .game-l-2 img {
    width: 100% !important;
    height: auto;
    margin: 0 auto;
}

/* ===========================================
 * COMPACT GAME CARDS (HOMEPAGE / TRENDING)
 * =========================================== */
.game--compact {
    padding: 0;
}

.game--compact > a {
    display: block;
    width: 100%;
}

.game__title--ellipsis {
    font-size: 14px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.game--mod img {
    max-height: 150px;
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
}

/* ===========================================
 * ADDTOANY SOCIAL SHARING
 * =========================================== */
@media screen and (max-width: 980px) {
    .a2a_floating_style.a2a_vertical_style {
        display: none;
    }
}

@media screen and (min-width: 980px) {
    .a2a_floating_style.a2a_default_style {
        display: none;
    }
}

/* ===========================================
 * RESPONSIVE STYLES
 * =========================================== */
@media screen and (max-width: 980px) {
    .game-card .game-iframe-sprunki {
        width: 100%;
    }
}

@media screen and (max-width: 768px) {
    audio {
        width: 120px;
    }
    
    .game-card .game-iframe-sprunki {
        height: 330px !important;
    }
    
    .video-container {
        height: 300px;
    }
    
    .video-container iframe {
        width: 94%;
        height: 100%;
        padding: 0;
        margin: var(--spacing-xl, 20px);
    }
    
    .game-info {
        display: none;
    }
    
    footer .container {
        display: block;
    }
}