/* ==========================================================================
   Viva Solar — CSS comun pentru toate paginile
   Conductoare: maro = fază, albastru = nul, galben-verde = împământare
   ========================================================================== */

:root{
  --graphite:#191C21;
  --panel:#232830;
  --steel:#3A424E;
  --paper:#F1F0EC;
  --ink:#14171B;
  --muted:#6C7480;

  --phase:#8A5A3B;   /* L */
  --neutral:#2C6BD1; /* N */
  --earth:#C7D62E;   /* PE */

  --display:'Barlow Condensed', 'Arial Narrow', sans-serif;
  --body:'IBM Plex Sans', system-ui, sans-serif;
  --mono:'IBM Plex Mono', ui-monospace, monospace;

  --gutter:clamp(20px, 5vw, 64px);
  --maxw:1120px;
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;}
img{max-width:100%; display:block;}
button{font:inherit; color:inherit; background:none; border:0; cursor:pointer;}

:focus-visible{
  outline:3px solid var(--earth);
  outline-offset:3px;
}

.wrap{max-width:var(--maxw); margin:0 auto; padding-inline:var(--gutter);}

/* ---------- Bara de conductoare (motivul semnătură) ---------- */
.bus{display:flex; flex-direction:column; gap:3px; width:100%;}
.bus span{display:block; height:3px; width:100%;}
.bus span:nth-child(1){background:var(--phase);}
.bus span:nth-child(2){background:var(--neutral);}
.bus span:nth-child(3){background:var(--earth);}

/* ---------- Header ---------- */
header{
  position:sticky; top:0; z-index:50;
  background:rgba(25,28,33,.96);
  backdrop-filter:saturate(140%) blur(6px);
  border-bottom:1px solid #000;
}
.navbar{
  display:flex; align-items:center; gap:24px;
  height:64px;
}
.mark{
  display:flex; align-items:center; gap:10px;
  font-family:var(--display);
  font-weight:700; font-size:26px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--paper);
  text-decoration:none;
  flex-shrink:0;
}
.mark em{color:var(--earth); font-style:normal;}
.mark img{height:30px; width:auto; display:block;}

.foot-brand{display:flex; align-items:center; gap:14px; margin-bottom:14px;}
.foot-brand img{height:36px; width:auto; display:block;}

.nav-links{
  display:flex; align-items:center; gap:26px;
  margin-right:auto;
  font-family:var(--mono); font-size:13px; letter-spacing:.08em; text-transform:uppercase;
}
.nav-links a{
  color:#B7BFC9; text-decoration:none;
  padding:22px 0; border-bottom:2px solid transparent;
}
.nav-links a:hover{color:var(--paper);}
.nav-links a[aria-current="page"]{color:var(--paper); border-bottom-color:var(--earth);}

.navcall{
  font-family:var(--mono); font-size:14px; font-weight:500;
  color:var(--paper); text-decoration:none;
  border:1px solid var(--steel);
  padding:9px 14px;
  transition:background .15s ease, border-color .15s ease;
  flex-shrink:0;
}
.navcall:hover{background:var(--steel); border-color:var(--paper);}

