/* ============================================================
   Hablemos — "Sobre nós": cover + horizontal chapter timeline
   (briefing pattern #14 — used exactly once, here)

   Shares the site type/spacing tokens defined in main.css so this
   page doesn't drift from the rest of the site: body copy is the same
   16px, section padding is the same symmetric token, and the content
   column lines up with every other page.
   ============================================================ */
/* See the note on .hb-page2 — clip (not hidden) so the cover orbs can
   sit off-edge without widening the document, while the pinned chapter
   timeline still pins against the viewport. */
.hb-story { background: var(--cream); overflow-x: clip; }

.hb-story__cover {
	position: relative;
	overflow: hidden;
	min-height: 62vh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	/* Top and bottom both carry HALF of --hb-cover-lead — matches the
	   structural .hb-story > section:first-of-type rule in page.css,
	   which is the one that actually wins here; restated so this class
	   isn't left mismatched if ever used outside that structure. */
	padding-top: calc(var(--hb-section-y) + var(--hb-cover-lead));
	padding-bottom: var(--hb-section-y);
	padding-inline: max(var(--hb-gutter), calc((100% - var(--hb-max)) / 2));
	background: var(--cream);
	color: var(--ink);
}

.hb-story__headline {
	position: relative; z-index: 2;
	font-size: var(--hb-h1);
	line-height: 1.03;
	letter-spacing: -.02em;
	margin: 0 0 var(--hb-s3);
	max-width: 18ch;
	color: var(--red);
}
.hb-story__lede {
	position: relative; z-index: 2;
	font-family: 'Franie', Arial;
	font-style: italic;
	font-size: var(--hb-lede);
	line-height: 1.6;
	max-width: 620px;
	margin: 0;
}
.hb-story__scrollnote {
	position: relative; z-index: 2;
	display: block;
	/* Was --hb-s5 (64px), which on top of the lede's own leading opened
	   a gap wide enough to read as a missing element. */
	margin-top: var(--hb-s4);
	font-family: 'Amatry', Arial, sans-serif;
	font-size: var(--hb-eyebrow);
	text-transform: uppercase;
	letter-spacing: .18em;
	opacity: .5;
}

/* ---- horizontal chapter timeline ---- */
.hb-timeline { height: 100svh; background: var(--night); overflow: hidden; }
.hb-timeline__track { height: 100svh; display: flex; width: max-content; }
/* Width/padding measured against the viewport MINUS the classic
   scrollbar (--hb-sbw, published by motion.js) — see the same note on
   .hb-page2__path-step. Plain 100vw would make each chapter wider than
   the visible area and offset its content column from the rest of the
   site's grid. */
.hb-timeline__chapter {
	--hb-panel-w: calc(100vw - var(--hb-sbw, 0px));
	width: var(--hb-panel-w); height: 100svh; flex: 0 0 var(--hb-panel-w);
	padding-block: var(--hb-section-y);
	padding-inline: max(var(--hb-gutter), calc((100vw - var(--hb-sbw, 0px) - var(--hb-max)) / 2));
	/* Two columns now that each chapter carries an image. The text kept
	   its own measure and the panel fills the right-hand emptiness that
	   a single centred column left across a full viewport. */
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, .62fr);
	align-items: center;
	gap: var(--hb-s5);
	position: relative;
	background: var(--night);
	color: var(--cream);
}
.hb-timeline__body { display: flex; flex-direction: column; align-items: flex-start; }
/* Capped so the panel never grows taller than the viewport it lives in
   — these chapters are exactly 100vh and the image must not be what
   decides that. */
.hb-timeline__chapter .hb-figure { width: 100%; max-height: 62vh; align-self: center; }
.hb-founder-portrait img {
	object-position: 50% 58%;
	scale: 1.08;
}
@media (prefers-reduced-motion: no-preference) and (hover: hover) {
	.hb-founder-portrait:hover img { scale: 1.12; }
}
.hb-timeline__chapter--accent { background: var(--gold); color: var(--ink); }
.hb-timeline__chapter--accent h2 { color: var(--red); }
.hb-timeline__chapter--dark { background: var(--red); color: var(--cream); }
.hb-timeline__chapter--dark h2 { color: var(--gold); }
.hb-timeline__chapter--cream { background: var(--cream); color: var(--ink); }
.hb-timeline__chapter--cream h2 { color: var(--red); }
.hb-timeline__chapter--cream h2 em { color: var(--gold); }

