/* ==========================================================
   mobile.css - ottimizzazioni layout per tablet/smartphone
   Caricato in coda al bundle ~/OLbundles/theme (BundleConfig.vb)
   ========================================================== */

@media (max-width: 991px) {

    /* --- Header: slogan e pulsante radio su una sola riga --- */
    .c-layout-header.c-layout-header-6 .c-topbar .c-top-menu {
        margin: 8px 0 4px 0;
    }

    .c-layout-header.c-layout-header-6 .c-topbar .c-top-menu .c-links {
        float: none;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        margin: 0;
        padding: 0;
    }

    .c-layout-header.c-layout-header-6 .c-topbar .c-top-menu > .c-links > li {
        padding: 0;
    }

    .c-layout-header.c-layout-header-6 .c-topbar .c-top-menu > .c-links > li.citazione {
        -webkit-box-flex: 1;
        -ms-flex: 1 1 auto;
        flex: 1 1 auto;
        min-width: 0;
        padding: 0 10px 0 0;
        text-align: left;
        font-size: 12px;
        line-height: 16px;
    }

    .c-layout-header.c-layout-header-6 .c-topbar .c-top-menu > .c-links > li.citazione i {
        font-size: 14px;
        letter-spacing: 0;
    }

    /* griglia: icona a sx, le tre righe di testo a dx
       (con l'icona in float la larghezza automatica non conteggia il testo) */
    .btn_radio {
        display: inline-grid;
        grid-template-columns: auto auto;
        align-items: center;
        text-align: left;
        width: auto;
        padding: 3px 8px;
        font-size: 14px;
        white-space: nowrap;
    }

    .btn_radio i {
        float: none;
        grid-row: 1 / span 3;
        font-size: 28px;
        line-height: 36px;
        margin-right: 6px;
    }

    .btn_radio .btn_radio_1 {
        line-height: 14px;
    }

    .btn_radio .btn_radio_2 {
        line-height: 12px;
    }

    .btn_radio .btn_radio_3 {
        font-size: 10px;
        line-height: 12px;
    }

    /* --- Header: logo + hamburger sulla stessa riga, social centrati sotto --- */
    .c-layout-header.c-layout-header-6 .c-topbar .c-brand {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        margin: 6px 0 12px 0;
    }

    /* il clearfix diventerebbe un flex item */
    .c-layout-header.c-layout-header-6 .c-topbar .c-brand:before,
    .c-layout-header.c-layout-header-6 .c-topbar .c-brand:after {
        display: none;
    }

    .c-layout-header.c-layout-header-6 .c-topbar .c-brand > .c-logo {
        -ms-flex-order: 1;
        order: 1;
        float: none;
        display: block;
        max-width: calc(100% - 55px);
    }

    /* separatore verticale logo/social del desktop */
    .c-layout-header.c-layout-header-6 .c-topbar .c-brand > .c-logo:after {
        display: none;
    }

    .c-layout-header.c-layout-header-6 .c-topbar .c-brand > .c-hor-nav-toggler {
        -ms-flex-order: 2;
        order: 2;
        float: none;
        top: 0;
        margin: 0;
    }

    .c-layout-header.c-layout-header-6 .c-topbar .c-brand > .c-icons {
        -ms-flex-order: 3;
        order: 3;
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        float: none;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-pack: distribute;
        justify-content: space-around;
        padding: 0;
        margin: 10px 0 0 0 !important; /* custom.css: margin-left 18px !important */
    }

    .c-layout-header.c-layout-header-6 .c-topbar .c-brand > .c-topbar-toggler {
        display: none;
    }

    /* ricerca non collegata a nulla: nascosta */
    .c-layout-header.c-layout-header-6 .c-topbar .c-brand > .c-search-toggler,
    .c-layout-header .c-navbar .c-mega-menu .c-search-toggler-wrapper {
        display: none;
    }

    /* --- Box breadcrumb (fondo arancione) compatto --- */
    .c-layout-breadcrumbs-1.c-subtitle {
        padding: 8px 0;
    }

    .c-layout-breadcrumbs-1 .c-page-title > h3 {
        font-size: 14px;
        margin: 4px 0 2px 0;
    }

    /* h4 ripete il titolo del contenuto, già presente sotto */
    .c-layout-breadcrumbs-1 .c-page-title > h4 {
        display: none;
    }

    .c-layout-breadcrumbs-1.c-subtitle .c-page-breadcrumbs {
        margin-top: 0;
    }

    .c-layout-breadcrumbs-1 .c-page-breadcrumbs > li,
    .c-layout-breadcrumbs-1 .c-page-breadcrumbs > li > a {
        font-size: 13px;
    }

    .c-layout-breadcrumbs-1 .c-page-breadcrumbs > li {
        padding: 2px 3px;
    }

    /* --- Titoli nel contenuto principale --- */
    .c-layout-sidebar-content .c-content-title-1 > h3 {
        font-size: 17px;
        line-height: 1.3;
        margin-bottom: 15px;
    }

    /* #cont_video: in custom.css c'è una regola con ID (26px) che va superata */
    .c-layout-sidebar-content .c-content-blog-post-1 .c-title,
    #cont_video .c-content-blog-post-1 .c-title {
        font-size: 17px;
        line-height: 1.35;
    }

    /* --- Scheda articolo: niente spazio vuoto tra player audio e testo --- */
    /* p-vuoto: paragrafi vuoti iniziali marcati in articoli_scheda.aspx.vb */
    .cont_text .p-vuoto {
        display: none;
    }

    .cont_text audio {
        margin-bottom: 10px;
    }

    /* testo articolo: 17px / ~1.43 del tema -> 15px / 1.45 */
    .c-layout-sidebar-content .cont_text {
        font-size: 15px;
        line-height: 1.45;
    }

    /* --- Form commenti (articoli_scheda) e contatti: versione compatta --- */
    .c-content-contact-1.c-opt-1 .c-padding-20 {
        padding: 0 15px;
    }

    .c-content-contact-1.c-opt-1 .form-group {
        margin-bottom: 10px;
    }

    .c-content-contact-1.c-opt-1 .form-control.input-lg {
        height: 38px;
        padding: 6px 12px;
        font-size: 15px;
    }

    .c-content-contact-1.c-opt-1 textarea.form-control.input-lg {
        height: 110px;
    }

    /* br prima del titolo privacy */
    .c-content-contact-1.c-opt-1 .col-md-6 > br {
        display: none;
    }

    .c-content-contact-1.c-opt-1 label {
        font-size: 14px;
        line-height: 1.3;
        margin: 5px 0 4px 0;
    }

    .c-content-contact-1.c-opt-1 .c-font-14 {
        font-size: 12px;
        line-height: 1.4;
    }

    .c-content-contact-1.c-opt-1 .form-c-checkboxes {
        margin-bottom: 5px;
    }

    .c-content-contact-1.c-opt-1 .c-checkbox-list {
        margin-top: 5px;
    }

    .c-content-contact-1.c-opt-1 .btn-lg {
        padding: 7px 18px;
        font-size: 14px;
    }

    /* --- Layout con sidebar: contenuto principale prima della colonna sx --- */
    .c-layout-page > .container {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -ms-flex-direction: column;
        flex-direction: column;
    }

    /* il clearfix di Bootstrap 3 diventerebbe un flex item */
    .c-layout-page > .container:before,
    .c-layout-page > .container:after {
        display: none;
    }

    .c-layout-page > .container > .c-layout-sidebar-content {
        -ms-flex-order: 1;
        order: 1;
    }

    .c-layout-page > .container > .c-layout-sidebar-menu {
        -ms-flex-order: 2;
        order: 2;
    }

    /* --- Menu I MIEI ALUNNI (sidebar): pulsanti su 2 colonne --- */
    #box_alunni_sx .c-content-title-1 {
        margin-top: 25px;
    }

    #box_alunni_sx .c-menu {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-gap: 8px;
    }

    #box_alunni_sx .c-menu > li {
        padding: 0;
        border-bottom: 0;
    }

    #box_alunni_sx .c-menu.c-theme.c-arrow-dot > li:before {
        display: none;
    }

    #box_alunni_sx .c-menu > li > a {
        display: block;
        padding: 8px 6px;
        border: 1px solid #809708;
        text-align: center;
        font-size: 14px;
        line-height: 1.2;
        color: #5c6873;
    }

    #box_alunni_sx .c-menu > .c-active > a {
        background-color: #809708;
        color: #ffffff;
    }

    /* --- Banner AMICI: griglia compatta (3 colonne su tablet) --- */
    .c-content-feature-banner_sx {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-gap: 15px;
        align-items: center;
    }

    .c-content-feature-banner_sx > .c-content-title-1 {
        grid-column: 1 / -1;
    }

    .c-content-feature-banner_sx .imagecontour_banner {
        margin: 0;
        padding: 6px;
    }

    .c-content-feature-banner_sx .imagecontour_banner img {
        margin: 0 auto;
    }
}

@media (max-width: 767px) {

    /* --- Banner AMICI: 2 colonne su smartphone --- */
    .c-content-feature-banner_sx {
        grid-template-columns: repeat(2, 1fr);
        grid-gap: 10px;
    }
}