/* OVP Dentissimo Widgets — Echipa de Sprijin
   Structura e definită aici; culorile/tipografia vin din controalele de
   Stil din Elementor (vezi class-echipa-sprijin-widget.php) și au
   !important — aceeași hibă de temă întâlnită la celelalte widgeturi.

   Imagine în stânga, eyebrow+titlu+descriere+grilă de persoane în
   dreapta — recreează vizual secțiunea "Echipa de sprijin" din kit-ul
   demo, dar editabilă din Elementor. */

.dvf-esp,
.dvf-esp * {
	box-sizing: border-box;
}

.dvf-esp {
	width: 100%;
	/* Spațiu vertical standard plugin-wide (v3.0.0): 25px, cu breakpoint-uri
	   mai jos pentru tabletă/mobil. */
	padding-top: 25px;
	padding-bottom: 25px;
}

.dvf-esp-row {
	display: flex;
	flex-direction: row;
	/* "stretch" (nu "center"): poza trebuie să aibă mereu aceeași
	   înălțime ca și coloana din dreapta (text + grila de persoane), nu o
	   înălțime fixă centrată — clientul a cerut explicit asta. Controlul
	   de Stil „Înălțime imagine" e implicit gol pe desktop (vezi
	   class-echipa-sprijin-widget.php), ca stretch-ul să se aplice fără
	   nimic care să-l suprascrie. */
	align-items: stretch;
	gap: 48px;
}

/* ===================== Imagine ===================== */

.dvf-esp-media {
	flex: 1 1 0%;
	min-width: 0;
	/* FĂRĂ height fixă aici — align-items:stretch de mai sus îi dă
	   automat aceeași înălțime ca fratele ei flex (.dvf-esp-content),
	   adică exact înălțimea conținutului din dreapta. Controlul de Stil
	   „Înălțime imagine" (dacă e completat, pe desktop e gol implicit)
	   scrie o valoare !important care suprascrie acest comportament. */
	position: relative;
	overflow: hidden;
	border-radius: 20px;
}

.dvf-esp-img.dvf-esp-img.dvf-esp-img {
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
}

.dvf-esp-img {
	border-radius: 20px;
	/* „Poziție orizontală/verticală decupare" din Stil scriu aceste
	   variabile; fără nicio valoare, fallback 50%/50% (centrat). */
	object-position: var(--dvf-esp-img-x, 50%) var(--dvf-esp-img-y, 50%);
	/* „Zoom" scrie --dvf-esp-img-zoom (ex: 1.2 = 120%); fără valoare,
	   fallback 1 = fără zoom. */
	transform: scale(var(--dvf-esp-img-zoom, 1));
	transform-origin: center;
}

/* ===================== Text ===================== */

.dvf-esp-content {
	flex: 0 0 48%;
	max-width: 48%;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.dvf-esp-eyebrow.dvf-esp-eyebrow.dvf-esp-eyebrow {
	display: block !important;
	margin: 0 !important;
	text-transform: uppercase !important;
}

.dvf-esp-eyebrow {
	color: #1C6FEB;
	font-family: 'Inter', sans-serif;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 1px;
}

.dvf-esp-heading.dvf-esp-heading.dvf-esp-heading {
	display: block !important;
	margin: 0 !important;
}

.dvf-esp-heading {
	color: #043150;
	font-family: 'Inter', sans-serif;
	font-size: 34px;
	font-weight: 700;
	line-height: 1.2;
}

.dvf-esp-desc.dvf-esp-desc.dvf-esp-desc {
	display: block !important;
	margin: 0 !important;
}

.dvf-esp-desc {
	color: #4B5A6B;
	font-family: 'Inter', sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.5;
}

/* ===================== Grilă persoane ===================== */

.dvf-esp-grid {
	display: grid;
	grid-template-columns: repeat(var(--dvf-esp-cols, 2), 1fr);
	gap: var(--dvf-esp-gap, 12px);
	margin-top: 4px;
}

.dvf-esp-person.dvf-esp-person.dvf-esp-person {
	display: flex !important;
}

.dvf-esp-person {
	flex-direction: column;
	gap: 4px;
	background-color: #F5F7FA;
	border-radius: 12px;
	padding: 14px 16px;
}

/* Rândul de sus al cardului: bulina + numele în stânga, balonașele de
   locație în dreapta (aceeași linie) — la cererea clientului, nu sub
   rol ca înainte. */
.dvf-esp-person-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}

