/* ============================================================================
   PAGINA DE SERVICII — /servicii/
   Marcajul e în `mu-plugins/diagpro-servicii.php` (scurtătura [diagpro_servicii]).

   Nu există machetă pentru pagina asta: nu e în `design/v3/` și nici în
   `design/mobil/`. ⇒ Nu inventez un stil nou, ci reiau EXACT valorile paginilor
   care există deja și au fost aprobate (`css/pagini.css` — Contact/Suport/Despre):
   breadcrumb 12,5px #8b97a8, H1 30px/800 #16233d, lead 15px #4a5568,
   carduri albe cu ramă #e3e8f0 și rotunjire 16px. Așa pagina intră în site fără
   să se vadă că e adăugată ulterior.

   Prefix propriu `.dpsv-` (nu `.dpp-`): `pagini.css` e fișierul altui agent și nu
   se atinge — deci clasele lui nu se refolosesc, ca o modificare acolo să nu
   schimbe pagina asta pe neașteptate.

   ⚠️ ORDINEA DE ÎNCĂRCARE: tema încarcă `css/*.css` alfabetic, deci `servicii.css`
   vine DUPĂ `mobil.css`. La specificitate egală câștigă regulile de aici. De aceea
   toate regulile care ar putea călca peste clasele fundației (`.dpm-scroller`,
   `.dpm-chip`, `.dpm-sectiune-cap`) sunt închise în `@media (min-width: 768px)` —
   acolo unde fundația nici nu există, fiindcă e scrisă toată sub 767px.
   ========================================================================== */

/* ---------------------------------------------------------------- cadrul
   Blocksy pune conținutul într-un container propriu, cu marginile lui. Îl
   dezactivăm și lăsăm fiecare bloc să-și poarte containerul `.dp-wrap`
   (1280 + 32 padding ⇒ x = 112, exact ca antetul și subsolul). */
body.dpsv-pagina .ct-container-full[data-vertical-spacing] { padding-top: 0; padding-bottom: 8px; }
body.dpsv-pagina .entry-content.is-layout-constrained {
	max-width: none; margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0;
}
body.dpsv-pagina .entry-content.is-layout-constrained > * {
	max-width: none; margin-left: 0; margin-right: 0;
}
body.dpsv-pagina .entry-content > .dpsv { margin-top: 0; margin-bottom: 0; }

.dpsv .dp-wrap { max-width: 1280px; margin-left: auto; margin-right: auto; }

