/* =========================================================
   Ricerca filtri cappa — landing template
   Register: product. Coerente con archive-product + page-novita.
   Tokens & layout già caricati da tokens.css / base.css / layout.css.
   ========================================================= */

.mz-ricerca {
	background: var(--paper);
	color: var(--ink-1);
	padding-bottom: var(--s-9);
}

/* ---- Head -------------------------------------------------- */
.mz-ricerca-head {
	padding: var(--s-7) 0 var(--s-6);
	border-bottom: 1px solid var(--border);
	background: var(--paper);
}
.mz-ricerca-head .mz-breadcrumb { margin-bottom: var(--s-3); }
.mz-ricerca-head .mz-eyebrow { display: block; margin-bottom: var(--s-3); }
.mz-ricerca-head__title {
	font-family: var(--font-sans, Inter, system-ui, sans-serif);
	font-weight: 800;
	font-size: var(--t-2xl);
	line-height: 1.06;
	letter-spacing: -0.02em;
	margin: 0 0 var(--s-4);
	max-width: 22ch;
}
.mz-ricerca-head__title em {
	color: var(--brand);
	font-style: normal;
}
.mz-ricerca-head__lede {
	font-size: var(--t-base);
	line-height: 1.55;
	color: var(--ink-2);
	max-width: 56ch;
	margin: 0;
}

/* ---- Misura: diagramma + istruzioni ---------------------- */
.mz-ricerca-misura {
	padding: var(--s-8) 0 var(--s-4);
}
.mz-ricerca-misura__head { margin-bottom: var(--s-6); }
.mz-ricerca-misura__head .mz-eyebrow { display: block; margin-bottom: var(--s-3); }

.mz-ricerca-misura__grid {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: var(--s-7);
	align-items: start;
}
@media (max-width: 860px) {
	.mz-ricerca-misura__grid {
		grid-template-columns: 1fr;
		gap: var(--s-7);
	}
}

.mz-ricerca-diagram {
	margin: 0;
	color: var(--ink-1);
	background: var(--paper-2);
	border: 1px solid var(--border);
	border-radius: var(--r-2);
	padding: var(--s-6);
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--s-4);
}
.mz-ricerca-diagram__svg {
	width: 100%;
	height: auto;
	display: block;
}
.mz-ricerca-diagram__inset {
	width: 70%;
	max-width: 240px;
	height: auto;
	justify-self: end;
	display: block;
	color: var(--ink-2);
}
.mz-ricerca-diagram__label {
	font-family: var(--font-mono, 'IBM Plex Mono', ui-monospace, monospace);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.12em;
	fill: var(--ink-1);
}
.mz-ricerca-diagram__inset .mz-ricerca-diagram__label {
	fill: var(--ink-2);
}

.mz-ricerca-misura__steps {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--s-4);
}
.mz-ricerca-misura__steps li {
	display: grid;
	grid-template-columns: 56px 1fr;
	gap: var(--s-4);
	padding-bottom: var(--s-4);
	border-bottom: 1px solid var(--border);
}
.mz-ricerca-misura__steps li:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}
.mz-ricerca-misura__num {
	font-family: var(--font-mono, 'IBM Plex Mono', ui-monospace, monospace);
	font-size: 22px;
	font-weight: 600;
	font-feature-settings: 'tnum', 'zero';
	color: var(--ink-4);
	line-height: 1;
	padding-top: var(--s-1);
}
.mz-ricerca-misura__step-title {
	font-size: var(--t-md);
	font-weight: 700;
	line-height: 1.3;
	margin: 0 0 var(--s-2);
	color: var(--ink-1);
}
.mz-ricerca-misura__steps p {
	font-size: var(--t-sm);
	line-height: 1.55;
	color: var(--ink-2);
	margin: 0;
	max-width: 60ch;
}
.mz-ricerca-misura__help .mz-ricerca-misura__num { color: var(--brand); }
.mz-ricerca-misura__help a {
	color: var(--brand);
	font-weight: 600;
	font-family: var(--font-mono, 'IBM Plex Mono', ui-monospace, monospace);
	font-feature-settings: 'tnum';
	letter-spacing: 0;
	text-decoration: none;
	border-bottom: 1px solid currentColor;
}
.mz-ricerca-misura__help a:hover { color: var(--brand-ink); }

