/* ------------------------------------------------------
   ART Concept – servicii.css (COMPLET)
   Stiluri SPECIFICE pentru pagina servicii.html
   Totul este scos sub .page-servicii ca să nu atingă indexul
------------------------------------------------------- */

body.page-servicii{
  background:
    radial-gradient(circle at top left,rgba(59,130,246,0.09),transparent 55%),
    radial-gradient(circle at bottom right,rgba(14,165,233,0.06),transparent 55%),
    var(--bg-page);
}

/* ancore: să nu intre sub header sticky */
.page-servicii main [id]{
  scroll-margin-top:90px;
}

/* text mic un pic mai mare + puțin mai gros (fără titluri) */
body.page-servicii p,
body.page-servicii li{
  font-size:1.02rem;
  line-height:1.7;
  font-weight:500;
}

body.page-servicii .section-subtitle{
  font-size:1.02rem;
  font-weight:500;
}

/* ------------------------------------------------------
   HERO
------------------------------------------------------- */

.page-servicii .hero-services{
  position:relative;
  height:clamp(420px,70vh,620px);
  background-image:url("images/service-hero.avif");
  background-size:cover;
  background-position:center;
  color:#f9fafb;
  overflow:hidden;
}

.page-servicii .hero-services::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:linear-gradient(
    120deg,
    rgba(15,23,42,0.95) 0,
    rgba(15,23,42,0.75) 55%,
    rgba(15,23,42,0.20) 100%
  );
}

.page-servicii .hero-services-inner{
  position:relative;
  z-index:1;
  height:100%;
  display:flex;
  align-items:center;
}

@media (max-width:768px){
  .page-servicii .hero-services{
    height:auto;
    padding-top:3.5rem;
    padding-bottom:3rem;
  }
  .page-servicii .hero-services-inner{
    height:auto;
    align-items:flex-start;
  }
}

/* ------------------------------------------------------
   INTRO + jump links
------------------------------------------------------- */

.page-servicii .services-intro{
  background:var(--bg-section-main);
  border-top:1px solid rgba(209,213,219,0.9);
}

.page-servicii .services-intro-inner{
  display:grid;
  gap:1.4rem;
}

.page-servicii .services-intro-head{
  text-align:center;
}

.page-servicii .services-intro-head h2::after{
  content:"";
  display:block;
  width:86px;
  height:3px;
  margin:.55rem auto 0;
  border-radius:999px;
  background:linear-gradient(90deg,#0ea5e9,#0369a1);
  transform-origin:left center;
  transform:scaleX(0);
  transition:transform .9s cubic-bezier(.2,.9,.2,1);
}

.page-servicii .services-jump{
  display:flex;
  flex-wrap:wrap;
  gap:.6rem;
  justify-content:center;
  padding-top:.2rem;
}

.page-servicii .jump{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:.48rem 1rem;
  border-radius:999px;
  border:1px solid rgba(148,163,184,0.75);
  background:rgba(255,255,255,0.78);
  color:#0f172a;
  font-size:.92rem;
  font-weight:500;
  transition:
    transform .14s ease-out,
    border-color .14s ease-out,
    box-shadow .14s ease-out,
    background .14s ease-out;
}

.page-servicii .jump:hover{
  transform:translateY(-1px);
  border-color:rgba(148,163,184,0.9);
  box-shadow:0 12px 28px rgba(15,23,42,0.12);
  background:#ffffff;
}

.page-servicii .jump:focus{ outline:none; }
.page-servicii .jump:focus-visible{
  box-shadow:0 0 0 2px rgba(17,24,39,0.12), 0 12px 28px rgba(15,23,42,0.10);
}

@media (max-width:768px){
  .page-servicii .services-intro-head{ text-align:left; }
  .page-servicii .services-intro-head h2::after{ margin:.55rem 0 0; }
  .page-servicii .services-jump{ justify-content:flex-start; }
}

/* ------------------------------------------------------
   Blocuri de servicii – layout editorial, alternant
------------------------------------------------------- */

.page-servicii .service-block{
  background:var(--bg-section-alt);
  border-top:1px solid rgba(209,213,219,0.9);
  position:relative;
}

.page-servicii .service-block--alt{
  background:var(--bg-section-main);
}

.page-servicii .service-block-inner{
  display:grid;
  grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);
  gap:2.2rem;
  align-items:center;
}

.page-servicii .service-block--alt .service-block-inner{
  grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);
}

.page-servicii .service-kicker{
  margin:0 0 .45rem;
  font-size:.75rem;
  text-transform:uppercase;
  letter-spacing:.18em;
  color:var(--accent-dark);
}

