/*
 * Redizajn "23a" - tematske strane venčanja (design_handoff_23a_na_otvorenom).
 * Stil zajedničkog tematskog šablona; trenutno ga koristi prva objavljena tema
 * "Venčanje na otvorenom".
 * Tokeni po handoff-u: roze #F49AC1 / #DF76A8, pozadine #FEFBFC/#FBF1F4/#FBE9F0,
 * borderi #F5E4EB/#F0D3DF, tekst #4A4145/#6B6266/#8A8085, muted #B98CA0.
 *
 * Svi grid/flex kontejneri idu preko minmax(0,...) / min-width: 0 - golo 1fr je
 * minmax(AUTO,1fr) i pušta dete da probije stranu (POPRAVKE 2026-08-28).
 */

.vh-tema { background: #fff; }
.vh-tema .vh-container { max-width: 1180px; }
/* Dugmad: .vh-btn--primary u redesign-2a.css ima `padding: 0 24px` (bez
   vertikalnog), pa bez visine ispada 12px - premalo za dodir. Ovde se daje
   zajednicka visina i padding, scope-ovano na .vh-tema da se ne diraju
   ostale strane. Handoff trazi tap target >= 44px.
   Dugacki natpisi se prelamaju umesto da probiju usku stranu. */
.vh-tema .vh-btn {
	min-height: 44px;
	padding: 12px 22px;
	max-width: 100%;
	white-space: normal;
	text-align: center;
	line-height: 1.35;
}

/* #vh-tema prefiks + reset kurziva/razmaka: legacy style.css ima
   #body h1..h6 { italic; letter-spacing: 3px } sa ID specificnoscu, pa gola
   klasa gubi. Ista konvencija kao #vh-pon u redesign-8.css. */
#vh-tema .vh-tema__h2 { font: 600 30px/1.25 var(--vh-serif); color: #4A4145; margin: 0 0 12px; font-style: normal; letter-spacing: 0; }
.vh-tema__h2--c { text-align: center; }
.vh-tema__sub { font: 400 14px/1.7 var(--vh-sans); color: #6B6266; text-align: center; margin: 0 0 8px; }
.vh-tema__text { font: 400 13.5px/1.75 var(--vh-sans); color: #6B6266; margin: 0 0 14px; }

/* Ornament: linija · srce · linija */
.vh-tema__orn { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 6px 0 26px; }
.vh-tema__orn::before, .vh-tema__orn::after { content: ""; width: 44px; height: 1px; background: #F0D3DF; }
.vh-tema__orn span { color: #F49AC1; font-size: 13px; line-height: 1; }

/* ---------- 2. Hero ---------- */
.vh-tema__hero {
	position: relative;
	min-height: 420px;
	display: flex;
	align-items: center;
	background-size: cover;
	background-position: center;
}
.vh-tema__hero-in { max-width: 520px; padding: 46px 0; }
.vh-tema__eyebrow {
	font: 600 11px/1.4 var(--vh-sans);
	letter-spacing: 3.5px;
	text-transform: uppercase;
	color: rgba(255,255,255,.82);
	margin: 0 0 14px;
}
#vh-tema .vh-tema__h1 { font: 600 54px/1.1 var(--vh-serif); color: #fff; margin: 0 0 14px; font-style: normal; letter-spacing: 0; }
.vh-tema__lead { font: 400 16px/1.7 var(--vh-sans); color: rgba(255,255,255,.9); margin: 0 0 24px; }
.vh-tema__hero-cta { display: flex; gap: 12px; flex-wrap: wrap; }
.vh-tema .vh-btn--ghost {
	background: transparent;
	border: 1.5px solid rgba(255,255,255,.75);
	color: #fff !important;
	border-radius: 8px;
}
.vh-tema .vh-btn--ghost:hover { background: rgba(255,255,255,.14); }
.vh-tema .vh-btn--outline {
	background: transparent;
	border: 1.5px solid #F49AC1;
	color: #DF76A8 !important;
	border-radius: 8px;
}
.vh-tema .vh-btn--outline:hover { background: #FBF1F4; }
.vh-tema .vh-btn--pill { border-radius: 100px; }
.vh-tema .vh-btn--white { background: #fff; color: #4A4145 !important; border: 0; border-radius: 6px; }

/* ---------- 3. Zašto + rizik ---------- */
.vh-tema__why { background: #FEFBFC; border-bottom: 1px solid #F5E4EB; padding: 44px 0; }
.vh-tema__why-grid { display: flex; gap: 36px; align-items: flex-start; }
.vh-tema__why-main { flex: 1.15 1 0; min-width: 0; }
.vh-tema__why-main .vh-tema__text { max-width: 520px; font-size: 14.5px; }
.vh-tema__feats {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 18px;
	margin: 24px 0 22px;
}
.vh-tema__ico { width: 28px; height: 28px; color: #F49AC1; flex: none; }
#vh-tema .vh-tema__feat-name { font: 600 13.5px/1.4 var(--vh-sans); color: #4A4145; margin: 10px 0 4px; font-style: normal; letter-spacing: 0; }
.vh-tema__feat-text { font: 400 12.5px/1.6 var(--vh-sans); color: #8A8085; margin: 0; }

.vh-tema__risk {
	flex: 0 0 420px;
	min-width: 0;
	background: #fff;
	border: 1px solid #F0D3DF;
	border-radius: 14px;
	padding: 26px;
}
.vh-tema__risk-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.vh-tema__risk-head .vh-tema__ico { width: 26px; height: 26px; }
#vh-tema .vh-tema__risk-title { font: 600 21px/1.3 var(--vh-serif); color: #4A4145; margin: 0; font-style: normal; letter-spacing: 0; }
.vh-tema__risk .vh-tema__text { font-size: 13.5px; }
.vh-tema__risk-claim { font: 600 14px/1.6 var(--vh-sans); color: #DF76A8; margin: 0 0 10px; }

/* ---------- 4. i 5. Kartice firmi ---------- */
.vh-tema__venues { padding: 46px 0; }
.vh-tema__cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.vh-tema__cards--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.vh-tema__card {
	display: block;
	border: 1px solid #F5E4EB;
	border-radius: 14px;
	overflow: hidden;
	background: #fff;
	text-decoration: none;
	transition: border-color .18s ease, box-shadow .18s ease;
}
.vh-tema__card:hover { border-color: #F49AC1; box-shadow: 0 8px 24px rgba(190,120,150,.12); }
.vh-tema__card-pic { display: block; height: 170px; background: #FBF1F4 center/cover no-repeat; }
.vh-tema__cards--4 .vh-tema__card-pic { height: 120px; }
.vh-tema__card-body { display: block; padding: 14px 16px 16px; }
.vh-tema__card-name { display: block; font: 600 16px/1.35 var(--vh-sans); color: #4A4145; }
.vh-tema__cards--4 .vh-tema__card-name { font-size: 14.5px; }
.vh-tema__card-city { display: block; font: 400 12.5px/1.5 var(--vh-sans); color: #B98CA0; margin-top: 2px; }
.vh-tema__card-text { display: block; font: 400 12.5px/1.6 var(--vh-sans); color: #8A8085; margin-top: 6px; }
.vh-tema__cards--4 .vh-tema__card-text { font-size: 12px; line-height: 1.55; }
.vh-tema__card-cta {
	display: block;
	font: 600 11px/1.4 var(--vh-sans);
	letter-spacing: .06em;
	text-transform: uppercase;
	color: #DF76A8;
	margin-top: 12px;
}
.vh-tema__more { text-align: center; margin-top: 26px; }

/* ---------- 5. Dekoracija: kartice + CTA panel ---------- */
.vh-tema__decor { background: #FEFBFC; border-top: 1px solid #F5E4EB; border-bottom: 1px solid #F5E4EB; padding: 46px 0; }
.vh-tema__decor-row { display: flex; gap: 22px; align-items: stretch; margin-top: 22px; }
.vh-tema__decor-cards { flex: 1 1 0; min-width: 0; }
.vh-tema__ask {
	flex: 0 0 280px;
	min-width: 0;
	background: #FBE9F0;
	border-radius: 14px;
	padding: 26px 22px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
}
.vh-tema__ask .vh-tema__ico { width: 30px; height: 30px; color: #DF76A8; }
#vh-tema .vh-tema__ask-title { font: 600 21px/1.3 var(--vh-serif); color: #4A4145; margin: 12px 0 8px; font-style: normal; letter-spacing: 0; }
.vh-tema__ask-text { font: 400 13px/1.65 var(--vh-sans); color: #6B6266; margin: 0 0 16px; }

/* ---------- 6. Traka "Ne zaboravite" ---------- */
.vh-tema__check { background: #FBF1F4; padding: 38px 0; }
#vh-tema .vh-tema__check .vh-tema__h2 { font-size: 27px; }
.vh-tema__chips { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 10px; margin-top: 22px; }
.vh-tema__chip {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	text-align: center;
	text-decoration: none;
}
.vh-tema__chip-circle {
	width: 48px; height: 48px;
	flex: none;
	border-radius: 50%;
	background: #fff;
	border: 1px solid #F0D3DF;
	display: flex; align-items: center; justify-content: center;
	transition: border-color .18s ease;
}
.vh-tema__chip-circle .vh-tema__ico { width: 22px; height: 22px; }
.vh-tema__chip:hover .vh-tema__chip-circle { border-color: #F49AC1; }
.vh-tema__chip-name { font: 600 11.5px/1.35 var(--vh-sans); color: #4A4145; }
.vh-tema__chip-cta {
	font: 600 9.5px/1.3 var(--vh-sans);
	letter-spacing: .06em;
	text-transform: uppercase;
	color: #DF76A8;
}

/* ---------- 7. Pod-stilovi ---------- */
.vh-tema__styles { padding: 46px 0; }
.vh-tema__style-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.vh-tema__style {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-items: center;
	text-align: center;
	height: 250px;
	padding: 20px;
	border-radius: 14px;
	background-size: cover;
	background-position: center;
}
#vh-tema .vh-tema__style-name { font: 600 19px/1.25 var(--vh-serif); color: #fff; margin: 0 0 6px; font-style: normal; letter-spacing: 0; }
.vh-tema__style-text { font: 400 12px/1.55 var(--vh-sans); color: rgba(255,255,255,.82); margin: 0 0 14px; }

/* ---------- 8. Magazin + FAQ ---------- */
.vh-tema__bottom { padding: 46px 0; }
.vh-tema__bottom-grid { display: flex; gap: 40px; align-items: flex-start; }
.vh-tema__bottom-main { flex: 1.35 1 0; min-width: 0; }
.vh-tema__bottom-side { flex: 0 0 340px; min-width: 0; }
.vh-tema__arts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 18px; }
.vh-tema__art {
	display: block;
	border: 1px solid #F5E4EB;
	border-radius: 14px;
	overflow: hidden;
	background: #fff;
	text-decoration: none;
	transition: border-color .18s ease;
}
.vh-tema__art:hover { border-color: #F49AC1; }
.vh-tema__art-pic { display: block; height: 150px; background: #FBF1F4 center/cover no-repeat; }
.vh-tema__art-body { display: block; padding: 14px 15px 16px; }
.vh-tema__art-title { display: block; font: 600 15.5px/1.4 var(--vh-serif); color: #4A4145; }

.vh-tema__dg { position: relative; margin-top: 22px; border-radius: 12px; overflow: hidden; }
.vh-tema__dg img { width: 100%; height: auto; display: block; }
.vh-tema__dg h3 { display: none; }

.vh-tema__faq { margin-top: 18px; }
.vh-tema__q { border-bottom: 1px solid #F5E4EB; }
.vh-tema__q summary {
	list-style: none;
	cursor: pointer;
	padding: 14px 28px 14px 0;
	position: relative;
	font: 500 13.5px/1.5 var(--vh-sans);
	color: #4A4145;
}
.vh-tema__q summary::-webkit-details-marker { display: none; }
.vh-tema__q summary::after {
	content: "+";
	position: absolute;
	right: 4px;
	top: 11px;
	font-size: 18px;
	line-height: 1;
	color: #DF76A8;
}
.vh-tema__q[open] summary::after { content: "−"; }
.vh-tema__q p { margin: 0 0 14px; font: 400 13px/1.7 var(--vh-sans); color: #6B6266; }

/* ---------- 9. Zaključni CTA ---------- */
.vh-tema__final { background: #FBE9F0; padding: 40px 0; text-align: center; }
#vh-tema .vh-tema__final .vh-tema__h2 { font-size: 27px; }
.vh-tema__final-links { margin-top: 18px; font: 400 13px/1.6 var(--vh-sans); color: #B98CA0; }
.vh-tema__final-links a { color: #DF76A8; }
.vh-tema__final-links span { margin: 0 10px; color: #E0C3D0; }

/* ---------- Responsive ---------- */
@media (max-width: 991px) {
	.vh-tema__why-grid, .vh-tema__decor-row, .vh-tema__bottom-grid { flex-direction: column; }
	.vh-tema__risk, .vh-tema__ask, .vh-tema__bottom-side { flex: 1 1 auto; width: 100%; }
	.vh-tema__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.vh-tema__style-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.vh-tema__chips { grid-template-columns: repeat(5, minmax(0, 1fr)); row-gap: 20px; }
	#vh-tema .vh-tema__h1 { font-size: 40px; }
}
@media (max-width: 767px) {
	.vh-tema__hero { min-height: 320px; }
	.vh-tema__hero-in { padding: 34px 0; }
	#vh-tema .vh-tema__h1 { font-size: 32px; }
	#vh-tema .vh-tema__h2, #vh-tema .vh-tema__check .vh-tema__h2, #vh-tema .vh-tema__final .vh-tema__h2 { font-size: 23px; }
	.vh-tema__hero-cta { flex-direction: column; align-items: stretch; }
	.vh-tema__hero-cta .vh-btn { width: 100%; }
	.vh-tema__feats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.vh-tema__cards { grid-template-columns: minmax(0, 1fr); }
	.vh-tema__cards--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.vh-tema__chips { grid-template-columns: repeat(5, minmax(0, 1fr)); }
	.vh-tema__style-grid { grid-template-columns: minmax(0, 1fr); }
	.vh-tema__style { height: 200px; }
	.vh-tema__arts { grid-template-columns: minmax(0, 1fr); }
	.vh-tema__why, .vh-tema__venues, .vh-tema__decor, .vh-tema__check,
	.vh-tema__styles, .vh-tema__bottom, .vh-tema__final { padding: 32px 0; }
	/* tap targeti >= 44px */
	.vh-tema__chip-circle { width: 46px; height: 46px; }
	.vh-tema__q summary { padding: 15px 28px 15px 0; }
	/* Linkovi u dnu: na desktopu su red razdvojen "|", na dodiru se slazu
	   jedan ispod drugog da bi tap target bio >= 44px. */
	.vh-tema__final-links a { display: block; padding: 13px 0; }
	.vh-tema__final-links span { display: none; }
}