/* El filtro del blog usaba su PROPIO componente, `.av-blogfil__chip`, con otra
   tipografia y otro alto que las pastillas del resto de la web. Ahora usa
   `.av-chips` / `.av-chip` de theme-v2-base.css, que es donde vive el componente
   compartido. Aqui no queda ni una regla suya a proposito: si vuelve a aparecer
   una pastilla distinta en el blog, es que se ha redeclarado fuera de la base. */
/*
 * Autos Valls · Theme v2 — Blog (listado y archivos de categoria)
 * ---------------------------------------------------------------
 * Epica AUTOVA-157 (EP-14) · Tareas AV-T-152 a AV-T-161.
 *
 * Se carga DESPUES de theme-v2-tokens.css y de theme-v2-home.css, que hace de
 * base en todas las paginas v2 (ahi viven .av-wrap, .av-btn, .av-seccion,
 * .av-h2, .av-eyebrow y el chrome). Aqui solo va lo propio de esta pagina.
 *
 * MOBILE FIRST. Todas las media queries son min-width y estan al final:
 * cualquier regla que toque algo definido ahi tiene que ir ANTES, o gana por
 * orden. Es el fallo del override del mapa en la home, declarado 100 lineas
 * antes que su regla base y con la misma especificidad.
 *
 * ⚠️ `.av-v2` DELANTE DE TODA REGLA QUE TOQUE UN .av-wrap. `.av-v2 .av-wrap`
 * lleva max-width:1240px con dos clases de especificidad; una clase sola pierde
 * y la seccion sale a otro ancho, dejando la pagina con dos ejes y sin ningun
 * aviso. Mordio en EP-13.
 *
 * TRES DECISIONES QUE SE APARTAN DEL PROTOTIPO
 * -------------------------------------------
 * 1. Las columnas NO van al 50 %. El prototipo usa
 *    `repeat(auto-fit, minmax(280px,1fr))` sobre 1.192 px utiles, que da
 *    579 + 579: media pagina para tres cajas pequenas. Aqui la rejilla se lleva
 *    el doble que el lateral (2fr / 1fr).
 * 2. El boton del CTA lateral es marino con texto blanco (12,9:1). El prototipo
 *    lo pinta cian con blanco: 2,78:1, prohibido en theme-v2-tokens.css.
 * 3. El eyebrow y el rotulo de categoria de la tarjeta van en --av-enlace
 *    (5,0:1) y no en el cian de marca. Son texto, no un adorno.
 *
 * DUPLICACION CONOCIDA: el bloque de MIGAS es identico al de
 * theme-v2-ficha.css. No se comparte porque cada pagina carga solo su hoja y
 * .av-migas no esta en la base. Su sitio es theme-v2-base.css, que es AUTOVA-108.
 *
 * INDICE
 *   0. Migas                        (57)
 *   1. Cabecera                     (100)
 *   2. Chips de categoria           (128)
 *   3. Cuerpo: rejilla + lateral    (178)
 *   4. Tarjeta de articulo          (196)
 *   5. Estado vacio                 (274)
 *   6. Barra lateral                (296)
 *   7. Paginacion                   (372)
 *   8. Tablet (640px)               (430)
 *   9. Escritorio (1024px)          (444)
 *  10. Movimiento reducido          (470)
 */

/* ==================================================================
 * 1. Cabecera
 * ================================================================== */

.av-blogcab {
    background: var(--av-blanco);
}

.av-v2 .av-blogcab__in {
    padding-top: 32px;
}

.av-blogcab__h1 {
    font-family: var(--av-fuente-titulo);
    font-weight: 800;
    font-size: var(--av-t-h1-pagina);
    line-height: 1.12;
    letter-spacing: -.01em;
    margin: 0;
    color: var(--av-marino);
    text-wrap: balance;
}

.av-blogcab__bajada {
    margin: 12px 0 0;
    max-width: 64ch;
    font-size: var(--av-t-md);
    line-height: 1.65;
    color: var(--av-texto-2);
}

/* ==================================================================
 * 2. Chips de categoria
 * ================================================================== */





/* El prototipo da 10px 16px y 13px de texto, que sale a 40px de alto. El minimo
   tactil son 44 y estos chips son el unico control de la pagina que se pulsa con
   el pulgar: se sube el alto y se deja el resto igual. */




/* El estado activo NO se transmite solo con color: tambien sube el peso, y el
   marcado lleva aria-current="page". Subido a 800 (antes 700) al perder el
   600 base: si los dos pesaran igual, el activo dejaria de notarse por peso. */




/* ==================================================================
 * 3. Cuerpo: rejilla + lateral
 * ================================================================== */

.av-v2 .av-blog__cuerpo {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
    align-items: start;
    padding-top: 28px;

    /* El prototipo deja el padding inferior a 0 y el listado termina pegado al
       pie. Casi seguro es un descuido: no hay ninguna otra pantalla asi. */
    padding-bottom: 64px;
}

