/* Usluga detail — Procedures ("Što radimo" / "Što nudimo") — Q1 dark
   band, v5. Image removed entirely — earlier side-by-side and banner
   variants felt unbalanced against the long bullet lists. The
   methodology section right below already carries the section's visual
   imagery (hero + inset + badge), so this section is now purely
   editorial: centered head + premium 2-col bullet grid on a dark pine
   gradient with sage radial glows providing the visual atmosphere. */

.svc-detail-procedures{
  position:relative;
  overflow:hidden;
  background:var(--pine-deep);
  padding:78px 0 88px;
}

/* Two decorative radial glows in opposite corners give the section
   visual depth without needing a hero image. */
.svc-detail-procedures::before{
  content:"";
  position:absolute;
  top:-220px;left:-160px;
  width:560px;height:560px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(15,58,54,.9), transparent 70%);
  pointer-events:none;
}
.svc-detail-procedures::after{
  content:"";
  position:absolute;
  bottom:-200px;right:-170px;
  width:520px;height:520px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(94,155,148,.25), transparent 70%);
  pointer-events:none;
}

.svc-detail-procedures .wrap{position:relative;z-index:1}

/* --- Centered section head --- */
.svc-detail-procedures-head{
  text-align:center;
  max-width:760px;
  margin:0 auto 48px;
}
.svc-detail-procedures-head .eyebrow{justify-content:center}
.svc-detail-procedures-head h2{
  color:#fff;
  font-family:"Fraunces",serif;
  font-size:clamp(2rem, 3.4vw, 2.65rem);
  font-weight:300;
  margin:18px 0 16px;
  line-height:1.14;
  letter-spacing:-.015em;
}
.svc-detail-procedures-head h2 em{
  color:var(--sage-300);
  font-weight:400;
  font-style:normal;
}
.svc-detail-procedures-head p{
  color:#bcd7d1;
  font-size:1.04rem;
  line-height:1.65;
  margin:0 auto;
  max-width:64ch;
}

/* --- Premium 2-col bullet grid (no image) ---
   Capped at 1080px and centered so individual bullets stay readable
   on wide viewports. Last child spans full width when total count is
   odd so 5- and 7-item lists don't leave a lonely card. */
.svc-detail-procedures-list{
  list-style:none;
  margin:0 auto;
  padding:0;
  max-width:1080px;
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:14px;
}
.svc-detail-procedures-list > :last-child:nth-child(odd){
  grid-column:1 / -1;
}

.svc-detail-procedures-item{
  display:grid;
  grid-template-columns:42px 1fr;
  gap:16px;
  align-items:center;
  padding:18px 22px 18px 18px;
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.025));
  border:1px solid rgba(156,196,189,.14);
  border-radius:14px;
  color:#cfdeda;
  font-family:"Hanken Grotesk",sans-serif;
  font-size:.95rem;
  line-height:1.5;
  position:relative;
  overflow:hidden;
  transition:background .25s ease, border-color .25s ease, transform .22s cubic-bezier(.2,.7,.2,1);
}

/* Sage accent stripe on the left edge — appears on hover. */
.svc-detail-procedures-item::before{
  content:"";
  position:absolute;
  left:0;top:0;bottom:0;
  width:3px;
  background:var(--sage-300);
  transform:scaleY(0);
  transform-origin:center;
  transition:transform .3s cubic-bezier(.2,.7,.2,1);
}

.svc-detail-procedures-item:hover{
  background:linear-gradient(180deg, rgba(94,155,148,.18), rgba(94,155,148,.06));
  border-color:rgba(156,196,189,.34);
  transform:translateX(2px);
}
.svc-detail-procedures-item:hover::before{
  transform:scaleY(1);
}

/* Circular check badge — matches the methodology .band-pic vibe. */
.svc-detail-procedures-item svg{
  width:42px;height:42px;
  padding:12px;
  box-sizing:border-box;
  background:rgba(94,155,148,.16);
  border:1px solid rgba(156,196,189,.22);
  border-radius:50%;
  color:var(--sage-300);
  flex:none;
  margin:0;
  transition:background .25s ease, border-color .25s ease;
}
.svc-detail-procedures-item:hover svg{
  background:rgba(156,196,189,.3);
  border-color:rgba(156,196,189,.42);
}

/* Bolded service name in each bullet — reads as the row's heading. */
.svc-detail-procedures-item b{
  color:#fff;
  font-weight:600;
  letter-spacing:-.005em;
}

/* --- Responsive --- */
@media(max-width:980px){
  .svc-detail-procedures{padding:62px 0 72px}
  .svc-detail-procedures-head{margin-bottom:36px}
  .svc-detail-procedures-list{
    grid-template-columns:1fr;
    gap:10px;
  }
}
@media(max-width:560px){
  .svc-detail-procedures{padding:52px 0 62px}
  .svc-detail-procedures-head h2{font-size:1.7rem}
  .svc-detail-procedures-head p{font-size:.96rem}
  .svc-detail-procedures-item{
    grid-template-columns:38px 1fr;
    gap:12px;
    padding:14px 16px 14px 14px;
    font-size:.9rem;
  }
  .svc-detail-procedures-item svg{
    width:38px;height:38px;
    padding:11px;
  }
}