.page-servicii .service-copy h2{
  margin-bottom:.35rem;
}

.page-servicii .service-copy h2::after{
  content:"";
  display:block;
  width:72px;
  height:3px;
  margin:.55rem 0 0;
  border-radius:999px;
  background:linear-gradient(90deg,#0ea5e9,#0369a1);
  transform-origin:left center;
  transform:scaleX(0);
  transition:transform .9s cubic-bezier(.2,.9,.2,1);
}

.page-servicii .service-lead{
  margin:.75rem 0 1rem;
  color:var(--text-muted);
}

/* ------------------------------------------------------
   LISTE – bife custom + linii cu fade
------------------------------------------------------- */

.page-servicii .service-list{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:0;
  color:var(--text-muted);
}

.page-servicii .service-list li{
  position:relative;
  padding:.48rem 0 .48rem 1.65rem;
  margin:0;
}

.page-servicii .service-list li::before{
  content:"";
  position:absolute;
  left:0;
  top:.95rem;
  width:14px;
  height:8px;
  border-left:2px solid #0ea5e9;
  border-bottom:2px solid #0ea5e9;
  transform:rotate(-45deg) scale(.85);
  opacity:0;
  transition:opacity .6s ease,transform .65s cubic-bezier(.2,.9,.2,1);
}

.page-servicii .service-list li + li{
  border-top:1px solid transparent;
  border-image:linear-gradient(
    to right,
    rgba(14,165,233,0.12),
    rgba(14,165,233,0.55),
    rgba(14,165,233,0.12)
  ) 1;
}

.page-servicii .service-actions{
  display:flex;
  flex-wrap:wrap;
  gap:.7rem;
  margin-top:1.1rem;
}

/* ======================================================
   SERVICE MEDIA – MIȘCARE LA CLICK (FĂRĂ ALBASTRU)
   IMPORTANT: poza e pe .media-bg, nu pe container.
====================================================== */

.page-servicii .service-media{
  position:relative;
  border-radius:18px;
  overflow:hidden;
  min-height:320px;
  border:1px solid rgba(148,163,184,0.55);
  box-shadow:0 18px 45px rgba(15,23,42,0.14);
  background:#ffffff;
  cursor:pointer;
  user-select:none;
  -webkit-tap-highlight-color:transparent;
}

.page-servicii .service-media:focus{ outline:none; }
.page-servicii .service-media:focus-visible{
  box-shadow:0 0 0 2px rgba(17,24,39,0.12), 0 18px 45px rgba(15,23,42,0.14);
}

/* layer imagine */
.page-servicii .service-media .media-bg{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
  transform:translateY(0) scale(1);
  transition:transform .22s cubic-bezier(.2,.9,.2,1);
  will-change:transform;
}

/* glow neutru */
.page-servicii .service-media .media-glow{
  position:absolute;
  inset:-40px;
  background:
    radial-gradient(circle at 35% 20%, rgba(17,24,39,0.12), transparent 55%),
    radial-gradient(circle at 75% 80%, rgba(17,24,39,0.08), transparent 55%);
  opacity:0;
  transition:opacity .22s ease;
  pointer-events:none;
}

/* hover */
@media (min-width:1025px){
  .page-servicii .service-media{
    transition:box-shadow .22s ease, border-color .22s ease;
  }
  .page-servicii .service-media:hover{
    border-color:rgba(148,163,184,0.55);
    box-shadow:0 24px 55px rgba(15,23,42,0.22);
  }
  .page-servicii .service-media:hover .media-bg{
    transform:translateY(-6px) scale(1.02);
  }
  .page-servicii .service-media:hover .media-glow{
    opacity:.55;
  }
}

/* CLICK */
.page-servicii .service-media.is-clicked .media-bg{
  transform:translateY(2px) scale(0.985);
}
.page-servicii .service-media.is-clicked .media-glow{
  opacity:.65;
}

.page-servicii .service-media.is-releasing .media-bg{
  transform:translateY(-3px) scale(1.02);
}

/* IMAGINI */
.page-servicii #serv-porti .service-media .media-bg{ background-image:url("images/service-porti.avif"); }
.page-servicii #serv-balustrade .service-media .media-bg{ background-image:url("images/service-balustrada.avif"); }
.page-servicii #serv-structuri .service-media .media-bg{ background-image:url("images/service-structuri.avif"); }
.page-servicii #serv-tehnic .service-media .media-bg{ background-image:url("images/service-elemente.avif"); }

@media (prefers-reduced-motion: reduce){
  .page-servicii .service-media .media-bg,
  .page-servicii .service-media .media-glow{
    transition:none !important;
  }
}

/* ------------------------------------------------------
   CE NU FACEM
------------------------------------------------------- */

.page-servicii .services-boundaries{
  background:var(--bg-section-soft);
  border-top:1px solid rgba(209,213,219,0.9);
  position:relative;
  overflow:hidden;
}

.page-servicii .services-boundaries::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 75% 0, rgba(59,130,246,0.18), transparent 60%),
    radial-gradient(circle at 0 85%, rgba(56,189,248,0.12), transparent 55%),
    linear-gradient(120deg, rgba(148,163,184,0.16) 0, rgba(148,163,184,0.06) 25%, transparent 55%);
  opacity:.9;
  pointer-events:none;
}

