/*
 * Application procedure, in two rows:
 * - intro: optional image left, text (heading, editor paragraphs) right
 * - steps: the editor's first list as numbered cards
 * Layout responds to container width, not the viewport.
 */

/* Extra breathing room: this section sits between two others without a background change.
   !important because .section spaces itself with the my-6 utility, which is !important too */
#application-procedure {
	margin-block: clamp(4rem, 8vw, 6.5rem) !important;
}

/* Light line from the previous section, spaced like the gap before it so it sits in the middle */
#application-procedure .application-procedure-divider {
	margin: 0 0 clamp(4rem, 8vw, 6.5rem);
	border: 0;
	border-top: 1px solid var(--bs-border-color, #dee2e6);
	opacity: 1;
}

/* Side by side, the right column's heading lines up with the heading inside the padded (p-4) box on the left */
@media (min-width: 768px) {
	#application-hours .row > :last-child {
		padding-top: 1.5rem;
	}
}

/* The section above ends in editor text whose last margin would add to the gap before the divider */
#application-hours .row > * > :last-child {
	margin-bottom: 0;
}

#application-procedure .application-procedure-card {
	container: procedure / inline-size;
}

/* Intro: stacked when narrow, left-aligned like the sections around it */
#application-procedure .application-procedure-intro {
	display: grid;
	gap: 1.5rem;
}

/* Hidden when narrow; once shown it fills its box edge to edge, lining up with the container like the steps do */
#application-procedure .application-procedure-image {
	display: none;
	justify-self: stretch;
}

#application-procedure .application-procedure-image img {
	display: block;
	width: 100%;
	height: auto;
	/* Square crop whatever the upload's proportions; radius matches the step cards */
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: var(--bs-border-radius-lg, .5rem);
}

#application-procedure .application-procedure-text {
	max-width: 44rem;
}

#application-procedure .application-procedure-text > p {
	text-wrap: pretty;
}

#application-procedure .application-procedure-text > :last-child {
	margin-bottom: 0;
}

/* Intro: image left, text right */
@container procedure (min-width: 600px) {
	#application-procedure .application-procedure-intro.has-image {
		grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
		gap: 3rem;
		align-items: center;
	}

	#application-procedure .application-procedure-image {
		display: block;
	}
}

/* Steps */
#application-procedure .application-procedure-steps {
	container: steps / inline-size;
	margin-top: clamp(3rem, 7cqi, 5.5rem);
}

#application-procedure .application-procedure-steps > :is(ol, ul) {
	list-style: none;
	counter-reset: application-procedure;
	margin: 0;
	padding: 0;
	/* Undo the heart-list indent the article applies to every ul */
	text-indent: 0;
	display: grid;
	align-items: start;
	gap: 1rem;
}

#application-procedure .application-procedure-steps > :is(ol, ul) > li {
	counter-increment: application-procedure;
	position: relative;
	margin: 0;
	padding: 1.5rem;
	background: var(--bs-primary-lt, #fbf4f4);
	border-radius: var(--bs-border-radius-lg, .5rem);
	color: var(--bs-body-color, #666);
}

/*
 * Number and title share the first line, on one baseline. The title is an inline-flex box:
 * it takes its baseline from its first line (so it lines up with the number exactly) while a
 * wrapping title stays indented beside the number. Its width fills the rest of the line, which
 * pushes the step text onto the next line. Inline rather than grid, so inline markup in the
 * step text can't split into grid items. Also replaces the heart-list bullet on ul steps.
 */
#application-procedure .application-procedure-steps > :is(ol, ul) > li {
	/* Room for the number (fits 1. to 9.) plus the gap to the title */
	--number-width: 2.35rem;
}

#application-procedure .application-procedure-steps > :is(ol, ul) > li::before {
	content: counter(application-procedure) ".";
	display: inline-block;
	width: var(--number-width);
	height: auto;
	margin: 0;
	background: none;
	transform: none;
	vertical-align: baseline;
	font-family: "Satisfy", cursive;
	font-size: 3rem;
	line-height: 1;
	color: var(--bs-primary, #eebbbd);
}

/* Without a bold title there is nothing to share the line with: the number gets its own line */
#application-procedure .application-procedure-steps > :is(ol, ul) > li:not(:has(> strong:first-child))::before {
	display: block;
	width: auto;
	margin-bottom: .5rem;
}

#application-procedure .application-procedure-steps > :is(ol, ul) > li > strong:first-child {
	display: inline-flex;
	width: calc(100% - var(--number-width));
	vertical-align: baseline;
	/* Grows the title's line box, which spaces it from the step text */
	margin-bottom: .5rem;
	font-family: "Oswald", sans-serif;
	font-weight: 400;
	font-size: 1.3rem;
	line-height: 1.25;
	/* Body text is theme grey; titles take the heading color for hierarchy */
	color: var(--bs-heading-color, #181818);
	text-wrap: balance;
}

/* Two across */
@container steps (min-width: 420px) {
	#application-procedure .application-procedure-steps > :is(ol, ul) {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 1.5rem;
	}
}

/* Four across */
@container steps (min-width: 860px) {
	#application-procedure .application-procedure-steps > :is(ol, ul) {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		column-gap: 1.75rem;
	}
}