/* Albi Dent, site nou: piesele paginilor interioare (16.10.2026). Se încarcă după baza.css.
   Preluat de la Barbu (site-nou/assets/pagini.css) și adaptat la albastrul Albi. Fundal deschis, fără lume generată;
   nimic centrat, fără cutii: titlurile stau la marginea --gut, pozele se topesc în fundal, listele au doar linii fine. */

/* ---------------- antetul paginii: fir de navigare, eticheta, H1, introducerea ---------------- */
.page-head{position:relative;overflow-x:clip;display:flex;flex-direction:column;justify-content:flex-start;padding:clamp(104px,9vw,128px) 0 clamp(34px,5vw,60px)}
/* o lumină albastră foarte slabă în dreapta, ca antetul paginii să nu fie o foaie goală */
.page-head::before{content:"";position:absolute;inset:-120px 0 -200px;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse 50% 55% at 92% 40%,rgba(var(--blue-a),.10),rgba(var(--blue-a),0) 70%)}
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:8px;color:var(--soft);font-size:.9rem;margin-bottom:26px}
.crumbs a{text-decoration:none}
.crumbs a:hover{color:var(--blue-ink)}
.crumbs .sl{opacity:.5}
.page-h1{margin-top:14px;font-size:clamp(2.5rem,7vw,5.2rem);font-weight:250;letter-spacing:-.045em;line-height:.98;max-width:14ch}
.page-head .lead{margin-top:22px;font-size:clamp(1.05rem,1.4vw,1.2rem);color:var(--ink-2);max-width:46ch}
.ph-grid{display:grid;gap:36px}
@media (min-width:1080px){
  .ph-grid{grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:end;column-gap:64px}
}
.ctas{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;margin-top:26px}
.ph-meta{margin-top:18px;color:var(--soft);font-size:.95rem;display:flex;flex-wrap:wrap;gap:6px 18px}

/* cuprinsul paginii: numere + nume, pe două coloane, cu linii fine (doar ancore în pagină) */
.toc{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:26px;font-size:.98rem}
.toc a{display:flex;gap:12px;align-items:baseline;padding:11px 0;border-top:1px solid var(--line);text-decoration:none;transition:color .25s ease}
.toc li:nth-last-child(-n+2) a{border-bottom:1px solid var(--line)}
.toc a span{flex:none;color:var(--blue-ink);font-size:.8rem;font-weight:500;font-variant-numeric:tabular-nums;letter-spacing:.04em}
@media (hover:hover){.toc a:hover{color:var(--blue-ink)}}
@media (max-width:479px){.toc{grid-template-columns:minmax(0,1fr)}.toc li:nth-last-child(2) a{border-bottom:0}}

/* ---------------- grupe numerotate (Prețuri): număr, H2 și introducere în stânga (lipite), lista în dreapta ---------------- */
.grp-sec{padding-block:clamp(36px,5vw,70px)}
.grp{display:grid;gap:24px;padding-top:clamp(26px,3.5vw,42px);border-top:1px solid var(--line)}
.grp-n{color:var(--blue-ink);font-size:.9rem;font-weight:500;letter-spacing:.06em;font-variant-numeric:tabular-nums}
.grp-side .h2s{margin-top:10px;font-size:clamp(1.8rem,3.2vw,2.9rem);font-weight:280;letter-spacing:-.04em;line-height:1.04}
.grp-intro{margin-top:14px;color:var(--soft);max-width:40ch}
.grp-links{display:flex;flex-wrap:wrap;gap:6px 22px;margin-top:16px}
.grp-links:empty{display:none}
@media (min-width:1080px){
  .grp{grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:72px;align-items:start}
  .grp-side{position:sticky;top:104px}
}

