/* ============================================================================
   MĂRCILE — pagina de aterizare /marca/ și paginile de marcă-alias
   Marcajul îl generează `mu-plugins/diagpro-marci.php` (scurtătura [diagpro_marci]).

   ⛔ Prefix propriu `.dpmc-`, nefolosit de nimeni altcineva. Prefixele deja luate în
   proiect: .dph- .dpc- .dpf- .dpk- .dpa- .dpm- .dps- .dpsv- .dpfv- .dpp-
   (Doi agenți care aleg același prefix își strică reciproc paginile — s-a întâmplat.)

   ⚠️ Fișierele CSS se încarcă ALFABETIC. `marci.css` vine după `categorie.css`,
   `home.css` și `harta.css`, dar ÎNAINTEA lui `mobil.css`. La specificitate egală
   câștigă `mobil.css`, deci nu ne bazăm pe clasele fundației (`.dpm-*`) și nu le
   rescriem: tot ce e aici poartă prefixul propriu.
   ========================================================================== */

/* ---------------------------------------------------------------- cadrul
   Linia de conținut a site-ului: 1280px + 32px padding ⇒ la 1440px conținutul începe
   la x = 112 și se termină la 1328 — exact ca antetul, subsolul, harta site-ului și
   paginile statice. Blocksy constrânge singur `.entry-content`, mai îngust; îi scoatem
   constrângerea și o purtăm noi, pe blocul propriu.                              */

body.dpmc-pagina .entry-content.is-layout-constrained {
	max-width: none;
	margin-left: 0;
	margin-right: 0;
	padding-left: 0;
	padding-right: 0;
}
body.dpmc-pagina .entry-content.is-layout-constrained > * {
	max-width: none;
	margin-left: 0;
	margin-right: 0;
}

/* Titlul îl dă tema (singurul <h1> din pagină). Fără asta stă la x = 80 și decalajul
   de 32px față de conținut se vede imediat sub el. */
body.dpmc-pagina .hero-section .entry-header {
	padding-left: 32px;
	padding-right: 32px;
}

.dpmc {
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 32px;
	color: var(--dp-text-soft);
}

/* ---------------------------------------------------------------- introducere */
.dpmc-lead {
	margin: 0 0 22px;
	max-width: 70ch;
	font-size: 15px;
	line-height: 1.55;
	color: var(--dp-text-soft);
}
.dpmc-lead strong {
	color: var(--dp-text);
	font-weight: 700;
}
.dpmc-lead a {
	color: var(--dp-blue);
}

/* rândul „‹ Toate mărcile" */
.dpmc-inapoi {
	margin: 0 0 10px;
	font-size: 13px;
	line-height: normal;
}
.dpmc-inapoi a {
	color: var(--dp-text-faint);
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	/* `inline-flex` înghite spațiul dintre săgeată și text (devin doi copii flex) ⇒
	   se pune înapoi ca `gap`, altfel iese „‹Toate mărcile", lipit. */
	gap: 4px;
	padding: 0 2px;
	min-height: 24px;
}
.dpmc-inapoi a:hover {
	color: var(--dp-blue);
}
.dpmc-sep {
	color: var(--dp-border);
	margin: 0 4px;
}

/* pe arhiva de marcă rândul stă peste grila din `categorie.css`, deci își ia singur
   marginile — acolo nu există containerul `.dpmc` */
.dpmc-inapoi--arhiva {
	margin: 0 0 14px;
}

/* ---------------------------------------------------------------- grila de mărci */
.dpmc-grila {
	list-style: none;
	margin: 0 0 26px;
	padding: 0;
	display: grid;
	gap: 14px;
	/* `auto-fill` + `minmax` = numărul de coloane se ia singur după lățime, fără praguri
	   scrise de mână; `1fr` la minim ține cardul în ecran și la 320px. */
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 232px), 1fr));
}

.dpmc-card {
	position: relative;
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--dp-border);
	border-radius: var(--dp-radius);
	overflow: hidden;
	transition: border-color .15s, box-shadow .15s;
}
.dpmc-card:hover {
	border-color: var(--dp-blue);
	box-shadow: 0 2px 10px rgba(22, 35, 61, .07);
}

/* `flex: 1` + `margin-top: auto` pe CTA: într-un rând de grilă, cardurile se întind la
   înălțimea celui mai înalt (unele au și linkul „Despre marca…", altele nu). Fără asta,
   cardurile scurte rămâneau cu un gol sub buton, ca și cum ar lipsi ceva. Așa butonul
   coboară la bază și rândul arată intenționat, nu neterminat. */
