/**
 * Card da agenda de treinamentos.
 *
 * Fica fora do style.scss de propósito: o tema compila SCSS por fora e não há
 * toolchain aqui, então este arquivo é enfileirado depois e é trivial de
 * reverter. Escopo todo em .ag-card, sem tocar em nada existente.
 *
 * Direção: o card antigo pintava uma faixa enorme com a cor do curso e
 * centralizava tudo, então vinte cards viravam vinte blocos iguais gritando.
 * Aqui a cor é acento (filete lateral, olho e trilha) e o peso visual vai para
 * a informação que decide a compra: quando começa, em que ano, e como os dias
 * se distribuem.
 */

.ag-card {
	--ag: #6f7ba8;
	--ag-tinta: #14161f;
	--ag-suave: #6b7280;
	--ag-linha: #e8eaf0;

	position: relative;
	display: flex;
	flex-direction: column;
	gap: 14px;
	width: 100%;
	max-width: 320px;
	padding: 22px 22px 20px 26px;
	box-sizing: border-box;
	text-align: left;
	background: #fff;
	border-radius: 16px;
	box-shadow: 0 10px 30px rgba(16, 22, 51, 0.13);
	overflow: hidden;
}

/* Filete que arquiva o card sob o curso, no lugar da faixa cheia. */
.ag-card::before {
	content: "";
	position: absolute;
	inset: 0 auto 0 0;
	width: 5px;
	background: var(--ag);
}

