/* ============================================================================
   HARTA SITE-ULUI — /harta-site/
   Marcajul îl generează `mu-plugins/diagpro-harta-site.php` (scurtătura
   [diagpro_harta]). Prefix propriu `.dps-`, nefolosit de nimeni altcineva.

   ⚠️ Fișierele CSS se încarcă alfabetic ⇒ `harta.css` vine ÎNAINTEA lui `mobil.css`.
   La specificitate egală câștigă `mobil.css`. De aceea clasele împrumutate din
   fundație (`.dpm-chip`, `.dpm-scroller`, `.dpm-sectiune-cap`) sunt lăsate să-și
   facă treaba pe telefon, iar variantele mele de desktop stau închise în
   `@media (min-width: 768px)` — așa nu se bat deloc, în loc să se bată și să
   câștige cine se nimerește.
   ========================================================================== */

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

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

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

/* Titlul paginii îl dă tema (singurul <h1>). Îl aducem pe aceeași linie de 112px
   cu restul: fără asta stă la 80, iar decalajul de 32px se vede imediat sub el. */
body.dps-harta .hero-section .entry-header { padding-left: 32px; padding-right: 32px; }

/* ---------------------------------------------------------------- introducere */
.dps-intro {
	margin: 0 0 4px;
	max-width: 70ch;
	font-size: 15px;
	line-height: 1.55;
	color: var(--dp-text-soft);
}
.dps-intro a { color: var(--dp-blue); }

/* ---------------------------------------------------------------- sărituri rapide
   Pagina are trei secțiuni și e lungă; rândul ăsta scutește derularea. Pe telefon
   îl îmbracă `.dpm-chip` / `.dpm-scroller` din fundație — aici e doar desktopul.  */
.dps-sarituri {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	margin: 16px 0 0;
}
@media (min-width: 768px) {
	.dps-sarituri a {
		display: inline-flex;
		align-items: center;
		min-height: 34px;
		padding: 6px 14px;
		border: 1px solid #CDD6E4;
		border-radius: 999px;
		background: #FFFFFF;
		color: #33415C;
		font-size: 12.5px;
		font-weight: 700;
		text-decoration: none;
	}
	.dps-sarituri a:hover { border-color: var(--dp-blue); color: var(--dp-blue); }
}

/* ---------------------------------------------------------------- secțiuni */
.dps-sect { margin-top: 36px; }

.dps-cap {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin: 0 0 16px;
	padding-bottom: 10px;
	border-bottom: 2px solid var(--dp-border);
}
.dps-cap h2 {
	margin: 0;
	font-size: 22px;
	font-weight: 800;
	color: var(--dp-navy);
	letter-spacing: -0.3px;
	/* ancora din rândul de sărituri nu are voie să ascundă titlul sub antetul lipit */
	scroll-margin-top: 90px;
}
.dps-cap > a {
	flex: 0 0 auto;
	font-size: 13px;
	font-weight: 700;
	color: var(--dp-blue);
	text-decoration: none;
	white-space: nowrap;
}
.dps-cap > a:hover { text-decoration: underline; }

/* ---------------------------------------------------------------- grilele
   ⭐ Coloane de text, nu grilă.
   Cu `display: grid`, cardurile se aliniază pe RÂNDURI: unul cu 12 subcategorii
   („Testere pe marca mașinii") ținea rândul lui la ~300px, iar vecinii lui — categorii
   rădăcină fără subcategorii, adică un singur titlu — lăsau sub ei găuri de câteva sute
   de pixeli. Măsurat la 1440: peste un ecran de spațiu gol pe secțiunea de categorii.
   `columns` umple coloanele pe verticală și nu lasă goluri; `break-inside: avoid` ține
   fiecare card întreg, ca să nu i se rupă lista între două coloane.
   Ordinea de citire devine pe coloană (sus→jos, apoi coloana următoare) — normal pentru
   o hartă, unde cardurile sunt independente între ele.
   `column-width` în loc de `column-count`: numărul de coloane se alege singur după
   lățime, deci nu mai trebuie praguri intermediare pentru tabletă.               */
