/* Program cards (Figma "Vertical Card"): bordered 600-tall cards, "View Details" at the foot.
   Related: three across. Types: two across. Carousel: heading and text beside a row of cards that
   runs off the right edge, on a darkened photo. On phones every style is one card at a time. */

.s-programme_cards {
	overflow-x: clip; /* the carousel row runs to the window edge */
}

.s-programme_cards__bg {
	position: absolute;
	inset: 0;
}

.s-programme_cards__bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.s-programme_cards__bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgb(0 0 0 / 0.76);
}

.s-programme_cards__inner {
	position: relative;
	display: grid;
	gap: 32px;
}

.s-programme_cards__head {
	display: grid;
	gap: 16px;
}

.s-programme_cards__heading {
	text-transform: uppercase;
}

.s-programme_cards__intro {
	color: var(--c-text-2);
}

/* The row of cards: scrolls sideways unless a wider layout below turns it into a grid. */
.s-programme_cards__track {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 100%;
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.s-programme_cards__track::-webkit-scrollbar {
	display: none;
}

.s-programme_cards__card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 16px;
	min-height: 600px;
	padding: 16px;
	border: 1px solid var(--c-line);
	color: var(--c-text);
	scroll-snap-align: start;
}

.s-programme_cards__img {
	width: 100%;
	height: 250px;
	object-fit: cover;
}

.s-programme_cards__text {
	display: grid;
	align-content: start;
	gap: 4px;
	flex: 1;
}

.s-programme_cards__label,
.s-programme_cards__excerpt {
	color: var(--c-text-2);
}

.s-programme_cards__title {
	font-size: var(--t-title-s);
	line-height: var(--lh-title-s);
}

.s-programme_cards__text:has(.s-programme_cards__label) .s-programme_cards__excerpt {
	margin-top: 12px;
}

.s-programme_cards__link {
	align-self: flex-start;
}

/* The link covers the whole card. */
.s-programme_cards__link::after {
	content: "";
	position: absolute;
	inset: 0;
}

.s-programme_cards__link:focus-visible {
	outline: none;
}

.s-programme_cards__card:has(.s-programme_cards__link:focus-visible) {
	outline: 2px solid var(--c-text);
	outline-offset: 3px;
}

.bg-dark .s-programme_cards__card .btn--tertiary:hover .icon {
	background: var(--c-text);
	color: var(--c-light);
}

/* Previous / next buttons and progress bar (shown by section.js when the row scrolls). */
.s-programme_cards__controls {
	display: grid;
	gap: 16px;
}

.s-programme_cards__progress {
	position: relative;
	height: 2px;
	background: var(--c-line-2);
}

.s-programme_cards__progress span {
	position: absolute;
	inset-block: 0;
	left: calc(var(--pos, 0) * (1 - var(--size, 1)) * 100%);
	width: calc(var(--size, 1) * 100%);
	background: var(--c-muted);
}

.s-programme_cards__nav {
	display: flex;
	gap: 8px;
}

.s-programme_cards__button {
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 1px solid var(--c-line);
	border-radius: 50%;
	background: none;
	color: var(--c-muted);
	transition: color 0.2s, border-color 0.2s;
}

.s-programme_cards__button .icon {
	width: 21px;
	height: 21px;
	stroke-width: 2;
}

.s-programme_cards__button--prev .icon {
	transform: rotate(90deg);
}

.s-programme_cards__button--next .icon {
	transform: rotate(-90deg);
}

.s-programme_cards__button:not(:disabled):hover {
	border-color: currentColor;
	color: var(--c-text);
}

.bg-dark .s-programme_cards__button:not(:disabled),
.bg-dark .s-programme_cards__button:not(:disabled):hover {
	color: var(--c-light);
}

.s-programme_cards__button:disabled {
	opacity: 0.5;
	cursor: default;
}

/* Two large cards */
.s-programme_cards__inner--types .s-programme_cards__img {
	height: 300px;
}

