/*
 * Página "Em breve" (public/em-breve.html), servida ao público enquanto EM_BREVE = "1".
 * A identidade vem inteira do site.css (tokens, fontes, capa, contato, rodapé): aqui ficam só
 * os poucos ajustes desta página. Sem estilos inline (a CSP da página não tem nonce).
 */

.capa__lead + .em-breve__nota {
  margin-top: var(--esp-4);
}

.em-breve__nota {
  max-width: 44ch;
  font-size: var(--fs-pequeno);
  line-height: 1.6;
  color: var(--cor-taupe-escuro);
}

.em-breve__redes {
  display: grid;
  gap: var(--esp-5);
  align-content: start;
}

.em-breve__lista-redes {
  display: grid;
  gap: var(--esp-2);
  list-style: none;
}

.em-breve__lista-redes a {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-3);
  min-height: 44px;
  text-decoration: none;
}

.em-breve__lista-redes a:hover .em-breve__rede-nome {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

.em-breve__lista-redes .icone {
  font-size: 1.25rem;
}

.em-breve__rede-nome {
  display: block;
  font-size: var(--fs-pequeno);
  font-weight: 500;
  color: var(--cor-taupe-escuro);
}

/* Celular: a palavra-fantasma da capa colide com o título "Em breve"; aqui ela sai. */
@media (width < 1024px) {
  .capa__fantasma {
    display: none;
  }
}

@media (width >= 1024px) {
  .em-breve__redes {
    grid-column: 8 / 13;
  }
}

/*
 * Notebooks e monitores Full HD com zoom de 125% (janela útil ~1536×730): o texto da
 * contracapa passava da altura da tela e esticava a capa, cortando a foto da Luine.
 * Em telas baixas, o texto fica mais compacto para a capa caber inteira na primeira dobra.
 */
@media (width >= 1024px) and (height < 900px) {
  .secao--capa {
    min-height: max(var(--altura-capa), 34rem);
  }

  .secao--capa .capa__contracapa {
    padding-block: var(--esp-6);
  }

  .capa__texto .capa__lead {
    font-size: 1.125rem;
  }

  .capa__texto .capa__acoes,
  .capa__texto .capa__local {
    margin-top: var(--esp-5);
  }
}

/*
 * Telas bem baixas (notebook 1366×768 com as barras do navegador, ~657 px úteis; 1280×600;
 * 1024×600): mesmo compacta, a contracapa passava da dobra e o nome da Luine ficava abaixo
 * dela. Aqui saem o texto secundário e a linha de local (a cidade já está no lead).
 */
@media (width >= 1024px) and (height < 700px) {
  .secao--capa {
    min-height: max(var(--altura-capa), 28rem);
  }

  .capa__texto .em-breve__nota,
  .capa__texto .capa__local {
    display: none;
  }

  .capa__texto .capa__lead {
    font-size: 1rem;
  }
}