/*
 * Redizajn "20" - preostale strane bez handoff paketa (docs/36):
 * genericka CMS strana (vh-cms), pretraga (vh-src), akcije (vh-akc),
 * vasa vencanja (vh-ven) i omotac za registracione forme (vh-au--forms).
 * Ucitava se POSLE redesign-2a...19 i deli tokene (:root), resete (.vh-home),
 * dugmad (.vh-btn*), breadcrumb (.vh-adr__crumbs), paginaciju (.vh-adr__pages,
 * .vh-mag__page-gap), promo karticu (.vh-adr__promo), DG baner (.vh-zad__banner)
 * i rail banere (.vh-zad__rail-banners). #id selektori za specificnost iznad
 * #body h1/h2 pravila iz style.css.
 */

/* ====================================================================== */
/*  Genericka CMS strana                                                  */
/* ====================================================================== */
.vh-cms { background: #fff; }
.vh-cms .vh-container { padding-top: 18px; padding-bottom: 48px; }
.vh-cms__article { max-width: 820px; margin: 0 auto; }
#vh-cms .vh-cms__title {
	font: 600 38px/1.2 var(--vh-serif);
	font-style: normal; letter-spacing: 0;
	color: var(--vh-text);
	padding: 0; margin: 20px 0 0; text-align: left;
}
.vh-cms__body { margin-top: 18px; font: 400 15px/1.8 var(--vh-sans); color: var(--vh-text-2); }
.vh-cms__body p { margin: 0 0 14px; padding: 0; }
.vh-cms__body a { color: var(--vh-pink-dark) !important; text-decoration: underline; text-underline-offset: 2px; }
.vh-cms__body a:hover { color: var(--vh-pink) !important; }
.vh-cms__body strong, .vh-cms__body b { color: var(--vh-text); font-weight: 600; }
#vh-cms .vh-cms__body h2, #vh-cms .vh-cms__body h3, #vh-cms .vh-cms__body h4,
#vh-cms .vh-cms__body h5, #vh-cms .vh-cms__body h6 {
	font: 600 22px/1.3 var(--vh-serif);
	font-style: normal; letter-spacing: 0;
	color: var(--vh-text);
	padding: 0; margin: 26px 0 10px; text-align: left;
}
#vh-cms .vh-cms__body h4, #vh-cms .vh-cms__body h5, #vh-cms .vh-cms__body h6 { font-size: 18px; font-family: var(--vh-sans); }
.vh-cms__body ul, .vh-cms__body ol { margin: 0 0 14px; padding-left: 22px; }
.vh-cms__body li { margin: 0 0 8px; padding: 0; background: none; list-style: disc; }
.vh-cms__body ol li { list-style: decimal; }
.vh-cms__body img { max-width: 100%; height: auto; border-radius: 12px; margin: 8px 0; }
.vh-cms__body table { width: 100%; border-collapse: collapse; margin: 0 0 14px; }
.vh-cms__body td, .vh-cms__body th { border: 1px solid var(--vh-border); padding: 10px 12px; font-size: 14px; vertical-align: top; }
.vh-cms__body blockquote { border-left: 3px solid var(--vh-pink); margin: 0 0 14px; padding: 4px 0 4px 16px; font-style: italic; }
.vh-cms__empty, .vh-src__hint, .vh-akc__empty, .vh-ven__empty {
	margin-top: 20px;
	border: 1px solid var(--vh-border);
	border-radius: 12px;
	background: var(--vh-tint);
	padding: 24px 26px;
	font: 400 15px/1.7 var(--vh-sans);
	color: var(--vh-text-2);
}
.vh-cms__empty p, .vh-src__hint p, .vh-akc__empty p, .vh-ven__empty p { margin: 0 0 8px; }
.vh-cms__empty p:last-child, .vh-src__hint p:last-child, .vh-akc__empty p:last-child, .vh-ven__empty p:last-child { margin-bottom: 0; }
.vh-cms__empty a, .vh-src__hint a, .vh-akc__empty a, .vh-ven__empty a { color: var(--vh-pink-dark) !important; }

