/* ==========================================================================
   NordesteLAB 2026 — Landing
   ========================================================================== */

:root {
  --papel: #fbf8ef;
  --tinta: #2e302e;
  --vermelho: #d2241b;
  --amarelo: #f7ba24;

  --fonte: "Mona Sans", "Helvetica Neue", Arial, sans-serif;

  /* unidade de escala: acompanha a largura, mas freia em telas baixas */
  --u: min(1vw, 1.6vh);

  /* moldura (fatias da imagem: 64 topo / 64 direita / 56 esquerda) */
  --moldura: clamp(28px, 3.34vw, 84px);
  --moldura-esq: calc(var(--moldura) * 56 / 64);

  /* respiro lateral: alinha logo e data como na referência (158px @1920) */
  --margem: 8.2vw;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--fonte);
  -webkit-font-smoothing: antialiased;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  grid-template-rows: auto minmax(28vw, 1fr);
  min-height: 100vh;
  min-height: 100svh;
  background: var(--papel) url("../assets/img/papel.jpg") center / cover no-repeat;
}

/* moldura de xilogravura (topo e laterais; o chão da ilustração sangra embaixo) */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  border-style: solid;
  border-color: transparent;
  border-width: var(--moldura) var(--moldura) 0 var(--moldura-esq);
  border-image-source: url("../assets/img/moldura.webp");
  border-image-slice: 64 64 0 56;
  border-image-width: var(--moldura) var(--moldura) 0 var(--moldura-esq);
  border-image-repeat: stretch;
}

/* ---- topo: marca + informações ---- */

.hero__topo {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4vw;
  padding: calc(var(--u) * 7.79) calc(var(--margem) + 1.2vw) calc(var(--u) * 4.41) var(--margem);
}

.hero__marca {
  flex: 0 0 auto;
  width: clamp(210px, calc(var(--u) * 29.7), 720px);
  margin: 0;
}

.hero__logo {
  width: 100%;
}

.hero__info {
  position: relative;
  top: calc(var(--u) * -0.1);
  flex: 0 1 auto;
  display: grid;
  justify-items: center;
  text-align: center;
  text-transform: uppercase;
  font-stretch: 125%;
  line-height: 1;
}

/* textura de impressão: pintas cor de papel por cima do texto (falhas de tinta) */
.hero__info::after {
  content: "";
  position: absolute;
  inset: -0.5em;
  background: url("../assets/img/granulado.png") 0 0 / 200px;
  pointer-events: none;
}

.hero__local,
.hero__chamada {
  margin: 0;
  font-size: clamp(12px, calc(var(--u) * 1.29), 32px);
  font-weight: 800;
  letter-spacing: 0.08em;
}

.hero__data {
  margin: 0.236em 0 0.18em;
  color: var(--vermelho);
  font-size: clamp(22px, calc(var(--u) * 3.04), 76px);
  font-weight: 900;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

/* ---- ilustração ----
   A arte (2720×847, chão estendido nas laterais) encaixa pela altura do espaço
   livre. Em telas muito largas cobre a largura e corta até ~12% embaixo; em
   telas mais altas cresce até o limite do miolo (--zoom) e assenta no chão. */

.hero__arte {
  --proporcao: 3.211;
  --zoom: 1.85;
  position: relative;
  z-index: 1;
  margin: 0;
  container-type: size;
}

.hero__arte img {
  --largura: clamp(
    min(100cqw, 1.12 * var(--proporcao) * 100cqh),
    var(--proporcao) * 100cqh,
    var(--zoom) * 100cqw
  );
  position: absolute;
  left: 50%;
  top: max(0px, 100cqh - var(--largura) / var(--proporcao));
  width: var(--largura);
  max-width: none;
  height: auto;
  transform: translateX(-50%);
}

/* --------------------------------------------------------------------------
   Retrato (celular e tablet em pé): fluxo vertical, tudo centralizado
   -------------------------------------------------------------------------- */

@media (max-width: 767px), (max-aspect-ratio: 1/1) {
  :root {
    --u: 1vw;
  }

  .hero {
    grid-template-rows: 1fr auto;
  }

  .hero__topo {
    flex-direction: column;
    justify-content: center;
    gap: clamp(24px, 7vw, 56px);
    padding: calc(var(--moldura) + 7vw) var(--margem) 7vw;
  }

  .hero__marca {
    width: min(66vw, 470px);
  }

  .hero__info {
    top: 0;
  }

  .hero__local,
  .hero__chamada {
    font-size: clamp(12px, 3.3vw, 24px);
  }

  .hero__data {
    font-size: clamp(18px, 6.2vw, 56px);
  }

  .hero__arte {
    height: calc(100vw * var(--zoom) / var(--proporcao));
  }
}

@media (max-width: 767px) {
  :root {
    --margem: 8vw;
  }

  .hero__marca {
    width: 70vw;
  }

  .hero__data {
    font-size: 6.4vw;
  }

  .hero__arte {
    --zoom: 2.45;
  }
}

/* --------------------------------------------------------------------------
   Entrada
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
  .hero__marca,
  .hero__info,
  .hero__arte {
    animation: surgir 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) both;
  }

  .hero__info {
    animation-delay: 0.12s;
  }

  .hero__arte {
    animation-name: subir;
    animation-duration: 1.2s;
    animation-delay: 0.2s;
  }

  @keyframes surgir {
    from {
      opacity: 0;
      transform: translateY(14px);
    }
  }

  @keyframes subir {
    from {
      opacity: 0;
      transform: translateY(4%);
    }
  }
}