/* "Who was in the room" logo tiles: rounded navy tiles, logos centred in white. */
.tce-logos {
	--tce-gap: 16px;
	--tcel-tile: #24324f;
	--tcel-tile-hover: #2a3a5b;
	--tcel-stroke: rgba(255, 255, 255, 0.14);
	--tcel-stroke-hover: rgba(255, 255, 255, 0.3);
}

.tce-logo,
.tce-logo > a {
	height: 75px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.tce-logo {
	padding: 14px 18px;
	box-sizing: border-box;
	border: 1px solid var(--tcel-stroke);
	border-radius: 14px;
	background: var(--tcel-tile);
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

.tce-logo:hover {
	border-color: var(--tcel-stroke-hover);
	background: var(--tcel-tile-hover);
}

.tce-logo > a {
	width: 100%;
	height: 100%;
}

.tce-logo img {
	display: block;
	width: auto;
	height: auto;
	max-width: 78%;
	max-height: 40px;
	object-fit: contain;
	transition: opacity 0.2s ease, filter 0.2s ease;
}

/* All white: any logo colour becomes white (needs a transparent background). */
.tce-logos--white .tce-logo img {
	filter: brightness(0) invert(1);
	opacity: 0.88;
}

.tce-logos--white .tce-logo:hover img {
	opacity: 1;
}

/* Grey until hovered. */
.tce-logos--mono .tce-logo img {
	filter: grayscale(1);
	opacity: 0.8;
}

.tce-logos--mono .tce-logo:hover img {
	filter: none;
	opacity: 1;
}

.tce-logo__name {
	padding: 0 8px;
	text-align: center;
	font-weight: 600;
	font-size: 17px;
	line-height: 1.25;
	color: #fff;
}

/* White tiles */
.tce-logos--light {
	--tcel-tile: #fff;
	--tcel-tile-hover: #fff;
	--tcel-stroke: var(--tce-line);
	--tcel-stroke-hover: rgba(7, 21, 68, 0.25);
}

.tce-logos--light .tce-logo:hover {
	box-shadow: 0 8px 20px rgba(7, 21, 68, 0.08);
}

.tce-logos--light .tce-logo__name {
	color: var(--tce-ink);
}

@media (max-width: 1024px) {
	.tce-logos {
		--tce-gap: 12px;
	}
}

@media (max-width: 767px) {
	.tce-logos {
		--tce-gap: 10px;
	}

	.tce-logo,
	.tce-logo > a {
		height: 64px;
	}

	.tce-logo {
		padding: 10px 12px;
		border-radius: 12px;
	}

	.tce-logo img {
		max-height: 32px;
	}
}