/* ===========================================================
   MAPO — Single proizvod + arhiva
   Industrijski "blueprint" jezik, usklađen s theme.json tokenima.
   =========================================================== */

.mapo-proizvod {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--wp--preset--spacing--lg, 48px);
	max-width: var(--wp--style--global--wide-size, 1280px);
	margin-inline: auto;
	padding-block: var(--wp--preset--spacing--lg, 48px);
}

@media (min-width: 900px) {
	.mapo-proizvod {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
		align-items: start;
		gap: var(--wp--preset--spacing--xl, 80px);
	}
	/* Tekst lijevo (sticky), slike desno — eksplicitno postavljanje da se vrhovi poravnaju. */
	.mapo-proizvod__info  { grid-column: 1; grid-row: 1; position: sticky; top: var(--wp--preset--spacing--md, 24px); }
	.mapo-proizvod__media { grid-column: 2; grid-row: 1; }
}

/* ---------- Info kolona ---------- */
.mapo-proizvod__meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--sm, 16px);
	align-items: center;
	margin: 0 0 var(--wp--preset--spacing--md, 24px);
	font-size: var(--wp--preset--font-size--xs, 13px);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--navy, #1F3A6E);
}
.mapo-proizvod__brend {
	border: 1px solid var(--wp--preset--color--hairline, #0A0F1F1F);
	padding: 2px 10px;
	border-radius: 2px;
	color: var(--wp--preset--color--ink, #0A0F1F);
}

.mapo-proizvod__opis p {
	font-size: var(--wp--preset--font-size--lg, 21px);
	line-height: 1.5;
	max-width: 60ch;
	margin: 0 0 var(--wp--preset--spacing--lg, 48px);
}

.mapo-proizvod__h {
	font-family: var(--wp--preset--font-family--mono, monospace);
	font-size: var(--wp--preset--font-size--xs, 13px) !important;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--navy, #1F3A6E);
	padding-bottom: var(--wp--preset--spacing--xs, 8px);
	border-bottom: 1px solid var(--wp--preset--color--hairline, #0A0F1F1F);
	margin: 0 0 var(--wp--preset--spacing--md, 24px);
}

.mapo-proizvod__prednosti { margin-bottom: var(--wp--preset--spacing--lg, 48px); }
.mapo-proizvod__prednosti ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--wp--preset--spacing--sm, 16px);
}
.mapo-proizvod__prednosti li {
	position: relative;
	padding-left: 28px;
	line-height: 1.45;
}
.mapo-proizvod__prednosti li::before {
	content: "→";
	position: absolute;
	left: 0;
	top: 0;
	color: var(--wp--preset--color--orange, #1499DF);
	font-family: var(--wp--preset--font-family--mono, monospace);
	font-weight: 600;
}

/* ---------- Specifikacije (dl) ---------- */
.mapo-proizvod__specs dl {
	margin: 0;
	display: grid;
	grid-template-columns: 1fr auto;
	column-gap: 24px;
}
.mapo-proizvod__specs dt,
.mapo-proizvod__specs dd {
	margin: 0;
	padding: 11px 0;
	font-size: 0.82rem;
	line-height: 1.45;
	border-bottom: 1px solid var(--wp--preset--color--hairline, #0A0F1F1F);
}
.mapo-proizvod__specs dt { color: var(--wp--preset--color--ink, #0A0F1F); opacity: 0.7; }
.mapo-proizvod__specs dd {
	text-align: right;
	font-family: var(--wp--preset--font-family--mono, monospace);
	font-variant-numeric: tabular-nums;
	font-weight: 600;
}
/* Uski telefoni: naziv iznad vrijednosti (duge vrijednosti čitljivije). */
@media (max-width: 520px) {
	.mapo-proizvod__specs dl { grid-template-columns: 1fr; column-gap: 0; }
	.mapo-proizvod__specs dt { padding: 10px 0 1px; border-bottom: 0; opacity: 0.55; }
	.mapo-proizvod__specs dd { text-align: left; padding: 0 0 10px; }
}

.mapo-proizvod__cta { margin-top: var(--wp--preset--spacing--lg, 48px); }

/* ---------- Media kolona ---------- */
.mapo-proizvod__glavna {
	margin: 0 0 var(--wp--preset--spacing--md, 24px);
	border: 1px solid var(--wp--preset--color--hairline, #0A0F1F1F);
	background: var(--wp--preset--color--paper-shade, #ECEAE2);
}
.mapo-proizvod__glavna img,
.mapo-presjek__img,
.mapo-galerija__grid img {
	display: block;
	width: 100%;
	height: auto;
}
/* Uniformna visina glavne slike bez obzira na orijentaciju (portret/pejzaž):
   svi okviri jednak omjer, slika se centrira bez rezanja. */
.mapo-proizvod__glavna img {
	aspect-ratio: 4 / 3;
	object-fit: contain;
}

/* ---------- Blueprint okvir presjeka ---------- */
.mapo-presjek {
	margin: 0 0 var(--wp--preset--spacing--md, 24px);
	border: 1px solid var(--wp--preset--color--navy, #1F3A6E);
	background:
		linear-gradient(var(--wp--preset--color--ink, #0A0F1F), var(--wp--preset--color--ink, #0A0F1F)) padding-box,
		var(--wp--preset--color--ink, #0A0F1F);
}
.mapo-presjek__label {
	display: flex;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--sm, 16px);
	padding: var(--wp--preset--spacing--xs, 8px) var(--wp--preset--spacing--sm, 16px);
	background: var(--wp--preset--color--navy, #1F3A6E);
	color: var(--wp--preset--color--paper, #F5F4EF);
	font-size: var(--wp--preset--font-size--xs, 13px);
	letter-spacing: 0.1em;
	text-transform: uppercase;
}
.mapo-presjek__name { opacity: 0.75; font-weight: 400; }

.mapo-presjek__frame {
	position: relative;
	display: block;
	padding: var(--wp--preset--spacing--lg, 48px);
	/* Tehnička mreža u pozadini. */
	background-image:
		linear-gradient(rgba(255,255,255,0.06) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255,255,255,0.06) 1px, transparent 1px);
	background-size: 24px 24px;
}
.mapo-presjek__img {
	display: block;
	/* Manji prikaz presjeka — oštrije izgleda jer izvorne slike imaju nižu rezoluciju.
	   max-height ograničava visoke/uske presjeke (npr. roletne) da ne dominiraju. */
	max-width: 68%;
	max-height: 420px;
	width: auto;
	height: auto;
	object-fit: contain;
	margin-inline: auto;
	mix-blend-mode: normal;
}
.mapo-presjek__zoom {
	position: absolute;
	right: var(--wp--preset--spacing--sm, 16px);
	bottom: var(--wp--preset--spacing--sm, 16px);
	color: var(--wp--preset--color--paper, #F5F4EF);
	background: rgba(31,58,110,0.85);
	padding: 4px 10px;
	font-size: 12px;
	border-radius: 2px;
	opacity: 0;
	transition: opacity 0.15s ease;
}
.mapo-presjek__frame:hover .mapo-presjek__zoom,
.mapo-presjek__frame:focus-visible .mapo-presjek__zoom { opacity: 1; }

/* ---------- Galerija ---------- */
.mapo-galerija__label {
	font-size: var(--wp--preset--font-size--xs, 13px);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--navy, #1F3A6E);
	margin-bottom: var(--wp--preset--spacing--xs, 8px);
}
.mapo-galerija__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--wp--preset--spacing--xs, 8px);
}
.mapo-galerija__grid a {
	border: 1px solid var(--wp--preset--color--hairline, #0A0F1F1F);
	background: var(--wp--preset--color--paper-shade, #ECEAE2);
	overflow: hidden;
}
.mapo-galerija__grid img { aspect-ratio: 4/3; object-fit: cover; transition: transform 0.2s ease; }
.mapo-galerija__grid a:hover img { transform: scale(1.05); }

/* ---------- Lightbox (dialog) ---------- */
.mapo-lightbox {
	border: none;
	padding: 0;
	max-width: 92vw;
	max-height: 92vh;
	background: transparent;
}
.mapo-lightbox::backdrop { background: rgba(10,15,31,0.92); }
.mapo-lightbox img { display: block; max-width: 92vw; max-height: 92vh; width: auto; height: auto; }
.mapo-lightbox__close {
	position: fixed;
	top: 16px; right: 16px;
	background: var(--wp--preset--color--orange, #1499DF);
	color: #fff; border: none;
	font-family: var(--wp--preset--font-family--mono, monospace);
	padding: 8px 14px; cursor: pointer; border-radius: 2px;
}

/* ---------- Arhiva / katalog kartice ---------- */
.mapo-katalog__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: var(--wp--preset--spacing--md, 24px);
}
.mapo-katalog__card {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--wp--preset--color--hairline, #0A0F1F1F);
	background: var(--wp--preset--color--paper, #F5F4EF);
	text-decoration: none;
	color: inherit;
	transition: border-color 0.15s ease, transform 0.15s ease;
}
.mapo-katalog__card:hover { border-color: var(--wp--preset--color--navy, #1F3A6E); transform: translateY(-2px); }
.mapo-katalog__thumb { display: block; aspect-ratio: 4/3; background: var(--wp--preset--color--paper-shade, #ECEAE2); overflow: hidden; }
.mapo-katalog__thumb img { width: 100%; height: 100%; object-fit: cover; }

/* Kartice PROIZVODA (unutar kategorije): presjeci — cijeli vidljivi, centrirani, bijela poz. */
.mapo-katalog__grid--presjek .mapo-katalog__thumb { background: #ffffff; }
.mapo-katalog__grid--presjek .mapo-katalog__thumb img { object-fit: contain; padding: 9%; box-sizing: border-box; }
/* Hub kartice KATEGORIJA (ALU/PVC): fotografije — ispunjavaju karticu (cover). */
.mapo-katalog__grid--kategorije .mapo-katalog__thumb img { object-fit: cover; padding: 0; }
.mapo-katalog__body { padding: var(--wp--preset--spacing--sm, 16px); display: flex; flex-direction: column; gap: 4px; flex: 1; }
.mapo-katalog__cat {
	display: block;
	font-family: var(--wp--preset--font-family--mono, monospace);
	font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
	color: var(--wp--preset--color--navy, #1F3A6E);
}
.mapo-katalog__title { display: block; font-family: var(--wp--preset--font-family--display, sans-serif); font-size: var(--wp--preset--font-size--lg, 21px); line-height: 1.15; margin: 0; }
.mapo-katalog__flag { display: block; margin-top: auto; padding-top: var(--wp--preset--spacing--sm, 16px); font-family: var(--wp--preset--font-family--mono, monospace); font-size: 12px; color: var(--wp--preset--color--orange, #1499DF); }