/* =========================================================
   DCEA WEB
   ARQ. JUNIOR ZAVALETA | DCEA

   RECURSOS — PÁGINA PÚBLICA
========================================================= */


/* =========================================================
   LISTA DE RECURSOS
========================================================= */

.resources-grid {

    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 20px;

}


/* =========================================================
   TARJETA DE RECURSO
========================================================= */

.resource-card {

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    min-width: 0;

    background:
        var(--color-white);

    border:
        1px solid var(--color-border);

    border-radius:
        var(--radius-medium);

    overflow: hidden;

    transition:
        border-color var(--transition),
        box-shadow var(--transition),
        transform var(--transition);

}


.resource-card:hover {

    border-color:
        #cbd0d2;

    box-shadow:
        0 10px 25px rgba(
            6,
            17,
            36,
            0.06
        );

    transform:
        translateY(-2px);

}


/* =========================================================
   CONTENIDO
========================================================= */

.resource-card-content {

    padding:
        30px 30px 28px;

}


/* =========================================================
   NUMERACIÓN
========================================================= */

.resource-card-content .section-label {

    margin-bottom:
        8px;

}


/* =========================================================
   TÍTULO
========================================================= */

.resource-card-title {

    margin: 0;

    font-size:
        clamp(
            22px,
            2.5vw,
            28px
        );

    line-height:
        1.25;

    letter-spacing:
        -0.5px;

    color:
        #303943;

}


/* =========================================================
   DESCRIPCIÓN
========================================================= */

.resource-card-description {

    position: relative;

    margin-top:
        28px;

    padding-top:
        22px;

    border-top:
        1px solid var(--color-border);

    cursor:
    default;

    outline: none;

}


.resource-card-label {

    display: block;

    margin-bottom:
        8px;

    font-size:
        10px;

    font-weight:
        700;

    letter-spacing:
        1px;

    color:
        var(--color-primary);

}


/* =========================================================
   TEXTO DE LA DESCRIPCIÓN
========================================================= */

.resource-description-text {

    max-height:
        none;

    overflow:
        visible;

}


.resource-description-text p {

    margin: 0;

    font-size:
        20px;

    line-height:
        1.8;

    color:
        var(--color-text-light);

}


/* =========================================================
   ACCIÓN
========================================================= */

.resource-card-action {

    display: flex;

    padding:
        20px 30px 25px;

    border-top:
        1px solid var(--color-border);

}


.resource-access-button {

    width:
        100%;

    justify-content:
        center;

    text-align:
        center;

}


/* =========================================================
   ESTADO VACÍO / ERROR
========================================================= */

.resources-empty {

    grid-column:
        1 / -1;

    padding:
        70px 30px;

    text-align:
        center;

    background:
        var(--color-white);

    border:
        1px dashed #cbd0d2;

    border-radius:
        var(--radius-medium);

}


.resources-empty h2 {

    margin-top:
        4px;

    font-size:
        28px;

    line-height:
        1.25;

    color:
        var(--color-primary);

}


.resources-empty p:last-child {

    margin-top:
        10px;

    font-size:
        14px;

    line-height:
        1.7;

    color:
        var(--color-text-light);

}


/* =========================================================
   RESPONSIVE — TABLET
========================================================= */

@media (max-width: 1000px) {

    .resources-grid {

        grid-template-columns:
            1fr;

    }

}


/* =========================================================
   RESPONSIVE — CELULAR
========================================================= */

@media (max-width: 760px) {

    .resources-grid {

    grid-template-columns:
        1fr;

    gap:
        15px;

}


    .resource-card-content {

        padding:
            24px 20px 22px;

    }


    .resource-card-title {

        font-size:
            23px;

    }


    .resource-card-description {

        margin-top:
            24px;

        padding-top:
            20px;

    }

    .resource-description-text p {

        font-size:
            13px;

        line-height:
            1.7;

    }


    .resource-card-action {

        padding:
            16px 20px 20px;

    }


    .resources-empty {

        padding:
            55px 20px;

    }

}

/* =========================================================
   RESPONSIVE — CELULAR HORIZONTAL
========================================================= */

@media (max-width: 760px) and (orientation: landscape) {

    .resources-grid {

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

    }

}


/* =========================================================
   RECURSOS — RESPONSIVE MÓVIL
   MISMA COMPOSICIÓN QUE ESCRITORIO
========================================================= */

