/* =========================================================
   CrossMerg Shared Service Journey Cards
   File: assets/themes/crossmerg/custom/css/service-journey-cards.css
   Added: 2026-07-11 11:14 PT

   Purpose:
   - Provides the canonical styling for the shared four-card journey component.
   - Supports panel and compact fallback variants.

   Scope:
   - Marketing shell only.
   - Opt-in through .cm-service-journeys.
   - No global element selectors.
   - No pricing, Stripe, CRM, Appointly, iframe, CAPTCHA, form, or JavaScript changes.
   ========================================================= */

body.marketing-site .cm-service-journeys{
  padding-top: clamp(3rem, 6vw, 5rem);
  padding-bottom: clamp(3rem, 6vw, 5rem);
}

body.marketing-site .cm-service-journeys__head{
  max-width: 820px;
  margin: 0 auto 1.8rem;
}

body.marketing-site .cm-service-journeys__eyebrow{
  margin: 0 0 0.55rem;
  color: var(--cm-brand, #3e79d1);
  font-size: 0.72rem;
  font-weight: 850;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

body.marketing-site .cm-service-journeys__title{
  margin: 0 0 0.6rem;
  color: var(--cm-ink, #0f172a);
  font-size: clamp(2rem, 3.6vw, 3rem);
  line-height: 1.05;
  font-weight: 850;
  letter-spacing: -0.035em;
}

body.marketing-site .cm-service-journeys__subtitle{
  max-width: 60rem;
  margin: 0 auto;
  color: var(--cm-muted-strong, #475569);
  font-size: 1rem;
  line-height: 1.65;
}

body.marketing-site .cm-service-journeys__grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  max-width: 1120px;
  margin: 0 auto;
}

body.marketing-site .cm-service-journey-card{
  display: flex;
  flex-direction: column;
  min-height: 100%;
  overflow: hidden;
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.09);
}

body.marketing-site .cm-service-journey-card__media{
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #f8fafc;
}

body.marketing-site .cm-service-journey-card__media::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(15, 23, 42, 0.02),
    rgba(15, 23, 42, 0.10)
  );
  pointer-events: none;
}

body.marketing-site .cm-service-journey-card__media img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

body.marketing-site .cm-service-journey-card__content{
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  padding: clamp(1.25rem, 2.6vw, 1.7rem);
}

