/*
	Bloc « À lire aussi », en fin d'article (template-parts/articles-lies.php).

	Chargé uniquement sur un article qui a des voisins à proposer (voir
	proskuneo_articles_lies_styles() dans inc/articles-lies.php), après blog.css dont il
	reprend les cartes : tout ce qui concerne .ps-carte vit là-bas et n'est pas redit ici.
	Seuls l'enveloppe, la grille et le focus clavier sont posés ici.
*/

/* Le bloc appartient encore à l'article, mais n'en fait plus partie : le filet reprend
   celui de .ps-page__navigation, juste en dessous, pour que les deux se répondent. */
.ps-lies {
	margin-top: var(--ps-space-xl);
	padding-top: var(--ps-space-lg);
	border-top: 1px solid rgb(30 33 64 / 12%);
}

/* Capitales par le CSS et non dans le texte source : la balise contient « À lire aussi »,
   que les synthèses vocales lisent comme une phrase. Poppins 900, comme tous les titres
   de section du thème (.ps-titre dans blocks.css). */
.ps-lies__titre {
	margin: 0 0 var(--ps-space-md);
	color: var(--ps-navy);
	font-family: var(--ps-font-display);
	font-size: 22px;
	font-weight: 900;
	line-height: 1.2;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

/* Deux colonnes pour quatre articles : dans les 800 px d'une page d'article, trois
   colonnes réduiraient chaque carte à 250 px, où les titres passent sur cinq lignes. */
.ps-lies__grille {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--ps-space-md);
}

/* Les cartes du bloc sont plus petites que celles du listing : leurs titres suivent, sans
   quoi ils occuperaient la moitié de la carte. */
.ps-lies .ps-carte__titre {
	font-size: 18px;
}

.ps-lies .ps-carte__extrait {
	font-size: 14px;
}

/* Vignette moins haute : ici l'image sert de repère, pas d'illustration. */
.ps-lies .ps-carte__media img {
	aspect-ratio: 16 / 9;
	max-height: 180px;
}

/* ⚠️ Une carte sans image à la une agrandit son titre jusqu'à 42 px, pour qu'il tienne
   lui-même le rôle du visuel manquant (voir blog.css). Le dispositif est juste dans la
   grille du blog, où les cartes font près de 600 px de large ; ici, à côté d'un titre de
   18 px, il écrase la carte voisine. Trente et un articles n'ont pas de vignette : le cas
   n'a rien d'exceptionnel.

   Le titre revient donc à une taille voisine des autres. Ce qui identifie la carte sans
   image est conservé intact : le fond crème et le filet doré en haut. */
.ps-lies .ps-carte:not(:has(.ps-carte__media)) .ps-carte__titre {
	font-size: 20px;
	line-height: 1.3;
	letter-spacing: normal;
}

.ps-lies .ps-carte:not(:has(.ps-carte__media)) .ps-carte__extrait {
	font-size: 14px;
}

/* --- Focus clavier -------------------------------------------------------- */

/* Le CSS repris de Webflow pose `a:active, a:hover { outline: 0 }` : le contour du
   navigateur s'efface dès que la souris passe sur un lien qui a le focus. Cette règle le
   rétablit franchement, en or sur fond clair, pour que la tabulation reste suivable à
   l'œil. Deux arrêts par carte : le titre, puis « Lire la suite » (la vignette porte
   tabindex="-1", elle n'est pas dans le parcours clavier).

   `:focus-visible` et non `:focus` : un clic à la souris n'a pas à dessiner un contour. */
.ps-lies a:focus-visible {
	outline: 3px solid var(--ps-gold);
	outline-offset: 3px;
	border-radius: 4px;
}

/* --- Mobile --------------------------------------------------------------- */

@media screen and (max-width: 767px) {
	.ps-lies__grille {
		grid-template-columns: minmax(0, 1fr);
	}

	.ps-lies .ps-carte__media img {
		max-height: none;
	}
}