.hamburger{
  display:none;
  flex-direction:column; justify-content:center; gap:5px;
  width:34px; height:34px; flex-shrink:0;
}
.hamburger span{
  display:block; height:2px; width:100%; background:var(--paper);
  transition:transform .2s ease, opacity .2s ease;
}
.hamburger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.hamburger[aria-expanded="true"] span:nth-child(2){opacity:0;}
.hamburger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* ---------- Hero ---------- */
.hero{
  background:var(--graphite);
  color:var(--paper);
  padding-block:clamp(56px, 9vw, 104px) clamp(48px, 7vw, 88px);
  position:relative; overflow:hidden;
}
.eyebrow{
  font-family:var(--mono); font-size:12.5px; letter-spacing:.14em;
  text-transform:uppercase; color:#98A2B0;
  margin-bottom:24px;
}
.eyebrow b{color:var(--earth); font-weight:500;}
h1{
  font-family:var(--display);
  font-weight:700;
  font-size:clamp(42px, 8.2vw, 88px);
  line-height:.98;
  letter-spacing:-.005em;
  text-transform:uppercase;
  max-width:15ch;
}
h1 .thin{font-weight:500; color:#9BA5B2;}

.hero-rule{margin:32px 0 28px; max-width:520px;}
.hero-rule .bus span{position:relative;}
.hero-rule .bus span:nth-child(3)::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, transparent, #FFF 40%, transparent);
  transform:translateX(-100%);
  animation:current 3.4s cubic-bezier(.4,0,.2,1) .5s infinite;
}
@keyframes current{
  0%{transform:translateX(-100%);}
  55%,100%{transform:translateX(320%);}
}
@media (prefers-reduced-motion: reduce){
  .hero-rule .bus span:nth-child(3)::after{animation:none; display:none;}
  html{scroll-behavior:auto;}
  *{transition-duration:.001ms !important; animation-duration:.001ms !important;}
}

