/* ============================================================
   MAYA DIGITAL — pagina unui proiect din portofoliu

   Chenarul vine din legal.css: bara de sus, blocul de titlu, subsolul. Aici
   sta doar ce e propriu studiului de caz. Aceeasi limba vizuala ca in rest:
   colturi drepte, muchii de 1px, un patrat de accent inaintea titlurilor.

   Ca si la estimator: .page-glass din global.css e `position:fixed` cu
   z-index:0, deci acopera orice continut nepozitionat. Continutul se ridica.
   ============================================================ */
.pj{position:relative;z-index:1;max-width:60rem;margin-inline:auto;
  padding:clamp(1.6rem,4vw,3rem) var(--gutter) clamp(3rem,7vh,5rem)}

/* categoria, deasupra titlului din hero */
.pj-cat{
  font-size:clamp(.68rem,.65rem + .14vw,.74rem);font-weight:600;
  letter-spacing:var(--tracking-wide);text-transform:uppercase;
  color:rgba(var(--alb-rgb),.82);margin-bottom:.7em;
}
.pj-live{margin-top:1.6em;gap:.6em}

/* ---------- captura ---------- */
.pj-captura{
  margin:0 0 clamp(1.6rem,3.5vw,2.6rem);
  border:1px solid var(--line);background:var(--bg);
  box-shadow:0 26px 60px -30px rgba(var(--umbra-rgb),.45);
}
.pj-captura img{display:block;width:100%;height:auto}

/* ---------- fisa scurta ----------
   Randul de fapte: rol, an, cu ce e construit. Se citeste inainte de text,
   pentru cine vrea doar sa stie daca ii seamana cazul. */
.pj-fapte{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));
  gap:1px;background:var(--line);border:1px solid var(--line);
  margin-bottom:clamp(2rem,5vw,3.2rem);
}
.pj-fapte > div{background:rgba(var(--alb-rgb),.62);padding:clamp(.9rem,2vw,1.2rem)}
.pj-fapte dt{
  font-size:.64rem;font-weight:600;letter-spacing:var(--tracking-wide);
  text-transform:uppercase;color:var(--muted-2);
}
.pj-fapte dd{
  margin-top:.45em;font-size:clamp(.84rem,.8rem + .18vw,.92rem);
  line-height:1.5;color:var(--fg-2);
}

/* ---------- blocuri ---------- */
.pj-bloc{margin-bottom:clamp(2.2rem,5vw,3.4rem)}
.pj-bloc h2{
  display:flex;align-items:center;gap:.6em;
  font-size:clamp(.72rem,.68rem + .16vw,.78rem);font-weight:600;
  letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--fg-2);
  margin-bottom:1em;
}
.pj-bloc h2::before{content:"";width:.5em;height:.5em;flex-shrink:0;background:var(--brand-500)}
.pj-text{
  max-width:62ch;font-size:clamp(.95rem,.9rem + .3vw,1.06rem);
  line-height:1.75;color:var(--fg-2);
}

/* ce s-a construit: cate un pas pe rand, cu muchii comune ca la un tabel */
.pj-pasi{border:1px solid var(--line)}
.pj-pas{padding:clamp(1rem,2.4vw,1.5rem);border-top:1px solid var(--line)}
.pj-pas:first-child{border-top:0}
.pj-pas h3{
  font-size:clamp(.94rem,.9rem + .2vw,1.04rem);font-weight:600;
  letter-spacing:var(--tracking-tight);color:var(--fg);
}
.pj-pas p{
  margin-top:.5em;max-width:62ch;
  font-size:clamp(.87rem,.83rem + .2vw,.94rem);line-height:1.7;color:var(--muted);
}

/* ce a iesit: bife, aceleasi ca la „inclus standard" din estimator */
.pj-rez{list-style:none;font-size:clamp(.9rem,.86rem + .2vw,.98rem);line-height:1.65}
.pj-rez li{position:relative;padding-left:1.6em;color:var(--fg-2)}
.pj-rez li + li{margin-top:.6em}
.pj-rez li::before{
  content:"";position:absolute;left:.1em;top:.5em;width:.55em;height:.29em;
  border-left:1.8px solid var(--brand-500);border-bottom:1.8px solid var(--brand-500);
  transform:rotate(-45deg);
}

