/* ==========================================================================
   PRIMA PAGINĂ — macheta „Homepage A1" (design v3, 18.08.2026)
   Fiecare valoare e luată 1:1 din design/v3/Homepage A1.dc.html.
   Prefix de clase: .dph-   ·   HTML-ul e în mu-plugins/diagpro-home.php
   ========================================================================== */

/* ⭐ 09.09.2026: culorile (`.dph { --dph-* }`), reset-ul `.dph`, BUTOANELE și banda
   finală + newsletterul au fost MUTATE în `comun.css`. Motivul, pe scurt: apar pe
   toate paginile, dar fișierul ăsta se încarcă doar pe prima ⇒ pe restul site-ului
   se randau nestilate. Explicația lungă e în capul lui `comun.css`.
   ⛔ Nu le pune la loc aici. */

/* --- containerul Blocksy: pe prima pagină conținutul merge pe toată lățimea,
       fără cei 60px de sus/jos, ca hero-ul să atingă bara de categorii --- */
body.home #main > .ct-container-full { padding-top: 0; padding-bottom: 0; }
body.home .entry-content,
body.home .entry-content.is-layout-constrained { max-width: none !important; width: 100% !important; margin-inline: 0 !important; }
body.home .entry-content > .dph { max-width: none !important; width: 100%; margin: 0 !important; }

/* ⛔ 19.08: animația `promoPulse` a fost ȘTEARSĂ odată cu roșul de pe eticheta
   ofertei — vezi nota de la `.dph-promo-tag`. Nu se pune la loc fără cererea lui Marius. */

/* ============ 1. HERO — FOTOGRAFIE PE TOATĂ BANDA ============ */
/* ⭐ 03.09.2026, cerere Marius: „o imagine pe tot background-ul, în care se vede pe fundal un
   service, mașina pe elevator, etc., și în dreapta locul pentru tester — să nu fie textul peste el".
   Varianta veche (tester decupat, lipit dreapta-jos, pe fundal #eef3fb) e înlocuită.

   Trei decizii, toate măsurate, nu presupuse:
   1. Fotografia e `cover` pe toată banda, ancorată `center right`: subiectul care contează
      (trusa deschisă) stă în dreapta, deci la orice lățime ea rămâne în cadru, iar ce se taie
      întâi e marginea din stânga, unde oricum e doar podeaua atelierului.
   2. Textul devine ALB. Luminozitatea medie a treimii din stânga a fotografiei e 68/255 —
      întunecată. Textul navy de dinainte (#16233d) ar fi fost ilizibil acolo.
   3. Peste fotografie vine un voal întunecat care se stinge spre dreapta (`.dph-hero-fade`,
      reaprins special pentru asta). Se oprește la 62% ca să NU atingă trusa — exact ce a cerut
      Marius: textul să nu stea peste tester. */
