/* =====================================================================
   Home Page cards — full 300 x 445 cover + black grid background
   -----------------------------------------------------------------------
   Loaded only on the Home Page (body.gzfc-home-cover, inc/card-cover.php).
   Scope: the main card grid (#gzf-post-grid). Slider, Latest Releases strip,
   sidebar, single posts and archives are not matched.
   ===================================================================== */

/* 1) Black background behind the whole card grid ---------------------- */
body.gzfc-home-cover #gzf-post-grid {
	box-sizing: border-box;
	background: #000;
	border-radius: 10px;
	/* room for the Card Background Panel outline so it sits on the black */
	padding: calc(var(--gzfc-card-panel-size, 8px) + 8px);
}

/* Visual separation between a card and the black behind it (only when the
   Card Background Panel outline is off; with it on, the outline does this). */
body.gzfc-home-cover:not(.gzfc-card-panel) #gzf-post-grid .gzf-card {
	outline: 1px solid rgba(255, 255, 255, .14);
	outline-offset: 0;
}

/* 2) Cover image box: exact 300:445 portrait, nothing cropped ---------- */
body.gzfc-home-cover #gzf-post-grid .gzf-card--grid .gzf-card-media {
	position: relative;
	display: block;
	width: 100%;
	height: auto;
	min-height: 0;
	max-height: none;
	padding: 0;
	aspect-ratio: 300 / 445;
	overflow: hidden;
	line-height: 0;
	background: #000;
}

/* contain = the whole cover is always visible (never cut top/bottom, never
   stretched). With a true 300:445 image it fills the box edge to edge. */
body.gzfc-home-cover #gzf-post-grid .gzf-card--grid .gzf-card-media img,
body.gzfc-home-cover #gzf-post-grid .gzf-card--grid .gzf-card-media .gzf-card-placeholder {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: contain;
	object-position: center;
	image-rendering: auto;
}

/* 3) Never let the browser fall back to a low-quality scaler ----------- */
body.gzfc-home-cover #gzf-post-grid .gzf-card--grid .gzf-card-media img {
	image-rendering: auto;
	-ms-interpolation-mode: bicubic;
}
