/* =============================================================== o cartão ==
   O cartão do portal: imagem em cima, sobrancelha miúda, título e começo do
   texto. Mora no núcleo, não num módulo, porque dois módulos precisam dele
   idênticos — o Santo do Dia e o Deus Conosco dividem a mesma faixa na raiz do
   Santuário, lado a lado.

   Enquanto ele era do `santo`, a alternativa para o `liturgia` era copiar. Em
   21/10/2026 três defeitos nasceram de o cartão não ser medido contra o vizinho
   (altura, peso do resumo, cor do título); duas cópias os teriam multiplicado
   por dois, um de cada vez. A folha é enfileirada pelo próprio núcleo quando um
   cartão é montado, então ela está presente onde quer que o cartão apareça.

   Cor, fonte e tamanho saem dos globais do kit e dos tokens da paleta do
   núcleo — nunca de hex aqui. Os ids `075d21b`, `6c5c032` e `text` são os
   globais do kit 5 do portal; o valor depois da vírgula é o que vale fora
   dele. */

/* ---------------------------------------------------------------- cartão --
   O verbete de hoje em cartão. Mesma forma do cartão do portal: imagem em
   cima, sobrancelha miúda, nome e começo do texto.

   Tudo por token: solto na Academia Marial ele toma a paleta de lá, sem
   carregar o terracota do Santo do Dia para dentro de outro núcleo. */

