/* Upcoming sessions. Desktop rows: date (176) · title · Register or arrow button. Phones: the date
   sits above the title. Grouped lists start with a full-width beige heading band. */

.s-sessions__head {
	text-align: center;
}

.s-sessions__head--band {
	padding-block: 60px;
	background: var(--c-beige);
	color: var(--c-text);
}

.s-sessions__heading,
.s-sessions__intro {
	max-width: 560px;
	margin-inline: auto;
}

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

.s-sessions__intro {
	margin-top: 16px;
	color: var(--c-text-2);
}

.s-sessions__head + .s-sessions__body {
	margin-top: 60px;
}

.s-sessions__head + .s-sessions__body--one {
	margin-top: 40px;
}

.s-sessions__group + .s-sessions__group {
	margin-top: 56px;
	padding-top: 56px;
	border-top: 1px solid var(--c-line);
}

.s-sessions__type {
	margin-bottom: 32px;
}

.s-sessions__list {
	display: grid;
	gap: 32px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.s-sessions__row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	grid-template-areas:
		"date date"
		"title action";
	align-items: center;
	gap: 8px 16px;
}

.s-sessions__date {
	grid-area: date;
	font-size: var(--t-sub);
	line-height: var(--lh-sub);
	font-weight: 500;
	text-transform: uppercase;
	color: var(--c-text-2);
}

.s-sessions__title {
	grid-area: title;
	font-family: var(--f-display);
	font-size: var(--t-title-s);
	line-height: var(--lh-title-s);
	font-weight: 500;
}

.s-sessions__status {
	margin-left: 8px;
	font-family: var(--f-body);
	font-size: var(--t-sub);
	line-height: var(--lh-sub);
	font-weight: 500;
	color: var(--c-accent);
	white-space: nowrap;
}

.s-sessions__register,
.s-sessions__go {
	grid-area: action;
}

.s-sessions__register {
	min-width: 0;
	padding: 8px;
}

.s-sessions__go {
	display: grid;
	place-items: center;
	width: 70px;
	height: 32px;
	border: 1px solid var(--c-line);
	border-radius: 8px;
	color: var(--c-text);
	transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}

.s-sessions__go:hover {
	border-color: var(--c-text);
	background: var(--c-text);
	color: var(--c-light);
}

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

.s-sessions__empty {
	display: grid;
	justify-items: start;
	gap: 16px;
	color: var(--c-text-2);
}

.s-sessions__body--one .s-sessions__empty {
	justify-items: center;
	text-align: center;
}

@media (min-width: 768px) {
	.s-sessions__head + .s-sessions__body--one {
		margin-top: 60px;
	}

	.s-sessions__row {
		grid-template-columns: 176px minmax(0, 1fr) auto;
		grid-template-areas: "date title action";
	}

	.s-sessions__date {
		padding-left: 16px;
		font-size: var(--t-body);
		line-height: var(--lh-body);
		font-weight: 400;
	}

	.s-sessions__register {
		min-width: 176px;
		padding: 8px 16px;
	}

	.s-sessions__go {
		width: 80px;
	}
}