/* Image and text rows: text 560 + photo 464×400 at 1280, 60px apart from the lines between rows
   (32px on programme pages and phones). Phones stack the photo above the text. */

.s-rows__inner {
	display: grid;
	gap: 32px;
}

.s-rows__head {
	display: grid;
	gap: 16px;
	max-width: 560px;
}

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

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

.s-rows__list {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--c-line);
}

.s-rows__row {
	display: grid;
	align-items: center;
	gap: 32px;
	padding-block: 32px;
	border-bottom: 1px solid var(--c-line);
}

.s-rows__media {
	order: -1;
}

.s-rows__img {
	width: 100%;
	aspect-ratio: 328 / 300;
	object-fit: cover;
}

@media (min-width: 768px) {
	.s-rows__inner {
		gap: 60px;
	}

	.s-rows__head--center {
		margin-inline: auto;
		text-align: center;
	}

	.s-rows__row {
		grid-template-columns: minmax(0, 560fr) minmax(0, 464fr);
		gap: clamp(32px, 8.75vw, 112px);
		padding-block: 60px;
	}

	.single-programme .s-rows__row {
		padding-block: 32px;
	}

	.s-rows__media {
		order: 0;
	}

	.s-rows__img {
		aspect-ratio: 464 / 400;
	}

	.s-rows__inner--alternate .s-rows__row:nth-child(even) {
		grid-template-columns: minmax(0, 464fr) minmax(0, 560fr);
	}

	.s-rows__inner--alternate .s-rows__row:nth-child(even) .s-rows__media {
		order: -1;
	}
}

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

.s-rows__eyebrow {
	margin-bottom: -8px;
	color: var(--c-muted);
}

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

.s-rows__body p + p {
	margin-top: 20px;
}

.bg-dark .s-rows__body,
.bg-dark .s-rows__intro,
.bg-dark .s-rows__eyebrow {
	color: inherit;
}

.s-rows__buttons {
	margin-top: 16px;
}

@media (max-width: 767px) {
	.s-rows__buttons {
		flex-direction: column;
		align-items: stretch;
		gap: 24px;
	}

	.s-rows__buttons .btn--tertiary {
		align-self: center;
	}
}

/* Large heading, as typed (Discover - Design "For Design Professionals"). */
.s-rows__head--l {
	max-width: 656px;
}

.s-rows__head--l .s-rows__heading {
	font-size: var(--t-title-l);
	line-height: var(--lh-title-l);
	text-transform: none;
}

/* Note under the rows: an audience icon and a line of muted text (Discover - Education). */
.s-rows__note {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	color: var(--c-muted);
	text-align: center;
}

.s-rows__note svg {
	flex: none;
	width: 48px;
	height: 48px;
}

@media (min-width: 768px) {
	.s-rows__note {
		flex-direction: row;
		text-align: left;
	}
}

/*
 * List and stripes (see fields.php). Each row is a summary (small text, title) and a panel (text,
 * buttons, photo). Phones: section.js turns the titles into buttons, one row open at a time, rows
 * between thin lines. Wider screens lay the summary and panel parts out on one grid.
 */
.s-rows__inner--list .s-rows__list,
.s-rows__inner--stripes .s-rows__list {
	position: relative;
	border-top: 0;
}

.s-rows__inner--list .s-rows__row,
.s-rows__inner--stripes .s-rows__row {
	align-items: start;
	padding-block: 16px;
	border-bottom: 0;
}

.s-rows__inner--list .s-rows__row + .s-rows__row,
.s-rows__inner--stripes .s-rows__row + .s-rows__row {
	border-top: 1px solid var(--c-line);
}

.s-rows__summary {
	position: relative;
	display: grid;
	gap: 8px;
}

.s-rows__inner--list .s-rows__title,
.s-rows__inner--stripes .s-rows__title {
	line-height: 1.15;
}

.s-rows__toggle {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 16px;
	width: 100%;
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	line-height: inherit;
	text-align: left;
	color: inherit;
}

/* The whole summary, small text included, opens the row. */
.s-rows__toggle::after {
	content: "";
	position: absolute;
	inset: 0;
}

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

.s-rows__toggle:focus-visible::after {
	outline: 2px solid var(--c-text);
	outline-offset: 4px;
}

.s-rows__toggle .icon {
	width: 24px;
	height: 24px;
	margin-top: 4px;
	stroke-width: 2;
	transition: transform 0.2s;
}

.s-rows__toggle[aria-expanded="true"] .icon {
	transform: rotate(180deg);
}

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

.s-rows__panel .s-rows__media {
	order: 0;
}

.s-rows__panel .s-rows__buttons {
	margin-top: 0;
}

.s-rows__panel .s-rows__buttons .btn--tertiary {
	align-self: flex-start;
}

