/**
 * Butterfly Pixel – Restaurant Menu
 * Styles front.
 *
 * Volontairement MINIMAL et NEUTRE : aucune couleur de marque, aucune
 * typographie imposée. Le menu hérite du thème (Laurent / Elementor), qui
 * surcharge ensuite librement. La seule couleur utilisée est `currentColor`
 * pour les pointillés, afin qu'ils suivent automatiquement la couleur du
 * texte définie par le thème.
 */

/* -------------------------------------------------------------------------
 * 1. Grille de colonnes
 * ---------------------------------------------------------------------- */

.bp-menu__grid {
	display: grid;
	grid-template-columns: 1fr; /* Défaut : 1 colonne (= .bp-menu--cols-1). */
	gap: 2.5em 3em;             /* row-gap / column-gap. */
}

.bp-menu--cols-2 .bp-menu__grid {
	grid-template-columns: repeat(2, 1fr);
}

.bp-menu--cols-3 .bp-menu__grid {
	grid-template-columns: repeat(3, 1fr);
}

.bp-menu--cols-4 .bp-menu__grid {
	grid-template-columns: repeat(4, 1fr);
}

/**
 * Un élément de grille a `min-width: auto` par défaut : sa largeur minimale
 * est celle de son contenu min-content. Sans `min-width: 0`, un titre
 * contenant un mot très long ferait déborder la colonne au lieu de le couper.
 *
 * `overflow-wrap: break-word` est hérité par le titre et la description : il
 * autorise la coupure d'un mot trop long pour la colonne (noms de plats
 * composés, courants en LU/DE). Sans lui, `min-width: 0` réduit bien la boîte
 * mais les caractères continuent de déborder visuellement — vérifié en
 * navigateur : mot de 25 caractères dans une colonne de 170px, débordement de
 * 86px avec `min-width: 0` seul, 0 avec la paire.
 *
 * Note : sans effet sur le prix, qui est en `white-space: nowrap` (aucune
 * opportunité de coupure) — il reste donc toujours insécable.
 */
.bp-menu__item {
	min-width: 0;
	overflow-wrap: break-word;
}

/* -------------------------------------------------------------------------
 * 2. Ligne de menu : titre … prix
 * ---------------------------------------------------------------------- */

/**
 * EXIGENCE CLÉ — le prix doit basculer à la ligne suivante quand le titre est
 * trop long, en restant aligné à droite.
 *
 * Comment le flexbox produit ce comportement :
 *
 * L'algorithme de flexbox décide des retours à la ligne AVANT de distribuer
 * l'espace (avant flex-grow / flex-shrink), en se basant sur la « taille de
 * base hypothétique » de chaque élément. Ici :
 *
 *   - .bp-menu__title  → base = largeur de son contenu (flex-basis: auto)
 *   - .bp-menu__leader → base = 2em (flex-basis: 2em, verrouillée par min-width)
 *   - .bp-menu__price  → base = largeur du prix (indivisible : white-space: nowrap)
 *
 * Trois cas se présentent :
 *
 *   a) titre + 2em + prix TIENNENT sur une ligne
 *      → tout reste sur une ligne, le leader absorbe l'espace restant
 *        (flex-grow: 1) et pousse le prix contre le bord droit. C'est le
 *        rendu classique « Titre ......... 14,50 € ».
 *
 *   b) titre + 2em tiennent, mais pas le prix
 *      → ligne 1 : titre + pointillés (le leader s'étire jusqu'au bord droit)
 *        ligne 2 : le prix seul. Sur cette ligne il n'y a plus d'élément
 *        flex-grow, donc `margin-left: auto` absorbe tout l'espace libre et
 *        aligne le prix à droite. ✔
 *
 *   c) le titre seul dépasse la largeur disponible
 *      → ligne 1 : le titre seul. Comme flex-shrink vaut 1 et que sa largeur
 *        minimale est min-content, il se réduit à la largeur du conteneur et
 *        son texte passe sur plusieurs lignes.
 *        ligne 2 : pointillés + prix, prix à droite. ✔
 *
 * Note sur `margin-left: auto` : les marges auto ne consomment l'espace libre
 * QU'APRÈS résolution des tailles flexibles. Sur une ligne où le leader est
 * présent, flex-grow a déjà tout absorbé → la marge auto ne fait rien (elle
 * est inoffensive). Elle ne sert que dans le cas (b), exactement là où on en
 * a besoin.
 *
 * Les trois cas ont été vérifiés en navigateur (Chromium) sur des conteneurs
 * de 640px / 300px / 170px :
 *   a) 640px → prix sur la même ligne, collé à droite (écart 0px)
 *   b) 300px → prix basculé ligne 2, collé à droite (écart 0px)
 *   c) 170px → titre seul ligne 1, pointillés + prix ligne 2, écart 0px
 * Dans les trois cas les pointillés se posent à 4px au-dessus du bas de la
 * boîte du titre, soit au niveau de sa ligne de base.
 */