/* ---------------------------------------------------------------- breadcrumb */
.dpsv-brm {
	display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap;
	padding: 20px 32px 0;
	font-size: 12.5px; line-height: normal; color: #8b97a8;
}
.dpsv-brm a { color: #8b97a8; text-decoration: none; }
.dpsv-brm a:hover { color: var(--dp-blue); }
.dpsv-brm-acum { color: #33415c; font-weight: 600; }

/* ---------------------------------------------------------------- cap de pagină */
.dpsv-cap { padding: 0 32px; }
.dpsv-titlu {
	margin: 14px 0 6px; font-size: 30px; font-weight: 800; color: #16233d;
	letter-spacing: -0.5px; line-height: normal;
}
.dpsv-lead {
	margin: 0; font-size: 15px; color: #4a5568; line-height: 1.55; max-width: 70ch;
}
.dpsv-lead strong { color: #16233d; font-weight: 700; }

/* ---------------------------------------------------------------- săriturile
   Pe telefon rândul se derulează pe orizontală: clasa `.dpm-scroller` din
   fundație face tot (snap, ieșirea în margini, ascunderea barei). Aici nu se
   scrie nimic pentru sub 768px, ca să nu i se strice comportamentul. */
.dpsv-sarituri { margin-top: 18px; }

/* ---------------------------------------------------------------- secțiuni */
.dpsv-sec { padding: 44px 32px 0; }
.dpsv-cap-sec h2 {
	margin: 0; font-size: 22px; font-weight: 800; color: #16233d;
	letter-spacing: -0.3px; line-height: 1.25;
}
.dpsv-sec-intro {
	margin: 8px 0 0; font-size: 14px; color: #4a5568; line-height: 1.6; max-width: 78ch;
}
.dpsv-sec-intro strong { color: #16233d; }

/* ---------------------------------------------------------------- grila de carduri
   `auto-fit` (nu `auto-fill`): la secțiunile cu 3 carduri coloana goală se
   strânge, deci cele 3 umplu rândul în loc să lase un gol în dreapta. */
.dpsv-grid {
	margin-top: 18px;
	display: grid; gap: 20px;
	grid-template-columns: repeat(auto-fit, minmax(272px, 1fr));
}

/* ---------------------------------------------------------------- cardul */
.dpsv-card {
	position: relative;                      /* ancoră pentru zona de atins de mai jos */
	display: flex; flex-direction: column; gap: 8px;
	background: #fff; border: 1px solid #e3e8f0; border-radius: 16px; padding: 22px;
	transition: border-color .15s, box-shadow .15s, transform .15s;
}
.dpsv-card:hover {
	border-color: #cfdcf0;
	box-shadow: 0 10px 26px rgba(22, 35, 61, 0.07);
}
.dpsv-card-t { margin: 0; font-size: 15.5px; font-weight: 800; color: #16233d; line-height: 1.3; letter-spacing: normal; }
.dpsv-card-t a { color: inherit; text-decoration: none; }
/* Cardul ÎNTREG e zona de atins, nu doar rândul de titlu (care ar avea ~21px
   înălțime — sub minimul de 44px cerut pe telefon). */
.dpsv-card-t a::after { content: ""; position: absolute; inset: 0; border-radius: 16px; }
.dpsv-card:hover .dpsv-card-t a { color: var(--dp-blue); }
.dpsv-card-t a:focus-visible { outline: none; }
.dpsv-card:has(.dpsv-card-t a:focus-visible) { outline: 2px solid var(--dp-blue); outline-offset: 2px; }

.dpsv-card-p { margin: 0; font-size: 13.5px; color: #4a5568; line-height: 1.55; }
.dpsv-card-p strong { color: #16233d; font-weight: 700; }
.dpsv-card-nota { margin: 0; font-size: 12.5px; color: #8b97a8; line-height: 1.5; }

/* Al doilea link al cardului: propria zonă de atins (≥36px) și ridicat peste
   folia `.dpsv-card-t a::after`, care altfel îl acoperă și îl face neapăsabil. */
.dpsv-card-alt {
	position: relative; z-index: 1;
	display: inline-flex; align-items: center; align-self: flex-start;
	min-height: 36px;
	font-size: 13px; font-weight: 700; color: var(--dp-blue); text-decoration: none;
}
.dpsv-card-alt:hover { text-decoration: underline; }

.dpsv-card-jos {
	margin-top: auto; padding-top: 10px;
	display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap;
}
.dpsv-pret { font-size: 15.5px; font-weight: 800; color: #16233d; line-height: normal; }
.dpsv-pret .pro-pret-val { font-weight: 800; }
.dpsv-link { font-size: 13px; font-weight: 700; color: var(--dp-blue); line-height: normal; white-space: nowrap; }

/* ---------------------------------------------------------------- banda de final */
.dpsv-final { padding: 44px 32px 8px; }
.dpsv-final-in {
	background: var(--dp-bg-tint); border: 1px solid #dbe4f2; border-radius: 16px;
	padding: 28px 32px;
}
.dpsv-final-t { margin: 0 0 6px; font-size: 18px; font-weight: 800; color: #16233d; line-height: 1.3; }
.dpsv-final-p { margin: 0; font-size: 14px; color: #4a5568; line-height: 1.6; max-width: 70ch; }
.dpsv-final-p a { color: var(--dp-blue); }
.dpsv-final-actiuni { margin: 18px 0 0; display: flex; gap: 12px; flex-wrap: wrap; }

.dpsv .dpsv-btn {
	display: inline-flex; align-items: center; justify-content: center;
	min-height: 46px; padding: 12px 24px; border-radius: 11px;
	background: var(--dp-blue); color: #fff !important; text-decoration: none;
	font-size: 14.5px; font-weight: 800; line-height: normal; border: 1px solid var(--dp-blue);
}
.dpsv .dpsv-btn:hover { background: #234e96; border-color: #234e96; }
.dpsv .dpsv-btn--gol { background: #fff; color: var(--dp-blue) !important; border-color: #c6d5ec; }
.dpsv .dpsv-btn--gol:hover { background: #fff; border-color: var(--dp-blue); }

/* ============================================================================
   DESKTOP (≥768px) — aici trăiesc regulile care ar călca peste fundația mobilă.
   `.dpm-chip` și `.dpm-sectiune-cap` sunt definite în `mobil.css` DOAR sub 767px,
   deci peste 768 trebuie desenate de la zero, cu aceleași valori, ca pastilele
   și capetele de secțiune să arate la fel pe toate lățimile.
   ========================================================================== */
@media (min-width: 768px) {
	.dpsv-sarituri { display: flex; flex-wrap: wrap; gap: 10px; }

	.dpsv-sarituri .dpm-chip {
		display: inline-flex; align-items: center; gap: 6px;
		min-height: 36px; padding: 7px 14px;
		border: 1px solid #cdd6e4; border-radius: 999px;
		background: #fff; color: #33415c;
		font-size: 12.5px; font-weight: 700; white-space: nowrap; text-decoration: none;
	}
	.dpsv-sarituri .dpm-chip:hover { border-color: var(--dp-blue); color: var(--dp-blue); }

	.dpsv-cap-sec {
		display: flex; align-items: baseline; justify-content: space-between;
		gap: 16px; flex-wrap: wrap;
	}
	.dpsv-cap-sec > a { font-size: 13px; font-weight: 700; color: var(--dp-blue); text-decoration: none; }
	.dpsv-cap-sec > a:hover { text-decoration: underline; }
}

/* ============================================================================
   TABLETĂ ÎNGUSTĂ
   ========================================================================== */
@media (max-width: 900px) {
	.dpsv-grid { gap: 14px; }
}

/* ============================================================================
   TELEFON (≤767px) — pragul site-ului.
   ⚠️ Antetul compact (săgeata „înapoi" + „Servicii") vine din
      `diagpro-antet-mobil.php`, pentru tot site-ul. Aici NU se face altul.
   ========================================================================== */
@media (max-width: 767px) {
	.dpsv-brm, .dpsv-cap, .dpsv-sec, .dpsv-final { padding-left: 16px; padding-right: 16px; }

	.dpsv-brm { padding-top: 12px; font-size: 12px; }
	.dpsv-titlu { margin: 10px 0 6px; font-size: 21px; letter-spacing: -0.4px; line-height: 1.2; }
	.dpsv-lead { font-size: 13.5px; line-height: 1.55; }

	/* Pastilele: `.dpm-scroller` le scoate în marginile ecranului (-16px), deci
	   prima începe exact sub „S"-ul titlului și ultima se termină la 16px. */
	.dpsv-sarituri { margin-top: 14px; }

	.dpsv-sec { padding-top: 28px; }
	.dpsv-sec-intro { margin-top: 6px; font-size: 13px; line-height: 1.55; }

	/* O singură coloană: cardurile au text, nu miniaturi — pe 360px două coloane
	   ar lăsa titlurile pe câte trei rânduri. */
	.dpsv-grid { margin-top: 14px; grid-template-columns: 1fr; gap: 12px; }

	.dpsv-card { padding: 16px; border-radius: 14px; gap: 7px; }
	.dpsv-card-t a::after { border-radius: 14px; }
	.dpsv-card-t { font-size: 14.5px; }
	.dpsv-card-p { font-size: 12.5px; line-height: 1.5; }
	.dpsv-card-nota { font-size: 12px; }
	.dpsv-card-jos { padding-top: 8px; }
	.dpsv-pret { font-size: 15px; }
	.dpsv-link { font-size: 12.5px; }

	.dpsv-final { padding-top: 28px; }
	.dpsv-final-in { padding: 18px 16px; border-radius: 14px; }
	.dpsv-final-t { font-size: 16px; }
	.dpsv-final-p { font-size: 13px; }
	.dpsv-final-actiuni { margin-top: 14px; gap: 10px; }
	/* butoanele pe toată lățimea, ca pe restul paginilor de pe telefon */
	.dpsv .dpsv-btn { width: 100%; padding: 14px 18px; border-radius: 10px; font-size: 15px; }
}