/* ════════════════════════════════════════════════════════════════
   Vertikala Landing Page – landing.css
   Mirrors the design from index2claude.html, scoped with .vrt- prefix
   ════════════════════════════════════════════════════════════════ */

/* ── Reset for landing sections ─────────────────────────────── */
.vrt-landing-page {
	font-family: 'Roboto', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	line-height: 1.6;
	color: #333;
}
.vrt-landing-page *,
.vrt-landing-page *::before,
.vrt-landing-page *::after {
	box-sizing: border-box;
}

/* Hide Blocksy's own header/footer on this template */
.vrt-landing-page .ct-header,
.vrt-landing-page #header,
.vrt-landing-page .site-header,
.vrt-landing-page .ct-footer,
.vrt-landing-page #footer,
.vrt-landing-page .site-footer,
.vrt-landing-page .ct-container > .ct-breadcrumbs,
.vrt-landing-page .page-title-section {
	display: none !important;
}

/* ── CSS Variables ───────────────────────────────────────────── */
:root {
	--vrt-primary:   #2b2a29;
	--vrt-secondary: #7690c9;
	--vrt-accent:    #0066cc;
	--vrt-white:     #ffffff;
	--vrt-light-bg:  #f5f5f5;
	--vrt-gray:      #666;
}

/* ── Fonts (loaded by WordPress via wp_head if not already) ─── */
.vrt-landing-page h1,
.vrt-landing-page h2,
.vrt-landing-page h3,
.vrt-landing-page h4 {
	font-family: 'Orbitron', 'Roboto', sans-serif;
}

/* ══════════════════════════════════════════════════════════════
   HEADER
   ══════════════════════════════════════════════════════════════ */
.vrt-header {
	background: var(--vrt-white);
	box-shadow: 0 2px 10px rgba(0,0,0,.1);
	position: sticky;
	top: 0;
	z-index: 1000;
}
.vrt-header-container {
	max-width: 1200px;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 1rem 2rem;
}
.vrt-logo img { height: 40px; width: auto; }

/* Nav */
.vrt-nav ul {
	display: flex;
	list-style: none;
	gap: 2rem;
	margin: 0;
	padding: 0;
}
.vrt-nav a {
	text-decoration: none;
	color: var(--vrt-primary);
	font-weight: 500;
	text-transform: uppercase;
	font-size: .9rem;
	padding: .5rem 1rem;
	border-radius: 4px;
	transition: all .3s;
}
.vrt-nav a:hover {
	background: var(--vrt-secondary);
	color: var(--vrt-white);
}

/* Language buttons */
.vrt-lang-selector { display: flex; gap: .5rem; margin-left: 2rem; }
.vrt-lang-btn {
	background: transparent;
	border: 2px solid var(--vrt-primary);
	color: var(--vrt-primary);
	padding: .5rem 1rem;
	border-radius: 5px;
	cursor: pointer;
	font-weight: bold;
	font-size: .9rem;
	transition: all .3s;
}
.vrt-lang-btn:hover,
.vrt-lang-btn.active {
	background: var(--vrt-secondary);
	border-color: var(--vrt-secondary);
	color: var(--vrt-white);
}

/* Mobile toggle */
.vrt-mobile-toggle {
	display: none;
	background: none;
	border: none;
	font-size: 1.8rem;
	cursor: pointer;
	color: var(--vrt-primary);
}

/* ══════════════════════════════════════════════════════════════
   HERO
   ══════════════════════════════════════════════════════════════ */
