/* ───────────────────────────────────────────────────────────────
   Klimatska galerija — [vm_klima_odstupanja] + [vm_sneg_led]
   Deljeni stilovi (.vm-kg-*): kartice sa manjim podrazumevanim
   prikazom mapa, lightbox fullscreen, freshness bedž, dark mode
   preko tema CSS varijabli (--vm-*). Zaseban fajl (van UCSS bundle-a).
   ─────────────────────────────────────────────────────────────── */

.vm-kg-page {
	max-width: 1040px;
	margin: 0 auto;
	color: var(--vm-text-primary, #0f172a);
}
.vm-kg-page [hidden] { display: none !important; }

/* ─── Hero ─── */
.vm-kg-hero {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: .8rem 1.4rem;
	margin-bottom: 1rem;
	padding: 1.05rem 1.3rem;
	background: linear-gradient(135deg, rgba(37,99,235,.08), rgba(79,70,229,.05) 55%, transparent);
	border: 1px solid var(--vm-border-color, #e2e8f0);
	border-radius: 18px;
}
[data-theme="dark"] .vm-kg-hero {
	background: linear-gradient(135deg, rgba(37,99,235,.16), rgba(79,70,229,.08) 55%, transparent);
	border-color: rgba(148,163,184,.22);
}
.vm-kg-hero__text { flex: 1 1 380px; }
.vm-kg-heading { font-size: 1.5rem; margin: 0 0 .5rem; }
.vm-kg-intro {
	color: var(--vm-text-secondary, #475569);
	line-height: 1.6;
	margin: 0;
}

/* ─── Freshness bedž ─── */
.vm-kg-fresh {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	flex-shrink: 0;
	padding: .45rem .85rem;
	border-radius: 999px;
	font-size: .78rem;
	font-weight: 700;
	background: var(--vm-card-bg, #fff);
	border: 1px solid var(--vm-border-color, #e2e8f0);
	color: var(--vm-text-secondary, #475569);
	box-shadow: 0 1px 3px rgba(15,23,42,.06);
	font-variant-numeric: tabular-nums;
}
[data-theme="dark"] .vm-kg-fresh { background: rgba(30,41,59,.75); border-color: rgba(148,163,184,.22); color: #cbd5e1; }
.vm-kg-fresh__dot { width: 9px; height: 9px; border-radius: 50%; background: #94a3b8; box-shadow: 0 0 0 3px rgba(148,163,184,.18); }
.vm-kg-fresh--fresh  .vm-kg-fresh__dot { background: #22c55e; box-shadow: 0 0 0 3px rgba(34,197,94,.18); }
.vm-kg-fresh--recent .vm-kg-fresh__dot { background: #eab308; box-shadow: 0 0 0 3px rgba(234,179,8,.18); }
.vm-kg-fresh--stale  .vm-kg-fresh__dot { background: #ef4444; box-shadow: 0 0 0 3px rgba(239,68,68,.18); }

/* ─── Toggle perioda (7 / 30 dana) ─── */
.vm-kg-controlbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .6rem .9rem;
	margin: 0 0 .9rem;
}
.vm-kg-tab {
	appearance: none;
	border: 1px solid var(--vm-border-color, #cbd5e1);
	background: var(--vm-bg-secondary, #f1f5f9);
	color: var(--vm-text-secondary, #475569);
	font-size: .9rem;
	font-weight: 600;
	padding: .5rem 1rem;
	border-radius: 999px !important;
	cursor: pointer;
	transition: background .15s, color .15s, border-color .15s;
}
.vm-kg-tab:hover { border-color: #2563eb; color: #2563eb; }
.vm-kg-tab--active {
	background: linear-gradient(135deg, #2563eb 0%, #4f46e5 100%) !important;
	border-color: transparent !important;
	color: #fff !important;
	-webkit-text-fill-color: #fff;
}
.vm-kg-tab:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; }

/* ─── Sekcije (sneg i led) ─── */
.vm-kg-section { margin: 0 0 1.4rem; }
.vm-kg-section__title {
	font-size: 1.18rem;
	margin: 0 0 .7rem;
	padding-left: .75rem;
	border-left: 3px solid #2563eb;
}
.vm-kg-section__desc {
	color: var(--vm-text-secondary, #475569);
	font-size: .92rem;
	line-height: 1.55;
	margin: -.3rem 0 .8rem;
}

/* ─── Mreža kartica ─── */
.vm-kg-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr));
	gap: 1rem;
	margin-bottom: .6rem;
}
.vm-kg-grid--single { grid-template-columns: minmax(0, 680px); justify-content: center; }
.vm-kg-grid--wide   { grid-template-columns: minmax(0, 1fr); }

/* ─── Kartica ─── */
.vm-kg-card {
	margin: 0;
	background: var(--vm-card-bg, #fff);
	border: 1px solid var(--vm-border-color, #e2e8f0);
	border-radius: 16px;
	padding: .8rem .8rem .7rem;
	box-shadow: 0 1px 2px rgba(15,23,42,.05), 0 8px 22px rgba(15,23,42,.05);
}
[data-theme="dark"] .vm-kg-card { background: rgba(30,41,59,.6); border-color: rgba(148,163,184,.22); }

.vm-kg-card__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: .2rem .8rem;
	margin: 0 .15rem .55rem;
}
.vm-kg-card__title { font-weight: 700; font-size: 1rem; color: var(--vm-text-primary, #0f172a); }
.vm-kg-card__period {
	font-size: .78rem;
	font-weight: 600;
	color: var(--vm-text-muted, #64748b);
	font-variant-numeric: tabular-nums;
}

/* Klikabilna slika — manji podrazumevani prikaz, lightbox na dodir */
.vm-kg-imgbtn {
	appearance: none;
	display: block;
	position: relative;
	width: 100%;
	padding: 0;
	border: 1px solid var(--vm-border-color, #e2e8f0);
	border-radius: 12px;
	background: var(--vm-bg-secondary, #f1f5f9);
	overflow: hidden;
	cursor: zoom-in;
	aspect-ratio: 4 / 3.5;   /* JS postavlja tačan odnos iz manifesta */
}
[data-theme="dark"] .vm-kg-imgbtn { background: rgba(15,23,42,.55); border-color: rgba(148,163,184,.2); }
.vm-kg-imgbtn:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; }

.vm-kg-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	opacity: 0;
	transition: opacity .25s ease;
}
.vm-kg-img--on { opacity: 1; }

.vm-kg-skel {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(100deg, rgba(148,163,184,.10) 38%, rgba(148,163,184,.26) 50%, rgba(148,163,184,.10) 62%);
	background-size: 220% 100%;
	animation: vm-kg-shimmer 1.5s ease-in-out infinite;
}
@keyframes vm-kg-shimmer { from { background-position: 130% 0; } to { background-position: -90% 0; } }
@media (prefers-reduced-motion: reduce) { .vm-kg-skel { animation: none; } }
.vm-kg-card--loaded .vm-kg-skel { display: none; }

.vm-kg-zoom {
	position: absolute;
	right: 10px;
	bottom: 10px;
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	padding: .3rem .6rem;
	border-radius: 999px;
	font-size: .72rem;
	font-weight: 700;
	color: #fff;
	background: rgba(15,23,42,.62);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
	pointer-events: none;
}
.vm-kg-zoom svg { width: 13px; height: 13px; }

/* ─── Atribucija + SEO ─── */
.vm-kg-attrib {
	margin: .3rem 0 1.25rem;
	font-size: .76rem;
	color: var(--vm-text-muted, #64748b);
	text-align: right;
}
.vm-kg-seo {
	background: var(--vm-bg-secondary, #f1f5f9);
	border-radius: 16px;
	padding: 1.1rem 1.3rem;
	margin-top: .4rem;
}
[data-theme="dark"] .vm-kg-seo { background: rgba(30,41,59,.5); }
.vm-kg-seo__title { font-size: 1.15rem; margin: 0 0 .6rem; }
.vm-kg-seo__list {
	margin: 0 0 .8rem;
	padding-left: 1.1rem;
	line-height: 1.6;
	color: var(--vm-text-secondary, #475569);
}
.vm-kg-seo__list li { margin-bottom: .4rem; }
.vm-kg-seo__note {
	font-size: .82rem;
	color: var(--vm-text-muted, #64748b);
	margin: 0;
	line-height: 1.55;
}

/* ─── Empty / greška ─── */
.vm-kg-empty {
	margin: .8rem 0 1.2rem;
	padding: 1.1rem 1.2rem;
	text-align: center;
	font-size: .92rem;
	font-weight: 600;
	color: var(--vm-text-muted, #64748b);
	background: var(--vm-bg-secondary, #f1f5f9);
	border: 1.5px dashed var(--vm-border-color, #cbd5e1);
	border-radius: 12px;
}
[data-theme="dark"] .vm-kg-empty { background: rgba(30,41,59,.5); border-color: rgba(148,163,184,.3); color: #94a3b8; }

/* ─── Lightbox ─── */
.vm-kg-lb {
	position: fixed;
	inset: 0;
	z-index: 100050;   /* iznad headera (10000) i bottom nav-a */
	display: flex;
	flex-direction: column;
	background: rgba(8,12,22,.92);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	opacity: 0;
	transition: opacity .18s ease;
}
/* KRITIČNO: display:flex iznad nadjačava UA [hidden] pravilo — bez ovoga
   zatvoren lightbox ostaje nevidljiv PREKO cele stranice i blokira klikove */
.vm-kg-lb[hidden] { display: none !important; pointer-events: none; }
.vm-kg-lb--open { opacity: 1; }

.vm-kg-lb__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .8rem;
	padding: .65rem .9rem;
	flex-shrink: 0;
}
.vm-kg-lb__title {
	color: #e2e8f0;
	font-size: .88rem;
	font-weight: 600;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.vm-kg-lb__actions { display: flex; align-items: center; gap: .5rem; flex-shrink: 0; }
.vm-kg-lb__close {
	appearance: none;
	border: none;
	background: rgba(148,163,184,.18);
	color: #fff;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	font-size: 1.15rem;
	line-height: 1;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.vm-kg-lb__close:hover { background: rgba(148,163,184,.35); }

.vm-kg-lb__scroll {
	flex: 1 1 auto;
	overflow: auto;
	display: flex;
	align-items: center;
	justify-content: center;
	-webkit-overflow-scrolling: touch;
	touch-action: pan-x pan-y pinch-zoom;
}
.vm-kg-lb__img {
	max-width: min(96vw, 1500px);
	max-height: calc(100vh - 120px);
	max-height: calc(100dvh - 120px);
	width: auto;
	height: auto;
	display: block;
	margin: auto;
	border-radius: 6px;
	cursor: zoom-in;
	background: #fff;
}
[data-theme="dark"] .vm-kg-lb__img { background: #0f172a; }
.vm-kg-lb--zoom .vm-kg-lb__scroll { align-items: flex-start; justify-content: flex-start; }
.vm-kg-lb--zoom .vm-kg-lb__img {
	max-width: none;
	max-height: none;
	cursor: zoom-out;
}
.vm-kg-lb__hint {
	flex-shrink: 0;
	text-align: center;
	color: #94a3b8;
	font-size: .74rem;
	padding: .5rem .8rem .75rem;
}
html.vm-kg-noscroll, html.vm-kg-noscroll body { overflow: hidden !important; }

/* ─── Mobilni ─── */
@media (max-width: 600px) {
	.vm-kg-hero { padding: .9rem 1rem; border-radius: 16px; }
	.vm-kg-heading { font-size: 1.28rem; }
	.vm-kg-grid { gap: .8rem; }
	.vm-kg-card { padding: .6rem .6rem .55rem; border-radius: 14px; }
	.vm-kg-tab { font-size: .84rem; padding: .45rem .85rem; }
	.vm-kg-lb__title { font-size: .78rem; }
	.vm-kg-lb__img { max-height: calc(100dvh - 104px); }
}