/*
CSS de template-parts/card-related.php.
Grilla de 3 columnas, 1 sola fila. Solo estructura, sin diseño.
Distinto de cards.css (esa es la card de una columna para listados largos).
Se usa SOLO en single.php, en la sección de "relacionados".
*/

/* Esto es la grilla completa de las 3 cards relacionadas, lado a lado. */
.related-card-list {
	display: grid;                          /* activa el modo grilla (en vez de flex) */
	grid-template-columns: repeat(3, 1fr);  /* 3 columnas de igual ancho (1fr = una fracción del espacio disponible) */
	gap: 24px;                                /* espacio entre una card y la siguiente, tanto horizontal como vertical */
	border: 2px solid brown; /* borde de 2px, color marrón, para ubicar este bloque mientras diseñás */
}

/* Esto es UNA card relacionada individual completa (el <a> que envuelve todo, clickeable). */
.related-card-link {
	display: block;          /* hace que el link ocupe todo el ancho de su celda de la grilla */
	text-decoration: none;  /* saca el subrayado que traen los links por defecto */
	color: inherit;           /* hace que el texto use el color normal en vez del azul/violeta típico de un link */
	border: 2px solid olive; /* borde de 2px, color oliva, para ubicar este bloque mientras diseñás */
}

/* Esto es la meta imagen de la card relacionada. */
.related-card-image img {
	width: 100%;    /* ocupa todo el ancho de la celda de la grilla */
	height: auto;   /* la altura se ajusta sola, manteniendo la proporción */
	display: block; /* saca el espacio fantasma que dejan las imágenes por defecto (son inline) */
	border: 2px solid navy; /* borde de 2px, color navy, para ubicar este bloque mientras diseñás */
}

/* Esto es el título (h3) de la card relacionada. */
.related-card-title {
	margin: 12px 0 0; /* separación arriba (entre la imagen y el título), nada a los costados/abajo */
	border: 2px solid maroon; /* borde de 2px, color marrón oscuro, para ubicar este bloque mientras diseñás */
}

/* Esto es el extracto cortito y PAREJO (recortado siempre a 90 caracteres exactos,
   ver mitema_fixed_excerpt() en functions.php) para que las 3 cards se vean del mismo tamaño. */
.related-card-excerpt {
	margin: 6px 0 0; /* separación arriba (entre el título y el extracto) */
	border: 2px solid darkcyan; /* borde de 2px, color cian oscuro, para ubicar este bloque mientras diseñás */
}