/* ---- Filtri panel ---------------------------------------- */
.mz-ricerca-filtri {
	padding: var(--s-7) 0 var(--s-2);
}
.mz-ricerca-filtri__panel {
	background: var(--paper-2);
	border: 1px solid var(--border);
	border-radius: var(--r-2);
	padding: var(--s-6);
}
.mz-ricerca-filtri__head {
	display: flex;
	flex-direction: column;
	gap: var(--s-2);
	margin-bottom: var(--s-5);
	padding-bottom: var(--s-5);
	border-bottom: 1px solid var(--border);
}
.mz-ricerca-filtri__form {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
	gap: var(--s-3);
	align-items: end;
}
@media (max-width: 980px) {
	.mz-ricerca-filtri__form {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.mz-ricerca-filtri__actions { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
	.mz-ricerca-filtri__form { grid-template-columns: 1fr; }
}

.mz-ricerca-field {
	display: flex;
	flex-direction: column;
	gap: var(--s-2);
	position: relative;
}
.mz-ricerca-field__label {
	font-family: var(--font-mono, 'IBM Plex Mono', ui-monospace, monospace);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.10em;
	text-transform: uppercase;
	color: var(--ink-2);
}
.mz-ricerca-field__select {
	appearance: none;
	-webkit-appearance: none;
	font-family: var(--font-mono, 'IBM Plex Mono', ui-monospace, monospace);
	font-size: 14px;
	font-weight: 500;
	font-feature-settings: 'tnum', 'zero';
	letter-spacing: 0;
	color: var(--ink-1);
	background-color: var(--paper-3);
	border: 1px solid var(--border);
	border-radius: var(--r-2);
	height: 56px;
	padding: 0 38px 0 16px;
	transition: border-color var(--d-1) var(--ease);
	cursor: pointer;
}
.mz-ricerca-field::after {
	content: "";
	position: absolute;
	right: 14px;
	bottom: 21px;
	width: 14px;
	height: 14px;
	background-color: var(--ink-2);
	-webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='2'><path d='M4 6l4 4 4-4'/></svg>") no-repeat center / contain;
	        mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='2'><path d='M4 6l4 4 4-4'/></svg>") no-repeat center / contain;
	pointer-events: none;
}
.mz-ricerca-field__select:hover { border-color: var(--ink-1); }
.mz-ricerca-field__select:focus-visible {
	outline: 2px solid var(--brand);
	outline-offset: 2px;
	border-color: var(--ink-1);
}

.mz-ricerca-filtri__actions {
	display: flex;
	gap: var(--s-3);
	align-items: center;
	height: 56px;
}
.mz-ricerca-filtri__submit {
	height: 56px;
	padding: 0 var(--s-6);
	font-size: var(--t-base);
	white-space: nowrap;
}

/* ---- Risultati ------------------------------------------- */
.mz-ricerca-risultati {
	padding: var(--s-7) 0 0;
}
.mz-ricerca-risultati__bar {
	margin-bottom: var(--s-4);
	border-bottom: 1px solid var(--border);
}
.mz-ricerca-risultati__bar .mz-toolbar__count {
	font-size: var(--t-base);
	font-weight: 600;
	color: var(--ink-1);
	margin: 0;
}

.mz-ricerca-empty {
	padding: var(--s-8) var(--s-6);
	text-align: center;
	border: 1px solid var(--border);
	border-radius: var(--r-2);
	background: var(--paper-2);
}
.mz-ricerca-empty .mz-eyebrow {
	display: block;
	margin-bottom: var(--s-2);
	color: var(--ink-3);
}
.mz-ricerca-empty h3 {
	max-width: 28ch;
	margin: 0 auto var(--s-3);
}
.mz-ricerca-empty p {
	max-width: 56ch;
	margin: 0 auto var(--s-5);
	color: var(--ink-2);
	font-size: var(--t-base);
	line-height: 1.55;
}

/* ---- Reduced motion -------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.mz-ricerca-field__select { transition: none; }
}

/* =========================================================
   Ricerche semplificate — tab + hub extensions
   Estende il modulo ricerca-landing con la navigazione
   a schede e lo stato hub (nessuna sezione selezionata).
   ========================================================= */

/* ---- Tab navigation ----------------------------------------- */
.mz-rs-tabs {
	background: var(--paper-2);
	border-bottom: 1px solid var(--border);
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}
.mz-rs-tabs::-webkit-scrollbar { display: none; }

.mz-rs-tabs__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 0;
}

.mz-rs-tab {
	display: inline-flex;
	align-items: center;
	gap: var(--s-2);
	padding: var(--s-3) var(--s-5);
	font-family: var(--font-mono, 'IBM Plex Mono', ui-monospace, monospace);
	font-size: var(--t-sm);
	font-weight: 500;
	letter-spacing: 0.04em;
	color: var(--ink-3);
	text-decoration: none;
	border-bottom: 2px solid transparent;
	white-space: nowrap;
	transition: color var(--d-1) var(--ease), border-color var(--d-1) var(--ease);
}
.mz-rs-tab:hover {
	color: var(--ink-1);
	border-bottom-color: var(--border);
}
.mz-rs-tab.is-active {
	color: var(--ink-1);
	font-weight: 700;
	border-bottom-color: var(--brand);
}

/* ---- BETA badge (riusato anche nelle hub card) --------------- */
.mz-rs-tab__beta {
	display: inline-flex;
	align-items: center;
	padding: 2px 6px;
	font-family: var(--font-mono, 'IBM Plex Mono', ui-monospace, monospace);
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.10em;
	text-transform: uppercase;
	color: var(--ink-2);
	background: var(--paper-3);
	border: 1px solid var(--border);
	border-radius: var(--r-1);
	line-height: 1;
	vertical-align: middle;
}
.mz-rs-tab.is-active .mz-rs-tab__beta {
	color: var(--brand);
	border-color: color-mix(in oklch, var(--brand) 30%, transparent);
	background: color-mix(in oklch, var(--brand) 8%, transparent);
}

/* ---- Hub — stato senza sezione selezionata ------------------ */
.mz-rs-hub {
	padding: var(--s-8) 0 var(--s-9);
}
.mz-rs-hub__eyebrow {
	display: block;
	margin-bottom: var(--s-7);
}
.mz-rs-hub__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--s-4);
}
@media (max-width: 860px) {
	.mz-rs-hub__grid { grid-template-columns: 1fr; }
}

