/*
 * Hyperion Custom Blocks — tokens, identidade por projeto e reset local contra o CSS global do Salient.
 * Valores: README "Design Tokens" + constante IDENT do protótipo (fonte de verdade).
 *
 * BREAKPOINTS (decisão do cliente, 29 set 2026 — substitui os 760px do protótipo):
 *   mobile  < 768px   → @media (max-width: 767.98px)
 *   tablet  768–1079  → @media (min-width: 768px) and (max-width: 1079.98px)
 *   desktop ≥ 1080px  → @media (min-width: 1080px)
 */

@font-face {
	font-family: "Hyp Material Symbols";
	font-style: normal;
	font-weight: 300;
	font-display: block;
	src: url("../fonts/material-symbols-subset.woff2") format("woff2");
}

/* ---------- Tokens ---------- */
.hyp-bloco,
.hyp-pagina {
	--hyp-navy: #003366;
	--hyp-navy-deep: #001f3f;
	--hyp-orange: #f6a20a;
	--hyp-orange-hover: #ffb733;
	--hyp-on-orange: #1b1200;
	--hyp-orange-text: #c97f00;
	--hyp-bg-alt: #fafbfc;
	--hyp-bg-row: #fafafa;
	--hyp-border-card: #ececec;
	--hyp-border-ctrl: #e6e6e6;
	--hyp-border-chip: #e0e0e0;
	--hyp-hair: #f0f0f0;
	--hyp-hair-2: #f2f2f2;
	--hyp-hair-3: #f4f4f4;
	--hyp-text-lead: #4a4a4a;
	--hyp-text-body: #6f6f6f;
	--hyp-text-muted: #7c7c7c;
	--hyp-text-note: #888888;
	--hyp-text-meta: #999999;
	--hyp-text-meta-2: #a8a8a8;
	--hyp-text-meta-3: #b0b0b0;

	--hyp-font: Poppins, Helvetica, Arial, sans-serif;
	--hyp-r-pill: 50px;
	--hyp-r-lg: 18px;
	--hyp-r-card: 16px;
	--hyp-r-acc: 14px;
	--hyp-r-row: 12px;
	--hyp-r-toggle: 10px;
	--hyp-shadow-1: 0 14px 34px rgba(0, 51, 102, 0.09);
	--hyp-shadow-2: 0 16px 36px rgba(0, 51, 102, 0.1);
	--hyp-shadow-doc: 0 10px 26px rgba(0, 51, 102, 0.08);
	--hyp-gutter: clamp(20px, 4vw, 40px);
	--hyp-max: 1280px;
	--hyp-focus: #003366;
}

/* ---------- Identidade (accent, soft, wash, banda, tinta) ---------- */
[data-identidade="mae"] {
	--hyp-accent: #f6a20a;
	--hyp-accent-on-dark: #f6a20a;
	--hyp-soft: #fdf3e0;
	--hyp-wash: #fafbfc;
	--hyp-deep: #003366;
	--hyp-band-ink: #ffffff;
	--hyp-band-ink-soft: rgba(255, 255, 255, 0.86);
	--hyp-band-ink-faint: rgba(255, 255, 255, 0.45);
	--hyp-band-line: rgba(255, 255, 255, 0.16);
	--hyp-tint: rgba(138, 90, 6, 0.72);
	--hyp-status-bg: #f6a20a;
	--hyp-status-fg: #1b1200;
	--hyp-status-hover: #ffb733;
	--hyp-status-shadow: rgba(246, 162, 10, 0.35);
	--hyp-status-shadow-hover: rgba(246, 162, 10, 0.45);
}

[data-identidade="gdd"] {
	--hyp-accent: #f6a20a;
	--hyp-accent-on-dark: #f6a20a;
	--hyp-soft: #fdf3e0;
	--hyp-wash: #fffaf1;
	--hyp-deep: #f6a20a;
	--hyp-band-ink: #003366;
	--hyp-band-ink-soft: rgba(0, 51, 102, 0.88);
	--hyp-band-ink-faint: rgba(0, 51, 102, 0.6);
	--hyp-band-line: rgba(0, 51, 102, 0.28);
	--hyp-band-pill-bg: rgba(0, 51, 102, 0.14);
	--hyp-band-pill-fg: #003366;
	--hyp-rail-bg: #003366;
	--hyp-rail-fg: #ffffff;
	--hyp-rail-idle: rgba(0, 51, 102, 0.78);
	--hyp-rail-idle-bd: rgba(0, 51, 102, 0.32);
	--hyp-tint: rgba(138, 90, 6, 0.72);
	--hyp-status-bg: #f6a20a;
	--hyp-status-fg: #1b1200;
	--hyp-status-hover: #ffb733;
	--hyp-status-shadow: rgba(246, 162, 10, 0.35);
	--hyp-status-shadow-hover: rgba(246, 162, 10, 0.45);
}