.bp-menu__main {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline; /* Les pointillés s'alignent sur la ligne de base du titre. */
	gap: 0 0.5em;          /* Respiration entre titre/pointillés/prix. */
}

.bp-menu__title {
	flex: 0 1 auto; /* Taille = contenu, mais peut se réduire (cas c). */
	margin: 0;      /* Neutralise la marge des <h3> du thème. */
	/**
	 * Indispensable : un élément flex a `min-width: auto`, sa largeur minimale
	 * est donc sa taille min-content (= le mot le plus long). Sans ce
	 * `min-width: 0`, flex-shrink ne peut pas réduire le titre sous cette
	 * limite et un nom de plat contenant un mot long déborde de la colonne.
	 * Fonctionne de pair avec l'`overflow-wrap` hérité de .bp-menu__item.
	 */
	min-width: 0;
}

/**
 * La « queue » : pointillés + prix réunis.
 *
 * C'est LA pièce maîtresse du retour à la ligne. En réunissant les pointillés
 * et le prix dans un seul élément flex, les deux basculent ENSEMBLE sur la
 * ligne suivante quand le titre est trop long. Auparavant, le prix partait
 * seul et les pointillés restaient coincés au bout de la ligne 1, laissant le
 * montant orphelin à droite.
 *
 * `flex: 1 1 auto` + `min-width: auto` (implicite) : la queue ne peut pas se
 * réduire sous sa taille min-content (pointillés 2em + prix insécable), donc
 * elle passe à la ligne au lieu d'écraser le prix. Une fois seule sur sa
 * ligne, elle occupe toute la largeur et les pointillés s'étirent jusqu'au
 * prix, resté calé à droite.
 */
.bp-menu__tail {
	flex: 1 1 auto;
	display: flex;
	align-items: baseline;
	gap: 0 0.5em;
}

/**
 * Les pointillés de liaison.
 *
 * Span vide : sa hauteur de contenu est nulle, seule la bordure basse est
 * peinte — c'est ce qui dessine la ligne pointillée. En alignement baseline,
 * un élément flex sans contenu synthétise sa ligne de base depuis le bas de
 * sa boîte de bordure : les points se posent donc au niveau de la ligne de
 * base du titre.
 */
.bp-menu__leader {
	flex: 1 1 2em;
	min-width: 2em;
	border-bottom: 1px dotted currentColor;
	align-self: baseline;
}

.bp-menu__price {
	flex: 0 0 auto;      /* Jamais réduit : un prix ne se coupe pas. */
	margin-left: auto;   /* Colle le prix à droite. */
	white-space: nowrap; /* « 14,50 € » reste insécable. */
}

/* -------------------------------------------------------------------------
 * 3. Description
 * ---------------------------------------------------------------------- */

.bp-menu__desc {
	margin: 0.25em 0 0;
}

/* -------------------------------------------------------------------------
 * 4. Responsive
 * ---------------------------------------------------------------------- */

/**
 * Sous 768px, toutes les variantes repassent sur une seule colonne : deux
 * colonnes de menu sur mobile ne laissent pas assez de place au couple
 * titre/prix, qui se briserait à chaque ligne.
 */
@media (max-width: 767px) {

	.bp-menu--cols-2 .bp-menu__grid,
	.bp-menu--cols-3 .bp-menu__grid,
	.bp-menu--cols-4 .bp-menu__grid {
		grid-template-columns: 1fr;
	}
}