/* Extracted from pages/blog.php's inline <style> block, plus static
   inline styles converted during the Bootstrap migration. */

.zvyrazneny {
	height: 140px !important;
}

@media (max-width: 768px) {
	.zvyrazneny {
		height: auto !important;
	}
}

.blog-bg {
	background-color: #eee;
}

#gallery {
	overflow: hidden;
	padding: 30px 0px 0px 0px;
}

/* min-height (a floor), not height - pages/blog.php used to also force every .items to
   an exact matching PIXEL height via JS ($('#smart-blog .items').css('height', ...),
   measured from whichever card the loop happened to measure last, not a real max). Real
   Bootstrap .row (#smart-blog) already stretches every .items in the same flex row to
   equal height natively (align-items:stretch, the flex default), so that JS was both
   redundant AND actively harmful: on any page load where a shorter card was measured
   last, every OTHER (taller-content) card got force-squeezed down to that undersized
   fixed height, and its .showMore button (position:relative;top:30px, see below) then
   rendered outside the card into the page's gray gutter. JS call removed from
   pages/blog.php; this min-height stays only as a floor for the shortest cards. */
#smart-blog .items {
	min-height: 530px;
}

#smart-blog .items .texty {
	float: none;
	min-height: 0;
	width: 100%;
	box-sizing: border-box;
}

#smart-blog .showMore {
	/* Was top:30px (position:relative, from the markup's own Bootstrap .position-relative
	   utility) - a relative offset shifts the element visually without growing its
	   container's auto-height, so the button rendered outside .texty's white background
	   into the page's gray gutter below. margin-top achieves the same visual gap while
	   actually reserving the space in normal flow, so .texty (and the flex-stretched
	   .items row height) grow to contain it correctly. */
	margin-top: 30px;
	font-size: 14px;
	max-width: 140px;
	color: var(--color-text);
}