/**
 * Bloc « Gardien du bon prix » de l'accueil — Ange Canada.
 *
 * Le carrousel d'offres de `home-templates/home-offers.php` a été dessiné pour les promos
 * du réseau français, dont le prix tient en deux ou trois signes (« 5 € », « 3+1 ») et la
 * description en trois mots (« Durée limitée »). Nos offres canadiennes sont beaucoup plus
 * bavardes — « 4 offertes / dès 15$ d'achat », et une description de six lignes pour la
 * promo fidélité — et la mise en page du parent ne l'encaisse pas :
 *
 *  1. **le prix débordait sur le texte.** `.offers__price` est dimensionné à la fenêtre
 *     (`fluid-size(20,35)`, soit 35 px à 1920) alors que la colonne qui le porte fait
 *     `col-3 col-md-4`, c'est-à-dire ~126 px dans une carte de 377 px. « OFFERTES » y
 *     mesurait 149 px : 23 px passaient par-dessus le texte de la carte ;
 *  2. **les cartes étaient de hauteurs inégales** (462 à 578 px), les diapos de slick
 *     flottant les unes à côté des autres — bas de bloc en dents de scie ;
 *  3. **les blocs prix n'étaient pas alignés d'une carte à l'autre** : la ligne est en
 *     `align-items: center`, donc le prix se centre sur la hauteur du texte voisin, qui
 *     varie d'une carte à l'autre ;
 *  4. **~460 px de noir séparaient le bloc précédent du titre** : 240 px de `pt-lg-7` sur
 *     le bloc, 60 px de `pt-lg-5` sur son conteneur, et les 120 px de `py-lg-6` du bloc
 *     au-dessus. Le picto pizza, seul élément posé dans cette réserve, est un PNG sombre
 *     à 0,7 d'opacité sur fond noir : il ne la remplit pas.
 *
 * Rien n'est corrigé dans le thème parent : son `dist/` est un artefact de build non
 * versionné (cf. `ange/.gitignore`), une correction faite là serait perdue au premier
 * `npm run build`. Tout passe donc par cette feuille, chargée après la sienne.
 *
 * Les règles de composition des cartes sont volontairement portées par
 * `.home-offers__slick`, c'est-à-dire le seul carrousel de l'accueil. Les mêmes classes
 * `home-offers__slide` servent aux cartes de `/nos-offres/` et `/en/our-offers/`
 * (`ange/template-parts/content-offers.php`), mais là les cartes sont deux fois plus
 * larges : elles n'ont pas le défaut, et leur composition centrée est voulue.
 */

/* -------------------------------------------------------------------------
 * 1. Le vide au-dessus du bloc
 * ---------------------------------------------------------------------- */

/*
 * Uniquement sur l'accueil : ailleurs (le bloc est aussi ajouté en bas des pages au
 * gabarit par défaut, cf. `ange/page.php:33`) le gabarit pose `pt-lg-4` et il n'y a
 * rien à reprendre.
 *
 * On ne descend pas plus bas que ~260 px de respiration entre le contenu précédent et
 * le titre : le fond `bg-offers.png` (le boulanger dans la fumée) est ancré en haut du
 * bloc et a besoin de place pour se lire. Le site français, qui fait référence ici,
 * en laisse davantage encore.
 */
@media (min-width: 992px) {

	.home .home-offers {
		padding-top: 6.25rem !important; /* 240 px -> 100 px ; bat le `pt-lg-7` de Bootstrap */
	}

	.home .home-offers > .container {
		padding-top: 2.5rem !important; /* 60 px -> 40 px */
	}

	/*
	 * Le picto suit le conteneur, qui vient de remonter de 160 px : sans cela il
	 * repartait dans le bloc précédent. Il dérive de toute façon vers le bas au
	 * défilement (`.parallax`, `data-speed="-0.18"`, cf.
	 * `ange/src/assets/scripts/gspap-anims.js`), ce n'est donc qu'une position de départ.
	 */
	.home .home-offers__picto-pizza {
		top: -11.25rem; /* -340 px -> -180 px */
	}
}

/* -------------------------------------------------------------------------
 * 2. Des cartes de hauteur égale
 * ---------------------------------------------------------------------- */

/*
 * slick fait flotter ses diapos : elles s'alignent en haut et retombent où leur contenu
 * s'arrête. On repasse la piste en flex — recette usuelle pour slick — pour que toutes
 * les cartes prennent la hauteur de la plus grande.
 */
.home-offers__slick .slick-track {
	display: flex;
	align-items: stretch;
}

.home-offers__slick .slick-slide {
	height: auto;
	float: none;
}

/* slick enveloppe chaque diapo dans un `<div>` sans classe (option `rows`). */
.home-offers__slick .slick-slide > div {
	height: 100%;
}

