/* ===========================================================================
   Cajo Hero — título com pílula de vídeo
   ---------------------------------------------------------------------------
   A pílula é media dimensionada em em: cresce e encolhe com o título sem
   ninguém ter de a acertar à mão. O border-radius é maior do que metade da
   altura, por isso a forma é sempre um "stadium", seja qual for o tamanho.
   =========================================================================== */

.cajo-hero {
  --ch-media-largura: 2.8em;
  --ch-media-altura: 1.5em;
  --ch-raio: 999px;
  --ch-raio-inicial: 0px;
  --ch-entrelinha: 1.05;
  --ch-espaco: 0.28em;

  position: relative;
  background: var(--ch-fundo, transparent);
}

/* O palco é o que fica colado ao ecrã enquanto a secção passa. */
.cajo-hero__palco {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  overflow: clip;
}

/* --- o palco preso ao ecrã ------------------------------------------------
   Isto era position: sticky, e não colava. O Salient põe o scroll no <html>
   e deixa o <body> com overflow:hidden; um ancestral com overflow:hidden é
   um scroll container, e o sticky passa a referir-se a esse — que nunca
   scrolla. Resultado: o palco descia com a página e não se via nada.
   (É o mesmo overflow:hidden que já nos tinha obrigado a trocar o
   scrollIntoView por scrollTo no Cajo Tabs.)

   Em vez do sticky, três fases comandadas pelo JS. position:fixed não quer
   saber do overflow de ninguém — só de transforms em ancestrais, e não há
   nenhum acima desta secção.

     (sem classe)  antes  — encostado ao topo da secção
     .ch-fixo      durante — preso ao ecrã
     .ch-depois    depois  — encostado ao fundo da secção

   O palco também sai da coluna do WPBakery: a row tem o container do tema
   (1282px num ecrã de 1440), e um vídeo de hero com margens brancas dos dois
   lados não é um vídeo de ecrã inteiro. É calc(50% - 50vw) e não -50vw, para
   funcionar esteja a coluna onde estiver — e é só esta div que se mexe, a
   grelha à volta não dá por nada. Foi o oposto disto que estragou a banda do
   Get in Touch. */
.cajo-hero--com-efeito .cajo-hero__palco {
  position: absolute;
  top: 0;
  left: 0;
  right: auto;
  height: 100vh;
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
}

/* Preso ao ecrã. left/right em vez de 100vw: assim a largura é a da área
   visível e os 15px da barra de scroll não ficam escondidos por baixo. */
.cajo-hero--com-efeito.ch-fixo .cajo-hero__palco {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: auto;
  max-width: none;
  margin-left: 0;
}

.cajo-hero--com-efeito.ch-depois .cajo-hero__palco {
  top: auto;
  bottom: 0;
}

/* A barra de scroll faz 100vw ser maior do que a área visível; sem isto
   aparecia uma barra horizontal. */
.cajo-hero {
  overflow-x: clip;
}

/* --- título ---------------------------------------------------------------
   Flex com wrap: as palavras e a pílula comportam-se como peças da mesma
   linha, e a pílula nunca encolhe (shrink: 0) para não deformar o vídeo.
   -------------------------------------------------------------------------- */

/* O título é uma coluna de linhas; cada linha é que é a fila de palavras.
   As linhas vêm do campo no WPBakery (uma por cada quebra de linha) e não do
   flex-wrap: assim a disposição é a mesma em qualquer largura, que é o que o
   desenho desta hero pede. */
/* O selector leva duas classes de propósito. O Salient tem, no telemóvel,
   `.col h2 { font-size: 34px }` — e `.col h2` (uma classe + um elemento) é
   mais específico do que `.cajo-hero__titulo` sozinho. Com uma classe só, o
   tamanho que se calcula aqui era ignorado em ecrãs pequenos e o título
   ficava nos 34px do tema, que é o que fazia a linha do meio partir-se.
   Não é um caso de !important: é mesmo especificidade. */
