/* AR-1504 */
/*
 * Blocurile de mapari fixe.
 *
 * Cardul de produs vine din blog-frontend.css (acelasi peste tot). Aici e doar
 * designul sectiunii: fara banda gri si fara breakout, titlu cu accent verde si
 * sageti sus-dreapta, ca la sectiunea "Produse similare" de pe site.
 */

.ilai-static-block {
	clear: both;
	margin: 48px 0;
	/*
	 * Sub 639px magazin.css face .aronia_shop_container_filter_products
	 * display:flex, deci sectiunea devine flex item: cu min-width:auto si
	 * flex-basis:auto s-ar dimensiona dupa continut, iar Slick calculeaza
	 * latimea slide-urilor din latimea listei — track lat creste itemul,
	 * itemul creste track-ul, si asa mai departe (slide-uri de 12636px).
	 */
	flex: 0 0 100%;
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
}

/* ---- Antet ---- */

.ilai-static-block__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px;
	/* Loc pentru sagetile pozitionate absolut deasupra caruselului. */
	min-height: 46px;
	padding-right: 108px;
	margin-bottom: 22px;
}

.ilai-static-block__heading {
	min-width: 0;
}

/* Supratitlu verde, mic si spatiat, deasupra titlului mare. */
.ilai-static-block__eyebrow {
	margin-bottom: 6px;
	font-size: 14px;
	line-height: 1.3;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #6cc049;
}

.ilai-static-block__title {
	margin: 0;
	font-size: 28px;
	line-height: 1.15;
	font-weight: 700;
	color: #380669;
}

/* ---- Sageti proprii, sus-dreapta ---- */

.ilai-static-block .ilai-blog-products .slick-arrow {
	top: auto;
	left: auto;
	bottom: calc(100% + 26px);
	width: 44px;
	height: 44px;
	border-radius: 12px;
	background: #6cc049;
	box-shadow: none;
	transition: background-color 0.2s ease, transform 0.2s ease;
}

.ilai-static-block .ilai-blog-products .slick-arrow:hover {
	background: #5cab3f;
}

.ilai-static-block .ilai-blog-products .slick-arrow::before {
	border-color: #fff;
	width: 10px;
	height: 10px;
	border-right-width: 2px;
	border-bottom-width: 2px;
}

.ilai-static-block .ilai-blog-products .slick-arrow.slick-disabled {
	background: #e4e6f0;
	cursor: default;
	/* blog-frontend.css scade opacitatea; aici diferentiem prin culoare. */
	opacity: 1;
}

.ilai-static-block .ilai-blog-products .slick-arrow.slick-disabled::before {
	border-color: #a7abc4;
}

.ilai-static-block .ilai-blog-products .slick-prev {
	right: 56px;
}

.ilai-static-block .ilai-blog-products .slick-next {
	right: 0;
}

/* Umbra cardurilor incape in bleed-ul lateral al slider-ului. Aceleasi valori
   si pe grila fara slider, ca spatierea sectiunii sa fie identica. */
.ilai-static-block .ilai-blog-products .slick-list,
.ilai-static-block .ilai-blog-products:not(.slick-initialized) {
	padding-top: 8px;
	padding-bottom: 22px;
}

/* ---- Variatii de context ---- */

/*
 * Pe categorii blocul sta intre descriere si grila de produse, deci are nevoie
 * de o delimitare clara: panou cu chenar si fundal foarte deschis, ca sa nu se
 * confunde cu listarea de dedesubt. Culorile sunt cele ale site-ului.
 */
