/*
 * Product family (Products page): a family's intro, then a band per product.
 *
 * The intro is an ordinary white section whose bottom padding is only the 24
 * between the rule label and the first band, because the label names what
 * sits directly under it ("Current product"). The label stands 72 under the
 * intro copy and is set in the brand colour. Each band is a light grey
 * section at 64 top and bottom rather than the full section spacing: the
 * product panel's band variant already stands 680 tall.
 *
 *   <section class="vdt-section vdt-product-family" id="ani-tech">
 *     <div class="vdt-container">
 *       <div class="vdt-grid">…heading and lead | intro…</div>
 *       <div class="vdt-rule-label vdt-product-family__label"><span class="vdt-eyebrow">Current product</span></div>
 *     </div>
 *   </section>
 *   <section class="vdt-section section-theme-lightgrey vdt-product-family__band">…product panel, band…</section>
 */

@layer vdt.components {
	.vdt-product-family {
		padding-bottom: var(--vdt-space-24);
	}

	.vdt-product-family__label {
		margin-top: var(--vdt-space-72);
	}

	.vdt-product-family__label .vdt-eyebrow {
		color: var(--vdt-text-brand);
	}

	.vdt-product-family__band {
		padding-block: var(--vdt-space-64);
	}

	/* Two products in one family: a hairline between their bands. */
	.vdt-product-family__band + .vdt-product-family__band {
		border-top: var(--vdt-rule-width) solid var(--vdt-hairline);
	}

	@media (max-width: 60rem) {
		.vdt-product-family__label {
			margin-top: var(--vdt-space-48);
		}

		.vdt-product-family__band {
			padding-block: var(--vdt-space-48);
		}
	}
}