/**
 * Sliders ELS: cursos e depoimentos.
 *
 * O viewport tem a largura do bloco de conteudo (1320px), entao a trilha nunca
 * sai do padrao do site. Os cards tem largura fixa, o que faz o ultimo aparecer
 * cortado pela metade: e esse pedaco visivel que avisa que ha mais para o lado,
 * o mesmo efeito do Figma, sem vazar para fora da tela.
 */

.els-slider {
	width: 100%;
	max-width: 1320px;
	margin-inline: auto;
	display: flex;
	flex-direction: column;
	gap: 40px;
}

/* o CTA e filho directo do slider, que e um flex column: sem isto o botao
   estica para a largura toda em vez de ficar do tamanho do texto */
.els-slider > .els-cta {
	align-self: flex-start;
}

/* -------------------------------------------------------------- cabecalho */

.els-slider__head {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.els-slider__eyebrow {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	font-family: Urbanist, sans-serif;
	font-size: 14px;
	font-weight: 700;
	/* todos os eyebrows do site sao em caixa alta, como no Figma; o
	   letter-spacing negativo do texto corrido nao serve para maiusculas */
	text-transform: uppercase;
	letter-spacing: .04em;
	color: #475467;
}

.els-slider__dot {
	flex: 0 0 auto;
	width: 6px;
	height: 6px;
	/* quadrado, nao redondo: no Figma e um rectangulo de 6x6 com raio 1 */
	border-radius: 1px;
	background-color: #286191;
}

.els-slider__headrow {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
}

.els-slider__title {
	margin: 0;
	font-family: Urbanist, sans-serif;
	font-size: 42px;
	font-weight: 600;
	line-height: 1.14;
	letter-spacing: -0.01em;
	color: #101828;
	text-wrap: balance;
}

.els-slider__intro {
	margin: 0;
	max-width: 62ch;
	font-family: Inter, sans-serif;
	font-size: 16px;
	line-height: 1.5;
	color: #475467;
}

/* ------------------------------------------------------------------ setas */

.els-slider__nav {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 10px;
	flex: 0 0 auto;
}

.els-slider__arrows {
	display: flex;
	gap: 10px;
}

/* Os pontos so existem no telemovel; no desktop as setas bastam e estao no
   canto de cima, como no Figma. */
.els-slider__dots {
	display: none;
	align-items: center;
	gap: 5px;
}

.els-slider__dot-nav {
	width: 7px;
	height: 7px;
	border-radius: 999px;
	background-color: #b5d5f0;
	transition: width .25s ease, background-color .25s ease;
}

.els-slider__dot-nav.is-active {
	width: 18px;
	background-color: #286191;
}

/**
 * Setas: sao accao e nao navegacao, por isso <button>.
 *
 * O seletor leva tres classes de proposito. O Global Kit do Elementor tem
 * `.elementor-kit-5 button { color: #ffffff }` (0,2,0), e como a seta e um
 * SVG com stroke="currentColor", uma regra de classe unica perdia e a seta
 * ficava branca sobre fundo branco, invisivel ate o hover.
 */
/* o tema pinta <button> com `.elementor-kit-N button`, que ganha a um seletor
   de uma so classe: daqui a lista de seletores compostos */
.els-slider .els-slider__nav .els-slider__arrow,
.els-blog .els-blog__nav .els-slider__arrow,
.els-acc .els-acc__nav .els-slider__arrow,
.els-slider__arrow {
	width: 46px;
	height: 46px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 1px solid #d0d5dd;
	border-radius: 5px;
	/* o tema pinta <button> por conta propria, por isso o !important */
	background-color: #ffffff !important;
	color: #101828;
	cursor: pointer;
	transition: background-color .2s ease, border-color .2s ease, opacity .2s ease;
}

.els-slider .els-slider__nav .els-slider__arrow:hover:not(:disabled),
.els-slider .els-slider__nav .els-slider__arrow:focus-visible:not(:disabled),
.els-blog .els-blog__nav .els-slider__arrow:hover:not(:disabled),
.els-blog .els-blog__nav .els-slider__arrow:focus-visible:not(:disabled),
.els-acc .els-acc__nav .els-slider__arrow:hover:not(:disabled),
.els-acc .els-acc__nav .els-slider__arrow:focus-visible:not(:disabled),
.els-slider__arrow:hover:not(:disabled),
.els-slider__arrow:focus-visible:not(:disabled) {
	background-color: #101828 !important;
	border-color: #101828;
	color: #ffffff;
}

.els-slider .els-slider__nav .els-slider__arrow:disabled,
.els-blog .els-blog__nav .els-slider__arrow:disabled,
.els-acc .els-acc__nav .els-slider__arrow:disabled,
.els-slider__arrow:disabled {
	opacity: .35;
	cursor: default;
}

.els-acc .els-acc__nav .els-slider__arrow svg,
.els-slider__arrow svg {
	width: 19px;
	height: 16px;
	display: block;
}

.els-acc .els-acc__nav .els-slider__arrow[data-dir="next"] svg,
.els-slider__arrow[data-dir="next"] svg {
	rotate: 180deg;
}

/* quando tudo cabe na tela nao ha o que navegar */
.els-slider.is-static .els-slider__nav {
	display: none;
}

/* --------------------------------------------------------------- trilha */

.els-slider__viewport {
	width: 100%;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-ms-overflow-style: none;
	/* espaco para a sombra dos cards nao ser cortada */
	padding-block: 4px;
}

.els-slider__viewport::-webkit-scrollbar {
	display: none;
}

.els-slider__track {
	display: flex;
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
	width: max-content;
}

.els-slider__track > * {
	scroll-snap-align: start;
	flex: 0 0 auto;
}

/* ------------------------------------------- o slider de cursos, centrado */

/**
 * No frame 03 · Featured Programmes o eyebrow e o titulo estao centrados, as
 * setas ficam numa linha propria alinhada a direita, e o botao final tambem
 * e centrado. O slider de depoimentos tem outro desenho, por isso estas
 * regras sao so para --courses.
 */

.els-slider--courses {
	/* referencia para o cqw do card, ver .els-course-card */
	container-type: inline-size;
}


.els-slider--courses .els-slider__head {
	align-items: center;
	text-align: center;
	gap: 12px;
}

.els-slider--courses .els-slider__intro {
	margin-inline: auto;
	text-align: center;
}

/* linha propria, encostada a direita */
.els-slider--courses .els-slider__nav {
	align-self: flex-end;
	margin-block: -16px 0;
}

.els-slider--courses > .els-cta {
	align-self: center;
	text-transform: uppercase;
	font-weight: 700;
}

/* ------------------------------------------------------- card de curso */

/**
 * Medidas tiradas do frame 03 · Featured Programmes (783:4351):
 *   card    429x544, raio 10, padding 14
 *   media   401x266, raio 5, com badge de 40x40 a 12px do canto inferior direito
 *   titulo  24/600   descricao 16/400   specs 16/400 com icone de 20px
 *   preco   32/600 em #286191 e o periodo 16/400 em #98a2b3
 *
 * O card escuro que aparece no mock e o estado de HOVER, nao um destaque fixo:
 * no Figma sao o primeiro card e a seta da direita, que e onde o cursor estaria.
 */

.els-course-card {
	/**
	 * Fluido em vez dos 429px fixos do Figma. Com largura fixa, assim que o
	 * conteudo encolhia abaixo de 1320 o terceiro card ficava cortado ao meio
	 * e parecia defeito, mesmo sendo o slider a funcionar.
	 *
	 * A conta e a largura do proprio slider menos os dois gaps, dividido por 3.
	 * Nunca passa dos 429 do desenho nem desce abaixo de 300.
	 *
	 * A medida vem em cqw, do container, e nao em vw: `100vw` conta a barra de
	 * rolagem, entao num ecra de 1043 dava 321px por card, 995 no total, dentro
	 * de um viewport de 980 -- os 15px da barra saiam pela direita e comiam a
	 * borda do terceiro card.
	 */
	/* sem container queries (Safari ate 15, Chrome ate 104) vale a 1a, em vw
	   com folga para a barra de rolagem */
	width: clamp(300px, calc((min(100vw - 100px, 1320px) - 32px) / 3), 429px);
	width: clamp(300px, calc((100cqw - 32px) / 3), 429px);
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 14px;
	background-color: #ffffff;
	border-radius: 10px;
	transition: background-color .25s ease;
}

/**
 * O escuro comeca no primeiro cartao e segue o rato.
 *
 * Sem ninguem em cima, e o primeiro que o leva - a fila nunca aparece toda
 * apagada. Assim que o rato entra num cartao, o `:not(:has())` deixa de valer
 * para o primeiro e o escuro passa para aquele; ao sair, volta.
 *
 * O zoom da foto e a rotacao da seta ficam de fora de proposito: sao gestos de
 * resposta ao rato, nao um estado, e por omissao ficariam presos.
 */
.els-course-card:hover,
.els-slider__track:not(:has(.els-course-card:hover)) .els-course-card:first-child {
	background-color: #101828;
}

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

.els-course-card__media {
	position: relative;
	display: block;
	aspect-ratio: 401 / 266;
	border-radius: 5px;
	overflow: hidden;
	background-color: #eaf2fb;
}

.els-course-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: scale .4s ease;
}

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