.ilai-static-block--term {
	position: relative;
	margin: 18px 0 2px;
	padding: 25px 30px 10px;
	border-radius: 20px;
	border: 1px solid rgba(56, 6, 105, 0.07);
	background-color: #fcfbff;
	background-image:
		radial-gradient(circle at 100% 0%, rgba(108, 192, 73, 0.13) 0%, rgba(108, 192, 73, 0) 55%),
		radial-gradient(circle at 0% 100%, rgba(56, 6, 105, 0.07) 0%, rgba(56, 6, 105, 0) 52%),
		linear-gradient(135deg, #ffffff 0%, #f6f4fd 100%);
}

/* Cardurile albe ies in evidenta pe fundalul colorat. */
.ilai-static-block--term .ilai-blog-card {
	border-color: rgba(56, 6, 105, 0.05);
	box-shadow: 0 2px 10px rgba(110, 114, 165, 0.10);
}

/*
 * Sectiunea "Ultimele articole" din tema e restilizata prin clasa de pe body
 * (.ilai-static-blog), nu prin selector de frate al blocului: articolele fara
 * produse mapate trebuie sa arate la fel ca cele cu produse.
 */

/* La finalul articolului are nevoie de mai mult aer deasupra. */
.ilai-static-block--blog {
	margin: 56px 0 40px;
}
.ilai-static-block.ilai-static-block--blog, 
.ilai-static-blog .blog-section-content {
	background: linear-gradient(rgb(246, 247, 250) 0%, rgb(255, 255, 255) 70%);
	padding: 56px 0 64px;
	border: 0;
	margin-bottom: 0;
	border-radius: 10px;
}
.ilai-static-block__inner,
.ilai-static-blog .blog-section-content > .blog-section-inner{
	max-width: 1400px;
	margin: 0 auto;
}
.ilai-static-blog .blog-section-content {
	margin-top: 0;
	margin-bottom: 0;
	background: rgb(246, 247, 250);
}
.ilai-static-block.ilai-static-block--blog .ilai-static-block__head {
	padding-left: 108px;
	justify-content: center;
}
.ilai-static-block.ilai-static-block--blog .ilai-static-block__title,
.ilai-static-block.ilai-static-block--blog .ilai-static-block__eyebrow {
	text-align: center;
}
.ilai-static-block.ilai-static-block--blog .ilai-blog-card__media {
	margin-bottom: 25px;
}
.ilai-static-blog .blog-section-content .blog-image {
	margin-left: -25px;
	margin-right: -25px;
	margin-top: -29px;
	width: calc(100% + 50px) !important;
	border-bottom-right-radius: 0 !important;
	border-bottom-left-radius: 0 !important;
	margin-bottom: 0;
}
.ilai-static-blog .blog-section-content .each-blog-post {
	border-radius: 16px;
	box-shadow: 0 2px 6px rgba(110, 114, 165, 0.18);
}
.ilai-static-blog .blog-section-content .each-blog-post {
	border-radius: 16px;
	box-shadow: 0 2px 6px rgba(110, 114, 165, 0.18);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
	margin-right: 0;
	display: flex;
	flex-direction: column;
	margin-bottom: 0;
	padding-bottom: 25px;
	gap: 15px;
}
.ilai-static-blog .blog-section-content .each-blog-post:hover {
	transform: translateY(-4px);
	background: #fff;
    box-shadow: 0 6px 10px rgba(110, 114, 165, 0.45);
}
.ilai-static-blog .blog-section-content .h6 {
	margin-bottom: 6px;
	font-size: 14px;
	line-height: 1.3;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #6cc049;
}
.ilai-static-blog .blog-section-content .blog-section-inner h2{
	font-size: 28px;
	line-height: 1.15;
	font-weight: 700;
	color: #380669;
}
.ilai-static-blog .blog-section-content .blog-holder {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
}
.ilai-static-blog .blog-section-content .buton {
	font-size: 14px;
	font-weight: 600;
	padding: 10px;
	display: flex;
	height: 44px;
	justify-content: center;
	align-items: center;
	border-radius: 10px;
}
.ilai-static-blog .blog-section-content .blog_excerpt, 
.ilai-static-blog .blog-section-content h3,
.ilai-static-blog .blog-section-content .h6 {
	margin: 0;
}
.ilai-static-block.ilai-static-block--blog .ilai-blog-card__body {
	gap: 14px;
}
.ilai-static-blog .blog-section-content h3 {
	flex-grow: 1;
}
.ilai-static-blog .blog-section-content .button-container {
	padding-top: 10px;
}
/* ---- Slider pe sectiunea "Ultimele articole", sub desktop ---- */

/*
 * Slick ruleaza doar sub 1025px (unslick peste). Regulile de mai jos se aplica
 * strict cand slider-ul e initializat, ca grila de desktop sa ramana neatinsa.
 */
.ilai-static-blog .blog-holder.slick-initialized {
	display: block;
	gap: 0;
	/* Gutter-ul se muta pe slide, ca la caruselul de produse: slick pune
	   width inline pe slide si marginile ar fi ignorate. */
	margin-left: -10px;
	margin-right: -10px;
}

.ilai-static-blog .blog-holder.slick-initialized .slick-list {
	padding-bottom: 6px;
}

.ilai-static-blog .blog-holder.slick-initialized .slick-track {
	display: flex;
	align-items: stretch;
}

.ilai-static-blog .blog-holder.slick-initialized .slick-slide {
	height: auto;
	padding: 4px 10px 8px;
}

.ilai-static-blog .blog-holder.slick-initialized .slick-slide > div {
	height: 100%;
}

/* Slick pune display inline-block inline pe slide; cardul ramane coloana. */
.ilai-static-blog .blog-holder.slick-initialized .each-blog-post {
	display: flex !important;
	height: 100%;
	margin-right: 0;
}

/* Sageti identice cu cele de la caruselul de produse: sus, in dreapta. */
.ilai-static-blog .blog-holder.slick-initialized {
	position: relative;
}

.ilai-static-blog .blog-holder.slick-initialized .slick-arrow {
	position: absolute;
	top: auto;
	left: auto;
	bottom: calc(100% + 18px);
	z-index: 2;
	width: 44px;
	height: 44px;
	border: 0;
	border-radius: 12px;
	background: #6cc049;
	font-size: 0;
	line-height: 0;
	padding: 0;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.ilai-static-blog .blog-holder.slick-initialized .slick-arrow:hover {
	background: #5cab3f;
}

.ilai-static-blog .blog-holder.slick-initialized .slick-arrow::before {
	content: '';
	display: inline-block;
	width: 10px;
	height: 10px;
	border-right: 2px solid #fff;
	border-bottom: 2px solid #fff;
	opacity: 1;
}

.ilai-static-blog .blog-holder.slick-initialized .slick-prev {
	right: 56px;
}

.ilai-static-blog .blog-holder.slick-initialized .slick-prev::before {
	transform: rotate(135deg);
	margin-left: 3px;
}

.ilai-static-blog .blog-holder.slick-initialized .slick-next {
	right: 0;
}

.ilai-static-blog .blog-holder.slick-initialized .slick-next::before {
	transform: rotate(-45deg);
	margin-right: 3px;
}

.ilai-static-blog .blog-holder.slick-initialized .slick-arrow.slick-disabled {
	background: #e4e6f0;
	cursor: default;
	opacity: 1;
}

.ilai-static-blog .blog-holder.slick-initialized .slick-arrow.slick-disabled::before {
	border-color: #a7abc4;
}

/* ---- Responsive ---- */

@media (max-width: 1850px) {
	.ilai-static-blog .blog-section-content .blog-section-inner h2 {font-size: 25px;}

	.ilai-static-block__head {
		margin-bottom: 12px;
	}	
}

@media (max-width: 1750px) {
	.ilai-static-block__inner,
	.ilai-static-blog .blog-section-content > .blog-section-inner{
		max-width: 100%;padding-left: 90px;padding-right: 90px;
	}
	.ilai-static-blog .blog-section-content {
		margin-bottom: 25px;
	}
}

@media (max-width: 1399px) {
	.ilai-static-blog .blog-section-content .blog-image {
		margin-left: -22px;
		margin-right: -22px;
		margin-top: -22px;
		width: calc(100% + 44px) !important;
	}
	.ilai-static-block__inner, .ilai-static-blog .blog-section-content > .blog-section-inner {
		padding-left: 35px;
		padding-right: 35px;
	}
	.ilai-static-blog .blog-section-content {
		margin-bottom: 15px;
	}
}

@media (max-width: 1279px) {
	.ilai-static-blog .blog-section-content .blog-section-inner h2 {font-size: 22px;}

	/* Sub 1280 sectiunea "Ultimele articole" e slider: antetul lasa loc
	   sagetilor din dreapta. */
	.ilai-static-blog .blog-section-content .blog-heading {padding-right: 118px !important;padding-left: 0 !important;}

	.ilai-static-block__title {
		font-size: 22px;
	}
	.ilai-static-block__eyebrow {
		font-size: 12px;
	}
	.ilai-static-block .ilai-blog-products .slick-arrow {
		bottom: calc(100% + 10px);
	}
	.ilai-static-blog .blog-section-content .blog-image {
		margin-left: -12px;
		margin-right: -12px;
		margin-top: -12px;
		width: calc(100% + 24px) !important;
	}
}

@media (max-width: 1100px) {
	.ilai-static-block--term {
		padding-left: 24px;
		padding-right: 24px;
	}
}

@media (max-width: 1023px) {
	.ilai-static-block.ilai-static-block--blog, .ilai-static-blog .blog-section-content {
		padding: 40px 0;
		width: calc(100% + 60px);
		max-width: calc(100% + 60px);
		border-radius: 0;
		margin-left: -30px;
		margin-right: -30px;
	}
}

@media (max-width: 767px) {
	/*
	 * Pe articol antetul e centrat pe desktop; sub 767 trece la stanga, pe
	 * ambele sectiuni noi (produse si "Ultimele articole"). Padding-ul din
	 * dreapta ramane, ca titlul sa nu intre sub sageti.
	 */
	.ilai-static-block.ilai-static-block--blog .ilai-static-block__head {padding-left: 0;padding-right: 92px;justify-content: flex-start;}
	.ilai-static-block.ilai-static-block--blog .ilai-static-block__title,
	.ilai-static-block.ilai-static-block--blog .ilai-static-block__eyebrow {text-align: left;}
	.ilai-static-blog .blog-section-content .blog-heading,
	.ilai-static-blog .blog-section-content .blog-heading .subtitle,
	.ilai-static-blog .blog-section-content .blog-heading h2 {text-align: left;}
	.ilai-static-blog .blog-section-content .blog-heading {padding-right: 104px !important;padding-left: 0 !important;}

	.ilai-static-block.ilai-static-block--term {
		border-radius: 0;
		padding-left: 30px;
		padding-right: 30px;
		margin-left: -30px;
		margin-right: -30px;
		width: calc(100% + 60px);
		max-width: calc(100% + 60px);
	}
	.ilai-static-block .ilai-blog-products .slick-list {
		padding-bottom: 15px;
	}
	.ilai-static-block--term {
		padding-bottom: 5px;
	}
	.ilai-static-blog .blog-section-content .blog-heading {
		margin-bottom: 0;
	}
}

@media (max-width: 639px) {
	/* Un articol pe slide: cardul isi pastreaza inaltimea proprie. */
	.ilai-static-blog .blog-holder.slick-initialized .slick-track {align-items: flex-start;}
	.ilai-static-blog .blog-holder.slick-initialized .slick-slide > div {height: auto;}
	.ilai-static-blog .blog-holder.slick-initialized .each-blog-post {height: auto;}

	.ilai-static-block.ilai-static-block--term {flex: 0 0 calc(100% + 60px);}
}

@media (max-width: 600px) {
	.ilai-static-blog .blog-section-content .blog-section-inner h2 {font-size: 21px;}


	.ilai-static-block--term {
		padding: 25px 16px 8px;
		border-radius: 16px;
	}

	.ilai-static-block__head {
		padding-right: 92px;
		min-height: 40px;
	}

	.ilai-static-block__eyebrow {
		margin-bottom: 4px;
		font-size: 11px;
		letter-spacing: 0.1em;
	}

	.ilai-static-block__title {
		font-size: 21px;
	}

	.ilai-static-block .ilai-blog-products .slick-arrow {
		width: 38px;
		height: 38px;
		border-radius: 10px;
		bottom: calc(100% + 20px);
	}

	.ilai-static-block .ilai-blog-products .slick-prev {
		right: 46px;
	}
}

@media (max-width: 479px) {
	.ilai-static-block.ilai-static-block--term {
		flex: 0 0 calc(100% + 40px);
		padding-left: 20px;
		padding-right: 20px;
		margin-left: -20px;
		margin-right: -20px;
		width: calc(100% + 40px);
		max-width: calc(100% + 40px);
		margin-top: 0;
	}

	.ilai-static-block__inner, .ilai-static-blog .blog-section-content > .blog-section-inner {
		padding-left: 20px;
		padding-right: 20px;
		padding-bottom: 0;
	}
	.ilai-static-block.ilai-static-block--blog, .ilai-static-blog .blog-section-content {
		padding: 40px 0;
		width: calc(100% + 60px);
		max-width: calc(100% + 60px);
		border-radius: 0;
		margin-left: -30px;
		margin-right: -30px;
	}
	.ilai-static-blog .blog-section-content .blog-image {
		margin-left: -20px;
		margin-right: -20px;
		margin-top: -20px;
		width: calc(100% + 40px) !important;
	}
	.ilai-static-blog .blog-holder.slick-initialized {
		width: calc(100% + 20px);
	}
}