/* Usluga detail — Conditions ("Što liječimo") — D2 layout, fluid v2.
   Cream band with centered section head + two-column outer grid:
     · Left column (1.1fr): tall dark "featured" card carries the
       flagship condition with icon + h3 + paragraph + 3 supporting
       bullets + decorative oversized mark in the corner.
     · Right column (2fr): .svc-cond-cards wrapper holds 3 – 6 paper
       cards in an auto-fit minmax grid so the row count adapts to the
       service catalogue without leaving empty cells.
     · Bottom strip: full-width mint card with phone CTA — covers the
       urgent/last-resort condition that warrants a call.
   The wrapper makes the layout scale gracefully whether a service
   has 3 condition cards (Centar za rane) or 6 (Opća kirurgija). */

.svc-detail-conditions{
  background:var(--cream);
  padding:62px 0 70px;
  position:relative;
  overflow:hidden;
}

/* Decorative mint orb in the top-right corner. */
.svc-detail-conditions::before{
  content:"";
  position:absolute;
  top:-150px;right:-170px;
  width:440px;height:440px;
  border-radius:50%;
  background:radial-gradient(circle, var(--mint-50), transparent 70%);
  opacity:.6;
  pointer-events:none;
}

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

/* --- Centered section head --- */
.svc-cond-head{
  max-width:680px;
  margin:0 auto 38px;
  text-align:center;
  position:relative;z-index:1;
}
.svc-cond-head .eyebrow{justify-content:center}
.svc-cond-head h2{
  font-family:"Fraunces",serif;
  font-size:clamp(1.9rem,3.4vw,2.6rem);
  font-weight:300;
  color:var(--pine);
  letter-spacing:-.015em;
  margin:16px 0 12px;
  line-height:1.1;
}
.svc-cond-head h2 em{color:var(--teal);font-weight:400;font-style:normal}
.svc-cond-head p{
  color:var(--muted);
  font-size:1.02rem;
  margin:0 auto;
  max-width:58ch;
  line-height:1.6;
}

/* --- Outer grid: featured | cards-wrap --- */
.svc-cond-grid{
  position:relative;z-index:1;
  display:grid;
  grid-template-columns:minmax(280px, 1.1fr) 2.2fr;
  gap:18px;
  align-items:stretch;
}

/* --- Cards wrapper (inner 2-col grid) ---
   Fixed 2-column layout pairs visually with the tall featured card on
   the left. grid-auto-rows: 1fr distributes available vertical space
   evenly across all rows so the wrapper stretches to match the
   featured card's height (since outer grid uses align-items: stretch).
   The :last-child:nth-child(odd) trick promotes a lonely trailing
   card to full width — so 3-card / 5-card layouts (which would
   otherwise leave an empty cell) read as intentional with a wider
   "summary" tile at the bottom of the column. */
.svc-cond-cards{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  grid-auto-rows:1fr;
  gap:18px;
}
.svc-cond-cards > :last-child:nth-child(odd){
  grid-column:1 / -1;
}

/* --- Featured dark card (left column, stretches full height) --- */
.svc-cond-feat{
  position:relative;
  overflow:hidden;
  background:linear-gradient(168deg, var(--pine), var(--pine-deep));
  border-radius:20px;
  padding:36px 32px;
  box-shadow:0 24px 50px -28px rgba(10,42,39,.42);
  display:flex;
  flex-direction:column;
  justify-content:center;
  color:#fff;
  align-self:stretch;
}
.svc-cond-feat::before{
  content:"";
  position:absolute;
  top:-130px;right:-110px;
  width:300px;height:300px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(94,155,148,.35), transparent 70%);
  pointer-events:none;
}

.svc-cond-feat-ic{
  width:54px;height:54px;
  border-radius:50%;
  flex:none;
  background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.16);
  color:var(--sage-300);
  display:flex;align-items:center;justify-content:center;
  position:relative;z-index:1;
}
.svc-cond-feat-ic svg{width:24px;height:24px}

.svc-cond-feat h3{
  font-family:"Fraunces",serif;
  color:#fff;
  font-size:clamp(1.45rem,2.3vw,1.85rem);
  font-weight:300;
  margin:18px 0 10px;
  line-height:1.15;
  letter-spacing:-.015em;
  position:relative;z-index:1;
}
.svc-cond-feat > p{
  color:#bcd7d1;
  font-size:.99rem;
  line-height:1.65;
  position:relative;z-index:1;
}