/* ====================================================================== */
/*  Pretraga                                                              */
/* ====================================================================== */
.vh-src { background: #fff; }
.vh-src .vh-container { padding-top: 18px; padding-bottom: 48px; }
#vh-src .vh-src__title {
	font: 600 38px/1.2 var(--vh-serif);
	font-style: normal; letter-spacing: 0;
	color: var(--vh-text);
	padding: 0; margin: 14px 0 0; text-align: left;
}
.vh-src__lead { font: 400 14px/1.6 var(--vh-sans); color: var(--vh-text-2); margin-top: 6px; max-width: 560px; }
.vh-src__form {
	display: flex; gap: 10px; align-items: stretch;
	background: var(--vh-tint);
	border: 1px solid var(--vh-border);
	border-radius: 12px;
	padding: 12px;
	margin-top: 18px;
}
.vh-src__input-wrap { flex: 1 1 auto; position: relative; display: flex; }
.vh-src__input-wrap svg { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: #B9AEB4; pointer-events: none; }
.vh-src__input-wrap input {
	width: 100%;
	font: 400 15px/1.3 var(--vh-sans);
	color: var(--vh-text);
	background: #fff;
	border: 1px solid var(--vh-border-2);
	border-radius: 8px;
	padding: 12px 14px 12px 36px;
}
.vh-src__input-wrap input::placeholder { font-style: italic; color: #B9AEB4; }
.vh-src__input-wrap input:focus { outline: none; border-color: var(--vh-pink); box-shadow: 0 0 0 3px rgba(244, 154, 193, .18); }
.vh-src__submit, .vh-home button.vh-src__submit { padding: 12px 26px; flex: none; }
.vh-src__layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 300px;
	gap: 28px;
	align-items: start;
	margin-top: 24px;
}
.vh-src__rail { display: flex; flex-direction: column; gap: 22px; }
.vh-src__count { font: 400 14px/1.5 var(--vh-sans); color: var(--vh-text-2); margin-bottom: 16px; }
.vh-src__count strong { color: var(--vh-text); font-weight: 600; }
.vh-src__list { display: flex; flex-direction: column; gap: 14px; }
.vh-src-card {
	border: 1px solid var(--vh-border);
	border-radius: 12px;
	padding: 18px 20px;
	transition: border-color .18s ease, box-shadow .18s ease;
}
.vh-src-card:hover { border-color: var(--vh-pink); box-shadow: 0 8px 24px rgba(190, 120, 150, .12); }
.vh-src-card__kind {
	display: inline-flex;
	font: 600 10px/1 var(--vh-sans);
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--vh-pink-dark);
	background: var(--vh-pill);
	border-radius: 100px;
	padding: 5px 10px;
}
#vh-src .vh-src-card__title {
	font: 600 17px/1.4 var(--vh-sans);
	font-style: normal; letter-spacing: 0;
	padding: 0; margin: 10px 0 0; text-align: left;
}
#vh-src .vh-src-card__title a { color: var(--vh-text) !important; }
#vh-src .vh-src-card__title a:hover { color: var(--vh-pink-dark) !important; }
.vh-src-card__excerpt { font: 400 13px/1.65 var(--vh-sans); color: var(--vh-text-2); margin: 8px 0 0; }
.vh-src-card__more {
	display: inline-block;
	margin-top: 10px;
	font: 600 11px/1 var(--vh-sans);
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--vh-pink-dark) !important;
}
.vh-src__pages { margin-top: 26px; }

/* ====================================================================== */
/*  Akcije                                                                */
/* ====================================================================== */
.vh-akc { background: #fff; }
.vh-akc .vh-container { padding-top: 18px; padding-bottom: 48px; }
#vh-akc .vh-akc__title {
	font: 600 38px/1.2 var(--vh-serif);
	font-style: normal; letter-spacing: 0;
	color: var(--vh-text);
	padding: 0; margin: 14px 0 0; text-align: left;
}
.vh-akc__lead { font: 400 14px/1.6 var(--vh-sans); color: var(--vh-text-2); margin-top: 6px; max-width: 560px; }
.vh-akc__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	margin-top: 24px;
}
.vh-akc-card {
	display: flex; flex-direction: column;
	border: 1px solid var(--vh-border);
	border-radius: 12px;
	overflow: hidden;
	background: #fff;
	transition: border-color .18s ease, box-shadow .18s ease;
}
.vh-akc-card:hover { border-color: var(--vh-pink); box-shadow: 0 8px 24px rgba(190, 120, 150, .12); }
.vh-akc-card__photo {
	position: relative;
	display: block;
	height: 160px;
	background: var(--vh-tint) center/cover no-repeat;
}
.vh-akc-card__pill {
	position: absolute;
	left: 12px; bottom: 12px;
	background: var(--vh-pink);
	color: #fff;
	font: 600 11px/1 var(--vh-sans);
	letter-spacing: 1px;
	text-transform: uppercase;
	padding: 6px 12px;
	border-radius: 100px;
}
.vh-akc-card__body { padding: 16px; display: flex; flex-direction: column; gap: 6px; flex: 1 1 auto; }
#vh-akc .vh-akc-card__name {
	font: 600 16px/1.35 var(--vh-sans);
	font-style: normal; letter-spacing: 0;
	padding: 0; margin: 0; text-align: left;
}
#vh-akc .vh-akc-card__name a { color: var(--vh-text) !important; }
#vh-akc .vh-akc-card__name a:hover { color: var(--vh-pink-dark) !important; }
.vh-akc-card__city { font: 400 12px/1.4 var(--vh-sans); color: var(--vh-muted); margin: 0; }
.vh-akc-card__excerpt { font: 400 13px/1.6 var(--vh-sans); color: var(--vh-text-2); margin: 0; }
.vh-akc-card__foot { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 8px; }
.vh-akc-card__more { font: 600 11px/1 var(--vh-sans); letter-spacing: 1.5px; text-transform: uppercase; color: var(--vh-pink-dark) !important; white-space: nowrap; }
.vh-akc-card__until { font: 400 11px/1 var(--vh-sans); color: var(--vh-muted); white-space: nowrap; }
.vh-akc__banners { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 26px; }
.vh-akc__banner {
	position: relative;
	border: 1px solid var(--vh-border);
	border-radius: 12px;
	overflow: hidden;
	line-height: 0;
}
.vh-akc__banner img { width: 100%; height: auto; display: block; }

