/* Page: Buscador (hemeroteca) — piezas propias no cubiertas por components/filters.css */

.buscador-form {
    margin-bottom: var(--space-l);
}

/* Selects de filtro (sector / clasificación), coherentes con .search-box__input:
   mismo fondo elevado y texto fuerte, para que campo de texto y desplegables
   se lean como una sola familia también en modo oscuro. */
.rp-select {
    width: 100%;
    padding: var(--space-s);
    border: 1px solid var(--border-hair);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-base);
    font-family: inherit;
    background: var(--surface-raised);
    color: var(--text-strong);
}

/* Estado de página en la paginación */
.pagination__status {
    display: inline-flex;
    align-items: center;
    padding: 0 var(--space-m);
    font-size: 0.9rem;
    color: var(--text-dim);
}

/* En móvil el estado sube a una fila propia, encima de los dos botones: así
   "Anteriores" y "Siguientes" comparten la línea de abajo en vez de quedar
   uno arriba y otro descolgado. */
@media (max-width: 479px) {
    .pagination__status {
        order: -1;
        flex-basis: 100%;
        justify-content: center;
    }
}

/* Grid de resultados: 1 / 2 / 3 columnas, dimensionado para el derivado _mp_feed (400x250,
   @2x 800x500) sin generar versiones nuevas. En ningún ancho la tarjeta supera los 400px CSS
   en pantallas 1x (en desktop ~363px), así que la foto nunca se reescala por encima de su
   tamaño real. 21 resultados por página = 7 filas completas de 3. */
.buscador-results {
    grid-template-columns: 1fr;
}

@media (min-width: 540px) {
    .buscador-results {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 768px) {
    .buscador-results {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* 16:10, la proporción del derivado: el navegador no recorta de nuevo la foto */
.buscador-results .card__image {
    aspect-ratio: 16 / 10;
}

/* Sin resultados / error */
.buscador-page__empty {
    text-align: center;
    padding: var(--space-xl) var(--space-m);
    color: var(--text-dim);
}

/* Suaviza el reemplazo AJAX del bloque de resultados */
#rp-search-results {
    transition: opacity 0.15s ease;
    /* Al paginar el JS hace scroll hasta aquí: sin este margen la primera fila
       quedaba debajo de la cabecera fija. */
    scroll-margin-top: var(--header-offset);
}