/**
 * course-ads.css — anúncios de curso (modelos interativos).
 *
 * Visual dos modelos de anúncio de curso montados pelo plugin (ex.: "Anúncio
 * interativo 1"). Carregado SÓ nas páginas onde um anúncio de curso é exibido
 * (enfileiramento condicional) e no painel, para o preview do catálogo.
 *
 * Usa variáveis da marca com fallback (var(--ee-blue, #...)) — herda as cores do
 * tema quando presente e funciona isolado (admin) com a paleta educacional.
 *
 * Sumário:
 *   1. Tokens locais (cores rotativas dos botões)
 *   2. Modelo "Anúncio interativo 1" — cabeçalho + lista de botões
 *   3. Botões de curso (cores rotativas, interação, responsivo)
 *   4. Movimento reduzido
 *   5. Contextos por posição (sidebar, âncora, banner, no conteúdo) — desktop/mobile
 *
 * Contexto: a classe `ee-course-ad--ctx-<contexto>` (definida no PHP a partir do
 * slot) adapta o layout ao espaço de cada posição. Mobile-first: o padrão é o
 * cartão empilhado; as variações de desktop entram em min-width: 992px.
 */

/* ==========================================================================
   1. Tokens locais
   ========================================================================== */
.ee-course-ad {
	--eeca-blue: var(--ee-blue, #1565c0);
	--eeca-blue-dark: var(--ee-blue-dark, #0d47a1);
	--eeca-blue-light: var(--ee-blue-light, #e3f2fd);
	--eeca-orange: var(--ee-orange, #fb8c00);
	--eeca-green: #43a047;
	--eeca-sky: #2196d3;
	--eeca-text: var(--ee-text, #1a2233);
	--eeca-white: var(--ee-white, #ffffff);
	--eeca-radius: var(--ee-radius-md, 0.75rem);
	--eeca-radius-lg: 1rem;

	box-sizing: border-box;
	width: 100%;
	max-width: 420px;
	margin-inline: auto;
	font-family: inherit;
}

.ee-course-ad *,
.ee-course-ad *::before,
.ee-course-ad *::after {
	box-sizing: border-box;
}

/* ==========================================================================
   2. Modelo "Anúncio interativo 1" — cabeçalho
   ========================================================================== */
.ee-course-ad--interativo-1 {
	padding: 1rem;
	background:
		radial-gradient(120% 90% at 100% 0%, rgba(33, 150, 211, 0.08), transparent 60%),
		var(--eeca-white);
	border: 1px solid var(--eeca-blue-light);
	border-radius: var(--eeca-radius-lg);
	box-shadow: 0 6px 18px rgba(26, 34, 51, 0.06);
}

.ee-course-ad__header {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.15rem;
	margin-bottom: 0.85rem;
	padding-bottom: 0.75rem;
	border-bottom: 1px dashed var(--eeca-blue-light);
}

.ee-course-ad__badge {
	display: inline-block;
	margin-bottom: 0.25rem;
	padding: 0.15rem 0.6rem;
	font-size: 0.66rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--eeca-white);
	background-color: var(--eeca-green);
	border-radius: 999px;
}

.ee-course-ad__title {
	font-size: 1.15rem;
	font-weight: 800;
	line-height: 1.15;
	color: var(--eeca-blue-dark);
}

.ee-course-ad__subtitle {
	font-size: 0.82rem;
	color: var(--eeca-text);
	opacity: 0.75;
}

/* ==========================================================================
   3. Lista + botões de curso
   ========================================================================== */
.ee-course-ad__list {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ee-course-ad__item {
	margin: 0;
	padding: 0;
}

.ee-course-ad__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	min-height: 56px;
	padding: 0.7rem 0.9rem;
	text-decoration: none;
	background-color: var(--eeca-blue);
	border-radius: var(--eeca-radius);
	box-shadow: 0 3px 0 rgba(0, 0, 0, 0.12);
	transition:
		transform 0.14s ease,
		box-shadow 0.14s ease,
		filter 0.14s ease;
}

/* Cor do texto SEMPRE branca, inclusive quando o anúncio é injetado no corpo do
   post — onde o tema aplica `.single-content a { color: var(--ee-blue) }` (e
   regras de :hover/:focus). O ancestral `.ee-course-ad` eleva a especificidade
   acima dessa regra (2 classes > 1 classe + 1 elemento) e cobre todos os estados,
   sem !important e sem tocar no CSS do tema. */
.ee-course-ad .ee-course-ad__link,
.ee-course-ad .ee-course-ad__link:link,
.ee-course-ad .ee-course-ad__link:visited,
.ee-course-ad .ee-course-ad__link:hover,
.ee-course-ad .ee-course-ad__link:focus,
.ee-course-ad .ee-course-ad__link:active {
	color: var(--eeca-white);
}

/* Os filhos herdam a cor do link (o tema não os atinge, mas garantimos). */
.ee-course-ad .ee-course-ad__name,
.ee-course-ad .ee-course-ad__cta,
.ee-course-ad .ee-course-ad__arrow {
	color: inherit;
}

.ee-course-ad__name {
	font-size: 0.98rem;
	font-weight: 700;
	line-height: 1.2;
}

.ee-course-ad__cta {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	flex: 0 0 auto;
	padding: 0.2rem 0.55rem;
	font-size: 0.78rem;
	font-weight: 600;
	background-color: rgba(255, 255, 255, 0.18);
	border-radius: 999px;
}

.ee-course-ad__arrow {
	font-size: 1rem;
	line-height: 1;
	transition: transform 0.14s ease;
}

/* Cores rotativas (paleta educacional, "sem cara de anúncio"). */
.ee-course-ad__link--c1 {
	background-color: var(--eeca-blue);
}

.ee-course-ad__link--c2 {
	background-color: var(--eeca-orange);
}

.ee-course-ad__link--c3 {
	background-color: var(--eeca-green);
}

.ee-course-ad__link--c4 {
	background-color: var(--eeca-sky);
}

/* Interação: leve elevação + seta avança. */
.ee-course-ad__link:hover,
.ee-course-ad__link:focus-visible {
	transform: translateY(-2px);
	box-shadow: 0 6px 14px rgba(26, 34, 51, 0.22);
	filter: brightness(1.04);
	outline: none;
}

.ee-course-ad__link:focus-visible {
	outline: 3px solid var(--eeca-blue-dark);
	outline-offset: 2px;
}

.ee-course-ad__link:hover .ee-course-ad__arrow,
.ee-course-ad__link:focus-visible .ee-course-ad__arrow {
	transform: translateX(3px);
}

.ee-course-ad__link:active {
	transform: translateY(0);
	box-shadow: 0 2px 0 rgba(0, 0, 0, 0.12);
}

/* Em containers estreitos (sidebar bem fina), a CTA recolhe o texto e mantém só
   a seta, preservando o nome do curso legível. */
@media (max-width: 360px) {
	.ee-course-ad__cta-text {
		display: none;
	}
}

/* ==========================================================================
   4. Movimento reduzido
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
	.ee-course-ad__link,
	.ee-course-ad__arrow {
		transition: none;
	}
	.ee-course-ad__link:hover,
	.ee-course-ad__link:focus-visible {
		transform: none;
	}
}

/* ==========================================================================
   5. Contextos por posição
   ==========================================================================
   Cada posição da aba "Anúncios" recebe uma classe de contexto (no PHP, a partir
   do slot). Mobile-first: o padrão continua o cartão empilhado (~ ideal em telas
   estreitas); as variações desktop entram a partir de 992px para aproveitar o
   espaço maior. Quantidade de cursos por contexto é definida no PHP.
   -------------------------------------------------------------------------- */

/* ---- 5.1 SIDEBAR: vertical. No desktop ganha mais altura/itens. -------------
   No mobile a barra lateral cai abaixo do conteúdo: mantém o cartão padrão. */
.ee-course-ad--ctx-sidebar {
	max-width: 100%;
}

@media (min-width: 992px) {
	/* Reserva espaço vertical (formato "skyscraper" ~600px): a lista cresce e os
	   botões ganham um respiro a mais entre si. */
	.ee-course-ad--ctx-sidebar.ee-course-ad--interativo-1 {
		min-height: 600px;
		display: flex;
		flex-direction: column;
	}

	.ee-course-ad--ctx-sidebar .ee-course-ad__list {
		flex: 1 1 auto;
		gap: 0.7rem;
	}

	.ee-course-ad--ctx-sidebar .ee-course-ad__link {
		min-height: 64px;
	}
}

/* ---- 5.2 ÂNCORA MOBILE: faixa baixa (~50px), 1 curso, horizontal. -----------
   Sem cabeçalho (badge/título/subtítulo ocultos): só o curso + "Acessar" numa
   linha, para caber na altura mínima da âncora fixa. */
.ee-course-ad--ctx-anchor {
	max-width: 100%;
}

.ee-course-ad--ctx-anchor.ee-course-ad--interativo-1 {
	/* O botão "×" de fechar fica EM CIMA da faixa (ver ads.css do tema), então o
	   anúncio pode usar a largura toda. */
	padding: 0.25rem 0.5rem;
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

.ee-course-ad--ctx-anchor .ee-course-ad__header {
	display: none; /* sem cabeçalho na âncora — espaço é mínimo. */
}

.ee-course-ad--ctx-anchor .ee-course-ad__list {
	margin: 0;
	gap: 0;
}

.ee-course-ad--ctx-anchor .ee-course-ad__link {
	min-height: 40px;
	padding: 0.3rem 0.6rem;
	box-shadow: none;
	border-radius: var(--eeca-radius);
}

.ee-course-ad--ctx-anchor .ee-course-ad__name {
	font-size: 0.9rem;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Na âncora, o nome é prefixado por "Curso " (ex.: "Curso Básico de Canva").
   Feito via CSS para não alterar o nome salvo nem afetar os outros contextos. */
.ee-course-ad--ctx-anchor .ee-course-ad__name::before {
	content: "Curso ";
}

.ee-course-ad--ctx-anchor .ee-course-ad__cta {
	padding: 0.15rem 0.5rem;
	font-size: 0.74rem;
}

/* Na âncora, hover não eleva (a faixa é fixa e baixa). */
.ee-course-ad--ctx-anchor .ee-course-ad__link:hover,
.ee-course-ad--ctx-anchor .ee-course-ad__link:focus-visible {
	transform: none;
	box-shadow: none;
}

/* ---- 5.3 NO CONTEÚDO (inline): no desktop ocupa 100% e fica horizontal. ------
   Cabeçalho à esquerda e a grade de cursos à direita, aproveitando a largura do
   corpo do post. No mobile, mantém o cartão empilhado. */
.ee-course-ad--ctx-inline {
	max-width: 100%;
}

@media (min-width: 992px) {
	.ee-course-ad--ctx-inline.ee-course-ad--interativo-1 {
		display: grid;
		grid-template-columns: minmax(180px, 240px) 1fr;
		gap: 1.25rem;
		align-items: center;
		padding: 1.25rem 1.5rem;
	}

	.ee-course-ad--ctx-inline .ee-course-ad__header {
		margin-bottom: 0;
		padding-bottom: 0;
		border-bottom: 0;
	}

	/* Cursos em colunas (2+), aproveitando a largura total. */
	.ee-course-ad--ctx-inline .ee-course-ad__list {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 0.6rem;
	}
}

/* ---- 5.4 BANNER (topos/meios): no desktop fica comprido e horizontal. --------
   Bom para home e topos de listagem: cabeçalho à esquerda, cursos em linha à
   direita. No mobile, mantém o cartão empilhado. */
.ee-course-ad--ctx-banner {
	max-width: 100%;
}

@media (min-width: 992px) {
	.ee-course-ad--ctx-banner.ee-course-ad--interativo-1 {
		display: grid;
		grid-template-columns: minmax(200px, 280px) 1fr;
		gap: 1.5rem;
		align-items: center;
		padding: 1.25rem 1.75rem;
	}

	.ee-course-ad--ctx-banner .ee-course-ad__header {
		margin-bottom: 0;
		padding-bottom: 0;
		border-bottom: 0;
	}

	/* Cursos lado a lado (auto-fit), enchendo a faixa larga. */
	.ee-course-ad--ctx-banner .ee-course-ad__list {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
		gap: 0.6rem;
	}

	.ee-course-ad--ctx-banner .ee-course-ad__link {
		min-height: 52px;
	}
}