/* Usluge landing — section polish (everything below the hero carousel).
   - .pillars--usluge: 4 service cards (mirror of .pillars--home polish)
   - .process--usluge: 4-step patient-journey strip with Fraunces numbers
                       and mint→teal icon tiles (mirror of home /process/)
   - Wave dividers are handled inline in the template (cream↔paper). */

/* ==========================================================================
   SERVICE PILLARS — 4 cards linking to detail pages
   ========================================================================== */

.pillars--usluge{
  padding:72px 0 70px;
  background:var(--cream);
  position:relative;
  overflow:hidden;
}

/* Decorative orb top-right. */
.pillars--usluge::before{
  content:"";position:absolute;
  top:-160px;right:-160px;
  width:540px;height:540px;border-radius:50%;
  background:radial-gradient(circle, rgba(94,155,148,.16), transparent 70%);
  pointer-events:none;
}

.pillars--usluge .wrap{position:relative;z-index:1}

.pillars--usluge .pillar-card{
  position:relative;
  background:var(--paper);
  transition:transform .35s cubic-bezier(.2,.7,.2,1),
             box-shadow .35s ease,
             border-color .25s ease;
}
/* Top teal accent bar — scales in on hover. */
.pillars--usluge .pillar-card::before{
  content:"";position:absolute;
  top:0;left:0;right:0;height:4px;
  background:var(--teal);
  transform:scaleX(0);transform-origin:left;
  transition:transform .35s ease;
  z-index:2;
}
.pillars--usluge .pillar-card:hover{
  transform:translateY(-8px);
  box-shadow:0 24px 50px -22px rgba(10,42,39,.28);
  border-color:var(--mint);
}
.pillars--usluge .pillar-card:hover::before{transform:scaleX(1)}

.pillars--usluge .pillar-img{
  position:relative;
  aspect-ratio:4/2.9;
}

.pillars--usluge .pillar-body{
  padding:26px 28px 30px;
}

@media(max-width:980px){
  .pillars--usluge{padding:76px 0 86px}
  .pillars--usluge .pillar-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:680px){
  .pillars--usluge{padding:60px 0 70px}
  .pillars--usluge .pillar-grid{grid-template-columns:1fr;gap:16px}
}

/* ==========================================================================
   PROCESS — 4-step "Kako izgleda Vaš dolazak"
   Mirrors the home /process/ pattern: cream band, paper card per step,
   giant Fraunces number top-right, mint icon tile top-left, dashed
   connector line bridging steps at desktop. Connector hidden on mobile.
   ========================================================================== */

.process--usluge{
  position:relative;
  overflow:hidden;
  background:linear-gradient(168deg, var(--pine) 0%, var(--pine-deep) 78%);
  padding:80px 0 90px;
  color:#fff;
}

/* Sage glow top-left + teal glow bottom-right — same atmospheric
   treatment as the hero, specialty and misija sections so this band
   reads as part of the same premium dark-pine vocabulary. */
.process--usluge::before{
  content:"";position:absolute;
  top:-180px;left:-150px;
  width:500px;height:500px;border-radius:50%;
  background:radial-gradient(circle, rgba(94,155,148,.24), transparent 68%);
  pointer-events:none;
}
.process--usluge::after{
  content:"";position:absolute;
  bottom:-220px;right:-160px;
  width:480px;height:480px;border-radius:50%;
  background:radial-gradient(circle, rgba(42,111,101,.28), transparent 70%);
  pointer-events:none;
}

.process--usluge .wrap{position:relative;z-index:1}

/* Section head colors over the dark band. */
.process--usluge .sec-head .eyebrow{color:var(--sage-300)}
.process--usluge .sec-head .eyebrow::before{background:var(--sage-300)}
.process--usluge .sec-head h2{color:#fff}
.process--usluge .sec-head h2 em{color:var(--sage-300);font-weight:400;font-style:italic}
.process--usluge .sec-head p{color:#bcd7d1}

.process--usluge .process-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:20px;
  position:relative;
}

/* Frosted glass cards — matches the S3 specialty tiles vocabulary. */
.process--usluge .process-step{
  position:relative;z-index:1;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.12);
  border-radius:var(--r);
  padding:32px 26px 28px;
  transition:background .3s ease, border-color .3s ease, transform .3s ease;
}
/* Suppress the global .process-step::before counter — we ship our own
   .process-num span for the big decorative Fraunces number. */
.process--usluge .process-step::before{
  content:none;
}
.process--usluge .process-step:hover{
  transform:translateY(-5px);
  background:rgba(255,255,255,.09);
  border-color:rgba(156,196,189,.4);
}

/* Giant Fraunces number — top-right, sage-300 ghost. */
.process--usluge .process-num{
  position:absolute;
  top:14px;right:22px;
  font-family:"Fraunces",serif;font-weight:300;
  font-size:3.2rem;line-height:1;
  color:rgba(156,196,189,.28);
  letter-spacing:-.02em;
  pointer-events:none;
  transition:color .3s ease;
}
.process--usluge .process-step:hover .process-num{
  color:rgba(156,196,189,.55);
}

/* Frosted dark icon tile — top-left with sage-300 glyph. */
.process--usluge .process-ic{
  display:inline-flex;align-items:center;justify-content:center;
  width:52px;height:52px;border-radius:13px;
  background:rgba(255,255,255,.08);
  color:var(--sage-300);
  border:1px solid rgba(255,255,255,.13);
  margin-bottom:20px;
  transition:background .3s ease, color .3s ease, transform .3s ease;
}
.process--usluge .process-ic svg{width:22px;height:22px}
.process--usluge .process-step:hover .process-ic{
  background:rgba(255,255,255,.16);
  color:#fff;
  border-color:rgba(156,196,189,.4);
  transform:scale(1.05);
}

.process--usluge .process-step h4{
  font-family:"Fraunces",serif;font-weight:500;
  font-size:1.22rem;color:#fff;
  margin:0 0 8px;letter-spacing:-.01em;
  line-height:1.2;
}
.process--usluge .process-step p{
  color:#bcd7d1;
  font-size:.94rem;line-height:1.6;
  margin:0;
}

@media(max-width:980px){
  .process--usluge{padding:54px 0 60px}
  .process--usluge .process-grid{grid-template-columns:repeat(2,1fr);gap:16px}
  .process--usluge .process-num{font-size:2.8rem;top:12px;right:20px}
  .process--usluge .process-step{padding:28px 22px 24px}
  .process--usluge .process-ic{margin-bottom:16px}
}
@media(max-width:560px){
  .process--usluge{padding:48px 0 56px}
  .process--usluge .process-grid{grid-template-columns:1fr;gap:14px}
  .process--usluge .process-num{font-size:2.4rem}
}

/* ==========================================================================
   Section padding overrides for the landing-only sections that share CSS
   with the detail pages (FAQ + CTA). These tighten the default detail-page
   paddings so the /usluge/ page doesn't have huge gaps between sections.
   ========================================================================== */

body .svc-detail-faq{padding:60px 0 72px}
body .cta-sec{padding:60px 0 80px}

@media(max-width:768px){
  body .svc-detail-faq{padding:52px 0 62px}
  body .cta-sec{padding:52px 0 64px}
}
@media(max-width:560px){
  body .svc-detail-faq{padding:46px 0 54px}
  body .cta-sec{padding:46px 0 56px}
}