/*---------------------------*/
/*------ LAYOUT SYSTEM ------*/
/*---------------------------*/

/* 
    This stylesheet is responsible for the overall page layout,
    grid structure, spacing, and responsive positioning of major UI regions . 
*/

/* //////////////// */
/* Mobile & Tablet  */
/* ////////// ///// */

/* normal state*/

body {
    display: flex;
    flex-flow: column;
}


/* error state */


/* no result */


/* /////// */
/* Tablet  */
/* /////// */

@media (min-width: 768px) {

    /* Card */
    .card {
        margin-block: 30px;
    }

    /* Footer */
    .footer {
        margin-block: 20px;
    }
}

/* //////// */
/* Desktop  */
/* //////// */

@media (min-width: 1024px) {

    /* normal state */

    /* Base */
    .main {
        display: grid;

        grid-template-columns:
            minmax(0, 1fr) minmax(320px, 450px);

        grid-template-areas:
            "card    hourly"
            "current hourly"
            "daily   daily";
    }

    /* error state */


    /* no result state */

}

@media (min-width: 1200px) {

    /* Header */
    .header .container {
        margin-inline: auto;
    }

    /* Card */
    .card {
        margin-inline: auto;
        margin-inline-end: 7rem;
    }

    /* current */
    .current-info .list-items {
        margin-inline: auto;
        margin-inline-end: 7rem;
    }

    /* Daily Forecast */
    .daily-forecast {
        margin-inline: auto;
        margin-inline-end: 7rem;
    }

    /* Hourly Forecast */
    .hourly-list {
        bottom: 0;
        left: 0;
        /* margin-block-start: 3.5rem; */
    }

    /* Footer */
    .footer {
        bottom: 0;
    }
}


/* 
---> specify area pices
*/

/* weather panel */
.weather-panel{
    grid-area: current;
}

/* daily */
.daily-forecast {
    grid-area: daily;
}

/* hourly */
.hourly-list {
    grid-area: hourly;
}