/* This class provides the 'partition' namespaces for elements and children. 

The partition is a region of the page that has borders, margins, and headers that sets it apart from the rest of
the flow. By default it will take the full width of the page, but it can be given a width and even a float value.

It's intended to be used with some other 'typeset' form of CSS that provides basic styling to the page as
well as the following standard typographic variables:
--size-text-font: 16px;
--size-line-space: 24px;
--indent-width: 1.75em;
And standard colors:
--bg: #f8f7f2;
--bg-emph: #e7e6e0;
--text: #333333;
--text-unemph: #6A6A6A;
*/

/* This has been brought over in bulk from manuscript.css and should be edited a bit, probably, to
bring it in square with new typographic standards. */


partition {
	border: 1px solid var(--text-unemph, #6A6A6A);
	border-radius: calc(var(--size-line-space, 24px) / 2);
	padding: calc(var(--size-line-space, 24px) / 2);
	display: block;
	position: relative;

	margin-top: calc(1 * var(--size-line-space, 24px));

	& ul {
		margin: 0;
	}
	& ol {
		margin: 0;
	}
	& hp {
		/* Remember, margins and line height need to be multiples of base line height, which is 1.5 "base" em */
		font-size: 2em;
		line-height: var(--size-line-space, 24px);

		background-color: var(--bg, #f8f7f2);
		padding-left: 0.5em; padding-right: 0.5em;
		border: 1px solid var(--text-unemph, #6A6A6A);
		border-radius: 0.25em;

		font-weight: 500;
		font-size: 1em;

		margin-top: 0;
		margin-bottom: 0;

		position: absolute;
		left: 1em;
		top: -1em;
		width: fit-content;
	}
	& * {
		margin-top: 0;
	}
	& *:last-child {
		margin-bottom: 0;
	}
}
/* Used to balance the column layouts below. */
partition.counterweight {
	border: none;
}

/*
A class which can be applied to a div that contains partitions, in order to ensure they all fit their
content and are the same width.
*/
.partition-col {
	width: fit-content;
}
.partition-col > partition {
	width: 100%;
}
/*
This containing class should be used when it is desired that partitions stack in two columns side by side
for desktop, but only one column (of course) on mobile.
*/
.partition-stack-two {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
	width: 100%;
}
.partition-stack-two > partition {
	width: calc(50% - 0.5em);
	box-sizing: border-box;
}

/* Most phones have 9/16 or taller ratios. This block is for desktop, the latter for mobile. */
@media (min-aspect-ratio: 9/15) {
	.partition-stack-two {
		flex-wrap: wrap;
	}
}
@media (max-aspect-ratio: 9/15) {
	.partition-stack-two {
		flex-wrap: nowrap !important;
		flex-direction: column;
		align-items: center;
	}
	.partition-stack-two > partition {
		width: calc(100% - 1em);
	}
}