/* ============================================================
   MULTIVEGETAL — Category Accordion
   Acordeão horizontal de imagens: expande no hover/foco.
   Tokens herdados do Design System (com fallback embutido).
   ============================================================ */

.mv-cat-acc {
	--mv-cat-h:        460px;   /* altura (sobrescrita pelo Elementor)   */
	--mv-cat-grow:     4;       /* fator de expansão do painel ativo     */
	--mv-cat-h-mobile: 150px;   /* altura de cada card no mobile         */

	--mv-c-accent:     var(--color-accent, #D5B68D);
	--mv-c-text:       var(--color-text, #1A1A1A);
	--mv-font:         var(--font-primary, 'Poppins', sans-serif);
	--mv-ease:         cubic-bezier(0.4, 0, 0.2, 1);

	font-family: var(--mv-font);
	width: 100%;
}

/* ---------- TRACK ---------- */
.mv-cat-acc__track {
	display: flex;
	gap: 10px;
	height: var(--mv-cat-h);
	width: 100%;
}

/* ---------- PAINEL ---------- */
.mv-cat-acc__panel {
	position: relative;
	flex: 1 1 0%;        /* base: todos iguais (grow 1)         */
	min-width: 0;
	overflow: hidden;
	border-radius: 18px;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	text-decoration: none;
	cursor: pointer;
	transition: flex-grow 0.55s var(--mv-ease);
	will-change: flex-grow;
}

/* Overlay degradê para legibilidade do texto. */
.mv-cat-acc__panel::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(46,58,53,0.55) 0%, rgba(0,0,0,0) 65%);
	transition: opacity var(--mv-ease) 0.4s;
	z-index: 1;
}

/* ----- LÓGICA DE EXPANSÃO (pura em CSS) -----
   Sem hover/foco no track  → o painel .is-active cresce.
   Com hover/foco           → o painel sob o cursor/foco cresce. */
.mv-cat-acc__track:not(:hover):not(:focus-within) .mv-cat-acc__panel.is-active {
	flex-grow: var(--mv-cat-grow);
}
.mv-cat-acc__panel:hover,
.mv-cat-acc__panel:focus-visible,
.mv-cat-acc__panel:focus-within {
	flex-grow: var(--mv-cat-grow);
}
.mv-cat-acc__panel:focus-visible {
	outline: 3px solid var(--mv-c-accent);
	outline-offset: -3px;
}

/* Zoom sutil na imagem do painel expandido. */
.mv-cat-acc__panel { background-size: cover; }
.mv-cat-acc__track:not(:hover):not(:focus-within) .mv-cat-acc__panel.is-active,
.mv-cat-acc__panel:hover {
	background-size: 110%;
}

/* ---------- CONTEÚDO ---------- */
.mv-cat-acc__content {
	position: absolute;
	inset: auto 0 0 0;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
	padding: clamp(14px, 2vw, 26px);
	color: #fff;
}

.mv-cat-acc__subtitle {
	font-size: clamp(0.6rem, 0.5rem + 0.3vw, 0.72rem);
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgba(255,255,255,0.85);
	white-space: nowrap;
}

.mv-cat-acc__title {
	font-size: clamp(1.1rem, 0.8rem + 1vw, 1.75rem);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: 0.01em;
	color: #fff;
	text-shadow: 0 2px 12px rgba(0,0,0,0.35);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 100%;
}

/* ---------- CTA ---------- */
.mv-cat-acc__cta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 4px;
	padding: 10px 18px;
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	border-radius: 9999px;
	background-color: var(--mv-c-accent);
	color: var(--mv-c-text);
	border: 2px solid var(--mv-c-accent);
	/* Escondido por padrão; aparece só no painel expandido. */
	opacity: 0;
	transform: translateY(10px);
	transition: opacity 0.35s var(--mv-ease) 0.1s, transform 0.35s var(--mv-ease) 0.1s, background-color 0.2s;
	pointer-events: none;
	white-space: nowrap;
}
.mv-cat-acc__cta svg { display: block; transition: transform 0.25s var(--mv-ease); }

