/**
 * Section: course overview — description beside the "Detalji kursa" card.
 * The card comes first in the page (phones: right under the hero); wide
 * screens put it on the right and keep it in view.
 */

.section-course-overview__inner {
	display: grid;
	gap: var(--space-7);
}

@media (min-width: 60rem) {

	.section-course-overview__inner.has-summary {
		grid-template-columns: minmax(0, 1fr) minmax(19rem, 24rem);
		align-items: start;
	}

	.section-course-overview__inner.has-summary .course-summary {
		position: sticky;
		top: calc(var(--space-9) + var(--space-2));
		grid-row: 1;
		grid-column: 2;
	}

	.section-course-overview__inner.has-summary .section-course-overview__content {
		grid-row: 1;
		grid-column: 1;
	}
}

.section-course-overview__content > :first-child {
	margin-top: 0;
}

/* ---------- Course card ---------- */

.course-summary {
	padding: var(--space-5);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-card);
	background: var(--color-surface);
	box-shadow: var(--shadow-raised);
}

.course-summary__title {
	margin: 0 0 var(--space-4);
	font-size: var(--step-2);
}

.course-summary__group + .course-summary__group {
	margin-top: var(--space-5);
	padding-top: var(--space-5);
	border-top: 1px solid var(--color-border);
}

.course-summary__heading {
	margin: 0 0 var(--space-2);
	font-size: var(--step-0);
}

.course-summary__note {
	margin: 0 0 var(--space-2);
	color: var(--color-text-muted);
	font-size: var(--step--1);
}

.course-summary__prices {
	margin: 0;
	padding: 0;
	list-style: none;
}

.course-summary__price {
	display: flex;
	flex-wrap: wrap;
	gap: 0 var(--space-3);
	justify-content: space-between;
	margin: 0;
	padding: var(--space-2) 0;
	border-bottom: 1px dashed var(--color-border);
}

.course-summary__price strong {
	color: var(--color-navy);
}

.course-summary__price--single {
	border-bottom: 0;
}

.course-summary__list {
	display: grid;
	gap: var(--space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.course-summary__list li {
	display: flex;
	gap: var(--space-2);
	align-items: flex-start;
}

.course-summary__list svg {
	flex-shrink: 0;
	width: 1.25rem;
	height: 1.25rem;
	margin-top: 0.15em;
	color: var(--color-success);
}

.course-summary__cta {
	width: 100%;
	margin-top: var(--space-6);
}