/* =========================================================================
   service-termopane.com — pages.css (paginile interioare)
   Se incarca DOAR pe paginile interioare (front-matter css: pages). Homepage-ul nu il foloseste.
   Construit din design system-ul homepage-ului: tokens, .wrap 1440, .phero, .split, .ilist,
   .steps, .checks, .acc, .rel, .ctab, .media, .btn, .link, .tag, .chip, .eyebrow (site.css).
   Motion mai simplu decat pe homepage: hover pe fotografii / sageti, aparitii [data-reveal].
   ========================================================================= */

/* ---- 0. Nota de prototip (ascunsa in vizualizarea curata ?clean) --------- */
.proto-note {
  font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--fg-3);
  border: 1px dashed var(--rule-2); padding: 10px 14px; margin-top: 28px; max-width: 72ch;
}
html.proto-off .proto-note { display: none; }

/* ---- 1. Sectiuni interioare: ritm mai calm decat homepage ---------------- */
.isec { padding-block: var(--section-y-sm); }
.isec--rule { border-top: 1px solid var(--rule); }
.isec__h { margin-top: 18px; max-width: 18ch; }
.isec__p { margin-top: 20px; color: var(--fg-2); max-width: 34em; }
.isec__lead { font-size: var(--fs-lead); line-height: 1.5; color: var(--fg); max-width: 31em; text-wrap: pretty; } /* 65-75 de caractere pe rand */
.isec .split__aside .link { margin-top: 28px; }
@media (min-width: 1024px) {
  .isec .split__aside--sticky > div { position: sticky; top: calc(var(--hdr-h) + 40px); }
}

/* ---- 2. Hero interior (extinde .phero din site.css) ---------------------- */
.phero--compact:not(.phero--duo) .phero__intro { color: var(--fg-2); } /* .phero--duo: fraza in cerneala, ca pe homepage */
.phero--duo + .isec { padding-top: 0; }
.phero--duo + .isec.t-stone { padding-top: var(--section-y-sm); } /* H-024: o banda colorata dupa hero (lucrarile cu fotografie) nu ramane lipita sus */ /* H-018: grila urmeaza hero-ul ca pe homepage grila dupa capul de sectiune (~72px) */
.phero--duo + .isec--rule { padding-top: var(--section-y-sm); } /* H-026: sectiunea cu linie (localitate) nu lipeste linia de linia de cota a capului (linie dubla) */
/* H-026: titlurile mari ale paginilor interioare (H1 si banda finala): virgula lui ș / ț nu mai atinge randul urmator; homepage-ul ramane la 1 */
.phero--duo .phero__title, .ctab__t, .ctab--final .ctab__t { line-height: 1.05; }
/* telefon: textul de langa breadcrumbs (ex. eticheta problemei) trece sub ele, ca sa nu le inghesuie */
@media (max-width: 599px) {
  .phero__top { flex-direction: column; align-items: flex-start; gap: 10px; }
}

/* Banda foto de sub hero (pagina de serviciu): toata latimea containerului, inaltime limitata.
   H-019: colturi rotunjite ca fotografiile de pe homepage; perechea (.sband--duo) doar cand detaliul e alt cadru. */
.sband .media__frame { width: 100%; max-height: min(72vh, 760px); border-radius: var(--radius); }
@media (max-width: 767px) { .sband .media__frame { max-height: min(62svh, 480px); border-radius: var(--radius-sm); } }
.sband--duo { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 8px; }
.sband--duo .media__frame { aspect-ratio: auto; height: clamp(180px, 52vw, 280px); max-height: none; }
@media (min-width: 768px) {
  .sband--duo { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: var(--gap); }
  .sband--duo > .media:first-child .media__frame { aspect-ratio: 3 / 2; height: auto; }
  .sband--duo > .media:last-child .media__frame { height: 100%; }
}

/* Cuvintele cu cratima (s-a, Spuneti-ne) nu se despart la capat de rand (marcate la build) */
.nobr { white-space: nowrap; }

/* ---- 3. Serviciul potrivit (pagina unei probleme, .sdir--single) ---------- */
.sdir { border-top: 1px solid var(--rule); }
.sdir__item {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: 24px;
  align-items: center; padding-block: clamp(32px, 5vw, 80px); border-bottom: 1px solid var(--rule);
}
.sdir__media { grid-column: 1 / -1; display: block; }
.sdir__body { grid-column: 1 / -1; display: grid; gap: 16px; align-content: start; justify-items: start; }
.sdir__t { font-size: var(--fs-h2); line-height: 1.06; letter-spacing: -.03em; max-width: 15ch; }
.sdir__t a {
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  transition: background-size var(--d-3) var(--ease-out);
}
.sdir__t a:hover { background-size: 100% 1px; }
.sdir__d { color: var(--fg-2); max-width: 44ch; }
@media (min-width: 900px) {
  .sdir__media { grid-column: 1 / span 6; }
  .sdir__body { grid-column: 8 / -1; }
}
/* varianta simpla (serviciul asociat de pe pagina unei probleme) */
.sdir--single { border-top: 0; }
.sdir--single .sdir__item { border-bottom: 0; padding-block: 0; }
.sdir--single .sdir__t { font-size: var(--fs-h3); max-width: 20ch; }

/* Etichete-link (probleme rezolvate, piese) */
.tags { display: flex; flex-wrap: wrap; gap: 8px; }
a.tag { transition: border-color var(--d-2), color var(--d-2), background var(--d-2); }
a.tag:hover { border-color: var(--fg); color: var(--fg); }

/* ---- 4. Lista de probleme pe grupe (/probleme) --------------------------- */
.chipnav { display: flex; flex-wrap: wrap; gap: 8px; margin-top: clamp(28px, 3vw, 44px); }
.plist { border-top: 1px solid var(--rule); }
.plist__item { border-bottom: 1px solid var(--rule); padding-block: clamp(18px, 2vw, 28px); display: grid; gap: 12px; }
.plist__link { display: grid; grid-template-columns: minmax(0, 1fr) 28px; gap: 8px var(--gap); align-items: baseline; }
.plist__t {
  font-family: var(--f-display); font-weight: 600; font-size: var(--fs-h3); line-height: 1.12; letter-spacing: -.022em;
  text-wrap: balance; transition: transform var(--d-3) var(--ease-out);
}
.plist__d { grid-column: 1; color: var(--fg-2); font-size: var(--fs-sm); max-width: 52ch; }
.plist__arrow { grid-column: 2; grid-row: 1; width: 22px; height: 22px; align-self: center; transition: transform var(--d-3) var(--ease-out); }
.plist__link:hover .plist__arrow { transform: translateX(4px); }
@media (hover: hover) { .plist__link:hover .plist__t { transform: translateX(8px); } }
.plist__svc { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; font-size: var(--fs-sm); color: var(--fg-3); }
.plist__svc .t-mono { font-size: 11px; }
.plist__svc a { color: var(--fg); font-weight: 600; text-decoration: underline; text-underline-offset: .25em; text-decoration-color: var(--rule-2); }
.plist__svc a:hover { text-decoration-color: currentColor; }
.pgroup__h { margin-top: 14px; }
.pgroup__count { display: block; margin-top: 10px; }

/* ---- 5. Simptome / semne ------------------------------------------------- */
.symlist { border-top: 1px solid var(--rule); }
.symlist li { border-bottom: 1px solid var(--rule); }
.symlist__i { display: grid; grid-template-columns: minmax(0, 1fr) 22px; gap: 8px 16px; align-items: baseline; padding: 18px 0; font-size: var(--fs-lead); line-height: 1.4; }
.symlist__i svg { width: 20px; height: 20px; align-self: center; transition: transform var(--d-3) var(--ease-out); }
a.symlist__i:hover svg { transform: translateX(4px); }
a.symlist__i:hover .symlist__t { text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1px; }

.signs { border-top: 1px solid var(--rule); }
.signs li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--rule); font-size: var(--fs-lead); line-height: 1.4; }
.signs li::before { content: ""; width: 9px; height: 9px; border: 1.5px solid var(--signal); margin-top: .55em; }

/* ---- 6. Verificari (extinde .checks din site.css; H-019: fara numere) ----- */
.isec .checks__d { max-width: 34em; } /* ~70 de caractere pe rand cand coloana se intinde (tableta) */

/* ---- 7. Fotografia de detaliu -------------------------------------------- */
.pfig { margin-top: 32px; max-width: 460px; }
.pfig--wide { max-width: none; margin-top: 0; }

/* ---- 8. Pasii interventiei (extinde .steps din site.css) ----------------- */
.isec .steps--row { margin-top: clamp(32px, 4vw, 56px); }

/* ---- 9. Cand este necesara interventia ----------------------------------- */
.when { max-width: 34em; } /* ~70 de caractere pe rand */

/* ---- 10. FAQ ------------------------------------------------------------- */
.ifaq .acc { margin-top: 0; }


/* ---- 12. /servicii (H-018): directorul in grila de pe homepage (.svcx), cu descriere si problemele rezolvate ----
   Desktop 3 x 2, tableta 2 x 3, telefon: carduri una sub alta (fotografie 3:2, apoi textul). */