[data-identidade="sol"] {
	--hyp-accent: #1c4f9c;
	--hyp-accent-on-dark: #9dc0f0;
	--hyp-soft: #eaf0fa;
	--hyp-wash: #f4f7fc;
	--hyp-deep: #003366;
	--hyp-band-ink: #ffffff;
	--hyp-band-ink-soft: rgba(255, 255, 255, 0.86);
	--hyp-band-ink-faint: rgba(255, 255, 255, 0.45);
	--hyp-band-line: rgba(255, 255, 255, 0.16);
	--hyp-band-pill-bg: rgba(255, 255, 255, 0.14);
	--hyp-band-pill-fg: #ffffff;
	--hyp-rail-bg: #9dc0f0;
	--hyp-rail-fg: #003366;
	--hyp-rail-idle: rgba(255, 255, 255, 0.7);
	--hyp-rail-idle-bd: rgba(255, 255, 255, 0.25);
	--hyp-tint: rgba(13, 34, 68, 0.8);
	--hyp-status-bg: #1c4f9c;
	--hyp-status-fg: #ffffff;
	--hyp-status-hover: #2a63b8;
	--hyp-status-shadow: rgba(28, 79, 156, 0.4);
	--hyp-status-shadow-hover: rgba(28, 79, 156, 0.5);
}

/* ---------- Página ---------- */
body.hyp-page .hyp-container-wrap {
	padding: 0;
	margin: 0;
	background: #ffffff;
}

/*
 * O Salient aplica body { overflow: hidden } a todo o site, o que torna o <body> um contentor de scroll e impede
 * position: sticky (submenu). Nas páginas Hyperion: overflow-x: clip corta o excesso horizontal sem criar contentor.
 */
body.hyp-page {
	overflow: visible;
	overflow-x: clip;
}

/*
 * O Salient aplica html { overflow-y: scroll }: com isso o Chrome calcula 1vw sem a barra de scroll e todos os
 * tamanhos em clamp(…vw…) ficam ~1,7% abaixo do protótipo. Nas páginas Hyperion voltamos ao comportamento normal.
 */
:root:has(body.hyp-page) {
	scroll-behavior: smooth;
	overflow-y: auto;
}

.hyp-pagina {
	display: block;
	padding-bottom: 90px;
	font-family: var(--hyp-font);
	color: #111111;
	background: #ffffff;
	-webkit-font-smoothing: antialiased;
}

/* ---------- Reset local (Salient aplica estilos globais a h*, p, a, button, img) ---------- */
.hyp-bloco,
.hyp-bloco *,
.hyp-bloco *::before,
.hyp-bloco *::after {
	box-sizing: border-box;
}

.hyp-bloco {
	font-family: var(--hyp-font);
	font-size: 16px;
	line-height: normal;
	color: #111111;
	letter-spacing: normal;
	scroll-margin-top: var(--hyp-scroll-offset, 110px);
}

/* Salient: `ul li { list-style: disc }` — as nossas listas (role="list") nunca têm marcadores. */
.hyp-bloco :where(ul[role="list"], ol[role="list"]) > li {
	list-style: none;
}

.hyp-bloco :where(h1, h2, h3, h4) {
	margin: 0;
	padding: 0;
	font-family: inherit;
	font-weight: 600;
	color: var(--hyp-navy);
	letter-spacing: -0.01em;
	text-transform: none;
}

.hyp-bloco :where(p) {
	margin: 0;
	padding: 0;
}

.hyp-bloco :where(ul, ol) {
	margin: 0;
	padding: 0;
	list-style: none;
}

.hyp-bloco :where(a) {
	color: var(--hyp-navy);
	text-decoration: none;
}

.hyp-bloco :where(a:hover) {
	color: var(--hyp-orange);
}

.hyp-bloco :where(img) {
	max-width: 100%;
	height: auto;
	margin: 0;
	border: 0;
	box-shadow: none;
}

/* Reset de botões (especificidade baixa, os componentes sobrepõem-se). */
.hyp-bloco button {
	appearance: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
	font: inherit;
	color: inherit;
	letter-spacing: inherit;
	text-transform: none;
	line-height: inherit;
	min-height: 0;
	cursor: pointer;
}