/* Carousel on a photo */
.s-programme_cards__inner--carousel .s-programme_cards__heading {
	font-size: var(--t-title-l);
	line-height: var(--lh-title-l);
	text-transform: none;
	text-wrap: wrap; /* balance would break "Designer-Focused" at its hyphen */
}

.s-programme_cards__inner--carousel .s-programme_cards__intro {
	color: inherit;
}

.s-programme_cards__inner--carousel .s-programme_cards__track {
	grid-auto-columns: min(368px, 85%);
	margin-right: calc(-1 * var(--gutter));
}

.s-programme_cards__inner--carousel .s-programme_cards__card {
	background: var(--c-bg);
}

/* One wide card per row (SAORI "Frame 137"): photo, then title, duration / fee / venue, button and
   the "good to know" list, between thin rules. Beside each other from 768. */
.s-programme_cards__inner--row .s-programme_cards__track {
	grid-auto-flow: row;
	gap: 0;
	overflow: visible;
	border-bottom: 1px solid var(--c-line);
}

.s-programme_cards__inner--row .s-programme_cards__card {
	gap: 32px;
	min-height: 0;
	padding: 60px 0;
	border: 0;
	border-top: 1px solid var(--c-line);
}

.s-programme_cards__inner--row .s-programme_cards__img {
	height: auto;
	aspect-ratio: 368 / 276;
}

.s-programme_cards__body {
	display: grid;
	justify-items: start;
	gap: 32px;
	padding-block: 16px;
}

.s-programme_cards__inner--row .s-programme_cards__text {
	gap: 10px;
}

.s-programme_cards__inner--row .s-programme_cards__title {
	font-size: var(--t-title);
	line-height: var(--lh-title);
	text-transform: uppercase;
}

.s-programme_cards__facts {
	display: flex;
	flex-wrap: wrap;
	column-gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--t-sub);
	line-height: var(--lh-sub);
	font-weight: 500;
	color: var(--c-text-2);
}

.s-programme_cards__facts li {
	display: flex;
	align-items: center;
	gap: 8px;
	min-height: 40px;
}

.s-programme_cards__facts li:not(:last-child) {
	padding-right: 16px;
	border-right: 1px solid var(--c-line);
}

.s-programme_cards__facts .icon {
	width: 16px;
	height: 16px;
}

.s-programme_cards__list {
	display: grid;
	gap: 10px;
	margin: 0;
	padding-left: 24px;
	list-style: disc;
	color: var(--c-text-2);
}

@media (max-width: 767px) {
	.s-programme_cards__inner--row .s-programme_cards__img {
		aspect-ratio: 328 / 276;
	}

	.s-programme_cards__body {
		justify-items: stretch;
	}
}

@media (min-width: 768px) {
	.s-programme_cards__inner--row .s-programme_cards__card {
		display: grid;
		grid-template-columns: minmax(0, 368fr) minmax(0, 656fr);
		align-items: start;
		column-gap: clamp(32px, 8.75vw, 112px);
	}
}

@media (min-width: 768px) {
	.s-programme_cards__inner--related .s-programme_cards__track,
	.s-programme_cards__inner--types .s-programme_cards__track {
		grid-auto-flow: row;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		overflow: visible;
	}

	.s-programme_cards__inner--types .s-programme_cards__head {
		justify-items: center;
		text-align: center;
	}

	.s-programme_cards__inner--types .s-programme_cards__img {
		height: 250px;
	}

	/* 368 heading column, 16 gap, then cards to the window edge (the third one cut off at 1280). */
	.s-programme_cards__inner--carousel {
		grid-template-columns: minmax(0, 368fr) minmax(0, 752fr);
		align-items: center;
		gap: 16px;
	}

	.s-programme_cards__inner--carousel .s-programme_cards__track {
		margin-right: calc(-1 * max(var(--gutter), (100vw - var(--wrap)) / 2));
	}
}

@media (min-width: 1024px) {
	.s-programme_cards__inner--related .s-programme_cards__track {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}