.dph-hero { background: #16233d; overflow: hidden; }
.dph-hero-rel {
	position: relative;
	min-height: clamp(487px, 34vw, 620px);
}
.dph-hero-photo {
	position: absolute; inset: 0;
	background: url('/wp-content/uploads/2026/09/hero-service-diagnozapro.webp') no-repeat center right;
	background-size: cover;
}
/* Sub 900px, aceeași poză dar redimensionată (900x386, 52 KB — era 161 KB la 1920x823):
   pe mobil oricum se vede „cover" pe o bandă de ~390px lățime, deci originalul de desktop
   era doar greutate în plus în calea LCP-ului. Recomprimare verificată: fișier mai mic,
   nu regenerat cu AI. (08.09.2026, viteză mobil.) */
@media (max-width: 900px) {
	.dph-hero-photo {
		background-image: url('/wp-content/uploads/2026/09/hero-service-diagnozapro-mobil.webp');
	}
}
.dph-hero-fade {
	/* Reaprins pe 03.09: acum chiar are ce topi. Fotografia are fundal propriu, deci fără voal
	   textul alb s-ar pierde în reflexiile de pe capotă. Se oprește înainte de trusă. */
	position: absolute; inset: 0;
	background: linear-gradient(to right,
		rgba(12, 20, 36, 0.86) 0%,
		rgba(12, 20, 36, 0.74) 28%,
		rgba(12, 20, 36, 0.34) 48%,
		rgba(12, 20, 36, 0) 62%);
}

.dph-hero-in { max-width: 1280px; margin: 0 auto; padding: 44px 32px 46px; position: relative; }
.dph-hero-txt { display: flex; flex-direction: column; gap: 16px; max-width: 560px; }
.dph-eyebrow {
	font-family: 'Space Grotesk', sans-serif; font-size: 12px; letter-spacing: 2px;
	color: #8fb4ff; text-transform: none; margin: 0; font-weight: 400;
}
.dph-h1 {
	margin: 0; color: #ffffff; font-size: 44px; font-weight: 800;
	line-height: 1.08; letter-spacing: -1px; max-width: 15ch;
	text-shadow: 0 2px 18px rgba(0, 0, 0, 0.45);
}
.dph-lead {
	margin: 0; color: #d5dce8; font-size: 19px; line-height: 1.6; max-width: 48ch;
	text-shadow: 0 1px 12px rgba(0, 0, 0, 0.45);
}
.dph-lead strong { color: #ffffff; }
.dph-hero-btns { display: flex; gap: 14px; margin-top: 8px; }
/* Butonul secundar era conturat în navy — invizibil pe fotografie. Pe hero îl trecem pe alb. */
.dph-hero .dph-btn--ghost { border-color: rgba(255, 255, 255, 0.55); color: #ffffff !important; background: rgba(255, 255, 255, 0.06); }
.dph-hero .dph-btn--ghost:hover { border-color: #ffffff; background: rgba(255, 255, 255, 0.16); color: #ffffff !important; }
.dph-hero-meta { font-family: 'Space Grotesk', sans-serif; font-size: 12px; color: #a9b6cb; margin-top: 6px; }

/* ============ 2. CARDURI DE ÎNCREDERE (tot pe fundalul hero-ului) ============ */
.dph-trust {
	max-width: 1280px; margin: 0 auto; padding: 0 32px 48px;
	display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
}
.dph-trust-card {
	background: #ffffff; border: 1px solid #dbe4f2; border-radius: 14px; padding: 20px;
	display: flex; flex-direction: column; gap: 7px;
}
.dph-trust-head { display: flex; align-items: center; gap: 10px; }
.dph-trust-ico {
	width: 32px; height: 32px; border-radius: 50%; background: var(--dph-ico-bg); color: var(--dph-blue);
	display: flex; align-items: center; justify-content: center; font-weight: 800; flex-shrink: 0;
}
.dph-trust-card h3 { margin: 0; font-size: 15px; font-weight: 800; color: #16233d; }
.dph-trust-d { font-size: 13px; color: #5a6675; line-height: 1.5; }

/* ============ 2-BIS. TREI DRUMURI DE PORNIRE (19.08.2026) ============
   Stă între hero și banda de ofertă, în locul celor 4 carduri de încredere.
   ⭐ Cerință Marius: „alt stil, nu acela de box" ⇒ NICIUN card — fără fundal propriu,
   fără chenar în jur, fără umbră, fără colțuri rotunjite. Doar trei coloane despărțite
   de o linie de 1px, cu aer în jur. Ce le ține împreună e spațiul, nu o cutie.
   ⚠️ Prima coloană NU are padding la stânga și ultima la dreapta, ca textul să înceapă
   exact pe linia de conținut a site-ului (x=112), nu cu 32px mai în interior. */
.dph-start { max-width: 1280px; margin: 0 auto; padding: 46px 32px 40px; }
.dph-start-in {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0;
}
.dph-start-c {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 7px;
	padding: 6px 34px;
	color: inherit;
	text-decoration: none;
	border-left: 1px solid #E7ECF4;
	transition: border-color .15s ease;
}
.dph-start-c:first-child { padding-left: 0; border-left: none; }
.dph-start-c:last-child  { padding-right: 0; }

/* 09.09.2026: `.dph-start-nr` (numerele 01/02/03) a fost SCOS din HTML la cererea lui Marius;
   regulile lui au plecat odată cu el, ca să nu rămână CSS mort. */
.dph-start-t { font-size: 17px; font-weight: 800; line-height: 1.25; color: #16233d; letter-spacing: -0.2px; }
/* 09.09.2026: descrierea era cel mai șters text din secțiune (#5a6675 la 13,5px) și Marius a
   cerut-o mai vizibilă. #4a5568 pe alb = 7,1:1 (era 5,4:1), plus jumătate de punct de mărime. */
.dph-start-d { font-size: 14px; line-height: 1.6; color: #4a5568; }
.dph-start-go {
	display: inline-flex; align-items: center; gap: 7px;
	margin-top: 5px;
	font-size: 13.5px; font-weight: 700; color: var(--dph-blue);
}
.dph-start-go svg { transition: transform .15s ease; }

/* Fără card, „apăsabil" trebuie spus altfel: se aprinde linkul, se mișcă săgeata. */
.dph-start-c:hover .dph-start-go { color: var(--dph-blue-d); }
.dph-start-c:hover .dph-start-go svg { transform: translateX(3px); }
.dph-start-c:focus-visible { outline: 2px solid var(--dph-blue); outline-offset: 6px; border-radius: 4px; }

@media (max-width: 999px) {
	.dph-start { padding: 34px 24px 30px; }
	.dph-start-in { grid-template-columns: 1fr; }
	/* pe o coloană, linia despărțitoare trece de la stânga sus */
	.dph-start-c { padding: 22px 0; border-left: none; border-top: 1px solid #E7ECF4; }
	.dph-start-c:first-child { padding-top: 0; border-top: none; }
	.dph-start-c:last-child { padding-bottom: 0; }
}
@media (max-width: 700px) {
	.dph-start { padding: 28px 20px 26px; }
}

/* ============ 3. OFERTA SĂPTĂMÂNII ============ */
.dph-promo { max-width: 1280px; margin: 0 auto; padding: 24px 32px 0; }
.dph-promo-in {
	background: #fffaf8; border: 1px solid #efe0da; border-radius: 14px; padding: 18px 26px;
	display: flex; align-items: center; gap: 22px; flex-wrap: wrap;
}
/* ⭐ 19.08 — banda era „prea țipătoare" (Marius). Roșul plin + pulsul + butonul
   roșu erau singurele accente stridente dintr-un site altfel liniștit. Acum roșul
   rămâne DOAR ca semn mic (eticheta și reducerea), iar acțiunea trece pe albastrul
   site-ului. ⛔ Pulsul e SCOS, nu încetinit — o animație care nu se oprește niciodată
   trage ochiul permanent, exact ce deranja. */
.dph-promo-tag {
	background: #fdeeea; color: var(--dph-red-d); border: 1px solid #f3d5cd;
	font-family: 'Space Grotesk', sans-serif;
	font-size: 11.5px; font-weight: 700; letter-spacing: 1.2px; padding: 7px 12px; border-radius: 8px;
	white-space: nowrap;
	display: inline-flex; align-items: center; gap: 6px;
}
.dph-promo-blitz { flex-shrink: 0; }
.dph-promo-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1 1 0; }
.dph-promo-name { font-size: 17px; font-weight: 800; color: #16233d; line-height: 1.3; }
/* 09.09.2026: subtitlul era cel mai șters text din bandă (#5a6675/13,5px). Marius l-a cerut
   mai vizibil ⇒ #4a5568 (7,1:1 pe alb) la 14px. */
.dph-promo-sub { font-size: 14px; color: #4a5568; line-height: 1.5; }
/* ⭐ 09.09.2026: numele reale de produs sunt lungi și ieșeau tăiate cu „…" chiar de la jumătate
   („…cu program…"), fiindcă banda era ținută cu forța pe UN rând. Odată ce eticheta
   „Economisești" a plecat, textul are loc: se lasă pe cel mult DOUĂ rânduri (`line-clamp`),
   nu la nesfârșit — o descriere lungă tot n-are voie să umfle banda. */
.dph-promo-name, .dph-promo-sub {
	display: -webkit-box; -webkit-box-orient: vertical;
	-webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
}
.dph-promo-right { margin-left: auto; display: flex; align-items: center; gap: 16px; }
.dph-promo-prices { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; }
/* ⭐ 09.09.2026, cerere Marius: prețul vechi era gri-deschis (#98a3b3 = 2,5:1 pe alb, sub orice
   prag de lizibilitate — Google îl semnala la contrast) și nu se vedea că e o reducere. Acum e
   roșul potolit al site-ului, tăiat. NU roșu aprins: `--dph-red` (#C24A3F) dă 4,9:1 pe fundalul
   crem al benzii, deci se citește, fără să țipe lângă prețul nou. */
.dph-promo-old { font-size: 15px; font-weight: 600; color: var(--dph-red); text-decoration: line-through; text-decoration-thickness: 1.5px; }
.dph-promo-new { font-size: 24px; font-weight: 800; color: #16233d; line-height: 1; }
/* `.dph-promo-save` (eticheta „Economisești X lei") a fost SCOASĂ din HTML pe 09.09.2026 —
   regulile ei au plecat odată cu ea. */
.dph-promo-btn {
	background: var(--dph-blue); color: #ffffff !important; font-weight: 700; font-size: 14.5px;
	padding: 12px 24px; border-radius: 10px; white-space: nowrap;
}
.dph-promo-btn:hover { background: var(--dph-blue-d, #234E96); color: #ffffff !important; }

/* ============ capete de secțiune + grile ============ */
.dph-cats   { max-width: 1280px; margin: 0 auto; padding: 52px 32px 8px; }
.dph-prods  { max-width: 1280px; margin: 0 auto; padding: 52px 32px 8px; }
.dph-brands { max-width: 1280px; margin: 0 auto; padding: 44px 32px 0; }
.dph-faq    { max-width: 1280px; margin: 0 auto; padding: 52px 32px 0; }
.dph-video  { max-width: 1280px; margin: 0 auto; padding: 52px 32px 0; }
.dph-revs   { max-width: 1280px; margin: 0 auto; padding: 52px 32px 0; }
.dph-blog   { max-width: 1280px; margin: 0 auto; padding: 52px 32px 0; }
.dph-seo    { max-width: 1280px; margin: 0 auto; padding: 40px 32px 8px; }
/* `.dph-cta` (banda finală) e definită în `comun.css` — apare pe toate paginile. */

.dph-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 22px; gap: 16px; }
/* 09.09.2026: `.dph-sub` (subtitlul din capul secțiunii „Ce spun clienții") nu avea NICIUN stil —
   era un `<p>` cu marginile implicite ale browserului, care îl scoteau din linia de bază a
   titlului. De aici venea o parte din „se încurcă". */
.dph-sub { margin: 0; font-size: 13.5px; line-height: 1.5; color: #5a6675; }
.dph-h2 { margin: 0; font-size: 26px; font-weight: 800; color: #16233d; letter-spacing: -0.5px; line-height: normal; }
.dph-more { font-size: 14px; font-weight: 700; color: var(--dph-blue); white-space: nowrap; }
.dph-more:hover { color: var(--dph-blue-d); }
.dph-more--static { cursor: default; }
/* varianta scurtă a linkului „Toate →" există doar pentru telefon (vezi blocul ≤767px) */
.dph-more-s { display: none; }

.dph-g4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.dph-g3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }

/* ============ 4. CARD DE CATEGORIE ============ */
.dph-cat {
	background: #ffffff; border: 1px solid #e3e8f0; border-radius: 14px; padding: 20px;
	display: flex; flex-direction: column; gap: 14px; color: #16233d !important;
	transition: border-color .15s, box-shadow .15s;
}
.dph-cat:hover { border-color: var(--dph-blue); box-shadow: 0 10px 26px rgba(22, 35, 61, 0.08); color: #16233d !important; }
.dph-cat-img {
	height: 120px; border-radius: 10px; background: #ffffff;
	display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.dph-cat-img img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; display: block; }
.dph-cat h3 { margin: 0; font-size: 15.5px; font-weight: 700; color: #16233d; }
.dph-cat-go { font-size: 13.5px; font-weight: 600; color: var(--dph-blue); margin-top: auto; }

/* ============ 5. CARD DE PRODUS ============ */
.dph-prod {
	background: #ffffff; border: 1px solid #e3e8f0; border-radius: 14px; padding: 20px;
	display: flex; flex-direction: column; gap: 11px; transition: box-shadow .15s;
}
.dph-prod:hover { box-shadow: 0 12px 30px rgba(22, 35, 61, 0.1); }
.dph-prod-imglink { display: block; }
.dph-prod-img {
	height: 170px; border-radius: 10px; background: #ffffff;
	display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.dph-prod-img img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; display: block; }
.dph-prod h3 {
	margin: 0; font-size: 15px; font-weight: 700; line-height: 1.35; min-height: 40px;
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.dph-prod h3 a { color: #16233d; }
.dph-prod h3 a:hover { color: var(--dph-blue); }
.dph-prod-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dph-stock { font-size: 12px; font-weight: 700; }
.dph-stock--in  { color: var(--dph-green); }
.dph-stock--low { color: var(--dph-orange); }
.dph-stock--out { color: #667080; } /* 09.09.2026: era #8b97a8 = 2,96:1 pe alb; acum 5,01:1 */
.dph-save {
	background: var(--dph-save-bg); color: var(--dph-red-d); font-size: 11.5px; font-weight: 700;
	padding: 3px 9px; border-radius: 999px;
}
.dph-price-row { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.dph-price { font-size: 22px; font-weight: 800; color: #16233d; }
.dph-price-old { font-size: 14px; color: #66727f; text-decoration: line-through; }
.dph-price-net { font-size: 13px; color: #5a6675; }
.dph-prod-btn {
	display: block; text-align: center; background: transparent; color: var(--dph-blue) !important;
	border: 1.5px solid var(--dph-blue); border-radius: 10px; padding: 11px 0;
	font-weight: 700; font-size: 14px; margin-top: auto; transition: background .15s, color .15s;
}
.dph-prod-btn:hover { background: var(--dph-blue); color: #ffffff !important; }

/* ============ 6. BANDA DE MĂRCI ============ */
.dph-brands-in {
	border-top: 1px solid #e3e8f0; border-bottom: 1px solid #e3e8f0; padding: 24px 0;
	display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap;
}
/* ⚠️ 09.09.2026 — BUG TĂCUT, găsit azi: regula era scrisă pe `span`, dar din 04.09 mărcile se
   randează ca `<a>` (au devenit linkuri). Selectorul nu se mai potrivea cu nimic ⇒ numele
   pierduseră tot stilul (bold, spațiere, culoare) și arătau ca text obișnuit. De aceea Marius
   a cerut „bold și clickabil": erau clickabile, dar nu arătau deloc așa.
   ⭐ Lecția: când schimbi eticheta HTML a unui element, caută în CSS selectorii scriși pe
   eticheta veche — nimic nu dă eroare, stilul pur și simplu dispare. */
.dph-brands-in a {
	font-weight: 800; font-size: 17px; letter-spacing: 3px; color: #3d4a5c;
	text-decoration: none; transition: color .15s ease;
}
.dph-brands-in a:hover,
.dph-brands-in a:focus-visible {
	color: var(--dph-blue);
	text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px;
}

/* ============ 7. ÎNTREBĂRI FRECVENTE ============ */
.dph-faq .dph-h2 { margin: 0 0 18px; }
.dph-faq-list { display: flex; flex-direction: column; gap: 10px; }
.dph-faq-list details { background: #ffffff; border: 1px solid #e3e8f0; border-radius: 12px; padding: 16px 20px; }
.dph-faq-list summary {
	list-style: none; cursor: pointer; font-size: 15px; font-weight: 700; color: #16233d;
	display: flex; justify-content: space-between; gap: 12px;
}
.dph-faq-list summary i { color: var(--dph-blue); font-style: normal; }
.dph-faq-list p { margin: 10px 0 0; font-size: 14px; line-height: 1.65; color: #4a5568; }
.dph-faq-note { margin: 16px 0 0; font-size: 14.5px; line-height: 1.6; color: #4a5568; }
/* ⭐ 09.09.2026: linkurile din interiorul unui paragraf se deosebeau DOAR prin culoare — ultimul
   lucru semnalat de Google la accesibilitate („Links rely on color to be distinguishable"), și o
   problemă reală pentru cine nu distinge bine albastrul de negru. Sublinierea le face vizibile
   fără culoare. ⚠️ `.dph a { text-decoration: none }` din comun.css o stinge global, deci trebuie
   reaprinsă explicit exact acolo unde un link stă ÎN text. */
.dph-faq-note a { color: var(--dph-blue); text-decoration: underline; text-underline-offset: 3px; }
.dph-faq-note a:hover { color: var(--dph-blue-d); }

/* ============ 8. VEZI CUM LUCRĂM (fotografie în stânga) ============
   08.09.2026: caseta ținea un placeholder (dungi + buton „play" fals). Acum ține o fotografie
   reală din depozit. `overflow:hidden` e obligatoriu — fără el colțurile rotunjite ale casetei
   nu taie imaginea și iese un dreptunghi peste bordură. */
.dph-video-grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: 48px; align-items: center; }
.dph-video-frame {
	height: 380px; border-radius: 16px; border: 1px solid #e3e8f0; overflow: hidden;
	background: repeating-linear-gradient(45deg, #edf1f7 0 12px, #e5eaf3 12px 24px);
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
}
.dph-video-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dph-video-txt { display: flex; flex-direction: column; gap: 12px; }
/* ⚠️ 09.09.2026: `.dph-eyebrow` a fost gândit pentru banda EROU, care are fundal închis — de
   aceea e albastru-deschis (#8fb4ff). Aici stă pe ALB: 2,2:1, practic ilizibil. Aceeași clasă,
   două fundaluri diferite ⇒ trebuie spus explicit pe ce fundal e. */
.dph-video-txt .dph-eyebrow { color: var(--dph-blue); font-weight: 700; }
.dph-video-txt h2 { margin: 0; font-size: 27px; font-weight: 800; color: #16233d; letter-spacing: -0.5px; line-height: 1.15; }
.dph-video-txt p { margin: 0; font-size: 15px; color: #4a5568; line-height: 1.65; }
.dph-video-list { display: flex; flex-direction: column; gap: 7px; margin-top: 4px; }
.dph-video-list span { font-size: 14px; color: #33415c; }
.dph-video-list b { color: var(--dph-blue); font-weight: 800; }
.dph-video-more { font-size: 14px; font-weight: 700; margin-top: 4px; color: var(--dph-blue); }
.dph-video-more:hover { color: var(--dph-blue-d); }

/* ============ 9. CE SPUN CLIENȚII ============ */
.dph-rev { border: 1px solid #e3e8f0; border-radius: 14px; padding: 24px; display: flex; flex-direction: column; gap: 10px; }
.dph-rev-stars { color: #e8a13a; font-size: 15px; letter-spacing: 2px; }
.dph-rev-star-off { opacity: 0.3; }
.dph-rev p { margin: 0; font-size: 14px; line-height: 1.65; color: #33415c; }
.dph-rev-who { display: flex; flex-direction: column; gap: 1px; margin-top: auto; }
.dph-rev-name { font-size: 13.5px; font-weight: 800; color: #16233d; }
/* 09.09.2026: #8b97a8 pe alb = 2,9:1, sub pragul de 4,5:1 (Google îl semnala, iar Marius spune
   că îl citește greu și el). #667080 = 4,8:1, aceeași nuanță rece, doar mai închisă. */
.dph-rev-role { font-size: 12.5px; color: #667080; }

/* ============ 10. ULTIMELE DE PE BLOG ============ */
.dph-blog-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.dph-art {
	border: 1px solid #e3e8f0; border-radius: 14px; overflow: hidden;
	display: flex; flex-direction: column; color: #16233d !important; transition: box-shadow .15s;
}
.dph-art:hover { box-shadow: 0 12px 30px rgba(22, 35, 61, 0.1); color: #16233d !important; }
.dph-art-img { height: 130px; background: #f7f9fc; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.dph-art-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dph-art-in { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 8px; }
.dph-art-meta { font-size: 12px; color: #667080; } /* 09.09.2026: contrast, ca la .dph-rev-role */
.dph-art h3 { margin: 0; font-size: 15px; font-weight: 800; line-height: 1.35; color: #16233d; }
.dph-art-exc { font-size: 12.5px; line-height: 1.55; color: #5a6675; }

/* ============ 11. BLOC DE TEXT SEO ============ */
.dph-seo-in { max-width: 860px; }
.dph-seo h2 { margin: 0 0 10px; font-size: 20px; font-weight: 800; color: #16233d; letter-spacing: 0; line-height: normal; }
.dph-seo p { margin: 0; font-size: 14.5px; line-height: 1.65; color: #4a5568; }
.dph-seo details { margin-top: 10px; }
.dph-seo summary { list-style: none; cursor: pointer; font-size: 13.5px; font-weight: 700; color: var(--dph-blue); }
.dph-seo details p { margin: 12px 0 0; }

/* ============ 12. BANDA FINALĂ + NEWSLETTER — MUTATE în `comun.css` (09.09.2026)
   Apar pe toate paginile, nu doar aici. Vezi explicația din capul lui comun.css. */

/* ==========================================================================
   MOBIL — macheta e doar pentru desktop; aici o coloană, aceleași reguli.
   ========================================================================== */
@media (max-width: 1100px) {
	.dph-video-grid { grid-template-columns: 1fr; gap: 28px; }
	.dph-blog-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 960px) {
	.dph-hero-photo { background-position: center right 22%; }
	/* Pe ecran îngust nu mai există „stânga liberă": voalul acoperă tot, altfel textul cade
	   peste capotă și nu se mai citește. */
	.dph-hero-fade { background: linear-gradient(to bottom, rgba(12,20,36,.90) 0%, rgba(12,20,36,.72) 60%, rgba(12,20,36,.62) 100%); }
	.dph-hero-txt { max-width: none; }
	.dph-hero-txt { max-width: none; }
	.dph-h1 { font-size: 34px; max-width: none; }
	.dph-hero-in { padding: 44px 24px 48px; }
	.dph-trust { grid-template-columns: repeat(2, 1fr); padding: 0 24px 40px; }
	.dph-g4 { grid-template-columns: repeat(2, 1fr); }
	.dph-g3 { grid-template-columns: 1fr; }
	.dph-cats, .dph-prods, .dph-brands, .dph-faq, .dph-video,
	.dph-revs, .dph-blog, .dph-seo, .dph-promo { padding-left: 24px; padding-right: 24px; }
	.dph-video-frame { height: 260px; }
	.dph-video-txt h2 { font-size: 23px; }
}
@media (max-width: 640px) {
	.dph-hero-in { padding: 32px 20px 36px; }
	.dph-h1 { font-size: 28px; letter-spacing: -0.5px; }
	.dph-lead { font-size: 16.5px; }
	.dph-hero-btns { flex-direction: column; align-items: stretch; }
	.dph-trust { grid-template-columns: 1fr; padding: 0 20px 32px; }
	.dph-cats, .dph-prods, .dph-brands, .dph-faq, .dph-video,
	.dph-revs, .dph-blog, .dph-seo, .dph-promo { padding-left: 20px; padding-right: 20px; }
	.dph-cats, .dph-prods { padding-top: 36px; }
	.dph-faq, .dph-video, .dph-revs, .dph-blog { padding-top: 36px; }
	.dph-h2 { font-size: 21px; }
	.dph-head { flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
	.dph-g4 { grid-template-columns: repeat(2, 1fr); gap: 14px; }
	.dph-blog-grid { grid-template-columns: 1fr; }
	.dph-cat, .dph-prod { padding: 14px; gap: 10px; }
	.dph-prod-img { height: 130px; }
	.dph-cat-img { height: 100px; }
	.dph-price { font-size: 19px; }
	.dph-promo-in { padding: 16px 18px; gap: 14px; }
	.dph-promo-right { margin-left: 0; width: 100%; flex-wrap: wrap; gap: 12px; }
	.dph-promo-prices { align-items: flex-start; }
	.dph-promo-txt { flex: 1 1 100%; }
	.dph-promo-name, .dph-promo-sub { white-space: normal; overflow: visible; text-overflow: clip; }
	.dph-promo-btn { flex: 1 0 100%; text-align: center; }
	.dph-brands-in a { font-size: 14px; letter-spacing: 2px; }
	.dph-video-frame { height: 210px; }
}

/* ==========================================================================
   TELEFON (≤767px) — macheta „Mobil Homepage A" (design/mobil/, 19.08.2026)
   --------------------------------------------------------------------------
   Până acum mobilul era doar desktopul îngustat pe o coloană: 9.410px de pagină
   față de 3.955px cât are macheta. Blocul de mai jos NU rearanjează HTML-ul
   (desktopul trebuie să rămână neatins) — schimbă doar felul în care se așază
   aceleași elemente sub 767px.
   ⚠️ Vine ULTIMUL în fișier intenționat: la 390px se aplică și blocul de 640px,
   iar la specificitate egală câștigă regula scrisă mai jos.
   ========================================================================== */
@media (max-width: 767px) {

	/* --- ordinea vizuală din machetă -------------------------------------
	   Macheta mobilă pune întrebările frecvente DUPĂ părerile clienților, nu
	   înaintea video-ului cum le cere macheta de desktop. Mutăm ordinea, nu
	   HTML-ul: `order` acționează doar cât timp e activă regula asta, deci
	   desktopul rămâne exact cum era. */
	.dph { display: flex; flex-direction: column; }
	/* ⚠️⚠️ Cele trei corecții de mai jos sunt PREȚUL lui `display:flex` pe `.dph`
	   și niciuna nu e opțională:
	   • `margin-inline: 0` — secțiunile au `margin: 0 auto` (centrare pe desktop).
	     Într-un flex, o margine `auto` pe axa transversală înghite spațiul liber
	     ȘI anulează întinderea ⇒ secțiunile se strângeau la lățimea conținutului
	     și se centrau (măsurat la 767px: „Categorii" avea 414px din 767).
	   • `max-width: 100%` — rândul derulabil de la „Ce spun clienții" măsoară
	     866px (3 carduri); fără plafon, secțiunea se lățea la 866 și scotea
	     „Toate →" din ecran.
	   • `min-width: 0` — ca elementul să aibă voie să se strângă sub conținut. */
	.dph > * { min-width: 0; max-width: 100%; margin-inline: 0; }
	.dph-hero   { order: 1; }
	.dph-start  { order: 2; }
	.dph-promo  { order: 3; }
	.dph-cats   { order: 4; }
	.dph-prods  { order: 5; }
	.dph-brands { order: 6; }
	.dph-video  { order: 7; }
	.dph-revs   { order: 8; }
	.dph-faq    { order: 9; }
	.dph-blog   { order: 10; }
	.dph-seo    { order: 11; }
	.dph-cta    { order: 12; }

	/* --- 1. HERO ---------------------------------------------------------
	   ⚠️ `min-height: clamp(487px, …)` era motivul pentru care hero-ul avea
	   487px pe telefon deși textul lui ocupă ~360: înălțimea fusese pusă pentru
	   fotografia din dreapta, care pe mobil nici nu se încarcă.
	   ⚠️ Macheta pune aici un substituent de fotografie (130px). NU îl punem:
	   pe telefon hero-ul e intenționat fără imagine (zero octeți descărcați,
	   fiindcă o imagine de fundal dintr-un @media inactiv nu se cere deloc). */
	.dph-hero-rel { min-height: 0; }
	.dph-hero-in { padding: 24px 16px 20px; }
	.dph-hero-txt { gap: 10px; }
	.dph-eyebrow { font-size: 11px; letter-spacing: 2px; }
	.dph-h1 { font-size: 29px; line-height: 1.1; letter-spacing: -0.7px; }
	.dph-lead { font-size: 14.5px; line-height: 1.55; }
	.dph-hero-btns { flex-direction: column; gap: 10px; margin-top: 6px; }
	.dph-hero-meta { font-size: 11px; margin-top: 2px; text-align: center; }

	/* --- 2. CELE 4 CARDURI DE ÎNCREDERE (stinse prin comutator) ----------
	   Nu se aprind de aici; regulile există ca să arate corect DACĂ Marius
	   repornește `DIAGPRO_CARDURI_INCREDERE`. Macheta: grilă 2×2, gap 10. */
	.dph-trust { grid-template-columns: 1fr 1fr; gap: 10px; padding: 16px 16px 0; }
	.dph-trust-card { padding: 12px; gap: 5px; border-radius: 12px; }
	.dph-trust-ico { width: 26px; height: 26px; font-size: 13px; }
	.dph-trust-card h3 { font-size: 13px; line-height: 1.2; }
	.dph-trust-d { font-size: 11.5px; line-height: 1.45; }

	/* --- 2-bis. TREI DRUMURI DE PORNIRE ----------------------------------
	   Nu e în machetă (decizie Marius 19.08), dar rămâne. Pe telefon păstrează
	   ideea de pe desktop: numere, fără casete, despărțite de o linie de 1px. */
	.dph-start { padding: 22px 16px 4px; }
	.dph-start-c { padding: 15px 0; gap: 5px; }
	.dph-start-t { font-size: 15.5px; }
	.dph-start-d { font-size: 13.5px; line-height: 1.55; }
	.dph-start-go { font-size: 13px; margin-top: 3px; }

	/* --- 3. OFERTA SĂPTĂMÂNII --------------------------------------------
	   ⭐ Tonul potolit hotărât pe 19.08 rămâne: fără puls, buton albastru.
	   Macheta e mai țipătoare (etichetă roșie plină) — nu o urmăm acolo. */
	.dph-promo { padding: 16px 16px 0; }
	.dph-promo-in { padding: 16px; gap: 10px; border-radius: 14px; }
	.dph-promo-tag { font-size: 10.5px; letter-spacing: 1.5px; padding: 7px 12px; align-self: flex-start; }
	.dph-promo-name { font-size: 16px; -webkit-line-clamp: 3; line-clamp: 3; }
	/* 09.09.2026: pe telefon subtitlul avea 12,5px — cel mai mic text din bandă. Marius l-a
	   cerut mai vizibil ⇒ 13,5px, și 3 rânduri în loc de 2 (pe lat de telefon încap mai puține
	   cuvinte pe rând, deci aceeași frază are nevoie de un rând în plus). */
	.dph-promo-sub { font-size: 13.5px; -webkit-line-clamp: 3; line-clamp: 3; }
	.dph-promo-right { width: 100%; margin-left: 0; flex-wrap: wrap; align-items: baseline; gap: 10px; }
	/* macheta pune prețul nou întâi și pe cel vechi lângă el, pe aceeași linie
	   de bază; în HTML ordinea e invers (vechi, nou) — o întoarcem cu `order` */
	.dph-promo-prices { flex-direction: row; align-items: baseline; gap: 10px; }
	.dph-promo-old { order: 2; font-size: 15px; }
	.dph-promo-new { font-size: 24px; }
	.dph-promo-btn { flex: 1 0 100%; text-align: center; padding: 13px 0; font-size: 14.5px; }

	/* --- capete de secțiune + margini ------------------------------------
	   Macheta: `padding: 26–28px 16px 0` la fiecare secțiune, titlu 20px. */
	.dph-cats, .dph-prods, .dph-faq { padding: 28px 16px 0; }
	.dph-brands, .dph-video, .dph-blog, .dph-seo { padding: 26px 16px 0; }
	.dph-revs { padding: 26px 0 0; }
	.dph-head { margin-bottom: 14px; gap: 12px; flex-wrap: nowrap; }
	.dph-h2 { font-size: 20px; letter-spacing: -0.4px; }
	.dph-more { font-size: 13px; white-space: nowrap; position: relative; }
	.dph-more-l { display: none; }
	.dph-more-s { display: inline; }
	/* Linkurile mici („Toate →", „Mai multe despre noi →") au 21px de text, dar
	   degetul cere 44. Zona de atins se mărește cu un strat invizibil, NU cu
	   padding: padding-ul ar coborî linia de bază și ar strica alinierea din cap. */
	.dph-more::after, .dph-video-more::after {
		content: ''; position: absolute; left: -10px; right: -10px;
		top: 50%; height: 44px; transform: translateY(-50%);
	}
	.dph-video-more { position: relative; align-self: flex-start; }

	/* --- 4. CATEGORII ----------------------------------------------------
	   Macheta: 2 coloane, gap 10, imagine 72px, numele dedesubt. Fără link
	   separat „Vezi produsele →" — cardul întreg e deja un link, iar rândul
	   acela adăuga 28px × 4 rânduri degeaba. */
	.dph-cats .dph-g4 { grid-template-columns: 1fr 1fr; gap: 10px; }
	.dph-cat { padding: 12px; gap: 9px; border-radius: 12px; }
	.dph-cat-img { height: 72px; border-radius: 8px; }
	.dph-cat h3 { font-size: 13px; line-height: 1.3; }
	.dph-cat-go { display: none; }

	/* --- 5. RECOMANDĂRILE NOASTRE ----------------------------------------
	   ⭐ Aici era jumătate din problema de lungime: cardurile verticale pe 2
	   coloane aveau ~370px fiecare. Macheta cere RÂNDURI pe toată lățimea:
	   miniatură 104×118 la stânga, în dreapta titlu / stoc / preț / link.
	   Se face din grilă, ca să nu fie nevoie de un ambalaj nou în HTML
	   (adică fără nicio schimbare care să atingă desktopul).
	   Rândul 2 (stoc) primește spațiul liber ⇒ prețul și linkul stau lipite
	   de baza cardului, exact ca în machetă. */
	.dph-prods .dph-g4 { display: flex; flex-direction: column; gap: 12px; }
	.dph-prod {
		display: grid;
		grid-template-columns: 104px minmax(0, 1fr);
		grid-template-rows: auto 1fr auto auto;
		column-gap: 12px;
		row-gap: 5px;
		padding: 12px;
		border-radius: 14px;
	}
	.dph-prod-imglink { grid-column: 1; grid-row: 1 / span 4; }
	.dph-prod-img { width: 104px; height: 118px; border-radius: 10px; }
	.dph-prod > h3 { grid-column: 2; grid-row: 1; font-size: 13.5px; line-height: 1.3; min-height: 0; }
	.dph-prod-meta { grid-column: 2; grid-row: 2; align-self: start; gap: 7px; }
	.dph-prod-prices { grid-column: 2; grid-row: 3; }
	.dph-prod-btn { grid-column: 2; grid-row: 4; }
	.dph-stock { font-size: 11px; }
	.dph-save { font-size: 10.5px; padding: 2px 8px; }
	/* line-height strâns: la 18px preț, înălțimea moștenită de la temă (1,6)
	   adăuga 11px de aer în fiecare rând de produs, adică 55px pe secțiune */
	.dph-price-row { gap: 8px; line-height: 1.15; }
	.dph-price { font-size: 18px; line-height: 1.15; }
	.dph-price-old { font-size: 12px; }
	.dph-price-net { font-size: 11px; line-height: 1.4; }
	/* în machetă „Vezi detalii →" e un link simplu, nu un buton cu chenar */
	.dph-prod-btn {
		background: none; border: 0; border-radius: 0; margin-top: 0;
		padding: 5px 14px 0 0; text-align: left; font-size: 12.5px; font-weight: 700;
		position: relative;
	}
	.dph-prod-btn:hover { background: none; color: var(--dph-blue) !important; }
	/* aceeași poveste: link de 26px, zonă de atins de 44 (intră în padding-ul cardului) */
	.dph-prod-btn::after { content: ''; position: absolute; left: 0; right: 0; top: -6px; bottom: -12px; }
	/* macheta arată 5 produse; celelalte 3 rămân pentru desktop (grilă 4×2) */
	.dph-prods .dph-g4 > .dph-prod:nth-child(n+6) { display: none; }

	/* --- 6. BANDA DE MĂRCI ----------------------------------------------- */
	/* ⭐ 09.09.2026, cerere Marius („se sparge rău de tot pe mobil"): cu `flex-wrap` cele 6
	   mărci cădeau 4 pe primul rând și 2 pe al doilea, centrate — arăta ca o listă ruptă.
	   Măsurat pe iPhone (393px): acum e o grilă de 3×2, aceleași distanțe pe ambele rânduri.
	   La 393px lat, o celulă are ~117px; „AUTOCOM" (cel mai lung) ocupă ~88px la 13px bold
	   cu 1,5px spațiere ⇒ încape și pe telefoanele de 360px, fără să se rupă. */
	.dph-brands-in {
		display: grid; grid-template-columns: repeat(3, 1fr);
		gap: 16px 6px; justify-items: center; align-items: center;
		padding: 16px 0;
	}
	.dph-brands-in a { font-size: 13px; letter-spacing: 1.5px; }

	/* --- 7. VEZI CUM LUCRĂM ---------------------------------------------- */
	.dph-video-grid { grid-template-columns: 1fr; gap: 14px; }
	.dph-video-frame { height: 190px; border-radius: 14px; gap: 10px; }
	/* `.dph-video-play` și `.dph-video-cap` au dispărut odată cu placeholderul (08.09.2026) —
	   regulile lor au fost șterse ca să nu rămână CSS mort care derutează la următoarea citire. */
	.dph-video-txt { gap: 8px; }
	.dph-video-txt h2 { font-size: 19px; line-height: 1.2; }
	.dph-video-txt p { font-size: 13.5px; line-height: 1.6; }
	.dph-video-list { gap: 6px; margin-top: 2px; }
	.dph-video-list span { font-size: 13px; }
	.dph-video-more { font-size: 13px; }

	/* --- 8. CE SPUN CLIENȚII ---------------------------------------------
	   Macheta: rând derulabil pe orizontală, carduri de 270px, care ies până
	   în marginea ecranului. Trei carduri unul sub altul făceau 738px.
	   ⚠️ Mărturiile sunt cele din machetă (inventate) — se înlocuiesc la
	   go-live; aici doar li se schimbă forma, nu numărul și nu textul. */
	/* ⭐ 09.09.2026, cerere Marius („pe mobil se cam încurcă"): capul secțiunii are titlu ȘI o
	   propoziție lungă („Șase service-uri auto…"), iar `.dph-head` e `flex-wrap: nowrap` pe
	   telefon ⇒ titlul se strângea pe 3 rânduri („Ce / spun / clienții") ca să facă loc
	   textului de lângă el. Aici — și DOAR aici, unde capul are subtitlu — trec unul sub altul.
	   ⛔ Textul NU se scoate: spune că mărturiile sunt de la clienți reali, cu numele lor —
	   exact lucrul care le dă greutate. */
	.dph-revs .dph-head {
		margin-left: 16px; margin-right: 16px;
		flex-direction: column; align-items: flex-start; gap: 4px;
	}
	.dph-revs .dph-sub { font-size: 12.5px; }
	.dph-revs .dph-g3 {
		display: flex;
		gap: 12px;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
		padding: 0 16px 6px;
	}
	.dph-revs .dph-g3::-webkit-scrollbar { display: none; }
	.dph-rev { flex: 0 0 270px; max-width: 270px; scroll-snap-align: start; padding: 16px; gap: 8px; border-radius: 14px; }
	.dph-rev-stars { font-size: 13px; }
	.dph-rev p { font-size: 13px; line-height: 1.6; }
	.dph-rev-name { font-size: 12.5px; }
	.dph-rev-role { font-size: 11.5px; }

	/* --- 9. ÎNTREBĂRI FRECVENTE ------------------------------------------ */
	.dph-faq .dph-h2 { margin: 0 0 12px; }
	.dph-faq-list { gap: 8px; }
	/* padding-ul trece de pe `details` pe `summary`: arată la fel, dar rândul
	   apăsabil devine 48px în loc de 22 (textul singur). */
	.dph-faq-list details { padding: 0; border-radius: 12px; }
	.dph-faq-list summary { font-size: 13.5px; gap: 10px; padding: 13px 16px; }
	.dph-faq-list p { margin: 0 16px 13px; font-size: 13px; line-height: 1.6; }
	.dph-faq-note { margin: 14px 0 0; font-size: 13px; line-height: 1.6; }

	/* --- 10. ULTIMELE DE PE BLOG -----------------------------------------
	   Forma din macheta „Mobil Blog": rând cu miniatură 96×96 la stânga.
	   Cardurile verticale cu imagine mare făceau ~350px bucata. */
	.dph-blog-grid { grid-template-columns: 1fr; gap: 12px; }
	.dph-art { flex-direction: row; padding: 12px; gap: 12px; border-radius: 14px; overflow: visible; }
	.dph-art-img { width: 96px; height: 96px; flex: 0 0 96px; border-radius: 10px; overflow: hidden; }
	.dph-art-in { padding: 0; flex: 1 1 auto; min-width: 0; gap: 5px; }
	.dph-art-meta { font-size: 10.5px; }
	.dph-art h3 { font-size: 14px; line-height: 1.3; }
	/* macheta nu are rezumat pe rândul scurt; textul rămâne pe /blog/ și în articol */
	.dph-art-exc { display: none; }
	.dph-blog-grid .dph-art:nth-child(n+4) { display: none; }

	/* --- 11. BLOCUL SEO --------------------------------------------------- */
	.dph-seo h2 { font-size: 18px; margin: 0 0 8px; }
	.dph-seo p { font-size: 13.5px; line-height: 1.6; }
	.dph-seo summary { font-size: 13px; }

	/* --- 12. CARDUL DE AJUTOR + NEWSLETTER — MUTATE în `comun.css` (09.09.2026) */
	.dph-seo summary { position: relative; display: inline-block; }
	.dph-seo summary::after { content: ''; position: absolute; left: -10px; right: -10px; top: 50%; height: 44px; transform: translateY(-50%); }
}

/* 09.09.2026: blocul de aici (adăugat 04.09, cu `color:inherit`) a fost mutat sus, la secțiunea
   „6. BANDA DE MĂRCI", unde îi e locul. Rămâne doar conturul de focalizare, care nu era acolo. */
.dph-brands-in a:focus-visible{ outline:2px solid var(--dph-blue); outline-offset:4px; border-radius:3px; }