/* Pagina de evento
 * Tokens retirados do Figma (Website AA > V1 > Evento-desktop):
 * blue/400 #009CDD, grey/100 #EAEFF4, grey/950 #0E1419.
 * Tipografia: Desktop/Heading/S 28/1.2 SemiBold, Desktop/Body 18/1.4.
 */

.msg-evento {
	--msg-blue-400: #009CDD;
	--msg-blue-700: #28539A;
	--msg-navy: #002C56;
	--msg-grey-100: #EAEFF4;
	--msg-grey-950: #0E1419;
	--msg-grey-600: #4E5B66;
	--msg-linha: #E3E6E8;
	--msg-vermelho: #D33D44;
	--msg-esesfm: #3B0764;
	--msg-esesfm-azul: #0053B1;
}

/* Cabecalho: linha de meta */
.msg-evento-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	column-gap: 12px;
	row-gap: 4px;
	font-family: "Montserrat", sans-serif;
	font-size: 16px;
	line-height: 1.5;
	color: var(--msg-grey-950, #0E1419);
}

.msg-evento-meta-item + .msg-evento-meta-item::before {
	content: "\00b7";
	margin-right: 12px;
	color: #A9B2B9;
}

.msg-evento-meta-data { font-weight: 600; color: var(--msg-navy, #002C56); }

/* Evento passado. */
.msg-evento-meta-estado {
	font-weight: 600;
	color: var(--msg-vermelho, #D33D44);
}

/* Titulos de seccao — Desktop/Heading/S */
.msg-evento-seccao-titulo {
	margin: 0 0 32px;
	font-family: "Montserrat", sans-serif;
	font-size: 28px;
	font-weight: 600;
	line-height: 1.2;
	color: var(--msg-blue-400, #009CDD);
}

.msg-evento-programa,
.msg-evento-pessoas { margin: 48px 0; }

/* ---------------------------------------------------------------
 * Programa
 * Celulas com 24px de padding e cantos retos, 32px entre elas.
 * O fundo alterna por posicao: as pares levam grey/100.
 * ------------------------------------------------------------ */

.msg-evento-programa-lista {
	display: flex;
	flex-direction: column;
	gap: 32px;
}

.msg-evento-programa-item {
	padding: 24px;
	background-color: transparent;
}

.msg-evento-programa-item:nth-child(even) {
	background-color: var(--msg-grey-100, #EAEFF4);
}

/* Titulo da celula: hora e nome no mesmo peso e na mesma cor.
 * O separador "|" e decorativo, desenhado em CSS, nao escrito no conteudo. */
.msg-evento-programa-titulo {
	margin: 0;
	font-family: "Montserrat", sans-serif;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.4;
	color: var(--msg-grey-950, #0E1419);
}

.msg-evento-programa-hora::after {
	content: "|";
	margin: 0 6px;
	color: inherit;
	font-weight: inherit;
}

.msg-evento-programa-desc {
	margin: 0;
	font-family: "Montserrat", sans-serif;
	font-size: 18px;
	font-weight: 400;
	line-height: 1.4;
	color: var(--msg-grey-950, #0E1419);
}

/* Convidados: indentados 24px, 10px entre linhas, 16px do bloco de cima */
.msg-evento-convidados {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 16px 0 0;
	padding: 0 0 0 24px;
	list-style: none;
}

.msg-evento-convidado {
	margin: 0;
	font-family: "Montserrat", sans-serif;
	font-size: 18px;
	line-height: 1.4;
	color: var(--msg-grey-950, #0E1419);
}

.msg-evento-convidado-nome {
	margin-right: 10px;
	font-weight: 700;
	color: var(--msg-blue-400, #009CDD);
}

.msg-evento-convidado-cargo { font-weight: 400; color: var(--msg-grey-950, #0E1419); }

/* ---------------------------------------------------------------
 * Oradores e moderacao
 * ------------------------------------------------------------ */

.msg-evento-pessoa {
	display: flex;
	gap: 24px;
	align-items: flex-start;
	padding: 24px 0;
	border-bottom: 1px solid var(--msg-linha, #E3E6E8);
}

.msg-evento-pessoa:last-child { border-bottom: none; }

.msg-evento-pessoa-foto {
	flex: 0 0 auto;
	width: 128px;
	height: 128px;
	background: #CDE8F8;
	overflow: hidden;
}

.msg-evento-pessoa-foto img {
	width: 128px;
	height: 128px;
	object-fit: cover;
	display: block;
}

.msg-evento-pessoa-texto { flex: 1 1 auto; min-width: 0; }

.msg-evento-pessoa-nome {
	margin: 0 0 8px;
	font-family: "Montserrat", sans-serif;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.4;
	color: var(--msg-blue-400, #009CDD);
}

.msg-evento-pessoa-nome a { color: inherit; text-decoration: none; }
.msg-evento-pessoa-nome a:hover,
.msg-evento-pessoa-nome a:focus-visible { text-decoration: underline; }

.msg-evento-pessoa-desc {
	margin: 0;
	font-family: "Montserrat", sans-serif;
	font-size: 18px;
	font-weight: 400;
	line-height: 1.4;
	color: var(--msg-grey-950, #0E1419);
}

/* ---------------------------------------------------------------
 * Proximos eventos (sidebar) e bloco de inscricao
 * ------------------------------------------------------------ */

.msg-evento-proximos {
	padding: 24px;
	background: var(--msg-grey-100, #EAEFF4);
	border-radius: 8px;
}

.msg-evento-proximos-titulo {
	margin: 0 0 16px;
	font-family: "Montserrat", sans-serif;
	font-size: 18px;
	font-weight: 600;
	color: var(--msg-navy, #002C56);
}

.msg-evento-proximos-lista { margin: 0; padding: 0; list-style: none; }
.msg-evento-prox-item + .msg-evento-prox-item { border-top: 1px solid var(--msg-linha, #E3E6E8); }

.msg-evento-prox-link {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: center;
	column-gap: 12px;
	padding: 16px 0;
	text-decoration: none;
}

.msg-evento-prox-data { grid-column: 1; font-size: 14px; font-weight: 500; color: var(--msg-blue-400, #009CDD); }

.msg-evento-prox-nome {
	grid-column: 1;
	font-family: "Montserrat", sans-serif;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--msg-navy, #002C56);
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	overflow: hidden;
	overflow-wrap: break-word;
}

.msg-evento-prox-local { grid-column: 1; font-size: 14px; color: var(--msg-grey-600, #4E5B66); }

.msg-evento-prox-seta {
	grid-column: 2;
	grid-row: 1 / -1;
	width: 8px;
	height: 8px;
	border-right: 2px solid var(--msg-blue-700, #28539A);
	border-bottom: 2px solid var(--msg-blue-700, #28539A);
	transform: rotate(-45deg);
}

.msg-evento-prox-link:hover .msg-evento-prox-nome,
.msg-evento-prox-link:focus-visible .msg-evento-prox-nome { text-decoration: underline; }

.msg-evento-inscricao { margin: 48px 0 0; }


.msg-evento-botao {
	display: inline-block;
	padding: 14px 28px;
	background: var(--msg-navy, #002C56);
	border-radius: 4px;
	font-family: "Montserrat", sans-serif;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.2;
	color: #fff;
	text-decoration: none;
	transition: background-color 0.2s ease;
}

.msg-evento-botao:hover,
.msg-evento-botao:focus-visible { background: var(--msg-blue-700, #28539A); color: #fff; }

.msg-evento .msg-artigo-corpo + .msg-evento-programa { margin-top: 40px; }

/* ---------------------------------------------------------------
 * Mobile
 * ------------------------------------------------------------ */

@media (max-width: 640px) {
	.msg-evento-seccao-titulo { font-size: 22px; margin-bottom: 24px; }
	.msg-evento-programa-lista { gap: 20px; }
	.msg-evento-programa-item { padding: 20px 16px; }
	.msg-evento-programa-titulo,
	.msg-evento-programa-desc,
	.msg-evento-convidado,
	.msg-evento-pessoa-desc,
	.msg-evento-pessoa-nome { font-size: 16px; }
	.msg-evento-convidados { padding-left: 12px; }
	.msg-evento-pessoa { gap: 16px; }
	.msg-evento-pessoa-foto,
	.msg-evento-pessoa-foto img { width: 96px; height: 96px; }
}
/* Estado do evento nos cartoes da listagem */
.msg-evento-estado-cartao {
	font-weight: 600;
	color: #D33D44;
}

/* ---------------------------------------------------------------
 * Selo ESESFM. Roxo da marca, igual ao dos cartoes de curso.
 * ------------------------------------------------------------ */

.msg-evento-esesfm-ribbon {
	position: absolute;
	top: 0;
	width: 64px;
	padding: 12px 7px 20px 7px;
	box-sizing: border-box;
	background-color: var(--msg-esesfm, #3B0764);
	clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 82%, 0 100%);
	z-index: 2;
}

.msg-evento-esesfm-ribbon img { display: block; width: 100%; height: auto; }

/* Cartao de destaque: canto superior direito, como nos cursos. */
.msg-bloglista-featured .msg-evento-esesfm-ribbon { right: 24px; }

/* Linha da listagem: a fita e injetada dentro do span da miniatura, por isso e
   a miniatura que tem de ser o contexto de posicionamento. Sem isto a fita
   ancorava-se a linha e caia por cima da fotografia. Geometria igual a do
   cartao de curso: largura e padding vem da regra base. */
.msg-bloglista-row.is-esesfm .msg-bloglista-thumb { position: relative; }

.msg-bloglista-row .msg-evento-esesfm-ribbon {
	top: 0;
	right: 8px;
	left: auto;
}

/* Marca na pagina do evento: o selo mudo nao diz nada a quem nao conhece a
   sigla, por isso aqui vai acompanhado do nome por extenso. */
.msg-evento-esesfm-marca {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 16px;
	padding: 10px 16px 10px 12px;
	background: #F4EEF9;
	border-left: 3px solid var(--msg-esesfm, #3B0764);
}

.msg-evento-esesfm-marca img { display: block; width: 48px; height: auto; flex: 0 0 auto; }

.msg-evento-esesfm-marca span {
	font-family: "Montserrat", sans-serif;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.35;
	color: var(--msg-esesfm, #3B0764);
}

@media (max-width: 640px) {
	.msg-bloglista-row .msg-evento-esesfm-ribbon { width: 48px; padding: 9px 6px 15px 6px; }
	.msg-evento-esesfm-marca { font-size: 13px; }
}