/* =========================================================
   Banner intermediário (entre Soluções e Pix)

   A imagem não tem moldura: sem borda, sem sombra e sem cantos.
   As extremidades se dissolvem no branco da página por uma máscara,
   para o banner parecer parte do fundo e não um card encaixado.

   A troca entre a arte horizontal e a vertical é feita pelo <picture>
   no index.html (ponto de troca: 640px).
   ========================================================= */

.banner {
  position: relative;
  z-index: 1; /* fica por cima do respiro em branco das seções vizinhas */
  /* como as bordas da imagem esmaecem, a seção se aproxima um pouco das vizinhas */
  margin-block: clamp(-48px, -3.4vw, -20px);
}

/* O banner pode ser um pouco mais largo que o conteúdo do site:
   as laterais esmaecidas "vazam" para além da grade */
.banner .container {
  max-width: calc(1376px + var(--gutter) * 2);
}

.banner__frame {
  margin: 0;
}

/* A imagem sempre ocupa a largura toda e mantém a própria proporção */
.banner__img {
  display: block;
  width: 100%;
  height: auto;
}

/* Frase em texto de verdade. No tablet e no desktop ela já está dentro
   da arte, então aqui fica só para leitores de tela (escondida da vista). */
.banner__copy {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Celular: banner compacto, de borda a borda da tela, com a frase DENTRO
   da composição, no lado direito (mesma ideia da arte do desktop).
   - A foto fica à esquerda, enquadrando a pessoa e o coco.
   - Para a direita a foto vai clareando até quase sumir: é sobre essa
     parte clara que a frase fica, sempre legível.
   - A frase começa depois do coco, então nunca cobre o rosto nem a mão. */
@media (max-width: 639px) {
  .banner__frame {
    position: relative;
    height: clamp(250px, 78vw, 480px); /* altura do banner no celular: acompanha a largura da tela */
    margin-inline: calc(var(--gutter) * -1);
    overflow: hidden;
  }

  /* Foto maior que a faixa e deslocada para a esquerda: a pessoa ocupa
     a metade esquerda. As medidas são em % da faixa para acompanhar a tela. */
  .banner__img {
    position: absolute;
    top: -6%;
    left: -28%;
    width: 106%;
    max-width: none;
    height: auto;
    /* máscara vertical (some em cima e embaixo) + horizontal (clareia para a direita) */
    -webkit-mask-image:
      linear-gradient(to bottom, transparent 5%, #000 19%, #000 80%, transparent 97%),
      linear-gradient(to right, #000 0, #000 70%, rgba(0, 0, 0, 0.14) 82%, transparent 95%);
    -webkit-mask-composite: source-in;
    mask-image:
      linear-gradient(to bottom, transparent 5%, #000 19%, #000 80%, transparent 97%),
      linear-gradient(to right, #000 0, #000 70%, rgba(0, 0, 0, 0.14) 82%, transparent 95%);
    mask-composite: intersect;
  }

  .banner__copy {
    position: absolute;
    z-index: 1;
    top: 50%;
    right: var(--gutter);
    width: calc(48% - var(--gutter));
    height: auto;
    overflow: visible;
    clip-path: none;
    white-space: normal;
    transform: translateY(-50%);
    /* halo branco bem leve: garante leitura onde a frase passa sobre a foto */
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.95), 0 0 2px rgba(255, 255, 255, 0.8);
  }

  .banner__title {
    font-family: var(--font-display);
    font-size: clamp(0.9375rem, 4.6vw, 1.25rem);
    font-weight: 800;
    letter-spacing: -0.035em;
    line-height: 1.14;
    color: var(--ink);
    text-wrap: balance;
  }

  .banner__title span {
    color: var(--brand-700);
  }

  .banner__text {
    margin-top: 8px;
    font-size: clamp(0.75rem, 3.3vw, 0.8125rem);
    line-height: 1.4;
    color: var(--gray-700);
    text-wrap: pretty;
  }
}

/* Tablet e desktop: a arte horizontal esmaece nas quatro bordas.
   São duas máscaras (vertical e horizontal) combinadas. */
@media (min-width: 640px) {
  .banner__img {
    -webkit-mask-image:
      linear-gradient(to bottom, transparent 0, #000 16%, #000 84%, transparent 100%),
      linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image:
      linear-gradient(to bottom, transparent 0, #000 16%, #000 84%, transparent 100%),
      linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%);
    mask-composite: intersect;
  }
}