/*
 * Collection Chips — horizontal pill navigation.
 *
 * Pills styled on the inner <a> so the whole pill is the hit target.
 * Active = filled brand; inactive = outline; hover = brand-soft tint.
 * Single row; overflows to horizontal scroll with a right-edge fade mask.
 *
 * Tokens read:
 *   semantic.color.button.primary.bg / .text   — active chip
 *   semantic.color.surface.primary             — inactive chip bg
 *   semantic.color.text.primary                — inactive chip text
 *   semantic.color.border.base                 — inactive chip border
 *   semantic.color.brand.primary / .brand.soft — hover
 *   semantic.radius.badge                       — pill shape
 *   semantic.typography.body                    — label font
 *   space.2 / space.3 / space.5
 *   duration.base / easing.default
 */

/* --- Row -------------------------------------------------------------- */
.wpdl-collection-chips.wp-block-group {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--wp--custom--space--2);   /* 8px — tight */
  margin-block: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.wpdl-collection-chips.wp-block-group::-webkit-scrollbar {
  display: none;
}

/* --- Chip (styled on the inner link) ---------------------------------- */
.wpdl-collection-chips__chip {
  margin-block: 0;
  flex: 0 0 auto;   /* never shrink — preserve pill width, allow scroll */
}

.wpdl-collection-chips__chip a {
  display: inline-flex;
  align-items: center;
  block-size: 2.5rem;   /* 40px — smaller, less CTA-like */
  padding-block: 0;
  padding-inline: var(--wp--custom--space--5);   /* 20px */
  border: 1px solid var(--wp--custom--semantic--color--border--subtle);
  border-radius: var(--wp--custom--semantic--radius--badge);
  background-color: transparent;
  color: var(--wp--custom--semantic--color--text--secondary);
  font-family: var(--wp--custom--semantic--typography--body--font-family);
  font-size: 0.875rem;   /* 14px */
  font-weight: 400;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  transition:
    color            var(--wp--custom--duration--base) var(--wp--custom--easing--default),
    background-color var(--wp--custom--duration--base) var(--wp--custom--easing--default),
    border-color     var(--wp--custom--duration--base) var(--wp--custom--easing--default);
}

/* Active — filled brand */
.wpdl-collection-chips__chip.is-active a {
  border-color: var(--wp--custom--semantic--color--button--primary--bg);
  background-color: var(--wp--custom--semantic--color--button--primary--bg);
  color: var(--wp--custom--semantic--color--button--primary--text);
}

/* Keyboard focus — visible ring */
.wpdl-collection-chips__chip a:focus-visible {
  outline: 2px solid var(--wp--custom--semantic--color--focus--ring);
  outline-offset: 2px;
}

/* Hover (inactive) — brand-soft tint */
.wpdl-collection-chips__chip:not(.is-active) a:hover {
  border-color: var(--wp--custom--semantic--color--brand--primary);
  background-color: var(--wp--custom--semantic--color--brand--soft);
  color: var(--wp--custom--semantic--color--text--primary);
}

/* --- Right-edge fade mask (signals horizontal overflow) --------------- */
@media (width < 64em) {
  .wpdl-collection-chips.wp-block-group {
    mask-image: linear-gradient(to right, rgb(0 0 0 / 100%) calc(100% - 2rem), rgb(0 0 0 / 0%) 100%);
  }
}

/* --- Reduced motion --------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .wpdl-collection-chips__chip a {
    transition: none;
  }
}