/* `display: flex` en `!important` : slick pose `display: inline-block` en style en ligne. */
.home-offers__slick .home-offers__slide {
	height: 100%;
	display: flex !important;
	flex-direction: column;
}

/* -------------------------------------------------------------------------
 * 3. La ligne « prix + texte »
 * ---------------------------------------------------------------------- */

/* Le prix se cale sur le titre, et non plus au milieu d'un texte de longueur variable. */
.home-offers__slick .home-offers__slide > .d-flex {
	align-items: flex-start !important;
}

/*
 * La colonne du prix se dimensionne sur son contenu au lieu d'être bloquée à
 * `col-3 col-md-4` : un prix court (« 3+1 ») laisse la place au titre, un prix long
 * (« 4 offertes ») s'étale sans passer par-dessus. Le plafond de 42 % garantit que le
 * texte garde toujours la majorité de la carte.
 */
.home-offers__slick .home-offers__price {
	flex: 0 0 auto;
	width: auto;
	min-width: 22%;
	max-width: 42%;
}

.home-offers__slick .home-offers__price > div {
	max-width: 100%;
}

/*
 * ⚠️ Indispensable : les classes `col-*` de Bootstrap posent `flex: 0 0 auto` avec une
 * largeur fixe, donc la colonne de texte ne sait pas rétrécir. Sans cette règle, prix
 * (jusqu'à 42 %) + texte (75 % figés) débordent de la carte et écrivent sur la voisine.
 */
.home-offers__slick .home-offers__slide > .d-flex > :last-child {
	flex: 1 1 auto;
	width: auto;
	min-width: 0;
}

/* -------------------------------------------------------------------------
 * 4. Le prix à l'échelle de la carte, pas de la fenêtre
 * ---------------------------------------------------------------------- */

/*
 * C'est la cause première du débordement : `fluid-size()` fait grandir le prix avec la
 * *fenêtre*, alors que la carte, elle, garde à peu près la même largeur à toutes les
 * tailles d'écran (377 px à 1920, 250 px en tablette) puisque le carrousel affiche
 * 4 cartes, puis 3, puis 2. Les unités `cqw` corrigent le référentiel : la taille du
 * prix devient un pourcentage de la largeur de la carte.
 *
 * 8,5 cqw laisse tenir un mot de dix signes dans les 42 % de la règle ci-dessus.
 * Sous 768 px la ligne s'empile (volet 5) : le prix a toute la largeur, on garde donc
 * les tailles du parent.
 */
@media (min-width: 768px) {

	.home-offers__slick .home-offers__slide {
		container-type: inline-size;
	}

	.home-offers__slick .offers__price {
		font-size: 8.5cqw;
		line-height: 1.15em;
	}

	.home-offers__slick .offers__prefixe,
	.home-offers__slick .offers__suffixe {
		font-size: 4.4cqw;
		line-height: 1.35em;
	}
}

/* -------------------------------------------------------------------------
 * 5. Sous 768 px : le prix au-dessus du texte
 * ---------------------------------------------------------------------- */

/*
 * En mobile la carte ne fait plus que ~215 px : la colonne `col-3` du prix tombe à
 * 56 px, où même « offerte » (68 px) ne tient pas. On empile, comme le fait déjà le
 * parent sur les cartes de `/nos-offres/` (`flex-column flex-md-row`).
 *
 * `flex-direction` en `!important` : la classe `flex-row` du gabarit est elle-même en
 * `!important` (utilitaire Bootstrap).
 */
@media (max-width: 767.98px) {

	.home-offers__slick .home-offers__slide > .d-flex {
		flex-direction: column !important;
		gap: 0 !important;
	}

	.home-offers__slick .home-offers__price {
		max-width: 100%;
	}

	/* `mx-auto` centrait le prix ; empilé, il doit s'aligner sur le titre. */
	.home-offers__slick .home-offers__price > div {
		margin-left: 0 !important;
	}

	/* `p-1` décalait le texte de 4 px par rapport au prix. */
	.home-offers__slick .home-offers__slide > .d-flex > :last-child {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
}

/* -------------------------------------------------------------------------
 * 6. Descriptions bridées à trois lignes
 * ---------------------------------------------------------------------- */

/*
 * Garde-fou de mise en page, pas de rédaction : une description de six lignes doublait
 * la hauteur de tout le carrousel (les cartes étant désormais alignées) pour une seule
 * offre. Les cartes renvoient sur `/nos-offres/`, où le texte est affiché en entier.
 *
 * Ce qui est coupé l'est avec une ellipse. Si une promo se fait tronquer, la vraie
 * correction est de raccourcir sa `offers_short_desc` : trois lignes, c'est déjà long
 * pour une accroche.
 */
.home-offers__slick .home-offers__txt {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}