/* Home — Patient journey ("Kako izgleda Vaš dolazak").
   Mirrors the .process--usluge styling from the /usluge/ landing —
   cream band, 4 paper-card steps in a 4-col grid, giant Fraunces 01-04
   in mint top-right, mint icon tile top-left that flips teal on hover.
   No dashed connector line. Suppresses the global .process-step::before
   counter so we don't double-render the numbers. */

.process--home{
  background:var(--cream);
  padding:72px 0 80px;
  position:relative;
  overflow:hidden;
}

.process--home::before{
  content:"";position:absolute;
  top:-160px;left:-160px;
  width:480px;height:480px;border-radius:50%;
  background:radial-gradient(circle, rgba(94,155,148,.14), transparent 70%);
  pointer-events:none;
}

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

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

.process--home .process-step{
  position:relative;z-index:1;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:32px 26px 28px;
  transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.process--home .process-step:hover{
  transform:translateY(-5px);
  box-shadow:var(--sh-md);
  border-color:var(--mint);
}
/* Suppress the global .process-step::before counter (which would
   double-render a "01" via CSS counter) — we ship our own .process-num
   span for the big decorative Fraunces number. */
.process--home .process-step::before{
  content:none;
}

.process--home .process-num{
  position:absolute;
  top:14px;right:22px;
  font-family:"Fraunces",serif;font-weight:300;
  font-size:3.2rem;line-height:1;
  color:var(--mint);
  letter-spacing:-.02em;
  pointer-events:none;
}

.process--home .process-ic{
  display:inline-flex;align-items:center;justify-content:center;
  width:52px;height:52px;border-radius:13px;
  background:var(--mint-50);
  color:var(--teal);
  border:1px solid var(--mint);
  margin-bottom:20px;
  transition:background .3s ease, color .3s ease, transform .3s ease;
}
.process--home .process-ic svg{width:22px;height:22px}
.process--home .process-step:hover .process-ic{
  background:var(--teal);
  color:#fff;
  border-color:var(--teal);
  transform:scale(1.05);
}

.process--home .process-step h4{
  font-family:"Fraunces",serif;font-weight:500;
  font-size:1.22rem;color:var(--pine);
  margin:0 0 8px;letter-spacing:-.01em;
  line-height:1.2;
}
.process--home .process-step p{
  color:var(--muted);
  font-size:.94rem;line-height:1.6;
  margin:0;
}

/* --- Closing price-transparency strip → /cjenik/ ----------------------
   One clickable row under the steps: tag icon · headline + subline ·
   arrow CTA. Paper card on the cream band, lifts like the step cards. */
.process-pricelink{
  display:flex;align-items:center;gap:18px;
  max-width:960px;
  margin:36px auto 0;
  padding:20px 26px;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:18px;
  text-decoration:none;
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.process-pricelink:hover{
  transform:translateY(-3px);
  border-color:var(--mint);
  box-shadow:var(--sh-md);
}
.process-pricelink-ic{
  display:inline-flex;align-items:center;justify-content:center;
  width:48px;height:48px;border-radius:13px;
  background:var(--mint-50);
  color:var(--teal);
  border:1px solid var(--mint);
  flex:none;
  transition:background .3s ease, color .3s ease, border-color .3s ease;
}
.process-pricelink-ic svg{width:22px;height:22px}
.process-pricelink:hover .process-pricelink-ic{
  background:var(--teal);
  color:#fff;
  border-color:var(--teal);
}
.process-pricelink-text{flex:1 1 auto;min-width:0}
.process-pricelink-text b{
  display:block;
  font-family:"Fraunces",serif;font-weight:500;
  font-size:1.12rem;color:var(--pine);
  letter-spacing:-.01em;
  margin-bottom:3px;
}
.process-pricelink-text span{
  display:block;
  color:var(--muted);
  font-size:.92rem;line-height:1.5;
}
.process-pricelink-cta{
  flex:none;
  display:inline-flex;align-items:center;gap:8px;
  font-weight:600;font-size:.94rem;
  color:var(--teal);
  white-space:nowrap;
}
.process-pricelink-cta svg{transition:transform .25s ease}
.process-pricelink:hover .process-pricelink-cta svg{transform:translateX(4px)}

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

  /* Strip wraps: icon + text row, CTA drops below aligned with the text. */
  .process-pricelink{flex-wrap:wrap;gap:14px;padding:18px 20px;margin-top:28px}
  .process-pricelink-text{flex:1 1 calc(100% - 62px)}
  .process-pricelink-cta{margin-left:62px}
}