/* =========================================
   CALENDARIO - COMPETICIÓN
========================================= */

.club-calendario{
    display:flex;
    flex-direction:column;
    gap:40px;
}

.club-jornada{
    display:flex;
    flex-direction:column;
}

.club-jornada h2{
    font-family:'Open Sans',sans-serif;
    font-size:18px;
    font-weight:700;
    color:#000;
    margin:0;
    padding-bottom:14px;
    border-bottom:1px solid #E5E5E5;
}

/* Fila */

.club-partido-row{
    display:grid;
    grid-template-columns:1fr 110px;
    gap:24px;
    align-items:center;
    padding:10px 0;
    border-bottom:1px solid #E5E5E5;
}

.club-partido-link{
    display:grid;
    grid-template-columns:120px 1fr;
    grid-template-areas:
        ". estadio"
        "estado equipos";
    column-gap:20px;
    row-gap:2px;
    align-items:center;
    text-decoration:none;
    color:inherit;
}

.club-partido-link:hover{
    color:inherit;
}

/* Estado */

.estado{
    grid-area:estado;
    font-family:'Open Sans',sans-serif;
    font-size:14px;
    font-weight:700;
    color:#555;
}

/* Estadio */

.club-estadio-row{
    grid-area:estadio;
    text-align:center;
    font-family:'Open Sans',sans-serif;
    font-size:12px;
    font-weight:400;
    color:#666;
    line-height:1.1;
    margin:0;
    padding:0;
}

/* Equipos */

.equipos{
    grid-area:equipos;
    display:grid;
    grid-template-columns:1fr 90px 1fr;
    gap:14px;
    align-items:center;
}

.club{
    display:flex;
    align-items:center;
    gap:12px;
}

.visitante{
    justify-content:flex-end;
}

.visitante span{
    text-align:right;
}

.club-escudo{
    width:36px;
    height:36px;
    object-fit:contain;
}

.club span{
    font-family:'Open Sans',sans-serif;
    font-size:16px;
    font-weight:700;
}

/* Centro */

.centro{
    text-align:center;
}

.marcador{
    font-family:'Open Sans',sans-serif;
    font-size:28px;
    font-weight:800;
}

.hora{
    font-family:'Open Sans',sans-serif;
    font-size:16px;
    font-weight:700;
    color:#444;
}

/* Acción */

.accion{
    width:100px;
    display:flex;
    justify-content:flex-end;
    align-items:center;
}

.btn-boletos{
    display:inline-flex;
    justify-content:center;
    align-items:center;
    width:86px;
    height:40px;
    border:1px solid #E5E5E5;
    border-radius:8px;
    text-decoration:none;
    color:#111;
    font-family:'Open Sans',sans-serif;
    font-size:14px;
    font-weight:500;
    transition:.2s;
}

.btn-boletos:hover{
    border-color:#C8A63A;
    color:#C8A63A;
}

.btn-placeholder{
    width:86px;
    height:20px;
}

/* =========================
   TABLET
========================= */

@media (min-width:768px) and (max-width:1024px){

    .club-partido-row{
        grid-template-columns:1fr 100px;
    }

    .club-partido-link{
        grid-template-columns:90px 1fr;
    }

    .equipos{
        grid-template-columns:1fr 70px 1fr;
    }

    .club span{
        font-size:16px;
    }

    .marcador{
        font-size:20px;
    }

}

/* =========================
   MÓVIL
========================= */

@media (max-width:767px){

    .club-calendario{
        gap:10px;
    }

    .club-jornada h2{
        font-size:16px;
    }

    .club-partido-row{
        display:flex;
        flex-direction:column;
        align-items:stretch;
        gap:0;
    }

    .club-partido-link{
        display:flex;
        flex-direction:column;
        gap:4px;
    }

    .estado{
        font-size:13px;
        text-align:center;
    }

    .club-estadio-row{
        font-size:11px;
        text-align:center;
        line-height:1.1;
    }

    .equipos{
        display:flex;
        justify-content:space-between;
        align-items:center;
        gap:12px;
        width:100%;
    }

    .club{
        display:flex;
        align-items:center;
        gap:8px;
        flex:1;
        min-width:0;
    }

    .club.local{
        justify-content:flex-start;
    }

    .club.visitante{
        justify-content:flex-end;
    }

    .club.visitante span{
        text-align:right;
    }

    .centro{
        flex:0 0 70px;
        text-align:center;
    }

    .club-escudo{
        width:32px;
        height:32px;
        object-fit:contain;
        flex-shrink:0;
    }

    .club span{
        font-size:14px;
        line-height:1.2;
    }

    .marcador{
        font-size:20px;
    }

    .hora{
        font-size:13px;
    }

    .accion{
        width:100%;
        justify-content:center;
    }

    .btn-placeholder{
        display:none;
    }

    .btn-boletos{
        margin-top:5px;
    }

}