/* Hallmark · página: índice por idioma · direção Alvorada (redesign 2026-09-04)
 * Branco limpo + âmbar elétrico; destaque de hoje como hero em Fraunces com
 * régua-gradiente; lista larga com hover de elevação. Header fixo vem do base.
 * Íntegra com 1 devocional (só o hero) e com 30 (grupos por mês + busca). */

/* ---------- Miolo ---------- */

.indice {
  max-width: var(--largura-max);
  margin: 0 auto;
  padding: var(--space-2xl) var(--pad-lateral) var(--space-3xl);
}

/* ---------- Destaque (hero) ---------- */

.hoje {
  padding-top: var(--space-xl);
}

.hoje__col {
  max-width: 56rem;
}

.hoje__rotulo {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-accent-text);
}

.hoje__rotulo::after {
  /* régua-gradiente da alvorada, assinatura da série */
  content: "";
  display: block;
  margin-top: var(--space-xs);
  width: 3.5rem;
  height: 3px;
  border-radius: 3px;
  background: var(--grad-amber);
}

.hoje__data {
  margin-top: var(--space-md);
  font-size: var(--text-sm);
  color: var(--color-neutral);
}

.hoje__titulo {
  margin-top: var(--space-sm);
  font-family: var(--font-serif);
  font-size: var(--text-display-s);
  font-weight: 700;
  line-height: var(--leading-display);
  letter-spacing: -0.02em;
  overflow-wrap: anywhere;
  min-width: 0;
}

.hoje__tema {
  margin-top: var(--space-sm);
  font-size: var(--text-md);
  color: var(--color-neutral);
  line-height: 1.5;
  max-width: 42rem;
}

.hoje__passagem {
  margin-top: var(--space-xl);
  padding-left: var(--space-lg);
  border-left: 3px solid var(--color-accent);
  max-width: 40rem;
}

.hoje__passagem-texto {
  font-family: var(--font-serif);
  font-size: var(--text-lg);
  font-weight: 500;
  line-height: 1.35;
}

.hoje__passagem-ref {
  display: block;
  margin-top: var(--space-sm);
  font-family: var(--font-sans);
  font-style: normal;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  font-variant-numeric: lining-nums;
  color: var(--color-neutral);
}

.hoje__ler {
  margin-top: var(--space-xl);
}

/* ---------- Anteriores ---------- */

.anteriores {
  margin-top: var(--space-3xl);
}

.anteriores__controles {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-lg);
  align-items: flex-end;
  justify-content: space-between;
  padding-bottom: var(--space-md);
  border-bottom: 1px solid var(--color-rule);
}

.anteriores__titulo {
  font-family: var(--font-serif);
  font-size: var(--text-xl);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.filtros {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
}

.filtros__campo {
  display: block;
  min-width: 0;
}

.filtros__rotulo {
  display: block;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-neutral);
  margin-bottom: var(--space-2xs);
}

.filtros__busca,
.filtros__livro {
  font: inherit;
  font-size: var(--text-sm);
  color: var(--color-ink);
  background: var(--color-paper);
  border: 1px solid var(--color-rule);
  border-radius: 999px;
  padding: 0.5em 1em;
  max-width: 100%;
  transition: border-color var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out);
}

.filtros__busca {
  width: 14rem;
}

.filtros__busca:hover,
.filtros__livro:hover {
  border-color: var(--color-neutral);
}

.filtros__busca:focus-visible,
.filtros__livro:focus-visible {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px oklch(76% 0.16 70 / 0.25);
  outline: none;
}

/* Grupos por mês */

.grupo-mes {
  margin-top: var(--space-2xl);
}

.grupo-mes__titulo {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  font-variant-numeric: lining-nums;
  color: var(--color-neutral);
}

.grupo-mes__titulo::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--color-rule);
}

.grupo-mes__lista {
  margin-top: var(--space-lg);
  display: grid;
  gap: var(--space-md);
}

@media (min-width: 820px) {
  .grupo-mes__lista {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-lg);
  }
}

.item__link {
  display: grid;
  grid-template-columns: minmax(0, 132px) minmax(0, 1fr);
  gap: var(--space-md);
  align-items: start;
  padding: var(--space-sm);
  margin: calc(-1 * var(--space-sm));
  border-radius: var(--radius-2);
  text-decoration: none;
  transition: background-color var(--dur-1) var(--ease-out),
    box-shadow var(--dur-1) var(--ease-out),
    transform var(--dur-1) var(--ease-out);
}

.item__link:hover {
  background: var(--color-paper);
  box-shadow: var(--shadow-2);
  transform: translateY(-2px);
}

.item__thumb {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius-1);
  box-shadow: var(--shadow-1);
}

.item__texto {
  min-width: 0;
}

.item__data {
  display: block;
  font-size: var(--text-xs);
  color: var(--color-neutral);
}

.item__titulo {
  display: block;
  margin-top: var(--space-2xs);
  font-family: var(--font-serif);
  font-size: var(--text-md);
  font-weight: 600;
  line-height: 1.3;
  overflow-wrap: anywhere;
  transition: color var(--dur-1) var(--ease-out);
}

.item__link:hover .item__titulo {
  color: var(--color-accent-text);
}

.item__tema {
  display: block;
  margin-top: var(--space-2xs);
  font-size: var(--text-sm);
  color: var(--color-neutral);
  line-height: 1.5;
}

.item-ad {
  max-width: 36rem;
}

@media (min-width: 820px) {
  .item-ad {
    grid-column: 1 / -1;
    justify-self: start;
    width: 100%;
  }
}

.nada-encontrado {
  margin-top: var(--space-2xl);
  color: var(--color-neutral);
}

/* ---------- Rodapé ---------- */

.indice-rodape {
  border-top: 1px solid var(--color-rule);
  padding: var(--space-lg) var(--pad-lateral) var(--space-2xl);
}

.indice-rodape__miolo {
  max-width: var(--largura-max);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm) var(--space-lg);
}

.indice-rodape__logo {
  height: 20px;
  width: auto;
}

.indice-rodape__texto {
  font-size: var(--text-sm);
  color: var(--color-neutral);
}

/* ---------- Larguras mínimas ---------- */

@media (max-width: 379px) {
  .item__link {
    grid-template-columns: minmax(0, 84px) minmax(0, 1fr);
  }

  .filtros__busca {
    width: 100%;
  }

  .filtros__campo {
    flex: 1 1 100%;
  }
}