.vrt-hero {
	background: linear-gradient(rgba(0,0,0,.5),rgba(0,0,0,.5)),
	            url('') center/cover no-repeat;
	background-color: #2b2a29; /* fallback */
	min-height: 90vh;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	color: var(--vrt-white);
	padding: 2rem;
}
.vrt-hero-content { max-width: 900px; }
.vrt-hero-content h1 {
	font-size: 3.5rem;
	margin-bottom: 1rem;
	line-height: 1.2;
	text-shadow: 2px 2px 4px rgba(0,0,0,.5);
}
.vrt-hero-content p {
	font-size: 1.3rem;
	margin-bottom: 2rem;
	text-shadow: 1px 1px 2px rgba(0,0,0,.5);
}
.vrt-cta-btn {
	display: inline-block;
	background: var(--vrt-secondary);
	color: var(--vrt-white);
	padding: 1rem 2.5rem;
	text-decoration: none;
	border-radius: 50px;
	font-weight: bold;
	font-size: 1.1rem;
	transition: all .3s;
	box-shadow: 0 4px 15px rgba(118,144,201,.4);
}
.vrt-cta-btn:hover {
	background: #5a7ab8;
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(118,144,201,.6);
}

/* ══════════════════════════════════════════════════════════════
   SHARED SECTION STYLES
   ══════════════════════════════════════════════════════════════ */
.vrt-section { padding: 5rem 2rem; }
.vrt-container { max-width: 1200px; margin: 0 auto; }

.vrt-section h2 {
	font-size: 2.5rem;
	margin-bottom: 2rem;
	color: var(--vrt-primary);
	text-align: center;
}
.vrt-section h2::after {
	content: '';
	display: block;
	width: 80px;
	height: 4px;
	background: var(--vrt-secondary);
	margin: 1rem auto 0;
}
.vrt-section-subtitle {
	text-align: center;
	max-width: 800px;
	margin: 0 auto 3rem;
	font-size: 1.1rem;
	color: var(--vrt-gray);
}

/* ══════════════════════════════════════════════════════════════
   O NAMA
   ══════════════════════════════════════════════════════════════ */
.vrt-about { background: var(--vrt-white); }
.vrt-about-grid {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	gap: 4rem;
	align-items: center;
	margin-top: 3rem;
}
.vrt-about-text p {
	font-size: 1.1rem;
	line-height: 1.8;
	color: var(--vrt-gray);
	margin-bottom: 1.5rem;
	text-align: justify;
}
.vrt-about-logo-center {
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
}
.vrt-about-logo-center::before {
	content: '';
	position: absolute;
	width: 2px;
	height: 100%;
	background: linear-gradient(to bottom, transparent, var(--vrt-secondary) 20%, var(--vrt-secondary) 80%, transparent);
	left: 50%;
	transform: translateX(-50%);
	opacity: .3;
}
.vrt-about-logo-center img {
	max-width: 180px;
	width: 100%;
	height: auto;
	position: relative;
	z-index: 2;
	filter: drop-shadow(0 5px 15px rgba(0,0,0,.1));
	animation: vrt-float 3s ease-in-out infinite;
}
@keyframes vrt-float {
	0%, 100% { transform: translateY(0); }
	50%       { transform: translateY(-10px); }
}

/* ══════════════════════════════════════════════════════════════
   PREDNOSTI (ADVANTAGES)
   ══════════════════════════════════════════════════════════════ */
.vrt-advantages { background: var(--vrt-light-bg); }
.vrt-advantages h2 { color: var(--vrt-primary); }

.vrt-advantages-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2rem;
	margin-top: 3rem;
}
.vrt-adv-center-logo {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 2rem;
}
.vrt-adv-center-logo img { max-width: 250px; width: 100%; }

.vrt-adv-card {
	position: relative;
	height: 350px;
	border-radius: 15px;
	overflow: hidden;
	cursor: pointer;
	background: #000;
}
.vrt-adv-card::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom, rgba(0,0,0,.3), rgba(0,0,0,.7));
	z-index: 1;
	transition: opacity .3s, background .3s;
}
.vrt-adv-card:hover::before {
	background: linear-gradient(to bottom, rgba(43,42,41,.8), rgba(43,42,41,.95));
}
.vrt-adv-card > img {
	width: 100%; height: 100%;
	object-fit: cover;
	transition: transform .5s;
}
.vrt-adv-card:hover > img { transform: scale(1.05); }

