/**
 * Liste des collections (/collections, et /products qui la reprend).
 *
 * Mesures relevées sur la référence à 1440 px et 375 px
 * (scripts/inspect-collections-ref.mjs, reference/collections/mesures.json) :
 * conteneur plafonné à 1575px, grille de 3 colonnes à 8px d'écart en
 * desktop et de 2 colonnes à 4px en mobile, cartes à image carrée.
 */

/* ------------------------------------------------------------------ */
/* Conteneur                                                           */
/* ------------------------------------------------------------------ */

/* Astra plafonne son conteneur à 1240px et lui pose 60px de marge
   verticale par une règle en ligne, plus spécifique que la nôtre : d'où
   l'ID doublé, comme sur les autres gabarits du thème (voir page.css). */
body.baba-collections .ast-container.ast-container {
	max-width: none;
	padding-left: 0;
	padding-right: 0;
}

body.baba-collections #primary#primary {
	margin-top: 0;
	margin-bottom: 0;
}

/* Le conteneur d'Astra est en flex : sans largeur explicite, la liste se
   réduirait à la largeur de son contenu. Le sélecteur vise bien la div —
   le corps de page porte la même classe. */
div.baba-collections {
	width: 100%;
}

body.baba-collections #primary#primary > .ast-article-single {
	width: 100%;
	padding: 0;
	border: 0;
}

.baba-collections__inner {
	max-width: 1575px;
	margin: 0 auto;
	padding: 0 31.5px;
}

/* ------------------------------------------------------------------ */
/* Titre                                                               */
/* ------------------------------------------------------------------ */

.baba-collections__title.baba-collections__title {
	margin: 21px 0;
	font-family: var(--baba-font-heading);
	font-weight: var(--baba-font-weight-normal);
	font-size: 40px;
	line-height: 52px;
	letter-spacing: var(--baba-heading-letter-spacing);
	color: var(--baba-color-text-solid);
	text-align: left;
	text-transform: none;
}

/* ------------------------------------------------------------------ */
/* Grille                                                              */
/* ------------------------------------------------------------------ */

/* minmax(0, 1fr) et non 1fr : une colonne « 1fr » garde un minimum
   automatique, si bien qu'un titre trop long pour sa carte l'élargit et
   fait déborder la grille — en mobile, les cartes passaient de 164,5 à
   215,4px. Le minimum à zéro rend la colonne vraiment élastique. */
.baba-collections__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.baba-collections__vide {
	margin: 21px 0;
	font-family: var(--baba-font-body);
	font-size: var(--baba-text-base);
}

/* ------------------------------------------------------------------ */
/* Carte                                                               */
/* ------------------------------------------------------------------ */

.baba-collection-card {
	display: flex;
	margin: 0;
	padding: 0;
	list-style: none;
}

.baba-collection-card__link {
	display: flex;
	width: 100%;
	flex-direction: column;
	color: inherit;
	text-decoration: none;
}

/* Image carrée : c'est le ratio que la référence impose à ses cartes de
   collection, quelle que soit la taille du fichier d'origine. */
.baba-collection-card__media {
	display: block;
	overflow: hidden;
	width: 100%;
	aspect-ratio: 1;
	background-color: var(--baba-color-bg-alt);
}

.baba-collection-card__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Pas de retrait latéral : sur la référence, le titre occupe toute la
   largeur de la carte, image comprise — mesuré à 164,5px sur une carte de
   164,5px. Seul l'espace vertical le sépare de l'image. */
.baba-collection-card__info {
	display: block;
	padding: 17.85px 0;
}

.baba-collection-card__title {
	display: block;
	font-family: var(--baba-font-heading);
	font-weight: var(--baba-font-weight-normal);
	font-size: 18px;
	line-height: 23.4px;
	letter-spacing: var(--baba-heading-letter-spacing);
	color: #121212;
	text-align: left;

	/* Les noms de cannabinoïdes forment des mots plus longs que la carte
	   n'est large : la référence les coupe, faute de quoi ils débordent et
	   la carte compte une ligne de moins qu'elle ne devrait. */
	word-break: break-word;
}

/* Flèche du titre : 15px de large, 8,4px de marge à gauche, sur la ligne
   de base du texte — valeurs relevées sur la référence. Elle ne se coupe
   jamais du dernier mot. */
.baba-collection-card__arrow {
	display: inline;
	margin-left: 8.4px;
	white-space: nowrap;
}

.baba-collection-card__arrow svg {
	display: inline;
	width: 15px;
	height: 10.7031px;
	vertical-align: baseline;
	color: var(--baba-color-text-solid);
}

/* Le titre se souligne au survol, comme sur la référence. */
.baba-collection-card__link:hover .baba-collection-card__title,
.baba-collection-card__link:focus-visible .baba-collection-card__title {
	text-decoration: underline;
	text-underline-offset: 3px;
}

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

@media (max-width: 749px) {
	.baba-collections__inner {
		padding: 0 21px;
	}

	.baba-collections__title.baba-collections__title {
		margin: 42px 0;
		font-size: 20px;
		line-height: 24px;
	}

	.baba-collections__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 4px;
	}

	.baba-collection-card__info {
		padding: 13.65px 0;
	}

	.baba-collection-card__title {
		font-size: 17px;
		line-height: 22.1px;
	}
}

/* Astra rétrécit son conteneur à 0.54em de marge sous 544px par une règle
   qui vise un ID (#content) : aucune combinaison de classes ne passe
   devant, il faut viser le même ID. */
@media (max-width: 544px) {
	body.baba-collections #content .ast-container.ast-container {
		padding-left: 0;
		padding-right: 0;
	}
}