/* Purpose: ONE vertical rhythm + one horizontal bleed rule for phones.
 *
 * Why this file exists: spacing had been set in three competing ways at once —
 * a flex/grid `gap` on the container, a `margin` on the child, and `padding` on
 * the track — so every distance was the sum of two or three sources and the page
 * read as random (head->content ranged 38px to 322px). The rule here is:
 *
 *   ONE source per relationship. Containers carry NO gap; the child that follows
 *   carries the margin. Tracks carry NO block padding or margin at all.
 *
 * Scale (phones only — desktop is untouched):
 *   --m-section  56px  section padding-block
 *   --m-block    32px  head -> content, content -> next band
 *   --m-tight    12px  eyebrow -> heading
 *   --m-text     16px  heading -> body
 *   --m-gutter   24px  page gutter, and the scroll-padding tracks bleed against
 * (user, 2026-09-17)
 */

@media (max-width: 767px) {
	:root {
		--m-section: 3.5rem;
		--m-block: 2rem;
		--m-tight: 0.75rem;
		--m-text: 1rem;
		--m-gutter: 1.5rem;
		--m-rule: 1.5rem;              /* air on each side of a separator rule */
	}

	/* ---------- 1. Section ---------- */
	.site-main > section.section,
	body.home .site-main > section.section,
	.series > section {
		min-height: 0;                 /* the one-beat-per-screen height is desktop's */
		padding-block: var(--m-section);
	}

	/* Explicit overrides on top of the scale. (user, 2026-09-17) */
	.site-main > section.range,
	body.home .site-main > section.range { padding-top: 32px; }

	.site-main > section.partnership--pacts-only,
	body.home .site-main > section.partnership--pacts-only {
		min-height: 0;
		padding-top: 60px;
		padding-bottom: 40px;
	}

	/* Scroll stages own their own height and bleed. */
	.site-main > section.drive-stage,
	.series > section.series-hero,
	.series > section.pod-scene,
	.series-hero,
	.pod-scene { padding-block: 0; }

	/* ---------- 2. Heads: container gap is the ONLY source ---------- */
	.range__head,
	.proof-testimonials__head,
	.insights__head,
	.find-fit__head,
	.final-cta__head,
	.series-reviews__head,
	html.js-drive .range__head,
	html.js-drive .proof-testimonials__head,
	html.js-drive .insights__head,
	html.js-drive .find-fit__head,
	html.js-drive .final-cta__head {
		display: flex;
		flex-direction: column;
		/* MUST be set: several heads carry `align-items: flex-end` for their
		   desktop row layout, which in a column means horizontal end and shoved
		   the copy to the right (the reviews head sat 155px in).
		   (user, 2026-09-17) */
		align-items: flex-start;
		justify-content: flex-start;
		text-align: left;
		gap: var(--m-tight);
		margin: 0 0 var(--m-block);
		/* These heads carry the section's separator on their bottom edge — the
		   copy must not sit on the line. (user, 2026-09-17) */
		padding-bottom: var(--m-rule);
	}
	/* …so the children must not add their own. */
	.range__head > *,
	.proof-testimonials__head > *,
	.insights__head > *,
	.find-fit__head > *,
	.final-cta__head > *,
	html.js-drive .range__head > *,
	html.js-drive .proof-testimonials__head > *,
	html.js-drive .insights__head > *,
	html.js-drive .find-fit__head > * { margin-block: 0; }

	/* Body copy is the one child that sits a step lower than the heading. */
	.range__head > [class*="__body"],
	.proof-testimonials__head > [class*="__body"],
	.insights__head > [class*="__body"],
	.find-fit__head > [class*="__body"] { margin-top: calc(var(--m-text) - var(--m-tight)); }

	/* ---------- 3. Carousel block: single column, no gap ----------
	   The desktop rule makes this a two-column grid (copy | arrows). On a phone
	   that squeezed the head into the narrow first column, which is why the
	   reviews heading sat 179px in from the gutter. One column here, arrows last.
	   (user, 2026-09-17) */
	.carousel-block {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		row-gap: 0;
	}
	.range__carousel,
	.proof-testimonials__carousel,
	.series-reviews__carousel { row-gap: 0; margin: 0; }
	.carousel-block > .range__carousel,
	.carousel-block > .proof-testimonials__carousel,
	.carousel-block > .series-reviews__carousel { margin-top: 0; }

	/* ---------- 4. Tracks: no block spacing, full-bleed inline ---------- */
	.range__grid,
	.proof-testimonials__grid,
	.series-reviews__grid,
	.partnership__pacts,
	.dna__stats,
	.proof-usps__grid,
	.insights__grid,
	.series-install__steps,
	.series-variants__grid,
	.series-xcompare__grid,
	.buy-cmp__grid,
	.series-box__grid {
		margin-block: 0;
		padding-block: 0;
		/* Cards always match heights, in every track. (user, 2026-09-17) */
		align-items: stretch;
		/* Bleed to the screen edges; cards snap to the gutter. */
		margin-inline: calc(-1 * var(--m-gutter));
		padding-inline: var(--m-gutter);
		scroll-padding-inline: var(--m-gutter);
	}

	/* Two-thirds-width cards, and they must be allowed to shrink to it. */
	.proof-testimonials__grid,
	.series-reviews__grid { grid-auto-columns: 66%; }
	.proof-testimonials__grid > *,
	.series-reviews__grid > *,
	.range__grid > * { min-width: 0; }

	/* ---------- 5. What follows a track ---------- */
	.carousel-block > .range__controls {
		order: 99;
		align-self: center;
		justify-content: center;
		gap: var(--m-text);
		margin: var(--m-block) 0 0;
		padding: 0;
		border: 0;
	}
	.carousel-block > .range__controls .range__count { order: 2; margin: 0; }
	.carousel-block > .range__controls .js-range-prev { order: 1; }
	.carousel-block > .range__controls .js-range-next { order: 3; }

	/* The tracks already carry a 32px lead-in of their own, so the head must not
	   add a second one — that double was the 64px head->card step. ONE source.
	   (user, 2026-09-17) */
	.carousel-block > .range__head,
	.carousel-block > .proof-testimonials__head,
	.carousel-block > .series-reviews__head,
	html.js-drive .carousel-block > .range__head,
	html.js-drive .carousel-block > .proof-testimonials__head { margin-bottom: 0; }

	.proof-testimonials__featured { margin-top: var(--m-block); }

	/* The divider owns the space on both sides of itself; the families row must
	   not add a second bottom margin, or the two stack to 64px and the rule ends
	   up touching the cards below. (user, 2026-09-17) */
	html.js-drive .range__families { margin-top: var(--m-block); margin-bottom: 0; }
	.range__families { margin-bottom: 0; }

	/* The families track bleeds like the other carousels (so cards scroll off the
	   screen edge), but its own border would stretch edge to edge — so the border
	   is dropped here and range.php's .range__rule draws the line inside the
	   margins instead. (user, 2026-09-17) */
	.range__families,
	html.js-drive .range__families {
		margin-inline: calc(-1 * var(--m-gutter));
		padding-inline: var(--m-gutter);
		scroll-padding-inline: var(--m-gutter);
		border-top: 0;
		border-bottom: 0;
		/* no block padding AND margin on the same box — the divider owns the
		   spacing below, the families' margin-top the spacing above.
		   (user, 2026-09-17) */
		padding-block: 0;
		margin-bottom: 0;
	}
	.range__rule {
		display: block;
		height: 0;
		margin-block: var(--m-block);
		border-bottom: 1px solid #2a2a2e;
	}

	/* Heads with a CTA: the link sits under the copy on the left, not floated to
	   the right edge, with a real step above it. (user, 2026-09-17) */
	.range__head,
	.proof-testimonials__head,
	.insights__head,
	.find-fit__head,
	.final-cta__head,
	html.js-drive .insights__head,
	html.js-drive .range__head { align-items: flex-start; text-align: left; }

	.insights__head > a,
	.range__head > a,
	.proof-testimonials__head > a,
	[class$="__head"] > a,
	[class$="__head"] > [class*="__link"],
	[class$="__head"] > [class*="__cta"] {
		align-self: flex-start;
		margin: var(--m-text) 0 0;
		margin-left: 0;
	}

	/* The compatibility trio (Find My Fit, How to tell, Catalogue) reads as a
	   vertical stack on phones — it was inheriting the horizontal carousel
	   treatment, which is wrong for a form. (user, 2026-09-17) */
	.series-compat__grid,
	.series-compat__grid.has-fmf {
		display: grid !important;
		grid-auto-flow: row !important;
		grid-template-columns: 1fr !important;
		grid-auto-columns: auto !important;
		gap: var(--m-block);
		overflow: visible !important;
		margin-inline: 0 !important;
		padding-inline: 0 !important;
	}
	.series-compat__grid > * { width: auto !important; }

	/* Cards whose top border IS the separator: air between the line and the copy. */
	.pact,
	.review,
	html.js-drive .pact,
	html.js-drive .review { padding-top: var(--m-rule); }

	/* Families sit under the section's own rule, so their per-card top border was
	   a second line 42px below it. One rule is enough. (user, 2026-09-17) */
	.family,
	html.js-drive .family {
		border-top: 0;
		padding-top: 0;
	}

	/* And a step between a bordered band and whatever follows it. */


	/* Install film: a step before the steps' rule, never sitting on it. */
	.series-install__stage,
	.series-install__stage--frames { margin-bottom: var(--m-block); }
}