/* ============================================================
   colecoes.css — Página index das coleções
   Layout: page-hero (breadcrumbs + título) + 3 collections-group
   (Por tipo, Por objetivo, Por marca). O grid em si vive em
   category-card.css.
   ============================================================ */

/* ----- Hero da página (também usado em categoria.html) ----- */
.page-hero {
  padding-block: var(--space-12) var(--space-8);
  background: var(--color-paper-soft);
  border-bottom: 1px solid var(--color-line);
}
.page-hero h1 {
  margin-top: var(--space-2);
}
.page-hero p {
  margin-top: var(--space-3);
  color: var(--color-ink-soft);
  max-width: 64ch;
}

.breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-14);
  color: var(--color-ink-mute);
}
.breadcrumbs a {
  color: var(--color-ink-soft);
  transition: color var(--transition-fast);
}
.breadcrumbs a:hover { color: var(--color-brand-dark); }
.breadcrumbs span[aria-hidden="true"] { color: var(--color-ink-mute); }

/* ----- Section header (sobrescreve home.css para incluir subtítulo) ----- */
.collections-group {
  padding-block: var(--space-12);
}
.collections-group + .collections-group {
  border-top: 1px solid var(--color-line);
}
.collections-group .section-header {
  display: block;
  margin-bottom: var(--space-8);
}
.collections-group .section-header h2 { margin: 0; }
.collections-group .section-header p {
  margin-top: var(--space-2);
  color: var(--color-ink-soft);
  font-size: var(--fs-16);
  max-width: 56ch;
}