/*
 * Small-screen fixes for gaps in the original design files. Loaded after the
 * design system CSS. Add rules here rather than editing assets/css, so the
 * theme assets stay identical to the static build.
 */

/* Phones narrower than 360px (e.g. 320px iPhone SE): the design was drawn
   down to 360px and the page became 6-15px wider than the screen. */
@media (max-width: 359px) {
	/* Nav: logo + "Get SecPath" + menu button did not fit. */
	.nav__inner { padding-left: 12px; padding-right: 8px; }
	.nav__actions .btn--m { padding-inline: 12px; }

	/* Home pricing cards: plan name + badge and the "Includes ..." line may wrap. */
	.home-plan__head { flex-wrap: wrap; gap: 8px; white-space: normal; }
	.home-plan__includes { flex-wrap: wrap; white-space: normal; }

	/* Why SecPath spec rows: a narrower label column leaves room for the
	   email address and links; anything longer still wraps. */
	.why-spec__label { width: 96px; }
	.why-spec__value { overflow-wrap: break-word; }
}

/* Pricing · Compare plans: the design switches the table to fluid columns
   only below 1280px, but its four fixed 282px columns already overflow up to
   ~1360px. Use the design's own fluid layout (pricing.css, max-width 1279px)
   up to the full 1440px frame, where both layouts are identical. */
@media (min-width: 1280px) and (max-width: 1439px) {
	.pr-table__label,
	.pr-table__plan,
	.pr-table__value,
	.pr-table__action { flex: 1 1 0; width: auto; min-width: 0; }
	.pr-table__band {
		left: calc((100% - 72px) / 2 + 36px);
		width: calc((100% - 72px) / 4 + 24px);
	}
	.pr-table__chip { left: calc((100% - 72px) / 8 * 5 + 48px - 40px); }
	.pr-every__label { width: calc((100% - 72px) / 4); }
}

/* Pricing · "Every plan includes" row: wraps between 1024 and 1279px too
   (the design only lets it wrap below 1024px). */
@media (min-width: 1024px) and (max-width: 1279px) {
	.pr-every__items { flex-wrap: wrap; row-gap: var(--sp-2); }
}