/*
 * DG_ATHLETE_MOBILE_V1
 * Responsivo exclusivo da area do atleta.
 */

html,
body{
    max-width:100%;
    overflow-x:hidden;
}

*,
*::before,
*::after{
    box-sizing:border-box;
}

img,
video,
canvas,
svg{
    max-width:100%;
}

main,
.container,
.panel{
    min-width:0;
}


/* ===============================
   TABLES
================================ */

.table-wrap{
    max-width:100%;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
}


/* ===============================
   FORMULARIOS
================================ */

input,
select,
textarea,
button{
    max-width:100%;
}

input,
select,
textarea{
    font-size:16px;
}


/* ===============================
   PIX / CODIGOS GRANDES
================================ */

pre,
code,
textarea,
.pix-code,
.pix-copy,
[class*="pix-code"],
[class*="pix-copy"]{
    max-width:100%;
    overflow-wrap:anywhere;
    word-break:break-word;
}


/* ===============================
   QR CODE
================================ */

#qrcode,
.qrcode,
.qr-code,
[class*="qr-code"]{
    max-width:100% !important;
}

#qrcode img,
#qrcode canvas,
.qrcode img,
.qrcode canvas,
.qr-code img,
.qr-code canvas{
    display:block;
    width:min(320px,100%) !important;
    height:auto !important;
    margin-left:auto;
    margin-right:auto;
}


/* ===============================
   CARDS DE CORRIDAS
================================ */

.athlete-grid,
.achievement-grid,
.dg-athlete-photo-grid{
    min-width:0;
}

.athlete-card,
.achievement-card{
    min-width:0;
    max-width:100%;
}

.athlete-cover{
    display:block;
    max-width:100%;
}


/* ===============================
   FOTO PERFIL
================================ */

.dg-dashboard-profile-avatar{
    transition:
        transform .18s ease,
        border-color .18s ease;
}


/* ===============================
   MOBILE
================================ */

@media (max-width: 760px){

    body{
        width:100%;
    }


    /* Container */

    main.container,
    .container{
        width:100% !important;
        max-width:100% !important;
        padding-left:12px !important;
        padding-right:12px !important;
    }


    .panel{
        width:100% !important;
        max-width:100% !important;
        margin-left:0 !important;
        margin-right:0 !important;
        padding:16px !important;
        border-radius:16px !important;
    }


    /* ===========================
       HEADER / NAVEGACAO
    ============================ */

    header{
        max-width:100%;
        overflow:hidden;
    }

    header .container,
    header > .container{
        width:100% !important;
        max-width:100% !important;
        padding-left:12px !important;
        padding-right:12px !important;
        gap:10px !important;
        flex-wrap:wrap !important;
    }

    header img{
        max-width:185px;
        height:auto;
    }

    header nav,
    header .nav,
    header .menu{
        width:100% !important;
        max-width:100% !important;

        display:flex !important;
        flex-wrap:nowrap !important;
        gap:8px !important;

        overflow-x:auto !important;
        overflow-y:hidden !important;

        padding-bottom:5px;

        -webkit-overflow-scrolling:touch;
        scrollbar-width:none;
    }

    header nav::-webkit-scrollbar,
    header .nav::-webkit-scrollbar,
    header .menu::-webkit-scrollbar{
        display:none;
    }

    header nav a,
    header nav button,
    header .nav a,
    header .menu a{
        flex:0 0 auto !important;
        white-space:nowrap !important;
        min-height:44px;
        display:inline-flex;
        align-items:center;
    }


    /* ===========================
       CABECALHO DO ATLETA
    ============================ */

    .dg-dashboard-profile-avatar{
        float:none !important;

        width:88px !important;
        height:88px !important;

        margin:
            0 auto
            14px auto !important;
    }

    .dg-dashboard-profile-avatar ~ h1,
    .dg-dashboard-profile-avatar ~ h2{
        text-align:center;
    }


    /* ===========================
       BOTOES
    ============================ */

    .btn,
    button,
    input[type="submit"]{
        min-height:48px;
        max-width:100%;
    }

    .panel .btn{
        white-space:normal;
        text-align:center;
        justify-content:center;
    }


    /* ===========================
       CARDS
    ============================ */

    .athlete-grid,
    .achievement-grid,
    .dg-athlete-photo-grid{
        grid-template-columns:1fr !important;
        gap:14px !important;
    }

    .athlete-card{
        width:100% !important;
    }

    .athlete-card-body{
        padding:16px !important;
    }

    .athlete-cover{
        width:100% !important;
        height:auto !important;
        max-height:none !important;
        object-fit:contain !important;
        object-position:center !important;
    }


    /* ===========================
       FLEX / GRID INLINE
       DAS NOVAS PAGINAS
    ============================ */

    main .panel [style*="display:flex"],
    main .panel [style*="display: flex"]{
        max-width:100%;
        flex-wrap:wrap !important;
    }

    main .panel [style*="display:grid"],
    main .panel [style*="display: grid"]{
        max-width:100%;
        grid-template-columns:1fr !important;
    }


    /* ===========================
       IMAGENS DOS ADICIONAIS
    ============================ */

    main .panel img{
        max-width:100% !important;
        height:auto;
        object-fit:contain;
    }


    /* ===========================
       TEXTOS
    ============================ */

    h1{
        font-size:clamp(28px,8vw,38px);
        line-height:1.1;
    }

    h2{
        line-height:1.18;
    }

    p,
    div,
    span{
        overflow-wrap:anywhere;
    }
}


/* ===============================
   CELULARES PEQUENOS
================================ */

@media (max-width: 430px){

    main.container,
    .container{
        padding-left:9px !important;
        padding-right:9px !important;
    }

    .panel{
        padding:13px !important;
    }

    .dg-dashboard-profile-avatar{
        width:82px !important;
        height:82px !important;
    }

    .btn,
    button,
    input[type="submit"]{
        width:100%;
    }

    header img{
        max-width:160px;
    }
}


/* ===============================
   TOUCH
================================ */

@media (hover:none) and (pointer:coarse){

    a,
    button,
    .btn{
        -webkit-tap-highlight-color:transparent;
    }

    .btn,
    button{
        min-height:48px;
    }
}