/* Opt-in carousel. Ordinary teaching embeds and the teaching hero are unchanged. */
.shhm-calendar--teaching-carousel {
	--shhm-calendar-section-padding: 0;
	--shhm-calendar-mobile-section-padding: 0;
	background: transparent;
}
.shhm-calendar--teaching-carousel .shhm-calendar__inner { width: 100%; }
.shhm-teaching-carousel { --shhm-carousel-gap: 32px; position: relative; min-width: 0; }
.shhm-teaching-carousel__progression {
	margin: 0 0 32px;
	padding: 18px 12px 12px;
	border-radius: 5px;
	background: var(--shhm-calendar-white, #fff);
	overflow-x: auto;
	scrollbar-width: none;
}
.shhm-teaching-carousel__progression::-webkit-scrollbar { display: none; }
.shhm-teaching-carousel__progression ol {
	position: relative;
	display: grid;
	grid-template-columns: repeat(var(--shhm-carousel-steps, 5), minmax(0, 1fr));
	min-width: calc(var(--shhm-carousel-steps, 5) * 120px);
	margin: 0;
	padding: 0;
	list-style: none;
}
.shhm-teaching-carousel__progression ol::before {
	content: "";
	position: absolute;
	inset: 15px 5% auto;
	height: 5px;
	border-radius: 5px;
	background: var(--shhm-carousel-band);
}
.shhm-teaching-carousel__progression li { min-width: 0; margin: 0; padding: 0; list-style: none; }
.shhm-teaching-carousel__progression a {
	position: relative;
	display: flex;
	align-items: center;
	flex-direction: column;
	gap: 4px;
	min-height: 88px;
	padding: 0 8px 8px;
	color: var(--shhm-calendar-navy, #002f47);
	font-size: 16px;
	line-height: 1.35;
	text-align: center;
	text-decoration: none;
}
.shhm-teaching-carousel__stop { display: grid; width: 35px; height: 35px; margin-bottom: 5px; place-items: center; }
.shhm-teaching-carousel__stop::before {
	content: "";
	width: 18px;
	height: 18px;
	border: 2px solid var(--shhm-carousel-stop);
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 0 0 2px #fff;
	transition: transform 180ms ease, background-color 180ms ease;
}
.shhm-teaching-carousel__progression a[aria-current="step"] .shhm-teaching-carousel__stop::before {
	background: var(--shhm-carousel-stop);
	box-shadow: 0 0 0 4px #fff, 0 0 0 6px var(--shhm-carousel-stop);
}
.shhm-teaching-carousel__progression a[aria-current="step"] .shhm-teaching-carousel__name { font-weight: 700; }
.shhm-teaching-carousel__level { color: var(--shhm-calendar-text, #004e6e); font-size: 14px; }
.shhm-teaching-carousel__progression a:hover .shhm-teaching-carousel__stop::before { transform: scale(1.15); }
.shhm-teaching-carousel__controls { position: absolute; inset: var(--shhm-carousel-arrow-top, 220px) -22px auto; z-index: 2; display: flex; justify-content: space-between; pointer-events: none; }
.shhm-teaching-carousel__controls[hidden] { display: none; }
.shhm-teaching-carousel__controls button {
	display: grid;
	width: 44px;
	height: 44px;
	padding: 0;
	place-items: center;
	border: 1px solid #c7d3d9;
	border-radius: 50%;
	appearance: none;
	background: #fff;
	box-shadow: 0 2px 12px #001e3433;
	color: #002f47;
	font: inherit;
	font-size: 25px;
	line-height: 1;
	cursor: pointer;
	pointer-events: auto;
}
.shhm-teaching-carousel__controls button:hover { background: #e9f2f5; }
.shhm-teaching-carousel__controls button[aria-disabled="true"] { opacity: .45; cursor: default; }
.shhm-teaching-carousel :is(a, button):focus-visible,
.shhm-teaching-carousel__track:focus-visible { outline: 3px solid #cbb476; outline-offset: 3px; }
.shhm-teaching-carousel__track { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--shhm-carousel-gap); align-items: stretch; }
.shhm-teaching-carousel.is-ready .shhm-teaching-carousel__track {
	display: flex;
	align-items: stretch;
	overflow-x: auto;
	overscroll-behavior-inline: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	padding: 4px;
	margin: -4px;
}
.shhm-teaching-carousel__track::-webkit-scrollbar { display: none; }
.shhm-teaching-carousel__item {
	flex: 0 0 calc((100% - 2 * var(--shhm-carousel-gap)) / 3);
	min-width: 0;
	container: shhm-calendar-embed / inline-size;
	scroll-snap-align: start;
}
.shhm-teaching-carousel__item .shhm-program-focus { height: 100%; }
.shhm-teaching-carousel__item .shhm-programs__group { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; height: 100%; }
.shhm-teaching-carousel__item .shhm-programs__lessons { border-inline-start: 0; }
.shhm-teaching-carousel__item .shhm-programs__heading { min-height: 2.3em; }
.shhm-teaching-carousel__item .shhm-programs__summary { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
.shhm-teaching-carousel__item .shhm-programs__media { min-height: 0; aspect-ratio: 16 / 9; }
.shhm-teaching-carousel__item .shhm-programs__image { min-height: 0; height: 100%; aspect-ratio: auto; }
@media (max-width: 1100px) {
	.shhm-teaching-carousel { --shhm-carousel-gap: 24px; }
	.shhm-teaching-carousel__track { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.shhm-teaching-carousel__item { flex-basis: calc((100% - var(--shhm-carousel-gap)) / 2); }
}
@media (max-width: 600px) {
	.shhm-teaching-carousel { --shhm-carousel-gap: 20px; }
	.shhm-teaching-carousel__progression { padding: 12px 8px 6px; margin-bottom: 24px; }
	.shhm-teaching-carousel__progression ol { min-width: calc(var(--shhm-carousel-steps, 5) * 110px); }
	.shhm-teaching-carousel__progression a { font-size: 14px; }
	.shhm-teaching-carousel__level { font-size: 12px; }
	.shhm-teaching-carousel__track { grid-template-columns: minmax(0, 1fr); }
	.shhm-teaching-carousel__item { flex-basis: 100%; }
	.shhm-teaching-carousel.is-ready .shhm-teaching-carousel__track { align-items: flex-start; }
	.shhm-teaching-carousel__controls { inset-inline: -16px; }
	.shhm-teaching-carousel__item .shhm-programs__heading { min-height: 0; }
}
@media (prefers-reduced-motion: reduce) {
	.shhm-teaching-carousel__stop::before { transition: none; }
}