/**
 * EZbrew — Página de artigo
 * =============================================================================
 * Carrega SEMPRE junto do blog-ezbrew.css: os tokens, a lateral, os cartões e
 * a faixa final são os mesmos da listagem. Aqui só o que é próprio do artigo.
 */

/* =============================================================================
 * 1. TOPO
 * ========================================================================== */
.ez-artigo__hero {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	padding-block: clamp(26px, 3.4vw, 44px);
	background: var(--ez-azul-cartao);
}

.ez-artigo__hero-bg {
	position: absolute;
	inset: 0;
	z-index: -1;
}

.ez-artigo__hero-bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* A capa aqui é textura: o texto é que precisa ser lido. */
.ez-artigo__hero-bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(14, 22, 32, .95) 0%, rgba(14, 22, 32, .86) 48%, rgba(14, 22, 32, .45) 100%);
}

.ez-artigo__trilha {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 7px;
	font-family: var(--ez-exo);
	font-size: 12.5px;
	color: rgba(255, 255, 255, .6);
}

.ez-artigo__trilha a {
	text-decoration: none;
	color: inherit;
	transition: color .16s ease;
}

.ez-artigo__trilha a:hover {
	color: var(--ez-cobre-texto);
}

.ez-artigo__trilha [aria-current] {
	color: rgba(255, 255, 255, .85);
}

.ez-artigo__categoria {
	margin-top: 16px;
	font-family: var(--ez-grotesk);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--ez-cobre-texto);
}

.ez-artigo__titulo {
	max-width: 20ch;
	margin-top: 8px;
	font-family: var(--ez-exo);
	font-size: clamp(27px, 3.6vw, 44px);
	font-weight: 700;
	line-height: 1.16;
	color: #FFFFFF;
}

.ez-artigo__resumo {
	max-width: 54ch;
	margin-top: 12px;
	font-family: var(--ez-exo);
	font-size: clamp(14.5px, 1.3vw, 16px);
	line-height: 1.6;
	color: rgba(255, 255, 255, .8);
}

.ez-artigo__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 26px;
	margin-top: 22px;
	padding: 0;
	list-style: none;
}

.ez-artigo__meta li {
	display: flex;
	align-items: center;
	gap: 8px;
	font-family: var(--ez-exo);
	font-size: 13px;
	color: rgba(255, 255, 255, .8);
}

.ez-artigo__meta svg {
	width: 15px;
	height: 15px;
	flex: 0 0 auto;
	color: var(--ez-cobre-texto);
}

/* =============================================================================
 * 2. ÍNDICE
 * ========================================================================== */
.ez-artigo__indice {
	padding: 22px 26px;
	border-radius: 12px;
	background: #FFFFFF;
	box-shadow: 0 2px 14px rgba(32, 57, 84, .07);
}

.ez-artigo__indice-titulo {
	margin: 0 0 14px;
	font-family: var(--ez-exo);
	font-size: 16px;
	font-weight: 700;
	color: var(--ez-azul);
}

/* Duas colunas, preenchendo por coluna — a numeração continua 1,2,3 de cima
   para baixo na primeira antes de passar para a segunda, como no desenho. */
.ez-artigo__indice ol {
	columns: 2;
	column-gap: 34px;
	margin: 0;
	padding-left: 18px;
	font-family: var(--ez-exo);
	font-size: 14px;
	color: var(--ez-texto);
}

.ez-artigo__indice li {
	margin-bottom: 7px;
	break-inside: avoid;
	padding-left: 4px;
}

.ez-artigo__indice li::marker {
	color: var(--ez-cobre-texto);
	font-weight: 600;
}

.ez-artigo__indice a {
	color: var(--ez-texto);
	text-decoration: none;
	transition: color .16s ease;
}

