/* ==========================================================================
   Module Divi « Grille whiskies »
   Chaque carte reprend le module Produit (voir product-box/assets/style.css).
   Le nombre de colonnes suit le nombre de whiskies (max. réglage du module) ;
   une dernière rangée incomplète est centrée.
   ========================================================================== */

.awh_whisky_grid .awh-grid {
	--awh-cols: 4;
	--awh-gap-x: clamp(24px, 3.1vw, 60px);

	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: flex-start;
	column-gap: var(--awh-gap-x);
	row-gap: clamp(48px, 4.2vw, 80px);
}

.awh_whisky_grid .awh-grid--5 { --awh-cols: 5; }

/* 5 colonnes : rangée Divi élargie (1080 → 1365 px) pour garder des cartes
   aussi larges qu'en 4 colonnes (bouteilles et titres à la même taille). */
body #page-container .et_pb_row:has(.awh-grid--5) {
	width: 92% !important;
	max-width: 1365px !important;
}

.awh_whisky_grid .awh-grid--3 { --awh-cols: 3; }
.awh_whisky_grid .awh-grid--2 { --awh-cols: 2; }
.awh_whisky_grid .awh-grid--1 { --awh-cols: 1; }

.awh_whisky_grid .awh-grid__item {
	flex: 0 0 calc((100% - (var(--awh-cols) - 1) * var(--awh-gap-x)) / var(--awh-cols));
	min-width: 0;
}

/* Une seule carte : largeur d'une colonne sur 4, pas pleine page */
.awh_whisky_grid .awh-grid--1 .awh-grid__item {
	flex-basis: min(100%, 420px);
}

/* Pas de texte vertical (« Collection Breizh »…) ni de filigrane dans la
   grille des fiches : ils sont propres à la page « Nos whiskies ». */
.awh_whisky_grid .pbx-vertical,
.awh_whisky_grid .pbx-watermark {
	display: none;
}

/* Même hauteur pour toutes les photos : un visuel plus large (Chouchenn,
   étui large) n'est plus réduit à la largeur de la colonne ; il déborde
   un peu, de façon centrée, dans les gouttières. */
.awh_whisky_grid .pbx-figure--ratio {
	flex: 0 0 auto;
	width: calc(var(--pbx-media-h) * var(--pbx-ratio));
	max-width: none;
}

/* 5 colonnes : cartes trop étroites sur petit écran d'ordinateur → 4 */
@media (max-width: 1280px) {
	.awh_whisky_grid .awh-grid--5 { --awh-cols: 4; }
}

@media (max-width: 980px) {
	.awh_whisky_grid .awh-grid--5,
	.awh_whisky_grid .awh-grid--4,
	.awh_whisky_grid .awh-grid--3 { --awh-cols: 2; }
}

@media (max-width: 600px) {
	.awh_whisky_grid .awh-grid { --awh-cols: 1; }
	.awh_whisky_grid .awh-grid__item { flex-basis: min(100%, 420px); }
}

/* ==========================================================================
   Gabarit « Fiche whisky » : en-tête
   Sous 981 px, Divi ajoute la hauteur du header en haut de la première
   section alors que #page-container la compense déjà : blanc en double.
   ========================================================================== */

@media (max-width: 980px) {
	.et_pb_section.awh-hero {
		padding-top: 0 !important;
	}
}

/* Accroche (« L'expression d'un grand… ») : calée en bas à gauche de la
   photo, et non plus centrée verticalement. */
.awh-hero .et_pb_column:has(> .awh-tagline) {
	align-items: flex-end !important;
}

/* Sélecteur renforcé : l'alignement « gauche » de Divi pose
   margin-left: 0 !important et largeur 60 %. */
body #page-container .awh-hero .et_pb_module.awh-tagline {
	width: 42% !important;
	max-width: 620px !important;
	margin-left: 8% !important;
	margin-bottom: clamp(80px, 11vw, 210px) !important;
}

@media (max-width: 1280px) {
	body #page-container .awh-hero .et_pb_module.awh-tagline {
		width: 55% !important;
	}
}

