/*
 * The bundle page (Services\Bundles\BundlePage).
 *
 * The page is the single-course block's own markup, so the free plugin's
 * single-course stylesheet (this file's dependency) draws it in every design.
 * Only what a course page has no part for is here: each course's row in
 * "What's included", the "bought separately" line and the saving, and the
 * bundle label. Every colour, radius and size is a course-page variable
 * (--rootwright-sc-*) or a design token (--rw-*), so the theme and the
 * owner's block settings reach these exactly as they reach the course page.
 */

/* ── a course in "What's included" ─────────────────────────────────────── */

/*
 * One row in every design: cover, title over its facts, the price on its own,
 * the chevron. Canopy lays a module out as a grid and Field Guide wraps it; a
 * course row needs neither.
 */
.rootwright-lms-pro-bundle .rootwright-lms-pro-bundle__course > .rootwright-lms-sc__topic-summary {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 16px;
}

.rootwright-lms-pro-bundle .rootwright-lms-pro-bundle__course .rootwright-lms-sc__topic-title {
	flex: none;
}

.rootwright-lms-pro-bundle__thumb {
	flex: none;
	width: 96px;
	height: 54px;
	border-radius: calc(var(--rootwright-sc-radius) * 0.6);
	object-fit: cover;
}

.rootwright-lms-pro-bundle__thumb.is-empty {
	background: var(--rootwright-sc-wash);
}

.rootwright-lms-pro-bundle__course-id {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.rootwright-lms-pro-bundle__course-facts {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 8px;
	color: var(--rootwright-sc-text);
	font-size: calc(var(--rootwright-sc-body-size) - 3px);
	font-weight: 500;
}

.rootwright-lms-pro-bundle__owned {
	padding: 1px 8px;
	border-radius: 999px;
	background: color-mix(in srgb, var(--rootwright-sc-accent, var(--rw-accent)) 12%, transparent);
	color: var(--rootwright-sc-accent, var(--rw-accent));
	font-size: calc(var(--rootwright-sc-body-size) - 4px);
	font-weight: 600;
}

.rootwright-lms-pro-bundle__course-price {
	flex: none;
	color: var(--rootwright-sc-text);
	font-size: calc(var(--rootwright-sc-body-size) - 2px);
	font-weight: 500;
	white-space: nowrap;
}

/* Not a lesson: the count of the rest and the way to the course, so none of a lesson row's columns. */
.rootwright-lms-pro-bundle .rootwright-lms-sc__lessons .rootwright-lms-pro-bundle__more {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

.rootwright-lms-pro-bundle__more .rootwright-lms-sc__lesson-title {
	color: var(--rootwright-sc-text);
}

.rootwright-lms-pro-bundle__more .rootwright-lms-sc__lesson-preview {
	margin-left: auto;
	white-space: nowrap;
}

/* ── the buy panel ─────────────────────────────────────────────────────── */

.rootwright-lms-pro-bundle__was {
	margin-bottom: 2px;
	color: var(--rootwright-sc-text);
	font-size: calc(var(--rootwright-sc-body-size) - 2px);
}

.rootwright-lms-pro-bundle__save {
	display: inline-block;
	margin-left: 6px;
	padding: 2px 10px;
	border-radius: 999px;
	background: var(--rootwright-sc-button-bg);
	color: var(--rootwright-sc-button-fg);
	font-size: calc(var(--rootwright-sc-body-size) - 3px);
	font-weight: 600;
	letter-spacing: 0;
	line-height: 1.5;
	vertical-align: middle;
}

.rootwright-lms-pro-bundle__buy {
	margin: 16px 0 18px;
}

.rootwright-lms-pro-bundle__partial,
.rootwright-lms-pro-bundle__owned-all {
	text-align: start;
}

/* ── the bundle label in the byline ────────────────────────────────────── */

/* Field Guide prints a muted badge as its small caps label above the title; a bundle's label is that label there too. */
.rootwright-lms-pro-bundle:not(.is-design-field-guide) .rootwright-lms-pro-bundle__kind {
	background: color-mix(in srgb, var(--rootwright-sc-accent, var(--rw-accent)) 12%, transparent);
	color: var(--rootwright-sc-accent, var(--rw-accent));
}

/* A phone: cover, price and chevron along the top, then the title and its facts across the full width (a design's module title is too large for a column beside the cover). */
@container (max-width: 560px) {
	.rootwright-lms-pro-bundle .rootwright-lms-pro-bundle__course > .rootwright-lms-sc__topic-summary {
		display: grid;
		grid-template-columns: 72px minmax(0, 1fr) auto;
		grid-template-areas: "thumb price chev" "id id id";
		gap: 10px 12px;
		align-items: center;
	}

	.rootwright-lms-pro-bundle__thumb {
		grid-area: thumb;
		width: 72px;
		height: 40px;
	}

	.rootwright-lms-pro-bundle__course-id {
		grid-area: id;
	}

	.rootwright-lms-pro-bundle__course-price {
		grid-area: price;
		justify-self: end;
	}

	.rootwright-lms-pro-bundle .rootwright-lms-pro-bundle__course .rootwright-lms-sc__chevron {
		grid-area: chev;
	}
}

/* The bundle's own full price, when it is on sale: smaller and lighter than the price it was cut to. */
.rootwright-lms-pro-bundle__regular {
	color: var(--rootwright-sc-text);
	font-size: 0.6em;
	font-weight: 500;
}