.vrt-adv-content {
	position: absolute;
	inset: 0;
	padding: 2.5rem;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	z-index: 2;
}
.advantage-icon {
	width: 80px;
	height: 80px;
	margin-bottom: 1.5rem;
	transition: all .3s;
}
.vrt-adv-card:hover .advantage-icon { transform: scale(.8); opacity: 0; }

.vrt-adv-content h3 {
	color: var(--vrt-white);
	font-size: 1.8rem;
	margin-bottom: 1rem;
	text-transform: uppercase;
	letter-spacing: 1px;
	transition: transform .3s;
}
.vrt-adv-card:hover .vrt-adv-content h3 { transform: translateY(-20px); }

.vrt-adv-content p {
	color: var(--vrt-white);
	line-height: 1.7;
	font-size: 1.05rem;
	opacity: 0;
	transform: translateY(20px);
	transition: all .3s;
	max-width: 90%;
}
.vrt-adv-card:hover .vrt-adv-content p { opacity: 1; transform: translateY(0); }

/* ══════════════════════════════════════════════════════════════
   USLUGE (SERVICES)
   ══════════════════════════════════════════════════════════════ */
.vrt-services {
	background: linear-gradient(135deg, #2b2a29 0%, #1a1918 100%);
	position: relative;
	overflow: hidden;
}
.vrt-services h2 { color: var(--vrt-white); }
.vrt-services h2::after { background: var(--vrt-secondary); }
.vrt-services .vrt-section-subtitle { color: rgba(255,255,255,.8); }

.vrt-services-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
	gap: 2.5rem;
	margin-top: 3rem;
}
.vrt-service-card {
	background: rgba(255,255,255,.05);
	backdrop-filter: blur(10px);
	border-radius: 15px;
	overflow: hidden;
	border: 1px solid rgba(255,255,255,.1);
	transition: all .3s;
}
.vrt-service-card:hover {
	transform: translateY(-10px);
	background: rgba(255,255,255,.08);
	border-color: rgba(118,144,201,.3);
	box-shadow: 0 15px 40px rgba(0,0,0,.4);
}
.vrt-service-img {
	height: 200px;
	overflow: hidden;
	position: relative;
}
.vrt-service-img::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom, rgba(0,0,0,.2), rgba(0,0,0,.5));
	z-index: 1;
}
.vrt-service-img img {
	width: 100%; height: 100%;
	object-fit: cover;
	transition: transform .5s;
}
.vrt-service-card:hover .vrt-service-img img { transform: scale(1.15); }
.vrt-service-content { padding: 2rem; }
.vrt-service-content h3 { color: var(--vrt-white); font-size: 1.5rem; margin-bottom: 1rem; }
.vrt-service-content p  { color: rgba(255,255,255,.8); line-height: 1.7; }

/* ══════════════════════════════════════════════════════════════
   GALERIJA
   ══════════════════════════════════════════════════════════════ */
.vrt-gallery { background: var(--vrt-light-bg); }

.vrt-gallery-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-auto-rows: 200px;
	gap: 2rem;
	margin-top: 3rem;
}

/* Mosaic pattern – same as original */
.vrt-gallery-card:nth-child(1) { grid-column: span 2; }
.vrt-gallery-card:nth-child(2) { grid-column: span 1; grid-row: span 2; }
.vrt-gallery-card:nth-child(3) { grid-column: span 1; }
.vrt-gallery-card:nth-child(4) { grid-column: span 2; }
.vrt-gallery-card:nth-child(5) { grid-column: span 1; }
.vrt-gallery-card:nth-child(6) { grid-column: span 1; }
.vrt-gallery-card:nth-child(7) { grid-column: span 1; }
.vrt-gallery-card:nth-child(8) { grid-column: span 2; }

