/* 1. COLORS MODE FOSC */
:root {
    --bg-color: #121212;
    --text-color: #e0e0e0;
    --link-color: #82aaff;
}

body {
    background-color: var(--bg-color) !important;
    color: var(--text-color) !important;
}

/* Títols i el teu nom */
h1, h2, h3, #site-title, .site-title, #site-title a {
    color: #ffffff !important;
}

a {
    color: var(--link-color);
}

/* 2. ARREGLAR REPLIES I REQUADRE DE MENCIÓ */
.u-comment, .p-comment, .e-content, .p-summary, .p-name {
    color: var(--text-color) !important;
}

.microblog_conversation {
    background-color: #252525 !important;
    border: 1px solid #444 !important;
    color: #e0e0e0 !important;
    border-radius: 4px;
}

/* 3. GESTIÓ DE LA BIO */
#site-description, .site-description, header p {
    display: none !important;
}

.type-page #site-description, .type-page .site-description, .type-page header p {
    display: block !important;
}

/* 4. QUADRÍCULA DE FOTOS (GRID) */
/* Això farà que les fotos es posin de costat en lloc d'una sota l'altra */

.e-content {
    display: block; /* Mantenim el flux normal pel text */
}

/* Busquem imatges que estiguin dins d'un post */
.e-content img {
    display: inline-block !important;
    width: calc(50% - 10px) !important; /* Dues fotos per fila */
    height: 250px !important; /* Alçada fixa per mantenir l'ordre visual */
    object-fit: cover !important; /* Evita que les fotos es deformin */
    margin: 5px !important;
    vertical-align: top;
    border-radius: 8px;
}

/* Si només hi ha una sola foto en el post, que es vegi gran */
.e-content img:only-of-type {
    width: 100% !important;
    height: auto !important;
    margin: 10px 0 !important;
}

/* En mòbils, les tornem a posar una sota l'altra per llegibilitat */
@media (max-width: 600px) {
    .e-content img {
        width: 100% !important;
        height: auto !important;
        margin: 10px 0 !important;
    }
}