/*
 * Índice de colecciones CEJ: revistas por tema y boletines por año.
 *
 * Las medidas replican exactamente la maqueta original (K2 + SP Page Builder)
 * de https://ceijnew.ddev.site/index.php/boletines-de-jurisprudencia-2, tomadas
 * de los estilos calculados a 1512 px de ancho. Se declaran de forma explícita
 * en lugar de heredarlas de Bootstrap porque este sitio usa Bootstrap 5 y el
 * original Bootstrap 4, y el modelo de caja de .row/.col difiere entre ambos.
 *
 * Varias reglas llevan !important para ganarle al CSS global de la plantilla
 * (h2{font-size:40pt!important}, h3{font-size:30pt!important}), que de otro
 * modo desborda los títulos de las tarjetas.
 */

.ceij-col {
    --ceij-gris: #e5e5e5;
    --ceij-azul: #09304a;
    --ceij-titulo: #1c303b;
    --ceij-ambar: #d59829;
    --ceij-ambar-hover: #eda92e;

    /* Canalón de Bootstrap: la mitad a cada lado de las celdas. */
    --ceij-canalon: 12px;

    font-family: 'Poppins', sans-serif;
    background: var(--ceij-gris);
    padding: 3% 3% 4rem;
}

.ceij-col__section + .ceij-col__section { margin-top: 3.5rem; }

/* Reproduce .sppb-container: el título va en una caja de 1110 px, de modo que
   el padding-top del 2% se resuelva contra ese ancho y no contra la rejilla. */
.ceij-col__titlewrap {
    max-width: 1110px;
    margin: 0 auto 50px;
}

.ceij-col__heading {
    color: var(--ceij-titulo) !important;
    font-size: 40pt !important;
    line-height: 34pt !important;
    font-weight: 700 !important;
    text-align: center;
    margin: 0 0 15px;
    padding-top: 2%;
}

/* Equivale a .wrapper2 del original. Sin align-items para que las tarjetas de
   una misma fila se estiren al mismo alto. */
.ceij-col__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: minmax(100px, auto);
    column-gap: 10px;
    row-gap: 1em;
}

.ceij-col__card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid rgb(0 0 0 / 12.5%);
    border-radius: 25px;
    padding: 0 15px;
}

/* Equivale a .card-body. */
.ceij-col__body { padding: 16px; }

/* Equivale a .row > .col-5 + .col-7, con los canalones negativos. */
.ceij-col__head {
    display: grid;
    grid-template-columns: 41.666667% 58.333333%;
    align-items: center;
    margin: 0 calc(var(--ceij-canalon) * -1);
}

.ceij-col__head > * { padding: 0 var(--ceij-canalon); }

/* Ocupa todo el ancho de su columna, como .card-img-top{width:100%}. */
.ceij-col__thumb {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 50rem;
}

.ceij-col__title {
    color: var(--ceij-titulo) !important;
    font-size: 1.75rem !important;
    line-height: 34pt !important;
    font-weight: 700 !important;
    text-align: center;
    margin: 0;
    padding: 2% 10px 0 !important;
}

/* El salto entre la cabecera y el botón que en el original hace un <br>. */
.ceij-col__actions {
    margin: 32px calc(var(--ceij-canalon) * -1) 0;
}

.ceij-col__toggle {
    display: inline-block;
    width: 100%;
    background: var(--ceij-ambar);
    border: 1px solid transparent;
    border-radius: 90px;
    color: var(--ceij-azul);
    font-family: inherit;
    font-size: 16pt;
    line-height: 24px;
    font-weight: 400;
    padding: 0.5%;
    text-align: center;
    cursor: pointer;
}

.ceij-col__toggle:hover {
    background: var(--ceij-ambar-hover);
    color: var(--ceij-azul);
}

.ceij-col__toggle:focus-visible {
    outline: 2px solid #12486b;
    outline-offset: 2px;
}

.ceij-col__files {
    padding: 0 8px 16px;
}

.ceij-col__files[hidden] { display: none; }

.ceij-col__files ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.ceij-col__file + .ceij-col__file { margin-top: .3rem; }

.ceij-col__file a {
    display: flex;
    align-items: baseline;
    gap: .5rem;
    color: var(--ceij-azul);
    font-size: 11pt;
    line-height: 1.35;
    text-decoration: none;
    padding-left: 1.6rem;
    position: relative;
}

/* Distintivo del tipo de archivo, en lugar de un icono de imagen. */
.ceij-col__file a::before {
    content: "";
    position: absolute;
    left: 0;
    top: .15em;
    width: 1.1rem;
    height: 1.1rem;
    border-radius: 3px;
    background: #b02a37;
}

.ceij-col__file--xlsx a::before,
.ceij-col__file--xls a::before { background: #1d6f42; }

.ceij-col__file--docx a::before,
.ceij-col__file--doc a::before { background: #2b5797; }

.ceij-col__file a:hover,
.ceij-col__file a:focus-visible { text-decoration: underline; }

.ceij-col__file a:focus-visible {
    outline: 2px solid #12486b;
    outline-offset: 2px;
}

.ceij-col__ext {
    color: #6c757d;
    font-size: 9pt;
    margin-left: auto;
    flex: 0 0 auto;
}

.ceij-col__empty {
    color: var(--ceij-azul);
    font-size: 11pt;
    margin: 0;
}

@media (max-width: 767px) {
    .ceij-col { padding: 7% 2% 2%; }
    .ceij-col__grid { grid-template-columns: 1fr; }
    .ceij-col__heading { font-size: 26pt !important; line-height: 1.2 !important; }
    .ceij-col__title { font-size: 20px !important; line-height: 1.3 !important; }
    .ceij-col__toggle { font-size: 12pt; }
}