/* ═══════════════════════════════════════════════════════════════════════════
   THEMMIS DS v2 · Home page (#19)
   ───────────────────────────────────────────────────────────────────────────
   Apenas regras de layout das 9 seções da home. Nada de tokens, nada de
   estilos de componentes (esses ficam em components/*.css). Linkado direto
   pelo loja/index.php via <link rel="stylesheet">.

   ALTERNÂNCIA bg (spec §4):
     - Hero: dark (do próprio component_hero — image full-bleed + theme-dark)
     - Marquee: accent (faixa laranja, full-width)
     - Mais Vendidos: light
     - Categorias: light
     - Embaixadores: DARK
     - Lançamentos: light
     - Por que THEMMIS: light
     - FAQ: light
     - Newsletter: DARK
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Trust strip (linha de garantias §4.3, logo abaixo do hero) ────────── */
.home-trust-strip {
  background: var(--bg-light-elevated);
  border-bottom: 1px solid var(--border-light);
  padding: var(--space-4) var(--space-4);
}
.home-trust-strip__list {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-8);
  list-style: none;
  padding: 0;
}
.home-trust-strip__item {
  font-family: var(--font-family-body);
  font-size: var(--fs-caption);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--tracking-brand);  /* R6.8: era tracking-micro · eyebrow pattern */
  text-transform: uppercase;
  color: var(--text-on-light);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
.home-trust-strip__item::before {
  content: '·';
  /* R4.7: separador era accent · agora --fg-subtle (cinza médio) ·
     marcador editorial silencioso · não compete com texto */
  color: var(--fg-subtle);
  font-weight: var(--font-weight-bold);
  font-size: 1.2em;
  line-height: 0;
}

/* ── Seções base ──────────────────────────────────────────────────────── */
/* R6.9: padding-block alinhado HTML §section (py-16 lg:py-24 = 64/96px) ·
   antes era 48/64px · agora respiro maior · pattern-bg visível nas gaps.
   home-section--light com bg-base era redundante (= body bg) · removido
   para deixar pattern-bg do <main> aparecer. Dark section preservada como
   ritmo visual intencional (newsletter/embaixadores). */
.home-section {
  padding-block: var(--space-16) var(--space-24);  /* 64 / 96px · HTML pattern */
}
@media (max-width: 767px) {
  .home-section { padding-block: var(--space-12) var(--space-16); }  /* 48/64 mobile */
}

.home-section--light {
  /* Background removido em R6.9: deixa pattern-bg do <main> aparecer.
     Color herda do body · neutro per tema. */
  color: var(--text-on-light);
}
.home-section--dark {
  background: var(--bg-inverse);                   /* R6.9: era --bg-dark · usa token semantico */
  color: var(--fg-on-inverse);
}
.home-section--newsletter {
  padding-block: 0;                    /* component_newsletter controla padding interno */
}
.home-section__inner {
  max-width: 1440px;
  margin: 0 auto;
  padding-inline: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}
.home-section__inner--narrow {
  max-width: 800px;
}

/* ── Grid Categorias (Tiles 4:5) ──────────────────────────────────────── */
.home-tile-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}
@media (min-width: 768px) {
  .home-tile-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Categorias · o nome NÃO é pintado sobre a imagem (as artes já trazem texto/
   branding próprios), mas continua acessível: o aria-label do link e o h3 no
   DOM preservam o nome para leitor de tela e SEO. Sem o nome visível, o overlay
   de legibilidade é removido — imagem editorial limpa. Escopo: só a home. */
.home-tile-grid .category-tile__overlay { display: none; }
.home-tile-grid .category-tile__label {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ── Grid Embaixadores ────────────────────────────────────────────────── */
.home-amb-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}
@media (min-width: 768px) {
  .home-amb-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ── Grid Pilares ─────────────────────────────────────────────────────── */
.home-pillar-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}
@media (min-width: 768px) {
  .home-pillar-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* ── FAQ — limita largura p/ leitura ──────────────────────────────────── */
.home-section--faq .home-section__inner { gap: var(--space-6); }

/* ── Newsletter override (dark) — força inversão de cor sobre dark band ─ */
.home-section--dark .newsletter             { background: transparent; color: var(--text-on-dark); }
.home-section--dark .newsletter__title,
.home-section--dark .newsletter__eyebrow,
.home-section--dark .newsletter__description,
.home-section--dark .newsletter__fine       { color: var(--text-on-dark); }
.home-section--dark .newsletter__eyebrow,
.home-section--dark .newsletter__description,
.home-section--dark .newsletter__fine       { color: var(--text-on-dark-mut); }
.home-section--dark .newsletter__input {
  background: var(--bg-dark-elevated);
  color: var(--text-on-dark);
  border-color: var(--border-dark);
}
.home-section--dark .newsletter__input::placeholder { color: var(--text-on-dark-mut); }

/* Grupo input+botão mais estreito e centralizado sob o texto (decisão do
   usuário · em vez de ocupar os 540px do inner, fica compacto e centrado). */
.home-section--dark .newsletter__field {
  max-width: 460px;
  margin-inline: auto;
}

/* ── Embaixadores cards em dark — força cor de texto ────────────────────
   ATENCAO · cor hardcoded em hex (NAO var(--text-on-dark*)) porque os
   tokens dark em tokens.css so resolvem dentro de [data-theme="dark"].
   O markup do index.php:157 usa apenas a classe legacy ".theme-dark"
   (sem data-attribute) entao --text-on-dark resolveria para o LIGHT
   default (#000000 = preto, invisivel em fundo preto). Resolucao com
   hex literal garante visibilidade independente do scope de tema. */
.home-section--dark .ambassador-card,
.home-section--dark .ambassador-card__media { background: var(--bg-dark-elevated); }
.home-section--dark .ambassador-card__media { background: var(--bg-dark-muted); }
.home-section--dark .ambassador-card__info { color: #F3F0E9; }
.home-section--dark .ambassador-card__name,
.home-section--dark .ambassador-card__quote { color: #F3F0E9; }
.home-section--dark .ambassador-card__role,
.home-section--dark .ambassador-card__title { color: #A39C87; }