/**
 * Accordions
 *
 * Heading, the global .accordions list, and an optional centered fine-print block. The list
 * itself is a global — nothing here restyles a row, it only supplies the rhythm around it.
 */

/* Centred as text, not as a narrower column: both lines keep the container's full width so a
   long heading still breaks where it would on the left. */
.module.accordions.align-center > .container > :is(.eyebrow, .description, h1, h2, h3, h4, h5, h6) {
	text-align: center;
}

.module.accordions > .container > :is(h1, h2, h3, h4, h5, h6) {
	margin: 0 0 var(--text-spacing-xxlarge);
}

.module.accordions > .container > .eyebrow + :is(h1, h2, h3, h4, h5, h6) {
	margin-top: var(--text-spacing-xsmall);
}

/* With a description under it the heading hands the step down to the list over to that. */
.module.accordions > .container > :is(h1, h2, h3, h4, h5, h6):has(+ .description) {
	margin-bottom: var(--text-spacing-small);
}

.module.accordions > .container > .description {
	margin: 0 0 var(--text-spacing-xxlarge);
}

.module.accordions > .container > .description > * {
	margin: 0;
}

.module.accordions > .container > .description > * + * {
	margin-top: var(--text-spacing-xsmall);
}

.module.accordions .fine-print {
	display: flex;
	flex-direction: column;
	gap: var(--text-spacing-small);
	margin: var(--module-spacing-medium) auto 0;
	max-width: 784px;
	text-align: center;
}

.module.accordions .fine-print > * {
	margin: 0;
}

.module.accordions .accordion .btn {
	margin-top: var(--text-spacing-xsmall);
}

.module.accordions .accordion .content-styles > :has(+ .btn) {
	margin-bottom: 0;
}

/*** Style: Small ***/

.module.accordions.style-small > .container > :is(h1, h2, h3, h4, h5, h6) {
	margin-bottom: var(--text-spacing-medium);
}

.module.accordions.style-small > .container > :is(h1, h2, h3, h4, h5, h6):has(+ .description) {
	margin-bottom: var(--text-spacing-xsmall);
}

.module.accordions.style-small > .container > .description {
	margin-bottom: var(--text-spacing-medium);
}

.module.accordions.style-small .fine-print {
	margin-top: var(--text-spacing-xlarge);
	max-width: none;
	text-align: left;
}

.module.accordions.bg-linen {
	padding-block: var(--module-spacing-large) var(--module-spacing-xlarge);
}

/***************************************************************************************************************************************************************************************/
/* MQ MAX-WIDTH 950 - Tablet Sizes */
/***************************************************************************************************************************************************************************************/

@media only screen and (max-width: calc(950rem/16)) {

	/* The big list's heading sits onto the rows it heads rather than a full step above them. Bottom
	   only, not the shorthand: a heading with an eyebrow over it takes its top margin from the rule
	   above, and a zero there would close the eyebrow onto it. */
	.module.accordions.style-big > .container > :is(h1, h2, h3, h4, h5, h6) {
		margin-bottom: var(--text-spacing-xsmall);
	}

	.module.accordions.style-big > .container > .description {
		margin-bottom: var(--text-spacing-medium);
	}

}

/***************************************************************************************************************************************************************************************/
/* MQ MAX-WIDTH 650 - Mobile Sizes */
/***************************************************************************************************************************************************************************************/

@media only screen and (max-width: calc(650rem/16)) {

	.module.accordions.style-small > .container > :is(h1, h2, h3, h4, h5, h6) {
		margin-bottom: var(--text-spacing-small);
	}

	.module.accordions.style-small > .container > :is(h1, h2, h3, h4, h5, h6):has(+ .description) {
		margin-bottom: var(--text-spacing-xsmall);
	}

	.module.accordions.style-small > .container > .description {
		margin-bottom: var(--text-spacing-small);
	}

}