.svcx--full { border-top: 0; row-gap: clamp(40px, 4vw, 64px); }
.svcx--full .svcx__item { grid-template-columns: minmax(0, 1fr); gap: 0; align-items: start; align-content: start; padding: 0; border-bottom: 0; }
.svcx--full .media__frame { aspect-ratio: 3 / 2; border-radius: var(--radius); }
.svcx--full .svcx__body { grid-template-columns: minmax(0, 1fr) auto; align-content: start; column-gap: 14px; padding-top: 18px; } /* linia si sageata la aceeasi inaltime in toate cardurile */
.svcx--full .svcx__body::before {
  content: ""; grid-column: 1; grid-row: 1; height: 1px;
  background: linear-gradient(var(--blue), var(--blue)) 0 0 / 0% 100% no-repeat, var(--rule-2);
  transition: background-size var(--d-4) var(--ease-out);
}
.svcx--full .svcx__item:hover .svcx__body::before { background-size: 100% 100%, auto; }
.svcx--full .svcx__arrow { grid-column: 2; grid-row: 1; width: 18px; height: 18px; }
.svcx--full .svcx__t { grid-column: 1 / -1; grid-row: 2; margin-top: 12px; }
.svcx--full .svcx__d { grid-column: 1 / -1; grid-row: 3; margin-top: 8px; max-width: 46ch; }
.svcx__rel { grid-column: 1 / -1; grid-row: 4; display: grid; gap: 10px; margin-top: 16px; position: relative; z-index: 2; } /* peste legatura intregului card */
.svcx__rel { pointer-events: none; } /* spatiul liber duce la serviciu (legatura cardului); doar pastilele sunt legaturi separate */
.svcx__rel .tag { pointer-events: auto; }
.svcx__item:has(.svcx__rel .tag:hover) .svcx__t { color: inherit; }
.svcx__item:has(.svcx__rel .tag:hover) .svcx__arrow { transform: none; }
.svcx__rel > span { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--fg-3); }
.svcx__rel a.tag:hover { border-color: var(--blue); color: var(--blue-7); }
@media (min-width: 768px) { .svcx--full { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .svcx--full { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* lista de probleme mare, ca pe homepage (titluri mari; H-019: fara numere) */
.ilist--lg .ilist__title { font-size: clamp(1.375rem, 1rem + 1.7vw, 2.75rem); }
.ilist--lg .ilist__glyph { display: none; }
@media (min-width: 1024px) { .ilist--lg .ilist__link { grid-template-columns: minmax(0, 7fr) minmax(0, 3fr) 28px; } }
.isec__foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px 32px; margin-top: 36px; color: var(--fg-2); font-size: var(--fs-sm); }

/* ---- 13. /servicii/{slug} (H-019): in designul homepage-ului aprobat, fara numerotare ----
   Ritmul fundalurilor ca pe homepage: hartie (hero, fotografie, Cand ne chemati, De ce), piatra (Ce verificam),
   hartie (Cum lucram), cer (Feronerie, doar la serviciile cu plansa), piatra (Intrebari), hartie (Merg des impreuna), albastru (CTA). */

/* Cand ne chemati: lista mare de pe homepage (fara numere); simptomele sunt fraze, deci titlul e putin mai mic decat .ilist--lg */
.ilist--sym .ilist__title { font-size: clamp(1.2rem, 1rem + 1vw, 2rem); }
.ilist--sym .ilist__glyph { display: none; }
@media (min-width: 1024px) { .ilist--sym .ilist__link { grid-template-columns: minmax(0, 7fr) minmax(0, 3fr) 28px; } }
span.ilist__link { cursor: default; }
span.ilist__link::after { display: none; }

/* De ce apare problema: doar text, o pauza calma dupa lista (capul .shead--wide, fraza in cerneala) */
.svc-why .shead { margin-bottom: 0; }
.svc-why__p { color: var(--ink); font-size: clamp(1.125rem, 1rem + .45vw, 1.375rem); line-height: 1.5; max-width: 58ch; text-wrap: pretty; }
@media (min-width: 1024px) {
  .svc-why .shead__title { grid-column: 1 / span 5; }
  .svc-why .shead__intro { grid-column: 7 / -1; }
}

/* Ce verificam: compozitia "Reparam intai ce se poate repara" (titlul si fotografia in stanga, lista in dreapta) */
.svc-diag__grid { display: grid; gap: clamp(28px, 4vw, 48px); }
.svc-diag .t-h2, .svc-faq .t-h2 { font-size: clamp(1.85rem, 1.15rem + 2.1vw, 3.5rem); line-height: 1.04; letter-spacing: -.032em; }
.svc-diag__photo .media__frame { border-radius: var(--radius); }
@media (min-width: 768px) and (max-width: 1023px) {
  .svc-diag__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); }
  .svc-diag__head { grid-column: 1 / -1; }
  .svc-diag__photo { grid-column: 1 / span 5; align-self: start; }
  .svc-diag__grid > .probe { grid-column: 7 / -1; }
  .svc-diag__grid:not(:has(.svc-diag__photo)) > .probe { grid-column: 1 / span 9; }
}
@media (min-width: 1024px) {
  .svc-diag__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: clamp(28px, 2.6vw, 40px); }
  .svc-diag__head { grid-column: 1 / span 5; grid-row: 1; }
  .svc-diag__photo { grid-column: 1 / span 4; grid-row: 2; }
  .svc-diag__grid > .probe { grid-column: 7 / -1; grid-row: 1 / span 2; align-self: center; }
}

/* .probe: ce verificam = noduri albastre goale pe un fir fin (ca reperele din scena), fara numere */
.probe { position: relative; display: grid; }
.probe__i:not(:last-child)::after { content: ""; position: absolute; left: 6px; top: 35px; bottom: -22px; width: 1px; background: var(--rule-2); } /* firul, de la un nod la urmatorul */
.probe__i { position: relative; padding: 16px 0 18px 40px; }
.probe__i::before {
  content: ""; position: absolute; left: 0; top: 22px; width: 13px; height: 13px;
  border: 1.5px solid var(--blue); background: var(--bg);
}
.probe__t { font-size: clamp(1.06rem, .98rem + .36vw, 1.3rem); line-height: 1.25; letter-spacing: -.012em; text-wrap: balance; }
.probe__d { margin-top: 6px; font-size: var(--fs-sm); line-height: 1.55; color: var(--fg-2); max-width: 52ch; }

/* Cum lucram: traseul albastru (Reglaj, Aliniere, Etansare, Verificare, ca in scena). Linia se deseneaza la aparitie,
   nodurile se umplu pe rand, ultimul (rezultatul) e mai mare. Ordinea o dau lista si linia, fara numere. */
.route { display: grid; gap: 0; }
.route__i { position: relative; padding: 0 0 30px 36px; }
.route__i::before { /* firul spre pasul urmator */
  content: ""; position: absolute; left: 5px; top: 14px; bottom: -2px; width: 1px;
  background: linear-gradient(var(--blue), var(--blue)) 0 0 / 100% 0% no-repeat, var(--rule-2);
  transition: background-size .7s var(--ease-out) calc(var(--i, 0) * 140ms + 200ms);
}
.route__i:last-child::before { display: none; }
.route__i::after { /* nodul */
  content: ""; position: absolute; left: 0; top: 4px; width: 11px; height: 11px;
  border: 1.5px solid var(--blue); background: var(--bg);
  transition: background-color .3s var(--ease-out) calc(var(--i, 0) * 140ms);
}
.route__i:last-child::after { left: -1px; top: 3px; width: 13px; height: 13px; }
.route.is-in .route__i::before { background-size: 100% 100%, auto; }
.route.is-in .route__i::after { background-color: var(--blue); }
html:not(.js) .route .route__i::before { background-size: 100% 100%, auto; }
html:not(.js) .route .route__i::after { background-color: var(--blue); }
.route__t { font-size: clamp(1.25rem, 1.05rem + .6vw, 1.625rem); line-height: 1.15; letter-spacing: -.02em; }
.route__d { margin-top: 8px; font-size: var(--fs-sm); line-height: 1.55; color: var(--fg-2); max-width: 34ch; }
@media (min-width: 900px) {
  .route { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); column-gap: 0; }
  .route__i { padding: 38px 28px 0 0; }
  .route__i::before { left: 12px; right: 0; top: 9px; bottom: auto; width: auto; height: 1px; background-size: 0% 100%, auto; } /* prin centrul nodului */
  .route.is-in .route__i::before, html:not(.js) .route .route__i::before { background-size: 100% 100%, auto; }
}
@media (prefers-reduced-motion: reduce) { .route__i::before, .route__i::after { transition: none; } }

/* Piese: puntea din capitolul Feronerie si piese de pe homepage (titlu, pastile + nota, linkul spre catalog) */
.svc-bridge { display: grid; gap: 14px 32px; align-items: baseline; }
.t-sky .svc-bridge { margin-top: clamp(44px, 5vw, 72px); padding-top: 24px; border-top: 1px solid var(--rule); }
.svc-bridge__t { font-size: var(--fs-h4); line-height: 1.25; letter-spacing: -.012em; }
.svc-bridge__main { display: grid; gap: 12px; }
.svc-bridge__p { color: var(--fg-2); font-size: var(--fs-sm); max-width: 52ch; }
.svc-bridge > .link { justify-self: start; }
.svc-bridge a.tag:hover { border-color: var(--blue); color: var(--blue-7); }
@media (min-width: 1024px) { .svc-bridge { grid-template-columns: minmax(0, 3fr) minmax(0, 7fr) auto; } }
.svc-parts { padding-block: clamp(40px, 4vw, 64px); border-top: 1px solid var(--rule); }