.ez-artigo__indice a:hover,
.ez-artigo__indice a:focus-visible {
	color: var(--ez-cobre-texto);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* =============================================================================
 * 3. CORPO DO ARTIGO
 * ========================================================================== */
.ez-artigo__corpo {
	margin-top: 30px;
	font-family: var(--ez-exo);
	font-size: 16px;
	line-height: 1.75;
	color: var(--ez-texto);
}

.ez-artigo__corpo > * + * {
	margin-top: 18px;
}

.ez-artigo__corpo p {
	margin: 0;
}

/* --- Cabeçalho numerado --- */
.ez-artigo__h2 {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 38px 0 0;
	font-family: var(--ez-exo);
	font-size: clamp(19px, 1.9vw, 23px);
	font-weight: 700;
	line-height: 1.3;
	color: var(--ez-azul);
	/* Âncora do índice para abaixo do cabeçalho grudado. */
	scroll-margin-top: calc(var(--ez-cabecalho, 149px) + 16px);
}

.ez-artigo__num {
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	flex: 0 0 30px;
	border-radius: 50%;
	background: var(--ez-cobre);
	font-family: var(--ez-grotesk);
	font-size: 14px;
	font-weight: 600;
	color: #FFFFFF;
}

.ez-artigo__corpo h3,
.ez-artigo__corpo h4 {
	margin: 26px 0 0;
	font-family: var(--ez-exo);
	font-weight: 700;
	line-height: 1.35;
	color: var(--ez-azul);
}

.ez-artigo__corpo h3 { font-size: 18px; }
.ez-artigo__corpo h4 { font-size: 16px; }

.ez-artigo__corpo a {
	color: var(--ez-cobre-texto);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.ez-artigo__corpo strong {
	color: var(--ez-azul);
}

/* --- Listas com marca de conferido --- */
.ez-artigo__corpo ul {
	padding: 0;
	list-style: none;
}

.ez-artigo__corpo ul li {
	position: relative;
	padding-left: 32px;
	margin-bottom: 10px;
}

/* O visto é desenhado em CSS: evita um SVG por item numa lista longa. */
.ez-artigo__corpo ul li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .38em;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--ez-cobre);
}

.ez-artigo__corpo ul li::after {
	content: "";
	position: absolute;
	left: 5.6px;
	top: .68em;
	width: 6px;
	height: 3px;
	border-left: 2px solid #FFFFFF;
	border-bottom: 2px solid #FFFFFF;
	transform: rotate(-45deg);
}

.ez-artigo__corpo ol {
	padding-left: 20px;
}

.ez-artigo__corpo ol li {
	margin-bottom: 10px;
}

.ez-artigo__corpo ol li::marker {
	color: var(--ez-cobre-texto);
	font-weight: 600;
}

/* --- Imagens e legendas --- */
.ez-artigo__corpo img {
	height: auto;
	border-radius: 10px;
}

.ez-artigo__corpo figure {
	margin: 0;
}

.ez-artigo__corpo figcaption {
	margin-top: 8px;
	font-size: 12.5px;
	line-height: 1.5;
	color: #8C8A83;
}

/* --- Citação --- */
.ez-artigo__corpo blockquote {
	position: relative;
	margin: 0;
	padding: 22px 26px 22px 58px;
	border: 0;
	border-left: 3px solid var(--ez-cobre);
	border-radius: 0 10px 10px 0;
	background: var(--ez-creme);
	font-size: 15.5px;
	font-style: italic;
	line-height: 1.6;
	color: var(--ez-azul);
}

.ez-artigo__corpo blockquote::before {
	content: "”";
	position: absolute;
	left: 20px;
	top: 14px;
	font-family: Georgia, serif;
	font-size: 44px;
	line-height: 1;
	color: var(--ez-cobre-texto);
	opacity: .55;
}

.ez-artigo__corpo blockquote cite {
	display: block;
	margin-top: 10px;
	font-size: 13px;
	font-style: normal;
	font-weight: 600;
	color: var(--ez-texto);
}

/* =============================================================================
 * 4. TAGS
 * ========================================================================== */
.ez-artigo__tags {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-top: 40px;
	padding-top: 24px;
	border-top: 1px solid var(--ez-borda);
	font-family: var(--ez-exo);
	font-size: 13px;
	color: var(--ez-texto);
}

.ez-artigo__tags a {
	padding: 6px 14px;
	border-radius: 20px;
	background: var(--ez-creme);
	font-size: 12.5px;
	text-decoration: none;
	color: var(--ez-texto);
	transition: background-color .16s ease, color .16s ease;
}

.ez-artigo__tags a:hover,
.ez-artigo__tags a:focus-visible {
	background: var(--ez-cobre);
	color: #FFFFFF;
}

/* =============================================================================
 * 5. ANTERIOR / PRÓXIMO
 * ========================================================================== */
.ez-artigo__vizinhos {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px;
	margin-top: 28px;
	padding-block: 22px;
	border-block: 1px solid var(--ez-borda);
}

.ez-artigo__vizinho {
	display: flex;
	align-items: center;
	gap: 14px;
	text-decoration: none;
}

/* O da direita espelha: capa à direita, texto alinhado ao fim. */
.ez-artigo__vizinho--proximo {
	flex-direction: row-reverse;
	text-align: right;
}

.ez-artigo__vizinho--vazio {
	display: block;
}

