/* ---------------------------------------------------------------------------
   5. Cartões
   Sem caixa desenhada: a peça é delimitada por respiro e por um filete
   discreto. Menos moldura, mais produto.
   --------------------------------------------------------------------------- */

.is-style-magsil-card {
	position: relative;
	display: flex;
	flex-direction: column;
	transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 260ms ease;
}

/*
 * Em repouso o cartão continua sem moldura e sem sombra — é a regra da seção
 * acima, e ela não muda. A sombra é resposta à interação.
 *
 * Dois degraus, de propósito: o ponteiro já indica sozinho onde está, então
 * basta a sombra suave; o foco de teclado não tem cursor apontando para lugar
 * nenhum e precisa do sinal mais forte. Fora do bloco de movimento reduzido
 * porque sombra não é animação, e quem navega por teclado precisa dela
 * independentemente de preferir menos movimento.
 */
.is-style-magsil-card:hover {
	box-shadow: var(--wp--preset--shadow--suave);
}

.is-style-magsil-card:focus-within {
	box-shadow: var(--wp--preset--shadow--elevado);
}

.is-style-magsil-card figure,
.is-style-magsil-card .wp-block-post-featured-image {
	overflow: hidden;
	margin-bottom: 0;
	background-color: var(--wp--preset--color--linho);
}

.is-style-magsil-card img {
	display: block;
	inline-size: 100%;
	transition: transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
}

@media (prefers-reduced-motion: no-preference) {
	.is-style-magsil-card:hover img,
	.is-style-magsil-card:focus-within img {
		transform: scale(1.04);
	}

	.is-style-magsil-card:hover,
	.is-style-magsil-card:focus-within {
		transform: translateY(-2px);
	}
}

/*
 * O botão do cartão assenta no pé do cartão, e não logo abaixo do resumo.
 *
 * Resumo de peça tem comprimento variável, então numa mesma fileira os quatro
 * botões assentavam em quatro alturas. Com o catálogo vazio isso não aparecia;
 * com 24 peças, é a primeira coisa que se vê.
 *
 * São duas regras porque o problema tinha dois andares, e medir no navegador foi
 * o que separou um do outro. O item da grade não é o cartão: o laço de posts
 * embrulha cada um num <li>, e é ele que estica. Medidos na primeira fileira,
 * os <li> vinham todos com 304px e um dos cartões dentro deles com 274px — o
 * cartão não preenchia a própria célula, e por isso não havia folga para
 * empurrar botão nenhum. Daí o `block-size: 100%`.
 *
 * Com o cartão preenchendo a célula, `margin-block-start: auto` empurra o botão
 * para o fim da coluna flexível, comendo a folga que sobra. O `padding` existe
 * porque no cartão mais alto da fileira folga não sobra: ali o `auto` vira zero,
 * e sem ele o botão encostaria no texto justamente no cartão mais apertado.
 */
.wp-block-post-template > li > .is-style-magsil-card {
	block-size: 100%;
}

.is-style-magsil-card > .wp-block-buttons {
	margin-block-start: auto;
	padding-block-start: var(--wp--preset--spacing--20);
}

.is-style-magsil-card .wp-block-post-title a {
	text-decoration: none;
}

.is-style-magsil-card .wp-block-post-title a:hover {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}

/* Cartão de categoria: filete embaixo em vez de moldura completa */
.magsil-categoria {
	padding-block: var(--wp--preset--spacing--30);
	border-bottom: 1px solid var(--wp--preset--color--corda);
}

.magsil-categoria h3 {
	margin-block: 0 0.4rem;
}

.magsil-categoria h3 a {
	text-decoration: none;
}

.magsil-categoria h3 a:hover {
	color: var(--wp--preset--color--terracota);
}

.magsil-categoria p {
	margin: 0;
	color: var(--wp--preset--color--grafite);
	font-size: var(--wp--preset--font-size--pequeno);
	line-height: 1.6;
}

.magsil-categoria .magsil-seta {
	display: inline-block;
	margin-inline-start: 0.35rem;
	transition: transform 200ms ease;
}