.ag-card--practitioner { --ag: #10baf3; }
.ag-card--master       { --ag: #c55dd1; }
.ag-card--trainer      { --ag: #51c791; }
.ag-card--hipnose      { --ag: #dca44b; }
.ag-card--coringa      { --ag: #ed867e; }

/* ---------- topo: curso e, quando foge da sede, a cidade ---------- */

.ag-card__topo {
	display: flex;
	align-items: flex-start;
	min-height: 34px;
	justify-content: space-between;
	gap: 10px;
}

.ag-card__curso {
	font-size: 0.7rem;
	line-height: 1.3;
	font-weight: 800;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ag);
}

.ag-card__local {
	flex: none;
	padding: 3px 9px;
	font-size: 0.62rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ag-tinta);
	background: #f2f3f7;
	border-radius: 999px;
}

/* ---------- formato e período ---------- */

.ag-card__formato {
	margin: 0;
	font-size: 1.6rem;
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -0.02em;
	color: var(--ag-tinta);
}

.ag-card__periodo {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
}

.ag-card__data {
	display: inline-flex;
	align-items: baseline;
	gap: 5px;
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--ag-suave);
}

.ag-card__data b {
	font-size: 1.85rem;
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.03em;
	color: var(--ag-tinta);
	font-variant-numeric: tabular-nums;
}

/* Travessão do intervalo, desenhado para alinhar com a base dos numerais. */
.ag-card__ate {
	width: 14px;
	height: 2px;
	background: var(--ag-linha);
	transform: translateY(-6px);
}

.ag-card__ano {
	margin-left: auto;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	color: var(--ag-suave);
	font-variant-numeric: tabular-nums;
}

/* ---------- a assinatura: o ritmo do curso ----------
   Cada bloco é um trecho de dias consecutivos, posicionado na proporção do
   período. Intensivo vira uma barra sólida; extensivo, cinco pastilhas
   espaçadas; noturno, uma régua de tracinhos. Dá para diferenciar os formatos
   sem ler uma palavra. */

.ag-card__ritmo {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.ag-card__trilha {
	position: relative;
	height: 8px;
	background: #f0f1f5;
	border-radius: 999px;
}

.ag-card__bloco {
	position: absolute;
	top: 0;
	bottom: 0;
	min-width: 4px;
	background: var(--ag);
	border-radius: 999px;
}

.ag-card__resumo {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	font-size: 0.8rem;
	font-weight: 700;
	color: var(--ag-tinta);
}

.ag-card__horario {
	font-weight: 600;
	color: var(--ag-suave);
}

.ag-card__horario::before {
	content: "·";
	margin-right: 8px;
	color: var(--ag-linha);
}

/* ---------- datas detalhadas ---------- */

.ag-card__ver {
	align-self: flex-start;
	padding: 0;
	font: inherit;
	font-size: 0.78rem;
	font-weight: 700;
	color: var(--ag-suave);
	background: none;
	border: 0;
	border-bottom: 1px solid var(--ag-linha);
	cursor: pointer;
}

.ag-card__ver::after {
	content: " +";
	font-weight: 800;
	color: var(--ag);
}

.ag-card__ver[aria-expanded="true"]::after { content: " –"; }
.ag-card__ver:hover { color: var(--ag-tinta); border-bottom-color: var(--ag); }
.ag-card__ver:focus-visible { outline: 2px solid var(--ag); outline-offset: 3px; }

.ag-card__datas[hidden] { display: none; }

.ag-card__datas {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 14px 0 2px;
	border-top: 1px solid var(--ag-linha);
}

.ag-card__linha {
	display: flex;
	align-items: baseline;
	gap: 10px;
	font-size: 0.82rem;
	color: var(--ag-tinta);
}

.ag-card__linha-n {
	flex: none;
	font-size: 0.66rem;
	font-weight: 800;
	letter-spacing: 0.06em;
	color: var(--ag);
	font-variant-numeric: tabular-nums;
}

.ag-card__linha-d { font-weight: 600; }

/* ---------- chamada ---------- */

.ag-card__cta {
	margin-top: auto;
	padding: 13px 18px;
	font: inherit;
	font-size: 0.85rem;
	font-weight: 700;
	color: #fff;
	background: var(--ag-tinta);
	border: 0;
	border-radius: 10px;
	cursor: pointer;
	transition: background 0.18s ease, transform 0.18s ease;
}

.ag-card__cta:hover { background: #262a3a; transform: translateY(-1px); }
.ag-card__cta:focus-visible { outline: 2px solid var(--ag); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
	.ag-card__cta { transition: none; }
	.ag-card__cta:hover { transform: none; }
}

/* ---------- grade ---------- */

/* Grade só na /agenda/, marcada com .ag-grade no container. Nas páginas de
   treinamento e na home o Siema transforma a mesma .slide-calendar num
   carrossel (injeta wrapper com transform e dá width fixo a cada slide), e
   forçar grid ali quebra o carrossel. */
.box-calendar.ag-grade .slide-calendar {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 22px;
	justify-items: center;
	/* start, não stretch: com stretch o card expandido puxa a altura da
	   fileira e os vizinhos crescem junto, ganhando um vão vazio embaixo. */
	align-items: start;
}

.box-calendar.ag-grade .slide-calendar .slide-padding {
	display: flex;
	width: 100%;
	max-width: 320px;
}

@media (max-width: 47.99em) {
	.ag-card { max-width: 100%; padding: 20px 18px 18px 22px; }
	.ag-card__formato { font-size: 1.4rem; }
	.ag-card__data b { font-size: 1.65rem; }
}

/* ---------- filtros ----------
   Os selects antigos eram três pílulas translúcidas com texto quase ilegível
   sobre o fundo azul. Aqui viram controles sólidos, e a barra cresce sozinha
   conforme os filtros novos (ritmo, cidade, ano) aparecem — cada um só é
   renderizado quando existe mais de um valor na agenda. */

.ag-filtros {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin: 0 auto 34px;
	max-width: 1180px;
}

/* main #bloco04 select do tema usa seletor de ID (0,1,0,2) e vence classe;
   por isso a barra precisa do mesmo ancestral para valer. */
select.ag-filtro,
main #bloco04 select.ag-filtro {
	flex: 0 1 auto;
	width: auto;
	min-width: 168px;
	max-width: 240px;
	margin: 0;
	appearance: none;
	padding: 11px 38px 11px 16px;
	font: inherit;
	font-size: 0.85rem;
	font-weight: 600;
	color: #14161f;
	background-color: #fff;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236b7280' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	border: 0;
	border-radius: 10px;
	box-shadow: 0 4px 14px rgba(16, 22, 51, 0.14);
	cursor: pointer;
}

select.ag-filtro:focus-visible,
main #bloco04 select.ag-filtro:focus-visible { outline: 2px solid #fff; outline-offset: 2px; border: 0; }

/* o tema pinta option com azul sobre fundo preto, o que some num select branco */
select.ag-filtro option,
main #bloco04 select.ag-filtro option {
	font-size: 0.9rem;
	font-weight: 600;
	color: #14161f;
	background-color: #fff;
}

@media (max-width: 47.99em) {
	.ag-filtros { gap: 8px; }
	select.ag-filtro,
	main #bloco04 select.ag-filtro { flex: 1 1 45%; min-width: 0; max-width: none; padding-right: 32px; font-size: 0.8rem; }
}

/* Fora da /agenda/ os cards vivem dentro do carrossel Siema, que dá largura
   fixa a cada slide e não tem gap. Sem esse respiro os cards se encostam. */
.box-calendar:not(.ag-grade) .slide-calendar .slide-padding {
	padding: 0 9px;
	box-sizing: border-box;
}

.box-calendar:not(.ag-grade) .ag-card {
	max-width: none;
}


/* No carrossel o card tem ~230px; sem isto o ano cai sozinho numa linha. */
.box-calendar:not(.ag-grade) .ag-card__data b { font-size: 1.5rem; }
.box-calendar:not(.ag-grade) .ag-card__periodo { gap: 6px; }
.box-calendar:not(.ag-grade) .ag-card__ano { font-size: 0.68rem; letter-spacing: 0.06em; }

/* No carrossel os cards não compartilham altura (Siema usa float), então o
   resumo empilha sempre: com uma linha fixa a mais, todos ficam do mesmo
   tamanho em vez de um quebrar e desalinhar a fileira. */
.box-calendar:not(.ag-grade) .ag-card__resumo {
	flex-direction: column;
	align-items: flex-start;
	gap: 3px;
}

.box-calendar:not(.ag-grade) .ag-card__horario::before { content: none; }