/**
 * Seccao "From the blog".
 *
 * Medidas do frame 06 · From the blog (783:4508):
 *   card   429x590, raio 10, padding 24, gap 16
 *   media  381x240, raio 5, badge de 44x44 a 15px do canto inferior direito
 *   data   icone de 24px + texto 16/500 em #286191, gap 10
 *   titulo 24/600 #101828   resumo 16/400 #475467, gap 14
 *
 * Ao contrario do slider de cursos, aqui o cabecalho e alinhado a esquerda e
 * nao ha setas: sao tres cards fixos numa grelha.
 */

/* Os controlos do carrossel so tem funcao no telemovel; acima disso a grelha
   mostra tudo de uma vez e nao ha nada para navegar. Fica aqui em cima, antes
   das media queries, senao a regra do telemovel perde por ordem de escrita. */
.els-blog__nav { display: none; }


.els-blog {
	/* referencia para o cqw da largura do card no telemovel */
	container-type: inline-size;
	width: 100%;
	max-width: 1320px;
	margin-inline: auto;
	display: flex;
	flex-direction: column;
	gap: 44px;
}

.els-blog__head {
	display: flex;
	flex-direction: column;
	gap: 16px;
	align-items: flex-start;
	text-align: left;
}

.els-blog__head .els-slider__intro {
	max-width: 78ch;
}

/* ------------------------------------------------------------- grelha */

.els-blog__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
	align-items: stretch;
}

/* --------------------------------------------------------------- card */

.els-blog-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 24px;
	background-color: #ffffff;
	border-radius: 10px;
	transition: background-color .25s ease;
	/* a mesma borda discreta que os cards do arquivo, 1px #e4e7ec no Figma */
	border: 1px solid #e4e7ec;
}

.els-blog-card:hover {
	background-color: #101828;
}

/* ------------------------------------------------------------ imagem */

/* Proporcao 381x240 pelo padding e nao por `aspect-ratio`: no Safari 15 a 17
   o `aspect-ratio` dentro do card (flex em coluna, item de grid) fazia a linha
   da grelha ser medida mais baixa do que o card, e os cards passavam por cima
   dos botoes "Read the blog" e "Listen to the podcast". 240 / 381 = 62.992%. */
.els-blog-card__media {
	position: relative;
	display: block;
	height: 0;
	padding-top: 62.992%;
	border-radius: 5px;
	overflow: hidden;
	background-color: #eaf2fb;
}

.els-blog-card__media img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: scale .4s ease;
}

.els-blog-card:hover .els-blog-card__media img {
	scale: 1.04;
}

.els-blog-card__badge {
	position: absolute;
	right: 15px;
	bottom: 14px;
	width: 44px;
	height: 44px;
	border-radius: 5px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background-color: #ffffff;
	color: #101828;
	transition: background-color .25s ease, color .25s ease;
}

.els-blog-card:hover .els-blog-card__badge {
	background-color: #101828;
	color: #ffffff;
}

.els-blog-card__badge svg {
	width: 12px;
	height: 12px;
	display: block;
	rotate: 0deg;
	transition: rotate .25s ease;
}

/* mesmo padrao dos botoes: no hover a seta fica reta */
.els-blog-card:hover .els-blog-card__badge svg {
	rotate: 45deg;
}

/* ---------------------------------------------------------------- data */

.els-blog-card__date {
	margin: 0;
	display: flex;
	align-items: center;
	gap: 10px;
	font-family: Inter, sans-serif;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.5;
	color: #286191;
	transition: color .25s ease;
}

.els-blog-card__ico {
	width: 24px;
	height: 24px;
	flex: 0 0 auto;
	display: block;
}

.els-blog-card:hover .els-blog-card__date {
	color: #7cb1e5;
}

/* --------------------------------------------------------------- corpo */

.els-blog-card__body {
	display: flex;
	flex-direction: column;
	gap: 14px;
	flex: 1 1 auto;
}

/* tres classes: o Global Kit tem `.elementor-kit-5 h3 { font-size: 24px }`
   (0,2,0) e uma classe unica perde para ele */
