/*
 * DirectMM - cards on the front end. Loaded on every page: an embedded link card can sit in any
 * post or page, and the related block is written by the single-post template.
 */

/* ============================================================
 * Embedded link cards (internal oEmbed)
 *
 * Core writes the iframe with width="500" and its script strips the inline style once the
 * embedded document answers, so below ~534px that attribute pushed the page sideways. The
 * blockquote fallback carries the same class and is already full width.
 * ============================================================ */

iframe.wp-embedded-content {
	max-width: 100%;
}

/* ============================================================
 * "Articole similare"
 *
 * The theme paints the title over the photograph from an absolutely positioned header inside a
 * card of fixed height, which clips the first lines of every title below the tablet breakpoint.
 * Here the header returns to normal flow and the card grows with it. The photograph is a native
 * element with a srcset (related-posts.php); the 2/1 box does the framing - the shape the site's
 * photographs already have, so cover crops nothing on a typical one.
 * ============================================================ */

/* The theme leaves 30px above the block and 15px below; the same on both sides makes it one unit. */
#related-posts {
	margin-bottom: 30px;
}

#related-posts ul {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 18px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Foundation's clearfix pseudo-elements would otherwise become grid items. */
#related-posts ul:before,
#related-posts ul:after {
	display: none;
}

/* min-width:0 with the minmax(0, …) tracks: one long unbroken word is wider than the phone column. */
#related-posts ul li {
	min-width: 0;
	float: none;
	width: auto !important;
	height: auto !important;
	border: 0;
	overflow: visible;
	padding: 0;
}

/* Below the two-column breakpoint the photograph sits beside the title. */
#related-posts ul li > a.inner {
	display: grid;
	grid-template-columns: 40% minmax(0, 1fr);
	gap: 12px;
	align-items: start;
}

/* The theme's hover zoom stays; this is the box that clips it. */
#related-posts ul li .entry-content-media {
	position: relative;
	max-height: none;
	overflow: hidden;
}

/* The dark gradient existed only to keep white text legible over the photograph. */
#related-posts ul li .entry-content-media:before {
	display: none;
}

#related-posts ul li .post-thumb {
	display: block;
}

#related-posts ul li img {
	display: block;
	width: 100%;
	height: auto !important;
	aspect-ratio: 2 / 1;
	object-fit: cover;
}

#related-posts ul li .entry-header {
	position: static;
	transform: none;
	width: auto;
	height: auto;
	padding: 0;
	margin-top: 0;
	opacity: 1;
}

/*
 * break-word: the title is never truncated, so a word wider than its column would otherwise be cut
 * against the card with nothing to say it continues. The hover selector repeats the declarations
 * because the theme adds 5px under the title on hover, which in a grid raises the whole row; no
 * text on this site changes under the pointer.
 */
#related-posts ul li .entry-header .entry-title,
#related-posts ul li:hover .entry-header .entry-title {
	margin: 0 !important;
	color: #595858;
	font: 400 16px/20px Roboto, Lato, Arial, sans-serif;
	overflow-wrap: break-word;
}

/* The theme's own breakpoint; below it two cards would be under 220px each. */
@media only screen and (min-width: 600px) {

	#related-posts ul {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 26px 20px;
	}

	#related-posts ul li > a.inner {
		display: block;
	}

	#related-posts ul li .entry-header {
		margin-top: 10px;
	}
}

/* The card is 429px wide here, and the title carries that width. */
@media only screen and (min-width: 1280px) {

	#related-posts ul li .entry-header .entry-title,
	#related-posts ul li:hover .entry-header .entry-title {
		font-size: 18px;
		line-height: 23px;
	}
}

/* ============================================================
 * "Recente" / "Populare" - the tabbed sidebar widget
 *
 * The theme fixes the thumbnail box and the image at 298px, so the picture overflows the narrow
 * sidebar between the tablet and desktop breakpoints and sits small once the sidebar drops below
 * the article. The image is a native element with a srcset (widget-post-tabs.php); the 2/1 box
 * does the framing. Every rule is scoped to the large-thumbnail configuration and to the two
 * article lists: the small configurations keep the theme's markup, and the comment tab shares the
 * list class but must stay a single column of text.
 * ============================================================ */

.widget_radium_post_tabs .posts-widget-wrapper.thumbnail-large .recent .post-thumb,
.widget_radium_post_tabs .posts-widget-wrapper.thumbnail-large .popular .post-thumb {
	width: 100%;
	height: auto;
}

.widget_radium_post_tabs .posts-widget-wrapper.thumbnail-large .recent img,
.widget_radium_post_tabs .posts-widget-wrapper.thumbnail-large .popular img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 2 / 1;
	object-fit: cover;
}

/* The list item clips its overflow, and the sidebar is 174px at 768px: a long word must break. */
.widget_radium_post_tabs .thumbnail-large .tab-holder .recent .news-list > li .entry-title,
.widget_radium_post_tabs .thumbnail-large .tab-holder .popular .news-list > li .entry-title {
	overflow-wrap: break-word;
}

/* Sidebar under the article, as wide as the page: one large photograph per row, so the title grows with it. */
@media only screen and (max-width: 599px) {

	.widget_radium_post_tabs .thumbnail-large .tab-holder .recent .news-list > li .entry-title,
	.widget_radium_post_tabs .thumbnail-large .tab-holder .popular .news-list > li .entry-title,
	.widget_radium_post_tabs .thumbnail-large .tab-holder .recent .news-list > li .entry-title a,
	.widget_radium_post_tabs .thumbnail-large .tab-holder .popular .news-list > li .entry-title a {
		font-size: 18px;
		line-height: 23px;
	}
}

/* Still under the article, wide enough for two per row; the same threshold as the related block. */
@media only screen and (min-width: 600px) and (max-width: 767px) {

	.widget_radium_post_tabs .thumbnail-large .tab-holder .recent .news-list,
	.widget_radium_post_tabs .thumbnail-large .tab-holder .popular .news-list {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 6px 20px;
	}

	.widget_radium_post_tabs .thumbnail-large .tab-holder .recent .news-list > li,
	.widget_radium_post_tabs .thumbnail-large .tab-holder .popular .news-list > li {
		min-width: 0;
		border-bottom: 0;
	}

	/* Foundation's clearfix pseudo-elements would otherwise become grid items. */
	.widget_radium_post_tabs .thumbnail-large .tab-holder .recent .news-list > li:before,
	.widget_radium_post_tabs .thumbnail-large .tab-holder .recent .news-list > li:after,
	.widget_radium_post_tabs .thumbnail-large .tab-holder .popular .news-list > li:before,
	.widget_radium_post_tabs .thumbnail-large .tab-holder .popular .news-list > li:after {
		display: none;
	}
}