/* =========================================================
   camere.md — assets/css/serviciu.css

   Paginile de serviciu. Se incarca DOAR pe ele, nu pe tot site-ul: sunt sase
   pagini de citit, iar restul site-ului n-are nevoie de regulile astea.

   Nicio culoare scrisa de mana. Totul pe tokenii din tokens.css, ca paginile
   sa se intoarca singure cand se schimba tema — si ca `_dev/audit-stil.js` sa
   nu aiba ce raporta.
   ========================================================= */

/* Bara plutitoare acopera inceputul paginii: pe index o acopera hero-ul, aici
   nu e niciun hero. */
.sv{padding-top:calc(var(--sp-72) + var(--sp-48))}

/* ---------- capul paginii ---------- */
.sv-head{max-width:62ch;margin-bottom:var(--sp-64)}
.sv-head .marker{margin:var(--sp-16) 0 var(--sp-8)}
.sv-head h1{margin:0 0 var(--sp-20)}
.sv-head .lead{margin:0}

.ring--lg{width:64px;height:64px}
.ring--lg .icon{width:28px;height:28px}

.sv-cta{
  display:flex;
  flex-wrap:wrap;
  gap:var(--sp-12);
  margin-top:var(--sp-32);
}

/* ---------- blocuri ---------- */
.sv-block{margin-bottom:var(--sp-64)}
.sv-block>h2{margin:0 0 var(--sp-24)}
.sv-block p{max-width:68ch}

/* „Ce include” — lista care trebuie sa se citeasca pe sarite, fiindca asa se
   citeste: omul cauta randul care il priveste pe el. */
.sv-list{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:var(--sp-24);
  margin:0;
  padding:0;
  list-style:none;
}
.sv-list>li{
  padding:var(--sp-20);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  background:var(--surface);
}
.sv-list h3{margin:0 0 var(--sp-8);font-size:var(--fs-h4)}
.sv-list p{margin:0;font-size:var(--fs-body);color:var(--text-muted)}

/* ---------- cum lucram ---------- */
.sv-pasi{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:var(--sp-24);
  margin:0;
  padding:0;
  list-style:none;
  counter-reset:pas;
}
.sv-pasi>li{
  position:relative;
  padding-top:var(--sp-40);
  counter-increment:pas;
}
.sv-pasi>li::before{
  content:counter(pas,decimal-leading-zero);
  position:absolute;
  top:0;
  left:0;
  font-family:var(--f-mono);
  font-size:var(--fs-label);
  color:var(--accent-text);
  letter-spacing:.08em;
}
.sv-pasi b{display:block;margin-bottom:var(--sp-8)}
.sv-pasi span{display:block;font-size:var(--fs-body);color:var(--text-muted)}

/* ---------- pentru cine ---------- */
.sv-cine{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:var(--sp-20);
  margin:0;
  padding:0;
  list-style:none;
}
.sv-cine>li{
  padding-left:var(--sp-16);
  border-left:2px solid var(--accent-line);
}
.sv-cine b{display:block;margin-bottom:var(--sp-4)}
.sv-cine span{font-size:var(--fs-body);color:var(--text-muted)}

/* ---------- cat costa ---------- */
.sv-pret{
  padding:var(--sp-32);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  background:var(--surface);
}
.sv-pret>h2{margin-top:0}

/* ---------- intrebari ---------- */
/* `<details>`, nu JavaScript: raspunsurile trebuie sa fie in pagina si pentru
   cine nu ruleaza scripturi — un motor de cautare le citeste si inchise. */
.sv-faqs{border-top:1px solid var(--border)}
.sv-faq{border-bottom:1px solid var(--border)}
.sv-faq>summary{
  display:flex;
  gap:var(--sp-16);
  align-items:center;
  justify-content:space-between;
  padding:var(--sp-20) 0;
  cursor:pointer;
  list-style:none;
}
.sv-faq>summary::-webkit-details-marker{display:none}
.sv-faq>summary:hover h3{color:var(--accent-text)}
.sv-faq h3{margin:0;font-size:var(--fs-h4)}
.sv-faq .ic{
  flex:none;
  color:var(--text-muted);
  transition:transform var(--t-ui) var(--e-out);
}
.sv-faq[open] .ic{transform:rotate(180deg)}
.sv-faq>p{margin:0 0 var(--sp-24);color:var(--text-muted)}

/* ---------- se leaga cu ---------- */
.sv-alte{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:var(--sp-16);
}
.sv-alt{
  display:flex;
  gap:var(--sp-16);
  align-items:center;
  padding:var(--sp-16) var(--sp-20);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  background:var(--surface);
  color:var(--text);
  text-decoration:none;
  transition:border-color var(--t-ui) var(--e-out),
             transform var(--t-ui) var(--e-out);
}
.sv-alt:hover{border-color:var(--accent-line);transform:translateY(-2px)}
.sv-alt b{flex:1}
.sv-alt .ic{color:var(--text-muted)}
.sv-alt:hover .ic{color:var(--accent-text)}

@media (max-width:640px){
  .sv{padding-top:calc(var(--sp-64) + var(--sp-24))}
  .sv-block{margin-bottom:var(--sp-48)}
  .sv-pret{padding:var(--sp-20)}
}