/**
 * Rejilla, tarjeta y paginado compartidos.
 *
 * Los usan las paginas con plantilla propia que listan entradas mezcladas
 * —la firma y la busqueda—, donde en la misma grilla conviven una ficha y una
 * nota. La tarjeta es la misma para las dos: cambia el rotulo y el pie, que los
 * arma bt_tarjeta_entrada() en functions.php.
 *
 * Los archivos de categoria no usan esta hoja: ahi manda el molde de Astra y su
 * CSS vive en listado.css.
 *
 * Los tokens comunes vienen de :root en header.css.
 */

.bt-rejilla {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.bt-rejilla__item {
	margin: 0;
	min-width: 0;
}

.bt-tarjeta {
	height: 100%;
	background: var(--bt-bg);
	border: 1px solid var(--bt-border);
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 1px 2px rgba(16, 29, 66, .05);
	transition: transform .15s, box-shadow .15s, border-color .15s;
}

.bt-tarjeta:hover,
.bt-tarjeta:focus-within {
	transform: translateY(-3px);
	border-color: #c3d3f6;
	box-shadow: 0 10px 22px rgba(16, 29, 66, .13);
}

/* La tarjeta entera es un enlace en columna: asi todas terminan a la misma
   altura y el pie queda abajo aunque el titulo ocupe un renglon menos. */
.bt-tarjeta__link {
	display: flex;
	flex-direction: column;
	height: 100%;
	color: inherit;
	text-decoration: none;
}

.bt-tarjeta__link:focus-visible {
	outline: 2px solid var(--bt-accent);
	outline-offset: -2px;
}

.bt-tarjeta__media {
	display: block;
	aspect-ratio: 4 / 3;
	background: var(--bt-surface-2);
	overflow: hidden;
	/* Raya fina de cierre: en las fichas la foto va sobre blanco y sin esto la
	   imagen y el texto quedaban en la misma hoja, sin nada que los separe. */
	border-bottom: 1px solid var(--bt-border);
}

.bt-tarjeta__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .25s;
}

/* Las fotos de ficha vienen recortadas al equipo sobre blanco: entran enteras,
   no se recortan de nuevo, y el aire lo pone la caja. */
.bt-tarjeta__media--ficha {
	background: #ffffff;
	/* Aire tambien abajo: sin el, el equipo quedaba apoyado en la raya. */
	padding: 12px 12px 8px;
}

.bt-tarjeta__media--ficha .bt-tarjeta__img {
	object-fit: contain;
}

.bt-tarjeta:hover .bt-tarjeta__img {
	transform: scale(1.03);
}

.bt-tarjeta__cuerpo {
	display: flex;
	flex-direction: column;
	gap: 6px;
	flex: 1 1 auto;
	padding: 14px 16px 16px;
}

.bt-tarjeta__kicker {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--bt-accent-dark);
}

.bt-tarjeta__title {
	margin: 0;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: -.01em;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.bt-tarjeta:hover .bt-tarjeta__title {
	color: var(--bt-accent-dark);
}

/* El pie se separa del titulo con una raya: en las notas es una fecha y en las
   fichas tres datos, y pegados al titulo se leian como parte de el. */
.bt-tarjeta__pie {
	margin-top: auto;
	padding-top: 9px;
	border-top: 1px solid var(--bt-border);
	font-size: 12.5px;
	line-height: 1.4;
	color: var(--bt-muted);
}

/* ---------- paginado ---------- */

.bt-pag {
	margin: 28px 0 0;
}

.bt-pag .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: center;
}

.bt-pag .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 12px;
	border: 1px solid #dde4f3;
	border-radius: 10px;
	background: var(--bt-bg);
	color: var(--bt-text);
	font-size: 14px;
	line-height: 1;
	text-decoration: none;
	transition: border-color .15s, background-color .15s, color .15s;
}

.bt-pag .page-numbers:hover,
.bt-pag .page-numbers:focus-visible {
	border-color: var(--bt-accent);
	background: var(--bt-accent-light);
	color: var(--bt-accent-dark);
}

.bt-pag .page-numbers.current {
	border-color: var(--bt-accent);
	background: var(--bt-accent);
	color: #ffffff;
	font-weight: 700;
}

.bt-pag .page-numbers.dots {
	border-color: transparent;
	background: transparent;
	color: var(--bt-muted);
}

/* ---------- adaptaciones ---------- */

@media (max-width: 559px) {
	.bt-rejilla {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (min-width: 900px) {
	.bt-rejilla {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (prefers-reduced-motion: reduce) {
	.bt-tarjeta,
	.bt-tarjeta__img,
	.bt-pag .page-numbers {
		transition: none;
	}

	.bt-tarjeta:hover,
	.bt-tarjeta:focus-within {
		transform: none;
	}

	.bt-tarjeta:hover .bt-tarjeta__img {
		transform: none;
	}
}