/* ---------- etichete ---------- */
.pj-tag{
  display:flex;flex-wrap:wrap;gap:.5rem;list-style:none;
  margin-bottom:clamp(2rem,5vw,3rem);
}
.pj-tag li{
  padding:.45em .9em;border:1px solid var(--line);
  background:rgba(var(--alb-rgb),.5);
  font-size:clamp(.72rem,.7rem + .12vw,.78rem);color:var(--muted);
}

/* ---------- indemn ---------- */
.pj-cta{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:1.2rem;padding:clamp(1.3rem,3vw,1.9rem);
  border:1px solid var(--line);border-left:3px solid var(--brand-500);
  background:var(--brand-100);
  margin-bottom:clamp(2rem,5vw,3rem);
}
.pj-cta p{font-size:clamp(1rem,.94rem + .3vw,1.12rem);font-weight:500;letter-spacing:var(--tracking-tight)}

/* ---------- anterior / urmator ---------- */
.pj-alte{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line)}
.pj-alt{
  display:block;padding:clamp(1rem,2.4vw,1.4rem);
  background:rgba(var(--alb-rgb),.62);
  transition:background var(--dur) var(--ease);
}
.pj-alt:hover{background:rgba(var(--alb-rgb),.9)}
.pj-alt span{
  display:block;font-size:.64rem;font-weight:600;
  letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--muted-2);
}
.pj-alt b{
  display:block;margin-top:.5em;font-size:clamp(.88rem,.84rem + .2vw,.96rem);
  font-weight:500;line-height:1.45;color:var(--fg);
}
.pj-alt-inainte{text-align:right}

@media (max-width:640px){
  .pj-alte{grid-template-columns:1fr}
  .pj-alt-inainte{text-align:left}
  .pj-cta{flex-direction:column;align-items:stretch}
  .pj-cta .btn-pill{justify-content:center}
}

/* ---------- intoarcerea la portofoliu ----------
   Fixa in dreapta jos, unde sta de obicei „inapoi sus" pe celelalte pagini.
   Aici un „sus" n-ar duce nicaieri util: cine a terminat de citit un caz vrea
   lista, nu antetul paginii. Pe telefon ramane doar sageata, ca sa nu acopere
   textul. */
.pj-inapoi{
  position:fixed;right:var(--gutter);bottom:clamp(1rem,3vh,1.8rem);z-index:40;
  display:inline-flex;align-items:center;gap:.6em;
  padding:.75em 1.15em;
  border:1px solid rgba(var(--alb-rgb),.75);
  background:linear-gradient(160deg, rgba(var(--alb-rgb),.72) 0%, rgba(var(--alb-rgb),.52) 100%);
  -webkit-backdrop-filter:blur(16px) saturate(170%);
          backdrop-filter:blur(16px) saturate(170%);
  box-shadow:
    inset 0 1px 0 rgba(var(--alb-rgb),.95),
    0 14px 32px -16px rgba(var(--umbra-rgb),.4);
  font-size:clamp(.74rem,.71rem + .14vw,.8rem);font-weight:500;
  letter-spacing:var(--tracking-tight);color:var(--fg);
  transition:background var(--dur) var(--ease),gap var(--dur) var(--ease),
             box-shadow var(--dur) var(--ease);
}
.pj-inapoi:hover{
  background:var(--fg);color:var(--invert-fg);border-color:var(--fg);gap:.85em;
  box-shadow:0 16px 36px -16px rgba(var(--umbra-rgb),.5);
}
.pj-inapoi svg{flex-shrink:0}
@media (max-width:640px){
  .pj-inapoi{padding:.7em;border-radius:0}
  .pj-inapoi span{
    position:absolute;width:1px;height:1px;overflow:hidden;
    clip-path:inset(50%);white-space:nowrap;
  }
}
/* subsolul nu trebuie sa ajunga sub buton */
.lg-footer{padding-bottom:clamp(4rem,9vh,6rem)}