/* =========================================================
   Karacter Elements - stiluri de baza
   Widget: Karacter Hero
   ========================================================= */

.karacter-hero {
	position: relative;
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 40px;
	overflow: hidden;
	background-color: #FBF7EF;
	border-radius: 40px;
	box-sizing: border-box;
}

.karacter-hero * {
	box-sizing: border-box;
}

/* ---------- Coloana de text (ocupa spatiul ramas) ---------- */
.karacter-hero__inner {
	position: relative;
	z-index: 2;
	flex: 1 1 0;
	min-width: 0;
}

.karacter-hero__content {
	max-width: 100%;
}

/* ---------- Coloana imaginii (frunza + shape) ----------
   Coloana este un flex item normal care se INTINDE pe inaltimea liniei,
   adica pe inaltimea data de coloana de text. Imaginea e pozitionata
   absolut IN INTERIORUL ei, ca sa nu adauge inaltime proprie hero-ului.
   Asa object-fit primeste o cutie cu dimensiuni definite si chiar
   functioneaza - spre deosebire de a face absoluta coloana insasi. */
.karacter-hero__media {
	position: relative;
	z-index: 1;
	flex: 0 0 auto;
	width: 45%;
	max-width: 100%;
	min-height: 300px;
	align-self: stretch;
	pointer-events: none;
}

.karacter-hero__media img {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: right bottom;
}

.karacter-hero__title {
	margin: 0 0 22px;
	color: #2F5D45;
	font-weight: 400;
	line-height: 1.12;
}

.karacter-hero__desc {
	color: #3C4A3F;
	line-height: 1.6;
}

.karacter-hero__desc > *:last-child {
	margin-bottom: 0;
}

/* ---------- Butoane ---------- */
.karacter-hero__buttons {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
	margin-top: 38px;
}