.lede{
  font-size:clamp(17px, 2vw, 20px);
  color:#C3CAD3;
  max-width:56ch;
}
.cta-row{display:flex; flex-wrap:wrap; gap:12px; margin-top:36px;}
.btn{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--display); text-transform:uppercase;
  font-weight:600; font-size:20px; letter-spacing:.04em;
  padding:14px 26px; text-decoration:none;
  border:2px solid transparent;
  transition:transform .12s ease, background .15s ease, color .15s ease;
}
.btn:active{transform:translateY(1px);}
.btn-primary{background:var(--earth); color:var(--ink);}
.btn-primary:hover{background:#D9E84A;}
.btn-ghost{border-color:var(--steel); color:var(--paper);}
.btn-ghost:hover{border-color:var(--paper);}
.btn-ghost-ink{border-color:#CFCDC6; color:var(--ink);}
.btn-ghost-ink:hover{border-color:var(--ink);}

.hero-meta{
  margin-top:40px;
  display:flex; flex-wrap:wrap; gap:28px;
  font-family:var(--mono); font-size:13px; color:#8C96A3;
}
.hero-meta b{display:block; color:var(--paper); font-weight:500; font-size:15px; margin-bottom:2px;}

/* ---------- Pagini fără hero mare (sub-hero) ---------- */
.subhero{
  background:var(--graphite); color:var(--paper);
  padding-block:clamp(44px, 7vw, 72px) clamp(36px, 5vw, 56px);
}
.subhero h1{font-size:clamp(36px, 6.5vw, 62px); max-width:20ch;}
.subhero .lede{margin-top:20px;}

/* ---------- Secțiuni ---------- */
section{padding-block:clamp(56px, 8vw, 96px);}
.sec-head{
  display:flex; align-items:baseline; gap:16px;
  margin-bottom:40px;
  border-bottom:1px solid #D5D3CD; padding-bottom:14px;
}
.sec-head h2{
  font-family:var(--display); font-weight:700;
  font-size:clamp(30px, 4.4vw, 46px);
  text-transform:uppercase; line-height:1;
}
.sec-head .tag{
  font-family:var(--mono); font-size:12px; color:var(--muted);
  letter-spacing:.1em; text-transform:uppercase; margin-left:auto;
}

/* Servicii — derivate pe rând, ca circuitele dintr-un tablou */
.circuits{display:grid; gap:0;}
.circuit{
  display:grid;
  grid-template-columns:96px 1fr;
  gap:24px;
  padding:26px 0;
  border-bottom:1px solid #DEDCD6;
  align-items:start;
  scroll-margin-top:84px;
}
.circuit:first-child{border-top:1px solid #DEDCD6;}
.circuit .code{
  font-family:var(--mono); font-size:12px; font-weight:500;
  color:var(--muted); letter-spacing:.06em;
  padding-top:5px;
  border-left:3px solid var(--phase);
  padding-left:12px;
}
.circuit:nth-child(3n+2) .code{border-left-color:var(--neutral);}
.circuit:nth-child(3n+3) .code{border-left-color:var(--earth);}
.circuit h3{
  font-family:var(--display); text-transform:uppercase;
  font-weight:600; font-size:26px; line-height:1.1; margin-bottom:6px;
}
.circuit p{color:#4A5058; max-width:62ch;}

/* De ce eu */
.dark{background:var(--panel); color:var(--paper);}
.dark .sec-head{border-bottom-color:var(--steel);}
.dark .sec-head .tag{color:#8C96A3;}
.points{display:grid; grid-template-columns:repeat(auto-fit, minmax(240px,1fr)); gap:36px;}
.point h3{
  font-family:var(--display); text-transform:uppercase; font-weight:600;
  font-size:23px; margin:16px 0 8px;
}
.point p{color:#B7BFC9; font-size:16px;}
.point .num{
  font-family:var(--mono); font-size:12px; color:var(--earth); letter-spacing:.12em;
}

/* Zona */
.zone{display:flex; flex-wrap:wrap; gap:8px; margin-top:8px;}
.zone span{
  font-family:var(--mono); font-size:13px;
  border:1px solid #CFCDC6; padding:6px 12px;
}

/* Contact */
.contact{background:var(--graphite); color:var(--paper);}
.contact .sec-head{border-bottom-color:var(--steel);}
.contact-grid{display:grid; grid-template-columns:1.2fr 1fr; gap:48px;}
.contact h2{color:var(--paper);}
.contact p.lede{margin-bottom:28px;}
.bigphone{
  font-family:var(--display); font-weight:700;
  font-size:clamp(38px, 6.5vw, 62px);
  letter-spacing:.01em; color:var(--earth);
  text-decoration:none; display:inline-block; line-height:1;
}
.bigphone:hover{text-decoration:underline; text-underline-offset:6px;}
.contact-list{font-family:var(--mono); font-size:14px; color:#A6AFBA; line-height:2;}
.contact-list b{color:var(--paper); font-weight:500;}
.contact-list div + div{margin-top:18px;}

/* Formular de contact */
.form-field{margin-bottom:18px;}
.form-field label{
  display:block; font-family:var(--mono); font-size:12.5px;
  letter-spacing:.08em; text-transform:uppercase; color:#98A2B0; margin-bottom:8px;
}
.form-field input, .form-field textarea{
  width:100%; background:var(--panel); color:var(--paper);
  border:1px solid var(--steel); padding:13px 14px;
  font-family:var(--body); font-size:16px;
}
.form-field textarea{resize:vertical; min-height:120px;}
.form-field input::placeholder, .form-field textarea::placeholder{color:#6C7480;}
.form-note{font-family:var(--mono); font-size:12px; color:#8C96A3; margin-top:14px;}

/* Footer */
footer{background:#000; color:#79818C; padding-block:36px;}
.foot{
  display:flex; flex-wrap:wrap; gap:20px; justify-content:space-between;
  font-family:var(--mono); font-size:12px; line-height:1.9;
}

/* Bara de apel pe mobil */
.sticky-call{display:none;}
@media (max-width:860px){
  .nav-links{
    display:none;
    position:absolute; top:64px; left:0; right:0;
    flex-direction:column; gap:0;
    background:var(--graphite); border-bottom:1px solid var(--steel);
    padding:8px var(--gutter) 18px;
  }
  .nav-links.open{display:flex;}
  .nav-links a{padding:14px 0; border-bottom:1px solid var(--steel); width:100%;}
  .nav-links a[aria-current="page"]{border-bottom-color:var(--earth);}
  .navcall{display:none;}
  .hamburger{display:flex;}
}
@media (max-width:720px){
  .contact-grid{grid-template-columns:1fr; gap:32px;}
  .circuit{grid-template-columns:1fr; gap:10px;}
  .circuit .code{padding-top:0;}
  body{padding-bottom:74px;}
  .sticky-call{
    display:block; position:fixed; bottom:0; left:0; right:0; z-index:60;
    background:var(--earth); color:var(--ink);
    text-align:center; padding:18px;
    font-family:var(--display); font-weight:700; font-size:22px;
    text-transform:uppercase; letter-spacing:.04em; text-decoration:none;
    border-top:2px solid var(--ink);
  }
}

/* ==========================================================================
   Lucrări — galerie
   ========================================================================== */
.gal-cat{padding-block:clamp(40px, 6vw, 64px);}
.gal-cat + .gal-cat{border-top:1px solid #DEDCD6;}
.gal-cat h2{
  font-family:var(--display); font-weight:700; text-transform:uppercase;
  font-size:clamp(26px, 3.6vw, 36px); margin-bottom:24px;
}
.gallery{display:grid; grid-template-columns:repeat(auto-fill, minmax(260px,1fr)); gap:18px;}
.gallery figure{cursor:zoom-in;}
.shot{
  aspect-ratio:4/3; background:#DCDAD3; overflow:hidden;
  border:1px solid #C9C6BE;
}
.shot img{width:100%; height:100%; object-fit:cover; transition:transform .3s ease;}
.gallery figure:hover .shot img{transform:scale(1.04);}
.cap{font-family:var(--mono); font-size:12px; color:var(--muted); margin-top:8px;}

/* Card lucrare — click duce la pagina de detaliu */
.gallery-card{
  display:block; text-decoration:none; color:inherit;
  border:1px solid #C9C6BE; background:var(--paper);
  transition:border-color .15s ease;
}
.gallery-card:hover{border-color:var(--steel);}
.gallery-card:hover .shot img{transform:scale(1.04);}
.gallery-card .shot{border:0; border-bottom:1px solid #C9C6BE; cursor:pointer;}
.card-body{padding:14px 16px 16px;}
.card-title{
  font-family:var(--display); font-weight:600; text-transform:uppercase;
  font-size:18px; line-height:1.15; margin-bottom:8px;
}

/* Lightbox */
.lightbox{
  display:none;
  position:fixed; inset:0; z-index:100;
  background:rgba(10,11,13,.94);
  align-items:center; justify-content:center;
  padding:32px;
}
.lightbox.open{display:flex;}
.lightbox-inner{max-width:min(1100px, 92vw); max-height:88vh; text-align:center;}
.lightbox-inner img{max-height:78vh; margin:0 auto; width:auto;}
.lightbox-cap{font-family:var(--mono); font-size:13px; color:#C3CAD3; margin-top:16px;}
.lightbox-close{
  position:absolute; top:20px; right:24px;
  width:44px; height:44px;
  border:1px solid var(--steel); color:var(--paper);
  font-size:22px; line-height:1;
}
.lightbox-close:hover{background:var(--steel);}

/* ==========================================================================
   Configurator — pagină "în lucru"
   ========================================================================== */
.wip-card{
  border:1px solid var(--steel); background:var(--panel);
  padding:clamp(28px, 5vw, 48px); margin-top:8px;
}
.wip-tag{
  display:inline-block; font-family:var(--mono); font-size:12px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink); background:var(--earth);
  padding:5px 10px; margin-bottom:20px;
}
.wip-card h2{
  font-family:var(--display); text-transform:uppercase; font-weight:600;
  font-size:clamp(24px, 3.4vw, 32px); margin-bottom:16px; color:var(--paper);
}
.wip-card p{color:#B7BFC9; max-width:62ch; margin-bottom:14px;}
.wip-list{list-style:none; margin:20px 0; display:grid; gap:10px;}
.wip-list li{
  font-family:var(--mono); font-size:14px; color:#C3CAD3;
  padding-left:22px; position:relative;
}
.wip-list li::before{
  content:""; position:absolute; left:0; top:9px;
  width:9px; height:3px; background:var(--earth);
}
#configurator-app{margin-top:12px;}

/* ==========================================================================
   Admin — panou local de adăugat lucrări (nu e pentru vizitatori)
   ========================================================================== */
.admin-banner{
  background:var(--phase); color:var(--paper);
  font-family:var(--mono); font-size:12.5px; letter-spacing:.06em; text-transform:uppercase;
  text-align:center; padding:10px 16px;
}
.admin-toolbar{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  flex-wrap:wrap; margin-bottom:28px;
}
.admin-toolbar .status{
  font-family:var(--mono); font-size:12.5px; color:var(--muted);
}
.admin-toolbar .status.ok{color:#4A7A2B;}
.btn-add{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--display); text-transform:uppercase; font-weight:600; font-size:17px;
  letter-spacing:.04em; background:var(--earth); color:var(--ink);
  border:2px solid transparent; padding:12px 20px; text-decoration:none;
}
.btn-add:hover{background:#D9E84A;}
.btn-add .plus{font-size:22px; line-height:1; font-weight:700;}

.admin-list{display:grid; gap:0;}
.admin-row{
  display:grid; grid-template-columns:88px 1fr auto; gap:18px; align-items:center;
  padding:14px 0; border-bottom:1px solid #DEDCD6;
}
.admin-row:first-child{border-top:1px solid #DEDCD6;}
.admin-row .thumb-sm{width:88px; height:66px; object-fit:cover; background:#DCDAD3; border:1px solid #C9C6BE;}
.admin-row .meta-title{font-family:var(--display); font-weight:600; text-transform:uppercase; font-size:17px;}
.admin-row .meta-cat{font-family:var(--mono); font-size:12px; color:var(--muted); margin-top:2px;}
.admin-row-actions{display:flex; gap:8px;}
.btn-sm{
  font-family:var(--mono); font-size:12px; text-transform:uppercase; letter-spacing:.05em;
  border:1px solid var(--steel); padding:8px 12px; background:none;
}
.btn-sm:hover{background:var(--steel); color:var(--paper);}
.btn-sm.danger:hover{background:var(--phase); border-color:var(--phase); color:var(--paper);}

.empty-note{font-family:var(--mono); font-size:13px; color:var(--muted); padding:20px 0;}

/* Compozitor — overlay peste pagină */
.composer-overlay{
  display:none; position:fixed; inset:0; z-index:110;
  background:rgba(10,11,13,.88); overflow-y:auto;
  padding:32px 16px;
}
.composer-overlay.open{display:block;}
.composer{
  max-width:640px; margin:0 auto; background:var(--panel); color:var(--paper);
  border:1px solid var(--steel); padding:clamp(24px, 4vw, 40px);
}
.composer h2{
  font-family:var(--display); text-transform:uppercase; font-weight:600;
  font-size:26px; margin-bottom:24px;
}
.composer .form-field select{
  width:100%; background:var(--panel); color:var(--paper);
  border:1px solid var(--steel); padding:13px 14px; font-family:var(--body); font-size:16px;
}
.composer-actions{display:flex; gap:12px; flex-wrap:wrap; margin-top:28px;}

.file-drop{
  border:1px dashed var(--steel); padding:18px; text-align:center;
  font-family:var(--mono); font-size:13px; color:#98A2B0; margin-bottom:8px;
}
.file-drop input{display:block; margin:10px auto 0;}

.thumb-grid{display:flex; flex-wrap:wrap; gap:10px; margin-top:12px;}
.thumb{position:relative; width:88px; height:66px;}
.thumb img{width:100%; height:100%; object-fit:cover; border:1px solid var(--steel);}
.thumb-remove{
  position:absolute; top:-8px; right:-8px;
  width:22px; height:22px; border-radius:50%;
  background:var(--graphite); color:var(--paper); border:1px solid var(--steel);
  font-size:14px; line-height:1; display:flex; align-items:center; justify-content:center;
}
.thumb-remove:hover{background:var(--phase); border-color:var(--phase);}

.code-box{
  width:100%; min-height:180px; margin-top:10px;
  background:var(--graphite); color:#C3CAD3;
  border:1px solid var(--steel); padding:14px;
  font-family:var(--mono); font-size:12.5px; line-height:1.6; white-space:pre;
}
.admin-note{
  font-family:var(--mono); font-size:12.5px; color:#98A2B0; line-height:1.7;
  border-left:3px solid var(--earth); padding-left:14px; margin:16px 0;
}