/**
 * ==================================================
 * Hub Child Related Hubs
 * ==================================================
 *
 * Shared related-content component for:
 *
 * - Popular Artist Hub Child
 * - Theme Hub Child
 * - Genre Hub Child
 *
 * Color is inherited automatically from the
 * Parent Hub through --page-accent.
 */


/**
 * ==================================================
 * Section
 * ==================================================
 */

.hub-child-related-hubs {
	margin-top: 30px;
	margin-bottom: 30px;
}


/**
 * ==================================================
 * Header
 * ==================================================
 */

.hub-child-related-hubs__header {
	margin-bottom: 15px;
}


.hub-child-related-hubs__title {
	margin: 0;
	padding-bottom: 10px;

	border-bottom: 2px solid var(
		--page-accent,
		var(--lyrics71-color-primary)
	);

	font-size: 22px;
	line-height: 1.4;
	font-weight: 600;

	color: var(--lyrics71-color-text);
}


.hub-child-related-hubs__title i {
	margin-right: 8px;

	color: var(
		--page-accent,
		var(--lyrics71-color-primary)
	);
}


/**
 * ==================================================
 * Grid
 * ==================================================
 */

.hub-child-related-hubs__grid {
	display: grid;

	grid-template-columns: repeat(2, minmax(0, 1fr));

	gap: 12px;
}


/**
 * ==================================================
 * Item
 * ==================================================
 */

.hub-child-related-hubs__item {
	margin: 0;
	padding: 0;
}


/**
 * ==================================================
 * Card Link
 * ==================================================
 */

.hub-child-related-hubs__link {
	position: relative;

	display: flex;
	align-items: center;

	min-height: 92px;

	padding: 10px;

	background: var(
		--lyrics71-color-background,
		#fff
	);

	border: 1px solid var(
		--lyrics71-color-border,
		#eee
	);

	border-radius: 6px;

	color: var(--lyrics71-color-text);

	text-decoration: none;

	box-shadow: 0 2px 8px rgba(0, 0, 0, .04);

	transition:
		transform .2s ease,
		box-shadow .2s ease,
		border-color .2s ease;
}


.hub-child-related-hubs__link:hover {
	transform: translateY(-2px);

	border-color: var(
		--page-accent,
		var(--lyrics71-color-primary)
	);

	box-shadow: 0 6px 16px rgba(0, 0, 0, .08);

	color: var(--lyrics71-color-text);

	text-decoration: none;
}


/**
 * ==================================================
 * Image
 * ==================================================
 */

.hub-child-related-hubs__image {
	flex: 0 0 72px;

	width: 72px;
	height: 72px;

	overflow: hidden;

	border-radius: 5px;

	background: #f3f3f3;
}


.hub-child-related-hubs__image img {
	display: block;

	width: 100%;
	height: 100%;

	object-fit: cover;
}


/**
 * ==================================================
 * Placeholder
 * ==================================================
 */

.hub-child-related-hubs__placeholder {
	display: flex;
	align-items: center;
	justify-content: center;

	width: 100%;
	height: 100%;

	color: var(
		--page-accent,
		var(--lyrics71-color-primary)
	);

	font-size: 24px;
}


/**
 * ==================================================
 * Content
 * ==================================================
 */

.hub-child-related-hubs__content {
	min-width: 0;

	flex: 1;

	padding: 0 10px;
}


.hub-child-related-hubs__name {
	margin: 0;

	font-size: 15px;
	line-height: 1.35;
	font-weight: 700;

	color: var(--lyrics71-color-text);
}


.hub-child-related-hubs__name-bn {
	margin-top: 2px;

	font-size: 13px;
	line-height: 1.35;

	color: var(--lyrics71-color-muted);
}


/**
 * ==================================================
 * Meta
 * ==================================================
 */

.hub-child-related-hubs__meta {
	display: flex;
	flex-wrap: wrap;

	gap: 8px;

	margin-top: 7px;

	font-size: 11px;
	line-height: 1.3;

	color: var(--lyrics71-color-muted);
}


.hub-child-related-hubs__meta span {
	display: inline-flex;
	align-items: center;

	gap: 4px;
}


.hub-child-related-hubs__meta i {
	color: var(
		--page-accent,
		var(--lyrics71-color-primary)
	);
}


/**
 * ==================================================
 * Arrow
 * ==================================================
 */

.hub-child-related-hubs__arrow {
	flex: 0 0 auto;

	color: var(
		--page-accent,
		var(--lyrics71-color-primary)
	);

	font-size: 12px;

	transition: transform .2s ease;
}


.hub-child-related-hubs__link:hover
.hub-child-related-hubs__arrow {
	transform: translateX(3px);
}


/**
 * ==================================================
 * View All
 * ==================================================
 */

.hub-child-related-hubs__view-all {
	margin-top: 20px;
    display: flex;
	line-height: 1.4;
	justify-content: end;
}


.hub-child-related-hubs__view-all a {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	margin: 0;
	padding: 0;
	color: var(
		--page-accent,
		var(--lyrics71-color-primary)
	);
	font-size: 13px;
	line-height: 1.4;
	font-weight: 600;
	text-decoration: none;
	transition:
		color .2s ease,
		transform .2s ease;
}


.hub-child-related-hubs__view-all a:hover {
	color: var(
		--page-accent,
		var(--lyrics71-color-primary)
	);

	text-decoration: none;

	transform: translateX(3px);
}


.hub-child-related-hubs__view-all a span {
	font-size: 12px;
}


/**
 * ==================================================
 * Responsive
 * ==================================================
 */

@media (max-width: 767.98px) {

	.hub-child-related-hubs__grid {
		grid-template-columns: 1fr;
	}

}


@media (max-width: 575px) {

	.hub-child-related-hubs__title {
		font-size: 20px;
	}


	.hub-child-related-hubs__link {
		min-height: 82px;
	}


	.hub-child-related-hubs__image {
		flex: 0 0 62px;

		width: 62px;
		height: 62px;
	}

}