/* ascunde partile organice ale cardurilor 4 si 5 Taboola - sponsored ramane */
#taboola-oc-4a,
#taboola-oc-5a {
	display: none !important;
}


/* container card */
.mbm-rec-card {
	font-family: Montserrat, sans-serif;
	color: #29293A;
	margin: 0;
}

.mbm-rec-card-1 {
	margin-top: 30px;
	margin-bottom: 40px;
}

.mbm-rec-card-3 {
	margin-top: 0;
	margin-bottom: 20px;
}

.mbm-rec-card-4,
.mbm-rec-card-5 {
	margin-top: 40px;
	margin-bottom: 30px;
}

.mbm-rec-card-7 {
	margin-top: 40px;
}

/* stilul de baza pentru un articol */
.mbm-rec-article {
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	min-width: 0;
}

.mbm-rec-thumb {
	display: block;
	overflow: hidden;
	border-radius: 10px;
	background-color: #DDDDDD;
	text-decoration: none;
}

.mbm-rec-thumb-img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: cover;
	aspect-ratio: 770 / 540;
	border-radius: 10px;
}

.mbm-rec-title-link {
	display: block;
	margin-top: 8px;
	text-decoration: none;
	color: inherit;
}

.mbm-rec-title {
	display: -webkit-box;
	-webkit-line-clamp: 4;
	line-clamp: 4;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font: normal normal 600 15px/18px Montserrat, sans-serif;
	color: #29293A;
}

.mbm-rec-title-link:hover .mbm-rec-title {
	text-decoration: underline;
}

/* CARD 1 - hero (slot 0) + 3 secundare (slot 1, 2, 3). Coloane egale 1:1 ca la Taboola. */
.mbm-rec-card-1 {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}

.mbm-rec-card-1 .mbm-rec-slot-0 {
	grid-row: span 3;
}

.mbm-rec-card-1 .mbm-rec-slot-0 .mbm-rec-title-link {
	margin-top: 10px;
}

.mbm-rec-card-1 .mbm-rec-slot-0 .mbm-rec-title {
	font-size: 17px;
	line-height: 21px;
}

.mbm-rec-card-1 .mbm-rec-slot-1,
.mbm-rec-card-1 .mbm-rec-slot-2,
.mbm-rec-card-1 .mbm-rec-slot-3 {
	flex-direction: row;
	gap: 10px;
	align-items: flex-start;
}

.mbm-rec-card-1 .mbm-rec-slot-1 .mbm-rec-thumb,
.mbm-rec-card-1 .mbm-rec-slot-2 .mbm-rec-thumb,
.mbm-rec-card-1 .mbm-rec-slot-3 .mbm-rec-thumb {
	flex: 0 0 130px;
	width: 130px;
}

.mbm-rec-card-1 .mbm-rec-slot-1 .mbm-rec-title-link,
.mbm-rec-card-1 .mbm-rec-slot-2 .mbm-rec-title-link,
.mbm-rec-card-1 .mbm-rec-slot-3 .mbm-rec-title-link {
	flex: 1 1 auto;
	margin-top: 0;
}

/* CARDS 3, 4, 5, 7 - cate 2 articole side-by-side, layout grid identic. Gap 20px pe desktop. */
.mbm-rec-card-3,
.mbm-rec-card-4,
.mbm-rec-card-5,
.mbm-rec-card-7 {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
}

/* font 17px si margin-top 12px pe titlul cardurilor 3, 4, 5, 7 (cardul 1 isi pastreaza override-urile pe slot-uri) */
.mbm-rec-card-3 .mbm-rec-title-link,
.mbm-rec-card-4 .mbm-rec-title-link,
.mbm-rec-card-5 .mbm-rec-title-link,
.mbm-rec-card-7 .mbm-rec-title-link {
	margin-top: 12px;
}

.mbm-rec-card-3 .mbm-rec-title,
.mbm-rec-card-4 .mbm-rec-title,
.mbm-rec-card-5 .mbm-rec-title,
.mbm-rec-card-7 .mbm-rec-title {
	font-size: 16.5px;
	line-height: 20px;
}

