/* singulary-ui/related-cards: reuses the listing card language (cover image, bottom scrim, glow title, hover lift). */

.fyh-relc {
	margin-top: 1.4rem;
}

.fyh-relc__heading {
	margin: 0 0 1rem;
	font-size: clamp( 1.15rem, 1.8vw, 1.4rem );
	font-weight: 600;
	letter-spacing: -.02em;
	color: var(--wp--preset--color--ink);
}

.fyh-relc__row {
	display: flex;
	gap: .9rem;
	margin: 0;
	padding: .25rem .25rem .9rem;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

.fyh-relc__row::-webkit-scrollbar {
	display: none;
}

.fyh-relc__card {
	position: relative;
	flex: 0 0 clamp( 13rem, 38vw, 16rem );
	aspect-ratio: 16 / 10;
	overflow: hidden;
	border-radius: var(--wp--custom--radius--md, 16px);
	background: var(--wp--preset--color--ink);
	box-shadow: 0 10px 26px -18px rgba( 14, 14, 14, .45 );
	scroll-snap-align: start;
	text-decoration: none;
	transition: transform .2s ease, box-shadow .2s ease;
}

.fyh-relc__card:hover {
	transform: translateY( -2px );
	box-shadow: 0 16px 34px -18px rgba( 14, 14, 14, .55 );
}

.fyh-relc__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.fyh-relc__card::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient( 180deg, color-mix( in srgb, var(--wp--preset--color--ink-deep) 0%, transparent ) 35%, color-mix( in srgb, var(--wp--preset--color--ink-deep) 78%, transparent ) 100% );
}

.fyh-relc__card--plain::after {
	background: radial-gradient( circle at 80% 0%, rgba( 255, 255, 255, .1 ) 0%, transparent 55% );
}

.fyh-relc__title {
	position: absolute;
	left: .9rem;
	right: .9rem;
	bottom: .75rem;
	z-index: 1;
	margin: 0;
	color: #fff;
	font-size: .95rem;
	font-weight: 650;
	line-height: 1.3;
	filter: var(--wp--custom--glow--soft);
}