/*
 * Small-screen fixes for gaps in the original design files (they show the
 * same overflow in the static HTML). Loaded after the design system CSS.
 */

/* Legacy pages (FAQs, Deutsch, design docs): on 320-374px phones the logo,
   the "Get ezee" button and the menu button were 7px wider than the screen. */
@media (max-width: 374px) {
	.header__inner { gap: 12px; }
	.header__actions .btn--sm { padding-inline: 12px; }
}

/* Design-doc spec tables scroll inside their own box on phones instead of
   pushing the whole page sideways (they need ~390px). */
@media (max-width: 389px) {
	.tbl {
		display: block;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
}

/* Legacy buttons may wrap on phones (long labels such as "Check if a message
   is really from us" were wider than a 320px screen). */
@media (max-width: 480px) {
	.ezee-legacy .btn {
		max-width: 100%;
		white-space: normal;
		text-align: center;
		padding-block: 10px;
	}
}

/* Design-doc demo grids (min column 320px) stack on the smallest phones. */
@media (max-width: 374px) {
	[style*="minmax(320px"] { grid-template-columns: 1fr !important; }
	.cell { min-width: 0; }
}