/* =============================================
   Feature Item — ACE Design System
   Icon-circle + title card for feature grids
   ============================================= */

.feature-item {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.25rem;
  background-color: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 1rem;
  text-decoration: none;
  transition: box-shadow 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.feature-item:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
  border-color: #d1d5db;
}

.feature-item--linked:hover {
  transform: translateY(-2px);
}

/* --- Background variants --- */
.feature-item--bg-white {
  background-color: #ffffff;
}

.feature-item--bg-transparent {
  background-color: transparent;
  border-color: #e5e7eb;
}

.feature-item--bg-grey {
  background-color: #F9FAFB;
  border-color: #e5e7eb;
}

.feature-item:focus-visible {
  outline: 2px solid #0056A6;
  outline-offset: 2px;
}

/* --- Icon circle --- */
.feature-item__icon-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
  background-color: #003087;
  border-radius: 50%;
}

/* Icon color variants */
.feature-item--icon-blue .feature-item__icon-wrapper {
  background-color: #0056A6;
}

.feature-item--icon-dark .feature-item__icon-wrapper {
  background-color: #003087;
}

.feature-item--icon-orange .feature-item__icon-wrapper {
  background-color: #E87722;
}

.feature-item__icon {
  display: block;
  width: 1.25rem;
  height: 1.25rem;
  object-fit: contain;
}

/* --- Title --- */
.feature-item__title {
  font-family: 'Montserrat', system-ui, sans-serif;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.4;
  color: #333333;
}

/* Title color variants (linked state overrides via cascade) */
.feature-item--title-dark .feature-item__title {
  color: #1a1a1a;
}

.feature-item--title-grey .feature-item__title {
  color: #333333;
}

.feature-item--title-blue .feature-item__title {
  color: #0056A6;
}

.feature-item--linked .feature-item__title {
  color: #003087;
}

/* =============================================
   Responsive — Tablet & Desktop
   ============================================= */

@media (min-width: 768px) {
  .feature-item {
    padding: 1.25rem 1.5rem;
    gap: 1.25rem;
  }

  .feature-item__icon-wrapper {
    width: 3rem;
    height: 3rem;
  }

  .feature-item__icon {
    width: 1.5rem;
    height: 1.5rem;
  }

  .feature-item__title {
    font-size: 1.0625rem;
  }
}