/*
 * Redizajn "17a" - Popusti za mladence (design_handoff_17a_popusti).
 * Ucitava se POSLE redesign-2a/11a/12b/13a; deli tokene, resete (.vh-home), dugmad,
 * breadcrumb, DG baner (.vh-zad__banner), rail banere (.vh-zad__rail-banners),
 * "Za mladence" (.vh-zad__links), CTA (.vh-korak__cta) i fallback (.vh-dok__fallback).
 * Prefiks klasa: vh-pop.
 */

.vh-pop { background: #fff; }
.vh-pop .vh-container { padding-top: 18px; padding-bottom: 48px; }
.vh-pop__layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 300px;
	gap: 28px;
	margin-top: 16px;
	align-items: start;
}
#vh-pop .vh-pop__title {
	font: 600 38px/1.2 var(--vh-serif);
	font-style: normal; letter-spacing: 0;
	color: var(--vh-text);
	padding: 0; margin: 0; text-align: left;
}
.vh-pop__lead { font: 400 15px/1.75 var(--vh-sans); color: var(--vh-city); margin-top: 12px; max-width: 760px; }
.vh-pop__lead strong { color: var(--vh-text); font-weight: 600; }

/* ---------- Koraci 2x2 ---------- */
.vh-pop__steps { list-style: none; margin: 22px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.vh-pop__step {
	display: flex; align-items: flex-start; gap: 14px;
	border: 1px solid var(--vh-border);
	border-radius: 12px;
	padding: 20px;
	background: #fff;
	transition: border-color .18s ease, box-shadow .18s ease;
}
.vh-pop__step:hover { border-color: var(--vh-pink); box-shadow: var(--vh-shadow-hover); }
.vh-pop__num {
	flex: none;
	width: 40px; height: 40px;
	border-radius: 50%;
	background: var(--vh-pill);
	display: flex; align-items: center; justify-content: center;
	font: 600 17px/1 var(--vh-serif);
	color: var(--vh-pink-dark);
}
.vh-pop__step-body { min-width: 0; }
#vh-pop .vh-pop__step-title {
	font: 600 15px/1.35 var(--vh-sans);
	font-style: normal; letter-spacing: 0;
	color: var(--vh-text);
	padding: 0; margin: 0; text-align: left;
}
.vh-pop__step-text { font: 400 13px/1.6 var(--vh-sans); color: var(--vh-text-2); margin-top: 5px; }
.vh-pop__step-text strong { color: var(--vh-text); }

/* ---------- Ilustracije ---------- */
.vh-pop__figures { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 18px; }
.vh-pop__figure {
	margin: 0;
	background: var(--vh-tint);
	border: 1px solid var(--vh-border);
	border-radius: 12px;
	padding: 22px;
	text-align: center;
}
.vh-pop__figure img { max-width: 100%; max-height: 200px; height: auto; object-fit: contain; display: inline-block; }
.vh-pop__figure figcaption { font: 400 12px/1.4 var(--vh-sans); color: var(--vh-muted); margin-top: 12px; }

/* ---------- CTA traka ---------- */
.vh-pop__cta {
	display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
	background: var(--vh-tint);
	border: 1.5px solid var(--vh-pink);
	border-radius: 14px;
	padding: 20px 26px;
	margin-top: 22px;
}
.vh-pop__cta-title { font: 600 italic 20px/1.3 var(--vh-serif); color: var(--vh-text); }
.vh-pop__cta-sub { font: 400 13px/1.5 var(--vh-sans); color: var(--vh-text-2); margin-top: 4px; }
.vh-pop__cta-btn { padding: 13px 22px; }

.vh-pop__rail { display: flex; flex-direction: column; gap: 16px; }
.vh-pop .vh-zad__links .vh-zad__rail-title { margin-bottom: 6px; }

/* ---------- Responsive ---------- */
@media (max-width: 991px) {
	.vh-pop__layout { grid-template-columns: minmax(0, 1fr); }
	.vh-pop .vh-zad__rail-banners { flex-direction: row; }
	.vh-pop .vh-zad__rail-banners > a { flex: 1 1 0; }
}
@media (max-width: 767px) {
	.vh-pop .vh-container { padding-top: 12px; padding-bottom: 32px; }
	#vh-pop .vh-pop__title { font-size: 28px; }
	.vh-pop__steps, .vh-pop__figures { grid-template-columns: 1fr; gap: 12px; }
	.vh-pop__step { padding: 16px; }
	.vh-pop__figure { padding: 16px; }
	.vh-pop__cta { padding: 18px; }
	.vh-pop__cta-btn { width: 100%; }
	.vh-pop .vh-zad__rail-banners { flex-direction: column; }
}