/* ============================================================
   Course and workshop overview + Key Information
   (template-parts/offering/overview.php). CW v2, desktop y 777-1362
   and mobile y 1242-2327 (docs/notes/course-page.md 4.4-4.5,
   5.4-5.5). Two Cream bands split by a full-width 1px Border Warm
   rule.
   - Phones: heading (Koulen 36/40) over the text (Poppins 16/24);
     Key Information items stacked under its heading.
   - Tablets (768-1023): heading left, text right in the desktop's
     proportions (365 : 883, 32px apart); the headings take two lines
     there and the Key Information items stay one column.
   - Desktop (>= 1024): a 365px heading column and the text 32px
     after it - so x 477 at 1440, as drawn, and "Workshop Overview"
     (361px at 48px) still on one line - the heading boxes level with
     the text's first line, as drawn. The Key Information items are
     two across from 1280px (each text column at least 270px wide;
     at 1024 it would be 160), 56px between rows.
   - Items: the illustration centred in a 66 x 48 box - on the first
     two lines of text (drawn about 4px lower) - the text 18px after
     it (x +84); a one-line text (the workshops' "Small-group
     workshop. (Max 4)") is centred on the illustration instead.
     Each illustration at its drawn width: location 66, group 56,
     equipment 54, instructors 63.
   - Spacing measured from the renders (line boxes): overview 85px
     above the heading box and 40px under the text on desktop (35.5 /
     55 on phones, 41.5 between heading and text); Key Information
     66px under the rule and 51 at the foot (53.5 / 66 on phones, 37.5
     between heading and items, 36 between items).
   ============================================================ */

.offering-overview {
	padding-top: 35.5px;
	padding-bottom: 55px;
}

.offering-key-info {
	padding-top: 53.5px;
	padding-bottom: 66px;
	border-top: var(--border-hairline) solid var(--color-border);
}

.offering-overview__title {
	color: var(--color-heading);
	overflow-wrap: break-word;
}

.offering-overview__text {
	margin-top: 41.5px;
	text-wrap: pretty;
}

.offering-overview__text p + p {
	margin-top: 24px;
}

/* ---------- Key Information items ---------- */

.offering-key-info__list {
	display: grid;
	row-gap: 36px;
	margin: 37.5px 0 0;
	padding: 0;
	list-style: none;
}

.offering-key-info__item {
	display: grid;
	grid-template-columns: 66px minmax(0, 1fr);
	grid-template-rows: 48px auto;
	column-gap: 18px;
}

.offering-key-info__illustration {
	grid-column: 1;
	grid-row: 1;
	place-self: center;
	width: 66px;
	height: auto;
}

.offering-key-info__item--group .offering-key-info__illustration {
	width: 56px;
}

.offering-key-info__item--equipment .offering-key-info__illustration {
	width: 54px;
}

.offering-key-info__item--instructors .offering-key-info__illustration {
	width: 63px;
}

/* Spans the 48px first row and whatever more it needs: one line is
   centred in that row (on the illustration), two or more fill it from
   the top. */
.offering-key-info__text {
	grid-column: 2;
	grid-row: 1 / span 2;
	align-self: center;
	min-width: 0;
}

.offering-key-info__text p + p {
	margin-top: 12px;
}

/* ---------- Tablets and desktop: heading left, content right ---------- */

@media (min-width: 768px) {
	.offering-overview {
		padding-top: 85px;
		padding-bottom: 40px;
	}

	.offering-key-info {
		padding-top: 66px;
		padding-bottom: 51px;
	}

	.offering-overview__inner {
		display: grid;
		grid-template-columns: minmax(0, 365fr) minmax(0, 883fr);
		column-gap: 32px;
		align-items: start;
	}

	.offering-overview__text,
	.offering-key-info__list {
		margin-top: 0;
	}
}

@media (min-width: 1024px) {
	.offering-overview__inner {
		grid-template-columns: minmax(0, 365px) minmax(0, 1fr);
	}
}

@media (min-width: 1280px) {
	.offering-key-info__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 32px;
		row-gap: 56px;
	}
}

/* ---------- Windows High Contrast ---------- */

/* The line art is black: on a dark system page colour it turns white. */
@media (forced-colors: active) and (prefers-color-scheme: dark) {
	.offering-key-info__illustration {
		filter: invert(1);
	}
}