/* ============================================
   gs-outcome-card — feature card with illustration icon
   Used for "What You Achieve" type sections — explains a benefit
   with an icon, pill label, title, and description.

   Hover state lifts the card, swaps border + pill to the UI-accent
   blue (per the color system rule: interactive states use blue).
   ============================================ */

.gs-outcome-card {
  background: var(--color-bg);
  border: 1.5px solid #e3e6ec;
  border-radius: 24px;
  padding: 2.5rem 2rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Border width stays constant at 1.5px in both states — browsers
     don't animate border-width smoothly (it reflows the box). Hover
     uses an inset box-shadow to fake the "thicker border" effect:
     visually it looks like the border grew to 2px, but technically
     nothing changes size. */
  transition:
    border-color 0.3s ease,
    box-shadow 0.3s ease,
    transform 0.3s ease;
  box-shadow: none !important;
}

.gs-outcome-card:hover {
  /* Border WIDTH stays 1.5px — only the color changes. */
  border-color: var(--color-accent) !important;
  transform: translateY(-10px);
  /* Layered shadow:
       inset 0 0 0 0.5px = fake +0.5px border inside (visual "growth")
       0 12px 24px = the standard card-lift drop shadow */
  box-shadow:
    inset 0 0 0 0.5px var(--color-accent),
    0 12px 24px rgba(0, 38, 69, 0.1) !important;
}

.gs-outcome-card__icon {
  width: 110px;
  height: auto;
  margin-bottom: 1.5rem;
  display: block;
}

/* Pill label — replaces the old h5 sub-headline.
   Gray outlined by default; on card hover the whole pill fills with
   vivid blue and text turns white. */
.gs-outcome-card__pill {
  display: inline-block;
  padding: 0.35rem 0.9rem;
  margin: 0 0 1rem;
  border: 1px solid #c5cbd2;
  border-radius: 999px;
  background: transparent;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-fg-muted);
  white-space: nowrap;
  transition:
    background 0.3s ease,
    border-color 0.3s ease,
    color 0.3s ease;
}

.gs-outcome-card:hover .gs-outcome-card__pill {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #fff;
}

.gs-outcome-card__title {
  font-size: var(--text-h3);
  font-weight: var(--weight-bold);
  color: var(--color-fg);
  margin: 0 0 0.75rem;
  text-wrap: pretty;
}

.gs-outcome-card__desc {
  color: var(--color-fg-body);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  margin: 0;
  text-wrap: pretty;
}

@media (max-width: 767px) {
  .gs-outcome-card {
    padding: 2rem 1.5rem;
  }
  .gs-outcome-card__icon {
    width: 90px;
    margin-bottom: 1.25rem;
  }
  .gs-outcome-card__pill {
    /* Allow wrapping on narrow screens */
    white-space: normal;
  }
}