/* o badge acompanha a cor do card: branco no claro, escuro no hover */
.els-course-card__badge {
	position: absolute;
	right: 12px;
	bottom: 12px;
	width: 40px;
	height: 40px;
	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-course-card:hover .els-course-card__badge,
.els-slider__track:not(:has(.els-course-card:hover)) .els-course-card:first-child .els-course-card__badge {
	background-color: #101828;
	color: #ffffff;
}

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

/* mesma regra dos botoes: no hover a seta fica reta */
.els-course-card:hover .els-course-card__badge svg {
	rotate: 45deg;
}

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

.els-course-card__body {
	display: flex;
	flex-direction: column;
	gap: 20px;
	padding: 4px 8px 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-slider .els-course-card .els-course-card__title,
.els-course-card__title {
	margin: 0;
	font-family: Urbanist, sans-serif;
	font-size: 22px;
	font-weight: 600;
	line-height: 1.17;
	letter-spacing: -0.01em;
	color: #101828;
	transition: color .25s ease;
}

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

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

.els-course-card { position: relative; }

.els-course-card__text {
	margin: -8px 0 0;
	font-family: Inter, sans-serif;
	font-size: 16px;
	line-height: 1.5;
	color: #475467;
	transition: color .25s ease;
}

.els-course-card:hover .els-course-card__title,
.els-course-card:hover .els-course-card__text,
.els-slider__track:not(:has(.els-course-card:hover)) .els-course-card:first-child .els-course-card__title,
.els-slider__track:not(:has(.els-course-card:hover)) .els-course-card:first-child .els-course-card__text {
	color: #ffffff;
}

/* ---------------------------------------------------------- as specs */

.els-course-card__specs {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px 24px;
	margin-top: auto;
}

.els-course-card__spec {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: Inter, sans-serif;
	font-size: 16px;
	line-height: 1.5;
	color: #101828;
	white-space: nowrap;
	transition: color .25s ease;
}

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

.els-course-card:hover .els-course-card__spec,
.els-slider__track:not(:has(.els-course-card:hover)) .els-course-card:first-child .els-course-card__spec {
	color: #ffffff;
}

/* ---------------------------------------------------------- o preco */

.els-course-card__price {
	margin: 0;
	display: flex;
	align-items: baseline;
	gap: 8px;
	font-family: Urbanist, sans-serif;
}

.els-course-card__price strong {
	font-size: 32px;
	font-weight: 600;
	line-height: 1.19;
	letter-spacing: -0.01em;
	color: #286191;
	transition: color .25s ease;
}

.els-course-card__price span {
	font-family: Inter, sans-serif;
	font-size: 16px;
	font-weight: 400;
	color: #98a2b3;
}

.els-course-card:hover .els-course-card__price strong,
.els-slider__track:not(:has(.els-course-card:hover)) .els-course-card:first-child .els-course-card__price strong {
	color: #ffffff;
}

/* ------------------------------------ o slider de depoimentos, a sangrar */

/**
 * No frame 09 · Student reviews o track comeca na margem do conteudo (x=60)
 * mas tem 1572px de largura, ou seja corre 192px para alem da tela de 1440.
 * E o corte deliberado que avisa que ha mais para o lado.
 *
 * `calc(50% - 50vw)` da a distancia entre a borda direita do bloco de 1320 e
 * a borda do ecra, com sinal negativo: a margem puxa o viewport ate la. A
 * seccao tem overflow hidden, entao nada disto gera rolagem na pagina.
 */
.els-slider--quotes .els-slider__viewport {
	/* o width: 100% da regra base prende a caixa em 1320 e a margem negativa
	   so a deslocava; com auto o item estica e a margem alarga-o de facto */
	width: auto;
	margin-right: calc(50% - 50vw);
}

/* no Figma o espaco entre depoimentos e 20, nao os 16 dos cursos */
.els-slider--quotes .els-slider__track {
	gap: 20px;
	padding-right: 24px;
}

/* mesmo padrao dos cards de curso: o escuro do mock e o estado de hover */
.els-quote-card {
	transition: background-color .25s ease, border-color .25s ease;
}

.els-quote-card:not(.els-quote-card--featured):hover {
	background-color: #286191;
	border-color: #286191;
}

.els-quote-card:not(.els-quote-card--featured):hover .els-quote-card__text,
.els-quote-card:not(.els-quote-card--featured):hover .els-quote-card__name {
	color: #ffffff;
}

.els-quote-card:not(.els-quote-card--featured):hover .els-quote-card__role {
	color: #d0e7f6;
}

.els-quote-card:not(.els-quote-card--featured):hover .els-quote-card__glyph {
	color: #7cb1e5;
}

.els-quote-card:not(.els-quote-card--featured):hover .els-quote-card__avatar {
	background-color: #7cb1e5;
	color: #101828;
}

.els-quote-card:not(.els-quote-card--featured):hover .els-quote-card__sep {
	background-color: #ffffff;
	opacity: .25;
}

@media (max-width: 767px) {
}

/* --------------------------------------------------- card de depoimento */

.els-quote-card {
	width: 378px;
	display: flex;
	flex-direction: column;
	/* 32 de espacamento e 24 entre os blocos: e o que os frames pedem, tanto o
	   da seccao de passagem como o da pagina de reviews */
	gap: 24px;
	padding: 32px;
	border-radius: 10px;
	background-color: #ffffff;
	border: 1px solid #e4e7ec;
}

/* o primeiro card e o destaque, como no Figma */
.els-quote-card--featured {
	background-color: #286191;
	border-color: #286191;
}

.els-quote-card__glyph {
	width: 24px;
	height: 20px;
	flex: 0 0 auto;
	color: #e4e7ec;
}

.els-quote-card--featured .els-quote-card__glyph {
	color: #7cb1e5;
}

.els-quote-card__text {
	margin: 0;
	font-family: Inter, sans-serif;
	font-size: 16px;
	line-height: 1.55;
	color: #475467;
	flex: 1 1 auto;
}

.els-quote-card--featured .els-quote-card__text {
	color: #ffffff;
}

.els-quote-card__sep {
	height: 1px;
	border: 0;
	margin: 0;
	background-color: #e4e7ec;
}

.els-quote-card--featured .els-quote-card__sep {
	background-color: #ffffff;
	opacity: .25;
}

.els-quote-card__author {
	display: flex;
	align-items: center;
	gap: 12px;
}

.els-quote-card__avatar {
	width: 40px;
	height: 40px;
	flex: 0 0 auto;
	border-radius: 5px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background-color: #eaf2fb;
	color: #286191;
	font-family: Urbanist, sans-serif;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .02em;
	overflow: hidden;
}

.els-quote-card__avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.els-quote-card--featured .els-quote-card__avatar {
	background-color: #7cb1e5;
	color: #101828;
}

.els-quote-card__name {
	margin: 0;
	font-family: Urbanist, sans-serif;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.2;
	color: #101828;
}

.els-quote-card__role {
	margin: 0;
	font-family: Inter, sans-serif;
	font-size: 14px;
	line-height: 1.3;
	color: #475467;
}

.els-quote-card--featured .els-quote-card__name { color: #ffffff; }
.els-quote-card--featured .els-quote-card__role { color: #d0e7f6; }

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

@media (max-width: 1024px) {
	.els-slider { gap: 32px; }
	.els-slider__title { font-size: 34px; }
	/**
	 * Dois cards por vista, e fluidos.
	 *
	 * Estavam em 360px fixos: a 705 de largura util dois cards mais o gap dao
	 * 736 e o segundo saia cortado. E a conta de tres cards do desktop tambem
	 * nao servia aqui, porque bate no minimo de 300px por volta dos 1028 e a
	 * partir dai e o terceiro que fica cortado.
	 */
	.els-course-card { width: clamp(260px, calc((100vw - 96px) / 2), 520px); width: clamp(260px, calc((100cqw - 16px) / 2), 520px); }
	.els-quote-card  { width: 340px; }
}

@media (max-width: 767px) {
	.els-slider { gap: 24px; }
	.els-slider__head { gap: 10px; }
	.els-slider--courses .els-slider__head { gap: 10px; }

	/**
	 * No telemovel o cabecalho encosta a esquerda, mas o intro ficava para
	 * tras: a regra que o centra nao tem media query, entao sobrevivia aqui e
	 * o paragrafo aparecia centrado por baixo de um pre-titulo e de um titulo
	 * ja encostados. Volta a alinhar com eles.
	 */
	.els-slider--courses .els-slider__intro {
		margin-inline: 0;
		text-align: left;
	}
	.els-slider__title { font-size: 28px; }
	/* No frame 03 do Figma mobile a trilha mede 924 para tres cards com 24 de
	   gap: 292 cada, largura que deixa o seguinte espreitar e diz que se pode
	   arrastar. O tecto e o chao existem para os ecras de 320 e de 500. */
	.els-course-card { width: clamp(240px, calc(100vw - 102px), 300px); width: clamp(240px, calc(100cqw - 62px), 300px); }

	/**
	 * O frame 03 do Figma mobile arruma a seccao por outra ordem: o cabecalho
	 * encostado a esquerda, o carrossel a sangrar para fora do ecra pela
	 * direita, e por baixo uma linha de controlos com os pontos a esquerda e as
	 * setas a direita. O botao fecha, a toda a largura.
	 *
	 * A ordem vem do `order`, nao de HTML diferente: `.els-slider` ja e uma
	 * coluna flex com estes quatro filhos.
	 */
	/**
	 * Nos depoimentos as setas vivem dentro do cabecalho, ao lado do titulo,
	 * que e o desenho do desktop. Para as por em baixo sem mudar a arvore, o
	 * cabecalho e a sua linha deixam de gerar caixa e os filhos sobem para o
	 * mesmo contentor flex do carrossel, onde o `order` ja os alcanca.
	 */
	.els-slider--quotes .els-slider__head,
	.els-slider--quotes .els-slider__headrow { display: contents; }
	.els-slider--quotes .els-slider__headtext { order: 1; }
	.els-slider--quotes .els-slider__nav      { order: 3; }

	.els-slider .els-slider__head     { order: 1; }
	.els-slider .els-slider__viewport { order: 2; }
	.els-slider .els-slider__nav      { order: 3; }
	.els-slider > .els-cta            { order: 4; }

	.els-slider .els-slider__headrow,
	.els-slider .els-slider__head {
		align-items: flex-start;
		text-align: left;
	}
	.els-slider .els-slider__intro { margin-inline: 0; }

	/**
	 * O titulo ocupa a largura toda.
	 *
	 * Com o `align-items: flex-start` de cima os filhos do cabecalho passam a
	 * medir-se pelo conteudo, e o `text-wrap: balance` reparte o titulo em duas
	 * linhas iguais em vez de encher a primeira: "Find the right / course for
	 * you." em vez de "Find the right course / for you.". Nesta largura nao ha
	 * folga para dar ao equilibrio.
	 */
	.els-slider .els-slider__title,
	.els-slider .els-slider__intro {
		width: 100%;
		text-wrap: wrap;
	}

	.els-slider__nav {
		width: 100%;
		justify-content: space-between;
	}
	.els-slider__dots { display: flex; }

	/* A trilha corre ate a borda do ecra: a margem negativa desfaz o padding
	   lateral da seccao, e o padding na trilha devolve a folga no fim. */
	.els-slider .els-slider__viewport {
		/* `width: auto` e obrigatorio: com os 100% da regra base a caixa fica
		   presa nos 362 e a margem negativa so a desloca, sem alargar. */
		width: auto;
		margin-right: calc(50% - 50vw);
	}
	.els-slider .els-slider__track {
		padding-right: 20px;
	}

	.els-slider > .els-cta {
		width: 100%;
		justify-content: space-between;
		/* dois pontos abaixo do resto: e a etiqueta mais comprida da pagina e
		   nesta largura partia em duas linhas */
		font-size: 13px;
	}
	.els-slider__headrow {
		flex-direction: column;
		align-items: flex-start;
		gap: 16px;
	}
	.els-quote-card { width: 82vw; max-width: 340px; }
	.els-course-card { padding: 10px; gap: 12px; }
	.els-course-card__body { padding: 4px 6px 10px; gap: 16px; }
	.els-course-card__title { font-size: 20px; }
	.els-course-card__text,
	.els-course-card__spec { font-size: 15px; }
	.els-slider--courses .els-slider__nav { margin-block: 0; }
	.els-quote-card { padding: 20px; }
	.els-course-card__price strong { font-size: 28px; }
	.els-course-card__badge { width: 34px; height: 34px; right: 10px; bottom: 10px; }
}

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

/**
 * Os depoimentos em grelha.
 *
 * O carrossel usa scroll nativo com scroll-snap, nao transform, portanto virar
 * grelha e so deixar a trilha quebrar linha: nao ha posicao escrita pelo
 * JavaScript para desfazer. Os controlos saem porque nao ha nada para
 * controlar quando esta tudo a vista.
 *
 * Tres por linha no frame 783:13941, duas no tablet e uma no telemovel.
 */
/*
 * O carrossel sangra para a direita com uma margem negativa, para o cartao
 * seguinte espreitar. Em grelha nao ha proximo a espreitar: a trilha volta a
 * caber na coluna de 1320.
 */
.els-slider--grelha .els-slider__viewport {
	overflow: visible;
	scroll-snap-type: none;
	margin-right: 0;
	padding-block: 0;
}

/*
 * A trilha do carrossel e `width: max-content` - cresce com os cartoes, que e
 * o que a faz deslizar. Em grelha isso nao serve: sem largura fechada, o
 * `calc(100% / 3)` do cartao resolvia contra uma trilha de seis mil pixeis.
 */
.els-slider--grelha .els-slider__track {
	width: 100%;
	flex-wrap: wrap;
	gap: 20px;
}

/* a folga da direita e para o carrossel sangrar; em grelha nao ha sangria */
.els-slider--grelha .els-slider__track,
.els-slider--quotes.els-slider--grelha .els-slider__track { padding-right: 0; }

.els-slider--grelha .els-quote-card {
	width: calc((100% - 40px) / 3);
}

/**
 * O mesmo para os cartoes de curso, no catalogo.
 *
 * No carrossel a largura vem em `cqw` do contentor, porque a trilha e mais
 * larga que a coluna. Em grelha a trilha ja fecha nos 1320, entao a conta
 * pode ser em percentagem do proprio track.
 */
.els-slider--grelha .els-course-card {
	width: calc((100% - 40px) / 3);
	max-width: none;
}

.els-slider--grelha .els-slider__nav { display: none; }

/*
 * Sem setas ao lado, a cabeca deixa de ser meia linha e passa a linha inteira,
 * como no frame - o titulo e o texto alinhados a esquerda sobre os 1320.
 */
.els-slider--grelha .els-slider__headtext { flex: 1 1 100%; }
.els-slider--grelha .els-slider__intro { max-width: none; }

@media (max-width: 1024px) {
	.els-slider--grelha .els-quote-card { width: calc((100% - 20px) / 2); }
	.els-slider--grelha .els-course-card { width: calc((100% - 20px) / 2); }
}

@media (max-width: 767px) {
	.els-slider--grelha .els-slider__track { gap: 12px; }

	/* o `max-width: 340px` do carrossel nao serve aqui: em grelha o cartao
	   ocupa a linha toda, como no frame 783:25970 */
	.els-slider--grelha .els-quote-card {
		width: 100%;
		max-width: none;
		gap: 16px;
		padding: 20px 18px;
	}

	.els-slider--grelha .els-course-card {
		width: 100%;
		max-width: none;
	}
}

/* ------------------------------------------- navegadores sem :has() */
/* Em Firefox < 121 e Chrome < 105 as listas com `:has()` caem inteiras, o hover
   incluido. `.els-sem-has` e `.els-com-hover` vem do els-anim.js. */
.els-sem-has .els-course-card:hover,
.els-sem-has .els-slider__track:not(.els-com-hover) .els-course-card:first-child {
	background-color: #101828;
}
.els-sem-has .els-course-card:hover .els-course-card__badge,
.els-sem-has .els-slider__track:not(.els-com-hover) .els-course-card:first-child .els-course-card__badge {
	background-color: #101828;
	color: #ffffff;
}
.els-sem-has .els-course-card:hover .els-course-card__title,
.els-sem-has .els-course-card:hover .els-course-card__text,
.els-sem-has .els-course-card:hover .els-course-card__spec,
.els-sem-has .els-course-card:hover .els-course-card__price strong,
.els-sem-has .els-slider__track:not(.els-com-hover) .els-course-card:first-child .els-course-card__title,
.els-sem-has .els-slider__track:not(.els-com-hover) .els-course-card:first-child .els-course-card__text,
.els-sem-has .els-slider__track:not(.els-com-hover) .els-course-card:first-child .els-course-card__spec,
.els-sem-has .els-slider__track:not(.els-com-hover) .els-course-card:first-child .els-course-card__price strong {
	color: #ffffff;
}

/* ------------------------------- navegadores sem rotate/translate soltos */
/* Chrome < 104 nao conhece `rotate` como propriedade: a seta "seguinte" ficava
   a apontar para tras. */
@supports not (rotate: 0deg) {
	.els-acc .els-acc__nav .els-slider__arrow[data-dir="next"] svg,
	.els-slider__arrow[data-dir="next"] svg {
		transform: rotate(180deg);
	}
}