/* OVP Dentissimo Widgets — Hero + Breadcrumb
   Structura e definită aici; spațierea, culorile și dimensiunea
   textului (responsive) vin din controalele de Stil din Elementor
   (vezi class-hero-crumb-widget.php) și au !important — aceeași hibă
   de temă întâlnită la celelalte widgeturi din acest plugin. */

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

.dvf-hero-crumb {
	position: relative;
	width: 100%;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	padding: 6em 20px 2em;
	/* Plasă de siguranță: "Ajustare orizontală" de mai jos poate scoate
	   vizual badge-ul din cutie dacă cineva trage slider-ul la maxim —
	   overflow: hidden îl taie la marginea secțiunii în loc să lase
	   pagina întreagă să devină derulabilă pe orizontală (aceeași hibă
	   ca la containerele Elementor cu lățime fixă găsită pe Acasă). */
	overflow: hidden;
	/* Înălțimea e STANDARD pe orice pagină, indiferent ce poză e
	   încărcată — vine din "Înălțime secțiune" (Stil), cu valori
	   implicite rezonabile per breakpoint (nu mai depinde de raportul
	   real al pozei, ca într-o variantă anterioară). Poza umple mereu
	   cutia prin "cover" pe .dvf-hero-crumb-bg de mai jos — se
	   recadrează dacă proporțiile ei nu se potrivesc exact, nu se
	   deformează niciodată. */
}

