/* hyp/cronologia — protótipo linhas 683–721, spec 14. Breakpoints: mobile < 768 · tablet 768–1079 · desktop ≥ 1080. */

.hyp-tl {
	background: var(--hyp-deep);
	margin-top: 100px;
	padding: 68px 0;
	--hyp-focus: var(--hyp-band-ink);
}

.hyp-tl .hyp-tl__head {
	max-width: 720px;
}

.hyp-tl .hyp-sh__eyebrow,
.hyp-tl .hyp-sh__title {
	color: var(--hyp-band-ink);
}

.hyp-tl .hyp-sh__lead {
	margin-top: 20px;
	color: var(--hyp-band-ink-soft);
}

.hyp-tl .hyp-tl__body {
	margin-top: 50px;
}

/* ---------- Régua de anos ---------- */
.hyp-tl .hyp-tl__railwrap {
	position: relative;
}

.hyp-tl .hyp-tl__railwrap[hidden] {
	display: none;
}

.hyp-tl .hyp-tl__fade {
	position: absolute;
	top: 0;
	height: 48px;
	width: 72px;
	z-index: 2;
	pointer-events: none;
	display: none;
}

.hyp-tl .hyp-tl__fade--l {
	left: 0;
	background: linear-gradient(to right, var(--hyp-deep), transparent);
}

.hyp-tl .hyp-tl__fade--r {
	right: 0;
	background: linear-gradient(to left, var(--hyp-deep), transparent);
}

.hyp-tl .hyp-tl__railwrap.has-l .hyp-tl__fade--l,
.hyp-tl .hyp-tl__railwrap.has-r .hyp-tl__fade--r {
	display: block;
}

.hyp-tl .hyp-tl__rail {
	display: flex;
	gap: 6px;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scrollbar-width: none;
	padding-bottom: 22px;
	border-bottom: 1px solid var(--hyp-band-line);
}

.hyp-tl .hyp-tl__rail::-webkit-scrollbar {
	display: none;
}

.hyp-tl .hyp-tl__year {
	--hyp-btn-radius: var(--hyp-r-pill);
	flex: none;
	padding: 12px 26px;
	font-size: 15px;
	font-weight: 500;
	line-height: normal;
	border: 1px solid var(--hyp-rail-idle-bd, rgba(255, 255, 255, 0.25));
	background: transparent;
	color: var(--hyp-rail-idle, rgba(255, 255, 255, 0.7));
	transition: background 0.2s, color 0.2s;
}

.hyp-tl .hyp-tl__year[aria-selected="true"] {
	background: var(--hyp-rail-bg, #9dc0f0);
	border-color: var(--hyp-rail-bg, #9dc0f0);
	color: var(--hyp-rail-fg, #003366);
}

.hyp-tl .hyp-tl__year:focus-visible {
	outline-offset: -4px;
	border-radius: var(--hyp-r-pill);
}

/* ---------- Painel do ano ---------- */
.hyp-tl .hyp-tl__panel {
	display: grid;
	grid-template-columns: minmax(0, 0.6fr) minmax(0, 1.4fr);
	gap: clamp(22px, 3vw, 56px);
	margin-top: 30px;
	align-items: start;
	min-height: 190px;
}

.hyp-tl .hyp-tl__panel[hidden] {
	display: none;
}

/* Sem JS: anos empilhados, separados. */
.hyp-tl .hyp-tl__panels > .hyp-tl__panel + .hyp-tl__panel {
	margin-top: 48px;
}

.hyp-tl .hyp-tl__big {
	font-size: clamp(42px, 6vw, 72px);
	font-weight: 600;
	color: var(--hyp-band-ink);
	line-height: 1;
	letter-spacing: -0.04em;
}

.hyp-tl .hyp-tl__phase {
	display: inline-block;
	margin-top: 20px;
	border-radius: var(--hyp-r-pill);
	padding: 8px 18px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	line-height: normal;
	/* GDD (e omissão): todas as fases com a pílula da banda. */
	background: var(--hyp-band-pill-bg, rgba(255, 255, 255, 0.14));
	color: var(--hyp-band-pill-fg, #ffffff);
}

/* Sol de Évora: cor por fase (PHASE_COLORS do protótipo). */
[data-identidade="sol"] .hyp-tl__phase--licenciamento { background: rgba(246, 162, 10, 0.16); color: #f6a20a; }
[data-identidade="sol"] .hyp-tl__phase--desenvolvimento { background: rgba(255, 255, 255, 0.12); color: #ffffff; }
[data-identidade="sol"] .hyp-tl__phase--envolvimento { background: rgba(47, 143, 143, 0.22); color: #7fd8d8; }
[data-identidade="sol"] .hyp-tl__phase--construcao { background: rgba(192, 57, 43, 0.2); color: #ff9c8f; }
[data-identidade="sol"] .hyp-tl__phase--operacao { background: rgba(255, 255, 255, 0.9); color: #003366; }

.hyp-tl .hyp-tl__pos {
	font-size: 12.5px;
	color: var(--hyp-band-ink-faint);
	margin-top: 16px;
}

.hyp-tl .hyp-tl__text {
	display: flex;
	flex-direction: column;
	gap: 16px;
	min-height: 190px;
}

.hyp-tl .hyp-tl__text p {
	font-size: 17px;
	line-height: 1.85;
	color: var(--hyp-band-ink-soft);
	font-weight: 300;
	margin: 0;
	padding: 0;
}

@media (max-width: 767.98px) {
	.hyp-tl .hyp-tl__panel {
		grid-template-columns: minmax(0, 1fr);
		min-height: 0;
	}

	.hyp-tl .hyp-tl__text {
		min-height: 0;
	}
}