.vrt-gallery-card {
	position: relative;
	border-radius: 15px;
	overflow: hidden;
	cursor: pointer;
	background: #111;
	box-shadow: 0 5px 20px rgba(0,0,0,.2);
	transition: all .3s;
}
.vrt-gallery-card:hover { transform: translateY(-10px); box-shadow: 0 15px 30px rgba(0,0,0,.3); }

.vrt-gallery-card img {
	width: 100%; height: 100%;
	object-fit: cover;
	transition: transform .5s;
}
.vrt-gallery-card:hover img { transform: scale(1.1); }

.vrt-gallery-card::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom, rgba(0,0,0,.3), rgba(0,0,0,.7));
	z-index: 1;
	transition: background .3s;
}
.vrt-gallery-card:hover::before {
	background: linear-gradient(to bottom, rgba(118,144,201,.6), rgba(43,42,41,.9));
}
.vrt-gallery-card-content {
	position: absolute;
	bottom: 0; left: 0;
	width: 100%;
	padding: 2rem;
	z-index: 2;
}
.vrt-gallery-card-content h3 {
	color: var(--vrt-white);
	font-size: 1.8rem;
	font-weight: bold;
	margin-bottom: .5rem;
	text-transform: uppercase;
	letter-spacing: 1px;
}
.vrt-gallery-card-content p { color: var(--vrt-white); font-size: .95rem; opacity: .9; }

/* ── Gallery Modal ─────────────────────────────────────────── */
.vrt-modal {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,.95);
	z-index: 9999;
	align-items: center;
	justify-content: center;
}
.vrt-modal.active { display: flex; }
.vrt-modal-content {
	position: relative;
	max-width: 1200px;
	width: 90%;
	max-height: 90vh;
}
.vrt-modal-close {
	position: absolute;
	top: -50px; right: 0;
	background: none;
	border: none;
	color: var(--vrt-white);
	font-size: 3rem;
	cursor: pointer;
	z-index: 10;
	transition: color .3s;
}
.vrt-modal-close:hover { color: var(--vrt-secondary); }
.vrt-modal-title {
	text-align: center;
	color: var(--vrt-white);
	font-size: 2rem;
	margin-bottom: 2rem;
	text-transform: uppercase;
	letter-spacing: 2px;
}
.vrt-carousel {
	position: relative;
	width: 100%;
	height: 70vh;
	display: flex;
	align-items: center;
	justify-content: center;
}
.vrt-carousel-img {
	max-width: 100%;
	max-height: 70vh;
	object-fit: contain;
	border-radius: 10px;
}
.vrt-carousel-btn {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	background: rgba(118,144,201,.8);
	border: none;
	color: var(--vrt-white);
	font-size: 2rem;
	padding: 1rem 1.5rem;
	cursor: pointer;
	border-radius: 5px;
	transition: all .3s;
	z-index: 10;
}
.vrt-carousel-btn:hover { background: var(--vrt-secondary); transform: translateY(-50%) scale(1.1); }
.vrt-prev { left: 20px; }
.vrt-next { right: 20px; }
.vrt-carousel-counter {
	position: absolute;
	bottom: 20px; left: 50%;
	transform: translateX(-50%);
	background: rgba(0,0,0,.7);
	color: var(--vrt-white);
	padding: .5rem 1.5rem;
	border-radius: 20px;
	font-size: 1rem;
}

/* ══════════════════════════════════════════════════════════════
   KONTAKT
   ══════════════════════════════════════════════════════════════ */
.vrt-contact {
	background: linear-gradient(135deg, #2b2a29 0%, #1a1918 100%);
	position: relative;
	overflow: hidden;
}
.vrt-contact h2 { color: var(--vrt-white); }
.vrt-contact h2::after { background: var(--vrt-secondary); }
.vrt-contact-subtitle { color: rgba(255,255,255,.8); }

.vrt-contact-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 4rem;
	margin-top: 3rem;
}