/* ====================================================================== */
/*  Vasa vencanja                                                         */
/* ====================================================================== */
.vh-ven { background: #fff; }
.vh-ven .vh-container { padding-top: 18px; padding-bottom: 48px; }
.vh-ven__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-top: 14px; }
#vh-ven .vh-ven__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-ven__lead { font: 400 14px/1.7 var(--vh-sans); color: var(--vh-text-2); margin-top: 6px; max-width: 620px; }
.vh-ven__lead p { margin: 0 0 8px; }
.vh-ven__menu { flex: 0 1 auto; }
.vh-ven__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	margin-top: 24px;
}
.vh-ven-card {
	border: 1px solid var(--vh-border);
	border-radius: 12px;
	overflow: hidden;
	background: #fff;
	transition: border-color .18s ease, box-shadow .18s ease;
}
.vh-ven-card:hover { border-color: var(--vh-pink); box-shadow: 0 8px 24px rgba(190, 120, 150, .12); }
.vh-ven-card__photo { display: block; height: 190px; background: var(--vh-tint) center/cover no-repeat; }
.vh-ven-card__body { padding: 14px 16px; }
#vh-ven .vh-ven-card__name {
	font: 600 16px/1.35 var(--vh-sans);
	font-style: normal; letter-spacing: 0;
	padding: 0; margin: 0; text-align: left;
}
#vh-ven .vh-ven-card__name a { color: var(--vh-text) !important; }
#vh-ven .vh-ven-card__name a:hover { color: var(--vh-pink-dark) !important; }
.vh-ven-card__date { font: 400 13px/1.4 var(--vh-sans); color: var(--vh-text-2); margin: 6px 0 0; }
.vh-ven-card__date span { color: var(--vh-pink); font-size: 11px; }
.vh-ven__pages { margin-top: 26px; }

/* ====================================================================== */
/*  Registracione forme u 19b band omotacu                                */
/* ====================================================================== */
.vh-au--forms .vh-au__inner--forms { max-width: 760px; }
.vh-au--forms .vauth-wrap { margin-top: 0; margin-bottom: 0; padding: 0; }
.vh-au--forms .vauth-wrap--wide { max-width: none; }
.vh-au--forms .vauth-card { border-radius: 14px; border-color: #F5E4EB; box-shadow: 0 12px 32px rgba(190, 120, 150, .12); }

/* ====================================================================== */
/*  Responsive                                                            */
/* ====================================================================== */
@media (max-width: 991px) {
	.vh-src__layout { grid-template-columns: minmax(0, 1fr); }
	.vh-src__rail { flex-direction: row; flex-wrap: wrap; }
	.vh-src__rail > * { flex: 1 1 280px; }
	.vh-akc__grid, .vh-ven__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 767px) {
	.vh-cms .vh-container, .vh-src .vh-container, .vh-akc .vh-container, .vh-ven .vh-container { padding-top: 12px; padding-bottom: 32px; }
	#vh-cms .vh-cms__title, #vh-src .vh-src__title, #vh-akc .vh-akc__title, #vh-ven .vh-ven__title { font-size: 30px; }
	.vh-src__form { flex-direction: column; }
	.vh-src__submit, .vh-home button.vh-src__submit { width: 100%; }
	.vh-src__rail { flex-direction: column; }
	.vh-akc__grid, .vh-ven__grid { grid-template-columns: 1fr; gap: 16px; }
	.vh-akc__banners { grid-template-columns: 1fr; }
	.vh-ven__head { display: block; }
	.vh-ven__menu { margin-top: 14px; }
}
