/*
 * [gdv_course_syllabus] — the course programme as a grid of cards.
 *
 * Colours resolve to the theme's tokens first and fall back to the literal the
 * theme declares, so the grid tracks a palette change. The dark block redeclares
 * every one of them: a token left out keeps its light value against a dark
 * ground.
 */

.gdv-course-syllabus-grid {
	--gdv-cs-text: var(--text-color, #444444);
	--gdv-cs-border: var(--grey, #dddddd);
	--gdv-cs-focus: #444444;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr));
	gap: 1.25rem;
	margin: 1.5rem 0;
}

.gdv-course-syllabus-card {
	border: 1px solid var(--gdv-cs-border);
	border-radius: 4px;
	padding: 0 1.25rem;
	color: var(--gdv-cs-text);
	overflow-wrap: anywhere;
}

/*
 * 0.65rem top and bottom over a 24px line gives a 44.8px activation area, which
 * is the front-end minimum for a standalone control. Left as display: list-item
 * on purpose: display: flex here would drop the disclosure triangle.
 */
.gdv-course-syllabus-card__title {
	margin: 0;
	padding: 0.65rem 0;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.5;
	cursor: pointer;
}

.gdv-course-syllabus-card--plain .gdv-course-syllabus-card__title {
	cursor: default;
}

.gdv-course-syllabus-card__title:focus-visible {
	outline: 2px solid var(--gdv-cs-focus);
	outline-offset: 2px;
}

.gdv-course-syllabus-card__body {
	max-width: 70ch;
	padding-bottom: 1rem;
	font-size: 1rem;
	line-height: 1.6;
}

.gdv-course-syllabus-card__body p {
	margin: 0 0 0.75rem;
}

.gdv-course-syllabus-card__body p:last-child {
	margin-bottom: 0;
}

/*
 * columns="N" on the shortcode fixes the cards per row from the phone-to-tablet
 * boundary up. Below it the grid stays responsive: a fixed count on a phone is
 * what pushes a card under its readable width. minmax(0, 1fr) rather than 1fr,
 * so a long unbroken word cannot push a track wider than its share.
 */
@media (min-width: 768px) {
	.gdv-course-syllabus-grid--cols-1 {
		grid-template-columns: repeat(1, minmax(0, 1fr));
	}

	.gdv-course-syllabus-grid--cols-2 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.gdv-course-syllabus-grid--cols-3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.gdv-course-syllabus-grid--cols-4 {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.gdv-course-syllabus-grid--cols-5 {
		grid-template-columns: repeat(5, minmax(0, 1fr));
	}

	.gdv-course-syllabus-grid--cols-6 {
		grid-template-columns: repeat(6, minmax(0, 1fr));
	}
}

@media (prefers-color-scheme: dark) {
	.gdv-course-syllabus-grid {
		--gdv-cs-text: var(--darkmode-text-color, #fcfcfc);
		--gdv-cs-border: #4a4a4a;
		--gdv-cs-focus: #fcfcfc;
	}
}