/* Text only: small text in dark grey; the lines above and below the list run the full width of
   the screen (a 1px shadow clipped to the line's height, so nothing scrolls sideways). */
.s-rows__inner--list .s-rows__eyebrow {
	margin-bottom: 0;
	color: var(--c-text-2);
}

.s-rows__inner--list .s-rows__list {
	padding-block: 60px;
}

.s-rows__inner--list .s-rows__list::before,
.s-rows__inner--list .s-rows__list::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	height: 1px;
	background: var(--c-line);
	box-shadow: 0 0 0 100vmax var(--c-line);
	clip-path: inset(0 -100vmax);
}

.s-rows__inner--list .s-rows__list::before {
	top: 0;
}

.s-rows__inner--list .s-rows__list::after {
	bottom: 0;
}

/* Stripes: a beige heading band, then rows on alternating bands (phones: plain rows). */
.s-rows__inner--stripes {
	gap: 0;
}

.s-rows__inner--stripes .s-rows__head {
	max-width: none;
	padding-block: 40px;
	background: var(--c-beige);
	box-shadow: 0 0 0 100vmax var(--c-beige);
	clip-path: inset(0 -100vmax);
}

.s-rows__inner--stripes .s-rows__head > * {
	max-width: 656px;
}

.s-rows__inner--stripes .s-rows__list {
	padding-block: 60px;
}

.s-rows__inner--stripes .s-rows__eyebrow {
	margin-bottom: 0;
	font-size: var(--t-body-s);
	line-height: 1.17;
	font-weight: 600;
	color: var(--c-text-2);
}

/* A neutral well behind the photo, seen while it loads (and around transparent placeholders). */
.s-rows__inner--stripes .s-rows__media {
	background: var(--c-line-2);
}

.s-rows__inner--stripes .s-rows__img {
	aspect-ratio: 328 / 192;
}

@media (min-width: 768px) {
	.s-rows__inner--list .s-rows__list {
		padding-block: 0;
	}

	/* Title block and buttons on the left, text on the right; the empty 1fr rows centre both. */
	.s-rows__inner--list .s-rows__row {
		grid-template-columns: minmax(0, 656fr) minmax(0, 464fr);
		grid-template-rows: 1fr auto auto 1fr;
		grid-template-areas: ". text" "summary text" "buttons text" ". text";
		gap: 10px 16px;
		min-height: 256px;
		padding-block: 32px;
	}

	.s-rows__inner--list .s-rows__row + .s-rows__row {
		border-top: 0;
	}

	.s-rows__inner--list .s-rows__summary {
		grid-area: summary;
	}

	.s-rows__inner--list .s-rows__panel,
	.s-rows__inner--stripes .s-rows__summary,
	.s-rows__inner--stripes .s-rows__panel {
		display: contents;
	}

	.s-rows__inner--list .s-rows__body {
		grid-area: text;
		align-self: center;
	}

	.s-rows__inner--list .s-rows__buttons {
		grid-area: buttons;
	}

	.s-rows__inner--stripes .s-rows__head {
		padding-block: 60px;
	}

	.s-rows__inner--stripes .s-rows__list {
		padding-block: 0;
	}

	/* Photo 368 wide on the left; title, small text and text centred beside it. */
	.s-rows__inner--stripes .s-rows__row {
		grid-template-columns: minmax(0, 368fr) minmax(0, 656fr);
		grid-template-rows: 1fr auto auto auto auto 1fr;
		grid-template-areas: "media ." "media title" "media eyebrow" "media text" "media buttons" "media .";
		gap: 0 clamp(32px, 8.75vw, 112px);
		min-height: 300px;
		padding-block: 32px;
	}

	.s-rows__inner--stripes .s-rows__row + .s-rows__row {
		border-top: 0;
	}

	.s-rows__inner--stripes .s-rows__row:nth-child(even) {
		background: var(--c-beige);
		box-shadow: 0 0 0 100vmax var(--c-beige);
		clip-path: inset(0 -100vmax);
	}

	.s-rows__inner--stripes .s-rows__title {
		grid-area: title;
		margin-bottom: 32px;
	}

	.s-rows__inner--stripes .s-rows__eyebrow {
		grid-area: eyebrow;
		margin-bottom: 8px;
	}

	.s-rows__inner--stripes .s-rows__body {
		grid-area: text;
		max-width: 560px;
	}

	.s-rows__inner--stripes .s-rows__buttons {
		grid-area: buttons;
		margin-top: 16px;
	}

	.s-rows__inner--stripes .s-rows__media {
		grid-area: media;
		align-self: center;
	}

	.s-rows__inner--stripes .s-rows__img {
		aspect-ratio: 368 / 236;
	}
}