/* This page never shows the injected problems bar. */
.problems-bar { display: none !important; }

/* Bara plutitoare de titlu e definită O SINGURĂ DATĂ, în `styles.css`.
   ────────────────────────────────────────────────────────────────────────────
   Aici exista o copie identică a celor trei reguli (`.pd-titlebar`,
   `.pd-titlebar.show`, `.pd-titlebar-name`). Fiind identică, părea inofensivă.
   Nu era: `pd-detail.css` se încarcă DUPĂ `styles.css`, iar la specificitate
   egală câștigă ultima. Copia readucea deci valorile de desktop —
   `font-size: 20px` și `padding: 0 40px` — peste micșorările responsive scrise
   în `styles.css` pentru ≤900px (16px), ≤560px (15px) și peisaj scund (14px).

   Efectul se vedea exact pe paginile care încarcă fișierul acesta: numele
   rămânea la 20px pe telefon și nu încăpea pe un rând („Dezvoltare Software
   Personalizat"), în timp ce pe pagina serviciului principal — care NU încarcă
   `pd-detail.css` — micșorările se aplicau și numele încăpea.

   Copia a fost ștearsă în 2026-07-29. Regulile responsive redevin astfel active
   pe toate paginile deodată, fără vreo valoare nouă de întreținut. */
.hero-inner h1 { transition: opacity .2s ease; }
.hero.name-hidden .hero-inner h1 { opacity: 0; visibility: hidden; }

/* Sticky dot navigator, right under the header + title bar (89 + 65) */
.pd-nav { position: sticky; top: calc(var(--hdr-h) + var(--bar-h)); z-index: 90; display: flex; align-items: center; justify-content: center;
  gap: 20px; padding: 16px 40px; background: var(--alt); border-bottom: 1px solid var(--line);
  box-shadow: 0 4px 12px rgba(0, 32, 64, 0.06); }
/* Fixed 24px cells so the enlarged active dot never shifts the others. */
.pd-dots { display: flex; align-items: center; gap: 14px; }
.pd-dot { flex: 0 0 24px; width: 24px; height: 24px; padding: 0; border: 0; background: transparent;
  position: relative; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; }
/* inactive: a small grey pellet */
.pd-dot::before { content: ""; width: 11px; height: 11px; border-radius: 50%; background: var(--ph3);
  transition: background-color .2s ease; }
