/* gestione di tutta la parte responsive su 768px: 
    11. responsive
    13.2 responsive (relativo a comunicazioni della homepage)
*/
/* ============================================================
   11. RESPONSIVE
============================================================ */
@media (max-width:768px){
    .header-container{
        grid-template-columns:60px 1fr 105px;
    }

    .header-center{
        text-align:center;
        transform:translateX(-10px);
    }

    .header-center h1{
        font-size:1.4rem;
    }

    .header-center p{
        font-size:.85rem;
    }

    .header-logo{
        height:45px;
        width:auto;
    }

    .home-content{
        flex-direction:column;
        padding:20px;
    }

    .news,
    .map{
        width:100%;
    }
    
    .footer-top{
        display:grid;
        grid-template-columns:1fr;
        grid-template-areas:
            "social"
            "sponsor"
            "info";
        gap:35px;
        justify-items:center;
    }

    .footer-social{
        grid-area:social;
        justify-self:stretch;
        width:100%;
        text-align:center;
    }

    .footer-sponsor{
        grid-area:sponsor;
        justify-self:stretch;
        width:100%;
        text-align:center;
    }

    .footer-info{
        grid-area:info;
        justify-self:stretch;
        width:100%;
        text-align:center;
    }

    .social-links{
        display:flex;
        justify-content:center;
        gap:20px;
    }

    .sponsor-grid{
        display:grid;
        grid-template-columns:repeat(2,140px);
        justify-content:center;
        gap:12px;
    }

    .sponsor-box{
        width:135px;
        height:90px;
    }

    /* ------------------------------------------------------------
        13.2 RESPONSIVE
    ------------------------------------------------------------ */

    .news-card{
        flex-direction:column;
    }

    .news-image{
        flex:auto;
    }

    .news-content{
        padding:20px;
    }

    .news-date{
        text-align:left;
    }

    .page-content{
        width:85%;
        padding:25px 20px;
    }

    .login-box{
        width:90%;
        max-width:340px;
        margin:30px auto;
        padding:22px;
    }

    /* PAGINE INTERNE */
    .post-page{
        padding:0;
        margin:30px auto;
    }

    .post-image{
        width:100%;
        margin:0 0 25px;
    }

    .post-image img{
        width:100%;
        height:auto;
        border-radius:0;
        display:block;
    }

    .post-content{
        padding:0 20px;
    }

    /* ------------------------------------------------------------
    AREA RISERVATA - RESPONSIVE
    ------------------------------------------------------------ */

    .page-content .documents-grid{
        grid-template-columns:1fr;
        width:100%;
    }

    .page-content .document-card{
        width:100%;
        box-sizing:border-box;
    }

    .page-content .document-item{
        width:100%;
        box-sizing:border-box;
    }

    .page-content .document-link{
        max-width:100%;
        box-sizing:border-box;
        flex-wrap:wrap;
        overflow-wrap:anywhere;
    }

    .page-content .document-link img{
        width:28px;
        height:28px;
        max-width:28px;
        flex-shrink:0;
    }
    
    .area-riservata-header {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        gap: 10px;
    }

    .area-riservata-header .section-title {
        font-size: 28px;
        white-space: nowrap;
    }

    .area-riservata-header .logout-btn {
        flex-shrink: 0;
        width: auto;
        padding: 8px 14px;
        font-size: 16px;
    }

}