/*
 * Adattamento per smartphone (schermi fino a 768px). PC e tablet non cambiano.
 *
 * Da telefono il sito e' raggiungibile solo prima del login (pagine pubbliche) e
 * dall'admin (mobile_guard.php): le regole dell'area riservata valgono solo con
 * body.ruolo-admin, classe aggiunta da index.php.
 *
 * Molte larghezze sono scritte nelle pagine (style="width: 400px"): qui si limitano con
 * max-width, che prevale su width quando lo schermo e' piu' stretto.
 */
@media (max-width: 768px) {

    /* ---------------------------------------------------------------- generale */

    body {
        margin: 0;
        overflow-x: hidden;
    }

    img,
    iframe,
    video {
        max-width: 100%;
        height: auto;
    }

    /* nelle celle di tabella una larghezza massima in percentuale fa sparire le immagini
       (icone attiva/modifica/elimina/rinnova delle liste): li' restano della loro misura */
    td img,
    th img {
        max-width: none;
    }

    /* riquadri e tabelle a larghezza fissa scritta nella pagina */
    div[style*="width"],
    table[style*="width"],
    form[style*="width"] {
        max-width: 100% !important;
        box-sizing: border-box;
    }

    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="date"],
    select,
    textarea {
        max-width: 100% !important;
        box-sizing: border-box;
    }

    /* solo i contenitori: nelle liste "centered-div" e' anche la tabellina delle icone */
    div.centered-div {
        width: 100%;
        padding: 0 12px;
        box-sizing: border-box;
    }

    /* ---------------------------------------------------------------- intestazione */

    .intestazione-sito,
    .intestazione-sito tbody,
    .intestazione-sito tr,
    .intestazione-sito td {
        display: block;
        width: 100% !important;
        box-sizing: border-box;
        text-align: center !important;
    }

    .intestazione-sito td {
        padding: 6px 8px;
    }

    .intestazione-sito img[alt="Logo SportVision"] {
        width: 110px !important;
    }

    .main-navigation ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 4px 6px;
    }

    .main-navigation ul li,
    .main-navigation ul:last-child li {
        display: inline-block;
        margin: 0 !important;
    }

    .main-navigation ul a {
        display: inline-block;
        padding: 8px 10px;
    }

    /* ---------------------------------------------------------------- pagine pubbliche */

    .section,
    .science {
        padding: 30px 5%;
        min-height: 0;
    }

    .header-title {
        font-size: 26px;
        padding: 30px 12px 20px;
    }

    .hero,
    .landing .top,
    .landing .content,
    .wrap_center,
    .wrap_online,
    .topbar {
        flex-direction: column;
        align-items: center;
        gap: 24px;
        padding-left: 5%;
        padding-right: 5%;
    }

    .left img {
        width: 100%;
        max-width: 260px;
    }

    .right,
    .desc,
    .step p,
    .quote-text,
    .landing .card p,
    .image-card {
        max-width: 100%;
    }

    .landing .cards,
    .grid,
    .cols,
    .arrows,
    .texts {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    /* frecce una sotto l'altra: la punta verso destra non ha piu' senso */
    .arrow::after,
    .arrow::before {
        display: none;
    }

    .metodo,
    .subtitle {
        font-size: 28px;
    }

    .big {
        font-size: 56px;
    }

    .title,
    .text h2 {
        font-size: 24px;
    }

    .step h3 {
        font-size: 26px;
    }

    .landing .top h1 {
        font-size: 34px;
    }

    .landing .logo,
    .topbar img {
        width: 150px;
    }

    .headline .top {
        font-size: 32px;
    }

    .headline .bottom_about {
        font-size: 28px;
    }

    .title_top .lime {
        font-size: 34px;
    }

    .title_top .white {
        font-size: 30px;
    }

    .ring {
        width: 220px;
        height: 220px;
    }

    .ring .value {
        font-size: 40px;
    }

    .quote-box {
        padding: 22px 18px;
    }

    #privacy-banner {
        box-sizing: border-box;
    }

    /* ---------------------------------------------------------------- area admin */

    /* menu laterale -> barra in alto */
    body.ruolo-admin div:has(> .sidebar) {
        flex-direction: column;
    }

    body.ruolo-admin .sidebar {
        width: 100% !important;
        min-height: 0 !important;
        padding: 8px 10px !important;
        border-right: 0 !important;
        border-bottom: 1px solid #ccc;
        box-sizing: border-box;
    }

    body.ruolo-admin .sidebar li {
        margin: 0;
    }

    body.ruolo-admin .sidebar table {
        display: block;
        width: 100%;
    }

    body.ruolo-admin .sidebar tbody {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 4px 10px;
        width: 100%;
    }

    body.ruolo-admin .sidebar tr {
        display: flex;
        align-items: center;
    }

    body.ruolo-admin .sidebar nav ul li a {
        padding: 6px 6px;
    }

    /* min-width: 0, altrimenti il contenuto si allarga quanto la tabella piu' larga
       invece di farla scorrere, e spinge tutta la pagina oltre lo schermo */
    body.ruolo-admin div:has(> .sidebar) > * {
        min-width: 0;
    }

    body.ruolo-admin .content {
        width: 100%;
        padding: 12px !important;
        box-sizing: border-box;
    }

    /* tabelle (utenti, training, video): scorrono in orizzontale invece di uscire dallo schermo */
    body.ruolo-admin table.table_users {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    body.ruolo-admin table.table_users td.td_users {
        white-space: nowrap;
    }

    /* tab Video / Corsi e ordine di selezione */
    body.ruolo-admin .tabs-elementi {
        flex-wrap: wrap;
    }

    body.ruolo-admin .repeat-row {
        flex-wrap: wrap;
    }
}