/* =========================================
   SAN ENGINEERING
   RESPONSIVE STYLES

   Mobile + Tablet
   Full Background Image Design
========================================= */


/* =========================================
   TABLET
========================================= */

@media (max-width: 1000px) {

    /* -----------------------------------------
       NAVIGATION
    ----------------------------------------- */

    .navigation {
        gap: 18px;
    }


    /* -----------------------------------------
       HERO
    ----------------------------------------- */

    .hero-container {
        grid-template-columns: 1fr;
    }


    /*
       No separate hero image is required.
       The main background image is handled
       by the body.
    */

    .hero-visual {
        display: none;
    }


    /* -----------------------------------------
       INTRODUCTION
    ----------------------------------------- */

    .intro-grid {

        grid-template-columns: 1fr;

        gap: 40px;
    }


    .intro-stat {

        padding-left: 0;

        padding-top: 30px;

        border-left: 0;

        border-top:
            1px solid var(--border);
    }


    /* -----------------------------------------
       CAPABILITIES
    ----------------------------------------- */

    .capability-grid {

        grid-template-columns:
            1fr 1fr;
    }


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

    .cta-container {

        flex-direction:
            column;

        align-items:
            flex-start;
    }
}



/* =========================================
   MOBILE
========================================= */

@media (max-width: 760px) {


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

    .header-container {

        min-height:
            70px;
    }


    .navigation {

        display:
            none;
    }


    .menu-button {

        display:
            block;
    }


    /* -----------------------------------------
       BODY BACKGROUND
    ----------------------------------------- */

    /*
       Fixed backgrounds can cause problems
       on some mobile browsers.

       The image still covers the entire
       website, but scrolls naturally.
    */

    body {

        background-attachment:
            scroll;

        background-position:
            center top;

        background-size:
            auto 100%;
    }


    /* -----------------------------------------
       HERO
    ----------------------------------------- */

    .hero {

        min-height:
            85vh;

        padding:
            130px 0 80px;
    }


    .hero h1 {

        letter-spacing:
            -2px;
    }


    .hero-description {

        font-size:
            15px;

        line-height:
            1.8;
    }


    /* -----------------------------------------
       HERO BUTTONS
    ----------------------------------------- */

    .hero-buttons {

        flex-direction:
            column;

        align-items:
            stretch;

        max-width:
            320px;
    }


    .btn {

        width:
            100%;
    }


    /* -----------------------------------------
       SECTIONS
    ----------------------------------------- */

    .section {

        padding:
            80px 0;

        /*
           Keep the background image visible.
           No solid black background.
        */

        background:
            rgba(7, 16, 18, 0.34);
    }


    .section-heading {

        margin-bottom:
            40px;
    }


    /* -----------------------------------------
       CAPABILITIES
    ----------------------------------------- */

    .capability-grid {

        grid-template-columns:
            1fr;
    }


    .capability-card {

        min-height:
            auto;
    }


    .card-number {

        margin-bottom:
            40px;
    }


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

    .footer-container {

        flex-direction:
            column;
    }


    .footer-links {

        flex-wrap:
            wrap;
    }
}



/* =========================================
   SMALL MOBILE
========================================= */

@media (max-width: 480px) {


    /* -----------------------------------------
       CONTAINER
    ----------------------------------------- */

    .container {

        width:
            min(90%, var(--container-width));
    }


    /* -----------------------------------------
       LOGO
    ----------------------------------------- */

    .logo {

        font-size:
            1.15rem;
    }


    .logo span {

        font-size:
            0.7rem;
    }


    /* -----------------------------------------
       HERO
    ----------------------------------------- */

    .hero {

        padding-top:
            115px;
    }


    .hero-label {

        font-size:
            0.65rem;

        letter-spacing:
            2px;
    }


    .hero h1 {

        font-size:
            2.8rem;
    }


    .hero-description {

        margin-top:
            22px;

        font-size:
            0.95rem;
    }


    /* -----------------------------------------
       SECTIONS
    ----------------------------------------- */

    .section-heading h2 {

        font-size:
            2.2rem;
    }


    /* -----------------------------------------
       CARDS
    ----------------------------------------- */

    .capability-card {

        padding:
            25px;
    }


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

    .cta h2 {

        font-size:
            2.3rem;
    }
}