/*
 * Fixes for Layout 5 ("life-style-post post-dark col") of the
 * wp-news-magazine "News Carousel" Elementor widget, kept here instead of
 * editing the plugin's own assests/css/style.css so they survive plugin
 * updates.
 */

/* The plugin's own Elementor "Item -> Background Color" style control
 * only outputs CSS for `.post-list .post-wrap`, but Layout 5's wrapper
 * div never gets a `post-list` class (see news_carousel.php render()) —
 * so that control silently does nothing here. Setting the background
 * directly instead — matches the site's base cream background rather
 * than a grey/dark card. */
.post.life-style-post.post-dark .post-wrap {
	background-color: #FEF8EA;
}

/* Title: pink, matching the Novice/Notizie list & homepage grid titles
 * (kinoistra-posts-list / kinoistra-posts-home-grid). Elementor's own
 * "Title -> Normal -> Color" control already outputs
 * `.post-wrap .content h5 a{color:#fff !important}` for this widget (that
 * selector isn't restricted to `.post-list` like the background one is),
 * so this needs matching specificity + !important to win over it. */
.post.life-style-post.post-dark .post-wrap .content h5,
.post.life-style-post.post-dark .post-wrap .content h5 a {
	color: #D98FA1 !important;
}

/* Images otherwise keep their natural (uncropped) aspect ratio via the
 * plugin's generic `.image img{max-width:100%}` rule, so posts whose
 * source images have different ratios end up at different heights in
 * the same row. Force a consistent cropped ratio instead, matching the
 * "meccarouselthumb" image size (474x324) already used for this widget. */
.post.life-style-post.post-dark .image {
	display: block;
	overflow: hidden;
	aspect-ratio: 474 / 324;
}
.post.life-style-post.post-dark .image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/* The semi-transparent background above was invisible because the
 * COLUMN wrapping this whole widget (elementor-element-bacb96b, on both
 * the SI homepage and the IT "inizio" page) has its own background set
 * to the global "Text" color swatch, which is solid black
 * (--e-global-color-text: #000000) — an opaque black behind a
 * translucent black is still just black, no matter the opacity. Removing
 * that column background so the page's own background shows through
 * instead, letting the card's semi-transparent black actually read as
 * semi-transparent. Elementor's own rule for this has higher specificity
 * (id-like classes + :not()), so this needs !important to win. */
.elementor-element-bacb96b.elementor-column > .elementor-widget-wrap {
	background-color: transparent !important;
}