.program {
	container-type: inline-size;
	container-name: program;
}

.program__heading {
	margin-bottom: var(--gap-xs4);
}

.program__list {
	gap: var(--gap-xs4);
	padding: var(--gap-xs4);
}

.program-item {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 220px;
	column-gap: var(--gap-xs2);
	padding: var(--gap-xs6);
}

.program-item__heading-row {
	flex-wrap: wrap;
}

.program-item__time-range.pill {
	font-size: var(--text-base);
	font-weight: 500;
	padding: 4px 14px;
	color: var(--primary-dark);
	white-space: nowrap;
}

.program-item__subtitle {
	font-weight: 500;
}

.program-item__description.program-item__description.program-item__description {
	color: var(--base);
	max-width: 100%;
	font-size: var(--text--m);
}

.program-item__speakers {
	grid-column: 2;
	align-items: flex-end;
}

.program-item__speaker {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	text-align: left;
	gap: 4px;
	width: 180px;
}

.program-item__speaker-avatar {
	width: 130px;
	height: 130px;
	border-radius: var(--radius-s);
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 4px;
	flex-shrink: 0;
}

.program-item__speaker-avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.program-item__speaker-name {
	font-size: var(--text-base);
}

.program-item__speaker-title {
	font-size: var(--h6);
}

/*
 * Container query (not viewport media query): the program block's
 * available width depends on where it's embedded (narrow post-content
 * column, full-width section, ...), not on the viewport, so the layout
 * needs to react to its own rendered width.
 */
@container program (max-width: 480px) {
	.program__list {
		padding: var(--gap-xs6);
		gap: var(--gap-xs5);
	}

	.program-item {
		grid-template-columns: minmax(0, 1fr) !important;
		row-gap: var(--gap-xs6);
	}

	.program-item__heading-row {
		flex-direction: column !important;
		align-items: flex-start !important;
		gap: var(--gap-xs8);
	}

	.program-item__speakers {
		grid-column: 1 !important;
		align-items: flex-start;
	}

	.program-item__speaker {
		align-items: flex-start;
	}
}