/* =========================================================================
   Component: fm-story
   Two-column customer-story block: image and body side-by-side.
   Add .fm-story--reverse to place the image on the right.
   Grouped inside .fm-stories for consistent vertical rhythm.
   ========================================================================= */

.fm-stories {
  display: flex;
  flex-direction: column;
  gap: var(--fm-sp-7);
}

.fm-story {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--fm-sp-7);
  align-items: center;
}

/* Second/alternating item: image on the right */
.fm-story--reverse .fm-story__media { order: 2; }

@media (max-width: 720px) {
  .fm-story { grid-template-columns: 1fr; gap: var(--fm-sp-4); }
  .fm-story--reverse .fm-story__media { order: 0; }
}

.fm-story__media {
  border-radius: 20px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--fm-gray-50);
}
.fm-story__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: inherit; /* belt-and-suspenders: image clips itself too */
}

.fm-story__body {
  display: flex;
  flex-direction: column;
  gap: var(--fm-sp-4);
}

.fm-story__eyebrow {
  color: var(--fm-accent);
  font-size: var(--fm-fs-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: var(--fm-fw-bold);
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  text-decoration: none;
}
.fm-story__eyebrow::after {
  content: '';
  width: 0.5em;
  height: 0.5em;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
}

.fm-story__title {
  margin: 0;
  color: var(--fm-text-strong);
  font-size: var(--fm-fs-xl);
  font-weight: var(--fm-fw-bold);
  line-height: var(--fm-lh-tight);
  border-bottom: 1px solid var(--fm-gray-200);
  padding-bottom: var(--fm-sp-4);
}

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

.fm-story__products-label {
  margin: 0;
  font-size: var(--fm-fs-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fm-gray-600);
}

.fm-story__products {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--fm-sp-5);
}
.fm-story__products a {
  color: var(--fm-accent);
  font-weight: var(--fm-fw-bold);
}
.fm-story__products a:hover { text-decoration: underline; }