/**
 * Related Content Styles
 *
 * @since 61.0.0
 */

.shgk-related-content {
	margin-top: 3rem;
	padding-top: 2rem;
	border-top: 1px solid #e5e7eb;
}

.shgk-related-content__section {
	margin-bottom: 2rem;
}

.shgk-related-content__heading {
	font-size: 1.25rem;
	font-weight: 700;
	margin-bottom: 1rem;
	padding-bottom: 0.5rem;
	border-bottom: 2px solid #2563eb;
	display: inline-block;
}

/* ============================================
 * Desktop: card grid (5 columns)
 * ============================================ */
.shgk-related-content__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 1rem;
}

@media (min-width: 768px) {
	.shgk-related-content__grid {
		grid-template-columns: repeat(5, 1fr);
	}

	.shgk-related-content__card {
		display: flex;
		flex-direction: column;
		border-radius: 8px;
		overflow: hidden;
		background: #fff;
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
		transition: box-shadow 0.2s ease, transform 0.2s ease;
		text-decoration: none;
		color: inherit;
	}

	.shgk-related-content__card:hover {
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
		transform: translateY(-2px);
	}

	.shgk-related-content__thumb {
		aspect-ratio: 16 / 9;
		overflow: hidden;
		background: #f3f4f6;
	}

	.shgk-related-content__thumb img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.shgk-related-content__no-thumb {
		width: 100%;
		height: 100%;
		background: linear-gradient(135deg, #e5e7eb, #d1d5db);
	}

	.shgk-related-content__info {
		padding: 0.75rem;
		flex: 1;
		display: flex;
		flex-direction: column;
		gap: 0.375rem;
	}

	.shgk-related-content__title {
		font-size: 0.8125rem;
		font-weight: 600;
		line-height: 1.4;
		margin: 0;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}
}

/* ============================================
 * Mobile: compact list style (like event-schools block)
 * ============================================ */
@media (max-width: 767px) {
	.shgk-related-content {
		margin-top: 2rem;
		padding-top: 1.5rem;
	}

	.shgk-related-content__heading {
		font-size: 1rem;
		margin-bottom: 0.75rem;
	}

	.shgk-related-content__grid {
		display: flex;
		flex-direction: column;
		gap: 0;
	}

	.shgk-related-content__card {
		display: flex;
		flex-direction: row;
		align-items: center;
		background: #fff;
		border-bottom: 1px solid #f0f0f1;
		text-decoration: none;
		color: inherit;
		padding: 0.5rem 0;
		transition: background 0.15s ease;
	}

	.shgk-related-content__card:first-child {
		border-top: 1px solid #f0f0f1;
	}

	.shgk-related-content__card:hover {
		background: #fafbfc;
	}

	.shgk-related-content__thumb {
		flex-shrink: 0;
		width: 64px;
		height: 44px;
		overflow: hidden;
		background: #f3f4f6;
		border-radius: 4px;
	}

	.shgk-related-content__thumb img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.shgk-related-content__no-thumb {
		width: 100%;
		height: 100%;
		background: linear-gradient(135deg, #e5e7eb, #d1d5db);
	}

	.shgk-related-content__info {
		flex: 1;
		min-width: 0;
		padding: 0 0.5rem;
		display: flex;
		flex-direction: column;
		justify-content: center;
		gap: 0.25rem;
	}

	.shgk-related-content__type-badge {
		order: -1;
	}

	.shgk-related-content__title {
		font-size: 0.8125rem;
		font-weight: 500;
		line-height: 1.4;
		margin: 0;
		display: block;
	}
}

/* ============================================
 * Type badges (shared)
 * ============================================ */
.shgk-related-content__type-badge {
	display: inline-block;
	font-size: 0.625rem;
	font-weight: 600;
	padding: 0.125rem 0.5rem;
	border-radius: 9999px;
	letter-spacing: 0.025em;
	width: fit-content;
	white-space: nowrap;
}

.shgk-related-type--event .shgk-related-content__type-badge,
.shgk-related-content__type-badge.shgk-related-type--event {
	background: #dbeafe;
	color: #1e40af;
}

.shgk-related-type--school .shgk-related-content__type-badge,
.shgk-related-content__type-badge.shgk-related-type--school {
	background: #dcfce7;
	color: #166534;
}

.shgk-related-type--article .shgk-related-content__type-badge,
.shgk-related-content__type-badge.shgk-related-type--article {
	background: #fef3c7;
	color: #92400e;
}

.shgk-related-type--video .shgk-related-content__type-badge,
.shgk-related-content__type-badge.shgk-related-type--video {
	background: #fce7f3;
	color: #9d174d;
}

/* ============================================
 * Reduced motion
 * ============================================ */
@media (prefers-reduced-motion: reduce) {
	.shgk-related-content__card {
		transition: none;
	}
}