/* ==========================================================================
   PK Tech Services — Industries page (Milestone 13)
   Page-scoped styles for pages/industries.html only. No reusable component
   code is duplicated; classes are `.industries-*` prefixed on the same
   BEM-lite model as home.css / about.css / services.css / products.css.

   Doc references: Phase 2 §1.4.5 / §1.5 (Industries section), Phase 3 §1.6
   (Industries copy). Industry cards reuse the library `.card--industry`
   component and `.card__badges`; this sheet only adds the intro anchor
   chips and the full-list pill row.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Intro anchor chips — 2-per-row mobile, 3-per-row tablet, one row desktop.
   Anchor chips add `.industries-chip` (link + focus states) on top of the
   `.industries-pill` base.
   -------------------------------------------------------------------------- */
.industries-chips {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-8);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 768px) {
  .industries-chips {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .industries-chips {
    display: flex;
    flex-wrap: wrap;
  }
}

.industries-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--space-32);
  padding: 0 var(--space-16);
  background: var(--color-background);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  color: var(--color-heading);
  font-size: var(--text-small-current);
  font-weight: var(--weight-semibold);
  line-height: var(--lh-label);
  text-align: center;
}

@media (max-width: 1023px) {
  .industries-chips .industries-pill {
    width: 100%;
  }
}

.industries-chip {
  text-decoration: none;
}

.industries-chip:hover,
.industries-chip:focus-visible {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

/* --------------------------------------------------------------------------
   Full-list pill row (Phase 3 §1.6) — wrapping inline pills at every
   breakpoint; the full served-industry list reads best inline, not stacked.
   -------------------------------------------------------------------------- */
.industries-tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
  margin: 0;
  padding: 0;
  list-style: none;
}

.industries-tag-row .industries-pill {
  width: auto;
}

/* --------------------------------------------------------------------------
   Visual Polish Pass 2 — intro section background texture (control-room
   network motif). Supplies the image for the shared `.section-bg`
   layer defined in pages.css.
   -------------------------------------------------------------------------- */
.page-intro--industries {
  --section-bg-image: url("../images/backgrounds/bg-control-room.webp");
}