/* Criatexto by Navas (filho) */

/* Single: texto no topo + mídias empilhadas */

.job--stack {
  --job-gutter: 20px;
  --job-gap: 20px;
}

.job--stack .job-intro {
  position: relative;
  z-index: 2;
  align-items: flex-start;
  gap: 104px;
  padding: 0 5.556%;
  margin-bottom: 96px;
}

/* A coluna do título termina 24px antes das barrinhas do pai (.box-02 a 37.1% e .box-04 a 36.2% da largura)
   e o texto começa 24px depois delas: nenhuma das duas cruza o texto, seja qual for a altura da tela */
.job-intro__head {
  flex: 0 0 calc(30.644vw - 24px);
}

.job-intro__title {
  font-family: "DINBold", serif;
  font-size: clamp(30px, 4.3vw, 63px);
  color: #323232;
  letter-spacing: -1.62px;
  line-height: 1;
  text-transform: uppercase;
  margin-top: 36px;
}

.job-intro__credits {
  display: flex;
  flex-flow: row wrap;
  gap: 16px 48px;
}

.job-intro__credits h5 {
  color: #676767;
  letter-spacing: 0.4px;
  font: italic 12px/1.5em "Georgia-Italic", serif;
}

.job-intro__credits h4 {
  color: #323232;
  letter-spacing: 0.4px;
  font: normal 11px/19px "DINBold", serif;
  text-transform: uppercase;
}

.job-intro__text {
  flex: 1 1 auto;
  max-width: 600px;
}

.job-intro__text h2 {
  color: #000000;
  letter-spacing: 0;
  font: italic 35px/44px "Georgia-Italic", serif;
}

.job-intro__text p {
  color: #9b9b9b;
  letter-spacing: -0.1px;
  font: normal 14px/28px "DINMediumAlternate", sans-serif;
  margin-top: 28px;
}

.job-intro__text a {
  color: #ff6e31;
  letter-spacing: 0.4px;
  font: italic 14px/1.2em "Georgia-Italic", serif;
  display: block;
}

/* A barrinha laranja da direita ficava ao lado do carrossel; no novo layout ela cai em cima do texto (tablet)
   ou sobra um pedaço dela ao lado da primeira mídia (computador) */
@media screen and (min-width: 481px) {
  .job--stack .parallax .box-07 {
    display: none;
  }
}

.job-media {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: var(--job-gap);
  padding: 0 var(--job-gutter);
}

.job-media__item img {
  display: block;
  width: 100%;
  height: auto;
}

.job-media .youtube-player {
  height: auto;
}

.job-media .youtube-player__loop video {
  display: block;
  width: 100%;
  height: auto;
}

/* Player do YouTube por cima do loop quando o play é clicado */
.job-media .has-loop .youtube-player__video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* Sem loop o player fica no fluxo (o pai deixa .youtube-player__video sempre absoluto) */
.job-media .youtube-player:not(.has-loop) .youtube-player__video {
  position: relative;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
}

/* Duas mídias verticais seguidas ficam lado a lado e com a mesma altura: cada uma cresce na proporção
   largura/altura (--ar, vinda do template), então nenhuma é cortada */
.job-media__pair {
  display: flex;
  gap: var(--job-gap);
  align-items: flex-start;
}

.job-media__pair > .job-media__item {
  flex: var(--ar) 1 0;
  min-width: 0;
}

/* Vertical sozinha: centralizada, no tamanho de uma das metades, em vez de esticar na largura toda */
.job-media__item--solo {
  width: calc((100% - var(--job-gap)) / 2);
  margin: 0 auto;
}

@media screen and (min-width: 100px) and (max-width: 480px) {
  .job--stack {
    --job-gap: 12px;
  }

  /* No celular continua tudo uma embaixo da outra, na largura da tela */
  .job-media__pair {
    flex-direction: column;
  }

  .job-media__pair > .job-media__item {
    flex: none;
    width: 100%;
  }

  .job-media__item--solo {
    width: auto;
    margin: 0;
  }

  /* No celular essa barrinha cairia em cima do subtítulo */
  .job--stack .parallax .box-06 {
    display: none;
  }

  .job--stack .job-intro {
    display: flex;
    flex-direction: column;
    gap: 40px;
    padding: 0 11.111vw;
    margin-bottom: 56px;
  }

  .job-intro__head,
  .job-intro__text {
    flex: none;
    width: 100%;
  }

  /* No celular o original mostra o título antes de Cliente e Em parceria */
  .job-intro__head {
    display: flex;
    flex-direction: column;
  }

  .job-intro__title {
    order: -1;
    margin: 0 0 24px;
  }

  .job-intro__credits {
    flex-direction: column;
    gap: 12px;
  }

  .job-intro__credits li {
    display: flex;
    align-items: baseline;
  }

  .job-intro__credits h5 {
    flex: 0 0 28.4%;
    line-height: 16px;
  }

  .job-intro__credits h4 {
    line-height: 16px;
  }

  .job-intro__text h2 {
    font-size: 28px;
    line-height: 40px;
  }

  .job-intro__text p {
    font-size: 16px;
    line-height: 24px;
    margin-top: 20px;
  }
}

/* Galeria animada: cada mídia entra desfocada e um pouco menor e fica nítida, no tamanho cheio, enquanto sobe
   na tela (mistura dos demos "Blur Reveal" e "Scale Scroll" do fullPage.js, em CSS puro).
   Só vale com suporte a animation-timeline e sem pedido de movimento reduzido; fora disso a mídia aparece normal. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .job-media__item {
      --reveal-blur: 12px;
      --reveal-scale: 0.92;
      --reveal-end: 45vh;
      animation: job-media-reveal linear both;
      animation-timeline: view();
      /* nítida quando o topo da mídia já subiu 45% da altura da tela, seja a mídia alta ou baixa */
      animation-range: cover 0% cover var(--reveal-end);
    }
  }
}

@keyframes job-media-reveal {
  from {
    opacity: 0.5;
    filter: blur(var(--reveal-blur));
    transform: scale(var(--reveal-scale));
  }

  to {
    opacity: 1;
    filter: none;
    transform: none;
  }
}

@media screen and (min-width: 100px) and (max-width: 480px) {
  /* No celular o pai corta a lateral com overflow-x: hidden no html e no body. No body isso cria uma área de
     rolagem que nunca rola, e a animação (view()) se guiaria por ela e ficaria parada. "clip" corta igual sem
     criar essa área; o html continua cortando a lateral da tela. */
  body.single-portfolio {
    overflow-x: clip !important;
  }

  .job-media__item {
    --reveal-blur: 8px;
    --reveal-scale: 0.95;
    --reveal-end: 35vh;
  }
}