/**
 * Register page styles (pages/template-register.php)
 *
 * The hero is the shared page-hero (components/page-hero.css); the forms'
 * own markup is styled in components/forms.css + registration-forms.css.
 *
 * 1. Hero checklist
 * 2. Register Options
 * 3. Register Forms (empty, closed and form panels)
 * 4. Sidebar
 * 5. Responsive
 */

/* ============================ HERO CHECKLIST ============================ */
.register-steps {
	display: flex;
	flex-direction: column;
	gap: var(--space-14);
	margin: 0;
	padding: var(--space-30) 0 var(--space-24);
	list-style: none;
}

.register-steps__item {
	display: flex;
	align-items: center;
	gap: var(--space-12);
	font-size: var(--fs-24);
	font-weight: var(--font-weight-medium);
	line-height: 1.55;
	color: var(--text-color);
}

.register-steps__icon {
	display: inline-flex;
	flex: none;
	width: calc(26 * var(--u));
	height: calc(26 * var(--u));
	min-width: 18px;
	min-height: 18px;
	color: var(--primary-color);
}

.register-steps__icon svg {
	width: 100%;
	height: 100%;
}

/* ============================ REGISTER OPTIONS ============================ */
.register-options {
	padding-top: calc(90 * var(--u));
}

.register-options__head {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	margin-bottom: var(--space-56);
}

.register-options__head .crest-rule {
	margin-bottom: calc(25 * var(--u));
}

.register-options__title {
	padding-top: 0;
	margin-bottom: var(--space-16);
}

.register-options__text {
	margin-bottom: 0;
}

.register-options__link {
	margin-top: var(--space-2);
}

.register-options__row {
	--bs-gutter-x: calc(34.5 * var(--u));
	--bs-gutter-y: var(--space-32);
}

.register-option {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	background: var(--white);
	border: var(--stroke-thin) solid var(--border-color);
	border-radius: var(--radius-lg);
}

.register-option__media {
	position: relative;
	flex: none;
	aspect-ratio: 471 / 217;
	overflow: hidden;
	background: var(--light-bg-alt);
	border-bottom: calc(7 * var(--u)) solid var(--accent-current, var(--black));
}

.register-option__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.register-option__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	align-items: flex-start;
	padding: calc(46 * var(--u)) calc(44 * var(--u)) calc(44 * var(--u));
}

.register-option__icon {
	display: inline-flex;
	width: calc(66 * var(--u));
	height: calc(66 * var(--u));
	min-width: 44px;
	min-height: 44px;
	margin-bottom: var(--space-28);
}

.register-option__icon svg,
.register-option__icon-img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.register-option__eyebrow {
	margin-bottom: var(--space-10);
	font-size: var(--fs-24);
	font-weight: var(--font-weight-bold);
	line-height: 1.45;
	color: var(--text-color);
}

.register-option__title {
	margin-bottom: var(--space-14);
	font-size: var(--fs-value-title);
	font-weight: var(--font-weight-bold);
	letter-spacing: -0.012em;
	line-height: 1.15;
	color: var(--heading-color);
}

.register-option__text {
	font-size: var(--fs-intro);
	font-weight: var(--font-weight-light);
	line-height: 1.45;
	color: var(--text-color);
}

.register-option__chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-10);
	margin: var(--space-16) 0 0;
	padding: 0;
	list-style: none;
}

.register-option__chip {
	padding: var(--space-8) var(--space-16);
	font-size: var(--fs-24);
	font-weight: var(--font-weight-bold);
	line-height: 1.55;
	color: var(--heading-color);
	background: var(--light-bg);
	border: var(--stroke-thin) solid var(--border-color);
	border-radius: var(--radius-pill);
	white-space: nowrap;
}

.register-option__cta {
	margin-top: auto;
	padding-top: var(--space-48);
}

.register-option__button {
	padding-inline: var(--space-72);
}

.register-option.is-active .register-option__button {
	background: var(--primary-color);
	border-color: var(--primary-color);
	color: var(--white);
}

