/*
 * Zyrgon Manteigaria — Instruções de Aquecimento
 * Estilos base do widget. Cores, tipografia, espaçamentos e outros
 * detalhes visuais são maioritariamente controláveis a partir do painel
 * do Elementor — este ficheiro trata da estrutura, responsividade e
 * transições/hover que não têm controlo dedicado.
 */

.zmia-instrucoes {
	box-sizing: border-box;
}

.zmia-instrucoes *,
.zmia-instrucoes *::before,
.zmia-instrucoes *::after {
	box-sizing: border-box;
}

/*
 * Fundo em largura total: por defeito ocupa 100% da coluna/secção do
 * Elementor. O JS (assets/js/widget.js) mede o viewport real e o offset do
 * elemento e substitui width/margin-left por valores em px equivalentes —
 * evita a técnica pura em vw, que em vários browsers inclui a largura da
 * scrollbar e provoca overflow-x horizontal na página. Requer que nenhum
 * antecessor tenha overflow-x: hidden (o Elementor não define isso por
 * omissão nas secções/containers).
 */
.zmia-instrucoes.zmia-fullbleed {
	width: 100%;
}

/*
 * O conteúdo real (cartões e passos) fica centrado e limitado à largura do
 * grid do site — ajustável em Estilo → Zonas → Largura máxima do conteúdo,
 * por breakpoint.
 */
.zmia-container {
	width: 100%;
	max-width: 1140px;
	margin-left: auto;
	margin-right: auto;
}

/* ----------------------------------------------------------
 * Zona superior — cartões (abas)
 * ---------------------------------------------------------- */

.zmia-top {
	position: relative;
}

/*
 * Texto superior partilhado (ex: "INSTRUÇÕES") — versão mobile: um único
 * texto, fora dos cartões, centrado na página. Reutiliza a classe
 * .zmia-card__eyebrow tal e qual (mesma tipografia/cor configuradas em
 * Estilo → Cartões); este wrapper só trata do posicionamento/centragem.
 * Por omissão fica escondido — só aparece no breakpoint mobile (ver media
 * query mais abaixo), onde troca de lugar com o texto superior de cada
 * cartão individual.
 */
.zmia-cards-heading {
	display: none;
	text-align: center;
}

/* Cartões (Air Fryer / Forno) */

.zmia-cards {
	display: flex;
	/* Sem "wrap" os cartões nunca empilham — ficam sempre lado a lado, mesmo
	   em ecrãs estreitos, encolhendo em vez de passar para a linha seguinte. */
	flex-wrap: nowrap;
	justify-content: center;
	/*
	 * "stretch" (em vez de "flex-start") garante que os dois cartões ficam
	 * sempre com a mesma altura um do outro — incluindo o cartão ativo, cuja
	 * imagem encolhe (.zmia-instrucoes.has-active-tab) e cujo botão fica
	 * invisível. Como o fundo em SVG do cartão ativo usa "inset: 0"
	 * (.zmia-card.is-active::before), ele acompanha automaticamente essa
	 * altura — sem isto, ficaria mais baixo do que o cartão com o botão
	 * "Ver Instruções" visível.
	 */
	align-items: stretch;
}

.zmia-card {
	position: relative;
	z-index: 0;
	flex: 1 1 220px;
	max-width: 320px;
	/* Sem isto o item flex não encolhe abaixo do seu conteúdo mínimo, o que
	   forçaria os cartões a empilhar em ecrãs estreitos mesmo com flex-shrink. */
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	background-color: transparent;
	cursor: pointer;
	padding-top: 30px;
	transition: background-color 0.25s ease, box-shadow 0.25s ease;
}

.zmia-card:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 4px;
}

/*
 * Fundo do cartão ativo: forma "recortada" irregular em vez de um retângulo
 * liso, num pseudo-elemento absolutamente posicionado (inset: 0) — assim o
 * gráfico cobre sempre a caixa inteira do cartão, do topo ao fundo, de lado
 * a lado, independentemente do padding ou do tamanho real do cartão. "cover"
 * mantém a proporção original da SVG (sem esticar/distorcer), preenchendo
 * sempre a caixa toda; pode recortar ligeiramente as laterais ou o
 * topo/fundo consoante a proporção do cartão. "z-index: -1" mantém-no atrás
 * do conteúdo (texto/imagem/botão), contido dentro do stacking context
 * criado pelo "position: relative; z-index: 0" do .zmia-card, sem interferir
 * com o resto da página. A cor definida no painel de Estilo (Cartões →
 * Caixa do cartão) continua a aplicar-se por baixo, através de
 * background-color.
 */
.zmia-card.is-active::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: inherit;
	background-image: url( '../images/white-box.svg' );
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	pointer-events: none;
}

