/*
 * Classroom lessons (lv-podcast).
 * Layers on the theme's curriculum.css: same --cl-* variables and the shared
 * cl-lesson-hero / cl-lesson-card / cl-btn components. Everything new is
 * prefixed cl-cr-. Labels follow the lesson pages' sentence-case mono rule.
 */

.cl-classroom,
.cl-cr-lane,
.curriculum-landing .cl-audiences,
.cl-cr-xlink {
	--cl-cr-text: #2c3a45;
	--cl-cr-muted: #5a7080;
	--cl-cr-border: #dde5ed;
	--cl-cr-narrow: 820px;
	/* Theme tan (#987c53) darkened until white 12px text clears 4.5:1. */
	--cl-cr-unit: #7a6138;
}

.cl-classroom {
	color: var(--cl-cr-text);
}

/* Reading column. Specific enough to beat the theme's
   `.curriculum-landing > section > .container` width rule. */
.cl-classroom section > .container.cl-cr-narrow,
.cl-classroom div > .container.cl-cr-narrow {
	max-width: var(--cl-cr-narrow);
	padding-left: 0;
	padding-right: 0;
	width: calc(100% - 40px);
}

/* The single lesson is one reading column from top to bottom: the hero text
   (breadcrumb, chips, title, essential question) sits on the same 820px
   column as everything below it, instead of the theme's 1320px container. */
.cl-classroom-single .cl-cr-hero > .container {
	max-width: var(--cl-cr-narrow);
	padding-left: 0;
	padding-right: 0;
	width: calc(100% - 40px);
}

/* The archive hero shares the results grid's 1280px container (theme
   `.curriculum-landing > section > .container`), not the 1320px one. */
.cl-classroom .cl-cr-archive-hero > .container {
	max-width: 1280px;
	padding-left: 0;
	padding-right: 0;
	width: calc(100% - 80px);
}

@media (max-width: 767px) {
	.cl-classroom .cl-cr-archive-hero > .container {
		width: calc(100% - 40px);
	}
}

/* Mono label: sentence case on lesson pages (theme rule), small, spaced. */
.cl-classroom .cl-mini-label,
.cl-classroom .cl-eyebrow,
.cl-classroom .cl-ps-breadcrumb,
.cl-classroom .cl-lesson-meta span,
.cl-classroom .cl-lesson-card-meta,
.cl-classroom .cl-lesson-card-link,
.cl-cr-glance dt,
.cl-cr-segment-tags,
.cl-cr-note-label,
.cl-cr-response summary,
.cl-cr-count,
.cl-cr-band {
	font-family: "IBM Plex Mono", monospace;
	letter-spacing: 0.04em;
	text-transform: none;
}

.cl-classroom .cl-mini-label {
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.06em;
	margin: 0 0 10px;
}

/* ---------------------------------------------------------------- hero */

.cl-classroom .cl-cr-breadcrumb a {
	display: inline-block;
	padding: 4px 0;
}

.cl-cr-hero.has-image {
	background:
		linear-gradient(108deg, rgba(7, 13, 26, 0.95) 0%, rgba(10, 22, 40, 0.88) 55%, rgba(14, 32, 64, 0.7) 100%),
		var(--cl-cr-hero-image) center / cover no-repeat,
		#07111f;
}

.cl-cr-icon {
	display: inline-block;
	flex: none;
	vertical-align: -0.18em;
}

.cl-cr-meta span .cl-cr-icon,
.cl-cr-meta a .cl-cr-icon,
.cl-lesson-card-meta .cl-cr-icon {
	margin-right: 6px;
}

a.cl-cr-meta-band:hover,
a.cl-cr-meta-band:focus-visible {
	background: #fff;
	border-color: #fff;
	color: var(--cl-navy);
	outline: 0;
}

.cl-cr-hero .cl-lesson-meta {
	margin: 0 0 22px;
}

.cl-cr-hero .cl-lesson-meta span,
.cl-cr-hero .cl-lesson-meta a {
	align-items: center;
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.18);
	color: rgba(255, 255, 255, 0.86);
	display: inline-flex;
	font-family: "IBM Plex Mono", monospace;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.04em;
	line-height: 1.2;
	min-height: 36px;
	padding: 8px 12px;
	text-transform: none;
	width: auto;
}

