/*
 * Burn design pages: mobile and tablet overrides.
 *
 * The design pages are inline-styled by intent, so every rule here has to be
 * !important to win. Selectors match the inline patterns the exporter writes.
 * Loaded only on the design page template.
 */

/* ---------- Tablet and below ---------- */
@media (max-width: 1080px) {

	/* The root wrapper carries min-width: 1280px, which is what forces
	   horizontal scroll on every page. This is the single most important rule. */
	.burn-design > div {
		min-width: 0 !important;
		width: 100% !important;
		overflow-x: hidden !important;
	}

	/* Section containers: shrink the 40px gutters */
	.burn-design [style*="margin: 0 auto"] {
		padding-left: 28px !important;
		padding-right: 28px !important;
	}

	/* Two-column editorial grids collapse */
	.burn-design [style*="grid-template-columns: 1"],
	.burn-design [style*="grid-template-columns: 0.8"],
	.burn-design [style*="grid-template-columns: 0.9"],
	.burn-design [style*="grid-template-columns: 200px"],
	.burn-design [style*="grid-template-columns: 220px"],
	.burn-design [style*="grid-template-columns: 280px"] {
		grid-template-columns: 1fr !important;
		gap: 32px !important;
	}

	/* Four-up and five-up card rows become two-up */
	.burn-design [style*="grid-template-columns: repeat(4"],
	.burn-design [style*="grid-template-columns: repeat(5"] {
		grid-template-columns: 1fr 1fr !important;
		gap: 20px !important;
	}

	/* Sticky label columns have nothing to stick against once stacked */
	.burn-design [style*="position: sticky"] {
		position: static !important;
	}

	/* Phone screenshot rows wrap instead of overflowing.
	   Scoped to the wide gaps the phone rows use, so the header brand
	   lockup (gap: 12px) and chip rows are left alone. */
	.burn-design [style*="display: flex"][style*="gap: 14px"],
	.burn-design [style*="display: flex"][style*="gap: 16px"],
	.burn-design [style*="display: flex"][style*="gap: 18px"],
	.burn-design [style*="display: flex"][style*="gap: 20px"],
	.burn-design [style*="display: flex"][style*="gap: 22px"],
	.burn-design [style*="display: flex"][style*="gap: 24px"],
	.burn-design [style*="display: flex"][style*="gap: 26px"],
	.burn-design [style*="display: flex"][style*="gap: 28px"],
	.burn-design [style*="display: flex"][style*="gap: 32px"] {
		flex-wrap: wrap !important;
	}

	/* Equal-width pill rows: two up rather than four squeezed */
	.burn-design [data-hero-pills] {
		flex-wrap: wrap !important;
		gap: 12px !important;
	}
	.burn-design [data-hero-pills] > * {
		flex: 1 1 calc(50% - 6px) !important;
		min-width: calc(50% - 6px) !important;
	}

	/* Comparison grids: hide the empty corner cell and close the row gap so
	   the stack still reads as a table rather than a set of floating cards. */
	.burn-design [data-compare-grid] {
		gap: 0 !important;
	}
	.burn-design [data-compare-grid] > div:empty {
		display: none !important;
	}
}

/* The brand lockup must never wrap */
@media (max-width: 1080px) {
	.burn-design header > a,
	.burn-design header > div > a {
		flex-wrap: nowrap !important;
		white-space: nowrap !important;
		flex: none !important;
	}
}

