/* Component: breadcrumbs */

.pf-riojano-breadcrumbs {
  /* OJO: solo padding vertical. El padding lateral lo aporta
   * `.pf-riojano-container` (gutter responsive). Si pusiéramos
   * `padding: X 0` aquí, sobreescribiríamos el gutter y la migaja
   * quedaría pegada al borde del viewport. */
  padding-top: var(--pf-riojano-space-3);
  padding-bottom: var(--pf-riojano-space-3);
  font-size: var(--pf-riojano-fs-sm);
  color: var(--pf-riojano-brand-primary-soft);
}
.pf-riojano-breadcrumbs__list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pf-riojano-space-2);
  margin: 0;
  padding: 0;
}
.pf-riojano-breadcrumbs__item {
  display: inline-flex;
  align-items: center;
}
.pf-riojano-breadcrumbs__item + .pf-riojano-breadcrumbs__item::before {
  content: "›";
  margin-right: var(--pf-riojano-space-2);
  color: var(--pf-riojano-neutral-mute);
}
.pf-riojano-breadcrumbs a {
  color: var(--pf-riojano-brand-primary);
  text-decoration: none;
  /* Padding interno para tap-target en mobile sin hinchar el componente. */
  padding: 4px 0;
  display: inline-block;
}
.pf-riojano-breadcrumbs a:hover { color: var(--pf-riojano-brand-accent-strong); }
.pf-riojano-breadcrumbs__item [aria-current="page"] {
  color: var(--pf-riojano-brand-primary-dark);
  font-weight: 600;
  /* La categoría/título del producto puede ser largo: que parta limpio
   * por palabras en pantallas estrechas, no fuerce el horizontal scroll. */
  overflow-wrap: anywhere;
}

/* En mobile (≤768px) el breadcrumb compite por espacio con título,
 * card de producto y CTAs. La info de jerarquía se obtiene también
 * navegando con el back del navegador, así que lo ocultamos. */
@media (max-width: 768px) {
  .pf-riojano-breadcrumbs { display: none; }
}