.dps-grila { column-gap: 20px; }
.dps-grila-cat { column-width: 340px; }
.dps-grila-pag { column-width: 270px; }
.dps-grila > .dps-card {
	break-inside: avoid;
	-webkit-column-break-inside: avoid;   /* Safari vechi */
	margin-bottom: 20px;
}

/* ---------------------------------------------------------------- cardul */
.dps-card {
	background: #FFFFFF;
	border: 1px solid var(--dp-border);
	border-radius: var(--dp-radius);
	padding: 16px 18px;
}
.dps-card h3 {
	margin: 0 0 8px;
	font-size: 15.5px;
	font-weight: 800;
	line-height: 1.35;
	color: var(--dp-navy);
}
.dps-card h3 a { color: var(--dp-navy); text-decoration: none; }
.dps-card h3 a:hover { color: var(--dp-blue); }

.dps-card ul { list-style: none; margin: 0; padding: 0; }
.dps-card li { margin: 0; }
.dps-card li a {
	display: block;
	padding: 3px 0;
	font-size: 14px;
	line-height: 1.45;
	color: var(--dp-text-soft);
	text-decoration: none;
}
.dps-card li a:hover { color: var(--dp-blue); }

/* ===========================================================================
   TELEFON — prag 767px, ca în toată fundația
   =========================================================================== */
@media (max-width: 767px) {

	/* aceeași margine laterală ca restul aplicației (16px) */
	.dps { padding: 0 var(--dpm-pad); }
	body.dps-harta .hero-section .entry-header {
		padding-left: var(--dpm-pad);
		padding-right: var(--dpm-pad);
	}

	.dps-intro { font-size: 14.5px; }

	/* rândul de sărituri iese în marginile ecranului prin `.dpm-scroller`;
	   fără `flex-wrap: nowrap` chipurile s-ar rupe pe două rânduri în loc să
	   se deruleze, iar derularea orizontală ar rămâne fără obiect */
	.dps-sarituri { flex-wrap: nowrap; margin-top: 14px; }

	/* Fundația dă chipurilor 36px (valoarea machetei, pentru rândurile de filtre).
	   Aici sunt trei pastile izolate, care duc la cele trei secțiuni ale unei pagini
	   lungi — sunt navigație, nu filtre — deci le ducem la minimul de atins de 44px.
	   ⛔ Se schimbă DOAR chipurile din rândul meu: `.dpm-chip` rămâne cum e peste tot
	   altundeva, altfel s-ar mișca filtrele de pe categorii și de pe blog. */
	.dps-sarituri .dpm-chip { min-height: var(--dpm-tap); padding-inline: 16px; }

	.dps-sect { margin-top: 28px; }

	/* `.dpm-sectiune-cap` (din mobil.css) dă deja titlul de 20px și linkul de 12,5px;
	   aici rămâne doar linia de despărțire, care e a hărții, nu a fundației */
	.dps-cap { margin-bottom: 12px; padding-bottom: 8px; }
	.dps-cap h2 { scroll-margin-top: 72px; }
	/* „Toate produsele →" / „Toate articolele →" sunt tot linkuri de atins cu degetul.
	   `inline-flex` cu baseline pe părinte păstrează alinierea pe linia titlului. */
	.dps-cap > a {
		display: inline-flex;
		align-items: center;
		min-height: var(--dpm-tap);
	}

	/* o singură coloană: la 360px nici măcar un card de 270 nu încape cu marginile */
	.dps-grila-cat, .dps-grila-pag { column-width: auto; columns: 1; }
	.dps-grila > .dps-card { margin-bottom: 12px; }

	.dps-card { padding: 14px 16px; border-radius: var(--dpm-radius); }
	.dps-card h3 { font-size: 15px; margin-bottom: 2px; }

	/* Zona de atins ≥ 44px, cerută de machetă pentru orice link din listă.
	   14px × 1.45 ≈ 20px de text ⇒ 12px sus și jos duc rândul la ~44.
	   Linia despărțitoare ține locul spațierii pe care o pierdem prin comprimare. */
	.dps-card li + li { border-top: 1px solid #EEF2F7; }
	.dps-card li a {
		box-sizing: border-box;
		min-height: var(--dpm-tap);
		display: flex;
		align-items: center;
		padding: 11px 0;
		font-size: 14.5px;
	}
}