/**
 * Shared section-rhythm variables for the custom MRB page sections
 * (product detail, quality assurance). Loaded as a dependency of the
 * per-page widget stylesheets — never enqueued directly.
 *
 * @package MRB
 */

/* Figma's 72px section padding and 62px head→content gap, scaled down in
   step with the site-wide tiers so every section keeps EQUAL spacing at
   every width (13"/14" laptops inherit the desktop values; tablets and
   phones step down together).

   Four steps, largest to smallest, so the page reads as a hierarchy:

     --mrb-pd-gap        72px  section padding (×2 = 144px between sections)
     --mrb-pd-head-gap   62px  heading block → the content it introduces
     --mrb-pd-title-gap  24px  heading → its own description paragraph
     --mrb-pd-eyebrow-gap 12px eyebrow/kicker → the heading it labels

   The last two were previously ad-hoc: the same heading→description
   relationship was rendering at 0, 16, 24, 25, 55 and 75px in different
   widgets on the product detail page, and eyebrow→title at 8 and 12px. */
:root {
	--mrb-pd-gap: 72px;
	--mrb-pd-head-gap: 62px;
	--mrb-pd-title-gap: 24px;
	--mrb-pd-eyebrow-gap: 12px;
}

@media (max-width: 1199px) {
	:root {
		/* 30px each side of a section boundary = 60px total between sections. */
		--mrb-pd-gap: 30px;
		--mrb-pd-head-gap: 40px;
		--mrb-pd-title-gap: 20px;
		--mrb-pd-eyebrow-gap: 10px;
	}
}

@media (max-width: 767px) {
	:root {
		/* 20px each side of a section boundary = 40px total between sections. */
		--mrb-pd-gap: 20px;
		--mrb-pd-head-gap: 24px;
		--mrb-pd-title-gap: 16px;
		--mrb-pd-eyebrow-gap: 8px;
	}
}