/**
 * Listados: archivos de marca y de gama, blog, categorias y busqueda.
 *
 * Astra los pinta con blog-layout-4 a tres columnas y tarjetas grandes: foto
 * enorme, titulo a cuatro renglones y resumen largo, cada tarjeta con su propio
 * alto. Aca se convierten en tarjetas chicas y parejas, con la misma logica que
 * la portada: foto encuadrada, categoria, titulo corto y una linea de datos.
 *
 * Todo por CSS sobre el molde de Astra; el unico cambio de marcado es la fecha
 * sola en la meta y el resumen de las fichas (ver functions.php).
 */

/* ---------- cabecera del archivo ---------- */

/* Astra le da caja blanca propia y mucho aire; con el titulo solo adentro,
   media pantalla se iba en un recuadro vacio. */
body.archive.ast-separate-container .ast-archive-description,
body.archive.ast-plain-container .ast-archive-description,
body.search.ast-separate-container .ast-archive-description {
	padding: 22px 0 0;
	margin: 0;
	background: transparent;
	border: 0;
	text-align: left;
}

.ast-archive-description .ast-archive-title {
	margin: 0;
	font-size: clamp(24px, 3vw, 32px);
	font-weight: 700;
	letter-spacing: -.02em;
	line-height: 1.2;
}

.bt-arch__cuantas {
	margin: 6px 0 0;
	font-size: 13px;
	color: #6b7280;
}

/* ---------- rejilla ---------- */

/* La fila de Astra sale con margen negativo a los lados; sin esto la rejilla
   arranca 16 px a la izquierda del titulo del archivo. */
body.ast-separate-container.ast-desktop .ast-blog-layout-4-grid .ast-row,
body .ast-blog-layout-4-grid .ast-row {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
	margin: 0;
	padding: 0;
}

/* Astra reparte el ancho por columnas propias; con la rejilla ese ancho sobra. */
.ast-blog-layout-4-grid .ast-row .ast-article-post {
	width: 100%;
	max-width: none;
	min-width: 0;
	margin: 0;
	padding: 0;
	background: #ffffff;
	border: 1px solid #e5e8ef;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 1px 2px rgba(16, 29, 66, .05);
	transition: transform .15s, box-shadow .15s, border-color .15s;
}

.ast-blog-layout-4-grid .ast-row .ast-article-post:hover,
.ast-blog-layout-4-grid .ast-row .ast-article-post:focus-within {
	transform: translateY(-3px);
	border-color: #c3d3f6;
	box-shadow: 0 10px 22px rgba(16, 29, 66, .13);
}

/* La tarjeta entera es una columna: asi todas terminan a la misma altura.
   Sin `height: 100%`: dentro de una rejilla, esa altura en porcentaje depende de
   la fila y la fila del contenido, y el navegador resolvia mal el alto de las
   tarjetas con resumen de dos lineas; el texto se salia por abajo y la tarjeta,
   que recorta, lo cortaba. Con flex el alto se reparte sin porcentajes. */
.ast-blog-layout-4-grid .ast-row .ast-article-post {
	display: flex;
	flex-direction: column;
}

.ast-blog-layout-4-grid .ast-article-inner,
.ast-blog-layout-4-grid .ast-article-inner > .post-content {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
	padding: 0;
	background: transparent;
	border: 0;
	box-shadow: none;
}

/* ---------- foto ---------- */

.ast-blog-layout-4-grid .ast-blog-featured-section {
	margin: 0;
	/* Fondo tenue detras de la foto completa: sin recorte quedan franjas y el
	   blanco puro las dejaba flotando. */
	background: #f7f9fc;
	overflow: hidden;
}

/* Astra saca la foto del relleno de la tarjeta con margenes negativos de 1.5em.
   Con la tarjeta chica eso dejaba la imagen 24 px mas ancha y 24 px mas alta que
   su caja, y como la caja recorta, el equipo aparecia cortado arriba y abajo. */
