/* ──────────────────────────────────────────────────────────────
   SUN EATER WIKI – OFFICIAL ART GALLERY
   ────────────────────────────────────────────────────────────── */
.official-art-gallery{
    display:grid;
    gap:2rem;
    margin:2rem 0;
    padding:1rem 0;
}
@media(min-width:769px){
    .official-art-gallery{grid-template-columns:repeat(2,1fr);}
    .official-art-gallery .wide{grid-column:1/-1;}
}
@media(max-width:768px){
    .official-art-gallery{grid-template-columns:1fr;}
}
.official-art-item{
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    break-inside:avoid;
}
.official-art-item img{
    width:100%;
    height:auto;
    max-height:480px;
    object-fit:contain;
    border-radius:6px;
    transition:all .25s ease;
    background:transparent;
}
/* Standardize normal image size & aspect ratio */
.official-art-item:not(.wide) img {
    aspect-ratio: 2 / 3; /* ≈ 67% width-to-height */
    width: auto;
    height: 450px;
    object-fit: cover; /* or "contain" if you prefer no cropping */
}
@media(min-width:769px){.official-art-item img{max-width:360px;}}
@media(max-width:768px){.official-art-item img{max-width:100%;max-height:70vh;}}
.official-art-caption{
    margin-top:.75rem;
    font-size:.95rem;
    line-height:1.5;
}
/* ───── LIGHT MODE – WINS AGAINST BOOKSTACK ───── */
.official-art-item img{
    border:1px solid #cccccc !important;
    box-shadow:0 2px 6px rgba(0,0,0,.08) !important;
    color:inherit !important;
}
.official-art-item img:hover{
    border-color:#c83232 !important;
    box-shadow:0 4px 12px rgba(200,50,50,.25) !important;
    transform:scale(1.02) !important;
}
.official-art-caption strong{
    color:#000000 !important;
    font-weight:600 !important;
    display:block !important;
    margin-bottom:.35rem !important;
}
.official-art-caption .label{
    color:#666666 !important;
    font-weight:500 !important;
    margin-right:.25rem !important;
}
.official-art-caption .value{
    color:#c83232 !important;
    font-weight:normal !important;
}
/* ───── DARK MODE – unchanged (you said it works) ───── */
html.dark-mode .official-art-item img{
    border:1px solid #555555;
    box-shadow:0 2px 6px rgba(0,0,0,.5);
    background:#1e1e1e;
}
html.dark-mode .official-art-item img:hover{
    border-color:#c83232;
    box-shadow:0 4px 16px rgba(200,50,50,.4);
    transform:scale(1.02);
}
html.dark-mode .official-art-caption strong{
    color:#fff !important;
}
html.dark-mode .official-art-caption .label{
    color:#aaaaaa;
}
html.dark-mode .official-art-caption .value{
    color:#dddddd;
}
/* Red title accent */
.official-art-item.accent .official-art-caption strong{
    color:#c83232 !important;
}
/* ───── OVERRIDE BOOKSTACK'S BODY STYLES (the "winning" one) ───── */
html.light-mode body{
    color:#c83232 !important;
}
</style>