/* =========================================================================
   Component: fm-solution-card
   Large clickable card for segment / solution picking:
   - full-width photo on top
   - white body with eyebrow, title, description
   - full-width primary CTA button pinned to the bottom
   Grouped inside .fm-solutions which lays them side-by-side (2-up).
   ========================================================================= */

.fm-solutions {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--fm-sp-5);
}

@media (min-width: 720px) {
  .fm-solutions { grid-template-columns: 1fr 1fr; gap: var(--fm-sp-6); }
}

.fm-solution-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 20px;
  background: var(--fm-white);
  border: 0;
  color: inherit;
}
.fm-solution-card:hover { color: inherit; }

.fm-solution-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--fm-sp-4);
  padding: var(--fm-sp-7) var(--fm-sp-6);
  flex: 1;
}

.fm-solution-card__title {
  margin: 0;
  color: var(--fm-black);
  font-size: var(--fm-fs-xl);
  font-weight: var(--fm-fw-bold);
  line-height: var(--fm-lh-tight);
  letter-spacing: -0.01em;
}

/* Eyebrow sits under the title — pull it up so it hugs the title, and
   let the description sit further down (via the parent's gap). */
.fm-solution-card__eyebrow {
  color: var(--fm-accent);
  font-size: var(--fm-fs-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: var(--fm-fw-bold);
  margin: calc(-1 * var(--fm-sp-3)) 0 0;
}

.fm-solution-card__desc {
  margin: 0;
  color: var(--fm-text);
  font-size: var(--fm-fs-base);
  line-height: var(--fm-lh-normal);
}

/* Full-width CTA pinned to the bottom so buttons align across cards. */
.fm-solution-card__cta {
  margin-top: auto;
  padding-top: var(--fm-sp-2);
}

.fm-solution-card__cta .fm-btn {
  width: 100%;
  padding-top: 1rem;
  padding-bottom: 1rem;
  font-size: var(--fm-fs-md);
}

/* Hover: fill orange stays static (already accent), slight lift + button darken */
.fm-solution-card:hover .fm-btn--accent {
  background: var(--fm-black);
  border-color: var(--fm-black);
}