.cajo-hero .cajo-hero__titulo {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
  padding: 0 5vw;
  color: var(--ch-cor, inherit);
  /* Com 'inherit' o título saía com o tamanho do h2 do tema — 28px — e numa
     hero de ecrã inteiro isso é uma legenda, não um título. O clamp dá um
     tamanho de hero por omissão e continua a ceder ao campo do WPBakery
     quando ele está preenchido.

     O min(..., 8vw) é o que trata dos ecrãs estreitos, e não um @media.
     As linhas são fixas, por isso a mais comprida tem de caber na largura
     que houver; a desta hero mede cerca de 10.3em ("Strategy" + pílula +
     "Digital"). Com o clamp sozinho, o piso de 2.25rem dava 34px num ecrã
     de 375 e essa linha precisava de 350px quando só tinha 332 — partia-se
     em duas e o título ficava com quatro linhas.
     O 8vw só entra abaixo dos ~450px; acima disso o clamp é sempre o mais
     pequeno dos dois, por isso o desktop e o tablet ficam exactamente como
     estavam. Medido: 375px -> 30px (linha de 308), 320px -> 25.6px (263). */
  font-size: var(--ch-tamanho, min(clamp(2.25rem, 6.5vw, 7.5rem), 8vw));
  font-weight: var(--ch-peso, inherit);
  line-height: var(--ch-entrelinha);
}

.cajo-hero__linha {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0 var(--ch-espaco);
}

.cajo-hero--left .cajo-hero__titulo { align-items: flex-start; }
.cajo-hero--left .cajo-hero__linha { justify-content: flex-start; text-align: left; }
.cajo-hero--right .cajo-hero__titulo { align-items: flex-end; }
.cajo-hero--right .cajo-hero__linha { justify-content: flex-end; text-align: right; }

.cajo-hero__palavra {
  display: inline-block;
}

/* O buraco onde o vídeo vai assentar no fim. Ocupa espaço no layout desde o
   início, senão o título saltava quando o vídeo chegasse. */
.cajo-hero__pilula {
  position: relative;
  display: inline-block;
  flex: 0 0 auto;
  width: var(--ch-media-largura);
  height: var(--ch-media-altura);
  border-radius: var(--ch-raio);
  background: currentColor;
  opacity: 0.12;
  overflow: hidden;
}

/* No fim do percurso o media fica posicionado por cima da pílula — e é só
   isso: não muda de sítio no DOM. Houve uma versão que o metia dentro da
   pílula, e mover um iframe no DOM obriga o browser a recarregá-lo, o que
   fazia o vídeo do YouTube recomeçar do princípio. Ver a nota em
   assentar(), no cajo-hero.js. */
.cajo-hero.is-assente .cajo-hero__pilula {
  background: none;
  opacity: 1;
}

/* --- o media --------------------------------------------------------------
   Começa a ocupar o ecrã e encolhe até coincidir com a pílula. As medidas
   são escritas pelo JS; aqui fica só o que não depende do scroll.
   -------------------------------------------------------------------------- */