body.marketing-site .cm-service-journey-card__badge{
  display: inline-flex;
  align-items: center;
  width: fit-content;
  margin-bottom: 0.7rem;
  padding: 0.34rem 0.64rem;
  border-radius: 999px;
  background: rgba(62, 121, 209, 0.10);
  color: var(--cm-brand, #3e79d1);
  font-size: 0.72rem;
  line-height: 1;
  font-weight: 850;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

body.marketing-site .cm-service-journey-card--strategy .cm-service-journey-card__badge{
  background: rgba(209, 150, 62, 0.12);
  color: #9a651f;
}

body.marketing-site .cm-service-journey-card__kicker{
  margin: 0 0 0.45rem;
  color: var(--cm-brand, #3e79d1);
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1.3;
}

body.marketing-site .cm-service-journey-card__title{
  margin: 0 0 0.7rem;
  color: var(--cm-ink, #0f172a);
  font-size: clamp(1.45rem, 2.3vw, 1.9rem);
  line-height: 1.12;
  font-weight: 850;
  letter-spacing: -0.025em;
}

body.marketing-site .cm-service-journey-card__text{
  margin: 0 0 1rem;
  color: var(--cm-muted-strong, #475569);
  font-size: 0.98rem;
  line-height: 1.65;
}

body.marketing-site .cm-service-journey-card__list{
  display: grid;
  gap: 0.45rem;
  margin: 0 0 1.4rem;
  padding: 0;
  list-style: none;
}

body.marketing-site .cm-service-journey-card__list li{
  position: relative;
  padding-left: 1.35rem;
  color: rgba(15, 23, 42, 0.80);
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.35;
}

body.marketing-site .cm-service-journey-card__list li::before{
  content: "✓";
  position: absolute;
  left: 0;
  top: 0.02rem;
  color: var(--cm-brand-success, #3ed196);
  font-weight: 900;
}

body.marketing-site .cm-service-journey-card__button{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 46px;
  margin-top: auto;
  padding: 0.78rem 1rem;
  border-radius: 12px;
  color: #fff !important;
  background: var(--cm-brand, #3e79d1);
  box-shadow: 0 12px 26px rgba(62, 121, 209, 0.24);
  font-size: 0.92rem;
  font-weight: 850;
  line-height: 1;
  text-decoration: none !important;
  transition:
    transform 150ms ease,
    box-shadow 150ms ease;
}

body.marketing-site .cm-service-journey-card__button:hover,
body.marketing-site .cm-service-journey-card__button:focus{
  transform: translateY(-1px);
  box-shadow: 0 16px 32px rgba(62, 121, 209, 0.30);
  outline: none;
}

body.marketing-site .cm-service-journeys__fallback{
  max-width: 1120px;
  margin: 1.5rem auto 0;
}

body.marketing-site .cm-service-journeys__fallback--panel{
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  padding: clamp(1.15rem, 2.5vw, 1.5rem);
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 20px;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.98),
    rgba(248, 250, 252, 0.96)
  );
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.07);
}

body.marketing-site .cm-service-journeys__fallback-eyebrow{
  margin: 0 0 0.35rem;
  color: var(--cm-brand, #3e79d1);
  font-size: 0.72rem;
  line-height: 1;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

body.marketing-site .cm-service-journeys__fallback-title{
  margin: 0 0 0.45rem;
  color: var(--cm-ink, #0f172a);
  font-size: clamp(1.3rem, 2vw, 1.65rem);
  line-height: 1.15;
  font-weight: 850;
  letter-spacing: -0.02em;
}

body.marketing-site .cm-service-journeys__fallback-text{
  margin: 0;
  max-width: 46rem;
  color: var(--cm-muted-strong, #475569);
  line-height: 1.6;
}

body.marketing-site .cm-service-journeys__fallback-action{
  display: flex;
  align-items: center;
}

body.marketing-site .cm-service-journeys__fallback-button{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 44px;
  padding: 0.75rem 1rem;
  border: 1px solid rgba(62, 121, 209, 0.24);
  border-radius: 12px;
  color: var(--cm-brand, #3e79d1) !important;
  background: #fff;
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.07);
  font-size: 0.92rem;
  font-weight: 850;
  text-decoration: none !important;
  transition:
    transform 150ms ease,
    box-shadow 150ms ease,
    border-color 150ms ease;
}

body.marketing-site .cm-service-journeys__fallback-button:hover,
body.marketing-site .cm-service-journeys__fallback-button:focus{
  transform: translateY(-1px);
  border-color: rgba(62, 121, 209, 0.48);
  box-shadow: 0 14px 28px rgba(15, 23, 42, 0.10);
  outline: none;
}

body.marketing-site .cm-service-journeys__fallback--compact{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem;
  color: var(--cm-muted-strong, #475569);
  font-size: 0.94rem;
  line-height: 1.55;
  text-align: center;
}

body.marketing-site .cm-service-journeys__fallback--compact a{
  color: var(--cm-brand, #3e79d1);
  font-weight: 800;
  text-decoration: none;
  border-bottom: 1px solid rgba(62, 121, 209, 0.28);
}

body.marketing-site .cm-service-journeys__fallback--compact a:hover,
body.marketing-site .cm-service-journeys__fallback--compact a:focus{
  border-bottom-color: rgba(62, 121, 209, 0.60);
}

@media (min-width: 768px){
  body.marketing-site .cm-service-journeys__grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.marketing-site .cm-service-journeys__fallback--panel{
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 1.5rem;
  }

  body.marketing-site .cm-service-journeys__fallback--panel
  .cm-service-journeys__fallback-button{
    width: auto;
    min-width: 180px;
  }
}

@media (max-width: 767px){
  body.marketing-site .cm-service-journey-card,
  body.marketing-site .cm-service-journeys__fallback--panel{
    border-radius: 18px;
  }

  body.marketing-site .cm-service-journey-card__content{
    padding: 1.2rem;
  }
}

@media (hover: hover){
  body.marketing-site .cm-service-journey-card{
    transition:
      transform 170ms ease,
      box-shadow 170ms ease,
      border-color 170ms ease;
  }

  body.marketing-site .cm-service-journey-card:hover{
    transform: translateY(-3px);
    border-color: rgba(62, 121, 209, 0.30);
    box-shadow: 0 24px 54px rgba(15, 23, 42, 0.13);
  }
}

@media (prefers-reduced-motion: reduce){
  body.marketing-site .cm-service-journey-card,
  body.marketing-site .cm-service-journey-card__button,
  body.marketing-site .cm-service-journeys__fallback-button{
    transition: none !important;
  }
}