.page-servicii .services-boundaries-inner{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,1.2fr);
  gap:2rem;
  align-items:start;
}

.page-servicii .boundaries-text h2::after{
  content:"";
  display:block;
  width:80px;
  height:3px;
  margin:.55rem 0 0;
  border-radius:999px;
  background:linear-gradient(90deg,#0ea5e9,#0369a1);
  transform-origin:left center;
  transform:scaleX(0);
  transition:transform .9s cubic-bezier(.2,.9,.2,1);
}

.page-servicii .boundaries-list{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:0;
  color:var(--text-muted);
}

.page-servicii .boundaries-list li{
  position:relative;
  padding:.55rem 0 .55rem 1.65rem;
  margin:0;
}

.page-servicii .boundaries-list li::before{
  content:"";
  position:absolute;
  left:0;
  top:1.02rem;
  width:14px;
  height:8px;
  border-left:2px solid #0ea5e9;
  border-bottom:2px solid #0ea5e9;
  transform:rotate(-45deg) scale(.85);
  opacity:0;
  transition:opacity .6s ease,transform .65s cubic-bezier(.2,.9,.2,1);
}

.page-servicii .boundaries-list li + li{
  border-top:1px solid transparent;
  border-image:linear-gradient(
    to right,
    rgba(14,165,233,0.12),
    rgba(14,165,233,0.55),
    rgba(14,165,233,0.12)
  ) 1;
}

/* ------------------------------------------------------
   MINI PROCES
------------------------------------------------------- */

.page-servicii .services-mini-process{
  background:var(--bg-section-main);
  border-top:1px solid rgba(209,213,219,0.9);
}

.page-servicii .mini-process-head{
  text-align:center;
  margin:0 0 2rem;
}

.page-servicii .mini-process-head .section-subtitle{
  max-width:760px;
  margin-left:auto;
  margin-right:auto;
}

.page-servicii .mini-steps{
  position:relative;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1.2rem;
}

.page-servicii .mini-steps::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:34px;
  height:2px;
  border-radius:999px;
  background:linear-gradient(to right,#e5e7eb,#0ea5e9,#e5e7eb);
  z-index:0;
}

.page-servicii .mini-step{
  position:relative;
  padding-top:1.7rem;
}

.page-servicii .mini-index{
  position:absolute;
  top:0;
  left:50%;
  transform:translateX(-50%);
  width:32px;
  height:32px;
  border-radius:999px;
  background:#ffffff;
  border:2px solid #0ea5e9;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:.9rem;
  font-weight:600;
  color:#0369a1;
  z-index:1;
}

/* alb foarte lite + gradient fin */
.page-servicii .mini-body{
  background:linear-gradient(135deg,#ffffff 0%, #fdfefe 55%, #f9fbfd 100%);
  border-radius:14px;
  padding:.85rem .95rem 1rem;
  border:1px solid rgba(148,163,184,0.55);
  box-shadow:0 12px 30px rgba(148,163,184,0.22);
  min-height:160px;
}

.page-servicii .mini-body h3{
  font-size:1.02rem;
  margin:0 0 .25rem;
}

.page-servicii .mini-body p{
  color:var(--text-muted);
  margin:0;
}

.page-servicii .mini-process-cta{
  display:flex;
  flex-wrap:wrap;
  gap:.7rem;
  justify-content:center;
  margin-top:1.6rem;
}

/* ------------------------------------------------------
   CTA FINAL
------------------------------------------------------- */

.page-servicii .services-cta{
  position:relative;
  overflow:hidden;
  color:#f9fafb;
  border-top:1px solid rgba(15,23,42,0.35);

  background-image:
    linear-gradient(120deg, rgba(15,23,42,0.92) 0, rgba(15,23,42,0.70) 55%, rgba(15,23,42,0.30) 100%),
    var(--cta-bg);
  background-size:cover;
  background-position:center;
}

.page-servicii .services-cta-inner{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:minmax(0,1.4fr) minmax(0,0.8fr);
  gap:2rem;
  align-items:center;
}

.page-servicii .services-cta .section-kicker{ color:#bae6fd; }
.page-servicii .services-cta h2{ color:#e5f2fc; }
.page-servicii .services-cta p{ color:#e5e7eb; margin:0; }

.page-servicii .services-cta-actions{
  display:flex;
  flex-direction:column;
  gap:.7rem;
  align-items:flex-start;
}

/* ------------------------------------------------------
   Scroll Reveal extra-lite (fără !important)
------------------------------------------------------- */

.page-servicii .reveal-up,
.page-servicii .reveal-left,
.page-servicii .reveal-right,
.page-servicii .reveal-zoom,
.page-servicii .reveal-stagger > *{
  opacity:0;
  transform:translate3d(0,10px,0);
  filter:blur(6px);
  transition:
    opacity .65s cubic-bezier(.2,.9,.2,1),
    transform .75s cubic-bezier(.2,.9,.2,1),
    filter .65s cubic-bezier(.2,.9,.2,1);
  will-change:transform,opacity,filter;
}

.page-servicii .reveal-left{ transform:translate3d(-14px,8px,0); }
.page-servicii .reveal-right{ transform:translate3d(14px,8px,0); }
.page-servicii .reveal-up{ transform:translate3d(0,12px,0); }

.page-servicii .reveal-zoom{
  transform:translate3d(0,10px,0) scale(.985);
  filter:blur(7px) saturate(.99);
}

.page-servicii .reveal-up.is-inview,
.page-servicii .reveal-left.is-inview,
.page-servicii .reveal-right.is-inview,
.page-servicii .reveal-zoom.is-inview,
.page-servicii .reveal-stagger > *.is-inview{
  opacity:1;
  transform:translate3d(0,0,0) scale(1);
  filter:blur(0) saturate(1);
}

/* “draw” linii sub titluri */
.page-servicii .services-intro-head.is-inview h2::after{ transform:scaleX(1); }
.page-servicii .service-copy.is-inview h2::after{ transform:scaleX(1); }
.page-servicii .boundaries-text.is-inview h2::after{ transform:scaleX(1); }

/* bife: servicii (când intră copy-ul) */
.page-servicii .service-copy.is-inview .service-list li::before{
  opacity:.95;
  transform:rotate(-45deg) scale(1);
}

/* bife: boundaries (pe fiecare li care intră din stagger) */
.page-servicii .boundaries-list li.is-inview::before{
  opacity:.95;
  transform:rotate(-45deg) scale(1);
}

/* Motion redus */
@media (prefers-reduced-motion: reduce){
  .page-servicii .reveal-up,
  .page-servicii .reveal-left,
  .page-servicii .reveal-right,
  .page-servicii .reveal-zoom,
  .page-servicii .reveal-stagger > *{
    transition:none !important;
    transform:none !important;
    filter:none !important;
    opacity:1 !important;
  }

  .page-servicii .services-intro-head h2::after,
  .page-servicii .service-copy h2::after,
  .page-servicii .boundaries-text h2::after{
    transition:none !important;
    transform:none !important;
  }

  .page-servicii .service-list li::before,
  .page-servicii .boundaries-list li::before{
    opacity:1 !important;
    transform:rotate(-45deg) scale(1) !important;
  }
}

/* ------------------------------------------------------
   RESPONSIVE
------------------------------------------------------- */

@media (max-width:1024px){
  .page-servicii .service-block-inner{
    grid-template-columns:minmax(0,1fr);
  }
  .page-servicii .service-block--alt .service-block-inner{
    grid-template-columns:minmax(0,1fr);
  }
  .page-servicii .service-media{
    min-height:300px;
    order:-1;
  }

  .page-servicii .services-boundaries-inner{
    grid-template-columns:minmax(0,1fr);
  }

  .page-servicii .mini-steps{
    grid-template-columns:minmax(0,1fr);
  }
  .page-servicii .mini-steps::before{
    display:none;
  }
  .page-servicii .mini-step{
    padding-top:0;
  }
  .page-servicii .mini-index{
    position:static;
    transform:none;
    margin:0 auto .35rem;
  }

  .page-servicii .services-cta-inner{
    grid-template-columns:minmax(0,1fr);
  }
  .page-servicii .services-cta-actions{
    align-items:flex-start;
  }
}

@media (max-width:768px){
  .page-servicii .services-cta-actions{
    width:100%;
  }
  .page-servicii .services-cta-actions .btn{
    width:100%;
    justify-content:center;
  }
}