.karacter-hero__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	text-decoration: none;
	line-height: 1.2;
	border-style: solid;
	border-width: 1px;
	border-color: var(--kb-border, transparent);
	background-color: var(--kb-bg, #F2B233);
	color: var(--kb-color, #FFFFFF);
	transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}

.karacter-hero__btn,
.karacter-hero__btn:visited {
	color: var(--kb-color, #FFFFFF);
}

.karacter-hero__btn:hover,
.karacter-hero__btn:focus,
.karacter-hero__btn:active {
	background-color: var(--kb-bg-h, #DFA02A);
	color: var(--kb-color-h, #FFFFFF);
	border-color: var(--kb-border-h, transparent);
	text-decoration: none;
}

/* ---------- Pills ---------- */
.karacter-hero__pills {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin-top: 60px;
}

.karacter-hero__pill {
	display: inline-flex;
	align-items: center;
	border-style: solid;
	border-width: 1px;
	border-color: currentColor;
	border-radius: 100px;
	line-height: 1.35;
}

/* ---------- Banda de jos ---------- */
.karacter-hero__bar {
	position: absolute;
	left: 50%;
	bottom: 0;
	z-index: 3;
	transform: translateX(-50%);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	width: calc(100% - 50px);
	max-width: 760px;
	padding: 20px 40px;
	background-color: #FFFFFF;
	color: #6E9276;
	border-radius: 26px 26px 0 0;
	text-align: center;
	line-height: 1.4;
}

.karacter-hero__bar-icon {
	flex: 0 0 auto;
	display: inline-block;
	width: 26px;
	height: auto;
	font-size: 26px;
	line-height: 1;
}

img.karacter-hero__bar-icon {
	object-fit: contain;
}

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
	.karacter-hero {
		gap: 24px;
	}
	.karacter-hero__pills {
		margin-top: 40px;
	}
}

@media (max-width: 767px) {
	.karacter-hero {
		flex-direction: column;
		align-items: stretch;
		gap: 30px;
		border-radius: 24px;
	}
	.karacter-hero__content {
		max-width: 100%;
	}
	/* Pe mobil imaginea revine in flux si isi pastreaza proportiile. */
	.karacter-hero__media {
		width: 100%;
		height: auto;
		min-height: 0;
		margin: 0;
		align-self: auto;
	}
	.karacter-hero__media img {
		position: static;
		height: auto;
	}
	.karacter-hero__buttons .karacter-hero__btn {
		width: 100%;
	}
	.karacter-hero__bar {
		width: calc(100% - 30px);
		padding: 16px 20px;
		font-size: 15px;
	}
}

/* =========================================================
   Widget: Karacter Pills
   ========================================================= */

.karacter-pills {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
	box-sizing: border-box;
}

.karacter-pills * {
	box-sizing: border-box;
}

.karacter-pills__item {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	max-width: 100%;
	border-style: solid;
	border-width: 1px;
	border-color: #E4DFCF;
	border-radius: 100px;
	background-color: #FFFFFF;
	color: #3C4A3F;
	line-height: 1.4;
	text-align: left;
}

.karacter-pills__icon {
	flex: 0 0 auto;
	display: inline-block;
	width: 18px;
	height: auto;
	font-size: 18px;
	line-height: 1;
}

img.karacter-pills__icon {
	object-fit: contain;
}

.karacter-pills__text {
	min-width: 0;
}

/* =========================================================
   Widget: Karacter FAQ
   ========================================================= */

.karacter-faq {
	box-sizing: border-box;
}

.karacter-faq * {
	box-sizing: border-box;
}

.karacter-faq__item {
	border-bottom-style: solid;
	border-bottom-width: 1px;
	border-bottom-color: #DCE5DA;
}

.karacter-faq__heading {
	margin: 0;
	padding: 0;
	font: inherit;
	color: inherit;
}

/* Butonul e resetat complet: mostenirea din tema ar aduce fundal si border. */
.karacter-faq__trigger {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	margin: 0;
	padding: 18px 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	color: #2F5D45;
	font: inherit;
	line-height: 1.35;
	text-align: left;
	text-transform: none;
	letter-spacing: inherit;
	cursor: pointer;
	transition: color .2s ease;
	text-align:left !important;
	background: transparent !important;
	align-items: flex-start!important;
	text-transform:none!important;
}

.karacter-faq__trigger:hover,
.karacter-faq__trigger:focus {
	background: none;
	box-shadow: none;
}

.karacter-faq__num {
	flex: 0 0 auto;
}

.karacter-faq__question {
	flex: 1 1 auto;
	min-width: 0;
}

/* Iconita: desenata din CSS, ca sa nu depinda de niciun icon font. */
.karacter-faq__icon {
	position: relative;
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	margin-left: 16px;
	color: #2F5D45;
}

.karacter-faq--icon-plusminus .karacter-faq__icon::before,
.karacter-faq--icon-plusminus .karacter-faq__icon::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	background-color: currentColor;
	transform: translate(-50%, -50%);
	transition: opacity .2s ease, transform .2s ease;
}

.karacter-faq--icon-plusminus .karacter-faq__icon::before {
	width: 100%;
	height: 1.5px;
}

.karacter-faq--icon-plusminus .karacter-faq__icon::after {
	width: 1.5px;
	height: 100%;
}

/* Deschis: bara verticala dispare, ramane minusul. */
.karacter-faq--icon-plusminus .is-open .karacter-faq__icon::after {
	opacity: 0;
	transform: translate(-50%, -50%) rotate(90deg);
}

.karacter-faq--icon-chevron .karacter-faq__icon::before {
	content: "";
	position: absolute;
	top: 44%;
	left: 50%;
	width: 55%;
	height: 55%;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: translate(-50%, -50%) rotate(45deg);
	transition: transform .25s ease;
}

.karacter-faq--icon-chevron .is-open .karacter-faq__icon::before {
	transform: translate(-50%, -20%) rotate(225deg);
}

/* Panoul: inchis implicit, height animata din JS. */
.karacter-faq__panel {
	height: 0;
	overflow: hidden;
	visibility: hidden;
	transition-property: height;
	transition-duration: 300ms;
	transition-timing-function: ease;
}

.karacter-faq__item.is-open > .karacter-faq__panel {
	height: auto;
	visibility: visible;
}

.karacter-faq__answer {
	padding: 0 0 22px;
	color: #3C4A3F;
	line-height: 1.6;
}

.karacter-faq__answer > *:first-child {
	margin-top: 0;
}

.karacter-faq__answer > *:last-child {
	margin-bottom: 0;
}

/* Fara JS panourile raman deschise, deci continutul e mereu accesibil. */
.no-js .karacter-faq__panel {
	height: auto;
	visibility: visible;
}

/* =========================================================
   Widget: Karacter Team
   ========================================================= */

.karacter-team {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px;
	box-sizing: border-box;
	padding-bottom:2rem;
}

.karacter-team * {
	box-sizing: border-box;
}

/* position: relative = sistemul de referinta pentru poza pozitionata absolut. */
.karacter-team__card {
	position: relative;
	display: flex;
	align-items: center;
	min-width: 0;
	min-height: 84px;
	padding: 12px 28px;
	padding-left: 94px;
	border-style: solid;
	border-width: 1px;
	border-color: #E4DFCF;
	border-radius: 100px;
	background-color: #FFFFFF;
	text-decoration: none;
}

a.karacter-team__card {
	transition: border-color .2s ease, box-shadow .2s ease;
}

a.karacter-team__card:hover,
a.karacter-team__card:focus {
	text-decoration: none;
	box-shadow: 0 4px 18px rgba(47, 93, 69, .10);
}

/* Poza e scoasa din flux ca sa NU dicteze inaltimea cardului: asa poate fi
   mai mare decat el si sa il depaseasca, ca in design. Are dimensiuni
   explicite, deci object-fit continua sa functioneze normal. */
.karacter-team__avatar {
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	display: block;
	width: 76px;
	height: 76px;
	overflow: hidden;
	border-radius: 50%;
	background-color: #F1EADF;
}

.karacter-team__avatar img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.karacter-team__text {
	display: block;
	min-width: 0;
}

.karacter-team__name {
	display: block;
	margin: 0;
	padding: 0;
	color: #2F5D45;
	font-weight: 400;
	line-height: 1.25;
}

.karacter-team__role {
	display: block;
	margin-top: 4px;
	color: #7A8B7E;
	line-height: 1.35;
}

/* ---------- Celula cu butonul ---------- */
.karacter-team__cta {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	min-width: 0;
	padding: 14px;
	border-radius: 100px;
	background-color: #FBF7EF;
	/* Implicit se strange pe continut si sta la dreapta coloanei, ca in design. */
	justify-self: end;
}

.karacter-team__cta-icon {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 14px;
	background-color: #EAF0E6;
}

.karacter-team__cta-icon img {
	display: block;
	width: 26px;
	height: 26px;
	object-fit: contain;
}

.karacter-team__cta-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 16px 30px;
	border: 0;
	border-radius: 20px;
	background-color: #F2B233;
	color: #FFFFFF;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	transition: background-color .25s ease, color .25s ease;
}

.karacter-team__cta-btn:visited {
	color: #FFFFFF;
}

.karacter-team__cta-btn:hover,
.karacter-team__cta-btn:focus {
	text-decoration: none;
}

@media (max-width: 767px) {
	.karacter-team {
		grid-template-columns: minmax(0, 1fr);
	}
	.karacter-team__cta {
		flex-wrap: wrap;
		justify-self: stretch;
	}
	.karacter-team__cta-btn {
		flex: 1 1 auto;
	}
}