/* Speaker boxes — embeddable "highlighted / keynote speakers" block.
   1rem = 1px (project root font-size 6.25%). BEM. */

:root {
	/* Box background palette. Cycled 1→5 by render order: the content is
	   randomised per request, but the colour order stays fixed. Tune to the
	   brand palette as needed. */
	--bg-box-1: #1f6f78;
	--bg-box-2: #c4561e;
	--bg-box-3: #3a4a7a;
	--bg-box-4: #8a2f4a;
	--bg-box-5: #4f7a34;
}

.speaker-boxes-block {
	margin: 0 0 40rem;
}

.speaker-boxes {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(180rem, 1fr));
	gap: 16rem;
}
@media (max-width: 37.5em) {
	.speaker-boxes { grid-template-columns: repeat(auto-fill, minmax(140rem, 1fr)); gap: 10rem; }
}

.speaker-box {
	display: flex;
	border-radius: 6rem;
	overflow: hidden;
	color: white;
	background: var(--bg-box-1);
}
.speaker-box--bg-1 { background: var(--bg-box-1); }
.speaker-box--bg-2 { background: var(--bg-box-2); }
.speaker-box--bg-3 { background: var(--bg-box-3); }
.speaker-box--bg-4 { background: var(--bg-box-4); }
.speaker-box--bg-5 { background: var(--bg-box-5); }

/* Inner wrapper carries the column layout whether the box is a link (<a>) or a
   static (<div>) box, so one selector styles both. */
.speaker-box__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 8rem;
	padding: 22rem 12rem 18rem;
	width: 100%;
	color: inherit;
	text-decoration: none;
}
a.speaker-box__inner { cursor: pointer; transition: transform 0.12s ease; }
a.speaker-box__inner:hover,
a.speaker-box__inner:focus { transform: translateY(-2rem); }

.speaker-box__photo { display: block; }
.speaker-box__photo .speaker-avatar {
	width: 120rem;
	height: 120rem;
	border-radius: 50%;
	object-fit: cover;
	background: rgba(255, 255, 255, 0.15);
	display: block;
}
@media (max-width: 37.5em) {
	.speaker-box__photo .speaker-avatar { width: 90rem; height: 90rem; }
}

.speaker-box__name {
	font-weight: 700;
	font-size: 15rem;
	line-height: 120%;
}

.speaker-box__affiliation {
	font-size: 12rem;
	line-height: 130%;
	opacity: 0.9;
}