.cl-cr-hero .cl-cr-meta-band {
	background: var(--cl-red);
	border-color: var(--cl-red);
	color: #fff;
}

.cl-cr-hero h1 {
	font-size: clamp(30px, 3vw, 42px);
	max-width: 820px;
}

.cl-cr-question {
	border-top: 1px solid rgba(255, 255, 255, 0.22);
	margin-top: 34px;
	max-width: 820px;
	padding-top: 24px;
}

.cl-cr-question .cl-mini-label {
	color: #e8a5a5;
}

.cl-cr-question-text {
	color: #fff;
	font-family: "Ibarra Real Nova", serif;
	font-size: clamp(30px, 3.4vw, 48px);
	font-weight: 700;
	line-height: 1.08;
	margin: 0;
}

/* -------------------------------------------------- before you teach */

.cl-cr-glance {
	background: var(--cl-ice);
	padding: 40px 0 36px;
}

.cl-cr-glance-grid {
	display: grid;
	gap: 16px;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	margin: 0;
}

.cl-cr-glance-item {
	background: #fff;
	border: 1px solid var(--cl-cr-border);
	padding: 20px 22px 22px;
}

.cl-cr-glance-objective {
	grid-column: 1 / -1;
}

.cl-cr-glance-label {
	align-items: center;
	color: var(--cl-cr-muted);
	display: flex;
	font-family: "IBM Plex Mono", monospace;
	font-size: 13px;
	font-weight: 600;
	gap: 10px;
	letter-spacing: 0.04em;
	margin: 0 0 12px;
}

.cl-cr-glance-label .cl-cr-icon {
	color: var(--cl-red);
}

.cl-cr-glance-text,
.cl-cr-glance-text p {
	font-size: 17px;
	line-height: 1.55;
	margin: 0;
}

.cl-cr-glance-text p + p {
	margin-top: 8px;
}

.cl-cr-materials {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 10px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.cl-cr-materials li {
	background: var(--cl-ice);
	border: 1px solid var(--cl-cr-border);
	font-size: 15px;
	line-height: 1.3;
	padding: 7px 12px;
}

.cl-cr-glance-objective .cl-cr-glance-text,
.cl-cr-glance-objective .cl-cr-glance-text p {
	font-family: "Ibarra Real Nova", serif;
	font-size: 22px;
	line-height: 1.4;
}

.cl-classroom .cl-btn .cl-cr-icon {
	margin-right: 10px;
}

.cl-cr-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 30px;
}

.cl-classroom .cl-cr-actions .cl-btn {
	font-size: 17px;
	min-height: 54px;
	padding: 12px 24px;
}

.cl-classroom .cl-btn-outline {
	background: transparent;
	border-color: rgba(18, 33, 61, 0.28);
	color: var(--cl-navy);
}

.cl-classroom .cl-btn-outline:hover,
.cl-classroom .cl-btn-outline:focus-visible {
	border-color: var(--cl-navy);
	color: var(--cl-navy);
}

/* ---------------------------------------------------------------- body */

.cl-cr-body {
	padding: 48px 0 72px;
}

.cl-cr-body p,
.cl-cr-body li {
	font-size: 17px;
	line-height: 1.65;
}

.cl-cr-overview p {
	margin: 0 0 14px;
}

.cl-cr-overview p:last-child {
	margin-bottom: 0;
}

/* Agenda bar: one cell per segment, width proportional to its minutes. */
.cl-cr-agenda {
	border-top: 1px solid var(--cl-cr-border);
	margin-top: 44px;
	padding-top: 28px;
}

.cl-cr-agenda-head {
	align-items: baseline;
	display: flex;
	justify-content: space-between;
	margin: 0 0 12px;
}

.cl-cr-agenda-head .cl-mini-label {
	margin: 0;
}

.cl-cr-agenda-total {
	color: var(--cl-navy);
	font-family: "IBM Plex Mono", monospace;
	font-size: 13px;
	font-weight: 600;
}

.cl-cr-agenda-total .cl-cr-icon {
	margin-right: 6px;
}

