/* ==========================================================
   Coralina Edge Network
   File: css/responsive.css
   Version: 1.0
   ========================================================== */

/* ---------- Desktop XL ---------- */

@media (max-width:1600px){

    :root{

        --content-width:1400px;

    }

    main{

        padding:32px;

    }

}

/* ---------- Large Desktop ---------- */

@media (max-width:1400px){

    .gauges-grid{

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

    }

    .middle-grid{

        display:grid;

        grid-template-columns:2fr 1fr;

        gap:24px;

    }

    .stats-grid{

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

    }

}

/* ---------- Laptop ---------- */

@media (max-width:1200px){

    .topbar{

        padding:0 24px;

    }

    .logo{

        width:200px;

    }

    .brand-text h1{

        font-size:24px;

    }

    .hero{

        grid-template-columns:1fr;

    }

    .hero-right{

        width:100%;

    }

    .middle-grid{

        grid-template-columns:1fr;

    }

    .sidebar{

        display:grid;

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

        gap:24px;

    }

}

/* ---------- Tablet ---------- */

@media (max-width:992px){

    main{

        padding:24px;

    }

    .topbar{

        flex-direction:column;

        justify-content:center;

        align-items:flex-start;

        gap:16px;

        height:auto;

        padding:20px 24px;

    }

    .top-status{

        width:100%;

        justify-content:space-between;

    }

    .gauges-grid{

        grid-template-columns:1fr;

    }

    .panel-header{

        flex-direction:column;

        align-items:flex-start;

        gap:12px;

    }

    .legend{

        width:100%;

        justify-content:flex-start;

        flex-wrap:wrap;

    }

    .stats-grid{

        grid-template-columns:1fr;

    }

    .sidebar{

        grid-template-columns:1fr;

    }

    footer{

        flex-direction:column;

        gap:12px;

        text-align:center;

    }

}

/* ---------- Mobile ---------- */

@media (max-width:768px){

    body{

        font-size:15px;

    }

    main{

        padding:18px;

    }

    .logo{

        width:170px;

    }

    .brand{

        gap:16px;

    }

    .brand-text h1{

        font-size:20px;

    }

    .brand-text span{

        font-size:13px;

    }

    .hero-left{

        padding:28px;

    }

    .hero-left h2{

        font-size:30px;

    }

    .hero-left p{

        font-size:16px;

    }

    .hero-card{

        padding:28px;

    }

    .hero-value{

        font-size:48px;

    }

    .gauge{

        height:210px;

    }

    .gauge-svg{

        max-width:190px;

    }

    .client-grid{

        grid-template-columns:1fr;

    }

    .events{

        max-height:300px;

        overflow:auto;

    }

    #trafficChart{

        width:100%;

        height:auto;

    }

    .world-map{

        overflow:auto;

    }

    .world-map svg{

        min-width:900px;

    }

}

/* ---------- Small Mobile ---------- */

@media (max-width:576px){

    .top-status{

        flex-direction:column;

        align-items:flex-start;

        gap:10px;

    }

    .status-item{

        width:100%;

        justify-content:center;

    }

    .utc{

        width:100%;

        justify-content:center;

    }

    .hero-left{

        padding:22px;

    }

    .hero-left h2{

        font-size:26px;

    }

    .hero-value{

        font-size:42px;

    }

    .card-header{

        flex-direction:column;

        align-items:flex-start;

        gap:8px;

    }

    .panel-header{

        padding:18px;

    }

    .panel{

        border-radius:14px;

    }

    .gauge-card{

        padding:18px;

    }

    .gauge{

        height:180px;

    }

    .gauge-svg{

        max-width:170px;

    }

    .footer-left{

        flex-direction:column;

        gap:6px;

    }

}

/* ---------- Landscape Phones ---------- */

@media (max-height:600px) and (orientation:landscape){

    .hero{

        margin-bottom:20px;

    }

    .gauges-grid{

        gap:18px;

    }

    .gauge{

        height:170px;

    }

}

/* ---------- High Resolution ---------- */

@media (min-width:1920px){

    :root{

        --content-width:1720px;

    }

    body{

        font-size:17px;

    }

    .hero-left h2{

        font-size:44px;

    }

    .hero-value{

        font-size:70px;

    }

}