/* Zašto Rio — Vrijednosti ("Četiri razloga povjerenja").
   Variant B: featured large card (image fill + bottom text overlay)
   on the left, vertical stack of 3 horizontal mini cards on the right
   (image left, content right). */

.vrijednosti{
  background:var(--cream);
  position:relative;overflow:hidden;
  padding:96px 0 110px;
}
.vrijednosti::before{
  content:"";position:absolute;bottom:-200px;left:-220px;
  width:460px;height:460px;border-radius:50%;
  background:radial-gradient(circle,#dceee9,transparent 70%);
  opacity:.5;pointer-events:none;
}
.vrijednosti .wrap{position:relative;z-index:1}

/* --- Main grid: feature + stack --- */
.vb-grid{
  display:grid;
  grid-template-columns:1.02fr 1fr;
  gap:16px;
  align-items:stretch;
}

/* --- Featured card (left) --- */
.vb-feature{
  position:relative;
  border-radius:var(--r);overflow:hidden;
  box-shadow:var(--sh-lg);
  min-height:540px;
  display:flex;align-items:flex-end;
}
.vb-feature img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
}
.vb-feature::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(185deg,rgba(10,42,39,0) 34%,rgba(10,42,39,.62) 66%,rgba(10,42,39,.9) 100%);
}
.vb-feature-body{
  position:relative;z-index:2;
  padding:30px 32px 30px;
  color:#fff;
}
.vb-chip{
  display:inline-flex;align-items:center;gap:10px;
  background:rgba(252,250,244,.94);color:var(--pine);
  font-size:.72rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  border-radius:100px;padding:7px 14px;
  margin-bottom:16px;
  box-shadow:var(--sh-sm);
}
.vb-feature-body h3{
  color:#fff;
  font-size:clamp(1.5rem,2.3vw,1.9rem);
  margin-bottom:10px;
}
.vb-feature-body p{
  color:#d6e6e1;
  font-size:.99rem;max-width:46ch;
}

/* --- Stack (right) — 3 mini cards --- */
.vb-stack{display:flex;flex-direction:column;gap:16px}

.vb-mini{
  flex:1;
  display:grid;grid-template-columns:168px 1fr;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden;
  box-shadow:var(--sh-sm);
  transition:transform .3s, box-shadow .3s, border-color .3s;
}
.vb-mini:hover{
  transform:translateY(-3px);
  box-shadow:var(--sh-md);
  border-color:var(--mint);
}

.vb-mini-media{
  margin:0;position:relative;
  min-height:140px;
}
.vb-mini-media img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
}

.vb-mini-body{
  padding:18px 22px;
  display:flex;flex-direction:column;justify-content:center;
}
.vb-mini-top{
  display:flex;align-items:baseline;gap:12px;
  margin-bottom:7px;
}
.vb-num{
  font-family:"Fraunces",serif;font-weight:300;
  font-size:1.5rem;line-height:1;
  color:var(--sage);opacity:.5;
}
.vb-mini-top h3{font-size:1.13rem}
.vb-mini-body p{
  color:var(--ink-soft);
  font-size:.91rem;line-height:1.55;
}

/* --- Responsive --- */
@media(max-width:980px){
  .vrijednosti{padding:64px 0 84px}
  .vb-grid{grid-template-columns:1fr}
  .vb-feature{min-height:380px}
}
@media(max-width:560px){
  .vb-mini{grid-template-columns:1fr}
  .vb-mini-media{min-height:0;aspect-ratio:16/9}
}