.cl-cr-agenda-bar {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.cl-cr-agenda-item {
	flex: var(--cl-cr-flex, 1) 1 92px;
	min-width: 0;
}

.cl-cr-agenda-item.is-untimed {
	flex: 0 1 92px;
}

.cl-cr-agenda-item a {
	background: var(--cl-ice);
	border-top: 4px solid var(--cl-steel);
	color: var(--cl-navy);
	display: grid;
	gap: 2px 8px;
	grid-template-columns: auto minmax(0, 1fr);
	height: 100%;
	padding: 10px 10px 10px 10px;
	transition: background 160ms ease;
}

.cl-cr-agenda-item.is-read_aloud a { border-top-color: var(--cl-navy); }
.cl-cr-agenda-item.is-discussion a { border-top-color: var(--cl-steel); }
.cl-cr-agenda-item.is-activity a { border-top-color: var(--cl-red); }
.cl-cr-agenda-item.is-wrap_up a { border-top-color: var(--cl-tan); }
.cl-cr-agenda-item.is-optional a { background: #fff; border-top-style: dashed; color: var(--cl-cr-muted); }

.cl-cr-agenda-item a:hover,
.cl-cr-agenda-item a:focus-visible {
	background: #fff;
	color: var(--cl-navy);
	outline: 0;
}

.cl-cr-agenda-step {
	color: var(--cl-red);
	font-family: "IBM Plex Mono", monospace;
	font-size: 13px;
	font-weight: 700;
	grid-row: 1 / 3;
	line-height: 1.6;
}

.cl-cr-agenda-item.is-optional .cl-cr-agenda-step {
	color: var(--cl-cr-muted);
}

.cl-cr-agenda-min {
	font-family: "IBM Plex Mono", monospace;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.04em;
	line-height: 1.6;
}

.cl-cr-agenda-title {
	color: var(--cl-cr-muted);
	font-size: 14px;
	line-height: 1.3;
}

.cl-cr-segments {
	counter-reset: cl-cr-segment;
	list-style: none;
	margin: 40px 0 0;
	padding: 0;
}

.cl-cr-segment {
	border-top: 1px solid var(--cl-cr-border);
	margin: 0;
	padding: 32px 0 36px;
}

.cl-cr-segment-head {
	align-items: center;
	display: grid;
	gap: 0 16px;
	grid-template-columns: 44px minmax(0, 1fr);
	margin-bottom: 20px;
}

.cl-cr-segment-num {
	align-items: center;
	background: var(--cl-navy);
	border-radius: 50%;
	color: #fff;
	display: flex;
	font-family: "IBM Plex Mono", monospace;
	font-size: 17px;
	font-weight: 700;
	height: 44px;
	justify-content: center;
	width: 44px;
}

.cl-cr-segment.is-optional .cl-cr-segment-num {
	background: #fff;
	border: 1px dashed var(--cl-cr-border);
	color: var(--cl-cr-muted);
}

.cl-cr-segment-titles {
	min-width: 0;
}

.cl-cr-segment-tags {
	margin-bottom: 4px;
}

.cl-cr-step {
	display: none;
}

.cl-cr-segment h2 {
	color: var(--cl-navy);
	font-family: "Ibarra Real Nova", serif;
	font-size: clamp(24px, 2.4vw, 30px);
	font-weight: 700;
	line-height: 1.15;
	margin: 0;
	text-transform: none;
}

/* Body: full width under the header, one left edge for everything. */
.cl-cr-segment-body > :first-child {
	margin-top: 0;
}

.cl-cr-segment-body p {
	margin: 0 0 14px;
}

.cl-cr-segment-body p:last-child {
	margin-bottom: 0;
}

/* Lists: visible markers in the brand red, aligned with the text column. */
.cl-cr-segment-body ul,
.cl-cr-segment-body ol {
	margin: 0 0 16px;
	padding: 0 0 0 28px;
}

.cl-cr-segment-body ul {
	list-style: none;
}

.cl-cr-segment-body ul > li {
	position: relative;
}

.cl-cr-segment-body ul > li::before {
	background: var(--cl-red);
	border-radius: 50%;
	content: "";
	height: 7px;
	left: -20px;
	position: absolute;
	top: 0.62em;
	width: 7px;
}

.cl-cr-segment-body ul ul > li::before {
	background: #fff;
	border: 1.5px solid var(--cl-red);
	height: 6px;
	width: 6px;
}

.cl-cr-segment-body ol {
	list-style: decimal;
}

.cl-cr-segment-body ol > li::marker {
	color: var(--cl-red);
	font-family: "IBM Plex Mono", monospace;
	font-weight: 700;
}

.cl-cr-segment-body li {
	margin-bottom: 8px;
}

.cl-cr-segment-body li:last-child {
	margin-bottom: 0;
}

.cl-cr-segment-body ul ul,
.cl-cr-segment-body ol ol {
	margin: 8px 0 4px;
}

.cl-cr-segment-body strong {
	color: var(--cl-navy);
}

/* Read-aloud scripts read as a voice: serif, a touch larger. */
.cl-cr-segment.is-read_aloud .cl-cr-segment-body p {
	font-family: "Ibarra Real Nova", serif;
	font-size: 19px;
	line-height: 1.6;
}

.cl-cr-segment.is-read_aloud .cl-cr-segment-body p strong {
	font-family: "Manrope", sans-serif;
	font-size: 15px;
}

/* Prompts: the question leads, the answer is tucked under it. */
.cl-cr-prompts {
	counter-reset: cl-cr-prompt;
	list-style: none;
	margin: 0 0 4px;
	padding: 0 0 0 28px;
}

.cl-cr-prompts > li {
	counter-increment: cl-cr-prompt;
	margin: 0 0 14px;
	position: relative;
}

.cl-cr-prompts > li::before {
	color: var(--cl-red);
	content: counter(cl-cr-prompt);
	font-family: "IBM Plex Mono", monospace;
	font-size: 14px;
	font-weight: 700;
	left: -28px;
	position: absolute;
	top: 0.2em;
}

.cl-cr-prompt {
	color: var(--cl-navy);
	font-weight: 600;
	margin: 0;
}

.cl-cr-response {
	margin-top: 4px;
}

.cl-cr-response summary {
	color: var(--cl-cr-muted);
	cursor: pointer;
	display: inline-block;
	font-size: 13px;
	font-weight: 600;
	list-style: none;
	min-height: 24px;
	padding: 4px 0;
}

.cl-cr-response summary::-webkit-details-marker {
	display: none;
}

.cl-cr-response summary::before {
	content: "+";
	display: inline-block;
	margin-right: 8px;
	width: 10px;
}

.cl-cr-response[open] summary::before {
	content: "\2013";
}

.cl-cr-response summary:hover,
.cl-cr-response summary:focus-visible {
	color: var(--cl-navy);
	outline: 0;
}

.cl-cr-response-text p {
	color: var(--cl-cr-muted);
	font-size: 16px;
	margin: 2px 0 0 18px;
}

.cl-cr-prompts + .cl-cr-note,
.cl-cr-segment-body + .cl-cr-note {
	margin-top: 20px;
}

/* Teacher note: offset tinted block, mono label, no border. */
.cl-cr-note {
	background: var(--cl-ice);
	margin: 22px 0 0;
	padding: 18px 22px 16px;
}

.cl-cr-note-label {
	color: var(--cl-navy);
	font-size: 13px;
	font-weight: 600;
	margin: 0 0 6px;
}

.cl-cr-note p {
	font-size: 16px;
	margin: 0;
}

/* Optional extension: visibly skippable. */
.cl-cr-segment.is-optional {
	border-top-style: dashed;
}

.cl-cr-segment.is-optional h2,
.cl-cr-segment.is-optional .cl-cr-segment-body {
	color: var(--cl-cr-muted);
}

.cl-cr-optional {
	background: #fff;
	border: 1px solid var(--cl-cr-border);
	color: var(--cl-cr-muted);
	padding: 3px 8px;
}

.cl-cr-end {
	background: var(--cl-navy);
	color: #fff;
	margin-top: 40px;
	padding: 32px 36px;
}

.cl-cr-end-text {
	color: #fff;
	font-family: "Ibarra Real Nova", serif;
	font-size: 24px;
	margin: 0 0 18px;
}

.cl-cr-end-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 0;
}

.cl-cr-end .cl-btn-outline {
	border-color: rgba(255, 255, 255, 0.4);
	color: #fff;
}

.cl-cr-end .cl-btn-outline:hover,
.cl-cr-end .cl-btn-outline:focus-visible {
	background: #fff;
	border-color: #fff;
	color: var(--cl-navy);
}

.cl-cr-print-foot {
	display: none;
}

/* ------------------------------------------------------------- archive */

.cl-cr-archive-hero .cl-lesson-dek {
	margin-top: 14px;
	max-width: 640px;
}

.cl-cr-bands {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 30px;
}

.cl-cr-band {
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.28);
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	padding: 10px 16px;
	transition: background 160ms ease, border-color 160ms ease;
}

