/**
 * Artigo do blog: topo e conteudo.
 *
 * O topo repete o desenho do hero da pagina de curso. O conteudo e o que o
 * editor do WordPress produz, por isso a tipografia esta escrita por tag e
 * nao por classe: quem escreve o artigo nao poe classes nenhumas.
 *
 * Os blocos responsivos estao no fim: media queries nao somam especificidade,
 * e uma regra base escrita depois ganhava-lhes.
 */

/* ------------------------------------------------------------- topo */

.els-posthead {
	padding: 220px 24px 96px;
	background-color: #ffffff;
}

.els-posthead__bloco { gap: 48px; }

.els-posthead__linha {
	display: flex;
	/* no Figma a linha alinha por baixo (align MAX): o texto da direita acaba
	   na mesma altura que a ultima linha do titulo, seja qual for o tamanho
	   do titulo. Antes eu compensava com um padding fixo, que so batia certo
	   com titulos de tres linhas. */
	align-items: flex-end;
	gap: 60px;
}

.els-posthead__titulo-col {
	flex: 1 1 704px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.els-posthead .els-posthead__titulo {
	margin: 0;
	font-family: Urbanist, sans-serif;
	font-size: 54px;
	font-weight: 600;
	line-height: 1.15;
	letter-spacing: -0.01em;
	color: #101828;
}

.els-posthead__copy {
	flex: 0 1 556px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 28px;
}

.els-posthead__resumo {
	margin: 0;
	font-family: Inter, sans-serif;
	font-size: 16px;
	line-height: 1.5;
	color: #475467;
	/* o resumo vem do texto do post e pode trazer um endereco longo: ver o corpo */
	overflow-wrap: anywhere;
}

.els-posthead__acoes { display: flex; flex-wrap: wrap; gap: 16px; }

.els-posthead__media { width: 100%; }

.els-posthead__foto,
.els-posthead .els-posthead__foto {
	display: block;
	width: 100%;
	height: 420px;
	object-fit: cover;
	border-radius: 10px;
}

/* =========================================================================
   Topo do artigo montado com elementos nativos.

   O titulo e a foto sao agora elementos do editor, com tags dinamicas. Estas
   regras dao-lhes o que os props do V4 nao alcancam: o recorte da foto e a
   folga entre o resumo e os botoes, que vem de dentro do widget.
   ========================================================================= */

/* O tema pinta `.elementor img { border-radius: 0 }` com (0,1,1), que ganha a
   uma classe sozinha. A altura tem de ser imposta: um `max-height` sobre uma
   imagem larga nunca prende. */
.elementor .els-post-foto,
.els-post-foto {
	display: block;
	width: 100%;
	height: 420px;
	object-fit: cover;
	border-radius: 10px;
}

@media (max-width: 1024px) {
	.elementor .els-post-foto,
	.els-post-foto { height: 340px; }
}

@media (max-width: 767px) {
	.elementor .els-post-foto,
	.els-post-foto { height: 220px; }
}

/* O header e fixo: sem esta folga a ancora parava com o titulo por baixo dele.
   Pelo id e nao pela classe, porque a ancora vive agora no contentor. */
[id="article"],
.els-artigo,
[id="related-posts"] { scroll-margin-top: 110px; }

/* --------------------------------------------------------- o artigo */

.els-artigo { padding: 104px 24px; }
.els-artigo--azul   { background-color: #eaf2fb; }
.els-artigo--cinza  { background-color: #f7f9fc; }
.els-artigo--branco { background-color: #ffffff; }

.els-artigo__bloco { gap: 32px; }

/**
 * O texto do artigo.
 *
 * O espaco entre blocos vem do `gap`, e os titulos juntam-lhe margem por cima:
 * um titulo precisa de mais ar antes do que depois, e e assim que se le que
 * comeca uma seccao nova. Antes era um `gap` unico de 32 para tudo, e por isso
 * um titulo tinha exactamente o mesmo ar que um paragrafo.
 *
 * Os tamanhos tambem desceram. O h1 da pagina tem 54; um h2 de 42 dentro do
 * texto disputava-lhe o lugar em vez de o servir.
 */
.els-artigo__corpo {
	display: flex;
	flex-direction: column;
	gap: 22px;
	font-family: Inter, sans-serif;
	font-size: 17px;
	line-height: 1.7;
	color: #475467;

	/* URLs e outras palavras sem espaco partem a linha em vez de passar da
	   borda: no telemovel o fim delas ficava cortado (ha posts antigos com
	   enderecos de players escritos como texto). */
	overflow-wrap: anywhere;

	/* a numeracao das listas, mais abaixo */
	counter-reset: els-passo;
}

/* ------------------------------------------------- tipografia do texto */

.els-artigo__corpo > :first-child { margin-top: 0; }
.els-artigo__corpo > :last-child  { margin-bottom: 0; }

.els-artigo__corpo h2 {
	margin: 30px 0 0;
	font-family: Urbanist, sans-serif;
	font-size: 32px;
	font-weight: 600;
	line-height: 1.2;
	color: #101828;
}

.els-artigo__corpo h3 {
	margin: 20px 0 0;
	font-family: Urbanist, sans-serif;
	font-size: 24px;
	font-weight: 600;
	line-height: 1.25;
	color: #101828;
}

.els-artigo__corpo h4,
.els-artigo__corpo h5,
.els-artigo__corpo h6 {
	margin: 12px 0 0;
	font-family: Urbanist, sans-serif;
	font-size: 19px;
	font-weight: 600;
	line-height: 1.35;
	color: #101828;
}

.els-artigo__corpo p  { margin: 0; }
.els-artigo__corpo li { margin: 0; }

.els-artigo__corpo a {
	color: #286191;
	text-decoration: underline;
	text-underline-offset: 2px;
}
.els-artigo__corpo a:hover { color: #101828; }

.els-artigo__corpo strong,
.els-artigo__corpo b { color: #101828; font-weight: 600; }

.els-artigo__corpo ul {
	margin: 0;
	padding-left: 22px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.els-artigo__corpo ul li::marker { color: #7cb1e5; }

/**
 * As listas numeradas.
 *
 * Nos posts que vieram do site antigo cada passo e uma lista sozinha, com o
 * paragrafo de explicacao a seguir, fora dela. Como cada lista comeca do
 * principio, os passos saiam todos numerados com 1. O numero passa a vir de
 * um contador do bloco, que so volta a zero num titulo novo - assim os passos
 * de uma seccao contam-se de seguida, mesmo estando em listas separadas.
 */
.els-artigo__corpo h2,
.els-artigo__corpo h3,
.els-artigo__corpo h4,
.els-artigo__corpo h5,
.els-artigo__corpo h6 { counter-reset: els-passo; }

.els-artigo__corpo ol {
	margin: 0;
	padding-left: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
/* O numero vai posicionado e nao num flex: com `display: flex` no li cada
   pedaco de texto e cada link viravam uma coluna, e os itens com link
   ficavam espremidos (no telemovel o link saia do ecra). 28 = 18 + 10 de gap. */
.els-artigo__corpo ol > li {
	position: relative;
	padding-left: 28px;
	counter-increment: els-passo;
}
.els-artigo__corpo ol > li::before {
	content: counter(els-passo) ".";
	position: absolute;
	left: 0;
	top: 0;
	min-width: 18px;
	font-weight: 600;
	color: #286191;
}

/**
 * As imagens do artigo ocupam a largura toda, como no Figma.
 *
 * O `.elementor` a abrir nao e enfeite: o tema poe `.elementor img
 * { border-radius: 0 }`, que tem o mesmo peso que uma classe sozinha e
 * apagava o raio. Com duas classes a regra ganha.
 */
.elementor .els-artigo__corpo img,
.els-artigo__corpo img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 10px;
}

.els-artigo__corpo figure { margin: 0; }
.els-artigo__corpo figcaption {
	margin-top: 10px;
	font-size: 14px;
	line-height: 1.45;
	color: #667085;
}

/* a citacao e o card azul do desenho */
.els-artigo__corpo blockquote {
	margin: 0;
	padding: 32px;
	border-radius: 10px;
	border: 0;
	background-color: #286191;
	color: #ffffff;
	display: flex;
	flex-direction: column;
	gap: 24px;
	font-size: 18px;
	line-height: 1.45;
}
.els-artigo__corpo blockquote p { margin: 0; color: inherit; }
.els-artigo__corpo blockquote cite,
.els-artigo__corpo blockquote strong {
	color: #9ecaef;
	font-size: 14px;
	font-weight: 700;
	font-style: normal;
	line-height: 1.2;
}
.els-artigo__corpo blockquote a { color: #ffffff; }

.els-artigo__corpo hr {
	margin: 0;
	border: 0;
	border-top: 1px solid #b5d5f0;
}

.els-artigo__corpo table {
	width: 100%;
	border-collapse: collapse;
	font-size: 15px;
}
.els-artigo__corpo th,
.els-artigo__corpo td {
	padding: 10px 12px;
	border-bottom: 1px solid #b5d5f0;
	text-align: left;
	vertical-align: top;
}
.els-artigo__corpo th { color: #101828; font-weight: 600; }

/* conteudo antigo traz iframes de video sem proporcao definida */
.els-artigo__corpo iframe {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	height: auto;
	border: 0;
	border-radius: 10px;
}

/* ====================================================== tablet ate 1024 */

@media (max-width: 1024px) {

	.els-posthead { padding: 150px 24px 70px; }
	.els-posthead__bloco { gap: 32px; }
	.els-posthead__linha { gap: 32px; }
	.els-posthead .els-posthead__titulo { font-size: 40px; }
	.els-posthead__copy { flex-basis: 44%; }
	.els-posthead .els-posthead__foto { height: 340px; }

	.els-artigo { padding: 70px 24px; }
	.els-artigo__corpo { gap: 28px; }
	.els-artigo__corpo h2 { margin-top: 26px; font-size: 28px; }
	.els-artigo__corpo h3 { margin-top: 18px; font-size: 22px; }
}

/* ================================================== a coluna dupla parte */

@media (max-width: 900px) {
	.els-posthead__linha { flex-direction: column; align-items: stretch; gap: 24px; }
	.els-posthead__titulo-col,
	.els-posthead__copy { flex: 0 1 auto; }
}

/* ====================================================== telemovel 767 */

@media (max-width: 767px) {

	.els-posthead { padding: 120px 20px 52px; }
	.els-posthead__bloco { gap: 24px; }
	.els-posthead__linha { gap: 18px; }
	.els-posthead .els-posthead__titulo { font-size: 32px; line-height: 1.19; }
	.els-posthead__resumo { font-size: 15px; line-height: 1.47; }
	.els-posthead__acoes { flex-direction: column; align-items: stretch; gap: 10px; }
	.els-posthead__acoes .els-cta { width: 100%; min-height: 54px; }
	.els-posthead__acoes .els-cta:not(.els-cta--badge) { justify-content: center; }
	.els-posthead__acoes .els-cta.els-cta--badge { justify-content: space-between; }
	.els-posthead .els-posthead__foto { height: 220px; }

	.els-artigo { padding: 56px 20px; }
	.els-artigo__bloco { gap: 24px; }
	.els-artigo__corpo { gap: 20px; font-size: 16px; line-height: 1.65; }
	.els-artigo__corpo h2 { margin-top: 22px; font-size: 26px; }
	.els-artigo__corpo h3 { margin-top: 16px; font-size: 21px; }
	.els-artigo__corpo h4,
	.els-artigo__corpo h5,
	.els-artigo__corpo h6 { margin-top: 10px; font-size: 18px; }
	.els-artigo__corpo blockquote { padding: 24px; gap: 16px; font-size: 16px; }
}

/* --------------------------------------------- o formulario no fim do post */

/* O topo do post fica preso (`position: sticky`, efeito de "cobrir" do
   els-borda.css) e as seccoes de baixo passam por cima dele. A do formulario
   "Check availability" do modelo Single Post (908) nao tinha fundo, e o titulo,
   os botoes e a foto do topo apareciam atras do formulario. Fica com o mesmo
   fundo da seccao "Keep reading" logo acima. */
.elementor-908 .elementor-element-9501733 {
	background-color: #f7f9fc;
}