/* Revela o CTA no painel expandido (idle-ativo ou hover/foco). */
.mv-cat-acc__track:not(:hover):not(:focus-within) .mv-cat-acc__panel.is-active .mv-cat-acc__cta,
.mv-cat-acc__panel:hover .mv-cat-acc__cta,
.mv-cat-acc__panel:focus-within .mv-cat-acc__cta {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}
.mv-cat-acc__panel:hover .mv-cat-acc__cta svg { transform: translateX(3px); }

/* ============================================================
   RESPONSIVO MOBILE — Slider horizontal (≤ 767px)
   Substitui o layout vertical por scroll-snap horizontal.
   ============================================================ */
@media (max-width: 767px) {

	/* Trilho vira trilho de slider */
	.mv-cat-acc__track {
		flex-direction: row;
		height: min(72vw, 300px);
		gap: 0;
		overflow-x: auto;
		overflow-y: hidden;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		/* Fade nas bordas = indica que há mais cards */
		-webkit-mask-image: linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%);
		mask-image:         linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%);
	}
	.mv-cat-acc__track::-webkit-scrollbar { display: none; }

	/* Cada painel: 84% da largura → mostra ~8% do próximo */
	.mv-cat-acc__panel {
		flex: 0 0 84%;
		max-width: 84%;
		min-width: 0;
		height: 100%;
		scroll-snap-align: center;
		margin: 0 7px;
		border-radius: 16px;
		background-size: cover;
		background-position: center;
		transition: box-shadow 300ms ease;
	}
	.mv-cat-acc__panel:first-child { margin-left: 24px; }
	.mv-cat-acc__panel:last-child  { margin-right: 24px; }

	/* Desativa expansão por hover/foco — slider usa largura fixa */
	.mv-cat-acc__panel:hover,
	.mv-cat-acc__panel:focus-visible,
	.mv-cat-acc__panel:focus-within,
	.mv-cat-acc__track:not(:hover):not(:focus-within) .mv-cat-acc__panel.is-active {
		flex-grow: 0;
		background-size: cover;
	}

	/* Card visível no slider recebe glow verde sutil */
	.mv-cat-acc__panel.is-slider-active {
		box-shadow: 0 0 0 2.5px rgba(72, 97, 67, 0.65), 0 8px 28px rgba(0, 0, 0, 0.22);
	}

	/* CTA e conteúdo sempre visíveis no slider */
	.mv-cat-acc__cta {
		opacity: 1;
		transform: none;
		pointer-events: auto;
	}
	.mv-cat-acc__title    { white-space: normal; }
	.mv-cat-acc__subtitle { white-space: normal; }
}

/* Touch-only em telas ≥ 768px (tablet sem mouse):
   mantém o layout horizontal do acordeão + JS de clique. */
@media (hover: none) and (min-width: 768px) {
	.mv-cat-acc__cta {
		opacity: 1;
		transform: none;
		pointer-events: auto;
	}
}

/* Tablet em paisagem com mouse: reduz padding do CTA. */
@media (min-width: 768px) and (max-width: 1024px) {
	.mv-cat-acc__cta { padding: 8px 14px; font-size: 0.75rem; }
}

/* ---- Dots de paginação (visíveis apenas em mobile) ---- */
.mv-cat-acc__dots { display: none; }

@media (max-width: 767px) {
	.mv-cat-acc__dots {
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 6px;
		padding: 12px 0 6px;
	}
	.mv-cat-acc__dot {
		height: 6px;
		width: 6px;
		border-radius: 3px;
		background: #e2e4df;
		cursor: pointer;
		transition: width 280ms ease, background 280ms ease;
	}
	.mv-cat-acc__dot.is-active {
		width: 22px;
		background: #486143; /* mv-primary */
	}
}

@media (prefers-reduced-motion: reduce) {
	.mv-cat-acc__panel,
	.mv-cat-acc__cta,
	.mv-cat-acc__panel::after { transition: none; }
}