/* Contact info card */
.vrt-contact-info {
	background: rgba(255,255,255,.05);
	backdrop-filter: blur(10px);
	padding: 3rem;
	border-radius: 20px;
	border: 1px solid rgba(255,255,255,.1);
}
.vrt-contact-info h3 {
	color: var(--vrt-white);
	font-size: 2rem;
	margin-bottom: 2.5rem;
	position: relative;
	padding-bottom: 1rem;
}
.vrt-contact-info h3::after {
	content: '';
	position: absolute;
	bottom: 0; left: 0;
	width: 60px; height: 3px;
	background: var(--vrt-secondary);
}
.vrt-info-item {
	display: flex;
	flex-direction: column;
	margin-bottom: 2rem;
	padding: 14px;
	background: rgba(255,255,255,.03);
	border-radius: 12px;
	border-left: 3px solid transparent;
	transition: all .3s;
}
.vrt-info-item:hover {
	background: rgba(118,144,201,.08);
	border-left-color: var(--vrt-secondary);
	transform: translateX(5px);
}
.vrt-info-label {
	color: rgba(255,255,255,.6);
	font-size: .85rem;
	text-transform: uppercase;
	letter-spacing: 1.5px;
	margin-bottom: .8rem;
	font-weight: 500;
}
.vrt-info-value {
	color: var(--vrt-white);
	font-size: 1.2rem;
}
.vrt-info-value a {
	color: var(--vrt-white);
	text-decoration: none;
	transition: color .3s;
}
.vrt-info-value a:hover { color: var(--vrt-secondary); }

/* Contact form */
.vrt-contact-form {
	background: rgba(255,255,255,.95);
	padding: 3rem;
	border-radius: 20px;
	box-shadow: 0 20px 60px rgba(0,0,0,.3);
}
.vrt-contact-form h3 { color: var(--vrt-primary); font-size: 1.8rem; margin-bottom: 2rem; }

.vrt-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.vrt-form-group { margin-bottom: 1.5rem; }
.vrt-form-group label {
	display: block;
	margin-bottom: .5rem;
	color: var(--vrt-primary);
	font-weight: 600;
	font-size: .9rem;
	text-transform: uppercase;
	letter-spacing: .5px;
}
.vrt-form-group input,
.vrt-form-group textarea {
	width: 100%;
	padding: 1.2rem;
	border: 2px solid #e0e0e0;
	border-radius: 10px;
	font-family: inherit;
	font-size: 1rem;
	transition: all .3s;
	background: var(--vrt-white);
	color: #333;
}
.vrt-form-group input:focus,
.vrt-form-group textarea:focus {
	outline: none;
	border-color: var(--vrt-secondary);
	box-shadow: 0 0 0 4px rgba(118,144,201,.1);
	transform: translateY(-2px);
}
.vrt-form-group textarea { resize: vertical; min-height: 150px; }

.vrt-submit-btn {
	background: linear-gradient(135deg, var(--vrt-secondary), var(--vrt-accent));
	color: var(--vrt-white);
	padding: 1.2rem 3rem;
	border: none;
	border-radius: 50px;
	font-size: 1.1rem;
	font-weight: bold;
	cursor: pointer;
	transition: all .3s;
	width: 100%;
	text-transform: uppercase;
	letter-spacing: 1px;
	box-shadow: 0 10px 30px rgba(118,144,201,.3);
}
.vrt-submit-btn:hover {
	transform: translateY(-3px);
	box-shadow: 0 15px 40px rgba(118,144,201,.4);
}
.vrt-submit-btn:disabled { opacity: .6; cursor: not-allowed; transform: none; }