.dpmc-card-link {
	display: flex;
	flex-direction: column;
	gap: 3px;
	flex: 1;
	padding: 16px 18px 14px;
	text-decoration: none;
	min-height: 44px;
}
.dpmc-card-nume {
	font-size: 17px;
	font-weight: 800;
	color: var(--dp-text);
	letter-spacing: -0.01em;
	line-height: 1.25;
	/* numele lungi („Super MB Pro", „Scania VCI") nu au voie să lățească coloana */
	overflow-wrap: anywhere;
}
.dpmc-card-nr {
	font-family: 'Space Grotesk', system-ui, sans-serif;
	font-size: 12.5px;
	color: var(--dp-text-faint);
	line-height: normal;
}
.dpmc-card-cta {
	margin-top: auto;
	padding-top: 8px;
	font-size: 13.5px;
	font-weight: 700;
	color: var(--dp-blue);
	line-height: normal;
}

/* linkul secundar spre pagina de dealer autorizat — al doilea link din același card,
   deci NU poate sta în interiorul primului <a> */
.dpmc-card-extra {
	display: block;
	padding: 11px 18px;
	border-top: 1px solid var(--dp-border);
	background: var(--dp-bg-softer);
	font-size: 12.5px;
	font-weight: 600;
	color: var(--dp-text-soft);
	text-decoration: none;
	min-height: 44px;
	box-sizing: border-box;
}
.dpmc-card-extra:hover {
	color: var(--dp-blue);
	background: var(--dp-bg-tint);
}

/* ---------------------------------------------------------------- rândul „aftermarket" */
.dpmc-generice {
	margin: 0 0 26px;
	padding: 14px 16px;
	background: var(--dp-bg-soft);
	border-radius: 10px;
	font-size: 14px;
	line-height: 1.55;
	max-width: 78ch;
}
.dpmc-generice a {
	color: var(--dp-blue);
	font-weight: 600;
}

/* ---------------------------------------------------------------- produsele unei mărci */
.dpmc-produse {
	list-style: none;
	margin: 0 0 26px;
	padding: 0;
	display: grid;
	gap: 16px;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 248px), 1fr));
}

.dpmc-p {
	background: #fff;
	border: 1px solid var(--dp-border);
	border-radius: var(--dp-radius);
	overflow: hidden;
	transition: border-color .15s, box-shadow .15s;
}
.dpmc-p:hover {
	border-color: var(--dp-blue);
	box-shadow: 0 2px 10px rgba(22, 35, 61, .07);
}
.dpmc-p-link {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 14px;
	text-decoration: none;
}
.dpmc-p-poza {
	display: block;
	margin-bottom: 12px;
	/* raport fix ⇒ cardurile rămân pe aceeași linie de bază indiferent de poze,
	   și nu sare aranjarea când se încarcă imaginile (CLS) */
	aspect-ratio: 4 / 3;
	background: var(--dp-bg-softer);
	border-radius: 8px;
	overflow: hidden;
}
.dpmc-p-poza .dpmc-p-img,
.dpmc-p-poza img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}
.dpmc-p-nume {
	font-size: 15px;
	font-weight: 700;
	color: var(--dp-text);
	line-height: 1.35;
	overflow-wrap: anywhere;
}
.dpmc-p-pret {
	margin-top: 8px;
	font-size: 18px;
	font-weight: 800;
	color: var(--dp-navy);
	line-height: normal;
}
.dpmc-p-pret del {
	font-size: 14px;
	font-weight: 400;
	color: var(--dp-text-faint);
	margin-right: 6px;
}
.dpmc-p-pret ins {
	text-decoration: none;
}
.dpmc-p-pret .woocommerce-Price-currencySymbol {
	font-weight: 400;
}
.dpmc-p-cta {
	margin-top: auto;
	padding-top: 12px;
	font-size: 13.5px;
	font-weight: 700;
	color: var(--dp-blue);
	line-height: normal;
}

/* ---------------------------------------------------------------- „Mai departe" */
.dpmc-mai-departe {
	margin: 0 0 8px;
	padding-top: 22px;
	border-top: 1px solid var(--dp-border);
}
.dpmc-mai-departe h2 {
	margin: 0 0 10px;
	font-size: 15px;
	font-weight: 800;
	color: var(--dp-text);
	letter-spacing: -0.01em;
}
.dpmc-mai-departe ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px 10px;
}
.dpmc-mai-departe a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 16px;
	border: 1px solid var(--dp-border);
	border-radius: 999px;
	background: #fff;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--dp-text);
	text-decoration: none;
}
.dpmc-mai-departe a:hover {
	border-color: var(--dp-blue);
	color: var(--dp-blue);
}

/* ============================================================================
   TELEFON — pragul mobil al proiectului e 767px
   ========================================================================== */