.av-blog__col {
    min-width: 0;
}

/* ==================================================================
 * 4. Tarjeta de articulo
 * ================================================================== */

.av-blogrej {
    display: grid;

    /* 🔴 auto-fit, NO auto-fill. La pagina 3 lleva UNA tarjeta (19 = 9+9+1) y
       con auto-fill saldria sola con cuatro columnas fantasma al lado. */
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 22px;
}

/* ⚠️ EL TOPE ES POR LA PAGINA 3. Con `auto-fit`, una sola tarjeta ocupa la
   pista entera: en escritorio salia un articulo de 768 px de ancho con una foto
   16/10 gigante. auto-fill lo arreglaria estirando menos, pero a cambio deja
   columnas fantasma, que es peor y ya paso en la home. El tope solo actua
   cuando hay una o dos tarjetas: en una fila llena las pistas miden ~241 px. */
.av-blogtj {
    display: flex;
    flex-direction: column;
    max-width: 420px;
    overflow: hidden;
    border: 1px solid var(--av-borde);
    border-radius: var(--av-r-tarjeta);
    background: var(--av-blanco);

    /* 🔴 EL UNICO POSICIONADO DE LA TARJETA. El ::after del enlace se ancla al
       ancestro posicionado mas cercano: si el cuerpo o el rotulo llevaran
       position:relative, la zona clicable se encogeria a ellos y solo
       respondería el titulo. Paso en la home. */
    position: relative;
    transition: box-shadow var(--av-transicion), transform var(--av-transicion);
}

.av-blogtj:hover {
    box-shadow: var(--av-sombra-suave);

    /* transform y no margin: mover el margen recalcularia el layout de la fila
       entera en cada hover. */
    transform: translateY(-3px);
}

.av-blogtj__foto {
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--av-fondo-suave);
}

.av-v2 .av-blogtj__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.av-blogtj__cuerpo {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 8px;
    padding: 16px;
}

.av-blogtj__cat {
    font-family: var(--av-fuente-titulo);
    font-weight: 700;
    font-size: var(--av-t-eyebrow);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--av-enlace);
}

.av-blogtj__titulo {
    font-family: var(--av-fuente-titulo);
    font-weight: 800;
    font-size: var(--av-t-articulo);
    line-height: 1.3;
    margin: 0;
    color: var(--av-marino);

    /* Titulos largos como «Cómo alquilar un coche en el Aeropuerto de Menorca
       sin cometer errores» tienen que partir, no desbordar. */
    overflow-wrap: anywhere;
}

/* El foco cae en el titulo: UN solo tabulador por tarjeta. */
.av-v2 .av-blogtj__enlace {
    color: inherit;
    text-decoration: none;
}

.av-v2 .av-blogtj__enlace::after {
    content: "";
    position: absolute;
    inset: 0;
}

.av-blogtj__resumen {
    margin: 0;
    font-size: var(--av-t-nav);
    line-height: 1.55;
    color: var(--av-texto-2);
}

.av-blogtj__mas {
    margin-top: auto;
    padding-top: 4px;
    font-family: var(--av-fuente-titulo);
    font-weight: 700;
    font-size: var(--av-t-meta);
    color: var(--av-marino);
}

/* ==================================================================
 * 5. Estado vacio
 * ================================================================== */

/* /category/tu-coche-en-el-aeropuerto-de-menorca/ existe y tiene 0 posts. */
.av-blogvacio {
    padding: 32px 20px;
    border: 1px solid var(--av-borde);
    border-radius: var(--av-r-tarjeta);
    background: var(--av-fondo-suave);
    text-align: center;
}

.av-blogvacio__titulo {
    font-family: var(--av-fuente-titulo);
    font-weight: 800;
    font-size: var(--av-t-lg);
    line-height: 1.3;
    margin: 0 0 8px;
    color: var(--av-marino);
}

.av-blogvacio__texto {
    margin: 0 auto 20px;
    max-width: 46ch;
    font-size: var(--av-t-base);
    line-height: 1.6;
    color: var(--av-texto-2);
}

.av-v2 .av-blogvacio__boton {
    width: auto;
}

/* ==================================================================
 * 6. Barra lateral
 * ================================================================== */