/* INTERMEDIATE (490-767px): card 1 = featured + slot 1 side-by-side; cards 3/4/5/7 raman 2 cols (default).
 * Fonturile si margin-top raman ca pe desktop. Gap intre coloane redus la 12px (vs 20px desktop). */
@media (min-width: 491px) and (max-width: 767px) {
	.mbm-rec-card-3,
	.mbm-rec-card-4,
	.mbm-rec-card-5,
	.mbm-rec-card-7 {
		gap: 12px;
	}

	.mbm-rec-card-1 .mbm-rec-slot-0 {
		grid-row: auto;
	}

	/* slot 1 nu mai e sidekick (image-stanga + titlu-dreapta) ci layout vertical ca slot 0 */
	.mbm-rec-card-1 .mbm-rec-slot-1 {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}

	.mbm-rec-card-1 .mbm-rec-slot-1 .mbm-rec-thumb {
		flex: none;
		width: 100%;
	}

	.mbm-rec-card-1 .mbm-rec-slot-1 .mbm-rec-title-link {
		margin-top: 12px;
	}

	.mbm-rec-card-1 .mbm-rec-slot-1 .mbm-rec-title {
		font-size: 17px;
		line-height: 21px;
	}

	.mbm-rec-card-1 .mbm-rec-slot-2,
	.mbm-rec-card-1 .mbm-rec-slot-3 {
		display: none;
	}
}

/* SMALL MOBILE (<490px): cards 4/5/7 stacked vertical; cards 1/3 doar 1 articol.
 * Fonturile raman ca pe desktop, modificam doar layout-ul (grid-template-columns + slot hide). */
@media (max-width: 490px) {
	.mbm-rec-card-1 {
		grid-template-columns: 1fr;
		gap: 0;
	}

	.mbm-rec-card-1 .mbm-rec-slot-0 {
		grid-row: auto;
	}

	.mbm-rec-card-1 .mbm-rec-slot-1,
	.mbm-rec-card-1 .mbm-rec-slot-2,
	.mbm-rec-card-1 .mbm-rec-slot-3 {
		display: none;
	}

	.mbm-rec-card-3 {
		grid-template-columns: 1fr;
	}

	.mbm-rec-card-3 .mbm-rec-slot-1 {
		display: none;
	}

	/* cardurile 4, 5, 7 stacked - 2 articole unul sub altul, row-gap 25px */
	.mbm-rec-card-4,
	.mbm-rec-card-5,
	.mbm-rec-card-7 {
		grid-template-columns: 1fr;
		gap: 25px;
	}
}

/* footer atribuire "by Taboola" la finalul card 7 - stiluri preluate de la Taboola */
.mbm-rec-card-footer {
	margin-top: 12px;
	text-align: right;
}

.mbm-rec-attribution {
	font-family: Arial, Helvetica, sans-serif;
	white-space: nowrap;
	line-height: normal;
	padding-bottom: 5px;
}

.mbm-rec-attribution-link {
	text-decoration: none;
	margin-right: 1px;
	vertical-align: text-bottom;
}

.mbm-rec-attribution-link span {
	font-size: 11px;
	color: #888080;
	display: inline;
	font-weight: normal;
}

@media (max-width: 767px) {
	.mbm-rec-attribution-link-desktop {
		display: none;
	}
}

@media (min-width: 768px) {
	.mbm-rec-attribution-link-mobile {
		display: none;
	}
}


/* override min-height pe Taboola_Feed_card-2/4/5 cand sistemul nostru e activ.
 * CSS-ul e enqueued conditional doar cand noTaboola=1, deci se aplica doar pe articolele cu sistemul nostru. */
@media (max-width: 767px) {
	#Taboola_Feed_card-2,
	#Taboola_Feed_card-4,
	#Taboola_Feed_card-5 {
		min-height: 190px !important;
	}
}

@media (min-width: 768px) {
	#Taboola_Feed_card-2,
	#Taboola_Feed_card-4,
	#Taboola_Feed_card-5 {
		min-height: 220px !important;
	}
}