/* ==========================================================================
   Shared Components
   ========================================================================== */

/* Pill button (used in portfolio cards, about section, etc.) */
.pill-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--btn-pill-gap);                        /* 10px */
  height: var(--btn-pill-height);                  /* 40px */
  padding: var(--btn-pill-padding);                /* 0 24px */
  background: var(--btn-pill-bg);                  /* #f3f3f3 */
  border-radius: var(--btn-pill-radius);           /* 40px */
  font-family: var(--font-primary);
  font-size: var(--btn-pill-font-size);            /* 14px */
  font-weight: var(--btn-pill-font-weight);        /* 500 */
  color: var(--btn-pill-text-color);               /* #272727 */
  text-decoration: none;
  white-space: nowrap;
  border: none;
  cursor: pointer;
  transition: var(--transition-default);
}

.pill-btn:hover {
  opacity: 0.8;
}

/* ---------- Inline icons ---------- */

/* Hero badge icons (neural_network, transform) */
.hero__badge-icon {
  flex-shrink: 0;
  width: clamp(34px, 2.5vw, 40px);
  height: clamp(34px, 2.5vw, 40px);
  color: rgba(39, 39, 39, 0.5);
}

/* About eyebrow icon (n8n workflow) */
.about__eyebrow-icon {
  display: inline-block;
  vertical-align: -2px;
  margin-right: 4px;
  color: var(--color-text-secondary);
}

/* Portfolio card link arrow */
.portfolio-card__link-arrow {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  margin-left: 2px;
  vertical-align: middle;
  transition: transform var(--duration-fast) var(--ease-in-out);
}

.portfolio-card__link:hover .portfolio-card__link-arrow {
  transform: translateX(3px);
}

/* Screen reader only utility */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}