@media (max-width:700px) {

    /* OCULTAR DESBORDE HORIZONTAL */
    body:has(#lista-recursos) {
        overflow-x:hidden;
    }

    /* =====================================================
       CONTENIDO PRINCIPAL
       MANTENER CANVAS DE ESCRITORIO
    ===================================================== */

    body:has(#lista-recursos) .page-hero,
    body:has(#lista-recursos) .section {
        width:1200px;
        max-width:none;
        margin:0;
        zoom:calc(100vw / 1200px);
    }


    /* CONTENEDORES */
    body:has(#lista-recursos) .page-hero .container,
    body:has(#lista-recursos) .section .container {
        width:1200px;
        max-width:none;
        box-sizing:border-box;
    }


    /* =====================================================
       RECURSOS
       MANTENER LAS 3 COLUMNAS DE ESCRITORIO
    ===================================================== */

    body:has(#lista-recursos) .resources-grid {
        grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    }


    /* =====================================================
       HEADER — INDEPENDIENTE DEL ESCALADO
    ===================================================== */

    body:has(#lista-recursos) .site-header {
        position:relative;
        top:auto;
        width:100%;
        max-width:none;
        overflow:hidden;
    }

    body:has(#lista-recursos) .site-header .header-container {
        width:100%;
        max-width:none;
        box-sizing:border-box;
        padding-left:20px;
        padding-right:20px;
        align-items:flex-start;
    }

    body:has(#lista-recursos) .site-header .site-logo {
        width:auto;
        max-width:100%;
        flex-shrink:0;
    }

    body:has(#lista-recursos) .site-header .main-nav {
        width:100%;
        max-width:100%;
        flex-shrink:0;
        overflow-x:auto;
        box-sizing:border-box;
    }


    /* =====================================================
       FOOTER — COMPOSICIÓN HORIZONTAL DE ESCRITORIO
    ===================================================== */

    body:has(#lista-recursos) .site-footer {
        width:1200px;
        max-width:none;
        margin:0;
        zoom:calc(100vw / 1200px);
    }

    body:has(#lista-recursos) .site-footer .footer-container {
        width:1200px;
        max-width:none;
        box-sizing:border-box;
    }

}

/* =========================================================
   RECURSOS — FOOTER
   MISMA COMPOSICIÓN DE ESCRITORIO Y AL FINAL
========================================================= */

@media (max-width:700px) {

    /* La página completa trabaja en columna */
    body:has(#lista-recursos) {
        min-height:100vh;
        display:flex;
        flex-direction:column;
        overflow-x:hidden;
    }


    /* El contenido ocupa el espacio disponible */
    body:has(#lista-recursos) .section {
        flex:1;
    }


    /* =====================================================
       FOOTER — MANTENER COMPOSICIÓN DE ESCRITORIO
    ===================================================== */

    body:has(#lista-recursos) .site-footer {
        width:1200px;
        max-width:none;
        margin:0;
        zoom:calc(100vw / 1200px);
        flex-shrink:0;
    }

    body:has(#lista-recursos) .site-footer .footer-container {
        width:1200px;
        max-width:none;
        box-sizing:border-box;

        /* IZQUIERDA — CENTRO — DERECHA */
        display:grid;
        grid-template-columns:1fr auto 1fr;
        align-items:center;
    }

    body:has(#lista-recursos) .site-footer .footer-brand {
        text-align:left;
    }

    body:has(#lista-recursos) .site-footer .footer-dcea {
        text-align:center;
    }

    body:has(#lista-recursos) .site-footer .footer-copy {
        text-align:right;
    }

}


/* =========================================================
   RECURSOS — 2 TARJETAS POR FILA EN MÓVIL
========================================================= */

@media (max-width:700px) {

    body:has(#lista-recursos) .resources-grid {
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    }

}



/* =========================================================
   RECURSOS — AJUSTE DE TEXTOS EN MÓVIL
========================================================= */

@media (max-width:700px) {

    /* =====================================================
       DESCRIPCIÓN SUPERIOR
       SE MANTIENE EL TÍTULO Y SE AGRANDA SOLO EL TEXTO
    ===================================================== */

    body:has(#lista-recursos) .page-hero .container > p:not(.section-label) {
        width:100%;
        max-width:none;
        font-size:32px;
        line-height:1.5;
    }


    /* =====================================================
       TEXTOS DE LOS RECURSOS
       ×2
    ===================================================== */

    body:has(#lista-recursos) #lista-recursos h1,
    body:has(#lista-recursos) #lista-recursos h2,
    body:has(#lista-recursos) #lista-recursos h3,
    body:has(#lista-recursos) #lista-recursos h4,
    body:has(#lista-recursos) #lista-recursos p,
    body:has(#lista-recursos) #lista-recursos a,
    body:has(#lista-recursos) #lista-recursos span {
        font-size:200%;
    }

}


/* =========================================================
   RECURSOS — AJUSTE FINAL DE TARJETAS
========================================================= */

@media (max-width:700px) {

    /* =====================================================
       IDENTIFICADOR — "RECURSO 1", "RECURSO 2", ETC.
       REDUCIR A LA MITAD
    ===================================================== */

    body:has(#lista-recursos) #lista-recursos .resource-card-content > .section-label {
        font-size:150%;
    }


    /* =====================================================
       TÍTULO DEL RECURSO
       MANTENER EL ×2 ACTUAL
    ===================================================== */

    body:has(#lista-recursos) #lista-recursos .resource-card-title {
        font-size:250%;
    }


    /* =====================================================
       DESCRIPCIÓN
       SE MANTIENE COMO ESTÁ
    ===================================================== */

    body:has(#lista-recursos) #lista-recursos .resource-card-description {
        font-size:inherit;
    }
    
    body:has(#lista-recursos) #lista-recursos .resource-card-label {
    font-size:100%;
}


    /* =====================================================
       TARJETAS — UN POCO MÁS ALTAS
    ===================================================== */

    body:has(#lista-recursos) #lista-recursos .resource-card {
        min-height:120px;
    }

}