/* =============================================================================
   _category-grid.css — MaskeZaMob Grid Podkategorija

   Scope:     .mzm-catgrid-wrap
   Zavisnost: _design-tokens.css (mora biti enqueue-ovan pre)
   Enqueue:   mzm_enqueue_category_grid_styles() — samo na category pages
              sa podkategorijama
   ============================================================================= */

/* ── Wrapper ──────────────────────────────────────────────────────────────── */

/* Kutiju sadržaja NOSI RODITELJ, ne ovaj omotač (F-044, 10.08.2026.).
 *
 * Ovde je do 10.08. stajalo `max-width: 1200px; padding: 0 16px 64px` —
 * peta širina na sajtu, i na 1440 je gurala mrežu modela 49.75px udesno od
 * breadcrumbs-a.
 *
 * Prva ispravka (F-043) je omotaču dala `.row` kutiju, 1282.5px / 7.5px.
 * Poklopilo se sa breadcrumbs-ima, ali su OBA bila 38.75px izvan linije
 * logotipa i menija — vidi `_design-tokens.css` → „KOJA JE LINIJA PRAVA".
 *
 * Sada `.shop-container` iz `_layout.css` ima `max-width` i `margin: auto`,
 * dakle ponaša se kao `.container`. Ovaj omotač je blok element unutar njega
 * i tu kutiju dobija bez ijednog pravila. Svako `max-width` ili bočni padding
 * ovde bi ga ponovo izmestio — zato ih nema.
 *
 * `padding-bottom` nije deo kutije nego razmak do footera i ostaje.
 *
 * ⚠️ Ne vraćati `max-width` ovamo. Ako grid ikad treba UŽI od ostatka strane,
 * to je dizajnerska odluka i ide uz obrazloženje, a ne kao zatečena vrednost. */
.mzm-catgrid-wrap {
	padding: 0 0 64px;
}


/* ── Header: naslov + search ─────────────────────────────────────────────── */

.mzm-catgrid-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 28px;
	flex-wrap: wrap;
}