/* Intrebari: compozitia FAQ de pe homepage */
.svc-faq__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: 40px; }
.svc-faq__side { grid-column: 1 / -1; display: grid; gap: 24px; align-content: start; }
.svc-faq__side > .link { justify-self: start; }
.svc-faq__main { grid-column: 1 / -1; }
@media (min-width: 1024px) {
  .svc-faq__side { grid-column: 1 / span 4; position: sticky; top: calc(var(--hdr-h) + 32px); align-self: start; }
  .svc-faq__main { grid-column: 6 / -1; }
}

/* Merg des impreuna: cardurile .svcx de pe homepage; 3 pe 3 coloane (si pe tableta), 2 pe 2, unul singur ca un card pe latime */
.svc-rel .svcx__item { align-content: start; } /* linia si titlul la aceeasi inaltime in toate cardurile */
@media (min-width: 768px) and (max-width: 1023px) { .svcx--three { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .svcx--two { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 768px) {
  .svcx--one { grid-template-columns: minmax(0, 1fr); }
  .svcx--one .svcx__item { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); column-gap: var(--gap); align-items: center; }
  .svcx--one .svcx__body { padding-top: 0; align-self: center; }
  .svcx--one .svcx__t { font-size: var(--fs-h3); }
}

/* ---- 14. /probleme (H-019): patru capitole editoriale, fara numere si fara contoare ----
   Fiecare grupa: linia de cota, titlul si fotografia reala in stanga (lipite pe desktop), lista mare de probleme in dreapta,
   cu serviciile care le rezolva. Navigarea pe grupe: o bara ca si capsula header-ului, lipita sub ea de la 768px. */
.pnav { position: relative; z-index: 20; padding-bottom: clamp(8px, 1.5vw, 24px); }
.pnav__bar { display: flex; flex-wrap: wrap; gap: 8px; }
.pnav__a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px;
  border: 1px solid var(--line-2); border-radius: 999px; background: #FFFFFF;
  font-size: .9375rem; font-weight: 500; color: var(--fg-2); white-space: nowrap;
  transition: color var(--d-2), border-color var(--d-2), background-color var(--d-2);
}
.pnav__a:hover { color: var(--ink); border-color: var(--blue); }
.pnav__a.is-active { color: var(--blue-7); border-color: var(--blue); background: var(--blue-50); }
/* H-024: o eticheta de grupa lunga (alt partener) nu lateste pagina: pe telefon se rupe in pastila, de la 768px bara se deruleaza */
.pnav__bar > li { min-width: 0; max-width: 100%; }
.pnav__a { white-space: normal; max-width: 100%; } /* trece pe randul urmator ca intreg; textul se rupe doar daca pastila singura nu incape */
@media (max-width: 767px) { .pnav__a { padding-block: 8px; } }
@media (min-width: 768px) {
  .pnav { padding-bottom: 0; }
  .pnav__bar {
    flex-wrap: wrap; gap: 6px; padding: 7px; width: max-content; max-width: 100%; /* H-024: daca nu incap pe un rand, grupele trec pe al doilea rand in capsula */
    background: rgb(255 255 255 / .92); -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4);
    border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-float);
  }
  .pnav__a { border-color: transparent; background: transparent; min-height: 42px; border-radius: 10px; }
  .pnav__a:hover { border-color: transparent; background: var(--blue-50); }
  .pnav__a.is-active { border-color: transparent; }
}

@media (min-width: 768px) and (min-height: 600px) { .pnav { position: sticky; top: calc(var(--hdr-float) + 18px); } } /* pe ecrane joase (telefon orizontal) bara ramane in flux */
/* saltul la o grupa: html are deja scroll-padding-top (header + 24px); cand bara e lipita se adauga doar diferenta pana sub ea */
.pgrp { scroll-margin-top: 0; }
@media (min-width: 768px) and (min-height: 600px) { .pgrp { scroll-margin-top: calc(var(--hdr-float) + var(--pnav-h, 84px) - var(--hdr-h) - 24px); } }
/* H-023 (tastatura): cat timp bara e lipita, si focusul (Shift+Tab) se opreste sub ea, nu doar sub header; saltul la grupa ramane la fel */
@media (min-width: 768px) and (min-height: 600px) { html:has(.pnav) { scroll-padding-top: calc(var(--hdr-float) + var(--pnav-h, 84px)); } html:has(.pnav) .pgrp { scroll-margin-top: 0; } }
.pnav + .pgrp { padding-top: clamp(40px, 5vw, 80px); }
.pgrp + .pgrp { padding-top: 0; } /* intre grupe: doar spatiul de jos si linia de cota */
.pgrp__grid { display: grid; gap: clamp(24px, 3vw, 40px); position: relative; padding-top: clamp(22px, 2.4vw, 34px); }
.pgrp__grid::before { /* linia de cota a capetelor de sectiune (.shead) */
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 11px;
  border-inline: 1px solid var(--rule-2);
  background: linear-gradient(var(--rule-2), var(--rule-2)) 0 50% / 100% 1px no-repeat;
}
.pgrp__aside { display: grid; gap: clamp(20px, 2.4vw, 32px); align-content: start; }
.pgrp__h { font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.75rem); line-height: 1.06; letter-spacing: -.03em; max-width: 12ch; text-wrap: balance; }
.pgrp__photo .media__frame { border-radius: var(--radius); }
@media (max-width: 767px) { .pgrp__photo .media__frame { aspect-ratio: 2 / 1; border-radius: var(--radius-sm); } }
@media (min-width: 768px) and (max-width: 1023px) {
  .pgrp__aside { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--gap); align-items: end; }
}
@media (min-width: 1024px) {
  .pgrp__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); }
  .pgrp__aside { grid-column: 1 / span 4; position: sticky; top: calc(var(--hdr-float) + 100px); align-self: start; }
  .pgrp__list { grid-column: 6 / -1; }
}

/* randul unei probleme: titlul mare (ca lista de pe homepage) duce la pagina problemei; serviciile sunt pastile separate */
.pgrp__list { border-top: 1px solid var(--rule); }
@media (min-width: 1024px) { .pgrp__list { border-top: 0; } .pgrp__list > .prow:first-child { padding-top: 0; } }
.prow {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 28px; column-gap: var(--gap); row-gap: 8px;
  padding: clamp(20px, 2.2vw, 30px) 0; border-bottom: 1px solid var(--rule);
}
.prow::after { /* linia care se deseneaza la hover, ca in lista de pe homepage */
  content: ""; position: absolute; left: 0; bottom: -1px; height: 1px; width: 100%;
  background: var(--fg); transform: scaleX(0); transform-origin: left; transition: transform var(--d-4) var(--ease-out);
}
.prow__t {
  grid-column: 1; font-size: clamp(1.2375rem, .945rem + 1.35vw, 2.25rem); line-height: 1.12; letter-spacing: -.022em;
  text-wrap: balance; transition: color var(--d-2);
}
.prow__tt { display: block; transition: transform var(--d-3) var(--ease-out); }
.prow__t a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.prow__t a:focus-visible { outline: none; }
.prow__t a:focus-visible::after { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--radius-sm); }
.prow__d { grid-column: 1; color: var(--fg-2); font-size: var(--fs-sm); max-width: 52ch; }
.prow__svc { grid-column: 1; position: relative; z-index: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: 6px; }
.prow__svc .t-mono { font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--fg-3); margin-right: 4px; }
.prow__svc a.tag:hover { border-color: var(--blue); color: var(--blue-7); }
@media (pointer: coarse) { .prow__svc .tag { padding-block: 12px; } }
.prow__arrow { grid-column: 2; grid-row: 1; align-self: center; width: 22px; height: 22px; transition: transform var(--d-3) var(--ease-out); }
@media (hover: hover) {
  .prow:hover .prow__tt { transform: translateX(8px); }
  .prow:hover .prow__arrow { transform: translateX(4px); }
  .prow:hover::after { transform: scaleX(1); }
  .prow:has(.prow__svc .tag:hover) .prow__tt, .prow:has(.prow__svc .tag:hover) .prow__arrow { transform: none; }
  .prow:has(.prow__svc .tag:hover)::after { transform: scaleX(0); }
}

/* banda de contact cu explicatie lunga (ex. /probleme): randuri de cel mult ~70 de caractere */
@media (min-width: 1280px) { .ctab--long .ctab__sub { max-width: 60ch; } }

/* =========================================================================
   H-020: TEMA COMPLETA. Aceleasi componente ca pana acum (hero .phero--duo, capete .shead, placi .act, liste fara
   numere, fundalurile homepage-ului), plus cateva componente noi, comune paginilor noi.
   ========================================================================= */