.svc-cond-feat-points{
  list-style:none;
  display:grid;
  gap:10px;
  margin:22px 0 0;
  padding:20px 0 0;
  border-top:1px solid rgba(255,255,255,.13);
  position:relative;z-index:1;
}
.svc-cond-feat-points li{
  display:flex;align-items:center;gap:11px;
  font-family:"Hanken Grotesk",sans-serif;
  font-size:.9rem;font-weight:600;
  color:#dcebe7;
}
.svc-cond-feat-points svg{
  width:18px;height:18px;
  color:var(--sage-300);
  flex:none;
}

/* Oversized faint mark in the corner. */
.svc-cond-feat-mark{
  position:absolute;
  bottom:-38px;right:-26px;
  width:180px;height:180px;
  color:#fff;
  opacity:.06;
  pointer-events:none;
}

/* --- Regular paper card ---
   display:flex column lets the card use the full row height (set by
   .svc-cond-cards' grid-auto-rows:1fr) — header stays anchored at top,
   body text below, with any extra vertical space falling at the
   bottom so a card with short copy doesn't look squashed. */
.svc-cond-card{
  display:flex;
  flex-direction:column;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:18px;
  padding:24px 22px 22px;
  box-shadow:0 4px 16px -9px rgba(10,42,39,.34);
  transition:transform .3s cubic-bezier(.2,.7,.2,1),
             box-shadow .3s ease,
             border-color .25s ease;
}
.svc-cond-card:hover{
  transform:translateY(-4px);
  box-shadow:0 24px 50px -28px rgba(10,42,39,.42);
  border-color:var(--mint);
}

.svc-cond-ic{
  width:44px;height:44px;
  border-radius:12px;
  background:var(--mint-50);
  color:var(--teal);
  display:flex;align-items:center;justify-content:center;
  transition:background .3s ease, color .3s ease;
}
.svc-cond-ic svg{width:20px;height:20px}
.svc-cond-card:hover .svc-cond-ic{
  background:var(--teal);
  color:#fff;
}

.svc-cond-card h3{
  font-family:"Fraunces",serif;
  font-size:1.14rem;
  font-weight:500;
  color:var(--pine);
  margin:13px 0 6px;
  letter-spacing:-.01em;
  line-height:1.25;
}
.svc-cond-card p{
  font-size:.88rem;
  color:var(--muted);
  line-height:1.56;
  margin:0;
}

/* --- Bottom strip card (full width — spans both outer grid columns) --- */
.svc-cond-strip{
  grid-column:1 / -1;
  display:flex;
  align-items:center;
  gap:18px;
  background:var(--mint-50);
  border:1px solid var(--mint);
  border-radius:18px;
  padding:18px 24px;
  margin-top:4px;
}
.svc-cond-strip .svc-cond-ic{
  background:var(--pine);
  color:#fff;
  flex:none;
}
.svc-cond-strip h3{
  font-family:"Fraunces",serif;
  font-size:1.08rem;
  font-weight:500;
  color:var(--pine);
  margin:0 0 2px;
  letter-spacing:-.005em;
  line-height:1.25;
}
.svc-cond-strip p{
  font-size:.88rem;
  color:var(--ink-soft);
  line-height:1.5;
  margin:0;
}

.svc-cond-strip-call{
  margin-left:auto;
  flex:none;
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:100px;
  padding:10px 18px;
  font-family:"Hanken Grotesk",sans-serif;
  font-size:.84rem;
  font-weight:700;
  color:var(--teal);
  box-shadow:0 4px 16px -9px rgba(10,42,39,.34);
  transition:background .25s ease, color .25s ease, border-color .25s ease;
  white-space:nowrap;
  text-decoration:none;
}
.svc-cond-strip-call:hover{
  background:var(--teal);
  color:#fff;
  border-color:var(--teal);
}
.svc-cond-strip-call svg{width:16px;height:16px}

/* --- Responsive --- */
@media(max-width:980px){
  .svc-cond-grid{
    grid-template-columns:1fr;
    gap:18px;
  }
  .svc-cond-feat{align-self:auto}
  /* Cards stay in auto-fit grid; collapse to 2 then 1 column naturally. */
}
@media(max-width:640px){
  .svc-detail-conditions{padding:52px 0 60px}
  .svc-cond-cards{grid-template-columns:1fr}
  .svc-cond-strip{flex-direction:column;align-items:flex-start;gap:12px}
  .svc-cond-strip-call{margin-left:0}
}