.register-option.is-active .register-option__button:hover,
.register-option.is-active .register-option__button:focus-visible {
	background: var(--primary-dark);
	border-color: var(--primary-dark);
}

/* ============================ REGISTER FORMS ============================ */
.register-forms {
	padding-block: calc(70 * var(--u)) var(--space-120);
}

.register-forms__grid {
	display: grid;
	grid-template-columns: minmax(0, 932fr) minmax(0, 478fr);
	gap: calc(70 * var(--u));
	align-items: start;
}

.register-forms__main {
	min-width: 0;
	scroll-margin-top: calc(var(--nav-height, 0px) + var(--space-24));
}

.register-forms__main > [hidden] {
	display: none;
}

/* Nothing chosen yet */
.register-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: var(--space-80) var(--space-40);
	text-align: center;
	background: var(--white);
	border: var(--stroke) dashed var(--border-color);
	border-radius: var(--radius-lg);
}

.register-empty__icon {
	display: inline-flex;
	width: var(--space-64);
	height: var(--space-64);
	min-width: 40px;
	min-height: 40px;
	margin-bottom: calc(32 * var(--u));
	color: var(--crumb-divider);
}

.register-empty__icon svg,
.register-empty__icon-img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.register-empty__title {
	margin-bottom: var(--space-12);
	font-size: var(--fs-40);
	font-weight: var(--font-weight-black);
	letter-spacing: -0.022em;
	line-height: 1.02;
}

.register-empty__text {
	max-width: calc(562 * var(--u));
	font-size: var(--fs-intro);
	font-weight: var(--font-weight-light);
	line-height: 1.55;
	color: var(--text-color);
}

/* A chosen form */
.register-panel {
	display: flex;
	flex-direction: column;
	gap: calc(38 * var(--u));
	padding: var(--space-56) var(--space-60) var(--space-60);
	background: var(--white);
	border: var(--stroke-thin) solid var(--accent-current, var(--heading-color));
	border-top-width: calc(9 * var(--u));
	border-radius: var(--radius-lg);
}

.register-panel__head {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: calc(13 * var(--u));
}

.register-panel__title {
	padding-top: calc(13 * var(--u));
	font-size: var(--fs-form-title);
	font-weight: var(--font-weight-black);
	letter-spacing: -0.022em;
	line-height: 1.02;
	text-transform: capitalize;
}

.register-panel__intro {
	max-width: calc(787 * var(--u));
	font-size: var(--fs-intro);
	font-weight: var(--font-weight-light);
	line-height: 1.55;
	color: var(--text-color);
}

/* Registration closed */
.register-closed {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-16);
	padding: var(--space-40);
	background: var(--light-bg);
	border-radius: var(--radius-lg);
}

.register-closed__title {
	font-size: var(--fs-32);
	font-weight: var(--font-weight-black);
	letter-spacing: -0.022em;
	line-height: 1.02;
}

.register-closed__text {
	font-size: var(--fs-intro);
	font-weight: var(--font-weight-light);
	line-height: 1.55;
	color: var(--text-color);
}

.register-closed__cta {
	padding-top: var(--space-8);
}

/* ============================ SIDEBAR ============================ */
.register-forms__aside {
	display: flex;
	flex-direction: column;
	gap: var(--space-24);
	min-width: 0;
}

.register-card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: calc(22 * var(--u));
	padding: calc(42 * var(--u)) var(--space-40);
	background: var(--white);
	border: var(--stroke-thin) solid var(--border-color);
	border-radius: var(--radius-lg);
}

.register-card__title {
	padding-top: var(--space-4);
	font-size: var(--fs-32);
	font-weight: var(--font-weight-black);
	letter-spacing: -0.022em;
	line-height: 1.02;
	text-transform: capitalize;
}

.register-card--dark {
	gap: calc(9 * var(--u));
	padding-bottom: calc(52 * var(--u));
	background: var(--black);
	border-color: var(--black);
}

.register-card--dark .register-card__title {
	color: var(--white);
}

/* You're registering */
.register-chosen__item {
	display: flex;
	align-items: stretch;
	gap: var(--space-18);
	width: 100%;
	--accent-current: var(--crumb-divider);
}

