/*
Theme Name:  Azulferri
Template:    hitchcock
Version:     1.2.0
Description: Tema hijo de Hitchcock para azulferri.com. La versión la escribe el pipeline de despliegue a partir del tag x.y.z.
Text Domain: azulferri
License:     GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
*/

/*
 * Rejilla al 100 % del viewport en portada y archivos, en lugar del máximo
 * de 1040px de Hitchcock. Antes vivía en Personalizar → CSS adicional.
 */
body.home .section-inner,
body.archive .section-inner {
    width: 100%;
    max-width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
}

/*
 * Sin imagen de cabecera (Personalizar → Imagen de cabecera → Ocultar imagen):
 * se oculta el bloque entero, imagen de respaldo bg.jpg y degradado incluidos.
 * La clase la añade functions.php.
 */
.azulferri-no-header-image .header-image {
    display: none;
}

/*
 * Paginado (pagination.php): numerado y centrado en todo el sitio.
 * Claro sobre el fondo oscuro de las rejillas; oscuro dentro de la vista de
 * sección apilada (.azulferri-section, fondo blanco). El color de acento llega
 * del Personalizador como --azulferri-accent (functions.php).
 */
.azulferri-pagination {
    --pagination-fg: #fff;
    --pagination-muted: rgba(255, 255, 255, 0.55);
    --pagination-border: rgba(255, 255, 255, 0.25);
    clear: both;
    margin: 60px 0 20px;
}

.azulferri-section .azulferri-pagination {
    --pagination-fg: #1d1d1d;
    --pagination-muted: #757575;
    --pagination-border: #d9d9d9;
    margin: 40px 0 0;
}

.azulferri-pagination .nav-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 8px;
}

.azulferri-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-width: 44px;
    height: 44px;
    padding: 0 12px;
    border: 1px solid var(--pagination-border);
    border-radius: 22px;
    color: var(--pagination-fg);
    font-size: 0.9em;
    font-weight: 600;
    letter-spacing: 0.05em;
    line-height: 1;
    text-decoration: none;
    transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}

.azulferri-pagination a.page-numbers:hover,
.azulferri-pagination a.page-numbers:focus-visible {
    border-color: var(--azulferri-accent, #3bc492);
    color: var(--azulferri-accent, #3bc492);
}

.azulferri-pagination .page-numbers.current {
    background: var(--azulferri-accent, #3bc492);
    border-color: var(--azulferri-accent, #3bc492);
    color: #fff;
}

.azulferri-pagination .page-numbers.dots {
    min-width: auto;
    padding: 0 4px;
    border-color: transparent;
    color: var(--pagination-muted);
}

.azulferri-pagination .fa {
    font-size: 1.3em;
}

/*
 * Miniaturas con imagen en las rejillas: al revés que Hitchcock.
 * Por defecto, degradado de abajo (la misma oscuridad que Hitchcock usaba al
 * pasar el ratón, 75 %) a transparente arriba, con fecha y título visibles.
 * Al pasar el ratón (o con foco de teclado) degradado y texto desaparecen y se
 * ve la imagen limpia. Sin ratón (móvil, tablet) queda el estado por defecto.
 * Las transiciones son las de Hitchcock (0,3 s; desactivadas con reduced-motion).
 */
.posts .has-post-thumbnail .post-overlay {
    background: linear-gradient(to top, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0) 100%);
    opacity: 1;
}

.posts .has-post-thumbnail .archive-post-title {
    color: #fff;
}

.posts .has-post-thumbnail .archive-post-header {
    bottom: 30px;
}

.posts .has-post-thumbnail:hover .post-overlay,
.posts .has-post-thumbnail:focus-visible .post-overlay {
    opacity: 0;
}

.posts .has-post-thumbnail:hover .archive-post-header,
.posts .has-post-thumbnail:focus-visible .archive-post-header {
    bottom: 35px;
}

@media (max-width: 600px) {
    .posts .has-post-thumbnail .archive-post-header {
        bottom: 20px;
    }

    .posts .has-post-thumbnail:hover .archive-post-header,
    .posts .has-post-thumbnail:focus-visible .archive-post-header {
        bottom: 25px;
    }
}