/*
 * O Salient força border-radius: 200px !important em todos os <button> (salient-dynamic-styles,
 * body[data-button-style^="rounded"] … button, especificidade 0,1,2). Classe duplicada (0,2,1) ganha;
 * cada componente define o raio com --hyp-btn-radius.
 */
.hyp-bloco.hyp-bloco button {
	border-radius: var(--hyp-btn-radius, 0) !important;
}

/* Foco visível (WCAG 2.4.7 / 2.4.11). Só com teclado. */
.hyp-bloco :focus-visible {
	outline: 2px solid var(--hyp-focus);
	outline-offset: 3px;
	border-radius: 4px;
}

.hyp-bloco :focus:not(:focus-visible) {
	outline: none;
}

.hyp-sr-only {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ---------- Primitivas ---------- */
.hyp-wrap {
	max-width: var(--hyp-max);
	margin: 0 auto;
	padding: 0 var(--hyp-gutter);
	width: 100%;
}

.hyp-icon {
	font-family: "Hyp Material Symbols";
	font-weight: normal;
	font-style: normal;
	line-height: 1;
	letter-spacing: normal;
	text-transform: none;
	display: inline-block;
	white-space: nowrap;
	direction: ltr;
	-webkit-font-feature-settings: "liga";
	font-feature-settings: "liga";
	-webkit-font-smoothing: antialiased;
}

/* Cabeçalho de secção (eyebrow + H2 + lead) */
.hyp-sh__eyebrow {
	font-size: 12px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--hyp-accent);
	font-weight: 600;
	margin-bottom: 16px;
}

.hyp-bloco .hyp-sh__title {
	font-size: clamp(26px, 4.2vw, 40px);
	line-height: 1.18;
	text-wrap: pretty;
	white-space: pre-line;
}

.hyp-bloco .hyp-sh__lead {
	font-size: 16.5px;
	line-height: 1.85;
	color: var(--hyp-text-lead);
	font-weight: 300;
}

/* ---------- Cartão de projeto (spec 03) — partilhado por intro-projetos, paginas-projeto, outro-projeto ---------- */
.hyp-bloco .hyp-card {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	overflow: hidden;
	isolation: isolate;
	border-radius: var(--hyp-r-lg);
	background-color: #0d2244;
	color: #ffffff;
	text-align: left;
}

.hyp-bloco .hyp-card__img {
	position: absolute;
	inset: 0;
	z-index: -2;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: center;
}

.hyp-bloco .hyp-card::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(0deg, var(--hyp-tint) 0%, rgba(0, 31, 63, 0.55) 58%, rgba(0, 31, 63, 0.2) 100%);
	pointer-events: none;
}

.hyp-bloco .hyp-card__bar {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 5px;
	background: var(--hyp-accent);
}

.hyp-bloco .hyp-card__logo {
	position: absolute;
	width: auto;
	max-width: none;
}

.hyp-bloco .hyp-card__eyebrow {
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--hyp-accent-on-dark);
	font-weight: 600;
}

.hyp-bloco .hyp-card:focus-visible {
	outline: 3px solid var(--hyp-accent-on-dark);
	outline-offset: 3px;
	border-radius: var(--hyp-r-lg);
}

/* ---------- Chip de filtro (spec 06) — entidades e compensação: seleção única, sem hover próprio ---------- */
.hyp-bloco .hyp-chip {
	--hyp-btn-radius: var(--hyp-r-pill);
	padding: 9px 20px;
	font-size: 12px;
	font-weight: 500;
	line-height: normal;
	border: 1px solid var(--hyp-border-chip);
	background: #ffffff;
	color: var(--hyp-text-muted);
}

.hyp-bloco .hyp-chip[aria-pressed="true"] {
	background: var(--hyp-navy);
	border-color: var(--hyp-navy);
	color: #ffffff;
}

/* Aviso só no editor (bloco sem conteúdo obrigatório) */
.hyp-editor-aviso {
	font-family: var(--hyp-font);
	border: 1px dashed #c3c4c7;
	border-radius: 8px;
	padding: 20px 24px;
	background: #f6f7f7;
	color: #1d2327;
	font-size: 14px;
	line-height: 1.6;
}

@media (prefers-reduced-motion: reduce) {
	:root:has(body.hyp-page) {
		scroll-behavior: auto;
	}

	.hyp-bloco *,
	.hyp-bloco *::before,
	.hyp-bloco *::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
	}
}