.mvak-related-articles-widget {
	width: 100%;
	box-sizing: border-box;
}

.mvak-related-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	column-gap: 24px;
	row-gap: 24px;
	align-items: stretch; /* equal-height cards within a row, by default CSS Grid behavior */
}

.mvak-related-card {
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	background: #ffffff;
	border-radius: 10px;
	overflow: hidden;
}

.mvak-related-card__link {
	display: flex;
	flex-direction: column;
	flex: 1;
	text-decoration: none;
	color: inherit;
}

/*
 * IMAGE CONTAINER - height is a pure function of its own width via
 * aspect-ratio (set by Elementor's Image Ratio control), never a fixed
 * pixel value. This is what makes "extra space under the image" actually
 * impossible rather than just unlikely: the box's height doesn't depend on
 * its content at all, so nothing the image (or anything wrapping it -
 * lazy-load spans, <picture> elements from image-optimization plugins,
 * etc.) does can ever change this container's own size.
 */
.mvak-related-card__image-wrap {
	display: block;
	position: relative;
	width: 100%;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	background: #eceef0;
	flex-shrink: 0; /* never compressed by a tall title area in the same flex column */
}

/*
 * The image is taken completely OUT of normal document flow and pinned to
 * fill the container exactly (position:absolute + inset:0). This is the
 * second half of the "impossible, not just unlikely" guarantee: because
 * the <img> no longer participates in flow layout at all, it is
 * structurally incapable of adding any height of its own - regardless of
 * its natural dimensions, load state, or any wrapper element another
 * plugin/theme might insert between .mvak-related-card__image-wrap and
 * the actual <img> tag (CSS position:absolute resolves against the
 * nearest POSITIONED ancestor, i.e. .mvak-related-card__image-wrap
 * itself, skipping over any unpositioned wrapper in between).
 *
 * !important is deliberate and necessary here: WordPress core and nearly
 * every theme/Elementor's own base styles ship a global image reset along
 * the lines of `img { max-width: 100%; height: auto; }`. That rule's
 * `height: auto` otherwise wins the moment the theme's stylesheet loads
 * after this one (or matches with equal specificity), which is exactly
 * what caused only the container to resize while the image itself stayed
 * at its own natural size. !important guarantees this plugin's fill rule
 * always wins regardless of theme/plugin load order.
 */
.mvak-related-card__image-wrap img {
	display: block !important;
	position: absolute !important;
	inset: 0 !important;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	object-fit: cover;
	transition: transform .3s ease;
}

/* Fallback for posts without a featured image - a clean neutral gradient
   placeholder instead of a broken image icon or empty gap. Same
   out-of-flow fill technique as the real image, for the same reason. */
.mvak-related-card__placeholder {
	display: block;
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, #eceef0 0%, #dfe2e5 100%);
}

/*
 * CONTENT/TITLE CONTAINER - a real sibling of the image container, not
 * incidental space after it. Owns Title Area Height exclusively (Auto by
 * default; a fixed px value only when explicitly chosen in Elementor).
 * flex-shrink:0 keeps a fixed height from ever being compressed.
 */
.mvak-related-card__content {
	display: flex;
	flex-direction: column;
	justify-content: center;
	box-sizing: border-box;
	flex-shrink: 0;
}

.mvak-related-card__title {
	margin: 0;
	padding: 0 16px 16px;
	font-size: 18px;
	font-weight: 600;
	line-height: 1.4;
	color: #1d2327;
	text-align: left;
}

.mvak-related-card__link:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.mvak-related-empty {
	text-align: center;
	color: #8c8f94;
	font-size: 15px;
	padding: 40px 0;
	grid-column: 1 / -1;
}

.mvak-related-pagination {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin-top: 32px;
}

.mvak-related-pagination a,
.mvak-related-pagination span.page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.4em;
	padding: 8px 14px;
	border: 1px solid #e2e4e7;
	border-radius: 6px;
	color: #1d2327;
	text-decoration: none;
	font-size: 14px;
	line-height: 1;
	transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

.mvak-related-pagination a:hover {
	background: #f0f0f1;
}

.mvak-related-pagination .current {
	background: #1d2327;
	color: #ffffff;
	border-color: #1d2327;
}

.mvak-related-pagination span.dots {
	border: none;
	color: #8c8f94;
}

.mvak-related-editor-notice {
	padding: 24px;
	background: #f0f0f1;
	border: 1px dashed #c3c4c7;
	border-radius: 8px;
	color: #50575e;
	font-size: 14px;
	text-align: center;
}