/* =====================================================================================
   TEXTUL PROPRIU AL MĂRCII, pe arhivă  (punctul 105, 02.09.2026)
   Stă între rândul de navigare și grila de produse. La cele patru mărci autorizate are
   și insignă; la restul, doar textul.
   ===================================================================================== */
/* insigna de dealer autorizat pe grila de pe /marca/ */
.dpmc-card-insigna {
	display: inline-block; align-self: flex-start; margin-bottom: 6px;
	background: var(--dp-bg-tint); border: 1px solid var(--dp-blue); color: var(--dp-blue);
	border-radius: 999px; padding: 3px 10px;
	font-family: 'Space Grotesk', sans-serif; font-size: 11px; font-weight: 700;
	letter-spacing: 0.06em; text-transform: uppercase;
}
.dpmc-card--dealer { border-color: var(--dp-blue); }

.dpmc-desc { margin: 2px 0 20px; max-width: 78ch; }
.dpmc-desc-t { font-size: 15px; line-height: 1.7; color: var(--dp-text-soft); margin: 0; }
.dpmc-desc-l { margin: 8px 0 0; font-size: 14px; }
.dpmc-desc-l a { color: var(--dp-blue); font-weight: 700; text-decoration: none; }
.dpmc-desc-l a:hover { text-decoration: underline; }

.dpmc-insigna { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 0 0 8px; }
.dpmc-insigna-b {
	display: inline-flex; align-items: center; gap: 6px;
	background: var(--dp-bg-tint, var(--dp-bg-soft)); border: 1px solid var(--dp-blue);
	color: var(--dp-blue); border-radius: 999px; padding: 5px 14px;
	font-family: 'Space Grotesk', sans-serif; font-size: 12.5px; font-weight: 700;
	letter-spacing: 0.04em;
}
.dpmc-insigna-l { font-size: 13px; color: var(--dp-text-faint); text-decoration: underline; }
.dpmc-insigna-l:hover { color: var(--dp-blue); }

/* pe arhiva mărcilor autorizate textul primește o dungă, ca să nu se piardă în grilă */
.dpmc-desc--dealer {
	border-left: 3px solid var(--dp-blue); padding-left: 16px;
}

@media (max-width: 767px) {
	.dpmc-desc { margin-bottom: 16px; }
	.dpmc-desc-t { font-size: 14.5px; }
	.dpmc-desc--dealer { padding-left: 12px; }
	/* linkul din insignă e o țintă de atins de sine stătătoare */
	.dpmc-insigna-l { display: inline-flex; align-items: center; min-height: 40px; }

	/* macheta mobilă ține conținutul la 16px de margini, nu la 32 */
	.dpmc {
		padding: 0 16px;
	}
	body.dpmc-pagina .hero-section .entry-header {
		padding-left: 16px;
		padding-right: 16px;
	}

	.dpmc-lead {
		font-size: 14.5px;
		margin-bottom: 18px;
	}

	/* ⚠️ Pe telefon „‹ Toate mărcile" e un control de navigare, nu un link din mijlocul
	   unei fraze ⇒ intră sub regula celor 44px. Măsurat înainte: 30px. Pe desktop rămâne
	   compact, altfel s-ar căsca un gol de 20px deasupra titlului grilei. */
	.dpmc-inapoi {
		margin-bottom: 4px;
	}
	.dpmc-inapoi a {
		min-height: 44px;
	}

	/* Două coloane de mărci încap confortabil de la 360px în sus (2 × 156 + 12 gap +
	   32 margini = 356). Sub atât, `minmax(min(100%, …))` le pune singur pe una,
	   fără prag suplimentar și fără derulare orizontală. */
	.dpmc-grila {
		gap: 12px;
		grid-template-columns: repeat(auto-fill, minmax(min(100%, 152px), 1fr));
	}
	.dpmc-card-link {
		padding: 13px 14px 12px;
	}
	.dpmc-card-nume {
		font-size: 15.5px;
	}
	.dpmc-card-extra {
		padding: 12px 14px;
		font-size: 12px;
	}

	.dpmc-produse {
		gap: 12px;
		grid-template-columns: repeat(auto-fill, minmax(min(100%, 168px), 1fr));
	}
	.dpmc-p-link {
		padding: 12px;
	}
	.dpmc-p-nume {
		font-size: 14px;
	}
	.dpmc-p-pret {
		font-size: 16.5px;
	}

	.dpmc-mai-departe {
		padding-top: 18px;
	}
	.dpmc-mai-departe ul {
		gap: 8px;
	}
	.dpmc-mai-departe a {
		padding: 0 14px;
		font-size: 13px;
	}
}