/* ---------- Phone ---------- */
@media (max-width: 860px) {

	.burn-design [style*="margin: 0 auto"] {
		padding-left: 20px !important;
		padding-right: 20px !important;
	}

	/* Vertical rhythm: the desktop 72-88px section padding is too tall */
	.burn-design [style*="padding: 88px 40px"],
	.burn-design [style*="padding: 84px 40px"],
	.burn-design [style*="padding: 80px 40px"],
	.burn-design [style*="padding: 76px 40px"],
	.burn-design [style*="padding: 72px 40px"] {
		padding-top: 52px !important;
		padding-bottom: 52px !important;
	}

	/* Everything single column, including the comparison tables */
	.burn-design [style*="grid-template-columns"] {
		grid-template-columns: 1fr !important;
		gap: 20px !important;
	}

	/* Comparison-table cells: vertical borders make no sense stacked */
	.burn-design [style*="border-left: 1px solid"] {
		border-left: none !important;
	}

	/* Type ladder */
	.burn-design h1[style] { font-size: clamp(31px, 8.4vw, 52px) !important; line-height: 1.08 !important; }
	.burn-design h2[style] { font-size: clamp(25px, 6.4vw, 38px) !important; line-height: 1.14 !important; }
	.burn-design h3[style] { font-size: clamp(19px, 4.6vw, 24px) !important; }
	.burn-design p[style*="font-size: 23px"],
	.burn-design p[style*="font-size: 24px"],
	.burn-design p[style*="font-size: 22px"] { font-size: 19px !important; }
	.burn-design p[style*="font-size: 21px"],
	.burn-design p[style*="font-size: 20px"],
	.burn-design p[style*="font-size: 19px"] { font-size: 17px !important; }
	.burn-design p[style*="font-size: 18px"],
	.burn-design p[style*="font-size: 17px"] { font-size: 16px !important; }

	/* Big numerals in cards */
	.burn-design [style*="font-size: 62px"],
	.burn-design [style*="font-size: 60px"],
	.burn-design [style*="font-size: 46px"] { font-size: clamp(28px, 7.6vw, 42px) !important; }

	/* Card padding */
	.burn-design [style*="padding: 36px 40px"],
	.burn-design [style*="padding: 34px 36px"],
	.burn-design [style*="padding: 32px"],
	.burn-design [style*="padding: 30px 32px"] {
		padding: 24px !important;
	}

	/* Screenshots: the inline widths (up to 268px) already fit a phone, so
	   only cap against the container and centre them once rows have wrapped. */
	.burn-design img[src*="/assets/"] {
		max-width: 100% !important;
		height: auto !important;
		margin-left: auto !important;
		margin-right: auto !important;
	}
	.burn-design img[src*="burnlogo"] {
		max-width: 34px !important;
	}
	.burn-design img[src*="headshot"] {
		max-width: 100% !important;
	}

	/* Staggered phone pairs: drop the offset so they sit level when wrapped */
	.burn-design img[style*="margin-top: 44px"],
	.burn-design img[style*="margin-top: 40px"] {
		margin-top: 0 !important;
	}

	/* Phone rows centre and wrap */
	.burn-design [style*="display: flex"][style*="justify-content: flex-end"],
	.burn-design [style*="display: flex"][style*="justify-content: center"] {
		flex-wrap: wrap !important;
		justify-content: center !important;
	}

	/* Header: the nav drops onto its own scrollable line.
	   Light headers style <header> directly; dark headers use an inner div,
	   so both shapes are covered. */
	.burn-design header,
	.burn-design header > div {
		flex-wrap: wrap !important;
		gap: 14px !important;
	}
	.burn-design header nav {
		order: 3 !important;
		width: 100% !important;
		flex: 0 0 100% !important;
		overflow-x: auto !important;
		gap: 18px !important;
		padding-bottom: 2px !important;
		-webkit-overflow-scrolling: touch;
	}
	.burn-design header nav a {
		white-space: nowrap !important;
	}

	/* Stage rails: keep the colour bands, drop the stage names.
	   Nine names cannot fit a phone width, and the names are in the body copy. */
	.burn-design [data-stage-rail] > div {
		height: 30px !important;
	}
	.burn-design [data-stage-labels] span:last-child {
		display: none !important;
	}
	.burn-design [data-stage-labels] span:first-child {
		font-size: 9px !important;
		padding-right: 2px !important;
		letter-spacing: 0 !important;
		white-space: nowrap !important;
	}

	/* Chips and pill rows */
	.burn-design [style*="flex-wrap: wrap"] {
		gap: 10px !important;
	}

	/* Footer: two columns rather than five */
	.burn-design footer [style*="grid-template-columns"] {
		grid-template-columns: 1fr 1fr !important;
		gap: 28px !important;
	}

	/* Tables that were laid out as grids need their cell padding trimmed */
	.burn-design [style*="padding: 22px 28px"],
	.burn-design [style*="padding: 24px 28px"],
	.burn-design [style*="padding: 26px 28px"] {
		padding: 16px 18px !important;
	}
}

/* ---------- Narrow: rails keep the bands only ---------- */
@media (max-width: 560px) {
	/* Nine hour-ranges cannot fit; the bands still show the progression and
	   the boundaries are named in the copy beside every rail. */
	.burn-design [data-stage-labels] {
		display: none !important;
	}
	.burn-design [data-stage-rail] {
		margin-bottom: 18px !important;
	}
}

/* ---------- Small phone ---------- */
@media (max-width: 460px) {
	.burn-design [style*="margin: 0 auto"] {
		padding-left: 16px !important;
		padding-right: 16px !important;
	}
	.burn-design [style*="grid-template-columns"] {
		gap: 16px !important;
	}
	.burn-design footer [style*="grid-template-columns"] {
		grid-template-columns: 1fr !important;
	}
	.burn-design img[src*="/assets/"] {
		max-width: min(100%, 74vw) !important;
	}
	.burn-design [data-stage-labels] span:first-child {
		font-size: 8px !important;
	}
}