.zmia-card__eyebrow {
	display: block;
	text-transform: uppercase;
	margin-top: 30px;
	margin-bottom: 4px;
	/* Mesma cor de fundo da zona superior (.zmia-top), definida pelo controlo
	   "Zona Superior — Abas → Cor de fundo" em Estilo → Zonas. */

}

.zmia-card__title {
	margin: 0 0 20px;
	text-transform: uppercase;
	line-height: 1.2;
}

.zmia-card__image {
	margin-bottom: 24px;
	line-height: 0;
}

.zmia-card__image img {
	display: block;
	max-width: 100%;
	height: auto;
	margin: 0 auto;
	transition: width 0.35s ease;
}

.zmia-card__button {
	appearance: none;
	-webkit-appearance: none;
	border: none;
	display: inline-block;
	text-transform: uppercase;
	white-space: nowrap;
	cursor: pointer;
	opacity: 1;
	transition: background-color 0.25s ease, color 0.25s ease, transform 0.15s ease, opacity 0.25s ease;
}

.zmia-card__button:hover {
	transform: translateY(-2px);
}

.zmia-card__button:active {
	transform: translateY(0);
}

.zmia-card__button:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

/* O botão do cartão ativo desaparece — a aba já está aberta, não precisa de convite para abrir. */
.zmia-card.is-active .zmia-card__button {
	opacity: 0;
	pointer-events: none;
}

/* ----------------------------------------------------------
 * Zona inferior — conteúdo da aba aberta (passos)
 * ---------------------------------------------------------- */

/*
 * .zmia-bottom começa sempre colapsado (0 de padding, sem altura) — o
 * controlo de Padding no painel de Estilo já não escreve "padding"
 * diretamente; escreve na variável --zmia-bottom-padding (ver control
 * bottom_zone_padding). Isto evita qualquer disputa de especificidade com o
 * Elementor: aqui só existe uma regra a definir "padding" para este
 * elemento em cada estado, nunca duas a competir pela mesma propriedade.
 * A classe .zmia-bottom--open (adicionada no primeiro render em PHP quando
 * há uma aba ativa por omissão, e pelo JS no primeiro clique) é que troca
 * de estado.
 */
.zmia-bottom {
	position: relative;
	height: 0;
	padding: 0;
	overflow: hidden;
	transition: padding 0.4s ease;
}

.zmia-bottom.zmia-bottom--open {
	height: auto;
	padding: var( --zmia-bottom-padding, 50px 40px 60px 40px );
	overflow: visible;
}

/*
 * Ao abrir: fade-in + deslize de cima para baixo (de translateY negativo até 0).
 * Ao fechar: fade-out + deslize de baixo para cima (de 0 até translateY negativo).
 * A troca da classe é feita via JS (assets/js/widget.js), que só aplica o
 * atributo [hidden] depois de a transição terminar.
 */
.zmia-panel {
	opacity: 0;
	transform: translateY(-24px);
	transition: opacity 0.4s ease, transform 0.4s ease;
}

.zmia-panel.is-active {
	opacity: 1;
	transform: translateY(0);
}

.zmia-panel[hidden] {
	display: none;
}

@media (prefers-reduced-motion: reduce) {
	.zmia-panel {
		transition: none;
	}
}

.zmia-steps {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	align-items: start;
}

.zmia-step {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.zmia-step__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: visible;
	border-style: solid;
	border-radius: 50%;
	margin-bottom: 18px;
}

.zmia-step__icon img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.3s ease;
}

.zmia-step__icon img:hover {
	transform: scale( 1.2 );
}

.zmia-step__label {
	margin: 0 0 6px;
	text-transform: uppercase;
	line-height: 1.4;
}

.zmia-step__title {
	margin: 0 0 10px;
	text-transform: uppercase;
	line-height: 1.2;
}

.zmia-step__description {
	margin: 0;
	line-height: 1.55;
}

/* ----------------------------------------------------------
 * Responsividade
 * ---------------------------------------------------------- */

@media (max-width: 1024px) {
	.zmia-steps {
		grid-template-columns: repeat(3, 1fr);
		row-gap: 40px;
	}
}

/*
 * Mobile: um único "INSTRUÇÕES" centrado por cima dos cartões, em vez de
 * repetido dentro de cada um — os cartões continuam lado a lado.
 */
@media (max-width: 767px) {
	.zmia-cards-heading {
		display: block;
	}

	.zmia-card > .zmia-card__eyebrow {
		display: none;
	}
}

@media (max-width: 600px) {
	.zmia-steps {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 420px) {
	.zmia-steps {
		grid-template-columns: 1fr;
	}
}