/* ==========================================================================
   Central News — Página Institucional (ex.: "História do UEC")
   Layout editorial de coluna única (sem sidebar) — cabeçalho, imagem de
   destaque, corpo do texto e, quando preenchidas em Conteúdo Institucional,
   Linha do Tempo e Títulos e Conquistas. Título de seção reaproveita
   .home-section__head (mesmo componente do resto do site).
   ========================================================================== */

.page-institucional { padding: 32px 0 60px; }

.page-institucional__wrap { max-width: 820px; margin: 0 auto; }

/* ---------- Cabeçalho ---------- */
.page-institucional__header { text-align: center; margin-bottom: 26px; }

.page-institucional__eyebrow {
	display: inline-block;
	background: var(--gold-500);
	color: var(--green-900);
	font-size: .72rem;
	font-weight: 800;
	letter-spacing: .05em;
	text-transform: uppercase;
	padding: 5px 12px;
	border-radius: 4px;
	margin-bottom: 14px;
}

.page-institucional__title {
	font-size: clamp(1.7rem, 3.2vw, 2.4rem);
	line-height: 1.2;
	font-weight: 800;
	color: var(--green-900);
	margin: 0;
	text-wrap: balance;
}

/* ---------- Imagem de destaque ---------- */
.page-institucional__thumb {
	margin: 0 0 32px;
	border-radius: 14px;
	overflow: hidden;
	box-shadow: var(--shadow-md);
	aspect-ratio: 16 / 9;
}

.page-institucional__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- Corpo do texto ---------- */
.page-institucional__content {
	font-size: 1.18rem;
	font-weight: 500;
	line-height: 1.8;
	color: var(--ink-soft);
}

.page-institucional__content p { margin: 0 0 20px; }

.page-institucional__content a { color: var(--green-700); text-decoration: underline; text-underline-offset: 2px; }

.page-institucional__content img { max-width: 100%; height: auto; border-radius: 8px; }

/* ---------- Seções (Linha do Tempo / Títulos e Conquistas) ---------- */
.page-institucional__section { margin-top: 46px; }

/* ---------- Linha do Tempo ---------- */
.cn-timeline {
	position: relative;
	margin: 0;
	padding: 4px 0 4px 30px;
	list-style: none;
}

.cn-timeline::before {
	content: "";
	position: absolute;
	left: 7px;
	top: 8px;
	bottom: 8px;
	width: 2px;
	background: var(--line);
}

.cn-timeline__item { position: relative; padding-bottom: 30px; }
.cn-timeline__item:last-child { padding-bottom: 0; }

.cn-timeline__item::before {
	content: "";
	position: absolute;
	left: -30px;
	top: 4px;
	width: 15px;
	height: 15px;
	border-radius: 50%;
	background: var(--paper);
	border: 3px solid var(--green-700);
}

.cn-timeline__year {
	display: inline-block;
	background: var(--green-900);
	color: #fff;
	font-weight: 800;
	font-size: .78rem;
	letter-spacing: .02em;
	padding: 3px 10px;
	border-radius: 4px;
	margin-bottom: 8px;
	font-variant-numeric: tabular-nums;
}

.cn-timeline__title { margin: 0 0 4px; font-size: 1.05rem; font-weight: 800; color: var(--ink); }

.cn-timeline__desc { margin: 0; font-size: .9rem; line-height: 1.6; color: var(--ink-soft); }

/* ---------- Títulos e Conquistas ---------- */
.cn-titulos-grid { list-style: none; }

.cn-titulo-badge {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	text-align: center;
	padding: 24px 16px;
	background: var(--paper-raised);
	border: 1px solid var(--line);
	border-radius: 10px;
	box-shadow: var(--shadow-sm);
	transition: box-shadow .2s ease, transform .2s ease;
}

.cn-titulo-badge:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }

.cn-titulo-badge__icon { width: 32px; height: 32px; color: var(--gold-500); }
.cn-titulo-badge__icon svg { width: 100%; height: 100%; }

.cn-titulo-badge__competicao { font-weight: 800; font-size: .92rem; color: var(--green-900); line-height: 1.3; }

.cn-titulo-badge__ano { font-size: .78rem; font-weight: 700; color: var(--ink-faint); font-variant-numeric: tabular-nums; }

/* ==========================================================================
   Responsivo
   ========================================================================== */

@media (max-width: 767px) {
	.page-institucional { padding: 20px 0 40px; }
	.page-institucional__thumb { aspect-ratio: 4 / 3; margin-bottom: 24px; }
	.page-institucional__header { margin-bottom: 20px; }
	.page-institucional__section { margin-top: 36px; }
}

@media (prefers-reduced-motion: reduce) {
	.cn-titulo-badge { transition: none !important; }
}