.vrt-form-msg {
	padding: 1rem 1.5rem;
	border-radius: 10px;
	margin-bottom: 1.5rem;
	font-weight: 500;
}
.vrt-form-msg.success { background: #d4edda; color: #155724; }
.vrt-form-msg.error   { background: #f8d7da; color: #721c24; }

/* ══════════════════════════════════════════════════════════════
   FOOTER
   ══════════════════════════════════════════════════════════════ */
.vrt-footer {
	background: #1a1918;
	color: var(--vrt-white);
	text-align: center;
	padding: 3rem 2rem 1.5rem;
}
.vrt-footer-social {
	display: flex;
	justify-content: center;
	gap: 1.5rem;
	margin-bottom: 2.5rem;
}
.vrt-footer-social a {
	color: var(--vrt-white);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 50px; height: 50px;
	transition: all .3s;
}
.vrt-footer-social a svg { width: 28px; height: 28px; }
.vrt-footer-social a:hover { color: var(--vrt-secondary); transform: translateY(-5px); }
.vrt-footer-text {
	max-width: 800px;
	margin: 0 auto 2rem;
	line-height: 1.8;
	color: rgba(255,255,255,.7);
	font-size: .95rem;
}
.vrt-footer-logo { margin-bottom: 2rem; }
.vrt-footer-logo img { max-width: 150px; height: auto; }
.vrt-footer-info {
	color: rgba(255,255,255,.5);
	font-size: .9rem;
	margin-top: 2rem;
	padding-top: 2rem;
	border-top: 1px solid rgba(255,255,255,.1);
}
.vrt-footer-info p { margin: .5rem 0; }

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE – tablet (≤ 968px)
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 968px) {
	.vrt-mobile-toggle { display: block; }

	.vrt-nav {
		position: absolute;
		top: 100%; left: 0; right: 0;
		background: var(--vrt-white);
		box-shadow: 0 5px 10px rgba(0,0,0,.1);
		max-height: 0;
		overflow: hidden;
		transition: max-height .3s;
	}
	.vrt-nav.active { max-height: 400px; }
	.vrt-nav ul { flex-direction: column; padding: 1rem; gap: 0; }
	.vrt-nav li { border-bottom: 1px solid #eee; }
	.vrt-nav a { display: block; padding: 1rem; }

	.vrt-hero-content h1 { font-size: 2.5rem; }
	.vrt-hero-content p  { font-size: 1.1rem; }

	.vrt-about-grid {
		grid-template-columns: 1fr;
		gap: 2rem;
	}
	.vrt-about-logo-center { order: -1; }
	.vrt-about-logo-center::before { display: none; }
	.vrt-about-logo-center img { max-width: 150px; }

	.vrt-advantages-grid { grid-template-columns: 1fr; }
	.vrt-adv-center-logo { order: -1; padding: 2rem; }

	.vrt-services-grid { grid-template-columns: 1fr; }

	.vrt-gallery-grid {
		grid-template-columns: 1fr 1fr;
		grid-auto-rows: 220px;
	}
	.vrt-gallery-card:nth-child(n) { grid-column: span 1; grid-row: span 1; }
	.vrt-gallery-card:nth-child(1),
	.vrt-gallery-card:nth-child(4),
	.vrt-gallery-card:nth-child(8) { grid-column: span 2; }

	.vrt-contact-grid { grid-template-columns: 1fr; }
	.vrt-contact-form, .vrt-contact-info { padding: 2rem; }
}

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE – mobile (≤ 576px)
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 576px) {
	.vrt-hero-content h1 { font-size: 1.8rem; }
	.vrt-hero-content p  { font-size: 1rem; }
	.vrt-cta-btn { padding: .8rem 1.5rem; font-size: 1rem; }
	.vrt-section { padding: 3rem 1rem; }
	.vrt-section h2 { font-size: 2rem; }

	.vrt-gallery-grid {
		grid-template-columns: 1fr;
		grid-auto-rows: 250px;
	}
	.vrt-gallery-card:nth-child(n) { grid-column: span 1; }

	.vrt-form-row { grid-template-columns: 1fr; }
	.vrt-carousel-btn { padding: .5rem 1rem; font-size: 1.5rem; }
	.vrt-prev { left: 10px; }
	.vrt-next { right: 10px; }
	.vrt-modal-title { font-size: 1.5rem; margin-bottom: 1rem; }
}