/* ==========================================================
   SpellClock Website
   Responsive Stylesheet
   Version 1.0
   ========================================================== */


/* ==========================================================
   Large Desktop
   ≤ 1600px
   ========================================================== */

@media (max-width:1600px) {

    :root {

        --container: 1200px;

    }

}


/* ==========================================================
   Desktop
   ≤ 1400px
   ========================================================== */

@media (max-width:1400px) {

    .hero-grid {

        gap: 4rem;

    }

    #crystal-container {

        width: 460px;

    }

}


/* ==========================================================
   Laptop
   ≤ 1200px
   ========================================================== */

@media (max-width:1200px) {

    :root {

        --container: 1080px;

    }

    .features-grid,
    .technology-grid,
    .games-grid {

        grid-template-columns: repeat(2, 1fr);

    }

    .why-grid {

        grid-template-columns: repeat(2, 1fr);

    }

    .stats-grid {

        grid-template-columns: repeat(2, 1fr);

    }

    .footer-grid {

        grid-template-columns: 1fr 1fr;

    }

    .showcase-layout {

        grid-template-columns: 1fr;

        gap: 3rem;

    }

    .showcase-column {

        flex-direction: row;

    }

}

/* ==========================================================
   Tablet Landscape
   ≤ 992px
   ========================================================== */

@media (max-width:992px) {

    .hero-grid {

        grid-template-columns: 1fr;

        text-align: center;

    }

    .hero-content {

        order: 2;

    }

    .hero-visual {

        order: 1;

    }

    .hero-buttons {

        justify-content: center;

    }

    #crystal-container {

        width: 360px;

    }

    .games-grid,
    .features-grid,
    .technology-grid,
    .why-grid {

        grid-template-columns: 1fr;

    }

    .promo-card {

        flex-direction: column;

        text-align: center;

    }

    .timeline {

        padding-left: 0;

    }

    .timeline::before {

        display: none;

    }

    .timeline-item {

        flex-direction: column;

    }

    .timeline-number {

        margin-bottom: 1rem;

    }

}

/* ==========================================================
   Tablet Portrait
   ≤ 768px
   ========================================================== */

@media (max-width:768px) {

    .navbar .container {

        min-height: 72px;

    }

    .mobile-menu-toggle {

        display: block;

    }

    .nav-links {

        display: none;

    }

    .nav-links.active {

        display: flex;

        position: absolute;

        left: 0;

        top: 72px;

        width: 100%;

        flex-direction: column;

        padding: 2rem;

        background: #091013;

        border-top: 1px solid rgba(255, 255, 255, .08);

    }

    .section {

        padding: 6rem 0;

    }

    .download-card {

        padding: 3rem 2rem;

    }

    .phone-preview img {

        width: 280px;

    }

}

/* ==========================================================
   Large Phones
   ≤ 576px
   ========================================================== */

@media (max-width:576px) {

    h1 {

        font-size: 2.8rem;

    }

    h2 {

        font-size: 2rem;

    }

    .hero-buttons {

        flex-direction: column;

    }

    .btn {

        width: 100%;

    }

    .stats-grid {

        grid-template-columns: 1fr;

    }

    .showcase-column {

        flex-direction: column;

    }

    .footer-grid {

        grid-template-columns: 1fr;

        text-align: center;

    }

    .footer-logo {

        margin-inline: auto;

    }

}

/* ==========================================================
   Small Phones
   ≤ 400px
   ========================================================== */

@media (max-width:400px) {

    .container {

        width: 94%;

    }

    h1 {

        font-size: 2.4rem;

    }

    .download-card {

        padding: 2rem 1.5rem;

    }

    .hero-badge {

        font-size: .72rem;

        letter-spacing: 1px;

    }

}