.hb-timeline__num {
	font-family: 'Amatry', Arial, sans-serif;
	font-size: var(--hb-eyebrow);
	text-transform: uppercase;
	letter-spacing: .2em;
	opacity: .6;
	margin-bottom: calc(var(--hb-s3) + 10px);
}
.hb-timeline__chapter h2 {
	font-size: var(--hb-h2-hero);
	line-height: 1;
	letter-spacing: -.02em;
	margin: 0 0 var(--hb-s3);
	max-width: 15ch;
}
.hb-timeline__chapter h2 em { font-style: normal; color: var(--gold); }
.hb-timeline__chapter--accent h2 em { color: var(--ink); }
.hb-timeline__chapter--dark h2 em { color: var(--cream); }
.hb-timeline__chapter p {
	font-size: var(--hb-text);
	line-height: var(--hb-text-lh);
	max-width: 52ch;
	margin: 0 0 1.2em;
	opacity: .9;
}
.hb-timeline__cta {
	display: inline-block;
	align-self: flex-start;
	margin-top: var(--hb-s2);
	font-weight: 700;
	font-size: var(--hb-text);
	border-bottom: 2px solid currentColor;
	padding-bottom: 4px;
	transition: transform .3s ease;
}
.hb-timeline__cta:hover { transform: translateX(8px); }

/* Desktop panels are one viewport tall. On wide but comparatively short
   screens, width-based type remained large enough to push the last line,
   chips or CTA below the panel. Compact the whole composition against
   viewport height instead of introducing an inner scrollbar. */
@media (min-width: 901px) and (max-height: 900px) and (pointer: fine) {
	.hb-timeline__chapter {
		padding-block: clamp(24px, 4vh, 40px);
		gap: clamp(28px, 3.5vw, 56px);
	}
	.hb-timeline__num { margin-bottom: clamp(20px, 2.6vh, 26px); }
	.hb-timeline__chapter h2 {
		font-size: clamp(3.25rem, 8vh, 5.75rem);
		margin-bottom: clamp(12px, 2vh, 20px);
	}
	.hb-timeline__chapter p {
		font-size: clamp(1rem, 2.2vh, 1.25rem);
		line-height: var(--hb-text-lh);
		margin-bottom: .8em;
	}
	.hb-timeline__chapter .hb-levels {
		margin-top: clamp(12px, 2vh, 20px);
		gap: 10px;
	}
	.hb-timeline__cta { margin-top: clamp(4px, 1vh, 10px); }
	.hb-timeline__chapter .hb-figure { max-height: 72vh; }
}

@media (min-width: 901px) and (max-height: 700px) and (pointer: fine) {
	.hb-timeline__chapter h2 { font-size: clamp(2.8rem, 7vh, 4.4rem); }
	.hb-timeline__chapter p { font-size: clamp(.9rem, 2vh, 1.05rem); }
	.hb-timeline__chapter .hb-figure { max-height: 68vh; }
}

/* ---- closing-CTA chapter: the LAST slide reuses the exact
   .hb-page2__final design every other page's close already uses
   (page.css) instead of the timeline's own chapter typography — the
   client's own words: "queria o módulo anterior... mais incorporado
   no slider, não era preciso mudar nada." The wrapping chapter drops
   its own two-column figure grid and padding so .hb-page2__final can
   own both in full, sized to the fixed 100svh slide it now lives in
   instead of its usual free-flowing min-height:58vh.

   Ground is --night here, not the module's own bordô — the client
   didn't want a fourth red screen after chapter 03 already used it
   ("não pode ser a cor vermelha... mete o azul escuro"), so this
   borrows chapter 01's unmodified background instead. Heading/body
   text follow onto cream to stay readable on it; the CTA link and the
   note callout (gold-on-bordô) already carry their own colours and
   need no override. */
.hb-timeline__chapter.hb-timeline__chapter--final {
	display: block;
	padding: 0;
	background: var(--night);
}
.hb-timeline__chapter.hb-timeline__chapter--final .hb-page2__final {
	height: 100%;
	min-height: 0;
	background: var(--night);
	color: var(--cream);
}
.hb-timeline__chapter.hb-timeline__chapter--final .hb-page2__final h2 {
	color: var(--cream);
}
.hb-timeline__chapter.hb-timeline__chapter--final.hb-timeline__chapter--dark,
.hb-timeline__chapter.hb-timeline__chapter--final.hb-timeline__chapter--dark .hb-page2__final {
	background: var(--red);
	color: var(--cream);
}
.hb-timeline__chapter.hb-timeline__chapter--final.hb-timeline__chapter--dark .hb-page2__final h2 {
	color: var(--cream);
}

/* The note has no form to sit beside here, so it takes the form's own
   column instead of stacking under the CTA link inside .hb-final__copy
   — same side-by-side split every other closing CTA already uses. */
.hb-timeline__chapter.hb-timeline__chapter--final .hb-final__aside {
	flex: 1 1 380px;
	min-width: 0;
}
.hb-timeline__chapter.hb-timeline__chapter--final .hb-page2__note {
	margin: 0;
}

@media (max-width: 760px) {
	.hb-story__cover { min-height: 48vh; }
	.hb-story__headline { max-width: 100%; }
	.hb-timeline__chapter h2 { max-width: 100%; }
	.hb-timeline__chapter p { max-width: 100%; }
	.hb-founder-portrait img { object-position: 50% 36%; scale: 1; }
}

/* Mobile and reduced-motion behaviour comes from the shared
   [data-carousel] system in main.css: the chapters stay HORIZONTAL and
   become a native scroll-snap carousel, rather than collapsing into a
   vertical stack. Only chapter padding is adjusted here. */
