/* =====================================================================
   COI chips (PTECH-10511, T5): the home chip row and the category
   sub-category chip row. Looks ported from the prototype's chip rules
   (reference/prototype/coi-core.css), not its selectors or data.
   Tokens only (--coi-*), no brand colors, all sizes in rem, every rule
   scoped under .coi-v2 so it is a no-op while the design switch is off
   (this file is not even enqueued then).
   ===================================================================== */

/* Home: a centered row above the first card. It scrolls sideways when too wide. */
.coi-v2 .coi-chips {
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  scrollbar-width: none;

  /* overflow-x also clips vertically, so the focus ring (about 0.36rem outside a chip) needs room on every side.
     The padding adds that room and the negative side margins take it back. There is no negative top margin:
     it tucked the row under the sticky header, which then painted over the top of the ring. */
  padding: 0.4rem 0.4rem 0.9rem;
  margin: 0 -0.4rem;
}

/* auto margins center the row and still let it scroll from the first chip when it is too wide */
.coi-v2 .coi-chips > :first-child { margin-left: auto; }
.coi-v2 .coi-chips > :last-child { margin-right: auto; }
.coi-v2 .coi-chips::-webkit-scrollbar { display: none; }

.coi-v2 .coi-chip {
  flex: 0 0 auto;
  padding: 0.4rem 0.95rem;
  border: 1px solid var(--coi-secondary);
  border-radius: 50rem; /* fully rounded pill, in rem (large enough to never clip) */
  color: var(--coi-secondary);
  text-decoration: none;
  font-size: 0.82rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: transparent;
}

.coi-v2 .coi-chip:hover,
.coi-v2 .coi-chip[aria-current="page"] {
  background: var(--coi-secondary);
  color: var(--coi-bg);
}

/* stylelint-disable-next-line unit-disallowed-list -- 922px is the design breakpoint from the Requirements page, not a design size */
@media (min-width: 922px) {
  .coi-v2 .coi-chip {
    padding: 0.34rem 0.62rem;
    font-size: 0.72rem;
    letter-spacing: 0.03em;
  }

  .coi-v2 .coi-chips { gap: 0.35rem; }
}

/* Category pages: sub-category chips, left-aligned under the title and description, wrapping onto more lines */
.coi-v2 .coi-subchips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* keep the larger chip size on desktop here; the compact desktop size is for the single scrolling home row */
.coi-v2 .coi-subchips .coi-chip {
  padding: 0.4rem 0.95rem;
  font-size: 0.82rem;
  letter-spacing: 0.04em;
}