.mzm-catgrid-title {
	font-family: var(--mzm-font-family, 'Plus Jakarta Sans', sans-serif);
	font-size: 1.75rem;
	font-weight: 700;
	color: var(--mzm-navy, #0e1629);
	margin: 0;
	line-height: 1.2;
}

.mzm-catgrid-search-wrap {
	position: relative;
	flex-shrink: 0;
}

.mzm-catgrid-search {
	font-family: var(--mzm-font-family, 'Plus Jakarta Sans', sans-serif);
	font-size: 0.9rem;
	color: var(--mzm-navy, #0e1629);
	background: var(--mzm-surface, #f8f9fb);
	border: 1px solid var(--mzm-border, #e5e7eb);
	border-radius: var(--mzm-radius-md, 8px);
	padding: 10px 40px 10px 14px;
	width: 240px;
	outline: none;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
	-webkit-appearance: none;
	appearance: none;
}

.mzm-catgrid-search:focus {
	border-color: var(--mzm-accent, #3c83f5);
	box-shadow: 0 0 0 3px rgba(60, 131, 245, 0.14);
}

.mzm-catgrid-search::placeholder {
	color: #9ca3af;
}

/* Reset browser default "x" clear button na type=search */
.mzm-catgrid-search::-webkit-search-cancel-button {
	-webkit-appearance: none;
}

.mzm-catgrid-search-icon {
	position: absolute;
	right: 12px;
	top: 50%;
	transform: translateY(-50%);
	color: #9ca3af;
	pointer-events: none;
	display: flex;
	align-items: center;
	line-height: 0;
}


/* ── Grid ────────────────────────────────────────────────────────────────── */

.mzm-catgrid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 16px;
	list-style: none;
	margin: 0 0 40px;
	padding: 0;
}


/* ── Card item ───────────────────────────────────────────────────────────── */

.mzm-catgrid__item[hidden] {
	display: none;
}

.mzm-catgrid__link {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-decoration: none;
	gap: 10px;
	transition: transform 0.18s ease;
}

.mzm-catgrid__link:hover,
.mzm-catgrid__link:focus-visible {
	transform: translateY(-3px);
	outline: none;
}

.mzm-catgrid__link:focus-visible .mzm-catgrid__img-wrap {
	box-shadow: 0 0 0 3px var(--mzm-accent, #3c83f5);
}

.mzm-catgrid__link:hover .mzm-catgrid__img-wrap {
	box-shadow: 0 8px 24px rgba(14, 22, 41, 0.11);
	border-color: var(--mzm-accent, #3c83f5);
}


/* ── Image wrap ──────────────────────────────────────────────────────────── */

.mzm-catgrid__img-wrap {
	position: relative;
	width: 100%;
	aspect-ratio: 1 / 1;
	border-radius: var(--mzm-radius-md, 8px);
	overflow: hidden;
	background: var(--mzm-surface, #f8f9fb);
	border: 1px solid var(--mzm-border, #e5e7eb);
	transition: box-shadow 0.18s ease, border-color 0.18s ease;
}

.mzm-catgrid__img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	padding: 8px;
	display: block;
	transition: transform 0.18s ease;
}

.mzm-catgrid__link:hover .mzm-catgrid__img {
	transform: scale(1.03);
}

/* Placeholder kada kategorija nema sliku */
.mzm-catgrid__img--placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	color: #c8cdd8;
	padding: 20%;
}

.mzm-catgrid__img--placeholder svg {
	width: 100%;
	height: 100%;
}


/* ── NOVO badge ──────────────────────────────────────────────────────────── */

.mzm-catgrid__badge {
	position: absolute;
	top: 8px;
	left: 8px;
	z-index: 1;
	background: var(--mzm-accent, #3c83f5);
	color: #fff;
	font-family: var(--mzm-font-family, 'Plus Jakarta Sans', sans-serif);
	font-size: 0.625rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 3px 7px;
	border-radius: 4px;
	line-height: 1.4;
	user-select: none;
}


/* ── Category name ───────────────────────────────────────────────────────── */

.mzm-catgrid__name {
	font-family: var(--mzm-font-family, 'Plus Jakarta Sans', sans-serif);
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--mzm-navy, #0e1629);
	text-align: center;
	line-height: 1.35;
	transition: color 0.15s ease;
}

.mzm-catgrid__link:hover .mzm-catgrid__name {
	color: var(--mzm-accent, #3c83f5);
}


/* ── No results (JS toggle) ──────────────────────────────────────────────── */

.mzm-catgrid-no-results {
	text-align: center;
	color: #6b7280;
	font-family: var(--mzm-font-family, 'Plus Jakarta Sans', sans-serif);
	font-size: 0.95rem;
	padding: 40px 0 0;
	margin: 0 0 40px;
}

.mzm-catgrid-no-results[hidden] {
	display: none;
}


/* ── Trust bar ───────────────────────────────────────────────────────────── */

.mzm-trust-bar {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
	background: var(--mzm-surface, #f8f9fb);
	border: 1px solid var(--mzm-border, #e5e7eb);
	border-radius: var(--mzm-radius-md, 8px);
	padding: 24px;
	margin-bottom: 48px;
}

.mzm-trust-bar__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	text-align: center;
}

.mzm-trust-bar__icon {
	width: 32px;
	height: 32px;
	color: var(--mzm-accent, #3c83f5);
	flex-shrink: 0;
}

.mzm-trust-bar__item span {
	font-family: var(--mzm-font-family, 'Plus Jakarta Sans', sans-serif);
	font-size: 0.82rem;
	font-weight: 500;
	color: var(--mzm-navy, #0e1629);
	line-height: 1.3;
}


/* ── SEO tekst ───────────────────────────────────────────────────────────── */

.mzm-catgrid-seo {
	font-family: var(--mzm-font-family, 'Plus Jakarta Sans', sans-serif);
	font-size: 0.9rem;
	color: #4b5563;
	line-height: 1.75;
	margin-bottom: 48px;
	max-width: 800px;
}

.mzm-catgrid-seo p {
	margin: 0 0 1em;
}

.mzm-catgrid-seo p:last-child {
	margin-bottom: 0;
}


/* ── FAQ accordion ───────────────────────────────────────────────────────── */

.mzm-faq {
	margin-bottom: 48px;
}

.mzm-faq__title {
	font-family: var(--mzm-font-family, 'Plus Jakarta Sans', sans-serif);
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--mzm-navy, #0e1629);
	margin: 0 0 16px;
}

.mzm-faq__item {
	border: 1px solid var(--mzm-border, #e5e7eb);
	border-radius: var(--mzm-radius-md, 8px);
	overflow: hidden;
	margin-bottom: 8px;
}

.mzm-faq__question {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 15px 20px;
	background: var(--mzm-surface, #f8f9fb);
	border: none;
	cursor: pointer;
	font-family: var(--mzm-font-family, 'Plus Jakarta Sans', sans-serif);
	font-size: 0.92rem;
	font-weight: 600;
	color: var(--mzm-navy, #0e1629);
	text-align: left;
	transition: background 0.15s ease;
}

.mzm-faq__question:hover,
.mzm-faq__question[aria-expanded="true"] {
	background: #eef3fd;
}

.mzm-faq__question:focus-visible {
	outline: 2px solid var(--mzm-accent, #3c83f5);
	outline-offset: -2px;
}

.mzm-faq__chevron {
	width: 20px;
	height: 20px;
	flex-shrink: 0;
	color: var(--mzm-accent, #3c83f5);
	transition: transform 0.2s ease;
}

.mzm-faq__question[aria-expanded="true"] .mzm-faq__chevron {
	transform: rotate(180deg);
}

.mzm-faq__answer {
	padding: 16px 20px;
	font-family: var(--mzm-font-family, 'Plus Jakarta Sans', sans-serif);
	font-size: 0.9rem;
	color: #4b5563;
	line-height: 1.7;
	background: #fff;
	border-top: 1px solid var(--mzm-border, #e5e7eb);
}

.mzm-faq__answer p {
	margin: 0;
}

.mzm-faq__answer[hidden] {
	display: none;
}


/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════════════════ */

/* Tablet landscape: 4 kolone */
@media (max-width: 1100px) {
	.mzm-catgrid {
		grid-template-columns: repeat(4, 1fr);
	}
}

/* Tablet portrait: 3 kolone */
@media (max-width: 768px) {
	.mzm-catgrid {
		grid-template-columns: repeat(3, 1fr);
		gap: 12px;
	}

	.mzm-catgrid-header {
		flex-direction: column;
		align-items: flex-start;
		gap: 12px;
	}

	.mzm-catgrid-search,
	.mzm-catgrid-search-wrap {
		width: 100%;
	}

	.mzm-catgrid-title {
		font-size: 1.4rem;
	}

	.mzm-trust-bar {
		grid-template-columns: repeat(2, 1fr);
		gap: 16px;
		padding: 16px;
	}
}

/* Mobile: 2 kolone */
@media (max-width: 480px) {
	.mzm-catgrid {
		grid-template-columns: repeat(2, 1fr);
		gap: 10px;
	}

	.mzm-catgrid__name {
		font-size: 0.78rem;
	}

	/* Ovde je do 10.08.2026. stajalo `padding-left/right: 12px`, čime je grid
	   na telefonu imao TREĆU vrednost (16 desktop / 12 mobilni / 7.5 listing).
	   Obrisano — bočni prostor na svim širinama nosi `.shop-container`. Ako se
	   posle provere na 360/390 pokaže da treba više, menja se
	   `--mzm-sadrzaj-pad`, čime se pomeraju SVE kutije zajedno. (F-044) */

	.mzm-faq__question {
		font-size: 0.88rem;
		padding: 13px 14px;
	}

	.mzm-faq__answer {
		padding: 13px 14px;
	}
}

/* ── Quick Tags ──────────────────────────────────────────────────────────── */
.mzm-quick-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 20px;
}

.mzm-quick-tags__tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 16px;
    border-radius: 20px;
    border: 1.5px solid var(--mzm-accent, #3C83F5);
    color: var(--mzm-accent, #3C83F5);
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.15s, color 0.15s;
}

.mzm-quick-tags__tag:hover {
    background: var(--mzm-accent, #3C83F5);
    color: #fff;
}