/* ---- 15. Cifrele firmei (.facts): valori reale din live, marcate "de confirmat" pana la validare ---- */
.facts { display: grid; gap: 28px var(--gap); border-top: 1px solid var(--rule); padding-top: clamp(24px, 3vw, 36px); }
@media (min-width: 700px) { .facts { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.facts__v { display: block; font-family: var(--f-display); font-weight: 600; font-size: clamp(2.4rem, 1.5rem + 3vw, 4.4rem); line-height: 1; letter-spacing: -.04em; color: var(--blue-7); }
.facts__l { display: block; margin-top: 12px; color: var(--fg-2); max-width: 26ch; }

/* ---- 16. Nume (clienti, parteneri): pastile calme, fara logouri (vin din CMS, cu acord) ---- */
.names { display: flex; flex-wrap: wrap; gap: 10px; }
.names li { padding: 10px 16px; border: 1px solid var(--line-2); border-radius: 999px; background: #FFFFFF; font-size: var(--fs-sm); color: var(--fg); }

/* ---- 17. Recomandari (.quotes): text al clientilor, pastrat exact (data-ugc) ---- */
.quotes { columns: 1; column-gap: var(--gap); }
@media (min-width: 700px) { .quotes { columns: 2; } }
@media (min-width: 1100px) { .quotes { columns: 3; } }
.quote { break-inside: avoid; margin: 0 0 var(--gap); padding: 22px 22px 20px; background: #FFFFFF; border: 1px solid var(--rule); border-radius: var(--radius); }
.quote::before { content: "\201E"; display: block; height: 20px; margin-bottom: 6px; font-family: var(--f-display); font-size: 2.6rem; line-height: .7; color: var(--blue); }
.quote__t { font-size: var(--fs-sm); line-height: 1.65; color: var(--fg); }
.quote__who { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; margin-top: 14px; font-size: var(--fs-xs); color: var(--fg-3); }
.quote__who b { font-size: var(--fs-sm); font-weight: 600; color: var(--fg); }
html.js .quote.is-hidden { display: none; }
html:not(.js) .more-row { display: none; }
.more-row { display: flex; justify-content: center; margin-top: 12px; }
.quotes--lg .quote__t { font-size: var(--fs-lead); line-height: 1.55; }
/* H-026: textul recomandarii pe toata latimea cardului (limita de 30ch e a citatului mare de pe homepage); la 15px raman sub ~60 de caractere */
.quotes:not(.quotes--lg) .quote__t { max-width: none; }
/* H-026: dupa „Arătați mai multe”, blocul nou nu se lipeste de cardul cel mai inalt (pe mai multe coloane marginea de jos se pierde la capatul coloanei) */
@media (min-width: 700px) { .quotes[data-more-part] { margin-top: var(--gap); } }
.more-row { margin-top: clamp(32px, 4vw, 56px); } /* H-026: butonul e o actiune separata, nu lipit de grila */

/* ---- 18. Program, date cheie-valoare, disponibilitate (Contact, Despre noi) ---- */
.hours { width: 100%; border-collapse: collapse; }
.hours th, .hours td { padding: 13px 0; border-bottom: 1px solid var(--rule); font-size: var(--fs-sm); text-align: left; vertical-align: baseline; }
.hours th { font-weight: 600; color: var(--fg); }
.hours td { text-align: right; color: var(--fg-2); font-variant-numeric: tabular-nums; }
.hours tr.is-urgent td { color: var(--signal-ink); font-weight: 600; }
/* H-024: zilele cu program special (Contact), sub tabelul saptamanal */
.hours-special { margin-top: 22px; }
.hours-special__t { font-family: var(--f-mono); font-size: var(--fs-mono); letter-spacing: var(--tr-mono); text-transform: uppercase; color: var(--fg-3); margin-bottom: 6px; }
.hours-special__l { display: block; font-weight: 400; color: var(--fg-3); font-size: var(--fs-xs); }
.kv { border-top: 1px solid var(--rule); }
.kv > div { display: grid; grid-template-columns: minmax(0, 13ch) minmax(0, 1fr); gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--rule); font-size: var(--fs-sm); }
.kv dt { color: var(--fg-3); }
.kv dd { margin: 0; color: var(--fg); overflow-wrap: anywhere; }
.avail-card { display: inline-flex; justify-self: start; align-items: center; gap: 10px; padding: 12px 18px; border: 1px solid var(--rule); border-radius: var(--radius-sm, 12px); background: #FFFFFF; }
.avail-card .avail { margin: 0; }
.cgrid { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(36px, 4vw, 64px); }
@media (min-width: 1024px) { .cgrid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(40px, 5vw, 96px); } }
.cplates { display: grid; gap: 12px; }
.cplates .act { width: 100%; }
@media (min-width: 700px) { .cplates { grid-template-columns: 1fr 1fr; } }
.cmain { display: grid; gap: 22px; align-content: start; }
.cmain__p { color: var(--fg-2); max-width: 52ch; }
.cside { display: grid; gap: 28px; align-content: start; }
.cside__h { font-size: var(--fs-h4); line-height: 1.25; letter-spacing: -.012em; margin-bottom: 4px; }

/* ---- 19. Pagini legale: cuprins lipit + text (max 66ch) ---- */
.legal { display: grid; gap: 32px; }
@media (min-width: 1024px) { .legal { grid-template-columns: minmax(0, 3fr) minmax(0, 8fr); column-gap: clamp(40px, 5vw, 96px); } }
.legal__toc { align-self: start; }
@media (min-width: 1024px) { .legal__toc { position: sticky; top: calc(var(--hdr-h) + 32px); max-height: calc(100svh - var(--hdr-h) - 56px); overflow-y: auto; } } /* H-024: cuprinsul mai inalt decat ecranul se deruleaza singur */
.legal__toc p { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--fg-3); margin-bottom: 10px; }
.legal__toc a { display: block; padding: 8px 0; border-bottom: 1px solid var(--rule); font-size: var(--fs-sm); color: var(--fg-2); transition: color var(--d-2); }
.legal__toc a:hover, .legal__toc a.is-active { color: var(--blue-7); }
.legal__toc a:focus-visible { outline-offset: -2px; } /* H-024: cuprinsul derulabil taie inelul in afara lui */
.legal__sec { padding-bottom: 26px; margin-bottom: 26px; border-bottom: 1px solid var(--rule); scroll-margin-top: 8px; } /* H-024: html are deja scroll-padding-top (decalajul nu se mai dubleaza) */
.legal__sec:last-child { border-bottom: 0; }
.legal__sec h2 { font-size: var(--fs-h3); line-height: 1.2; letter-spacing: -.02em; }
.legal__sec p, .legal__sec ul { margin-top: 12px; color: var(--fg-2); max-width: 66ch; line-height: 1.7; }
.legal__sec li { position: relative; padding-left: 18px; margin-top: 6px; }
.legal__sec li::before { content: ""; position: absolute; left: 0; top: .72em; width: 6px; height: 6px; background: var(--blue); }
.legal__firm { margin-bottom: 28px; padding: 18px 20px; border: 1px solid var(--rule); border-radius: var(--radius); background: #FFFFFF; font-size: var(--fs-sm); color: var(--fg-2); max-width: 66ch; }
.legal__firm b { color: var(--fg); }

/* ---- 20. Zone deservite ---- */
.zcards { display: grid; gap: var(--gap); }
@media (min-width: 900px) { .zcards { grid-template-columns: 1fr 1fr; } }
.zcard { display: grid; gap: 18px; align-content: start; padding: clamp(24px, 3vw, 40px); background: #FFFFFF; border: 1px solid var(--rule); border-radius: var(--radius); }
.zcard__t { font-size: var(--fs-h2); line-height: 1.02; letter-spacing: -.034em; }
.zcard__p { color: var(--fg-2); max-width: 46ch; }
.zcard .link { justify-self: start; }

/* ---- 21. Magazin: catalog (cautare + filtre), carduri de produs si de categorie ---- */
.shop__bar { display: grid; gap: 14px; margin-bottom: clamp(28px, 3vw, 44px); }
@media (min-width: 1024px) { .shop__bar { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); align-items: start; column-gap: var(--gap); } }
.shop__search { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 16px; background: #FFFFFF; border: 1px solid var(--line-2); border-radius: var(--radius); }
.shop__search svg { width: 20px; height: 20px; color: var(--fg-3); flex: none; }
.shop__search input { flex: 1; min-width: 0; border: 0; background: transparent; font: inherit; color: var(--fg); outline: none; text-overflow: ellipsis; } /* H-026: textul de exemplu prea lung se termina cu „…”, nu taiat in litera */
.shop__search input::placeholder { text-overflow: ellipsis; }
.shop__search:focus-within { border-color: var(--blue); box-shadow: 0 0 0 3px rgb(31 95 180 / .15); }
.shop__groups { display: grid; gap: 10px; }
.shop__group { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.shop__label { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--fg-3); margin-right: 4px; min-width: 7ch; }
.fchip { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border: 1px solid var(--line-2); border-radius: 999px; background: #FFFFFF; font: inherit; font-size: .875rem; font-weight: 500; color: var(--fg-2); cursor: pointer; transition: border-color var(--d-2), background-color var(--d-2), color var(--d-2); }
.fchip:hover { border-color: var(--blue); color: var(--ink); }
.fchip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #FFFFFF; }
.shop__status { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: space-between; margin-bottom: 18px; font-size: var(--fs-sm); color: var(--fg-3); }
.shop__empty { display: none; padding: 28px 0; color: var(--fg-2); }
.shop.is-empty .shop__empty { display: block; }
.pgrid { display: grid; gap: clamp(20px, 2.2vw, 32px) clamp(14px, 1.8vw, 28px); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 768px) { .pgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1180px) { .pgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.pcard.is-out { display: none; }
.pcard__link { display: grid; gap: 14px; align-content: start; height: 100%; border-radius: var(--radius-sm); } /* H-026: inelul de focus rotunjit, ca la .svcx */
.pcard__art { display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--radius); background: var(--blue-50); }
.pcard__art svg { display: block; width: 100%; height: 100%; transition: transform var(--d-4) var(--ease-out); }
.pcard__link:hover .pcard__art svg { transform: scale(1.03); }
.pcard__b { display: grid; gap: 6px; align-content: start; }
.pcard__brand { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--fg-3); min-height: 1.3em; min-height: 1lh; } /* H-026: randul gol (produs fara marca) e cat unul completat, titlurile raman aliniate */
.pcard__t { font-family: var(--f-display); font-weight: 600; font-size: clamp(.98rem, .92rem + .25vw, 1.125rem); line-height: 1.25; letter-spacing: -.01em; text-wrap: balance; transition: color var(--d-2); }
.pcard__link:hover .pcard__t { color: var(--blue-7); }
.pcard__p { font-size: var(--fs-sm); color: var(--fg-2); font-variant-numeric: tabular-nums; }
.ccards { display: grid; gap: clamp(16px, 2vw, 28px); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 900px) { .ccards { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ccard__link { display: grid; gap: 12px; align-content: start; border-radius: var(--radius-sm); } /* H-026: inelul de focus rotunjit */
.ccard__art { display: block; aspect-ratio: 1 / 1; overflow: hidden; border-radius: var(--radius); background: var(--blue-50); }
.ccard__art svg { display: block; width: 100%; height: 100%; transition: transform var(--d-4) var(--ease-out); }
.ccard__link:hover .ccard__art svg { transform: scale(1.03); }
.ccard__t { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-family: var(--f-display); font-weight: 600; font-size: clamp(1.06rem, .98rem + .45vw, 1.35rem); letter-spacing: -.016em; }
.ccard__t svg { width: 18px; height: 18px; color: var(--blue); flex: none; transition: transform var(--d-3) var(--ease-out); }
.ccard__link:hover .ccard__t svg { transform: translateX(4px); }
.ccard__d { font-size: var(--fs-sm); color: var(--fg-2); line-height: 1.5; }
.ccard__n { font-size: var(--fs-xs); color: var(--fg-3); }
.shopnote { display: grid; gap: 14px; padding: clamp(22px, 2.6vw, 32px); border-radius: var(--radius); background: #FFFFFF; border: 1px solid var(--rule); }
@media (min-width: 900px) { .shopnote { grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: var(--gap); } }
.shopnote__t { font-family: var(--f-display); font-weight: 600; font-size: var(--fs-h4); line-height: 1.25; }
.shopnote__p { color: var(--fg-2); font-size: var(--fs-sm); max-width: 62ch; margin-top: 6px; }
.shopnote .btn-row { gap: 10px; }

/* ---- 21b. Magazin (H-022): catalogul comun cu panoul de categorii si filtre (src/partials/shop.html) ----
   Desktop (>= 1024px): panoul lateral lipit in stanga, cautarea si produsele in dreapta. Sub 1024px: cautarea + butonul
   „Categorii și filtre”; panoul se deschide peste pagina (dialog), cu „Arătați N produse”. Sub 900px panoul se opreste
   deasupra barei Sunați / WhatsApp (DEC-010). Aceleasi componente: campul .shop__search, placa cu contur a butonului
   Meniu, lista laterala (ca .legal__toc), .btn, .link, pastilele (ca .tag / .pnav__a), cardurile .pcard.
   Randurile de butoane .fchip (H-020) raman in CSS, nefolosite (DEC-009). */
.shop-sec { padding-top: clamp(4px, 1.2vw, 20px); }
.shop { --shop-side: clamp(228px, 19vw, 272px); --shop-gap: clamp(28px, 3.2vw, 56px); }
.shop__tools { display: grid; gap: 10px; margin-bottom: 16px; }
@media (min-width: 560px) { .shop__tools { grid-template-columns: minmax(0, 1fr) auto; } }
.shop__tools .shop__search { min-width: 0; }
.shop__search input::-webkit-search-cancel-button { cursor: pointer; }
.shop__open {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 48px; padding: 0 16px;
  border: 1px solid var(--line-2); border-radius: var(--radius); background: #FFFFFF; color: var(--ink);
  font: inherit; font-size: .9375rem; font-weight: 600; white-space: nowrap; cursor: pointer; transition: border-color var(--d-2);
}
.shop__open:hover { border-color: var(--blue); }
.shop__open-i { position: relative; flex: none; width: 18px; height: 12px; }
.shop__open-i i { position: absolute; height: 1.5px; background: currentColor; left: 50%; transform: translateX(-50%); }
.shop__open-i i:nth-child(1) { top: 0; width: 18px; }
.shop__open-i i:nth-child(2) { top: 5.25px; width: 12px; }
.shop__open-i i:nth-child(3) { top: 10.5px; width: 6px; }
/* filtre alese: punct, fara cifra (DEC-045). H-026: ancorat pe iconita (era pe buton, in colt): ramane langa ea si cand butonul
   are toata latimea (telefon) si cand nu e lipit (ecrane joase, position: static, unde punctul ajungea sub header) */
.shop.has-f .shop__open-i::after { content: ""; position: absolute; top: -5px; right: -7px; width: 8px; height: 8px; border-radius: 50%; background: var(--blue); }

/* panoul: grupe, navigarea pe tipuri de piesa, optiunile */
.shop__ptitle { font-size: var(--fs-h4); line-height: 1.2; letter-spacing: -.012em; }
.shop__g { min-width: 0; margin: 0; padding: 18px 0 16px; border: 0; }
.shop__g + .shop__g { border-top: 1px solid var(--rule); }
.shop__gt { display: block; float: left; width: 100%; margin: 0 0 8px; padding: 0; font-family: var(--f-mono); font-size: 10.5px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--fg-3); }
.shop__gt + * { clear: both; }
.shop__nav a {
  display: flex; align-items: center; min-height: 40px; padding: 6px 12px; margin: 0 -12px; border-radius: var(--radius-sm);
  font-size: var(--fs-sm); color: var(--fg-2); transition: color var(--d-2), background-color var(--d-2);
}
.shop__nav a:hover { color: var(--ink); background: var(--blue-50); }
.shop__nav a[aria-current="page"] { color: var(--blue-7); background: var(--blue-50); font-weight: 600; }
.shop__opt { display: flex; align-items: center; gap: 12px; min-height: 40px; font-size: var(--fs-sm); color: var(--fg-2); cursor: pointer; }
.shop__opt input { /* ca .check (site.css 11.16): contur --fg-3 (contrast 5,3:1), colturi drepte, bifat pe --fg */
  appearance: none; -webkit-appearance: none; flex: none; display: grid; place-items: center; width: 20px; height: 20px; margin: 0;
  border: 1.5px solid var(--fg-3); border-radius: 0; background: var(--bg); cursor: pointer; transition: background-color var(--d-1), border-color var(--d-1);
}
.shop__opt input::after { content: ""; width: 9px; height: 5px; margin-top: -2px; border-left: 2px solid var(--bg); border-bottom: 2px solid var(--bg); transform: rotate(-45deg) scale(0); transition: transform var(--d-2) var(--ease-out); }
.shop__opt input:checked { background: var(--fg); border-color: var(--fg); }
.shop__opt input:checked::after { transform: rotate(-45deg) scale(1); }
.shop__opt:hover input:not(:disabled):not(:checked) { border-color: var(--blue); }
.shop__opt input:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.shop__opt input:checked + span { color: var(--ink); font-weight: 600; }
.shop__opt:has(input:disabled) { color: var(--fg-3); opacity: .55; cursor: default; }
.shop__status:focus:not(:focus-visible) { outline: none; }
.shop__opt input:disabled { cursor: default; }
.shop__o.is-more { display: none; }
.shop__g.is-all .shop__o.is-more, .shop__o.is-more:has(input:checked) { display: block; }
.shop__more { margin-top: 8px; font-size: var(--fs-sm); }
@media (pointer: coarse) { .shop__opt, .shop__nav a { min-height: 44px; } }
@media (pointer: fine) and (min-width: 1024px) { .shop__opt, .shop__nav a { min-height: 36px; } }
/* H-025: pe ecranele desktop joase (1280x800, 1366x768), cu optiunea noua „Lemn stratificat”, titlul „Marcă” ieșea din panou
   (UX-2); randuri si spatii putin mai stranse doar aici; ecranele tactile pastreaza 44px, 1440x900 ramane neschimbat */
@media (pointer: fine) and (min-width: 1024px) and (max-height: 860px) { .shop__opt, .shop__nav a { min-height: 32px; } .shop__nav a { padding-block: 4px; } .shop__g { padding: 14px 0 12px; } }
.shop__phead, .shop__pfoot, .shop__scrim { display: none; }

/* starea: numarul de rezultate, filtrele alese (eliminabile), resetarea */
.shop__status { justify-content: flex-start; gap: 10px 14px; min-height: 36px; margin: 0 0 20px; }
.shop__count { font-size: var(--fs-sm); color: var(--fg-2); font-variant-numeric: tabular-nums; }
.shop__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.shop__chips:empty { display: none; }
.shop__chip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 8px 0 14px;
  border: 1px solid var(--blue); border-radius: 999px; background: var(--blue-50); color: var(--blue-7);
  font: inherit; font-size: .875rem; font-weight: 500; line-height: 1; white-space: nowrap; cursor: pointer; transition: background-color var(--d-2);
}
.shop__chip svg { width: 18px; height: 18px; flex: none; transform: rotate(45deg); }
.shop__chip:hover { background: #FFFFFF; }
@media (pointer: coarse) { .shop__chip { min-height: 44px; } }
.shop__reset { font-size: var(--fs-sm); }
.shop:has(.shop__empty:not([hidden])) .shop__status .shop__reset { display: none; } /* H-026: fara rezultate, „Resetați filtrele” apare o singura data, in mesaj */
.shop__reset[hidden] { display: none; }
.shop__empty:not([hidden]) { display: block; padding: 8px 0 28px; color: var(--fg-2); max-width: 60ch; }
.shop__empty-a { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 14px; }
.pgrid--shop { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 768px) { .pgrid--shop { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* fotografia produsului in slotul 4:3 (DEC-017): intreaga, pe alb, fara decupare */
.pcard__art--photo { background: #FFFFFF; box-shadow: inset 0 0 0 1px var(--line); }
.pcard__art--photo picture { display: block; width: 100%; height: 100%; }
.pcard__art--photo img { display: block; width: 100%; height: 100%; object-fit: contain; padding: 5%; transition: transform var(--d-4) var(--ease-out); }
.pgal .pcard__art--photo img { object-fit: scale-down; } /* H-024: fotografiile de 370px nu se maresc pe fisa (in carduri raman contain) */
.pcard__link:hover .pcard__art--photo img { transform: scale(1.03); }

/* desktop: panoul lateral lipit, cautarea deasupra produselor */
@media (min-width: 1024px) {
  .shop { display: grid; grid-template-columns: var(--shop-side) minmax(0, 1fr); grid-template-rows: auto 1fr; grid-template-areas: "panel tools" "panel main"; column-gap: var(--shop-gap); align-items: start; } /* H-024: cu putine rezultate, randul cautarii nu se intinde dupa panou */
  .shop__layout { display: contents; }
  .shop__tools { grid-area: tools; grid-template-columns: minmax(0, 1fr); }
  .shop__open { display: none; }
  .shop__panel { grid-area: panel; position: sticky; top: calc(var(--hdr-float) + 30px); max-height: calc(100svh - var(--hdr-float) - 50px); overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; margin-left: -14px; padding: 4px 10px 16px 14px; }
  .shop__panel { scroll-padding-bottom: 52px; } /* H-023 (tastatura): caseta cu focus nu ramane in zona estompata de jos */
  .shop__panel.has-more { -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 36px), transparent); } /* mai sunt optiuni dedesubt */
  html:not(.proto-off) .shop__panel { padding-bottom: 52px; } /* insigna prototipului (stanga jos) nu acopera ultimele optiuni */
  .shop__main { grid-area: main; min-width: 0; }
  .shop__g:first-child { padding-top: 4px; }
  .pgrid--shop { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* H-026: legatura „Tip piesă” ramane in panou (care taie pe orizontala): fundalul nu mai pierde 2px in dreapta, inelul e in interior (ca .legal__toc) */
  .shop__panel .shop__nav a { margin-right: -8px; }
  .shop__panel .shop__nav a:focus-visible { outline-offset: -2px; }
}
@media (min-width: 1240px) { .pgrid--shop { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* sub 1024px: panoul peste pagina, deschis din „Categorii și filtre” */
@media (max-width: 1023px) {
  .shop__panel {
    position: fixed; z-index: 66; top: 0; left: 0; bottom: var(--shop-bottom, 0px); width: min(440px, 100%);
    display: flex; flex-direction: column; background: var(--paper); box-shadow: var(--shadow-float);
    transform: translateX(-104%); visibility: hidden; transition: transform var(--d-2) var(--ease-out), visibility 0s linear var(--d-2);
  }
  .shop.is-open .shop__panel { transform: none; visibility: visible; transition: transform var(--d-2) var(--ease-out), visibility 0s; }
  .shop__scrim { display: block; position: fixed; z-index: 65; inset: 0 0 var(--shop-bottom, 0px) 0; background: rgb(15 43 76 / .42); opacity: 0; visibility: hidden; transition: opacity var(--d-2), visibility 0s linear var(--d-2); }
  .shop.is-open .shop__scrim { opacity: 1; visibility: visible; transition: opacity var(--d-2), visibility 0s; }
  .shop.is-opening :is(.shop__panel, .shop__scrim) { pointer-events: none; } /* H-024: al doilea tap (dublu tap pe buton) nu cade pe o legatura din panou */
  .shop__phead { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 12px 12px 20px; border-bottom: 1px solid var(--line); background: #FFFFFF; }
  .shop__close { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--line-2); border-radius: var(--radius); background: #FFFFFF; color: var(--ink); cursor: pointer; }
  .shop__close:hover { border-color: var(--blue); }
  .shop__close svg { width: 22px; height: 22px; transform: rotate(45deg); }
/* H-024: cautarea activa, in panou (de ce optiunile sunt inactive) */
.shop__qnote { margin: 0 0 14px; font-size: var(--fs-sm); color: var(--fg-2); }
.shop__qnote b { color: var(--fg); font-weight: 600; }
.shop__qnote .link { margin-left: 6px; }
  .shop__pbody { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 4px 20px 20px; }
  .shop__pfoot { display: flex; gap: 10px; padding: 12px 20px; border-top: 1px solid var(--line); background: #FFFFFF; }
  .shop__pfoot .btn:last-child { flex: 1; }
  .shop__pfoot .btn:last-child .btn__label { flex: 1; justify-content: center; }
  .shop__pfoot .btn:disabled { opacity: .45; cursor: default; }
}
@media (max-width: 899px) { .shop { --shop-bottom: var(--mbar-h); } }
@media (max-width: 1023px) {
  .shop__tools { display: contents; }
  .shop__search { margin-bottom: 10px; }
  .shop__open { position: sticky; top: calc(var(--hdr-float) + 20px); z-index: 20; margin-bottom: 16px; box-shadow: 0 10px 24px -16px rgb(16 36 58 / .45); }
  html:has([data-shop]) { scroll-padding-top: calc(var(--hdr-float) + 80px); } /* H-023 (tastatura): cardul cu focus nu ajunge sub butonul lipit */
}
@media (max-width: 1023px) and (max-height: 599px) {
  .shop__open { position: static; } /* H-024: telefon culcat / zoom 400%: butonul in flux, ca .pnav */
  html:has([data-shop]) { scroll-padding-top: calc(var(--hdr-h) + 24px); }
}
@media (max-width: 1023px) { html.shop-open .proto { display: none; } } /* insigna prototipului nu acopera „Resetați” din panou */
@media (min-width: 560px) and (max-width: 1023px) { .shop__open { width: max-content; } }
/* 900...1023px (fara bara de jos): panoul se deschide sub header, ca Telefon si WhatsApp sa ramana la indemana (DEC-010) */
@media (min-width: 900px) and (max-width: 1023px) { .shop__panel { top: var(--hdr-h); z-index: 58; } .shop__scrim { top: var(--hdr-h); z-index: 57; } }
/* ecrane joase (telefon culcat, zoom 400%): tot panoul se deruleaza, cu titlul si butoanele in flux */
@media (max-width: 1023px) and (max-height: 520px) { .shop__panel { display: block; overflow-y: auto; overscroll-behavior: contain; } .shop__pbody { overflow: visible; } }
@media (max-width: 559px) { .shop__open { width: 100%; } }
.no-js .shop__open { display: none; }
/* fara JS: panoul ramane in pagina, doar cu navigarea pe tipuri de piesa (filtrele si cautarea au nevoie de JS) */
.no-js .shop [data-shop-group], .no-js .shop__tools, .no-js .shop__reset, .no-js .shop__pfoot, .no-js .shop__phead { display: none; }
@media (max-width: 1023px) { .no-js .shop__panel { position: static; transform: none; visibility: visible; width: auto; background: none; box-shadow: none; margin-bottom: 16px; } .no-js .shop__pbody { padding: 0; } }

/* pagina produsului: galeria (imaginea mare + miniaturi) */
.pgal { display: grid; gap: 12px; }
.pgal__item { margin: 0; }
.js .pgal__item:not(.is-on) { display: none; }
.pgal__thumbs { display: flex; flex-wrap: wrap; gap: 10px; }
.pgal__t { display: block; width: 84px; aspect-ratio: 4 / 3; padding: 4px; border: 1px solid var(--line-2); border-radius: var(--radius-sm); background: #FFFFFF; cursor: pointer; transition: border-color var(--d-2); }
.pgal__t picture, .pgal__t img { display: block; width: 100%; height: 100%; object-fit: contain; }
.pgal__t:hover { border-color: var(--blue); }
.pgal__t[aria-pressed="true"] { border-color: var(--blue); box-shadow: 0 0 0 1px var(--blue); }
.no-js .pgal__thumbs { display: none; }

/* ---- 22. Pagina de produs ---- */
.prod { display: grid; gap: clamp(28px, 4vw, 64px); }
@media (min-width: 1024px) { .prod { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); align-items: start; } .prod__media { position: sticky; top: calc(var(--hdr-h) + 24px); } }
.prod__media .pcard__art { aspect-ratio: 4 / 3; }
.prod__cap { margin-top: 10px; font-size: var(--fs-xs); color: var(--fg-3); }
.prod__info { display: grid; gap: 20px; align-content: start; }
.prod__meta { display: flex; flex-wrap: wrap; gap: 8px; }
.prod__title { font-size: clamp(1.9rem, 1.1rem + 2.4vw, 3.4rem); line-height: 1.02; letter-spacing: -.034em; text-wrap: balance; }
.prod__sum { font-size: var(--fs-lead); line-height: 1.55; color: var(--ink); max-width: 46ch; }
.prod__price { display: grid; gap: 4px; padding: 18px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.prod__price small { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--fg-3); }
.prod__price b { font-family: var(--f-display); font-weight: 600; font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.4rem); letter-spacing: -.02em; color: var(--ink); font-variant-numeric: tabular-nums; }
.prod__pnote { font-size: var(--fs-sm); color: var(--fg-2); max-width: 46ch; text-wrap: pretty; } /* H-025: conditiile pretului (cantitate minima, montaj), separat de pret; H-026: fara cuvant singur pe ultimul rand */
.prod__acts { display: flex; flex-wrap: wrap; gap: 10px; }
.prod__fero { font-size: var(--fs-sm); color: var(--fg-2); max-width: 50ch; }
.prod__fero a { color: var(--blue-7); text-decoration: underline; text-underline-offset: .2em; }
.prod__h { font-size: var(--fs-h4); line-height: 1.25; letter-spacing: -.012em; margin-bottom: 10px; }
.specs li { position: relative; padding: 9px 0 9px 20px; border-bottom: 1px solid var(--rule); font-size: var(--fs-sm); color: var(--fg-2); }
.specs li::before { content: ""; position: absolute; left: 0; top: 1.05em; width: 6px; height: 6px; background: var(--blue); }
.ptable { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.ptable th, .ptable td { padding: 11px 0; border-bottom: 1px solid var(--rule); font-size: var(--fs-sm); text-align: left; }
.ptable th:last-child, .ptable td:last-child { white-space: nowrap; padding-left: 16px; } /* H-024 */
.ptable th { font-family: var(--f-mono); font-size: 10.5px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--fg-3); }
.ptable td:last-child, .ptable th:last-child { text-align: right; }
.ptable td:last-child { color: var(--ink); font-weight: 600; }
.verify { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--fg-3); border: 1px dashed var(--rule-2); padding: 10px 12px; }
html.proto-off .verify { display: none; }

/* ---- 23. 404 ---- */
.nf { padding-block: clamp(40px, 6vw, 96px) clamp(56px, 7vw, 120px); min-height: 0; display: block; } /* H-024: fara centrarea verticala veche (site.css .nf) */
.nf__grid { display: grid; gap: clamp(28px, 4vw, 56px); }
@media (min-width: 1024px) { .nf__grid { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); align-items: center; } }
.nf__art svg { display: block; width: 100%; max-width: 520px; border-radius: var(--radius); }
/* H-026: regulile vechi din site.css (grila de 12 coloane, de la 900px) asezau ilustratia pe randul doi, sub text, si adaugau coloane goale;
   ilustratia sta in coloana ei: sub text, la stanga (sub 1024px), in dreapta textului (de la 1024px) */
.nf__art { grid-column: auto; justify-self: start; }
@media (min-width: 1024px) { .nf__art { justify-self: end; max-width: 520px; } }
.nf__links { display: flex; flex-wrap: wrap; gap: 8px; }
@media (max-width: 899px) { .prod__call { display: none; } } /* pe mobil telefonul e in bara de jos; ramane WhatsApp cu mesajul despre piesa */
.prod-top { padding-bottom: 0; }
.prod-top + .prodsec { padding-top: clamp(20px, 3vw, 40px); }

/* ---- 24. Ghiduri, lucrari, zone: grila de carduri (.gcard, 11.27) si ilustratia tehnica in locul fotografiei ---- */
.ggrid { display: grid; gap: clamp(20px, 2.4vw, 36px); }
@media (min-width: 700px) { .ggrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .ggrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.gcard__art { display: block; aspect-ratio: 3 / 2; background: linear-gradient(#EEF4FB, #E3ECF7); overflow: hidden; }
.gcard__art svg { display: block; width: 100%; height: 100%; }
.gcard__geo { color: var(--signal-ink); }
/* H-023 (audit F07): pe /blog, sub 700 px, cardurile din categorii devin randuri compacte: ilustratia mica in stanga,
   titlul si rezumatul pe doua randuri; legatura „Toate ghidurile din categorie” ramane. Pagina scade de la ~18.600 px. */
@media (max-width: 699.98px) {
  .ggrid--rows { gap: 12px; }
  .ggrid--rows .gcard { grid-template-columns: 96px minmax(0, 1fr); grid-template-rows: none; }
  .ggrid--rows .gcard__media { height: 100%; min-height: 96px; aspect-ratio: auto; }
  .ggrid--rows .gcard__body { gap: 6px; padding: 14px 16px; }
  .ggrid--rows .gcard__t { font-size: 1.05rem; }
  .ggrid--rows .gcard__ex { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
  .ggrid--rows .gcard__more { display: none; }
}
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips a[aria-current] { background: var(--ink); border-color: var(--ink); color: #FFFFFF; }
.chips-sec { padding-block: 0 clamp(8px, 1vw, 16px); }
.chips-sec:has(+ .isec--rule) { padding-bottom: clamp(32px, 4vw, 56px); } /* H-026: pastilele nu mai stau lipite de linia sectiunii urmatoare (Întrebări frecvente) */
.isec__sub { font-size: var(--fs-h4); line-height: 1.25; letter-spacing: -.012em; margin-bottom: 16px; }

/* ---- 25. Articol (/blog/{slug}): text pe o coloana de lectura (66ch), "Pe scurt" si contactul lipite in dreapta ---- */
.art-head { padding-top: clamp(20px, 2.4vw, 36px); }
.art-head__grid { display: grid; gap: clamp(28px, 3.4vw, 48px); padding-top: clamp(16px, 2vw, 28px); }
.art-head__txt { display: grid; gap: 18px; align-content: start; }
@media (min-width: 1024px) { .art-head__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); column-gap: clamp(48px, 6vw, 112px); align-items: end; } }
.art-head .t-h1 { font-size: clamp(2.1rem, 1.3rem + 3vw, 4.4rem); }
.art-head__lead { font-size: clamp(1.125rem, 1rem + .5vw, 1.45rem); line-height: 1.5; color: var(--fg-2); max-width: 60ch; text-wrap: pretty; }
.art-cover { border-radius: var(--radius); overflow: hidden; background: linear-gradient(#EEF4FB, #E3ECF7); aspect-ratio: 4 / 3; }
.art-cover svg { display: block; width: 100%; height: 100%; }
@media (max-width: 1023px) { .art-cover { aspect-ratio: 16 / 9; max-width: 640px; } }
.art-links .ilist__link { grid-template-columns: minmax(0, 1fr) 28px; }
.art { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(32px, 4vw, 56px); padding-block: clamp(40px, 5vw, 80px); }
@media (min-width: 1024px) { .art { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); column-gap: clamp(48px, 6vw, 112px); } }
.art__body { max-width: 68ch; }
.art__sec + .art__sec { margin-top: clamp(32px, 3.4vw, 48px); }
.art__sec h2 { font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2.1rem); line-height: 1.12; letter-spacing: -.025em; text-wrap: balance; }
.art__sec p { margin-top: 14px; font-size: 1.0625rem; line-height: 1.72; color: var(--fg); text-wrap: pretty; }
.art__sec ul { margin-top: 14px; display: grid; gap: 8px; }
.art__sec li { position: relative; padding-left: 20px; font-size: 1.0625rem; line-height: 1.6; }
.art__sec li::before { content: ""; position: absolute; left: 0; top: .62em; width: 7px; height: 7px; background: var(--blue); }
.art__side { display: grid; gap: 20px; align-content: start; }
@media (min-width: 1024px) { .art__side { position: sticky; top: calc(var(--hdr-h) + 32px); align-self: start; } }
.keybox { padding: clamp(20px, 2vw, 28px); background: var(--paper-2); border: 1px solid var(--rule); border-radius: var(--radius); }
.keybox__t { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--fg-3); margin-bottom: 12px; }
.keybox ul { display: grid; gap: 10px; }
.keybox li { position: relative; padding-left: 18px; font-size: var(--fs-sm); line-height: 1.55; color: var(--fg); }
.keybox li::before { content: ""; position: absolute; left: 0; top: .55em; width: 6px; height: 6px; background: var(--blue); }
.askbox { display: grid; gap: 12px; padding: clamp(20px, 2vw, 28px); border: 1px solid var(--rule); border-radius: var(--radius); background: #FFFFFF; }
.askbox__t { font-size: var(--fs-h4); line-height: 1.25; letter-spacing: -.012em; }
.askbox__p { font-size: var(--fs-sm); color: var(--fg-2); }
.askbox .act { width: 100%; }
@media (max-width: 899px) { .askbox .act--call { display: none; } } /* pe mobil telefonul e in bara de jos */
.art-links { display: grid; gap: clamp(28px, 3vw, 44px); }
@media (min-width: 1024px) { .art-links { grid-template-columns: 1fr 1fr; column-gap: var(--gap); } }

/* ---- 26. Lucrare (/lucrari/{slug}): datele lucrarii langa titlu; fotografia (placeholder pana vin fotografiile reale) ---- */
.jmeta { margin-top: 4px; }
.jmedia { margin-top: clamp(8px, 1vw, 16px); }
.jmedia .media__frame { border-radius: var(--radius); }
.jnote { margin-top: 12px; }
/* H-024: lucrarea fara fotografie: ilustratia tehnica, mica, cu nota vizibila (ca fisa produsului), nu un cadru gol */
.jmedia__art { display: block; max-width: 420px; aspect-ratio: 4 / 3; border-radius: var(--radius); overflow: hidden; background: linear-gradient(#EEF4FB, #E3ECF7); }
.jmedia__art svg { display: block; width: 100%; height: 100%; }
.jmedia__cap { margin-top: 10px; font-size: var(--fs-sm); color: var(--fg-3); }
.jmedia--art { padding-bottom: clamp(32px, 4vw, 56px); } /* nota nu sta lipita de banda „Ce am făcut” */
/* H-024: lista goala (de ex. un partener fara lucrari publicate) */
.empty-note { max-width: 56ch; padding: 22px 24px; border: 1px dashed var(--rule-2); border-radius: var(--radius); color: var(--fg-2); }

/* ---- 27. Zone (hub si pagina zonei) ---- */
.zcard .chips { margin-top: 2px; }
/* H-026: aceeasi marime ca .tag din acelasi rand (inainte 15px / 44px fata de 13px / 31px); diferenta ramane doar conturul punctat */
.chip-plain { display: inline-block; padding: 8px 12px; border: 1px dashed var(--line-2); border-radius: 999px; font-size: .8125rem; line-height: 1; white-space: nowrap; color: var(--fg-2); }
.zband { display: grid; gap: 16px 32px; align-items: baseline; padding-top: 24px; border-top: 1px solid var(--rule); }
@media (min-width: 1024px) { .zband { grid-template-columns: minmax(0, 3fr) minmax(0, 7fr) auto; } }
.zband__t { font-size: var(--fs-h4); line-height: 1.25; letter-spacing: -.012em; }
.zband__p { color: var(--fg-2); max-width: 60ch; }

/* ---- 28. Despre noi: fotografia echipei langa misiune ---- */
.about { display: grid; gap: clamp(28px, 4vw, 64px); }
@media (min-width: 1024px) { .about { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; column-gap: clamp(40px, 6vw, 112px); } }
.about .media__frame { border-radius: var(--radius); }
.about__q { font-family: var(--f-display); font-weight: 600; font-size: clamp(1.6rem, 1.1rem + 1.8vw, 2.8rem); line-height: 1.12; letter-spacing: -.028em; text-wrap: balance; }
.about:has(> :only-child) { grid-template-columns: minmax(0, 1fr); } /* H-024: fara fotografia echipei, textul pe toata latimea */
.about__p { margin-top: 18px; color: var(--fg-2); max-width: 50ch; }
.about__sign { margin-top: 22px; font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--fg-3); }

/* ---- 29. Pagina unei probleme (H-020): ilustratia problemei langa semne; cauzele pe noduri portocalii ---- */
.pband { display: grid; gap: clamp(28px, 4vw, 56px); }
@media (min-width: 1024px) { .pband { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(40px, 6vw, 112px); align-items: center; } }
.pband__art { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--rule); }
.pband__art .prb-art { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; }
@media (max-width: 1023px) { .pband__art { max-width: 560px; } }
@media (min-width: 1024px) { .pband:not(:has(.pband__art)) { grid-template-columns: minmax(0, 1fr); } } /* H-024: problema fara ilustratie: o singura coloana, fara cadru gol */
.pband__t { font-size: clamp(1.85rem, 1.15rem + 2.1vw, 3.5rem); line-height: 1.04; letter-spacing: -.032em; }
.pband__p { margin-top: 18px; color: var(--fg-2); max-width: 44ch; }
.symp { margin-top: clamp(20px, 2.4vw, 32px); border-top: 1px solid var(--rule); }
.symp li { position: relative; padding: 15px 0 15px 28px; border-bottom: 1px solid var(--rule); font-size: clamp(1.06rem, .98rem + .36vw, 1.3rem); line-height: 1.35; letter-spacing: -.008em; }
.symp li::before { content: ""; position: absolute; left: 0; top: calc(15px + .675em - 4.5px); width: 9px; height: 9px; background: var(--signal); }
.probe--cause .probe__i::before { border-color: var(--signal); }
.svc-diag__head .pband__p { margin-top: 16px; }

/* ---- 30. QA H-020: randuri de cel mult ~80 de caractere, grila 404 pe o coloana, placile Contact la 1024-1279 ---- */
.art__sec p, .art__sec li { max-width: 37em; }
.legal__sec p, .legal__sec ul { max-width: 40em; }
.zband__p { max-width: 34em; text-wrap: pretty; } /* H-024 (revizie): si cu alte texte, sub 75 de caractere pe rand, fara cuvant singur pe ultimul rand */
.specs { max-width: 40em; }
@media (max-width: 1023px) { .nf__grid { grid-template-columns: minmax(0, 1fr); } }
@media (min-width: 1024px) and (max-width: 1279px) { .cgrid .cplates { grid-template-columns: minmax(0, 1fr); } }
.art__sec p, .art__sec li { max-width: 32em; }
.art-head__lead { max-width: 34em; }
.legal__sec p, .legal__sec ul { max-width: 33em; } .legal__firm { max-width: 33em; overflow-wrap: anywhere; } /* H-024: 76-79 de caractere la 35em */
.specs { max-width: 34em; }
.art-head__lead { max-width: 32em; }
.specs { max-width: 30em; }

/* ---- H-023 (audit F06 / F07): fotografiile de arhiva (lucrari, ghiduri), din site-ul actual ----
   Una pe lucrare / articol, mica (din sablonul vechi): afisata la marimea ei reala, fara marire si fara decupare in
   alt format; nota de sub fotografie spune de unde vine. Cardurile din liste pastreaza ilustratia tehnica. */
.afig { margin: 0; }
.afig picture { display: block; }
.afig img { display: block; width: 100%; height: auto; border-radius: var(--radius); background: #EEF4FB; }
.afig__cap { margin-top: 10px; font-size: var(--fs-sm); line-height: 1.45; color: var(--fg-3); }
.afig .proto-note { margin-top: 8px; }
.afig--art { margin: clamp(20px, 2vw, 28px) 0 4px; }
.art-cover--photo { aspect-ratio: auto; background: none; }
.art-cover--photo .media__frame { border-radius: var(--radius); }

/* H-024: pe desktop cautarea e vizibila langa rezultate; nota din panou doar in dialogul de pe telefon / tableta */
@media (min-width: 1024px) { .shop__qnote { display: none; } }

/* ---- H-026 (design freeze): articolul, dupa auditul vizual final. La sfarsit, pentru ca peste ele trec regulile din sectiunile 25 si 30 ---- */
/* firul de navigare la aceeasi inaltime ca pe celelalte template-uri (ritmul .phero); inaltimea antetului ramane practic aceeasi */
.art-head { padding-top: clamp(40px, 6vw, 96px); }
.art-head .phero__top { margin-bottom: clamp(32px, 4vw, 64px); }
.art-head__grid { padding-top: 0; }
/* o singura margine dreapta in coloana de lectura: fraza de inceput si subtitlurile au latimea textului (32em la 1.0625rem, regula H-024) */
.art-head__lead, .art__sec h2 { max-width: calc(32 * 1.0625rem); }
/* pe tableta coperta are latimea coloanei (aliniata cu firul de navigare si „Pe scurt”); fotografia are variante pana la ~970px */
@media (min-width: 700px) and (max-width: 1023px) { .art-cover { max-width: none; } }
/* sub 1024px „Pe scurt” vine inainte de text (rezumat), placa de contact ramane la final; pe desktop coloana laterala ramane neschimbata */
@media (max-width: 1023px) { .art__side { display: contents; } .art__side > .keybox { order: -1; } }