/* [INTEGRADOR] pages.css — camada de costura entre as celulas.
 *
 * Contem exclusivamente o que nenhuma celula produziu, mais um override declarado.
 * Os overrides de chapter e gallery-grid foram incorporados aos proprios componentes
 * em components.css e nao existem mais aqui. Carregar SEMPRE por ultimo:
 *   tokens.css -> base.css -> components.css -> pages.css
 *
 * Nada aqui redefine token. Tudo consome as custom properties do design-system.
 */

/* [INTEGRADOR] acessibilidade — atalho de teclado e rotulo apenas para leitor de tela */
.skip-link {
  position: absolute;
  left: var(--sp-4);
  top: -100%;
  z-index: var(--z-toast);
  padding: var(--sp-3) var(--sp-4);
  background-color: var(--gold-500);
  color: var(--ink-900);
  font-size: var(--fs-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: top var(--dur-fast) var(--ease-out-quart);
}

.skip-link:focus-visible {
  top: var(--sp-4);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* [INTEGRADOR] o cabecalho e fixo, entao todo alvo de ancora interna precisa
 * reservar a propria altura dele, senao o titulo da secao para atras do menu. */
:target,
[id] {
  scroll-margin-top: calc(var(--k-header-height, 5rem) + var(--sp-4));
}

/* [INTEGRADOR] secao generica — respiro vertical do brief */
.section {
  position: relative;
  padding-block: var(--section-padding-block);
}

.section > .container {
  position: relative;
  z-index: var(--z-content);
}

.section__head {
  margin-block-end: var(--sp-7);
  gap: var(--sp-4);
}

.section__head .section-label {
  margin-block-end: var(--sp-3);
}

.section__lead {
  color: var(--muted);
  max-width: 38ch;
  align-self: end;
}

/* [INTEGRADOR] paragrafo de destaque e assinatura institucional */
.lead {
  font-size: clamp(1.05rem, 0.5vw + 0.95rem, 1.3rem);
  color: var(--offwhite);
  max-width: 58ch;
}

.signature {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: var(--fs-h4);
  color: var(--gold-300);
  margin-block-start: var(--sp-5);
}

/* [INTEGRADOR] cabecalho de pagina interna — hero reduzido, sem 100svh
   Reaproveita a camada de midia do hero para nao duplicar regra de video. */
.page-hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 68svh;
  padding-inline: var(--gutter-mobile);
  padding-block: calc(var(--k-header-height, 5rem) + var(--sp-8)) var(--sp-8);
  overflow: hidden;
  background-color: var(--ink-900);
}

.page-hero__media {
  position: absolute;
  inset: 0;
  z-index: var(--z-base);
}

.page-hero__media video,
.page-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.42;
}

.page-hero__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.94) 0%, rgba(0, 0, 0, 0.35) 55%, rgba(0, 0, 0, 0.7) 100%);
}

.page-hero__content {
  position: relative;
  z-index: var(--z-content);
  width: 100%;
  max-width: var(--container-width);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.page-hero__title {
  font-size: var(--fs-h1);
  font-weight: 300;
  letter-spacing: -0.02em;
  max-width: 18ch;
}

.page-hero__lede {
  color: var(--muted);
  max-width: 54ch;
}

@media (min-width: 1024px) {
  .page-hero {
    padding-inline: var(--gutter);
  }
}

/* [INTEGRADOR] OVERRIDE — atenuacao do video injetado no hero.
 * A celula kairogen-ui escreveu a opacidade de fundo em .hero__video, classe do HTML
 * de exemplo dela. Mas quem cria a tag <video> em tempo de execucao e a celula
 * hyperframes-media, que nao conhece essa classe — o elemento nasce sem ela e entrava
 * em cena com opacidade 1, estourando o fundo atras do texto. Pelo seletor de elemento
 * a regra vale tanto para o <video> injetado quanto para o <img> de fallback.
 * O capitulo tinha o mesmo defeito e ja foi corrigido dentro do componente. */
.hero__media video,
.hero__media img {
  opacity: 0.55;
}

/* [INTEGRADOR] lista de contato em ficha tecnica */
.contact-list {
  display: grid;
  grid-template-columns: auto;
  gap: var(--sp-1) var(--sp-5);
  align-content: start;
  border-top: 1px solid var(--line);
  padding-block-start: var(--sp-5);
}

.contact-list dt {
  font-size: var(--fs-label);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-300);
}

.contact-list dd {
  margin-block-end: var(--sp-4);
  font-size: var(--fs-h4);
  font-family: var(--font-display);
  color: var(--offwhite);
}

.contact-list a {
  border-bottom: 1px solid var(--gold-900);
  transition: border-color var(--dur-fast) var(--ease-out-quart);
}

.contact-list a:hover {
  border-color: var(--gold-500);
}

/* [INTEGRADOR] grade de principios — blocos curtos, filete superior dourado */
.principle-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-6);
}

@media (min-width: 768px) {
  .principle-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-7) var(--gutter);
  }
}

.principle {
  position: relative;
  padding-block-start: var(--sp-4);
  border-top: 1px solid var(--line);
}

.principle::before {
  content: '';
  position: absolute;
  inset-block-start: -1px;
  inset-inline-start: 0;
  width: var(--sp-6);
  height: 1px;
  background: var(--gradient-gold);
}

.principle h3 {
  font-size: var(--fs-h4);
  font-weight: 400;
  margin-block-end: var(--sp-3);
  color: var(--offwhite);
}

.principle p {
  color: var(--muted);
  max-width: 46ch;
}

/* [INTEGRADOR] secao de fechamento e blocos com video de fundo fora do hero */
.section--closing {
  border-top: 1px solid var(--line);
}

.section--media {
  overflow: hidden;
}

.section__media {
  position: absolute;
  inset: 0;
  z-index: var(--z-base);
}

.section__media video,
.section__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.3;
}

.section__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(0, 0, 0, 0.92) 0%, rgba(0, 0, 0, 0.55) 60%, rgba(0, 0, 0, 0.85) 100%);
}

/* [INTEGRADOR] fecho da linha do tempo */
.timeline__closing {
  margin-block-start: var(--sp-6);
  padding-block-start: var(--sp-5);
  border-top: 1px solid var(--line);
  color: var(--muted);
  max-width: 52ch;
}

/* [INTEGRADOR] lacunas de componente detectadas na auditoria de classes.
 * Estas classes aparecem no HTML de exemplo da celula kairogen-ui mas nao
 * receberam regra no components.css. Preenchidas aqui para nao editar o
 * arquivo da celula. */

.hero__scroll-text {
  font-size: var(--fs-label);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}

.nav-drawer__list {
  display: flex;
  flex-direction: column;
}

.site-footer__nav .site-footer__list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

/* [INTEGRADOR] estado sem JS de animacao — o conteudo nunca pode ficar invisivel */
.is-static [data-reveal],
.is-static [data-pin-step] {
  opacity: 1;
  visibility: visible;
  transform: none;
}