.els-blog .els-blog-card .els-blog-card__title,
.els-blog-card__title {
	margin: 0;
	font-family: Urbanist, sans-serif;
	font-size: 22px;
	font-weight: 600;
	line-height: 1.28;
	letter-spacing: -0.01em;
	color: #101828;
	transition: color .25s ease;
	/* tres linhas no maximo, para os cards nao ficarem desiguais */
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.els-blog-card__title a {
	color: inherit;
	text-decoration: none;
}

/* o link cobre o card todo, para a area de clique nao ser so o texto */
.els-blog-card__title a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.els-blog-card__text {
	margin: 0;
	font-family: Inter, sans-serif;
	font-size: 16px;
	line-height: 1.5;
	color: #475467;
	transition: color .25s ease;
	display: -webkit-box;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.els-blog-card:hover .els-blog-card__title,
.els-blog-card:hover .els-blog-card__text {
	color: #ffffff;
}

/* ------------------------------------------------------------- botoes */

.els-blog__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: center;
	/* sem isto os botoes esticam para a altura do mais alto, e um deles
	   arrastava o outro para 58px */
	align-items: center;
}

.els-blog__actions .els-cta {
	text-transform: uppercase;
	font-weight: 700;
}

/* ---------------------------------------------------------- responsivo */

@media (min-width: 768px) and (max-width: 1024px) {
	.els-blog { gap: 32px; }
	.els-blog__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.els-blog-card { padding: 18px; }
	/* Com duas colunas e tres posts sobrava um card sozinho na segunda linha,
	   com meia seccao de branco ao lado. Ficam dois. O terceiro continua no
	   HTML, so nao se mostra: o numero de posts vem da query, que corre no
	   servidor e nao sabe a largura do ecra. */
	.els-blog__grid > li:nth-child(n+3) { display: none; }
}

@media (max-width: 767px) {
	/* mesma escala do Figma mobile que as seccoes nativas */
	.els-blog { gap: 24px; }
	.els-blog__head { gap: 10px; }

	/**
	 * O frame 06 arruma o blog como o 03 dos cursos: os posts passam a correr
	 * de lado, a sangrar pela direita, com os pontos e as setas por baixo. A
	 * grelha e ao mesmo tempo a caixa que rola, por isso o `display: flex`
	 * substitui o grid e o `grid-template-columns` que o controlo do widget
	 * gera fica inerte.
	 */
	.els-blog__grid {
		display: flex;
		width: auto;
		overflow-x: auto;
		overflow-y: hidden;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
		-ms-overflow-style: none;
		margin-right: calc(50% - 50vw);
		padding-right: 20px;
	}
	.els-blog__grid::-webkit-scrollbar { display: none; }

	.els-blog__grid > li {
		flex: 0 0 auto;
		/* sem container queries (Safari ate 15, Chrome ate 104) vale a 1a */
		width: clamp(240px, calc(100vw - 102px), 300px);
		width: clamp(240px, calc(100cqw - 62px), 300px);
		scroll-snap-align: start;
	}

	.els-blog__nav {
		display: flex;
		width: 100%;
		justify-content: space-between;
		align-items: center;
	}
	.els-blog__nav .els-slider__dots { display: flex; }

	
	.els-blog-card { padding: 14px; gap: 12px; }
	.els-blog .els-blog-card .els-blog-card__title,
	.els-blog-card__title { font-size: 20px; }
	.els-blog-card__date { font-size: 15px; }
	.els-blog-card__badge { width: 38px; height: 38px; right: 10px; bottom: 10px; }
	.els-blog__actions { flex-direction: column; align-items: stretch; }
	.els-blog__actions .els-cta { justify-content: space-between; }
}

@media (prefers-reduced-motion: reduce) and (max-width: 0px) /* ignorado a pedido do cliente, ver docs 4 sec. 8 */ {
	.els-blog-card,
	.els-blog-card__media img,
	.els-blog-card__badge,
	.els-blog-card__badge svg { transition: none; }
}