.dvf-esp-person-name-wrap {
	display: flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
}

.dvf-esp-dot.dvf-esp-dot.dvf-esp-dot {
	display: block !important;
	flex: 0 0 auto !important;
	margin: 0 !important;
}

.dvf-esp-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background-color: #043150;
	/* Fără offset manual (margin-top) — e în același rând flex,
	   align-items:center, cu numele, deci e mereu exact în dreptul lui,
	   indiferent de mărimea fontului. */
}

.dvf-esp-name.dvf-esp-name.dvf-esp-name {
	margin: 0 !important;
}

.dvf-esp-name {
	color: #043150;
	font-family: 'Inter', sans-serif;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.3;
	min-width: 0;
	overflow-wrap: anywhere;
}

.dvf-esp-role.dvf-esp-role.dvf-esp-role {
	/* margin-left 14px (nu 0): aliniat sub text-ul numelui, nu sub
	   bulină — lățimea bulinei (6px) + spațiul dintre bulină și nume
	   (8px) din .dvf-esp-person-name-wrap. Trebuie setat AICI (selector
	   tripled, aceeași specificitate ca reset-ul), nu într-o regulă cu
	   .dvf-esp-role simplu — un selector cu specificitate mai mică nu
	   poate suprascrie un !important cu specificitate mai mare, indiferent
	   de ordinea din fișier. */
	margin: 0 0 0 14px !important;
}

.dvf-esp-role {
	color: #4B5A6B;
	font-family: 'Inter', sans-serif;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.4;
}

/* Container pentru unul SAU mai multe balonașe de locație (o persoană cu
   "Bacău și Comănești" primește două balonașe alăturate, nu un singur
   balon cu text combinat — vezi standing rule v3.2.0). Stă pe rândul de
   sus, în colțul din dreapta, nu sub rol. */
.dvf-esp-badges {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 6px;
	flex: 0 0 auto;
}

.dvf-esp-badge.dvf-esp-badge.dvf-esp-badge {
	display: inline-block !important;
	margin: 0 !important;
	width: fit-content;
}

.dvf-esp-badge {
	background-color: #EAF1F7;
	color: #0B2E4E;
	font-family: 'Inter', sans-serif;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.3px;
	text-transform: uppercase;
	padding: 3px 9px;
	border-radius: 999px;
}

/* ===================== Responsive ===================== */

@media (max-width: 1024px) {
	.dvf-esp {
		padding-top: 20px;
		padding-bottom: 20px;
	}

	.dvf-esp-row {
		flex-direction: column;
		align-items: stretch;
		gap: 28px;
	}

	.dvf-esp-content {
		flex-basis: auto !important;
		max-width: 100% !important;
	}

	/* Layout-ul devine coloană (poza sus, conținut jos) — "aceeași
	   înălțime ca și conținutul" nu mai are sens aici, așa că revenim la
	   o înălțime fixă rezonabilă (baseline simplă, fără !important, cât
	   timp CSS-ul generat de Elementor pentru valoarea implicită a
	   controlului „Înălțime imagine" ajunge din urmă — v2.9.2). "flex:
	   0 0 auto" e necesar: altfel "flex:1 1 0%" de pe desktop (folosit
	   ca să întindă poza pe orizontală lângă text) ignoră height-ul de
	   mai jos și lasă imaginea să crească după propriile proporții pe
	   verticală, într-un container coloană. */
	.dvf-esp-media {
		flex: 0 0 auto;
		height: 380px;
	}
}

@media (max-width: 767px) {
	.dvf-esp {
		padding-top: 16px;
		padding-bottom: 16px;
	}

	.dvf-esp-media {
		flex: 0 0 auto;
		height: 260px;
	}

	.dvf-esp-grid {
		grid-template-columns: 1fr !important;
	}
}