/* =========================================================================
   Component: fm-service-card
   Outlined card designed to sit on a dark/gradient background.
   Turquoise line-icon, white title/desc, "Learn more" link.
   Grouped inside .fm-services which lays them out 5-up on desktop.
   ========================================================================= */

/* ---------- Horizontal scroller ---------- */
/* Structure:
     .fm-services-scroller
       .fm-services-scroller__viewport (full-viewport-width scroll area)
         .fm-services
       .fm-container
         .fm-services-scroller__controls (chevrons below, right-aligned)
   The viewport's horizontal padding uses max() so that the first card
   aligns with the container's inner edge, and the scroll area still
   reaches edge-to-edge of the screen when swiped. */

/* The scroller lives INSIDE .fm-container. The viewport is stretched
   edge-to-edge on both sides via negative margins, but a matching
   padding on each side keeps the initial content aligned with the
   container. Result:
     • at rest, the first card sits under the Freedom logo (aligned with
       the container's inner-left edge);
     • when the user scrolls, cards travel all the way to the viewport
       edge on both sides.
*/
.fm-services-scroller__viewport {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
  -ms-overflow-style: none;
  scrollbar-width: none;
  padding-top: 4px;
  padding-bottom: 4px;
  /* Gutter values are measured and set by service-scroller.js on load + resize.
     At rest, padding-left keeps the first card aligned with the container's
     inner-left edge (= logo position). The negative margins let the scroll
     area extend to the actual viewport edges on both sides. */
  margin-left:  calc(-1 * var(--fm-scroller-lead,  0px));
  padding-left: var(--fm-scroller-lead,  0px);
  margin-right: calc(-1 * var(--fm-scroller-trail, 0px));
  padding-right: var(--fm-scroller-trail, 0px);
  /* Anchor snap so the first card at rest respects the padding-left. */
  scroll-padding-inline-start: var(--fm-scroller-lead, 0px);
}
.fm-services-scroller__viewport::-webkit-scrollbar { display: none; }

.fm-services {
  display: flex;
  gap: var(--fm-sp-4);
}

/* Controls row lives below the scroller inside the container */
.fm-services-scroller__controls {
  display: flex;
  justify-content: flex-end;
  gap: var(--fm-sp-5);
  margin-top: var(--fm-sp-5);
}

/* Bare chevron buttons — no circle, no background */
.fm-services-scroller__nav {
  background: transparent;
  border: 0;
  padding: 0;
  color: var(--fm-white);
  cursor: pointer;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color var(--fm-dur-fast) var(--fm-ease),
              opacity var(--fm-dur-fast) var(--fm-ease),
              transform var(--fm-dur-fast) var(--fm-ease);
}
.fm-services-scroller__nav:hover:not([disabled]) {
  color: var(--fm-accent);
  transform: scale(1.08);
}
.fm-services-scroller__nav[disabled] {
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
}

.fm-services-scroller__nav::before {
  content: '';
  width: 14px;
  height: 14px;
  border-top: 2.5px solid currentColor;
  border-right: 2.5px solid currentColor;
}
.fm-services-scroller__nav--prev::before { transform: rotate(-135deg); margin-left: 4px; }
.fm-services-scroller__nav--next::before { transform: rotate(45deg);   margin-right: 4px; }

.fm-service-card {
  display: flex;
  flex-direction: column;
  gap: var(--fm-sp-4);
  padding: var(--fm-sp-6) var(--fm-sp-5);
  background: transparent;
  border: 1.5px solid rgba(255, 255, 255, 0.35);
  border-radius: var(--fm-radius);
  color: var(--fm-white);
  /* Fixed width so cards flow horizontally in the scroller. */
  flex: 0 0 220px;
  min-height: 260px;
  scroll-snap-align: start;
  transition: border-color var(--fm-dur-fast) var(--fm-ease),
              background var(--fm-dur-med) var(--fm-ease);
}

@media (max-width: 720px) {
  .fm-service-card { flex-basis: 78vw; }
}

.fm-service-card:hover {
  border-color: var(--fm-white);
  background: rgba(255, 255, 255, 0.04);
  color: var(--fm-white);
}

.fm-service-card__icon {
  display: inline-flex;
  width: 44px;
  height: 44px;
  color: #65AAD6; /* turquoise glyph */
}

.fm-service-card__icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.fm-service-card__title {
  margin: 0;
  color: var(--fm-white);
  font-size: var(--fm-fs-md);
  font-weight: var(--fm-fw-bold);
  line-height: var(--fm-lh-tight);
}

.fm-service-card__desc {
  margin: 0;
  color: rgba(255, 255, 255, 0.78);
  font-size: var(--fm-fs-sm);
  line-height: var(--fm-lh-normal);
  flex: 1;
}

.fm-service-card__link {
  margin-top: var(--fm-sp-2);
  color: #65AAD6;
  font-weight: var(--fm-fw-bold);
  font-size: var(--fm-fs-sm);
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
}

.fm-service-card__link::after {
  content: '';
  width: 0.5em;
  height: 0.5em;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  transition: transform var(--fm-dur-fast) var(--fm-ease);
}

.fm-service-card:hover .fm-service-card__link::after {
  transform: rotate(-45deg) translate(0.15em, 0.15em);
}