.cl-cr-band:hover,
.cl-cr-band:focus-visible {
	background: rgba(255, 255, 255, 0.16);
	border-color: #fff;
	color: #fff;
	outline: 0;
}

.cl-cr-band.is-active {
	background: #fff;
	border-color: #fff;
	color: var(--cl-navy);
}

.cl-cr-band-count {
	color: var(--cl-cr-muted);
	margin-left: 8px;
}

.cl-cr-band.is-active .cl-cr-band-count {
	color: var(--cl-red);
}

.cl-cr-results {
	padding: 56px 0 80px;
}

.cl-cr-count {
	color: var(--cl-cr-muted);
	font-size: 13px;
	margin: 0 0 22px;
}

.cl-classroom .cl-cr-card.has-image {
	padding-top: 0;
}

.cl-cr-card-image {
	aspect-ratio: 16 / 9;
	background-position: center;
	background-size: cover;
	display: block;
	margin: 0 calc(-1 * clamp(24px, 2.7vw, 34px)) 22px;
}

/* The theme's `.cl-lesson-card p` rule zeroes this row's bottom margin, which
   left the chips touching the title. */
.cl-classroom .cl-cr-card .cl-lesson-card-meta {
	font-size: 13px;
	margin: 0 0 18px;
}

.cl-classroom .cl-cr-card .cl-lesson-card-meta span {
	align-items: center;
	display: inline-flex;
}

