/**
 * GS Breadcrumbs / gs-breadcrumbs — Block styles for gs-core/breadcrumbs.
 * Semantic breadcrumbs with WAI-ARIA and Schema.org BreadcrumbList.
 *
 * @package GS_Core_Framework
 */

/* ── WRAPPER ISOLATION RESET ── */
.gs-breadcrumbs-canvas-wrap {
  display: block !important;
  width: 100% !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* ── BASE STYLES ── */
.gs-breadcrumbs {
  --local-link-color: oklch(78% 0.015 250);
  --local-link-hover: var(--brand);
  --local-current-color: var(--white);
  --local-separator-color: oklch(60% 0.015 250);

  display: inline-flex;
  align-items: center;
  width: max-content;
  max-width: 100%;
  font-family: var(--font-sans);
  box-sizing: border-box;
}

/* ── SIZES (data-size) ── */
.gs-breadcrumbs[data-size="sm"] { font-size: var(--font-size-xs, 0.75rem); }
.gs-breadcrumbs[data-size="md"] { font-size: var(--font-size-sm, 0.875rem); }
.gs-breadcrumbs[data-size="lg"] { font-size: var(--font-size-md, 1rem); }

.gs-breadcrumbs__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  padding: 0;
  margin: 0;
  list-style: none;
  gap: 0.25rem;
}

.gs-breadcrumbs__item {
  display: inline-flex;
  align-items: center;
}

.gs-breadcrumbs__link {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  color: var(--local-link-color);
  text-decoration: none;
  font-weight: 500;
  border-radius: var(--radius-sm, 0.25rem);
  padding: var(--space-2xs) var(--space-xs); /* gs:ignore Q-01 Compact inline link padding */
  transition: color 0.15s ease, background-color 0.15s ease;
  outline: none;
}

.gs-breadcrumbs__link:hover {
  color: var(--local-link-hover);
  background-color: color-mix(in oklch, var(--brand) 12%, transparent);
}

.gs-breadcrumbs__link:focus-visible {
  outline: 0.125rem solid var(--brand);
  outline-offset: 0.125rem;
}

.gs-breadcrumbs__home-icon {
  flex-shrink: 0;
  color: currentColor;
  display: block;
}

.gs-breadcrumbs__separator {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 0.25rem;
  color: var(--local-separator-color);
  user-select: none;
}

.gs-breadcrumbs__separator svg {
  display: block;
}

.gs-breadcrumbs__current {
  color: var(--local-current-color);
  font-weight: 600;
  pointer-events: none;
  padding: var(--space-2xs) var(--space-xs);
}

/* ── 5 CANONICAL INTENTS (WCAG AA Compliant Contraste >= 4.5:1) ── */
.gs-breadcrumbs[data-intent="canvas"] {
  --local-link-color: oklch(78% 0.015 250);
  --local-link-hover: var(--white);
  --local-current-color: var(--white);
  --local-separator-color: oklch(62% 0.015 250);
}

.gs-breadcrumbs[data-intent="surface"] {
  --local-link-color: oklch(78% 0.015 250);
  --local-link-hover: var(--brand);
  --local-current-color: var(--white);
  --local-separator-color: oklch(62% 0.015 250);
}

.gs-breadcrumbs[data-intent="brand"] {
  --local-link-color: oklch(85% 0.05 250);
  --local-link-hover: var(--white);
  --local-current-color: var(--white);
  --local-separator-color: oklch(75% 0.04 250);
}

.gs-breadcrumbs[data-intent="accent"] {
  --local-link-color: oklch(85% 0.05 60);
  --local-link-hover: var(--white);
  --local-current-color: var(--white);
  --local-separator-color: oklch(75% 0.04 60);
}

.gs-breadcrumbs[data-intent="inverse"] {
  --local-link-color: oklch(25% 0.015 250);
  --local-link-hover: oklch(10% 0.015 250);
  --local-current-color: oklch(10% 0.015 250);
  --local-separator-color: oklch(40% 0.015 250);
  background-color: oklch(96% 0.005 250);
  padding-inline: 0.5rem;
  border-radius: var(--radius-sm, 0.25rem);
}

/* ── 2 CANONICAL PRESETS (MINIMAL & PILL) ── */
.gs-breadcrumbs[data-preset="minimal"] {
  border: none;
  box-shadow: none;
}

.gs-breadcrumbs[data-preset="pill"] {
  background: color-mix(in oklch, var(--surface) 85%, transparent);
  border: 0.0625rem solid color-mix(in oklch, var(--white) 12%, transparent);
  border-radius: var(--radius-full);
  padding: var(--space-2xs) var(--space-xs); /* gs:ignore Q-01 Compact pill container padding */
  box-shadow: inset 0 0.0625rem 0 color-mix(in oklch, var(--white) 10%, transparent);
  backdrop-filter: blur(0.5rem);
  -webkit-backdrop-filter: blur(0.5rem);
}

.gs-breadcrumbs[data-preset="pill"][data-intent="inverse"] {
  background: oklch(96% 0.005 250);
  border-color: oklch(85% 0.01 250);
}

/* PRO INSPECTOR CONTROLS */
.gs-pro-inspector-tabs .components-tab-panel__tabs {
  display: flex;
  background: var(--canvas-2);
  border-bottom: 0.0625rem solid var(--border-subtle);
  margin-bottom: 1rem;
}

.gs-pro-inspector-tabs .components-tab-panel__tabs button {
  flex: 1;
  text-align: center;
  padding: 0.85rem 0.5rem;
  font-weight: 700;
  font-size: 0.8125rem;
  color: var(--ink-muted);
  background: transparent;
  border: none;
  border-bottom: 0.125rem solid transparent;
  cursor: pointer;
  transition: all 0.15s ease;
}

.gs-pro-inspector-tabs .components-tab-panel__tabs button.is-active {
  color: var(--brand);
  border-bottom-color: var(--brand);
}

.gs-segmented-group {
  display: flex;
  width: 100%;
  background: oklch(21% 0.006 286);
  border-radius: var(--radius-md);
  border: 0.0625rem solid oklch(37% 0.012 286);
  overflow: hidden;
}

.gs-segmented-group .components-button {
  flex: 1;
  justify-content: center;
  font-weight: 700;
  font-size: 0.75rem;
  background: oklch(27% 0.005 286);
  color: oklch(71% 0.013 286);
  border: none;
  border-right: 0.0625rem solid oklch(37% 0.012 286);
  border-radius: 0;
  height: 2rem;
}

.gs-segmented-group .components-button.is-primary {
  background: oklch(55% 0.215 263) !important;
  color: oklch(100% 0 0) !important;
}