body .ast-blog-layout-4-grid .ast-article-post.remove-featured-img-padding .blog-layout-4 .post-content .ast-blog-featured-section .post-thumb-img-content,
body .ast-blog-layout-4-grid .ast-article-post.remove-featured-img-padding .blog-layout-4 .post-content .ast-blog-featured-section:first-child .post-thumb-img-content,
.ast-blog-layout-4-grid .post-thumb-img-content,
.ast-blog-layout-4-grid .post-thumb-img-content a {
	display: block;
	margin: 0;
}

.ast-blog-layout-4-grid .post-thumb-img-content img {
	display: block;
	width: 100%;
	height: auto;
	/* Mismo encuadre para todas: con fichas cuadradas y notas apaisadas en la
	   misma fila, las tarjetas quedaban de alturas muy distintas.
	   `contain` en vez de `cover`: la foto entra entera, sin recortar. Las notas
	   son 3:2 y pierden unos pocos pixeles arriba y abajo contra la caja. */
	aspect-ratio: 4 / 3;
	object-fit: contain;
	transition: transform .35s ease;
}

.ast-blog-layout-4-grid .ast-article-post:hover .post-thumb-img-content img {
	transform: scale(1.04);
}

/* Fichas: el equipo viene recortado sobre blanco y en vertical. Cuadrado y sin
   recorte, o el 16/9 entra de lleno en la pantalla del telefono. */
.ast-blog-layout-4-grid .ast-article-post.category-ficha .ast-blog-featured-section {
	background: #ffffff;
}

.ast-blog-layout-4-grid .ast-article-post.category-ficha .post-thumb-img-content img {
	background: #ffffff;
}

.ast-blog-layout-4-grid .ast-article-post.category-ficha:hover .post-thumb-img-content img {
	transform: none;
}

/* ---------- texto ---------- */

/* El texto respira: 16 px a los lados y aire propio arriba y abajo.
   `padding-inline` y no el atajo `padding`: con el atajo, esta regla —que por el
   :not() pesa mas que las de abajo— borraba el relleno superior de la categoria
   y el inferior del resumen, y la ultima linea quedaba pegada al borde. */
.ast-blog-layout-4-grid .ast-blog-single-element:not(.ast-blog-featured-section) {
	margin: 0;
	padding-inline: 16px;
}