.cajo-hero__media {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: var(--ch-raio-inicial);
  will-change: transform;
  pointer-events: none;

  /* A imagem fica por baixo do vídeo e só se vê no instante em que ele
     ainda não arrancou. Escrita pelo PHP: o poster, ou a miniatura do
     próprio vídeo do YouTube. */
  background-image: var(--ch-poster, none);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.cajo-hero__media video,
.cajo-hero__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --- galeria de imagens ---------------------------------------------------
   Várias imagens em vez de vídeo. Ficam todas empilhadas no mesmo sítio e
   só uma está visível de cada vez; quem troca é o JS, por tempo ou conforme
   o scroll.

   Empilhadas em absoluto, e não trocadas pelo src, para a troca poder ser
   um fade e para não haver um instante em branco enquanto a seguinte
   carrega.
   -------------------------------------------------------------------------- */

.cajo-hero__galeria {
  position: absolute;
  inset: 0;
}

.cajo-hero__galeria .cajo-hero__img {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.8s ease;
}

.cajo-hero__galeria .cajo-hero__img.is-ativa {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {

  .cajo-hero__galeria .cajo-hero__img {
    transition: none;
  }
}

/* --- YouTube --------------------------------------------------------------
   Um iframe não obedece a object-fit: cover. Tem de ser esticado até cobrir
   a caixa, mantendo o 16/9, e o que sobra fica cortado pelo overflow.

   Duas tentativas falhadas antes desta, as duas confirmadas no site:

   1. Unidades de container (cqw/cqh). Num palco de 1282x900 o iframe ficava
      com 1282x718 — sobravam faixas em cima e em baixo.
   2. O JS a escrever width/height inline no iframe. O Salient corre fitVids,
      que escreve as suas próprias medidas inline no mesmo iframe; ganhava
      quem escrevesse por último, e o vídeo saía esticado a 1425x900.

   Daí esta forma. As medidas entram por custom properties postas no PAI, e a
   declaração aqui leva !important: uma regra !important de folha de estilo
   ganha a um style inline sem !important, por isso o fitVids deixa de ter
   voto na matéria. Sem as variáveis — antes de o JS correr —, o
   aspect-ratio com os dois mínimos a 100% já dá a cobertura certa.

   O seletor leva .cajo-hero__media à frente porque o Salient carimba
   .iframe-embed em todos os iframes e tem regras próprias para essa classe.
   -------------------------------------------------------------------------- */

.cajo-hero__media .cajo-hero__yt {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  translate: -50% -50%;
  aspect-ratio: 16 / 9;
  width: var(--ch-yt-w, auto) !important;
  height: var(--ch-yt-h, auto) !important;
  min-width: 100% !important;
  min-height: 100% !important;
  max-width: none !important;
  border: 0;
  pointer-events: none;

  /* Escondido até estar mesmo a dar.
     Enquanto carrega, o player mostra o cartão do YouTube — avatar do
     canal, título, botão de play e logo — e com scroll rápido isso ficava
     à vista já dentro da pílula. Em vez de o tapar depois de aparecer,
     não se mostra o iframe de todo até o player dizer que está a
     reproduzir; por baixo está a imagem. A classe é posta pelo JS. */
  opacity: 0;
  transition: opacity 0.35s ease;
}

.cajo-hero.is-video-pronto .cajo-hero__media .cajo-hero__yt {
  opacity: 1;
}

/* Se o fitVids chegar a embrulhar o iframe, o embrulho não desalinha nada. */
.cajo-hero__media .fluid-width-video-wrapper {
  position: absolute;
  inset: 0;
  padding: 0 !important;
}

/* --- sem efeito -----------------------------------------------------------
   Telemóvel, "reduzir movimento", ou a opção desligada: o título é só um
   título com uma pílula no meio. Nada de sticky nem de ecrã inteiro.
   -------------------------------------------------------------------------- */

/* relative, e não static: o media é posicionado em absoluto em relação ao
   palco, e com static passava a contar a partir da secção. */
.cajo-hero--simples .cajo-hero__palco,
.cajo-hero.is-estatico .cajo-hero__palco {
  position: relative;
  /* Mesmo sem o efeito continua a ser a hero da página: 60vh evita que
     fique uma faixa fina. */
  min-height: 60vh;
  height: auto;
  width: auto;
  max-width: none;
  margin-left: 0;
  padding: 8vh 0;
  overflow: visible;
}

/* O palco está fora do fluxo, por isso quem segura a altura da secção é o
   style inline que o JS escreve. Se o JS não correr, isto evita uma secção
   de 0px. */
.cajo-hero--com-efeito {
  min-height: 100vh;
}

.cajo-hero--com-efeito.is-estatico {
  min-height: 0;
}

@media (prefers-reduced-motion: reduce) {

  .cajo-hero__palco {
    position: static !important;
    min-height: 0;
    padding: 8vh 0;
  }

  .cajo-hero__media {
    transition: none !important;
  }
}

@media (max-width: 690px) {

  .cajo-hero {
    /* A pílula e o espaçamento encolhem um pouco mais depressa do que o
       texto: é o que dá folga à linha do meio, que é a mais comprida. */
    --ch-espaco: 0.18em;
    --ch-media-largura: 2.6em;
    --ch-media-altura: 1.4em;
  }

  .cajo-hero .cajo-hero__titulo {
    padding: 0 6vw;
    /* Campo próprio para o telemóvel, se estiver preenchido; senão o do
       desktop; senão a conta da regra base. */
    font-size: var(--ch-tamanho-telemovel, var(--ch-tamanho, min(clamp(2.25rem, 6.5vw, 7.5rem), 8vw)));
  }

  /* Sem o efeito, a secção ficava com a altura do texto e mais nada — uns
     300px soltos no meio do preto, que não se lê como hero nenhuma. Com
     68vh ocupa o ecrã quase todo e o título fica centrado, como no desenho.
     O padding sai porque quem trata do espaço agora é o min-height com o
     centramento do flex. */
  .cajo-hero--sem-efeito-telemovel .cajo-hero__palco,
  .cajo-hero.is-estatico .cajo-hero__palco {
    position: relative;
    min-height: 68vh;
    padding: 0;
    overflow: visible;
  }

}