.dvf-hero-crumb.dvf-hero-crumb.dvf-hero-crumb {
	/* "Breakout" automat din containerul „boxed" (cu margine albă pe
	   laterale) în care Elementor plasează implicit o secțiune — exact
	   problema semnalată: poza rămânea încadrată într-o cutie mai
	   îngustă din centrul paginii, nu ocupa toată lățimea ecranului.
	   Indiferent de setarea „Content Width" a secțiunii din Elementor,
	   widgetul își întinde singur fundalul până la marginile reale ale
	   ferestrei, pe orice dispozitiv, fără nicio bifă de pus manual —
	   clasic „full-bleed": lățimea devine 100vw, apoi elementul e tras
	   înapoi cu jumătate din lățimea lui (relativ la centrul containe-
	   rului părinte), ca să rămână centrat pe ecran, nu pe coloana lui.
	   Tripled+!important ca să bată orice max-width impus de temă/
	   Elementor pe containerul din jur (aceeași hibă de temă ca la
	   celelalte widgeturi). Singura condiție ca să funcționeze: niciun
	   element din jur (secțiune/coloană/wrapper) să nu aibă el însuși
	   „overflow: hidden" pe orizontală — dacă totuși poza tot nu atinge
	   marginile după actualizare, acolo e cauza, iar „Content Width:
	   Full Width" pe secțiunea respectivă din Elementor rezolvă sigur. */
	width: 100vw !important;
	max-width: 100vw !important;
	left: 50% !important;
	right: auto !important;
	transform: translateX(-50%) !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

.dvf-hero-crumb-bg {
	/* Poza de fundal stă acum într-un div separat (nu direct pe
	   .dvf-hero-crumb), ca "Zoom" (transform: scale) să nu mărească și
	   textul/badge-ul breadcrumb — doar poza. Absolut poziționat, în
	   spatele lui .dvf-hero-crumb-nav (z-index mai mic), umple mereu
	   cutia părintelui (inset:0), indiferent de "Înălțime minimă
	   secțiune" sau de padding — acelea rămân controlate de
	   .dvf-hero-crumb, nu se ating între ele. */
	position: absolute;
	inset: 0;
	/* "cover" (nu "contain"/"stretch"): imaginea umple mereu cutia fără
	   să se deformeze, indiferent de „Înălțime minimă secțiune" din
	   Stil — se schimbă doar ce porțiune din poză se vede (recadrare),
	   niciodată raportul ei de aspect. Poziția implicită (50% 0% = centru
	   sus) reproduce exact „center top" de dinainte; "Poziție orizontală/
	   verticală" din Stil suprascriu prin --dvf-hc-bg-x/--dvf-hc-bg-y. */
	background-position: var(--dvf-hc-bg-x, 50%) var(--dvf-hc-bg-y, 0%);
	background-size: cover;
	background-repeat: no-repeat;
	/* "Zoom" din Stil setează --dvf-hc-bg-zoom (ex: 1.2 pentru 120%);
	   fără nicio valoare setată, fallback-ul 1 = fără zoom, exact ca
	   până acum. overflow:hidden de mai sus pe .dvf-hero-crumb taie
	   partea care iese din cutie când e mărită. */
	transform: scale(var(--dvf-hc-bg-zoom, 1));
	transform-origin: center;
	z-index: 0;
}

/* Clasele de mai jos există DOAR când e completat câmpul opțional
   "Imagine fundal — mobil" din Conținut — widgetul randează atunci DOUĂ
   div-uri .dvf-hero-crumb-bg (unul cu poza de desktop/tabletă, unul cu
   poza de mobil) și regulile astea aleg care se vede, după lățimea
   ecranului. Fără imagine de mobil setată, se randează un singur div,
   fără aceste clase — comportament identic cu înainte, pe orice pagină
   care deja folosește widgetul. Mobile-first, ca restul fișierului:
   implicit se vede poza de mobil, iar de la 768px în sus (aceeași
   granularitate ca media queries de mai jos) se schimbă pe cea de
   desktop/tabletă. */
.dvf-hero-crumb-bg-mobile {
	display: block;
}

.dvf-hero-crumb-bg-desktop {
	display: none;
}

.dvf-hero-crumb-stack {
	/* Cutie verticală (eyebrow opțional + breadcrumb), singurul copil
	   direct al .dvf-hero-crumb — asta ține centrarea orizontală și
	   alinierea jos date de flexbox-ul părintelui neschimbate. */
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	max-width: 100%;
}

.dvf-hero-crumb-eyebrow.dvf-hero-crumb-eyebrow.dvf-hero-crumb-eyebrow {
	display: block !important;
	margin: 0 !important;
}

.dvf-hero-crumb-eyebrow {
	color: #FFFFFF;
	font-family: 'Inter', sans-serif;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
}

.dvf-hero-crumb-nav {
	/* z-index peste .dvf-hero-crumb-bg, ca textul/badge-ul să rămână
	   mereu deasupra pozei de fundal. */
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin: 0;
	max-width: 100%;
	/* „Badge" din spatele textului — implicit navy semi-transparent, ca
	   textul alb să rămână lizibil pe orice zonă a pozei; complet
	   editabil din Stil → Breadcrumb (culoare, spațiu interior,
	   rotunjire, bordură). */
	background-color: rgba(4, 49, 80, 0.55);
	padding: 10px 24px;
	border-radius: 30px;
	/* „Ajustare orizontală"/„Ajustare verticală" din Stil → Secțiune
	   scriu --dvf-hc-tx/--dvf-hc-ty (px) pe acest element; fallback-ul
	   0px face ca, fără nicio ajustare setată, badge-ul să rămână exact
	   unde-l pun deja flex-align + padding-top/bottom, ca până acum. */
	transform: translate(var(--dvf-hc-tx, 0px), var(--dvf-hc-ty, 0px));
}

.dvf-hero-crumb-item {
	font-family: 'Inter', sans-serif;
	font-size: 20px;
	font-weight: 700;
	color: #ffffff;
	line-height: 1.2;
}

.dvf-hero-crumb-item a,
.dvf-hero-crumb-item span {
	color: inherit;
	font: inherit;
	text-decoration: none !important;
}

.dvf-hero-crumb-item a:hover,
.dvf-hero-crumb-item a:focus {
	text-decoration: none !important;
	opacity: 0.85;
}

.dvf-hero-crumb-sep {
	font-family: 'Inter', sans-serif;
	font-size: 14px;
	color: #ffffff;
	line-height: 1;
}

@media (min-width: 768px) {
	.dvf-hero-crumb {
		padding: 14em 20px 3em;
	}

	.dvf-hero-crumb-item {
		font-size: 24px;
	}

	.dvf-hero-crumb-bg-mobile {
		display: none;
	}

	.dvf-hero-crumb-bg-desktop {
		display: block;
	}
}

@media (min-width: 1025px) {
	.dvf-hero-crumb {
		padding: 22em 20px 4em;
	}

	.dvf-hero-crumb-item {
		font-size: 30px;
	}
}