/**
 * Hero du carrousel — Ange Canada.
 *
 * Le thème parent (`ange/src/assets/styles/layout/_slider.scss`) coiffe le bas
 * du carrousel d'un dégradé qui va jusqu'au noir opaque, sur 30 % de sa hauteur
 * — soit ~35 vh, le carrousel faisant 115vh — et sur 80 % en mobile. La page
 * étant elle-même noire, cela fait une longue zone vide à traverser avant que
 * le premier bloc de contenu n'apparaisse.
 *
 * On conserve le fondu, qui raccorde le visuel au noir de la page, mais deux
 * fois plus court.
 */

.c-slider .carousel-item:after {
	height: 15%;
}

@media (max-width: 767.98px) {

	.c-slider .carousel-item:after {
		height: 40%;
	}
}

/**
 * Diapos dont le visuel est un badge et non une photo.
 *
 * Le gabarit parent pose `slider_img` en `background-size: cover` sur une
 * colonne de 115vh, et superpose le texte par-dessus en dessous de `md`. Cela
 * ne marche que pour une photo sombre et plein cadre : avec le badge « Label
 * WOW » (PNG carré à fond transparent), `cover` l'agrandit ~2,5× dans la
 * colonne étroite du mobile et le titre se retrouve écrit en travers de la
 * médaille — illisible des deux côtés. Le défaut existe aussi sur
 * `www.boulangerie-ange.ca`, il ne vient pas de la migration.
 *
 * On repère ces diapos à l'extension du fichier : les photos du hero sont en
 * JPEG, les badges/logos en PNG (c'est le seul signal disponible, l'URL étant
 * posée en style en ligne par le thème parent). Si un badge était un jour
 * téléversé en JPEG, la règle ne s'appliquerait pas et l'affichage
 * retomberait sur celui du parent.
 *
 * Rien n'est touché au-delà de 992px : la composition « médaille à gauche,
 * texte à droite » du desktop est celle voulue et elle fonctionne.
 */

@media (max-width: 767.98px) {

	/* On empile — visuel puis texte — au lieu de superposer. */
	.c-slider .carousel-item:has(.image-slider[style*=".png"]) .image-slider {
		height: 55vw !important;
		margin-top: 8.5rem; /* dégage le logo du site, posé en absolu par-dessus le hero */
		background-size: 100% auto; /* recadre les marges transparentes du PNG */
		background-position: center center;
		background-repeat: no-repeat;
	}

	.c-slider .carousel-item:has(.image-slider[style*=".png"]) .slider__txt {
		position: static;
		top: auto;
		bottom: auto;
		gap: 0.75rem;
		padding: 1rem 2.25rem 3rem;
		transform: rotate(-7deg); /* l'inclinaison de -10deg du parent débordait de l'écran */
	}

	/* fluid-size() donne ici 45px de corps pour 30px d'interlignage : les lignes
	   du titre se chevauchent dès qu'il passe sur deux lignes. */
	.c-slider .carousel-item:has(.image-slider[style*=".png"]) .slider__txt h2 {
		line-height: 0.86em !important;
	}

	/* Plus de visuel à raccorder au noir de la page : le dégradé n'a plus d'objet. */
	.c-slider .carousel-item:has(.image-slider[style*=".png"]):after {
		display: none;
	}

	/* Les puces sont calées à 10 % du bas du carrousel, ce qui les mettait au
	   milieu du paragraphe une fois la diapo raccourcie. */
	.c-slider:has(.carousel-item.active .image-slider[style*=".png"]) .carousel-indicators {
		bottom: 1rem !important;
	}
}

/* Tablette : la mise en page deux colonnes du parent reprend, mais `cover`
   fait déborder le badge de sa colonne et le texte lui passe dessus. */
@media (min-width: 768px) and (max-width: 991.98px) {

	.c-slider .carousel-item:has(.image-slider[style*=".png"]) .image-slider {
		background-size: contain;
		background-position: center center;
		background-repeat: no-repeat;
	}
}