/*
 * Frontpage layout variants (Customizer -> Frontpage Sections).
 *
 * Rules are scoped per section via the layout class printed by
 * template-parts/index-main-slider.php and index-featured-news.php:
 *   .magzinos-slider-layout-{layout}, .magzinos-featured-layout-{layout}
 * Existing .vrsn-five overlay styles stay untouched on purpose — the variants
 * below only add what the presets do not cover.
 */

/* ---------------------------------------------------------------
   Compact list card (side lists + featured list rows)
   ------------------------------------------------------------- */
.magzinos-card-list {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-bottom: 0.9rem;
}

.magzinos-card-list .img-block {
	flex: 0 0 90px;
	display: block;
}

.magzinos-card-list .img-block img {
	border-radius: 4px;
	object-fit: cover;
}

.magzinos-card-list-body {
	flex: 1 1 auto;
	min-width: 0;
}

.magzinos-card-list-body .entry-header {
	margin-bottom: 0.25rem;
}

.magzinos-card-list-body .entry-title {
	margin: 0;
	font-size: 1rem;
	line-height: 1.3;
}

.magzinos-card-list-body .entry-title a {
	color: #1a1e24;
}

.magzinos-card-list-body .entry-title a:hover {
	color: #d40004;
}

.magzinos-card-list-body .entry-meta {
	font-size: 0.8125rem;
	color: #6c757d;
}

.magzinos-card-list-body .posted-on i {
	margin-right: 0.25rem;
}

/* ---------------------------------------------------------------
   Hero card (1 large overlay card in hero/mosaic variants)
   ------------------------------------------------------------- */
.magzinos-card-hero .entry-title {
	font-size: 1.75rem;
}

.magzinos-card-hero figure,
.magzinos-card-hero figure img {
	height: 100%;
}

.magzinos-card-hero .img-block img {
	height: 420px;
	object-fit: cover;
}

/* ---------------------------------------------------------------
   Mosaic variant — the right column grid cards should stretch evenly
   ------------------------------------------------------------- */
.magzinos-slider-layout-grid-mosaic-5 .col-lg-6 .overlay-news-area .img-block img,
.magzinos-slider-layout-grid-mosaic-5 .magzinos-card-hero .img-block img {
	width: 100%;
}

/* ---------------------------------------------------------------
   Full width and wide slider variants — taller image for balance
   ------------------------------------------------------------- */
.magzinos-slider-layout-slider-full .overlay-news-area .img-block img,
.magzinos-slider-layout-slider-8-list-4 .overlay-news-area .img-block img,
.magzinos-slider-layout-slider-8-hero-1 .overlay-news-area .img-block img {
	width: 100%;
}

/* ---------------------------------------------------------------
   Featured: hero + side list keeps side column tight
   ------------------------------------------------------------- */
.magzinos-featured-layout-hero-1-4 .magzinos-card-list .img-block {
	flex-basis: 110px;
}

/* ---------------------------------------------------------------
   Featured carousel — consistent card spacing inside owl
   ------------------------------------------------------------- */
.magzinos-featured-carousel .item {
	padding: 0 4px;
}

.magzinos-featured-carousel .owl-nav {
	text-align: center;
	margin-top: 0.5rem;
}

.magzinos-featured-carousel .owl-nav button {
	margin: 0 0.25rem;
	font-size: 1.25rem;
}

/* ---------------------------------------------------------------
   Small screens: list cards stay compact, hero overlay stays usable
   ------------------------------------------------------------- */
@media (max-width: 991px) {
	.magzinos-card-hero .img-block img {
		height: auto;
	}

	.magzinos-card-list {
		margin-bottom: 1.25rem;
	}
}

/* ---------------------------------------------------------------
   Blog list variants (Customizer -> Layout Settings -> Posts Layout)
   Scoped via the class index.php prints on the section:
   .blog-list-view-post.magzinos-blog-layout-{layout}
   grid-3 needs no rules here — it renders exactly the legacy markup.
   ------------------------------------------------------------- */

/* Row variants — single DOM path, image side flipped by flex order */
.blog-list-view-post .magzinos-blog-row {
	display: flex;
	align-items: flex-start;
	gap: 1.5rem;
}

.blog-list-view-post .magzinos-blog-row .post-thumbnail {
	flex: 0 0 38%;
	max-width: 38%;
}

.blog-list-view-post .magzinos-blog-row .post-thumbnail img {
	aspect-ratio: 16 / 10;
	object-fit: cover;
}

/* Image-on-the-right variant: same markup, flipped by flex order. */
.blog-list-view-post .magzinos-blog-image-right .post-thumbnail {
	order: 2;
}

/* Counter the .grid-view-news-area top padding — the image sits alongside. */
.blog-list-view-post .magzinos-blog-row .post-content {
	flex: 1 1 auto;
	min-width: 0;
	padding-top: 0;
}

/* Row without a thumbnail: text must not collapse or drift aside. */
.blog-list-view-post .magzinos-blog-row .post-content:first-child {
	flex-basis: 100%;
}

/* Classic single-column blog: centered reading column. */
.blog-list-view-post.magzinos-blog-layout-single-column .post.grid-view-news-area {
	max-width: 860px;
	margin-left: auto;
	margin-right: auto;
}

/* Compact list — title + date rows, small square thumbnail. */
.blog-list-view-post .magzinos-blog-compact {
	align-items: center;
	gap: 1rem;
	padding-bottom: 0.9rem;
	margin-bottom: 0.9rem;
	border-bottom: 1px solid #e6e9ec;
}

.blog-list-view-post .magzinos-blog-compact .post-thumbnail {
	flex: 0 0 96px;
	max-width: 96px;
}

.blog-list-view-post .magzinos-blog-compact .post-thumbnail img {
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 4px;
}

.blog-list-view-post .magzinos-blog-compact .entry-title {
	font-size: 1.05rem;
	margin-bottom: 0.35rem;
}

/* No excerpt here — .entry-content only carries wp_link_pages(), so its
   default top padding would add dead space to every compact row. */
.blog-list-view-post .magzinos-blog-compact .entry-content {
	padding-top: 0;
}

/* First-large-then-grid — the leading card. */
.blog-list-view-post .magzinos-first-large .post-thumbnail img {
	max-height: 480px;
	object-fit: cover;
}

/* Mobile: every row variant stacks the thumbnail above the text. */
@media (max-width: 767.98px) {
	.blog-list-view-post .magzinos-blog-row {
		flex-direction: column;
		gap: 0.9rem;
	}

	.blog-list-view-post .magzinos-blog-row .post-thumbnail {
		flex: 1 1 auto;
		max-width: 100%;
		order: 0;
	}

	.blog-list-view-post .magzinos-blog-row .post-content {
		padding-top: 0.25rem;
	}

	/* The compact variant keeps a modest square instead of a giant crop. */
	.blog-list-view-post .magzinos-blog-compact .post-thumbnail {
		flex: 0 0 140px;
		max-width: 140px;
	}
}