.register-chosen__item.accent-red { --accent-current: var(--primary-color); }
.register-chosen__item.accent-black { --accent-current: var(--black); }
.register-chosen__item.accent-green { --accent-current: var(--accent-color); }
.register-chosen__item.accent-grey { --accent-current: var(--border-strong); }

.register-chosen__bar {
	flex: none;
	width: calc(5 * var(--u));
	min-width: 3px;
	border-radius: var(--radius-sm);
	background: var(--accent-current);
	transition: background-color var(--transition-base);
}

.register-chosen__copy {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	min-width: 0;
}

.register-chosen__name {
	font-size: var(--fs-card-title);
	font-weight: var(--font-weight-black);
	letter-spacing: -0.01em;
	line-height: 1.15;
	color: var(--heading-color);
}

.register-chosen__summary {
	font-size: var(--fs-24);
	line-height: 1.55;
	color: var(--text-color);
}

.register-chosen__deadline {
	font-size: var(--fs-20);
	font-weight: var(--font-weight-medium);
	line-height: 1.5;
	color: var(--text-color);
}

/* What happens next */
.register-next__list {
	display: flex;
	flex-direction: column;
	gap: var(--space-24);
	width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
}

.register-next__item {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	padding-left: calc(62 * var(--u));
	min-height: calc(44 * var(--u));
}

.register-next__icon {
	position: absolute;
	top: var(--space-2);
	left: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: calc(44 * var(--u));
	height: calc(44 * var(--u));
	min-width: 30px;
	min-height: 30px;
	color: var(--primary-color);
}

.register-next__icon svg {
	width: 64%;
	height: 64%;
}

.register-next__title {
	font-size: var(--fs-intro);
	font-weight: var(--font-weight-bold);
	line-height: 1.45;
	color: var(--heading-color);
}

.register-next__text {
	font-size: var(--fs-intro);
	font-weight: var(--font-weight-light);
	line-height: 1.45;
	color: var(--text-color);
}

/* Need a hand? */
.register-help__text {
	padding-top: calc(12 * var(--u));
	font-size: var(--fs-intro);
	font-weight: var(--font-weight-light);
	line-height: 1.45;
	color: var(--muted-on-dark);
}

.register-help__contact {
	padding-top: var(--space-14);
	font-size: var(--fs-intro);
	font-weight: var(--font-weight-bold);
	line-height: 1.55;
	color: var(--white);
	overflow-wrap: anywhere;
}

.register-help__contact:hover {
	color: var(--accent-color);
}

/* ============================ RESPONSIVE ============================ */

/* --- LG --- */
@media (max-width: 1200px) {
	.register-forms__grid {
		grid-template-columns: minmax(0, 1fr) minmax(0, 360px);
		gap: 32px;
	}

	.register-panel {
		padding: 40px 36px 44px;
	}

	.register-card {
		padding: 32px 28px;
	}
}

/* --- MD / Tablet --- */
@media (max-width: 992px) {
	.register-options {
		padding-top: 64px;
	}

	.register-options__head {
		margin-bottom: 32px;
	}

	.register-options__row {
		--bs-gutter-y: 24px;
	}

	.register-option__media {
		aspect-ratio: 16 / 7;
	}

	.register-option__body {
		padding: 28px 28px 32px;
	}

	.register-option__cta {
		padding-top: 28px;
	}

	.register-forms {
		padding-block: 40px 64px;
	}

	.register-forms__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.register-forms__aside {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 20px;
	}

	.register-chosen {
		grid-column: 1 / -1;
		grid-row: 1;
	}
}

/* --- SM / Mobile --- */
@media (max-width: 768px) {
	.register-steps {
		padding: 20px 0 8px;
	}

	.register-forms__aside {
		grid-template-columns: minmax(0, 1fr);
	}

	.register-panel {
		padding: 28px 20px 32px;
		border-top-width: 6px;
	}

	.register-empty {
		padding: 40px 20px;
	}

	.register-option__cta {
		width: 100%;
	}

	.register-option__button {
		width: 100%;
		padding-inline: 20px;
	}
}