.av-bloglat {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

.av-bloglat__caja {
    padding: var(--av-e-7b);
    border: 1px solid var(--av-borde);
    border-radius: var(--av-r-tarjeta);
    background: var(--av-blanco);
}

/* El borde cian de 1,5px del prototipo: aqui SI vale, porque es un borde, no
   un fondo bajo texto blanco. */
.av-bloglat__caja--cta {
    border: 1.5px solid var(--av-cielo);
    background: var(--av-fondo-frio);
}

.av-bloglat__titulo {
    font-family: var(--av-fuente-titulo);
    font-weight: 800;
    font-size: var(--av-t-base);
    line-height: 1.3;
    margin: 0 0 10px;
    color: var(--av-marino);
}

.av-bloglat__texto {
    margin: 0 0 14px;
    font-size: var(--av-t-nav);
    line-height: 1.6;
    color: var(--av-texto-2);
}

/* --- Buscador ------------------------------------------------------ */

.av-blogbus__label {
    display: block;
    font-family: var(--av-fuente-titulo);
    font-weight: 700;
    font-size: var(--av-t-xs);
    letter-spacing: .04em;
    margin-bottom: 8px;
    color: var(--av-marino);
}

.av-blogbus__fila {
    display: flex;
    gap: 8px;
}

.av-v2 .av-blogbus__input {
    flex: 1;
    min-width: 0;
    box-sizing: border-box;
    min-height: 44px;
    padding: 11px 12px;
    border: 1px solid var(--av-borde);
    border-radius: var(--av-r-boton);
    background: var(--av-blanco);
    font-family: var(--av-fuente-texto);
    font-size: var(--av-t-sm);
    color: var(--av-marino);
}

.av-v2 .av-blogbus__boton {
    flex: none;
    width: auto;
    padding-left: 16px;
    padding-right: 16px;
}

/* --- Ultimas publicaciones ----------------------------------------- */

.av-blogult {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.av-v2 .av-blogult__enlace {
    display: flex;
    gap: 10px;
    align-items: center;
    color: var(--av-marino);
}

.av-v2 .av-blogult__enlace:hover .av-blogult__titulo {
    text-decoration: underline;
}

.av-blogult__foto {
    flex: none;
    width: 48px;
    height: 48px;
    overflow: hidden;
    border-radius: var(--av-r-boton);
    background: var(--av-fondo-suave);
}

.av-v2 .av-blogult__foto img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.av-blogult__titulo {
    font-size: var(--av-t-cap);
    font-weight: 600;
    line-height: 1.4;
    color: var(--av-marino);
}

/* ==================================================================
 * 7. Paginacion
 * ================================================================== */

.av-blogpag {
    margin-top: 36px;
}

.av-v2 .av-blogpag .page-numbers {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* paginate_links( type => list ) envuelve cada elemento en un <li>. */
.av-blogpag li {
    margin: 0;
}

.av-v2 .av-blogpag .page-numbers li > * {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    /* El diseno pide 38x38. El minimo tactil son 44: se sube la caja y se deja
       el aspecto de 38 con el borde. */
    min-width: 44px;
    min-height: 44px;
    padding: 0 12px;
    box-sizing: border-box;
    border: 1px solid var(--av-borde);
    border-radius: var(--av-r-boton);
    background: var(--av-blanco);
    font-family: var(--av-fuente-titulo);
    font-weight: 700;
    font-size: var(--av-t-meta);
    line-height: 1;
    color: var(--av-marino);
    transition: border-color var(--av-transicion), background-color var(--av-transicion);
}

.av-v2 .av-blogpag .page-numbers li > a:hover {
    border-color: var(--av-marino);
    color: var(--av-marino);
}

/* La actual la pinta paginate_links() como <span class="current">: no es un
   enlace, no recibe foco y no se puede pulsar. */
.av-v2 .av-blogpag .page-numbers li > .current {
    background: var(--av-marino);
    border-color: var(--av-marino);
    color: var(--av-blanco);
}

.av-v2 .av-blogpag .page-numbers li > .dots {
    border-color: transparent;
    background: transparent;
}

/* ==================================================================
 * 8. Tablet (640px)
 * ================================================================== */

@media (min-width: 640px) {

    .av-v2 .av-blogcab__in {
        padding-top: 44px;
    }

}

/* ==================================================================
 * 9. Escritorio (1024px)
 * ================================================================== */

@media (min-width: 1024px) {


    /* 🔴 AQUI ESTA LA DESVIACION DEL PROTOTIPO. El suyo da 579 + 579 por usar
       auto-fit sobre dos pistas iguales. Con nueve tarjetas y tres cajas
       pequenas, dos tercios / un tercio reparte el espacio donde esta el
       contenido: ~768 px de rejilla frente a ~384 px de lateral (medido). */
    .av-v2 .av-blog__cuerpo {
        grid-template-columns: 2fr 1fr;
        gap: 40px;
    }

    /* Los nueve chips suman ~1.215 px y el contenedor tiene 1.200: en
       escritorio la fila se desplazaba en horizontal con la barra oculta, que
       es scroll invisible. En movil el desplazamiento es un gesto natural; con
       raton no lo es. A partir de aqui se reparten en dos lineas. */

}

/* ==================================================================
 * 10. Movimiento reducido
 * ================================================================== */

@media (prefers-reduced-motion: reduce) {

    .av-blogtj,
    .av-v2 .av-blogfil__chip,
    .av-v2 .av-blogpag .page-numbers li > * {
        transition: none;
    }

    .av-blogtj:hover {
        transform: none;
    }
}