/* OVP Dentissimo Widgets — Medicii (Dinți în 24h)
   Structura e definită aici; culorile și tipografia vin din controalele
   de Stil din Elementor (vezi class-medicii-24h-widget.php) și au
   !important — aceeași hibă de temă întâlnită la celelalte widgeturi. */

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

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

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

.dvf-md24 * {
	box-sizing: border-box;
}

.dvf-md24-top {
	max-width: 640px;
	margin: 0 auto 32px;
	text-align: center;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

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

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

.dvf-md24-heading {
	margin: 0 !important;
	font-family: 'Inter', sans-serif;
	font-size: 28px;
	font-weight: 700;
	line-height: 1.3;
	color: #043150 !important;
}

.dvf-md24-subheading {
	margin: 0 !important;
	font-family: 'Inter', sans-serif;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.6;
	color: #4B5A6B !important;
}

.dvf-md24-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	/* Mobil (sub 640px): mereu o singură coloană, indiferent de "Coloane
	   pe desktop/tabletă" din Stil — acel control scrie --dvf-md24-cols
	   doar pentru media query-ul de mai jos. */
	gap: var(--dvf-md24-gap, 20px);
}

@media (min-width: 640px) {
	.dvf-md24-grid {
		/* "Coloane pe desktop/tabletă" din Stil → Carduri medici scrie
		   --dvf-md24-cols (2/3/4) pe .dvf-md24; fallback 3 = comportamentul
		   dinainte de acest control (neschimbat dacă nu se atinge nimic). */
		grid-template-columns: repeat(var(--dvf-md24-cols, 3), minmax(0, 1fr));
	}
}

.dvf-md24-card {
	display: block;
	background-color: #FFFFFF;
	border-width: 1.5px;
	border-style: solid;
	border-color: #E9EDF2;
	/* "Rotunjire colț card" din Stil scrie --dvf-md24-radius; fallback
	   16px = valoarea dinainte de acel control. */
	border-radius: var(--dvf-md24-radius, 16px);
	overflow: hidden;
	text-decoration: none;
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}

a.dvf-md24-card:hover {
	box-shadow: 0 8px 24px rgba(4, 49, 80, 0.1);
	transform: translateY(-2px);
}

.dvf-md24-photo {
	width: 100%;
	height: 220px;
	object-fit: cover;
	display: block;
	/* Cutia (lată ~386px pe desktop cu 3 coloane, la fel de lată pe mobil
	   cu 1 coloană) e mult mai lată decât înaltă față de o poză tip
	   portret (cap+umeri) — "cover" umple lățimea și taie din înălțime
	   aproape jumătate din poză. Centrat (50% 50%) tăia des fruntea/
	   creștetul, pentru că mai toate pozele au mai mult spațiu gol
	   deasupra capului decât sub umeri.

	   "Poziție orizontală/verticală/Zoom implicit" din Stil → Carduri
	   medici scriu --dvf-md24-photo-x/-y/-zoom pe .dvf-md24 (se aplică pe
	   TOATE pozele odată); fallback 50%/25%/1 = valoarea implicită gândită
	   să nu taie capul pe majoritatea pozelor tip portret, fără nicio
	   configurare. Controalele per medic (Conținut → Medici — style inline
	   din render()) rămân disponibile și au întâietate față de acestea
	   (inline câștigă mereu în fața regulii din stylesheet, indiferent de
	   variabilele CSS), pentru orice poză anume care tot mai are nevoie de
	   o ajustare separată. */
	object-position: var(--dvf-md24-photo-x, 50%) var(--dvf-md24-photo-y, 25%);
	transform: scale(var(--dvf-md24-photo-zoom, 1));
	/* Zoom-ul (implicit sau per medic) scalează poza vizual peste cutia ei
	   — cardul (.dvf-md24-card) are overflow:hidden, deci partea în plus e
	   decupată la marginea cardului, nu se revarsă. */
	transform-origin: center;
}

.dvf-md24-body {
	padding: 16px 18px 20px;
	text-align: center;
}

.dvf-md24-name {
	margin: 0 0 4px !important;
	font-family: 'Inter', sans-serif;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.4;
	color: #043150 !important;
}

.dvf-md24-title {
	margin: 0 !important;
	font-family: 'Inter', sans-serif;
	font-size: 13px;
	font-weight: 400;
	line-height: 1.5;
	color: #4B5A6B !important;
}

.dvf-md24-cta-wrap {
	margin-top: 32px;
	text-align: center;
}

.dvf-md24-cta.dvf-md24-cta.dvf-md24-cta {
	display: inline-flex;
	align-items: center;
	background-color: #043150 !important;
	color: #FFFFFF !important;
	border: 1px solid #043150;
	border-radius: 999px;
	padding: 14px 30px;
	font-family: 'Inter', sans-serif;
	font-size: 15px;
	font-weight: 600;
	text-decoration: none !important;
	line-height: 1.3;
}

.dvf-md24-cta.dvf-md24-cta.dvf-md24-cta:hover {
	opacity: 0.9;
}