.pd-dot:hover::before { background: var(--ph4); }
/* active: a larger pie that fills grey one 36°-slice per second (--elapsed) */
.pd-dot.active::before { position: absolute; inset: 0; width: auto; height: auto; border-radius: 50%;
  background: conic-gradient(#c2cad3 0deg var(--elapsed, 0deg), #00497c var(--elapsed, 0deg) 360deg); }
.pd-arrow { width: 32px; height: 32px; border: 1px solid var(--line); background: #fff; color: var(--ink);
  border-radius: 50%; font-size: 18px; line-height: 1; cursor: pointer; display: flex; align-items: center;
  justify-content: center; transition: background-color .2s ease, border-color .2s ease; }
.pd-arrow:hover { background: var(--ph1); border-color: var(--ph3); }
/* Bullets centered by default; the current problem name appears at the left
   and slides the bullets to the right (back to center when it disappears).
   The h2 hides while the name shows, so we always know the problem. */
.pd-nav { justify-content: center; }
.pd-nav-title { flex: 0 1 0; min-width: 0; text-align: left; color: var(--ink);
  font-size: 16px; font-weight: 650; letter-spacing: .3px; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; opacity: 0;
  transition: flex-grow .28s ease, opacity .22s ease; }
.pd-nav.show-title .pd-nav-title { flex-grow: 1; opacity: 1; }
.pd-nav-group { flex: 0 0 auto; display: flex; align-items: center; gap: 20px;
  position: relative; z-index: 1; background: var(--alt); padding-left: 14px; }
.pd-title.pd-covered { visibility: hidden; }

.problem-detail[hidden] { display: none; }

.pd-head { max-width: var(--lat-sectiune); margin: 0 auto; padding: 56px 40px 0; }
.pd-title { margin: 0; font-size: 34px; line-height: 1.18; color: var(--ink); letter-spacing: 0.3px; }

/* Description row (reuses .banner2 / .banner2-media) */
.pd-banner { padding: 28px 40px 8px; }
.pd-desc { align-self: center; }
.pd-desc p { margin: 0; font-size: 18px; line-height: 1.65; color: var(--muted); }

.pd-flow { max-width: var(--lat-sectiune); margin: 0 auto; padding: 0 40px; }

/* PEACE: gradient placeholder (future image) left, the 4 stairs right */
.pd-peace { display: grid; grid-template-columns: 1fr 1.4fr; gap: 28px; align-items: stretch; margin: 40px 0; }
.pd-peace-media { min-height: 360px; border-radius: 12px; background: linear-gradient(135deg, #00497c, #98a8bc); }
.pd-stair { display: flex; align-items: center; gap: 14px; background: var(--alt); border: 1px solid var(--line);
  border-radius: 8px; padding: 16px 18px; margin-bottom: 12px; }
.pd-stair:last-child { margin-bottom: 0; }
.pd-stair-icon { flex: 0 0 auto; width: 30px; height: 30px; object-fit: contain; }
.pd-stair-text { margin: 0; font-size: 15px; line-height: 1.55; color: var(--ink); }

/* Veranda: two rows, each = a gray card (~3/4) + a square blue-on-white illustration.
   how_it_works → illustration on the right; why_it_works → illustration on the left. */
.pd-porch { margin: 40px 0; }
/* Pure-CSS equal heights: the row stretches both children to the tallest (= the card,
   whose height is driven only by its text). The illustration is absolutely positioned
   inside a fixed-width column, so it contributes 0 to the row height (no feedback loop)
   and just fills the card's height; aspect-ratio then makes it a square. */
.pd-vrow { display: flex; align-items: stretch; gap: 28px; min-height: 100px; }
.pd-vrow + .pd-vrow { margin-top: 28px; }
.pd-card { flex: 1 1 auto; min-width: 0; background: var(--alt); border: 1px solid var(--line); border-radius: 10px; padding: 22px 24px; }
.pd-card p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--ink); }
/* Square hugs the outer edge; the card (flex:1) fills the rest of the row. The square's
   side is set to the card's live height by JS (sizeIllus) — CSS can equalize the two
   heights but can't turn a flex-stretched height into a matching width, so a small script
   does it. The SVG is absolutely positioned so it never inflates the square. */
.pd-illus { flex: 0 0 auto; align-self: flex-start; position: relative; background: #fff; border: 1px solid #00497c; border-radius: 10px; overflow: hidden; }
.pd-illus svg, .pd-illus img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: contain; }
@media (max-width: 760px) {
  .pd-vrow { flex-direction: column; align-items: stretch; }
  .pd-vrow .pd-card { order: 0; }
  .pd-vrow .pd-illus { order: 1; align-self: center; }
}
.pd-stepnum { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; flex: 0 0 20px; border-radius: 50%; background: #00497c; color: #fff; font-size: 12px; font-weight: 700; line-height: 1; margin: 0 6px 0 2px; vertical-align: middle; position: relative; top: -1px; }

/* Ușa: a 3/4-width gradient card, centered on screen — text then CTA, both centered */
.pd-door { margin: 40px 0 8px; }
.pd-door-card { width: 75%; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 20px;
  text-align: center; background: linear-gradient(135deg, #00497c, #98a8bc); border-radius: 12px; padding: 28px 32px; color: #fff; }
.pd-door-text { margin: 0; font-size: 16px; line-height: 1.55; color: #fff; }
.pd-door .btn-cta { flex: 0 0 auto; background: #fff; color: #00497c; border-color: #fff; }
.pd-door .btn-cta:hover { background: #eef3f8; border-color: #eef3f8; color: #00497c; }

@media (max-width: 900px) {
  .pd-nav { gap: 12px; padding: 9px 18px;
    /* 12 puncte + două săgeți nu încap pe un ecran de telefon: centrate și
       nemicșorabile (flex: 0 0 auto) împingeau pagina la 540px lățime, indiferent
       de ecran. Aici bara devine derulabilă pe orizontală, în interiorul ei. */
    justify-content: flex-start; overflow-x: auto; overscroll-behavior-x: contain;
    scrollbar-width: none; -ms-overflow-style: none; }
  .pd-nav::-webkit-scrollbar { display: none; }
  .pd-nav-title { font-size: 15px; }
  .pd-nav-group { gap: 10px; padding-right: 4px; }
  /* ținta de atingere rămâne 44px prin pseudo-element, deși pastila e mai mică */
  .pd-dots { gap: 8px; }
  .pd-dot { flex: 0 0 32px; width: 32px; height: 32px; }
  .pd-dot::after { content: ""; position: absolute; inset: -6px; }
  .pd-head { padding: 40px 18px 0; }
  .pd-banner { padding: 20px 18px 4px; }
  .pd-flow { padding: 0 18px; }
  .pd-peace { grid-template-columns: 1fr; }
  .pd-peace-media { min-height: 200px; }
  .pd-card { width: 100%; }
  .pd-card + .pd-card { margin-left: 0; }
  .pd-door-card { width: 100%; }
}

/* Floating bottom copyright bar: always visible, fades out once the footer is
   more than half in view (and fades back in on scroll-up below that). Blue
   gradient right-to-left, copyright on the right, small height (10px padding). */
.pd-footbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
  display: flex; align-items: center; justify-content: flex-start;
  padding: 16.5px 40px; color: #fff; font-size: 13px; letter-spacing: .2px;
  background: linear-gradient(to right, #00497c, #98a8bc);
  transition: opacity .35s ease; }
.pd-footbar.hide { opacity: 0; pointer-events: none; }


/* Ținta de atingere a săgeților caruselului (E1). Regula stă aici, nu în
   styles.css: `pd-detail.css` se încarcă după el, deci acolo ar fi pierdut. */
@media (max-width: 1024px) {
  .pd-arrow { width: 44px; height: 44px; }
}
@media (hover: none) and (pointer: coarse) {
  .pd-arrow { width: 44px; height: 44px; }
}


/* Bara lipicioasă avea 73px pe telefon — cu headerul de 61px însemna 134px de
   ecran ocupați permanent, 20% dintr-un 667px. `--nav-h` din styles.css urmează
   valoarea de aici. */
@media (max-width: 560px) {
  .pd-nav { padding: 7px 14px; gap: 10px; }
}


/* În peisaj înălțimea e resursa rară: bara caruselului avea 63px din 375.
   Pastilele coboară de la 44 la 36px — peste minimul de 24px al WCAG 2.5.8. */
@media (orientation: landscape) and (max-height: 480px) {
  .pd-nav { padding: 4px 14px; gap: 8px; }
  .pd-dot { flex: 0 0 36px; width: 36px; height: 36px; }
  .pd-arrow { width: 36px; height: 36px; }
  .pd-head { padding-top: 20px; }
}

/* ── Sub-serviciile lui S2 pe mobil ──────────────────────────────────────────
   Ambele reguli privesc DOAR cele 13 pagini S2.x: `.hero-sub` și
   `.pd-titlebar-parent` nu există nicăieri altundeva pe site, deci selectorii
   simpli sunt deja limitați la ele.

   Regulile stau AICI, nu în `styles.css`: `pd-detail.css` se încarcă după el,
   iar prima dintre ele repetă selectorul complet din original — la specificitate
   egală decide ordinea, iar un selector mai scurt ar fi pierdut.
   ───────────────────────────────────────────────────────────────────────────*/
@media (max-width: 900px) {
  /* 1. Retragerea „de un tab" a numelui sub-serviciului față de cel al
        serviciului principal. Pe desktop desenează ierarhia; pe un ecran de
        375px cei 48px sunt 13% din lățime, iar titlul — deja lung — se rupe pe
        un rând în plus. Aliniat la stânga, sub numele părintelui. */
  body.pd-detail .hero .hero-inner h1.hero-sub { margin-left: 0; }

  /* 2. Firul Ariadnei din bara lipicioasă. Numele serviciului principal plus
        separatorul plus iconițele mâncau jumătate din bară, iar numele
        sub-serviciului — cel pentru care omul e pe pagină — rămânea tăiat.
        Pe mobil bara păstrează un singur lucru: unde ești. Legătura către
        serviciul principal rămâne în banner, la începutul paginii. */
  .pd-titlebar-parent,
  .pd-titlebar-sep { display: none; }
}

/* Cardurile caruselului de probleme cresc odată cu containerul: paragraful lor
   trecea de la 1040px (la 1440 lățime de ecran) la 1400px pe 4K. Peste ~1100px
   rândul devine greu de urmărit, oricât spațiu ar fi. Cardul rămâne lat — se
   lărgește doar spațiul din jurul textului, nu textul. */
@media (min-width: 1600px) {
  .pd-card { padding-left: max(26px, calc((100% - 1100px) / 2)); padding-right: max(26px, calc((100% - 1100px) / 2)); }
}