.ast-blog-layout-4-grid .cat-links {
	display: block;
	padding-top: 14px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	line-height: 1.3;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.ast-blog-layout-4-grid .cat-links a {
	color: #6b7280;
	text-decoration: none;
}

.ast-blog-layout-4-grid .cat-links a:hover {
	color: #0066ff;
}

.ast-blog-layout-4-grid .entry-title {
	margin: 6px 0 0;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.35;
	letter-spacing: -.01em;
	/* Dos renglones y corta: los titulos de ficha repiten el modelo. */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.ast-blog-layout-4-grid .entry-title a {
	color: #1a1d24;
	text-decoration: none;
}

.ast-blog-layout-4-grid .entry-title a:hover {
	color: #1236c4;
}

.ast-blog-layout-4-grid .ast-blog-meta-container {
	margin: 6px 0 0;
}

.ast-blog-layout-4-grid .entry-meta,
.ast-blog-layout-4-grid .entry-meta * {
	font-size: 12px;
	color: #6b7280;
}

.ast-blog-layout-4-grid .entry-meta a {
	color: #6b7280;
	text-decoration: none;
}

.ast-blog-layout-4-grid .ast-excerpt-container {
	margin: 6px 0 0;
	padding-bottom: 18px;
}

.ast-blog-layout-4-grid .ast-excerpt-container p {
	margin: 0;
	font-size: 13px;
	line-height: 1.5;
	color: #6b7280;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* El contenedor vacio que Astra deja al final no tiene que empujar la tarjeta. */
.ast-blog-layout-4-grid .ast-article-inner .entry-content {
	margin: 0;
	padding: 0;
}

/* Si una ficha se queda sin resumen, la fecha pasa a ser lo ultimo. */
.ast-blog-layout-4-grid .ast-blog-meta-container:last-child,
.ast-blog-layout-4-grid .entry-title:last-child {
	padding-bottom: 18px;
}


/* ---------- tarjeta de ficha ---------- */

/* La ficha no es una nota y no puede usar la misma tarjeta: lo que decide una
   compra son los datos, no un resumen. Se reconoce por `category-ficha`, la
   categoria interna del generador que traen las 741 —la misma que el rotulo
   esconde—, asi que no hace falta marcar nada aparte.

   Reparto de la tarjeta: rotulo y titulo arriba, y los datos con el enlace al
   comparador anclados al pie, para que en una fila queden todos a la misma
   altura por mas que un titulo ocupe dos renglones y el de al lado uno. */

/* El equipo es vertical y viene recortado al ras sobre blanco: en 4:3 flotaba
   en el medio de una caja apaisada, con aire muerto a los costados. */
.ast-blog-layout-4-grid .ast-article-post.category-ficha .post-thumb-img-content img {
	aspect-ratio: 4 / 5;
	padding: 12px 12px 0;
	background: #ffffff;
}

.ast-blog-layout-4-grid .category-ficha .cat-links {
	padding-top: 12px;
	color: #9aa3b2;
}

.ast-blog-layout-4-grid .category-ficha .entry-title {
	margin-top: 4px;
	font-size: 15.5px;
}

/* Los datos: pastillas sueltas en vez de un parrafo recortado a dos renglones.
   Gana el `display:-webkit-box` de la regla general por tener una clase mas,
   sin `!important`. */
.ast-blog-layout-4-grid .category-ficha .ast-excerpt-container {
	margin-top: auto;
	padding-top: 10px;
	padding-bottom: 0;
}

.ast-blog-layout-4-grid .category-ficha .ast-excerpt-container p {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
	min-width: 0;
	overflow: visible;
}

.bt-card__dato {
	display: inline-block;
	padding: 3px 8px;
	border-radius: 100px;
	background: #f1f5fb;
	border: 1px solid #e5e9f3;
	color: #46506a;
	font-size: 11.5px;
	font-weight: 600;
	line-height: 1.45;
	white-space: nowrap;
}

/* El 5G es lo unico de la fila que separa dos equipos parecidos. */
.bt-card__dato--red {
	background: #e7f0ff;
	border-color: #cfe0ff;
	color: #1236c4;
}

.bt-card__pie {
	padding: 12px 16px 14px;
}

.bt-card__vs {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 12.5px;
	font-weight: 600;
	color: #1236c4;
	text-decoration: none;
}

/* La flecha es decoracion: por CSS no se copia al seleccionar ni la lee un
   lector de pantalla. */
.bt-card__vs::after {
	content: "\2192";
	font-size: 13px;
	transition: transform .15s;
}

.bt-card__vs:hover,
.bt-card__vs:focus-visible {
	text-decoration: underline;
}

.bt-card__vs:hover::after {
	transform: translateX(3px);
}

@media (prefers-reduced-motion: reduce) {
	.bt-card__vs::after,
	.bt-card__vs:hover::after {
		transition: none;
		transform: none;
	}
}
/* ---------- adaptaciones ---------- */

@media (min-width: 700px) {
	body.ast-separate-container.ast-desktop .ast-blog-layout-4-grid .ast-row,
	body .ast-blog-layout-4-grid .ast-row {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (min-width: 1100px) {
	body.ast-separate-container.ast-desktop .ast-blog-layout-4-grid .ast-row,
	body .ast-blog-layout-4-grid .ast-row {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 18px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ast-blog-layout-4-grid .ast-row .ast-article-post,
	.ast-blog-layout-4-grid .post-thumb-img-content img {
		transition: none;
	}

	.ast-blog-layout-4-grid .ast-row .ast-article-post:hover {
		transform: none;
	}

	.ast-blog-layout-4-grid .ast-article-post:hover .post-thumb-img-content img {
		transform: none;
	}
}