/* ═══════════════════════════════════════════════════════════════
   MODO FEIRA — capa da home durante eventos presenciais

   Carregado só quando a chave está ligada e só na home
   (ver ret_enqueue_assets() em functions.php).
   ═══════════════════════════════════════════════════════════════ */

.feira {
  background: var(--color-preto);
  min-height: 100vh;
}

/* Espaçamentos folgados, mas calibrados para a capa inteira caber sem rolagem
   num laptop comum (viewport de ~720px de altura) — é assim que ela vai ficar
   na mesa da feira. */
.feira-capa {
  min-height: calc(100vh - var(--header-height));
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-lg);
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--space-lg) var(--container-pad);
}

/* ─── Marca e manifesto ─── */
.feira-capa__marca {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  max-width: 46rem;
}

.feira-capa__marca img {
  width: min(100%, 34rem);
  height: auto;
  display: block;
}

.feira-capa__manifesto {
  font-family: var(--font-minion);
  font-size: clamp(1.1rem, 2.2vw, 1.6rem);
  line-height: var(--line-height-body);
  letter-spacing: var(--ls-body);
  color: var(--color-branco-papel);
}

.feira-capa__manifesto em {
  font-style: italic;
}

/* ─── As duas entradas do dia ─── */
.feira-entradas {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-sm);
}

.feira-entrada {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding: var(--space-md);
  min-height: 15rem;
  text-decoration: none;
  border: 1px solid var(--color-branco-papel);
  background: transparent;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.feira-entrada__rotulo {
  font-family: var(--font-epilogue);
  font-weight: var(--weight-extrabold);
  font-size: clamp(1.6rem, 3.4vw, 2.8rem);
  line-height: var(--line-height-min);
  letter-spacing: var(--ls-title-sm);
  text-transform: lowercase;
  color: var(--color-branco-papel);
  transition: color 0.2s ease;
}

.feira-entrada__desc {
  font-family: var(--font-minion);
  font-size: 1.05rem;
  line-height: var(--line-height-body);
  color: var(--color-branco-papel);
  opacity: 0.65;
  transition: color 0.2s ease, opacity 0.2s ease;
}

.feira-entrada__seta {
  margin-top: auto;
  font-family: var(--font-epilogue);
  font-size: 2rem;
  line-height: 1;
  color: var(--color-branco-papel);
  transition: color 0.2s ease, transform 0.2s ease;
}

/* O fazedor de zine é a ação principal da mesa — chama primeiro. */
.feira-entrada--zine {
  background: var(--color-amarelito);
  border-color: var(--color-amarelito);
}

.feira-entrada--zine .feira-entrada__rotulo,
.feira-entrada--zine .feira-entrada__desc,
.feira-entrada--zine .feira-entrada__seta {
  color: var(--color-preto);
}

.feira-entrada--zine .feira-entrada__desc {
  opacity: 0.75;
}

.feira-entrada:hover {
  background: var(--color-branco-papel);
  border-color: var(--color-branco-papel);
}

.feira-entrada:hover .feira-entrada__rotulo,
.feira-entrada:hover .feira-entrada__desc,
.feira-entrada:hover .feira-entrada__seta {
  color: var(--color-preto);
}

.feira-entrada:hover .feira-entrada__seta {
  transform: translateX(0.4rem);
}

/* ─── Telas estreitas ─── */
@media (max-width: 760px) {
  .feira-entradas {
    grid-template-columns: 1fr;
  }

  .feira-entrada {
    min-height: 11rem;
  }

  .feira-capa {
    gap: var(--space-lg);
  }
}