/* Group stylesheet for the partner widgets. */

/* Eight pastel washes the source design picks by eye for the logo wall. They are not tints of the
	brand: the tiles have to read as eight different companies, which a single hue cannot do. */
.alovesinh-partner-tile {
	--alv-partner-rose: #FFE4F0;
	--alv-partner-sky: #E0F7FA;
	--alv-partner-amber: #FFF3E0;
	--alv-partner-violet: #F3E5F5;
	--alv-partner-mint: #E8F5E9;
	--alv-partner-lemon: #FFFDE7;
	--alv-partner-blush: #FCE4EC;
	--alv-partner-lilac: #EDE7F6;

	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: var( --alv-sp-2 );
	padding: 16px 18px;
	border: var( --alv-bd-hairline ) solid var( --alv-c-border );
	border-radius: var( --alv-r-3 );
	font-size: var( --alv-fs-3 );
	font-weight: var( --alv-fw-bold );
	line-height: var( --alv-lh-tight );
	letter-spacing: 0.01em;
	color: var( --alv-c-ink );
	background: var( --alv-c-white );
	transition:
		transform var( --alv-dur-2 ) ease,
		border-color var( --alv-dur-2 ) ease,
		box-shadow var( --alv-dur-2 ) ease;
}

.alovesinh-partner-tile:hover {
	border-color: var( --alv-c-brand );
	box-shadow: var( --alv-sh-2 );
	transform: translateY( -2px );
}

/* The ring is drawn inside the disc rather than as a border so the 48px stays 48px, and the badge
	keeps its place in a row of eight whatever wash it carries. */
.alovesinh-partner-tile-badge {
	flex-shrink: 0;
	width: 48px;
	height: 48px;
	border-radius: var( --alv-r-circle );
	background: var( --alv-partner-badge, var( --alv-partner-sky ) );
	box-shadow:
		inset 0 0 0 2px color-mix( in srgb, var( --alv-c-white ) 60%, transparent ),
		0 2px 6px color-mix( in srgb, var( --alv-c-ink ) 8%, transparent );
}

.alovesinh-partner-tile-badge svg {
	display: block;
	width: 30px;
	height: 30px;
	filter: drop-shadow( 0 1px 2px color-mix( in srgb, var( --alv-c-ink ) 15%, transparent ) );
}

.alovesinh-partner-tile-tone-rose {
	--alv-partner-badge: var( --alv-partner-rose );
}

.alovesinh-partner-tile-tone-sky {
	--alv-partner-badge: var( --alv-partner-sky );
}

.alovesinh-partner-tile-tone-amber {
	--alv-partner-badge: var( --alv-partner-amber );
}

.alovesinh-partner-tile-tone-violet {
	--alv-partner-badge: var( --alv-partner-violet );
}

.alovesinh-partner-tile-tone-mint {
	--alv-partner-badge: var( --alv-partner-mint );
}

.alovesinh-partner-tile-tone-lemon {
	--alv-partner-badge: var( --alv-partner-lemon );
}

.alovesinh-partner-tile-tone-blush {
	--alv-partner-badge: var( --alv-partner-blush );
}

.alovesinh-partner-tile-tone-lilac {
	--alv-partner-badge: var( --alv-partner-lilac );
}

/* Two tiles to a row on a phone: at the full size the pair no longer fits, and the source design
	shrinks the tile rather than dropping to one column. */
@media ( max-width: 560px ) {

	.alovesinh-partner-tile {
		padding: 10px;
		font-size: var( --alv-fs-2 );
	}

	.alovesinh-partner-tile-badge {
		width: 40px;
		height: 40px;
	}

	.alovesinh-partner-tile-badge svg {
		width: 24px;
		height: 24px;
	}
}