.magsil-categoria:hover .magsil-seta {
	transform: translateX(4px);
}

/* ---------------------------------------------------------------------------

   12. O cartão da vitrine no toque

   O cartão é desenhado como objeto discreto — sombra, elevação e zoom da foto —,
   só que os três só acontecem no `:hover`. Num telefone o `:hover` não existe, e
   o que sobra é texto solto sobre o fundo da página: sem borda, sem fundo e sem
   foto enquanto o catálogo real não chega. Sedecisseis peças viram uma coluna de
   blocos indistinguíveis, e a pessoa perde de vista onde uma peça acaba e a
   outra começa.

   `hover: none` é a pergunta certa aqui, e não a largura da tela: o que falta é
   o mouse, não o espaço. Assim a regra alcança também tablet e notebook com
   tela sensível ao toque, e não muda nada onde o `:hover` funciona.
   --------------------------------------------------------------------------- */

@media (hover: none) {
	.is-style-magsil-card {
		/*
		 * O respiro vem junto com a moldura, e não emprestado do template.
		 *
		 * A primeira versão desta regra só acrescentava `padding-block-start`,
		 * supondo que todo cartão já trouxesse o resto. Só o da vitrine trazia: ele
		 * recebe padding pelo próprio bloco, no archive-product.html. Os cartões da
		 * home e da listagem do blog vinham com padding lateral e inferior zerados,
		 * e ao ganharem borda e fundo o texto ficou a 1px da moldura — medido, e
		 * visível como aperto em toda peça em destaque e todo post listado.
		 *
		 * A forma abreviada resolve os dois casos sem condicional: onde o bloco já
		 * declara padding, ele vem por atributo `style` e vence esta regra; onde não
		 * declara, esta entra inteira. O cartão da vitrine continua exatamente como
		 * estava — topo 16, laterais 16, base 28.
		 */
		padding: var(--wp--preset--spacing--20);
		border: 1px solid var(--wp--preset--color--corda);
		border-radius: 6px;
		background-color: var(--wp--preset--color--branco);
	}

	/* A foto encosta na borda do cartão, e não flutua dentro dela. */
	.is-style-magsil-card .wp-block-post-featured-image {
		border-radius: 4px;
		overflow: hidden;
	}
}

/* ---------------------------------------------------------------------------
   13. O cartão da vitrine no celular

   Categoria e título saíam centrados sobre um resumo alinhado à esquerda e um
   botão centrado — quatro elementos, três alinhamentos. Numa coluna estreita, em
   que o cartão ocupa a largura toda, isso lê como página não terminada.

   No computador o cartão é uma coluna de 280px dentro de uma grade, e o centrado
   se sustenta. A regra é de celular por isso, e não porque centrar seja errado.
   --------------------------------------------------------------------------- */

@media (width <= 781px) {
	/*
	 * O que centraliza não é `text-align`: é `margin-inline: auto`, que o layout
	 * "constrained" do núcleo põe em cada filho do grupo. Num contêiner flex,
	 * margem automática CONSOME o espaço livre e vence o `align-items` — foi por
	 * isso que declarar `align-items: stretch` aqui não mudou nada, e medir os
	 * 97,7px de margem computada foi o que apontou a causa.
	 *
	 * E a margem do núcleo vem com `!important`. Contra `!important`, só outro —
	 * mesma conclusão a que o rodapé já tinha chegado, na seção 8. Especificidade
	 * sozinha não resolve: a primeira tentativa aqui foi um seletor com uma classe
	 * a mais, e as margens continuaram nos mesmos 97,7px medidos.
	 */
	.wp-block-group.is-style-magsil-card > * {
		margin-inline: 0 !important;
	}

	.is-style-magsil-card {
		text-align: start;
	}

	/* O botão acompanha a largura do cartão, como na página da peça. */
	.is-style-magsil-card .wp-block-button,
	.is-style-magsil-card .wp-block-button__link {
		inline-size: 100%;
		text-align: center;
	}
}

/* ---------------------------------------------------------------------------