/* ============================================================
   VOVK — Koristi oljčnega olja
   Samozadosten slog razdelka. Vse je vezano na .vovk-benefits,
   da se ne prepleta s slogom teme. Paleta in pisave so vgrajene.
   ============================================================ */
.vovk-benefits{
	--vb-stone:#ece5d6;
	--vb-stone-deep:#e2dac8;
	--vb-ink:#211c16;
	--vb-ink-soft:#534c40;
	--vb-olive:#4f5d2f;
	--vb-terra:#a8481f;
	--vb-sun:#c79a3f;
	--vb-paper:#f6f2e8;
	--vb-ease:cubic-bezier(.22,.61,.36,1);

	background:var(--vb-stone);
	color:var(--vb-ink);
	font-family:"Hanken Grotesk",system-ui,sans-serif;
	font-size:17px;
	line-height:1.6;
	-webkit-font-smoothing:antialiased;
	padding:104px 0;
	margin:0;
}
.vovk-benefits *{box-sizing:border-box}
.vovk-benefits img{display:block;max-width:100%}

.vovk-benefits .vb-wrap{max-width:1240px;margin:0 auto;padding:0 28px}

.vovk-benefits .vb-head{max-width:640px;margin-bottom:54px}
.vovk-benefits .vb-eyebrow{
	font-size:.72rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
	color:var(--vb-terra);margin:0;
}
.vovk-benefits .vb-head h2{
	font-family:"Fraunces",Georgia,serif;font-weight:400;line-height:1.04;letter-spacing:-.01em;
	font-size:clamp(2rem,4.4vw,3.4rem);margin:16px 0 18px;color:var(--vb-ink);
}
.vovk-benefits .vb-intro{color:var(--vb-ink-soft);max-width:58ch;font-size:1.06rem;margin:0}

.vovk-benefits .vb-grid{display:grid;grid-template-columns:0.86fr 1.14fr;gap:60px;align-items:start}

.vovk-benefits .vb-media{
	position:sticky;top:90px;border-radius:10px;overflow:hidden;
	background:var(--vb-stone-deep);aspect-ratio:3/4;isolation:isolate;margin:0;
}
.vovk-benefits .vb-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vovk-benefits .vb-media::after{
	content:"";position:absolute;inset:0;z-index:1;
	background:linear-gradient(180deg,rgba(34,42,18,0) 45%,rgba(34,42,18,.55) 100%);
}
.vovk-benefits .vb-media figcaption{
	position:absolute;left:18px;bottom:18px;z-index:2;display:inline-flex;align-items:center;gap:9px;
	font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--vb-paper);
}
.vovk-benefits .vb-media figcaption span{width:22px;height:1px;background:var(--vb-sun);display:inline-block}

.vovk-benefits .vb-list{list-style:none;display:flex;flex-direction:column;gap:0;margin:0;padding:0}
.vovk-benefits .vb-item{
	display:flex;gap:20px;align-items:flex-start;padding:22px 0;
	border-top:1px solid color-mix(in srgb,var(--vb-ink) 12%,transparent);
}
.vovk-benefits .vb-item:last-of-type{border-bottom:1px solid color-mix(in srgb,var(--vb-ink) 12%,transparent)}
.vovk-benefits .vb-ic{
	width:54px;height:54px;border-radius:50%;display:grid;place-items:center;flex:0 0 auto;
	color:var(--vb-olive);
	background:color-mix(in srgb,var(--vb-olive) 13%,transparent);
	border:1px solid color-mix(in srgb,var(--vb-olive) 26%,transparent);
}
.vovk-benefits .vb-item h3{
	font-family:"Fraunces",Georgia,serif;font-weight:400;font-size:1.28rem;line-height:1.2;
	margin:0 0 5px;color:var(--vb-ink);
}
.vovk-benefits .vb-item p{color:var(--vb-ink-soft);font-size:.94rem;max-width:46ch;margin:0}

.vovk-benefits .vb-cta{margin-top:26px}
.vovk-benefits .vb-cta a{
	display:inline-flex;align-items:center;gap:11px;
	background:var(--vb-ink);color:var(--vb-paper);text-decoration:none;
	font-size:.82rem;font-weight:600;letter-spacing:.07em;text-transform:uppercase;
	padding:15px 26px;border-radius:40px;transition:background .3s var(--vb-ease),gap .3s var(--vb-ease);
}
.vovk-benefits .vb-cta a:hover{background:var(--vb-olive);gap:18px}

@media(max-width:900px){
	.vovk-benefits{padding:72px 0}
	.vovk-benefits .vb-grid{grid-template-columns:1fr;gap:36px}
	.vovk-benefits .vb-media{position:static;max-width:520px}
	.vovk-benefits .vb-list{display:grid;grid-template-columns:1fr 1fr;gap:0 28px}
	.vovk-benefits .vb-cta{grid-column:1/-1}
}
@media(max-width:620px){ .vovk-benefits .vb-list{grid-template-columns:1fr} }
@media(prefers-reduced-motion:reduce){ .vovk-benefits *{transition:none!important} }