/*
 * Post único (e case) — RF07–RF09 da EF do Blog.
 * Template: single.html · Pattern: patterns/post-relacionados.php
 *
 * O que NÃO está aqui, de propósito:
 *   - a capa e o chip do hero  → templates/blog.css, compartilhados com o hero das listagens;
 *   - o card de "Leia também"  → templates/blog.css (.almar-post-card), reusado inteiro.
 *
 * Especificidade: o layout do core emite `.wp-container-… > * { margin-block-start: 0 }` com
 * especificidade de classe única. Toda regra de ritmo do corpo abaixo carrega DUAS classes
 * (.almar-post__corpo .wp-block-post-content) para vencer sem depender da ordem das folhas.
 */

/* ==========================================================================
   1. Hero de capa — a imagem destacada é o fundo
   ========================================================================== */

.almar-post-hero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: flex;
	align-items: flex-end;
	min-height: max(60vh, 480px);
	background-color: var(--wp--preset--color--fundo-principal);
}

/*
 * Sobe por baixo do cabeçalho sticky, como o hero da Home e o das listagens. Para a margem
 * negativa colapsar, o <main> do single.html não tem padding-top — ele mora no
 * .almar-post__corpo, depois do hero.
 *
 * É esta margem que exige a entrada de .almar-post-hero na regra de transparência do
 * layout/cabecalho.css: sem ela o menu ficaria sólido por cima da foto.
 */
.wp-site-blocks .almar-post-hero {
	margin-block-start: calc(-1 * var(--almar-altura-cabecalho));
}

/*
 * Gradiente de leitura: escurece o pé e a esquerda, onde o texto pousa. Mesmo desenho do
 * hero das listagens (blog.css), um pouco mais fechado no pé — o título do post é um h1 e
 * ocupa mais linhas.
 *
 * Sem imagem destacada não há o que escurecer: o gradiente cai sobre o fundo-principal do
 * grupo e o hero vira uma banda escura sólida. Continua legível, sem código extra.
 */
.almar-post-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background:
		linear-gradient(
			0deg,
			rgb(6 26 43 / 0.96) 0%,
			rgb(6 26 43 / 0.72) 45%,
			rgb(6 26 43 / 0.25) 100%
		),
		linear-gradient(
			90deg,
			rgb(6 26 43 / 0.7) 0%,
			rgb(6 26 43 / 0.2) 60%,
			rgb(6 26 43 / 0) 100%
		);
}

.almar-post-hero__conteudo {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: var(--almar-largura-total);
	margin-inline: auto;
	padding-inline: var(--almar-margem-lateral);
	padding-block: max(112px, calc(var(--almar-altura-cabecalho) + 24px)) 88px;
}

.almar-post-hero__meta {
	margin-block-end: 24px;
}

.almar-post-hero .wp-block-post-title {
	max-width: 20ch;
	margin-block: 0;
}

@media (max-width: 767px) {
	.almar-post-hero {
		min-height: max(70vh, 420px);
	}

	.almar-post-hero__conteudo {
		padding-block-end: 56px;
	}

	.almar-post-hero .wp-block-post-title {
		max-width: none;
	}
}

@media (min-width: 2080px) {
	.almar-post-hero__conteudo {
		padding-block: max(140px, calc(var(--almar-altura-cabecalho) + 48px)) 104px;
	}
}

/* ==========================================================================
   2. Corpo editorial (RF07)
   ========================================================================== */

.almar-post__corpo .wp-block-post-content {
	font-size: var(--wp--preset--font-size--body-lg);
	line-height: 1.75;
}

/* text-wrap: pretty evita a órfã — uma palavra sozinha na última linha do parágrafo. */
.almar-post__corpo .wp-block-post-content p {
	margin-block: 0 1.5em;
	text-wrap: pretty;
}

.almar-post__corpo .wp-block-post-content h2 {
	margin-block: 56px 16px;
}

.almar-post__corpo .wp-block-post-content h3 {
	margin-block: 40px 12px;
}

.almar-post__corpo .wp-block-post-content h4,
.almar-post__corpo .wp-block-post-content h5,
.almar-post__corpo .wp-block-post-content h6 {
	margin-block: 32px 8px;
}

/* Nada de respiro antes do primeiro bloco: quem dá o espaço é o padding do .almar-post__corpo. */
.almar-post__corpo .wp-block-post-content > :first-child {
	margin-block-start: 0;
}

.almar-post__corpo .wp-block-post-content > :last-child {
	margin-block-end: 0;
}

/*
 * No corpo de um texto o sublinhado é afordância, não enfeite: o leitor precisa distinguir
 * o link da palavra em teal. O theme.json tira o sublinhado dos links do site inteiro (é o
 * certo para menu, botão e card) — aqui ele volta.
 */
