/*
Theme Name: Escuela de Arte Alberto Corazón
Theme URI: https://escuelaartealcala.es/
Description: Tema a medida para la Escuela de Arte Alberto Corazón
Version: 1.1.0
Requires at least: 6.0
Requires PHP: 7.4
Author: Escuela de Arte Alberto Corazón
Text Domain: escuela-arte
License: GPLv2 or later
*/

/* =========================================================
   Todo el diseño original está en assets/css/templatemo-xtra-blog.css.
   Aquí solo se añade lo necesario para WordPress y los componentes.
   ========================================================= */

/* Barra de administración de WordPress (solo la ven los usuarios conectados) */
.admin-bar .tm-header { top: 32px; }
@media screen and (max-width: 782px) {
    .admin-bar .tm-header { top: 46px; }
}

/* ---------- Acordeón [acordeon] ---------- */
.accordion {
    background-color: #eee;
    color: #444;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 15px;
    transition: 0.4s;
}
.accordion.active,
.accordion:hover { background-color: #ccc; }
.panel {
    padding: 0 18px;
    background-color: rgba(0, 0, 0, 0.05);
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
    margin-bottom: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

/* ---------- Pase de fotos de "Descripción" ---------- */
#stage { margin: 1em auto; width: 100%; height: 300px; }
#stage a { position: absolute; }
#stage a img { padding: 10px; background: #fff; }
#stage a:nth-of-type(1) {
    animation-name: fader;
    animation-delay: 4s;
    animation-duration: 1s;
    z-index: 20;
}
#stage a:nth-of-type(2) { z-index: 10; }
#stage a:nth-of-type(n+3) { display: none; }
@keyframes fader { from { opacity: 1.0; } to { opacity: 0.0; } }

/* ---------- Alumni ---------- */
.masonry { column-count: 1; }
@media (min-width: 640px) { .masonry { column-count: 2; } }
@media (min-width: 1024px) { .masonry { column-count: 3; } }
.masonry > * { break-inside: avoid; }

/* ---------- Botones en rejilla [botones] ---------- */
a.ea-boton, a.ea-boton:hover { text-decoration: none; }

/* ---------- Tarjetas de noticias ---------- */
a.ea-noticia, a.ea-noticia:hover { text-decoration: none; }
.ea-noticia-aclarar { background-color: rgba(255, 255, 255, 0.7); background-blend-mode: lighten; }

/* ---------- Noticia individual ---------- */
.ea-single-fecha { color: #999; font-size: 15px; margin-bottom: 20px; }
.ea-single-imagen { margin-bottom: 30px; }
.ea-single-imagen img { width: 100%; height: auto; }
.ea-contenido img[class*="wp-image-"], .ea-contenido .wp-caption img { max-width: 100%; height: auto; }

/* ---------- Paginación de noticias ---------- */
.ea-paginacion { margin: 40px 0; display: flex; gap: 10px; flex-wrap: wrap; }
.ea-paginacion .page-numbers {
    display: inline-block;
    padding: 8px 16px;
    border: 2px solid rgba(0, 0, 0, 0.8);
    color: black;
    transition: background-color 0.5s;
}
.ea-paginacion .page-numbers.current,
.ea-paginacion a.page-numbers:hover { background-color: violet; color: white; text-decoration: none; }

/* ---------- Clases que WordPress añade al contenido ---------- */
.alignleft { float: left; margin: 0 20px 20px 0; }
.alignright { float: right; margin: 0 0 20px 20px; }
.aligncenter { display: block; margin-left: auto; margin-right: auto; }
.wp-caption { max-width: 100%; }
.wp-caption-text { font-size: 14px; color: #999; }
.screen-reader-text {
    border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%);
    height: 1px; margin: -1px; overflow: hidden; padding: 0;
    position: absolute; width: 1px; word-wrap: normal !important;
}
.ea-contenido iframe { max-width: 100%; }