@use "../configuraciones/variables";
@use "../herramientas/mixins";

.o-grid-cards {
    display: grid;
    height: calc(100vh - variables.$height-movil-header-l);
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, auto) 1fr;
    grid-template-areas: 
        "cupos-disponibles cupos-disponibles"
        "ocupacion-maxima ocupacion-actual"
        "afluencia-actual afluencia-actual";
    gap: variables.$espacio-movil-m;
    align-items: center;
    align-content: start;
    padding: variables.$espacio-movil-m;
    overflow: hidden; 
    max-width: 550px;
    margin: 0 auto;

    @media screen and (orientation: landscape) and (max-width: 915px) {
        height: calc(100vh - variables.$height-movil-header-s);
        grid-template-rows: repeat(6, auto);
        grid-template-areas: 
        "cupos-disponibles ocupacion-maxima"
        "cupos-disponibles ocupacion-maxima"
        "cupos-disponibles ocupacion-maxima"
        "cupos-disponibles ocupacion-actual"
        "afluencia-actual ocupacion-actual"
        "afluencia-actual ocupacion-actual";
    }  

    @media screen and (min-width: variables.$tamaño-desktop){
        gap: variables.$espacio-tablet;
        padding: variables.$espacio-tablet;
    }
}


.item{
    &-cupos-disponibles {
        grid-area: cupos-disponibles;
    }

    &-ocupacion-maxima{
        grid-area: ocupacion-maxima;
    }

    &-ocupacion-actual {
        grid-area: ocupacion-actual;
    }

    &-afluencia-actual {
        grid-area: afluencia-actual;
        align-self: end;
    }

    @media screen and (orientation: landscape) and (max-width: 912px){
        &-ocupacion-maxima,
        &-ocupacion-actual {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            align-items: center;
        }
    }
}
