.igf-grid {
	display: grid;
	width: 100%;
	box-sizing: border-box;
}

.igf-grid,
.igf-grid * {
	box-sizing: border-box;
}

.igf-item {
	position: relative;
	display: block;
	overflow: hidden;
	background: #eee;
	text-decoration: none;
	/* height is set per-instance (default 415px) via inline <style> from the shortcode */
}

/*
 * Many themes and Elementor inject a global `img { height: auto; }` reset
 * (sometimes with !important) to keep images responsive. These rules are
 * forced to win regardless of where they land in the cascade. Every tile
 * has a fixed height (see .igf-item above), so object-fit: cover crops
 * each image to fill it without distortion.
 *
 * Scoped to a DIRECT child `<img>` of .igf-item, not just any descendant:
 * WordPress auto-converts emoji in the caption text into small
 * `<img class="emoji">` tags (wp_staticize_emoji) nested inside
 * .igf-overlay-caption. A plain `.igf-item img` selector matches those too
 * and blows each one up to fill the whole tile — the `:not(.emoji)` below
 * is a second guard against that regardless of DOM nesting.
 */
.igf-grid .igf-item > img:not(.emoji) {
	width: 100% !important;
	max-width: 100% !important;
	height: 100% !important;
	max-height: none !important;
	object-fit: cover !important;
	object-position: center !important;
	display: block !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	transition: transform 0.35s ease;
}

.igf-item:hover > img {
	transform: scale(1.03);
}

/*
 * Explicitly re-affirm WordPress's own correct inline sizing for emoji
 * images, in case a theme/plugin has otherwise disabled or overridden it.
 */
.igf-overlay-caption img.emoji {
	width: 1em !important;
	height: 1em !important;
	max-width: 1em !important;
	max-height: 1em !important;
	display: inline !important;
	margin: 0 0.05em 0 0.1em !important;
	padding: 0 !important;
	border: 0 !important;
	vertical-align: -0.1em !important;
	object-fit: contain !important;
}

.igf-badge {
	position: absolute;
	top: 10px;
	right: 10px;
	color: #fff;
	font-size: 18px;
	line-height: 1;
	filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6));
	z-index: 2;
}

/*
 * font-size is set !important on .igf-overlay and every child below: without
 * it, theme/Elementor global typography rules can win the cascade and blow
 * the whole caption up to some much larger inherited size. Ordinary Latin
 * text just overflows off-tile when that happens, but emoji glyphs render
 * as huge, jarring shapes — that's the "giant emoji" bug this guards against.
 */
.igf-overlay {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 16px;
	background: rgba(0, 0, 0, 0.6);
	opacity: 0;
	transition: opacity 0.25s ease;
	text-align: center;
	box-sizing: border-box;
	font-size: 16px !important;
	line-height: 1.4 !important;
}

.igf-item:hover .igf-overlay,
.igf-item:focus .igf-overlay {
	opacity: 1;
}

.igf-overlay-stats {
	display: flex;
	gap: 18px;
}

.igf-stat {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	color: #fff !important;
	font-weight: 600 !important;
	font-size: 15px !important;
	line-height: 1.4 !important;
}

.igf-stat .dashicons {
	font-size: 18px !important;
	width: 18px !important;
	height: 18px !important;
}

/*
 * Plain overflow-hidden truncation, not -webkit-line-clamp: some browsers
 * mis-render emoji inside a line-clamp box, blowing a single glyph up to
 * fill most of the tile. wp_trim_words() already keeps captions short
 * server-side, so this max-height is just a safety net.
 */
.igf-overlay-caption {
	color: #fff !important;
	font-size: 13px !important;
	font-weight: 400 !important;
	line-height: 1.4 !important;
	max-height: 4.2em;
	overflow: hidden;
}

.igf-admin-notice {
	padding: 14px 16px;
	background: #fff8e5;
	border: 1px solid #e0c04a;
	border-radius: 4px;
	color: #664d03;
	font-size: 14px;
}

@media (prefers-reduced-motion: reduce) {
	.igf-item img,
	.igf-overlay {
		transition: none;
	}
}