.a12-cartao {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border-radius: 16px;
	background: var(--a12-fundo-suave, #f2e7df);
	color: inherit;
	/* Em grade, o item que estica é o invólucro do widget, não o cartão: medido
	   em 21/10/2026 na raiz do Santuário, a célula tinha 545px, o cartão vizinho
	   preenchia os 545 e este parava em 506 — 39px de desalinho no pé. Fora de
	   grade o pai tem altura automática e isto resolve para `auto`, inócuo. */
	height: 100%;
}

/* A corrente de alturas passa pelo invólucro que o Elementor põe entre a célula
   e o cartão. Classe estrutural com `:has`, restrita a onde o cartão está —
   nunca `.elementor-element-<id>`, que muda quando alguém edita a página e
   deixa a regra órfã sem acusar erro. */
.elementor-shortcode:has( > .a12-cartao ) {
	height: 100%;
}

.a12-cartao__moldura {
	display: block;
	background: color-mix(in srgb, var(--a12-intermediaria, #7a5438) 12%, transparent);
}

/* A proporção vai na própria imagem, não na moldura: com ela na moldura, o
   `height:100%` do filho resolve para `auto` e a imagem impõe o retrato de
   volta — o cartão fica alto e as alturas desencontram na grade.

   4:3 é o recorte do desenho. A arte do acervo é retrato (707x1000), então o
   corte é real: `object-position` no topo preserva o rosto, que é o que o
   leitor reconhece. */
.a12-cartao__imagem {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	object-position: center 22%;
}

.a12-cartao__corpo {
	display: flex;
	flex-direction: column;
	gap: .5rem;
	padding: 1.1rem 1.25rem 1.4rem;
}

.a12-cartao__sobrancelha {
	margin: 0;
	/* Tipografia do kit, não do módulo. A sobrancelha é o global `075d21b`
	   ("Santuário Sans", 1.3rem, caixa alta, entrelinha 1.3rem) — o mesmo que o
	   painel estático da raiz do Santuário usa no cartão vizinho, medido no
	   `getComputedStyle` da origem viva em 21/10/2026. Fixar `.8rem` aqui
	   deixava os dois cartões desencontrados lado a lado.

	   Os ids são do kit 5 do portal; o valor depois da vírgula é o que o módulo
	   usa onde esse kit não existe. Sem `letter-spacing` próprio: o kit não
	   define nenhum, e inventar um é forçar estilo.

	   `font-weight` cai no 800 de propósito. O kit emite `font-weight:800` como
	   declaração solta em vez de `--e-global-typography-075d21b-font-weight`, e
	   as regras do Elementor leem `...-075d21b-weight`, que ninguém define — o
	   peso do original não é aplicado hoje. 800 é a intenção escrita no kit; a
	   correção é no kit, não aqui. */
	font-family: var(--e-global-typography-075d21b-font-family, sans-serif), sans-serif;
	font-size: var(--e-global-typography-075d21b-font-size, .8rem);
	font-weight: var(--e-global-typography-075d21b-font-weight, 800);
	text-transform: var(--e-global-typography-075d21b-text-transform, uppercase);
	line-height: var(--e-global-typography-075d21b-line-height, 1.15);
	/* `principal`, não `intermediaria`: medido sobre `fundo-suave`, a
	   intermediaria dá 3,97:1 nas duas paletas e reprova em AA para texto
	   miúdo. A principal dá 5,73:1 na terracota e 6,21:1 no azul petróleo, e
	   continua distinta do título, que é a secundaria. O original pinta
	   `#7B4A32` fixo na página, que é a principal da terracota e só dela. */
	color: var(--a12-principal, #6b4227);
}

.a12-cartao__titulo {
	margin: 0;
	/* Global `6c5c032` do kit: Roboto, 1.65rem/2.25rem, peso 600 — o título do
	   cartão vizinho no painel. O `clamp` próprio ficou como reserva para fora
	   do portal; quem decide a escala aqui é o kit. A cor é a `secundaria`, que
	   é onde o plugin de paletas aponta o global `a12marcaescura` do original —
	   mesma tinta, por token em vez de por nome fixo. */
	font-family: var(--e-global-typography-6c5c032-font-family, sans-serif), sans-serif;
	font-size: var(--e-global-typography-6c5c032-font-size, clamp(1.25rem, 1.05rem + .6vw, 1.6rem));
	font-weight: var(--e-global-typography-6c5c032-font-weight, 800);
	line-height: var(--e-global-typography-6c5c032-line-height, 1.2);
	/* `--area-texto`, não `secundaria`. O tema pinta todo cabeçalho dentro de um
	   núcleo com `:is(.santuario, .academia-marial, …) :is(…, .elementor-heading-title,
	   …){color:var(--area-texto)!important}` — e no Santuário isso é #7B4A32, não o
	   #4B2D22 que eu punha. A regra mira a classe do widget Heading, que este h3
	   não tem, então ela passava longe e o cartão saía com um título mais escuro
	   que o do cartão vizinho, medido lado a lado em 21/10/2026.

	   A hierarquia contra a sobrancelha não se perde: ela é de tamanho e peso
	   (20,8px/800 em caixa alta contra 26,4px/600), que é como o cartão vizinho
	   também se resolve. Contraste de #7B4A32 sobre #EFE1D8: 5,73:1. */
	color: var(--area-texto, var(--a12-secundaria, #4b2d22));
}

.a12-cartao__titulo a {
	color: inherit;
	text-decoration: none;
}

.a12-cartao__titulo a:hover,
.a12-cartao__titulo a:focus-visible { text-decoration: underline; }

.a12-cartao__titulo a:focus-visible {
	outline: 3px solid var(--a12-principal, #6b4227);
	outline-offset: 3px;
	border-radius: 4px;
}

.a12-cartao__resumo {
	margin: 0;
	/* Tipografia de corpo do kit (global `text`): Roboto, 1.08rem/1.8rem, peso
	   400, cor #454545 — o mesmo do texto no cartão vizinho.

	   O `font-weight` precisa ser escrito. Nesta página o `<main>` inteiro herda
	   peso 800: sem declarar nada, o resumo saía em negrito ao lado de um vizinho
	   em regular. O cartão vizinho escapa porque o Elementor emite o peso dele
	   widget a widget; um componente que renderiza fora do Elementor tem de
	   declarar o seu. */
	font-family: var(--e-global-typography-text-font-family, sans-serif), sans-serif;
	font-size: var(--e-global-typography-text-font-size, .95rem);
	font-weight: var(--e-global-typography-text-font-weight, 400);
	line-height: var(--e-global-typography-text-line-height, 1.6);
	color: var(--e-global-color-text, inherit);
}

.a12-cartao__botao {
	display: inline-block;
	margin-top: .25rem;
	padding: .45rem .9rem;
	border-radius: 999px;
	background: var(--a12-principal, #6b4227);
	color: var(--a12-on-principal, #fff);
	font-weight: 600;
	text-decoration: none;
}

.a12-cartao__botao:focus-visible {
	outline: 3px solid var(--a12-secundaria, #4b2d22);
	outline-offset: 2px;
}

.a12-cartao--vazio .a12-cartao__corpo { gap: .65rem; }

/* --- a moldura de marca -----------------------------------------------------
   Quando o cartão não ilustra um conteúdo e sim anuncia um serviço, a moldura
   deixa de ser foto e passa a ser a marca sobre o fundo do próprio serviço.

   É o caso do Deus Conosco: nenhum dos 343 dias publicados tem capa, e a foto
   que estava ali era decoração escolhida à mão. A marca diz o que a foto não
   dizia, e vem do mesmo lugar que o cabeçalho da página do serviço — o
   lettering negativo sobre o vermelho da paleta dele.

   O fundo chega por `--a12-cartao-marca-fundo`, que o PHP liga a um token de
   paleta (`var(--a12-paleta-<slug>-principal)`), nunca a um valor. A reserva é
   a principal da paleta em volta, para a moldura nunca nascer transparente. */

.a12-cartao__moldura--marca {
	display: flex;
	align-items: center;
	justify-content: center;
	/* a mesma proporção da moldura de foto: lado a lado, os dois cartões têm
	   de ter a mesma altura de cabeça */
	aspect-ratio: 4 / 3;
	padding: 1.75rem;
	background: var(--a12-cartao-marca-fundo, var(--a12-principal, #6b4227));
}

.a12-cartao__marca {
	display: block;
	width: 100%;
	max-width: 14rem;
	height: auto;
}