.ez-artigo__vizinho-capa {
	display: block;
	width: 76px;
	height: 56px;
	flex: 0 0 76px;
	overflow: hidden;
	border-radius: 8px;
	background: var(--ez-areia);
}

.ez-artigo__vizinho-capa img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ez-artigo__vizinho-rotulo {
	display: flex;
	align-items: center;
	gap: 5px;
	font-family: var(--ez-grotesk);
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--ez-cobre-texto);
}

.ez-artigo__vizinho--proximo .ez-artigo__vizinho-rotulo {
	justify-content: flex-end;
}

.ez-artigo__vizinho-rotulo svg {
	width: 13px;
	height: 13px;
}

.ez-artigo__vizinho-texto strong {
	display: block;
	margin-top: 5px;
	font-family: var(--ez-exo);
	font-size: 14.5px;
	font-weight: 600;
	line-height: 1.32;
	color: var(--ez-azul);
	transition: color .16s ease;
}

.ez-artigo__vizinho:hover .ez-artigo__vizinho-texto strong {
	color: var(--ez-cobre-texto);
}

/* =============================================================================
 * 6. AUTOR
 * ========================================================================== */
.ez-artigo__autor {
	display: flex;
	align-items: flex-start;
	gap: 20px;
	margin-top: 26px;
	padding: 24px;
	border-radius: 12px;
	background: var(--ez-creme);
}

.ez-artigo__autor-foto {
	display: grid;
	place-items: center;
	width: 76px;
	height: 76px;
	flex: 0 0 76px;
	overflow: hidden;
	border-radius: 50%;
	background: #FFFFFF;
}

.ez-artigo__autor-foto img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ez-artigo__autor-rotulo {
	margin: 0;
	font-family: var(--ez-grotesk);
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: #8C8A83;
}

.ez-artigo__autor-nome {
	margin: 4px 0 6px;
	font-family: var(--ez-exo);
	font-size: 17px;
	font-weight: 700;
	color: var(--ez-azul);
}

.ez-artigo__autor p {
	margin: 0;
	font-family: var(--ez-exo);
	font-size: 14px;
	line-height: 1.6;
	color: var(--ez-texto);
}

/* =============================================================================
 * 7. RELACIONADOS
 * ========================================================================== */
.ez-artigo__relacionados {
	margin-top: 44px;
}

.ez-artigo__bloco-titulo {
	margin: 0 0 20px;
	font-family: var(--ez-exo);
	font-size: 20px;
	font-weight: 700;
	color: var(--ez-azul);
}

.ez-artigo__grade {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* =============================================================================
 * 8. COMPARTILHAR (na lateral)
 * ========================================================================== */
.ez-artigo__redes {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.ez-artigo__rede {
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	border-radius: 9px;
	background: #FFFFFF;
	box-shadow: 0 2px 12px rgba(32, 57, 84, .08);
	color: var(--ez-azul);
	transition: background-color .18s ease, color .18s ease, transform .18s ease;
}

.ez-artigo__rede svg {
	width: 19px;
	height: 19px;
}

.ez-artigo__rede:hover,
.ez-artigo__rede:focus-visible {
	transform: translateY(-2px);
	color: #FFFFFF;
}

/* Cores de cada rede só no hover: em repouso a fileira fica sóbria. */
.ez-artigo__rede--facebook:hover { background: #1877F2; }
.ez-artigo__rede--linkedin:hover { background: #0A66C2; }
.ez-artigo__rede--whatsapp:hover { background: #25D366; }
.ez-artigo__rede--link:hover     { background: var(--ez-cobre); }

.ez-artigo__rede.is-copiado {
	background: #25D366;
	color: #FFFFFF;
}

/* =============================================================================
 * 9. RESPONSIVO
 * ========================================================================== */
@media (max-width: 1024px) {
	.ez-artigo__grade {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	.ez-artigo__indice ol {
		columns: 1;
	}

	/* Espelhar o "próximo" em coluna única deixava a capa deslocada. */
	.ez-artigo__vizinhos {
		grid-template-columns: minmax(0, 1fr);
		gap: 16px;
	}

	.ez-artigo__vizinho--proximo {
		flex-direction: row;
		text-align: left;
	}

	.ez-artigo__vizinho--proximo .ez-artigo__vizinho-rotulo {
		justify-content: flex-start;
	}

	.ez-artigo__vizinho--vazio {
		display: none;
	}

	.ez-artigo__autor {
		flex-direction: column;
	}
}

@media (max-width: 600px) {
	.ez-artigo__grade {
		grid-template-columns: minmax(0, 1fr);
	}

	.ez-artigo__h2 {
		gap: 11px;
	}
}