/* ---------------- îndemn la final: titlu mare în stânga, acțiunile dedesubt ---------------- */
.cta{display:grid;gap:26px}
.cta .h2{max-width:14ch}
.cta .lead{margin-top:16px}
.cta-acts{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
@media (min-width:1080px){.cta{grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:end;column-gap:64px}}

/* ---------------- paginile de serviciu: antet cu poza în dreapta, capitole H2 + text ---------------- */
.ph-pic{margin:0;width:100%;max-width:620px;aspect-ratio:4/3;overflow:hidden;justify-self:end;
  -webkit-mask-image:radial-gradient(ellipse 50% 50% at 50% 52%,#000 48%,rgba(0,0,0,.55) 70%,rgba(0,0,0,.15) 88%,transparent 100%);
  mask-image:radial-gradient(ellipse 50% 50% at 50% 52%,#000 48%,rgba(0,0,0,.55) 70%,rgba(0,0,0,.15) 88%,transparent 100%)}
.ph-pic img{width:100%;height:100%;object-fit:cover}
.ph-svc .page-h1{font-size:clamp(2.3rem,5.4vw,4.4rem);max-width:16ch}
@media (min-width:1080px){.ph-svc .ph-grid{align-items:center}}
@media (max-width:1079px){.ph-pic{justify-self:start;max-width:560px;margin-top:-10px}}

/* pe scurt, sub antet: patru fapte pe o linie fină (fără cifre inventate) */
.facts-sec{padding:clamp(10px,2vw,30px) 0 10px}
.facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 18px;border-top:1px solid var(--line);padding-top:24px}
.facts li{display:grid;gap:4px;align-content:start;font-size:.93rem;color:var(--ink-2)}
.facts b{font-weight:300;font-size:clamp(1.35rem,2.2vw,1.9rem);letter-spacing:-.03em;line-height:1.1;color:var(--ink)}
@media (min-width:760px){.facts{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* capitolele: H2 numerotat lipit la derulare în stânga (desktop), textul în dreapta */
.chap{padding-block:clamp(34px,5vw,70px)}
.chap-g{display:grid;gap:22px;padding-top:clamp(26px,3.5vw,42px);border-top:1px solid var(--line)}
.chap-side .h2s{margin-top:10px;font-size:clamp(1.8rem,3vw,2.7rem);font-weight:280;letter-spacing:-.035em;line-height:1.06;max-width:16ch}
.chap-pic{margin:26px 0 0;width:min(100%,320px);aspect-ratio:3/4;overflow:hidden;border-radius:46% 54% 48% 52% / 54% 46% 54% 46%;
  -webkit-mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 62%,rgba(0,0,0,.5) 80%,transparent 93%);
  mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 62%,rgba(0,0,0,.5) 80%,transparent 93%)}
.chap-pic.wide{aspect-ratio:4/3;width:min(100%,380px)}
.chap-pic img{width:100%;height:100%;object-fit:cover}
@media (min-width:1080px){
  .chap-g{grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:72px;align-items:start}
  .chap-side{position:sticky;top:104px}
}
/* pe telefon poza capitolului rămâne, mai mică, sub titlu (pagina are puține poze și ele spun ceva) */
@media (max-width:1079px){.chap-pic{width:min(100%,420px);aspect-ratio:16/10;margin-top:18px}.chap-pic.wide{width:min(100%,420px)}}

/* textul de citit: o coloană lizibilă, liste cu puncte albastre, liste pe două coloane cu linii fine */
.prose{display:grid;gap:18px;max-width:68ch}
.prose > p{color:var(--ink-2);font-size:1.04rem;line-height:1.72}
.prose strong{font-weight:560;color:var(--ink)}
.prose a:not(.pill):not(.go){color:var(--blue-ink);text-decoration:none;background:linear-gradient(currentColor,currentColor) 0 100%/100% 1px no-repeat;padding-bottom:1px}
.prose h3{margin-top:8px;font-size:1.2rem}
.dots,.nums{display:grid;gap:10px}
.dots li,.nums li{position:relative;padding-left:24px;color:var(--ink-2);line-height:1.6}
.dots li::before{content:"";position:absolute;left:2px;top:.62em;width:7px;height:7px;border-radius:50%;background:var(--blue);opacity:.85}
.proc{display:grid;column-gap:34px}
.proc li{display:grid;gap:4px;align-content:start;padding:16px 0 18px;border-top:1px solid var(--line)}
.proc b,.proc h3{margin:0;font-weight:500;font-size:1.06rem;letter-spacing:-.01em}
.proc span,.proc p{color:var(--soft);font-size:.96rem;line-height:1.55}
@media (min-width:760px){.proc{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
/* pașii: buline numerotate pe un fir vertical */
.steps{position:relative;display:grid;gap:4px}
.steps::before{content:"";position:absolute;left:14px;top:30px;bottom:30px;width:1.4px;background:linear-gradient(var(--blue),rgba(var(--blue-a),.15))}
.steps li{position:relative;padding:14px 0 14px 50px;color:var(--ink-2);line-height:1.62}
.steps .no{position:absolute;left:0;top:14px;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#fff;box-shadow:0 0 0 1.5px var(--blue),0 0 0 6px rgba(var(--blue-a),.1);color:var(--blue-ink);font-size:.85rem;font-weight:520}
.steps strong{display:block;margin-bottom:2px}
.links{display:flex;flex-wrap:wrap;gap:8px 22px}
.links a{color:var(--blue-ink);font-weight:500;text-decoration:none}
.links a:hover{text-decoration:underline}
.acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}
.see{margin-top:clamp(30px,4vw,48px);padding-top:20px;border-top:1px solid var(--line);color:var(--soft);font-size:.95rem;line-height:1.9}
.see a{color:var(--blue-ink);text-decoration:none;font-weight:480}
.see a:hover{text-decoration:underline}
.callout{display:grid;gap:10px;max-width:62ch;padding:6px 0 6px 22px;border-left:2px solid var(--blue)}
.callout p{color:var(--ink-2)}
.note{color:var(--soft);font-size:.93rem}
.faq-in .h2{font-size:clamp(1.9rem,3.4vw,3rem);max-width:16ch}
.chap-g > *,.grp > *,.ph-grid > *,.cta > *{min-width:0}
.prose,.proc,.faq-list{overflow-wrap:anywhere}
.prose > *,.proc > *,.proc li > *{min-width:0}
.prose .pill,.cta-acts .pill{max-width:100%}
@media (max-width:559px){.prose .pill,.cta-acts .pill,.ctas .pill{white-space:normal;line-height:1.25;padding-block:12px;text-align:left}}

/* ---------------- lista de prețuri „ca un meniu”: pagina Prețuri și tabelele din paginile de serviciu ----------------
   Nume, linie punctată, preț. Pe telefon (sub 480 px) prețul trece sub nume, fără linie punctată. */
.plist{display:grid}
.plist li{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;column-gap:14px;padding:13px 0;border-bottom:1px solid var(--line)}
.plist li:first-child{border-top:1px solid var(--line)}
.pn{display:flex;align-items:baseline;gap:12px;min-width:0;color:var(--ink-2)}
.pn::after{content:"";flex:1;min-width:16px;border-bottom:1.5px dotted rgba(var(--blue-a),.35);transform:translateY(-4px)}
.pp{font-weight:500;white-space:nowrap;text-align:right;color:var(--ink)}
.pp small{font-weight:380;color:var(--soft);font-size:.82em}
.plist li[hidden]{display:none}
@media (max-width:479px){.pn::after{display:none}.plist li{column-gap:10px}}

/* ---------------- blog: lista și articolul (preluat de la Barbu, site-nou/assets/pagini.css, în albastrul Albi) ---------------- */
.bgrid{display:grid;gap:40px 30px}
.bcard{display:grid;gap:12px;text-decoration:none;color:var(--ink)}
.bcard .post-pic{margin:0}
.bcard h2{font-size:1.3rem;font-weight:420;letter-spacing:-.015em;line-height:1.25}
.bcard p{color:var(--soft);font-size:.96rem}
.bcard .post-meta{color:var(--blue-ink);font-size:.85rem;font-weight:480}
.bc-txt{display:grid;gap:8px}
.post-meta .sep{margin:0 6px;opacity:.6}
@media (hover:hover) and (pointer:fine){.bcard:hover .post-pic img{transform:scale(1.04)}.bcard:hover h2{color:var(--blue)}}
@media (min-width:760px){.bgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1080px){
  .bgrid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .bgrid li:first-child{grid-column:1 / -1}
  .bcard.feat{grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:48px;align-items:center}
  .bcard.feat .post-pic{aspect-ratio:16/9}
  .bcard.feat h2{font-size:clamp(1.8rem,2.6vw,2.5rem);font-weight:300;letter-spacing:-.03em}
}
.ph-post{min-height:0;padding-bottom:20px}
.ph-post .back{margin-bottom:18px}
.ph-post .page-h1{font-size:clamp(2.2rem,4.8vw,4rem);max-width:20ch}
.ph-post .post-meta{margin-top:18px;color:var(--blue-ink);font-weight:480;font-size:.95rem}
.post-cover{margin:clamp(26px,4vw,44px) 0 0;aspect-ratio:21/9;overflow:hidden;border-radius:28px;box-shadow:0 30px 60px -40px rgba(15,42,68,.5)}
.post-cover img{width:100%;height:100%;object-fit:cover}
@media (max-width:759px){.post-cover{aspect-ratio:5/4;border-radius:22px}}
.post-sec{padding-block:clamp(30px,5vw,60px)}
.post-g{display:grid;gap:40px}
.post-body{max-width:70ch}
.post-body > p{font-size:1.08rem;line-height:1.78}
.post-body h2{margin-top:22px;font-size:clamp(1.6rem,2.6vw,2.2rem);font-weight:300;letter-spacing:-.03em;line-height:1.15;scroll-margin-top:100px}
.post-body h3{margin-top:10px;font-size:1.22rem}
.post-body blockquote{margin:8px 0;padding:6px 0 6px 22px;border-left:2px solid var(--blue);font-size:1.12rem;line-height:1.7;color:var(--ink)}
.pbox{padding:6px 0}
.pbox-t{margin-bottom:8px;color:var(--soft);font-size:.82rem;font-weight:520;letter-spacing:.1em;text-transform:uppercase}
.post-side{display:grid;gap:26px;align-content:start}
.post-toc ol{display:grid;border-top:1px solid var(--line)}
.post-toc a{display:block;padding:9px 0;border-bottom:1px solid var(--line);text-decoration:none;font-size:.94rem;color:#36414A;line-height:1.35}
.post-toc a:hover{color:var(--blue)}
.post-toc .doc-lbl{margin:0 0 10px;color:var(--soft);font-size:.82rem;font-weight:520;letter-spacing:.1em;text-transform:uppercase}
@media (min-width:1080px){
  .post-g{grid-template-columns:minmax(0,8fr) minmax(0,4fr);column-gap:72px;align-items:start}
  .post-side{position:sticky;top:104px}
}
@media (max-width:1079px){.post-toc{display:none}}
.post-more{padding-block:10px 30px}
.post-more-g{display:grid;gap:28px;padding-top:28px;border-top:1px solid var(--line)}
.post-note p{color:var(--soft)}
.post-note p + p{margin-top:8px}
.post-note a,.sim a{color:var(--blue);text-decoration:none;font-weight:480}
.sim h3{font-size:1.1rem;font-weight:520;margin-bottom:10px}
.sim-list{display:grid;gap:6px;margin-bottom:10px}
.sim p{color:var(--soft)}
@media (min-width:1080px){.post-more-g{grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:72px}}
.post-meta span + span::before{content:"·";margin:0 8px;opacity:.6}
.back .cat{margin-left:14px;color:var(--blue-ink);font-weight:480;font-size:.92rem}
.ph-post .lead{margin-top:16px;max-width:60ch}
.post-fig{margin:30px 0;aspect-ratio:4/3;max-width:560px}
.post-pic{margin:0 0 6px;aspect-ratio:4/3;overflow:hidden;border-radius:22px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.6),0 24px 40px -30px rgba(15,42,68,.45)}
.post-pic img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