.almar-post__corpo .wp-block-post-content a {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

.almar-post__corpo .wp-block-post-content ul,
.almar-post__corpo .wp-block-post-content ol {
	margin-block: 0 1.5em;
	padding-inline-start: 1.25em;
}

.almar-post__corpo .wp-block-post-content li {
	margin-block-end: 8px;
}

.almar-post__corpo .wp-block-post-content li::marker {
	color: var(--wp--preset--color--teal-destaque);
	font-weight: 700;
}

/*
 * A aspa é a mesma máscara CSS do card de depoimento (block-styles.css).
 *
 * Escopado no BLOCO de citação (.wp-block-quote), e não num `blockquote` solto: o embed do
 * Instagram é um `<blockquote class="instagram-media">`, e um seletor de elemento pintaria a
 * aspa teal e a borda em cima dele — foi o "99" que apareceu no topo do embed. O bloco de
 * citação do editor sempre traz a classe; o embed, nunca.
 */
.almar-post__corpo .wp-block-post-content .wp-block-quote {
	position: relative;
	margin-block: 40px;
	padding-inline-start: 32px;
	border-inline-start: 2px solid var(--wp--preset--color--teal-destaque);
}

.almar-post__corpo .wp-block-post-content .wp-block-quote::before {
	content: "";
	display: block;
	width: 28px;
	height: 28px;
	margin-block-end: 12px;
	background-color: var(--wp--preset--color--teal-destaque);
	-webkit-mask: url("../../icons/format-quote.svg") no-repeat center / contain;
	mask: url("../../icons/format-quote.svg") no-repeat center / contain;
}

.almar-post__corpo .wp-block-post-content .wp-block-quote cite {
	display: block;
	margin-block-start: 12px;
	color: var(--wp--preset--color--cinza-elegante);
	font-size: var(--wp--preset--font-size--body-sm);
	font-style: normal;
}

.almar-post__corpo .wp-block-post-content figure,
.almar-post__corpo .wp-block-post-content .wp-block-image {
	margin-block: 40px;
}

.almar-post__corpo .wp-block-post-content img {
	height: auto;
	border-radius: var(--wp--custom--raio-lg);
}

.almar-post__corpo .wp-block-post-content figcaption {
	margin-block-start: 12px;
	text-align: center;
}

.almar-post__corpo .wp-block-post-content hr {
	margin-block: 48px;
}

.almar-post__corpo .wp-block-post-content .wp-block-table {
	overflow-x: auto;
}

/* ==========================================================================
   3. Embeds (RF08, RF09, RNF02)
   ========================================================================== */

.almar-post__corpo .wp-block-post-content .wp-block-embed {
	margin-block: 40px;
}

.almar-post__corpo .wp-block-embed__wrapper {
	overflow: hidden;
	border-radius: var(--wp--custom--raio-lg);
}

/*
 * RF08. O add_theme_support('responsive-embeds') do inc/setup.php já cuida do bloco
 * "Incorporar" — ele embrulha o iframe em .wp-embed-aspect-16-9. O que ele NÃO cobre é o
 * <iframe> que o cliente cola direto num bloco "HTML personalizado", que é o caminho mais
 * curto e o que ele vai usar. Aí a proporção é nossa.
 */
.almar-post__corpo iframe[src*="youtube"],
.almar-post__corpo iframe[src*="youtu.be"],
.almar-post__corpo iframe[src*="vimeo"] {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	border: 0;
	border-radius: var(--wp--custom--raio-lg);
}

/*
 * RF09. O WordPress não resolve mais oEmbed do Instagram (a Meta passou a exigir token de
 * app, e o WP tirou o provedor na 5.6): o embed chega como <blockquote class="instagram-media">
 * num bloco "HTML personalizado", e quem o transforma em iframe é o embed.js do Instagram —
 * carregado pelo inc/single.php, porque o KSES apaga o <script> de quem não é admin.
 *
 * Os !important não são preguiça: o próprio script do Instagram escreve `min-width: 326px` e
 * `max-width: 540px` INLINE no blockquote, e inline vence qualquer seletor nosso.
 */
.almar-post__corpo .instagram-media {
	margin-inline: auto !important;
	min-width: 0 !important;
	max-width: 100% !important;
}

.almar-post__corpo .wp-block-embed-instagram .wp-block-embed__wrapper {
	display: flex;
	justify-content: center;
}

/* ==========================================================================
   4. Leia também
   ========================================================================== */

/*
 * A faixa, e só. Os cards são .almar-post-card — o mesmo do blog, estilizado por inteiro em
 * templates/blog.css. O branco separa o corpo (branco-quente) do contato (fundo-principal),
 * que vem logo abaixo.
 */
.almar-relacionados {
	background-color: var(--wp--preset--color--branco);
}

.almar-relacionados .almar-relacionados__grade {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 1280px) {
	.almar-relacionados .almar-relacionados__grade {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	.almar-relacionados .almar-relacionados__grade {
		grid-template-columns: 1fr;
	}
}

/* O card, o "Leia mais" e a seta vêm inteiros de templates/blog.css. Aqui, nada. */