.mz-rs-hub__card {
	display: flex;
	flex-direction: column;
	gap: 0;
	background: var(--paper-2);
	border: 1px solid var(--border);
	border-radius: var(--r-2);
	padding: var(--s-7) var(--s-6) var(--s-6);
	text-decoration: none;
	color: var(--ink-1);
	transition: border-color var(--d-1) var(--ease), background var(--d-1) var(--ease);
}
.mz-rs-hub__card:hover {
	border-color: var(--ink-1);
	background: var(--paper-3);
}
.mz-rs-hub__card--beta:hover {
	border-color: color-mix(in oklch, var(--brand) 45%, var(--border));
}

.mz-rs-hub__icon {
	width: 48px;
	height: 48px;
	color: var(--ink-2);
	margin-bottom: var(--s-5);
}
.mz-rs-hub__card:hover .mz-rs-hub__icon { color: var(--ink-1); }
.mz-rs-hub__icon svg {
	width: 100%;
	height: 100%;
	display: block;
}

.mz-rs-hub__body { flex: 1; display: flex; flex-direction: column; gap: var(--s-2); }

.mz-rs-hub__card-title {
	display: flex;
	align-items: center;
	gap: var(--s-2);
	font-size: var(--t-md);
	font-weight: 700;
	line-height: 1.2;
	color: var(--ink-1);
	margin: 0;
}

.mz-rs-hub__card-desc {
	font-size: var(--t-sm);
	line-height: 1.55;
	color: var(--ink-2);
	margin: 0;
	flex: 1;
}

.mz-rs-hub__cta {
	display: inline-block;
	margin-top: var(--s-4);
	font-family: var(--font-mono, 'IBM Plex Mono', ui-monospace, monospace);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.06em;
	color: var(--brand);
	text-transform: uppercase;
}
.mz-rs-hub__cta--disabled {
	color: var(--ink-4);
	font-weight: 400;
	text-transform: none;
}
.mz-rs-hub__card.is-disabled {
	opacity: 0.5;
	cursor: default;
}
.mz-rs-tab.is-disabled {
	opacity: 0.45;
	cursor: default;
}

@media (prefers-reduced-motion: reduce) {
	.mz-rs-tab,
	.mz-rs-hub__card { transition: none; }
}