/*
 * v11-qa-mobile-fixes.css
 * Sealed override sheet (enqueued high-priority in functions.php).
 * Fixes label truncation found during the 375px QA sweep: pills and buttons
 * use white-space:nowrap + overflow:hidden, so long labels clip inside the
 * narrow mobile column (reservation hero pills, fallback phone buttons that
 * must stay legible, and ghost/secondary CTAs such as
 * "Voir toutes nos mentions presse" / "Voir le menu cocktails complet").
 * Scope is mobile only; desktop pill geometry is untouched.
 */
@media (max-width: 600px) {
	.latoxica-pill,
	.latoxica-button {
		white-space: normal !important;
		overflow: visible !important;
		height: auto !important;
		min-height: 44px;
		max-width: 100%;
		line-height: 1.25;
		flex-wrap: wrap;
		text-align: center;
	}

	/* Reservation hero pills + fallback phone buttons: size to content so the
	   phone numbers are always fully visible (Definition of Done). */
	.latoxica-reservation-hero__pills .latoxica-pill,
	.latoxica-reservation-fallback__buttons .latoxica-button {
		width: auto;
	}
}

/* Footer contact-column CTAs (e.g. "Réserver le traiteur") sit in narrow
   columns; through tablet width the column squeezes the button so a nowrap
   label clips by a few px. Let those labels wrap so they stay whole. Scope is
   the footer contact block only, up to 1024px, so desktop rows are untouched. */
@media (max-width: 1024px) {
	.latoxica-contact .latoxica-button,
	.latoxica-contact__cta,
	/* Age-gate modal actions (alcohol pages) sit in a fixed-width dialog; the
	   French labels "J'ai 18 ans ou plus" / "Je n'ai pas l'âge requis" clip a
	   few px at tablet. Let them wrap so the full label always shows. */
	.latoxica-age-gate__actions .latoxica-button {
		white-space: normal;
		overflow: visible;
		height: auto;
		min-height: 44px;
		line-height: 1.25;
		text-align: center;
	}
}