.cl-classroom .cl-cr-card h2 {
	color: var(--cl-navy);
	font-family: "Ibarra Real Nova", serif;
	font-size: 24px;
	letter-spacing: 0;
	line-height: 1.2;
	margin: 0;
	text-transform: none;
}

/* Card body: a plain sentence on what the lesson is, then the essential
   question with a label so the italic line is not mistaken for a subtitle. */
.cl-classroom .cl-cr-card-summary {
	font-size: 16px;
	line-height: 1.55;
	margin: 14px 0 0;
}

.cl-classroom .cl-cr-card-question {
	color: var(--cl-navy);
	font-family: "Ibarra Real Nova", serif;
	font-size: 19px;
	font-style: italic;
	line-height: 1.3;
	margin: 20px 0 0;
}

.cl-classroom .cl-cr-card-label {
	color: var(--cl-cr-muted);
	display: block;
	font-family: "IBM Plex Mono", monospace;
	font-size: 12px;
	font-style: normal;
	font-weight: 600;
	letter-spacing: 0.06em;
	margin-bottom: 4px;
}

.cl-classroom .cl-cr-card:hover,
.cl-classroom .cl-cr-card:focus-visible {
	border-color: var(--cl-red);
	box-shadow: 0 18px 42px rgba(18, 33, 61, 0.12);
	outline: 0;
	transform: translateY(-3px);
}

.cl-cr-empty {
	border: 1px solid var(--cl-cr-border);
	margin: 0 auto;
	max-width: 720px;
	padding: 48px 40px;
	text-align: center;
}

.cl-cr-empty h2 {
	color: var(--cl-navy);
	font-family: "Ibarra Real Nova", serif;
	font-size: 30px;
	margin: 0 0 12px;
	text-transform: none;
}

.cl-cr-empty-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: center;
	margin: 26px 0 0;
}

/* ------------------------------------- hosted pieces on other pages  */

/* Teacher fast lane band on /curriculum/ */
.cl-cr-lane {
	background: var(--cl-ice);
	padding: 72px 0 56px;
}