/* Accroche : jamais de mot coupé n'importe où (« APPROACHABL / E »).
   Césure propre selon la langue de la page (lang posé par Polylang) et
   corps fluide pour que les mots longs (EN / DE) tiennent dans la colonne. */
body #page-container .awh-hero .awh-tagline .et_pb_text_inner,
body #page-container .awh-hero .awh-tagline .et_pb_text_inner * {
	word-break: normal !important;
	overflow-wrap: normal !important;
	-webkit-hyphens: auto;
	hyphens: auto;
	hyphenate-limit-chars: 7 3 3;
}

/* Traductions (EN / DE / BZ) : mots plus longs qu'en français
   (« APPROACHABLE », « FRANZÖSISCHEN ») → corps réduit avec la colonne. */
html:not([lang^="fr"]) body #page-container .awh-hero .awh-tagline .et_pb_text_inner,
html:not([lang^="fr"]) body #page-container .awh-hero .awh-tagline .et_pb_text_inner * {
	font-size: clamp(24px, 2.3vw, 44px) !important;
	line-height: 1.1em !important;
}

/* Bouton « Commander » : marine dès l'affichage (le style Divi du gabarit
   arrive en retard et la transition montrait le bleu par défaut). */
body #page-container .et_pb_section .et_pb_button.awh-order {
	border: 1px solid #0E102D !important;
	border-radius: 13px;
	background-color: transparent;
	color: #0E102D !important;
	transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

body #page-container .et_pb_section .et_pb_button.awh-order:hover {
	padding: .3em 1em !important;
	border-color: transparent !important;
	background-color: rgba(0, 0, 0, .06);
	color: #0E102D !important;
}

/* « Commander » centré sous le contenu de la colonne (blocs de 500 px max.) */
body #page-container .et_pb_button_module_wrapper:has(> .awh-order) {
	max-width: 500px;
	text-align: center !important;
}

/* Pas de lien « Commander » dans la fiche : pas de bouton. */
.et_pb_button_module_wrapper:has(> .awh-order[href=""]) {
	display: none;
}

/* ==========================================================================
   Couleur d'accent de la fiche (champ « Couleur du sous-titre et de la
   signature ») : variables --awh-accent / --awh-signature posées en <head>.
   Les sélecteurs structurels couvrent les gabarits écrits avant l'ajout des
   classes awh-subtitle / awh-signature.
   ========================================================================== */

body #page-container .awh-hero .et_pb_text.awh-subtitle,
body #page-container .awh-hero .et_pb_text:has(h1) + .et_pb_text {
	color: var(--awh-accent, #94BADF) !important;
}

body #page-container .awh-hero .et_pb_text.awh-subtitle .et_pb_text_inner,
body #page-container .awh-hero .et_pb_text:has(h1) + .et_pb_text .et_pb_text_inner {
	color: inherit !important;
}

/* Signature : juste sous le nom du maître de chai (et non plus remontée
   dessus). */
body #page-container .awh-hero .et_pb_module.awh-signature,
body #page-container .awh-hero .et-last-child > .et_pb_image {
	margin-top: 8px !important;
}

/* Signature recolorée (sauf bleu par défaut : PNG d'origine conservé). Le
   PNG sert de masque, le fond prend la couleur d'accent. */
body[class*="awh-accent--"]:not(.awh-accent--blue) #page-container .awh-hero .awh-signature .et_pb_image_wrap,
body[class*="awh-accent--"]:not(.awh-accent--blue) #page-container .awh-hero .et-last-child > .et_pb_image .et_pb_image_wrap {
	background-color: var(--awh-accent);
	-webkit-mask: var(--awh-signature) center / contain no-repeat;
	mask: var(--awh-signature) center / contain no-repeat;
}

body[class*="awh-accent--"]:not(.awh-accent--blue) #page-container .awh-hero .awh-signature img,
body[class*="awh-accent--"]:not(.awh-accent--blue) #page-container .awh-hero .et-last-child > .et_pb_image img {
	opacity: 0;
}