/* =====================================================================
   Related Games (single post, below the content)
   -----------------------------------------------------------------------
   Markup: inc/game-cpt-integration.php -> gzfc_template_related_games_or_posts()

   Scope: everything below is prefixed with .gzfc-related, so Home Page
   cards, archives, widgets and the Latest Releases strip are unaffected.

   Column count comes from three CSS variables printed inline by PHP
   (--gzfc-rel-cols / -tablet / -mobile) based on the "related count"
   setting, so a small count never leaves empty columns.
   ===================================================================== */

.gzfc-related .gzfc-related-grid {
	display: grid;
	grid-template-columns: repeat(var(--gzfc-rel-cols, 4), minmax(0, 1fr));
	gap: 20px;
	align-items: stretch;      /* equal card height per row */
	grid-auto-rows: auto;
	margin: 0;
	padding: 0;
}

/* Card = column: image on top, text below, same height across the row. */
.gzfc-related .gzfc-related-grid > .gzf-card {
	display: flex;
	flex-direction: column;
	width: auto;
	max-width: none;
	min-width: 0;
	height: 100%;
	margin: 0;
}

/* Image: fixed proportion, never taller than its ratio, no gap under it.
   :where() keeps this at zero specificity, so the framework's own
   data-ratio rules still win whenever they exist. */
:where(.gzfc-related .gzfc-related-grid .gzf-card-media) {
	aspect-ratio: 4 / 3;
}
.gzfc-related .gzfc-related-grid .gzf-card-media {
	display: block;
	flex: 0 0 auto;
	position: relative;
	overflow: hidden;
	line-height: 0;
}
.gzfc-related .gzfc-related-grid .gzf-card-media img,
.gzfc-related .gzfc-related-grid .gzf-card-placeholder {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Text area: fills the remaining height, no forced extra space. */
.gzfc-related .gzfc-related-grid .gzf-card-body {
	flex: 1 1 auto;
	min-width: 0;
}

/* Title: at most 2 lines, so long names cannot stretch the card. */
.gzfc-related .gzfc-related-grid .gzf-card-title {
	margin-top: 0;
	overflow-wrap: anywhere;
}
.gzfc-related .gzfc-related-grid .gzf-card-title a {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
}

/* Excerpt: at most 2 lines, no extra margins. */
.gzfc-related .gzfc-related-grid .gzf-card-excerpt {
	margin: 0;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
	font-size: .85rem;
	line-height: 1.45;
}
.gzfc-related .gzfc-related-grid .gzf-card-excerpt p {
	margin: 0;
}
.gzfc-related .gzfc-related-grid .gzf-card-excerpt:empty {
	display: none;
}

/* Tablet */
@media (max-width: 1024px) {
	.gzfc-related .gzfc-related-grid {
		grid-template-columns: repeat(var(--gzfc-rel-cols-tablet, 3), minmax(0, 1fr));
		gap: 16px;
	}
}

/* Mobile: 2 columns */
@media (max-width: 640px) {
	.gzfc-related .gzfc-related-grid {
		grid-template-columns: repeat(var(--gzfc-rel-cols-mobile, 2), minmax(0, 1fr));
		gap: 12px;
	}
	.gzfc-related .gzfc-related-grid .gzf-card-title {
		font-size: .92rem;
	}
	.gzfc-related .gzfc-related-grid .gzf-card-excerpt {
		font-size: .8rem;
	}
}

/* Very small phones: 1 column */
@media (max-width: 340px) {
	.gzfc-related .gzfc-related-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}