/* pointer:coarse joins the width: a tablet in landscape clears 900px but
   is still a finger, and the pinned alternative is a mouse-scroll
   device. */
@media (max-width: 900px), (pointer: coarse) {
	/* Mobile uses the native horizontal scroller from main.css. Fixed
	   viewport heights made long copy impossible to reach; natural height
	   lets the tallest chapter size the whole row without clipping. */
	.hb-timeline.hb-timeline,
	.hb-timeline__track.hb-timeline__track { height: auto; overflow: visible; }
	.hb-timeline__track.hb-timeline__track > .hb-timeline__chapter {
		height: auto;
		min-height: 0;
		overflow: visible;
	}
	.hb-timeline__chapter.hb-timeline__chapter--final .hb-page2__final {
		height: auto;
		min-height: 100%;
	}
	/* Desktop gives the aside a 380px flex basis for the two-column
	   composition. Once stacked on mobile that basis becomes needless
	   vertical height below the note, so the content must size it. */
	.hb-timeline__chapter.hb-timeline__chapter--final .hb-final__aside {
		flex: 0 0 auto;
		width: 100%;
	}
	/* UMA COLUNA, E COM AS LINHAS FIXAS.
	   Estava `align-content: center` com as duas linhas a dimensionarem-se
	   ao conteudo. Como a copy de cada capitulo tem comprimentos muito
	   diferentes, a imagem ficava a uma distancia diferente do texto em
	   cada painel — medido a 375: 8px no capitulo 1, 59 no 2, 120 no 3.
	   E no capitulo 1 o conteudo nem cabia nos 100svh, por isso as linhas
	   colidiam: o corpo acabava em 1216 e a figura comecava em 1205, onze
	   pixeis SOBREPOSTOS.

	   Agora: a linha do texto e flexivel (1fr) e a da imagem e fixa. A
	   imagem passa a ter sempre o mesmo tamanho e a mesma posicao em
	   todos os capitulos, e e a coluna de texto que absorve a diferenca
	   de comprimento — que e o que se espera de uma serie de paineis
	   iguais. align-items:stretch em vez do center herdado: era o center
	   que deixava um item maior do que a sua linha transbordar para
	   dentro da linha seguinte. */
	/* grid-template-rows era `minmax(0, 1fr) auto` com align-content:
	   stretch — a linha do texto ocupava sempre a MESMA altura fixa
	   (100svh menos padding, gap e os 22vh da imagem), fosse o texto
	   curto ou longo. Um capítulo curto (ex.: um único parágrafo) não
	   enche essa linha, e como estava centrada dentro dela, a folga
	   sobrava sempre no mesmo sítio: mesmo por cima da imagem — o
	   espaçamento enorme e não uniforme que o cliente reportou, visível
	   em qualquer painel cujo texto seja mais curto do que a linha
	   reservada para ele.

	   Agora as duas linhas são `auto` (cada uma do tamanho do seu
	   próprio conteúdo) e é o GRUPO inteiro — texto + imagem — que fica
	   centrado no painel via align-content:center. O espaço entre texto
	   e imagem passa a ser sempre exactamente `gap`, don't matter o
	   comprimento do texto; a folga que sobra vai para cima e para baixo
	   do bloco todo em vez de se acumular antes da imagem. */
	.hb-timeline__chapter {
		padding-block: var(--hb-section-y);
		padding-inline: var(--hb-gutter);
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: auto auto;
		align-items: stretch;
		align-content: start;
		gap: var(--hb-s4);
		overflow: visible;
	}
	.hb-timeline__body { justify-content: flex-start; min-height: 0 !important; }
	/* Texto primeiro, imagem depois. Altura FIXA, nao max-height: e o que
	   garante que os cinco paineis mostram a imagem do mesmo tamanho. */
	.hb-timeline__chapter .hb-figure { order: 1; height: auto; max-height: none; aspect-ratio: 3 / 2; }
	/* A copy mais longa (capitulo 1) nao cabia. Descer um ponto no corpo
	   e apertar a entrelinha da a folga sem tocar na copy. */
	.hb-timeline__chapter p { font-size: 15px; line-height: var(--hb-text-lh); }
	.hb-timeline__chapter h2 { line-height: 1.05; }

}

@media (prefers-reduced-motion: reduce) {
	.hb-story .hb-word { opacity: 1 !important; filter: none !important; transform: none !important; }
	.hb-timeline__chapter {
		padding-block: var(--hb-s5); padding-inline: var(--hb-s4);
		grid-template-columns: minmax(0, 1fr); gap: var(--hb-s4);
	}
	/* Texto primeiro, imagem depois. */
	.hb-timeline__chapter .hb-figure { order: 1; max-height: 30vh; }
}
.hb-story__mobile-break { display: none; }

@media (max-width: 900px), (pointer: coarse) {
	.hb-story__mobile-break { display: block; }
}