/*
Theme Name: ParticipaWP
Theme URI: https://participawp.local
Author: El Teu Nom
Description: Tema modular per a processos participatius amb estats dinàmics.
Version: 1.0
Text Domain: participawp
*/

/* Reset bàsic per començar net */
body {
    margin: 0;
    padding: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    line-height: 1.6;
    color: #333;
    background-color: #fafafa;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

img {
    max-width: 100%;
    height: auto;
}
/* ==========================================================================
   NUEVO DISEÑO ADAPTATIVO: APAISADO EN ORDENADOR, VERTICAL EN MÓVIL
   ========================================================================== */

/* 1. EL CONTENEDOR GRID: Ahora puede ocupar más ancho en ordenador */
.pwp-grid {
    display: flex !important;
    flex-direction: column !important; /* Tarjetas una debajo de otra */
    gap: 40px !important; /* Buen espacio entre tarjetas */
    width: 100% !important;
    max-width: 1200px !important; /* Ancho máximo elegante */
    margin: 0 auto !important; /* Centra el bloque entero en la página */
    padding: 30px 0 !important;
}

/* 2. LA TARJETA (pwp-card): Diseño base y para ordenador */
.pwp-card {
    background: #fff !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1) !important;
    transition: transform 0.3s ease !important;
    width: 100% !important; /* Ocupa el 100% del contenedor en ordenador */
    
    /* CAMBIO CLAVE PARA ORDENADOR: FLEXBOX APAISADO */
    display: flex !important;
    flex-direction: row !important; /* Imagen y texto de lado a lado */
    min-height: 250px !important; /* Asegura una buena altura mínima de la tarjeta */
}

.pwp-card:hover { transform: translateY(-5px); }

/* 3. EL CONTENEDOR DE LA IMAGEN: Ahora a la izquierda y con altura total */
.pwp-card-image {
    position: relative !important;
    
    /* CAMBIO CLAVE PARA ORDENADOR: IMAGEN A LA IZQUIERDA */
    width: 60% !important; /* La imagen ocupa el 60% del ancho de la tarjeta */
    height: 100% !important; /* Ocupa toda la altura de la tarjeta */
    min-height: 100% !important;
    overflow: hidden !important;
}

.pwp-card-image img {
    width: 100% !important;
    height: 100% !important; /* Rellena el contenedor */
    object-fit: cover !important; /* La foto se recorta pero se ve entera de altura */
}

/* 4. EL CONTENIDO DE TEXTO: Ahora a la derecha */
.pwp-card-content { 
    /* CAMBIO CLAVE PARA ORDENADOR: TEXTO A LA DERECHA */
    width: 40% !important; /* El texto ocupa el 40% restante */
    padding: 20px !important; /* Buen acolchado */
    display: flex; 
    flex-direction: column; 
    justify-content: center; /* Centra el texto verticalmente */
}

.pwp-card-content h3 { font-size: 1.5rem !important; margin: 0 0 15px 0 !important; color: #333; }
.pwp-excerpt { font-size: 1rem !important; color: #555; line-height: 2; margin-bottom: 10px; }
.pwp-date-start { font-size: 1.05rem !important; color: #555; line-height: 1.4; margin-bottom: 10px; }
.pwp-date-end { font-size: 1.05rem !important; color: #555; line-height: 1.4; margin-bottom: 10px; }
.pwp-link { color: #e30613; font-weight: bold; text-decoration: none; margin-top: 10px; }

/* ==========================================================================
   RESPONSIVE: Ajustes automáticos para pantallas pequeñas (Móvil)
   ========================================================================== */

@media (max-width: 768px) {
    .pwp-grid { 
        gap: 25px !important; 
        padding: 10px !important; 
    }
    
    /* LA TARJETA (pwp-card): Vuelve al diseño vertical original */
    .pwp-card {
        flex-direction: column !important; /* Imagen arriba, texto debajo */
        min-height: 0 !important; /* Quita la altura mínima de ordenador */
    }
    
    /* IMAGEN: Vuelve a ocupar el ancho total y con altura más baja */
    .pwp-card-image {
        width: 100% !important;
        height: 180px !important; /* Altura más baja para móviles */
        min-height: 180px !important;
    }
    
    /* TEXTO: Vuelve a ocupar el ancho total */
    .pwp-card-content { 
        width: 100% !important;
        padding: 20px !important;
    }
}