/* ==========================================================================
   STHEFANY — newsletter
   newsletter.css · v0.2.0
   --------------------------------------------------------------------------
   Bloco escuro com o texto à esquerda e a fotografia à direita transbordando
   a borda de baixo, como no kit de referência. O transbordo é o único lugar do
   projeto onde algo sai do bloco — por isso ele funciona: se repetisse, virava
   maneirismo.

   O bloco não tem `overflow: hidden`, senão a foto seria cortada no
   arredondamento em vez de passar por cima dele.
   ========================================================================== */

.sp-news {
  position: relative;
  margin-block: var(--sp-e-8);
  padding-block: var(--sp-e-7);
}

.sp-news__interno {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
  gap: var(--sp-e-7);
  align-items: center;
}

.sp-news__titulo {
  max-width: 15ch;
}

.sp-news__texto {
  max-width: 44ch;
  margin-block-start: var(--sp-e-4);
  color: var(--sp-texto-2);
}

.sp-news__forma { margin-block-start: var(--sp-e-6); }

.sp-news__aviso {
  margin-block-start: var(--sp-e-3);
  color: var(--sp-texto-3);
  font-size: var(--sp-t-mini);
  max-width: 40ch;
}

.sp-news__seguir {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-e-4);
  margin-block-start: var(--sp-e-6);
}

.sp-news__seguir span {
  font-family: var(--sp-fonte-titulo);
  font-size: 1.0625rem;
  font-weight: 600;
}

.sp-news__rede {
  color: var(--sp-acento-texto);
  font-size: 1.375rem;
  line-height: 0;
  transition: color var(--sp-transicao);
}
.sp-news__rede:hover { color: #fff; }

/* --- fotografia que transborda --------------------------------------------- */

/* A foto ESTICA com o bloco em vez de ter proporção fixa, e é isso que garante
   o transbordo. Com `aspect-ratio: 5/4` e `align-items: center`, a altura dela
   dependia da largura da coluna: quando o texto cresceu — o consentimento da
   LGPD entrou na 0.55.0 e somou quatro linhas —, a coluna passou a ser mais
   alta que a foto, e a foto deixou de alcançar a borda de baixo. O transbordo
   não sumiu do CSS: ele deixou de chegar lá.

   Esticando, a foto acompanha a altura do bloco e as margens negativas a levam
   para fora em cima e embaixo, independentemente de quanto texto houver. A
   razão de a proporção fixa ter sido 5:4 continua valendo — em retrato a foto
   puxava a altura do bloco inteiro —, e `stretch` resolve o mesmo problema
   pelo outro lado: agora quem manda na altura é o texto, e a foto obedece. */
.sp-news__foto {
  align-self: stretch;
  min-height: 20rem;
  border-radius: var(--sp-raio-bloco);
  margin-block: calc(var(--sp-e-6) * -1) calc(var(--sp-e-7) * -1 - var(--sp-e-8));
}

@media (max-width: 64rem) {
  .sp-news__interno { grid-template-columns: minmax(0, 1fr); gap: var(--sp-e-7); }

  /* Numa coluna o transbordo não faz sentido: a foto fica no fim do bloco e
     sairia por cima da seção seguinte sem nada para justificar. */
  .sp-news__foto {
    align-self: auto;
    min-height: 0;
    aspect-ratio: 16 / 10;
    margin-block: 0;
  }
}

@media (max-width: 48rem) {
  .sp-news { padding-block: var(--sp-e-8); }
  .sp-news__forma .sp-campo { width: 100%; }
}

/* Mesma região de retorno do formulário de contato. Ver contato.css. */
.sp-news__retorno:empty { display: none; }

.sp-news__retorno {
  margin-block-start: var(--sp-e-4);
  padding-inline-start: var(--sp-e-3);
  border-inline-start: 2px solid var(--sp-acento);
  font-size: var(--sp-t-peq);
  color: var(--sp-texto-2);
}

/* --- consentimento ---------------------------------------------------------
   A caixa é o ato afirmativo que a LGPD pede para comunicação de marketing.
   Ela nasce desmarcada e é `required`: sem ela o formulário não passa na
   validação nativa.

   O alvo de toque é o rótulo inteiro, não o quadradinho de 16px — num bloco
   escuro, num celular, acertar o quadrado é onde a assinatura se perde. */
.sp-news__consentimento {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-e-3);
  margin-block-start: var(--sp-e-4);
  color: var(--sp-texto-2);
  font-size: var(--sp-t-peq);
  line-height: 1.5;
  cursor: pointer;
}

.sp-news__consentimento input {
  flex: 0 0 auto;
  width: 1.125rem;
  height: 1.125rem;
  margin-block-start: 0.125rem;
  accent-color: var(--sp-acento);
  cursor: pointer;
}

.sp-news__consentimento:hover { color: var(--sp-texto); }