/* ==========================================================================
   Responsive
   --------------------------------------------------------------------------
   Centralized breakpoint overrides for classes defined in layout.css,
   components.css, and pages.css. Base styles in those files target desktop;
   the max-width queries below scale things down for smaller viewports —
   this is a desktop-first pattern (not mobile-first, despite this file's
   original heading).
   Breakpoints, largest to smallest: 960px (tablet), 768px (mobile),
   640px (small mobile).
   ========================================================================== */

/* ---------- 960px — tablet ---------- */
@media (max-width:960px){

    .contact-grid{

        grid-template-columns:1fr;
    }

    .contact-layout{

        grid-template-columns:1fr;
    }

    .showcase-grid{

        grid-template-columns:1fr;
    }

    .capability-grid{

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

    .overview-grid{

        grid-template-columns:1fr;
    }

    .carousel-image{

        height:300px;
    }

    .carousel-caption{

        max-width:none;

        right:2rem;
    }

}

/* ---------- 768px — mobile ---------- */
@media (max-width:768px){

    .nav-list{display:none}
    .nav-toggle{display:block}
    .container{padding:0 20px;}
    section{padding:3.5rem 0}

    .hero h1{
        font-size:2.4rem;
    }

    .screenshot-grid{
        grid-template-columns:1fr;
    }

    .hero-shot{
        grid-column:auto;
    }

    .site-footer .container{
        flex-direction:column;
        text-align:center;
    }

    .carousel-image{

        height:260px;
    }

    .carousel-caption{

        left:1rem;

        right:1rem;

        bottom:1rem;

        padding:1.1rem 1.25rem;
    }

    .carousel-caption h3{

        font-size:1.15rem;
    }

    .carousel-dots{

        top:1rem;

        right:1rem;
    }

    .carousel-arrow{

        width:36px;

        height:36px;

        font-size:1.2rem;
    }

}

/* ---------- 640px — small mobile ---------- */
@media (max-width:640px){

    .capability-grid{

        grid-template-columns:1fr;
    }

    .carousel-caption p{

        display:none;
    }

}