.cl-cr-lane-inner {
	align-items: stretch;
	display: grid;
	gap: 40px;
	grid-template-columns: minmax(0, 1fr);
}

.cl-cr-lane.has-image .cl-cr-lane-inner {
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
}

.cl-cr-lane-head {
	margin-bottom: 26px;
	max-width: 640px;
}

.cl-cr-lane-head h2 {
	color: var(--cl-navy);
	font-family: "Ibarra Real Nova", serif;
	font-size: clamp(30px, 3.2vw, 44px);
	line-height: 1.05;
	margin: 0 0 14px;
	text-transform: none;
}

.cl-cr-lane-head p {
	color: var(--cl-cr-text);
	font-size: 17px;
	line-height: 1.55;
	margin: 0;
}

.cl-cr-lane-grid {
	display: grid;
	gap: 12px;
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.cl-cr-lane-card {
	background: #fff;
	border: 1px solid var(--cl-cr-border);
	color: var(--cl-cr-text);
	display: flex;
	flex-direction: column;
	gap: 14px;
	min-height: 168px;
	padding: 20px 18px 18px;
	transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.cl-cr-lane-card:hover,
.cl-cr-lane-card:focus-visible {
	border-color: var(--cl-red);
	box-shadow: 0 14px 34px rgba(18, 33, 61, 0.1);
	color: var(--cl-cr-text);
	outline: 0;
	transform: translateY(-3px);
}

.cl-cr-lane-icon {
	align-items: center;
	background: var(--cl-steel);
	color: #fff;
	display: flex;
	height: 48px;
	justify-content: center;
	width: 48px;
}


.cl-cr-lane-card.is-empty {
	background: transparent;
	border-style: dashed;
	color: var(--cl-cr-muted);
}

.cl-cr-lane-card.is-empty .cl-cr-lane-icon {
	background: #fff;
	border: 1px solid var(--cl-cr-border);
	color: var(--cl-cr-muted);
}

.cl-cr-lane-card.is-empty:hover,
.cl-cr-lane-card.is-empty:focus-visible {
	border-color: var(--cl-red);
	box-shadow: none;
	transform: none;
}

.cl-cr-lane-card.is-empty .cl-cr-lane-count {
	display: block;
	line-height: 1.45;
}

.cl-cr-lane-card.is-empty .cl-cr-lane-count svg {
	display: inline-block;
	margin-left: 4px;
	vertical-align: -2px;
}

.cl-cr-nowrap {
	white-space: nowrap;
}

.cl-cr-lane-card strong {
	color: var(--cl-navy);
	font-family: "Ibarra Real Nova", serif;
	font-size: 24px;
	font-weight: 700;
	line-height: 1.1;
}

.cl-cr-lane-card.is-empty strong {
	color: var(--cl-cr-muted);
}

.cl-cr-lane-teaser {
	color: var(--cl-cr-text);
	font-family: "Ibarra Real Nova", serif;
	font-size: 16px;
	font-style: italic;
	line-height: 1.35;
	margin-top: -4px;
}

.cl-cr-lane-count {
	align-items: center;
	display: flex;
	font-family: "IBM Plex Mono", monospace;
	font-size: 13px;
	gap: 6px;
	letter-spacing: 0.04em;
	margin-top: auto;
}

.cl-cr-lane-card:not(.is-empty) .cl-cr-lane-count {
	color: var(--cl-red);
	font-weight: 600;
}

.cl-cr-lane-foot {
	margin: 20px 0 0;
}

.cl-cr-lane-foot a {
	align-items: center;
	color: var(--cl-navy);
	display: inline-flex;
	font-weight: 700;
	gap: 8px;
}

.cl-cr-lane-foot a:hover,
.cl-cr-lane-foot a:focus-visible {
	color: var(--cl-red);
	outline: 0;
}

.cl-cr-lane-media {
	margin: 0;
	min-height: 320px;
}


.cl-cr-lane-media img {
	display: block;
	height: 100%;
	min-height: 320px;
	object-fit: cover;
	width: 100%;
}

/* Audience grid under the teacher band. Same ice background as the band so the
   two read as one section joined by an "or" rule, and one shared card system:
   48px steel tile, 24px serif title, 16px body, 13px mono action. */
.curriculum-landing .cl-audiences {
	background: var(--cl-ice);
	padding: 0 0 88px;
}

.curriculum-landing .cl-audiences-head {
	margin: 0 0 32px;
	max-width: none;
	text-align: left;
}

.cl-audiences-or {
	align-items: center;
	color: var(--cl-navy);
	display: flex;
	font-family: "Ibarra Real Nova", serif;
	font-size: 26px;
	font-style: italic;
	gap: 28px;
	line-height: 1;
	margin: 0 0 44px;
}

.cl-audiences-or::after {
	background: var(--cl-line, rgba(18, 33, 61, 0.14));
	content: "";
	flex: 1;
	height: 1px;
}

.curriculum-landing .cl-audiences-head h2 {
	font-size: clamp(30px, 3.2vw, 44px);
	line-height: 1.05;
	margin: 0;
}

@media (min-width: 1440px) {
	.curriculum-landing #curriculum-audience-title {
		white-space: normal;
	}
}

.curriculum-landing .cl-audience-grid {
	gap: 12px;
}

.curriculum-landing .cl-audience-card {
	border-color: var(--cl-cr-border);
	box-shadow: none;
	min-height: 0;
	padding: 24px 22px 22px;
}

.curriculum-landing .cl-audience-card:hover,
.curriculum-landing .cl-audience-card:focus-visible {
	border-color: var(--cl-red);
	box-shadow: 0 14px 34px rgba(18, 33, 61, 0.1);
}

.curriculum-landing .cl-audience-card.is-featured {
	border-color: var(--cl-cr-border);
	box-shadow: none;
}

.curriculum-landing .cl-audience-card.is-featured:hover,
.curriculum-landing .cl-audience-card.is-featured:focus-visible {
	border-color: var(--cl-red);
	box-shadow: 0 14px 34px rgba(18, 33, 61, 0.1);
}

.curriculum-landing .cl-audience-card::before {
	height: 48px;
	margin-bottom: 18px;
	width: 48px;
}

.curriculum-landing .cl-audience-kicker {
	color: var(--cl-cr-muted);
	font-size: 12px;
	letter-spacing: 0.12em;
	line-height: 1.3;
	margin-bottom: 8px;
	text-transform: uppercase;
}

.curriculum-landing .cl-audience-card strong {
	font-size: 24px;
	line-height: 1.1;
	margin-bottom: 10px;
}

.curriculum-landing .cl-audience-card span:not(.cl-audience-kicker):not(.cl-audience-overlay):not(.cl-audience-overlay-text) {
	color: #333333;
	font-size: 16px;
	line-height: 1.6;
}

.curriculum-landing .cl-audience-card i {
	font-size: 13px;
	letter-spacing: 0.04em;
	padding-top: 20px;
}

.curriculum-landing .cl-audience-card.is-inactive {
	background: transparent;
	border-style: dashed;
}

.curriculum-landing .cl-audience-card.is-inactive span:not(.cl-audience-kicker):not(.cl-audience-overlay):not(.cl-audience-overlay-text),
.curriculum-landing .cl-audience-card.is-inactive strong,
.curriculum-landing .cl-audience-card.is-inactive .cl-audience-kicker {
	color: var(--cl-cr-muted);
}

@media (max-width: 1199px) {
	.curriculum-landing .cl-audience-grid {
		gap: 12px;
	}
}

@media (max-width: 980px) {
	.cl-cr-lane {
		padding: 56px 0 44px;
	}

	.curriculum-landing .cl-audiences {
		padding-bottom: 64px;
	}

	.cl-audiences-or {
		font-size: 22px;
		margin-bottom: 32px;
	}
}

@media (max-width: 600px) {
	.curriculum-landing .cl-audience-card {
		padding: 20px 76px 20px 20px;
	}

	.curriculum-landing .cl-audience-card::before {
		height: 44px;
		margin: 0;
		width: 44px;
	}
}

/* Classroom version cross-link on a deep curriculum_lesson page */
.cl-cr-xlink {
	background: var(--cl-ice);
	padding: 28px 0;
}

.cl-cr-xlink-inner {
	align-items: center;
	display: grid;
	gap: 16px 32px;
	grid-template-columns: minmax(0, 1fr) auto;
}

.cl-cr-xlink .cl-mini-label {
	margin-bottom: 6px;
}

.cl-cr-xlink p {
	color: var(--cl-cr-text);
	font-size: 17px;
	line-height: 1.5;
	margin: 0;
}

.cl-cr-xlink-list {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.cl-cr-xlink-list a {
	background: #fff;
	border: 1px solid var(--cl-cr-border);
	color: var(--cl-navy);
	display: inline-flex;
	flex-direction: column;
	font-weight: 600;
	gap: 2px;
	padding: 12px 16px;
	transition: border-color 160ms ease;
}

.cl-cr-xlink-list a:hover,
.cl-cr-xlink-list a:focus-visible {
	border-color: var(--cl-red);
	outline: 0;
}

.cl-cr-xlink-list small {
	color: var(--cl-cr-muted);
	font-family: "IBM Plex Mono", monospace;
	font-size: 13px;
	font-weight: 400;
}

/* ---------------------------------------------------------- responsive */

@media (max-width: 1199px) {
	.cl-cr-lane-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 980px) {
	.cl-cr-lane.has-image .cl-cr-lane-inner {
		grid-template-columns: minmax(0, 1fr);
	}

	.cl-cr-lane-media {
		min-height: 0;
	}

	.cl-cr-lane-media img {
		aspect-ratio: 16 / 9;
		min-height: 0;
	}

	.cl-cr-agenda-item,
	.cl-cr-agenda-item.is-untimed {
		flex: 1 1 100%;
	}

	.cl-cr-agenda-item a {
		grid-template-columns: auto auto minmax(0, 1fr);
		padding: 10px 12px;
	}

	.cl-cr-agenda-step {
		grid-row: auto;
	}

	.cl-cr-xlink-inner {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 767px) {
	.cl-cr-glance-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.cl-cr-segment {
		padding: 26px 0 28px;
	}

	.cl-cr-body p,
	.cl-cr-body li {
		font-size: 16px;
	}

	.cl-classroom .cl-cr-actions .cl-btn,
	.cl-cr-end-actions .cl-btn {
		width: 100%;
	}

	.cl-cr-segment-head {
		gap: 0 12px;
		grid-template-columns: 36px minmax(0, 1fr);
	}

	.cl-cr-segment-num {
		font-size: 15px;
		height: 36px;
		width: 36px;
	}

	.cl-cr-segment.is-read_aloud .cl-cr-segment-body {
		padding: 18px;
	}

	.cl-cr-end {
		padding: 24px 20px;
	}
}

@media (max-width: 560px) {
	.cl-cr-lane-grid {
		gap: 10px;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.cl-cr-lane-card {
		gap: 10px;
		min-height: 0;
		padding: 14px 14px 12px;
	}

	.cl-cr-lane-icon {
		height: 40px;
		width: 40px;
	}

	.cl-cr-lane-card strong {
		font-size: 20px;
	}

}

/* -------------------------------------------------------------------------
 * Unified library (review build): the classroom card inside the theme's
 * curriculum library, two up in the results column, and a kind pill that
 * tells one period from a multi-day unit when the two sit side by side.
 * ---------------------------------------------------------------------- */
.cl-lr-cards.cl-lr-cards--unified {
	display: grid;
	gap: 24px;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.cl-classroom .cl-lr-cards--unified .cl-cr-card {
	min-height: 0;
}

.cl-classroom .cl-cr-card-kind {
	background: var(--cl-navy);
	border-radius: 999px;
	color: #fff;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.04em;
	line-height: 1;
	padding: 6px 10px;
}

/* Cool for a single period, warm for a multi-day unit. */
.cl-classroom .cl-cr-card-kind--period {
	background: var(--cl-navy);
}

.cl-classroom .cl-cr-card-kind--unit {
	background: var(--cl-cr-unit);
}

.cl-classroom .cl-lesson-card-meta .cl-cr-card-kind + span {
	margin-left: 2px;
}

@media (max-width: 767px) {
	.cl-lr-cards.cl-lr-cards--unified {
		grid-template-columns: minmax(0, 1fr);
	}
}