/*
 * Biblioteca de Cómics — CSS independiente del tema.
 * Versión optimizada para eliminar espacios superiores y forzar 4 columnas.
 */

/* Forzar la eliminación de márgenes y espacios superiores que añade WordPress/Tema */
body.bc-comic-page .site-content,
body.bc-comic-page .content-area,
body.bc-comic-page main,
body.bc-comic-page .entry-content {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

.bc-library{
    --bc-blue:#1557a6;
    --bc-gap:8px;
    --bc-cover-width:400px;
    --bc-cover-height:565px;
    width:100%;
    min-height:100%;
    color:var(--bc-blue);
    background:transparent;
    position:relative;
    isolation:isolate;
    margin-top: 0 !important;
    padding-top: 0 !important;
}
.bc-library::before{
    content:"";
    position:fixed;
    inset:0;
    z-index:-2;
    background-image:var(--bc-page-bg);
    background-position:center center;
    background-size:cover;
    background-repeat:no-repeat;
    background-attachment:fixed;
}
.bc-library::after{
    content:"";
    position:fixed;
    inset:0;
    z-index:-1;
    background:transparent;
    pointer-events:none;
}
.bc-library__inner{
    width:100%;
    max-width:100%;
    margin:0 auto;
    padding:0 10px 10px;
    box-sizing:border-box;
}
.bc-usa{
    display:flex;
    align-items:flex-start;
    gap:clamp(20px,4vw,50px);
    padding:0 0 15px;
    background:transparent;
    margin-top: 0 !important;
}
.bc-usa__cover{
    flex:0 0 var(--bc-cover-width);
    width:var(--bc-cover-width);
}
.bc-cover-image{
    display:block;
    width:100%;
    height:auto;
    max-width:100%;
    object-fit:contain;
}
.bc-usa__cover .bc-cover-image{
    width:var(--bc-cover-width);
    height:var(--bc-cover-height);
    object-fit:cover;
}
.bc-usa__info{
    flex:1;
    padding-top:0;
}
.bc-title{
    margin:0 0 15px!important;
    padding:0!important;
    color:var(--bc-blue)!important;
    font-size:clamp(26px,3.5vw,48px)!important;
    line-height:1.05!important;
    font-weight:700!important;
}
.bc-field,.bc-edition-field{
    margin:0 0 8px;
    color:var(--bc-blue);
}
.bc-field span,.bc-edition-field span{
    display:block;
    font-size:14px;
    line-height:1.2;
    margin-bottom:2px;
    opacity:.9;
}
.bc-field strong,.bc-edition-field strong{
    display:block;
    font-size:18px;
    line-height:1.3;
    font-weight:600;
}
.bc-spain{
    padding-top:10px;
}
.bc-spain h2{
    margin:0 0 12px!important;
    color:var(--bc-blue)!important;
    font-size:clamp(20px,2.2vw,30px)!important;
    line-height:1.1!important;
    font-weight:700!important;
}
.bc-editions{
    display:grid;
    /* FUERZA 4 columnas exactas en pantallas de ordenador (mínimo 4 columnas repetidas) */
    grid-template-columns: repeat(4, 1fr);
    gap: 12px var(--bc-gap);
    align-items:start;
    width:100%;
}
.bc-edition{
    min-width:0;
    background:transparent;
    color:var(--bc-blue);
}
.bc-edition__cover{
    width:100%;
    margin:0 auto 8px;
}
.bc-edition__cover .bc-cover-image{
    width:100%;
    height:auto;
    aspect-ratio:454 / 640;
    object-fit:cover;
}
.bc-edition__details{
    width:100%;
    margin:0 auto;
}
.bc-edition-field{
    margin-bottom:6px;
}
.bc-edition-field span{font-size:12px}
.bc-edition-field strong{font-size:15px}
.bc-link{
    display:inline-block;
    color:var(--bc-blue)!important;
    text-decoration:underline!important;
    font-weight:600;
    margin-top:2px;
    font-size:13px;
}
.bc-sale-link{font-weight:700}
.bc-empty{color:var(--bc-blue)}

/* Adaptabilidad para pantallas medianas (portátiles) -> 3 columnas */
@media(max-width:1200px){
    .bc-editions{
        grid-template-columns: repeat(3, 1fr);
    }
}

@media(max-width:900px){
    .bc-usa__cover{flex-basis:min(400px,42vw);width:min(400px,42vw)}
    .bc-usa__cover .bc-cover-image{width:100%;height:auto;aspect-ratio:454/640}
    .bc-editions{
        grid-template-columns: repeat(2, 1fr);
    }
}

@media(max-width:600px){
    .bc-library__inner{padding:8px}
    .bc-usa{display:block}
    .bc-usa__cover{width:min(100%,400px);margin:0 auto 15px}
    .bc-usa__info{padding-top:0}
    .bc-title{margin-bottom:12px!important}
    .bc-editions{grid-template-columns: 1fr; gap:20px}
}