/* --- Estilos CSS para el Plugin Anuncios Parroquiales --- */

/* Contenedor principal para el shortcode */
.ap-anuncio-container {
    display: flex; /* Habilita el diseño flexible de lado a lado */
    flex-direction: row; /* Elementos en fila (texto izquierda, imagen derecha) */
    align-items: flex-start; /* Alinea los elementos al inicio (arriba) */
    background-color: #f7f7f7; /* Fondo sutil para destacar el anuncio */
    border: 1px solid #ddd;
    border-radius: 12px; /* Esquinas redondeadas, estilo Divi */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    padding: 20px;
    margin: 20px auto; /* Centrar y añadir margen vertical */
    max-width: 1200px; /* Ancho máximo para el contenedor */
    overflow: hidden;
}

/* Contenido de Texto (Columna Izquierda) */
.ap-anuncio-content {
    flex: 2; /* Ocupa 2/3 del espacio disponible (más ancho) */
    padding-right: 20px;
    /* Ajustes de tipografía para respetar el tema, pero asegurando legibilidad */
    font-size: 16px;
    line-height: 1.6;
    color: #333;
}

/* Título */
.ap-anuncio-content h2 {
    font-size: 2em; /* Tamaño grande para el título */
    margin-top: 0;
    margin-bottom: 10px;
    color: #3a3a3a; /* Color oscuro para contraste */
}

/* Contenedor de la Imagen (Columna Derecha) */
.ap-anuncio-image {
    flex: 1; /* Ocupa 1/3 del espacio disponible (más angosto) */
    display: flex;
    justify-content: flex-end; /* Alinea la imagen a la derecha */
    align-items: center;
}

/* Estilos de la Imagen (para asegurar que se vea bien) */
.ap-anuncio-image img {
    max-width: 100%;
    height: auto;
    border-radius: 8px; /* Esquinas redondeadas en la imagen */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Utilidad para limpiar floats antiguos (aunque usamos flexbox, es buena práctica) */
.ap-clear-fix::after {
    content: "";
    clear: both;
    display: table;
}


/* --- Adaptabilidad (Responsive Design) --- */

/* En dispositivos móviles (pantallas de 768px o menos), apila los elementos */
@media (max-width: 768px) {
    .ap-anuncio-container {
        flex-direction: column; /* Cambia a columna (texto arriba, imagen abajo) */
        padding: 15px;
    }

    .ap-anuncio-content {
        order: 1; /* Pone el contenido arriba */
        padding-right: 0;
        margin-bottom: 15px;
    }

    .ap-anuncio-image {
        order: 2; /* Pone la imagen abajo */
        justify-content: center; /* Centra la imagen en el móvil */
    }

    .ap-anuncio-content h2 {
        font-size: 1.5em;
    }
}