/* Services Zig-Zag (manual cards) — Stafflancer Controls */

.slc-szz{
  position:relative;
  padding:90px 0;
  background: var(--szz-bg, transparent);
}

html.sl-theme-dark .slc-szz{
  background: var(--szz-bg-dark, var(--szz-bg, transparent));
}



.slc-szz__inner{
  position:relative;
  z-index:1;

  width:min(var(--szz-container, 1400px), calc(100% - 40px));
  margin:0 auto;
  box-sizing:border-box;
  padding-left: var(--szz-inner-pl, 60px);
  padding-right: var(--szz-inner-pr, 120px);
  display:grid;
  grid-template-columns: var(--szz-left, 52%) var(--szz-card, 22%) var(--szz-card, 22%);
  gap:34px;
  align-items:start;
}

.slc-szz__intro{
  align-self:start;
  padding-right: var(--szz-gap-intro, 60px);
}

.slc-szz__intro.is-sticky{
  position:sticky;
  top: var(--szz-sticky-top, 90px);
}

.slc-szz__kicker{
  font-weight: var(--szz-kicker-fw, 700);
  letter-spacing:.12em;
  font-size: var(--szz-kicker-fs, 14px);
  color: var(--szz-kicker-color, #0d6b73);
  margin:0 0 14px;
}

html.sl-theme-dark .slc-szz__kicker{
  color: var(--szz-kicker-color-dark, var(--szz-kicker-color, #57d2d9));
}

.slc-szz__title{
  margin:0 0 18px;
  font-size: var(--szz-title-fs, 64px);
  line-height:1.02;
  font-weight: var(--szz-intro-fw, 500);
  color: var(--szz-title-color, var(--sl-text, #0b1b3a));
}

html.sl-theme-dark .slc-szz__title{
  color: var(--szz-title-color-dark, var(--szz-title-color, #f1f5f9));
}

.slc-szz__text{
  font-size: var(--szz-text-fs, 20px);
  line-height:1.6;
  font-weight: var(--szz-text-fw, 400);
  color: var(--szz-text-color, rgba(11,27,58,.85));
  max-width:36ch;
}

html.sl-theme-dark .slc-szz__text{
  color: var(--szz-text-color-dark, var(--szz-text-color, rgba(241,245,249,.86)));
}

.slc-szz__btnwrap{margin-top:22px;}

.slc-szz__btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  background: var(--szz-underline, var(--sl-primary, #5209E5));
  color:#fff;
  border-radius:999px;
  padding:12px 18px;
  font-size: var(--szz-btn-fs, 16px);
  font-weight: var(--szz-btn-fw, 700);
  color: var(--szz-btn-color, #fff);
}

html.sl-theme-dark .slc-szz__btn{
  color: var(--szz-btn-color-dark, var(--szz-btn-color, #fff));
}

.slc-szz__lane{
  display:flex;
  flex-direction:column;
  gap: var(--szz-gap, 24px);
}

.slc-szz__lane--1{align-items:flex-end;}

.slc-szz__lane--2{align-items:flex-start; padding-top: var(--szz-stagger, 55px);}

/* Cards lanes shift */
.slc-szz__lane--1,
.slc-szz__lane--2{
  transform: translateX(var(--szz-shift, 120px));
}



.slc-szz__card{
  background:#fff;
  border-radius: var(--szz-radius, 16px);
  padding: var(--szz-pad, 30px);
  width: 100%;
  max-width: var(--szz-card-max, 280px);
  min-height: var(--szz-card-h, 360px);
  box-shadow:0 10px 30px rgba(0,0,0,.06);
  display:flex;
  flex-direction:column;
  box-sizing:border-box;
}

/* In dark mode we flip the visual system:
   - Normal cards (white cards in light mode) become black w/ white text
   - Highlight cards (dark cards in light mode) become white w/ black text
   This matches the locked premium contrast rules. */
html.sl-theme-dark .slc-szz__card{
  background:#000;
  box-shadow:0 10px 30px rgba(0,0,0,.35);
}

/* In dark mode, normal (non-highlight) cards become black. Add a subtle border
   so they remain visible against the page background. */
html.sl-theme-dark .slc-szz__card:not(.is-highlight){
  border:1px solid rgba(255,255,255,.14);
}


.slc-szz__cardtitle{
  font-weight: var(--szz-card-fw, 500);

  margin:0 0 14px;
  font-size: var(--szz-cardtitle-fs, 34px);
  line-height:1.15;
  color: var(--szz-cardtitle-color, var(--sl-text, #0b1b3a));
  padding-bottom:12px;
  position:relative;
}

.slc-szz__cardtitle:after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:52px;
  height:3px;
  border-radius:2px;
  background:var(--sl-primary, #5209E5);
}

html.sl-theme-dark .slc-szz__cardtitle{
  color: #fff;
}

.slc-szz__cardtext{
  font-size: var(--szz-cardtext-fs, 16px);
  line-height:1.65;
  font-weight: var(--szz-cardtext-fw, 400);
  color: var(--szz-cardtext-color, rgba(11,27,58,.85));
}

html.sl-theme-dark .slc-szz__cardtext{
  color: rgba(255,255,255,.86);
}

.slc-szz__cardcta{margin-top:auto; padding-top:16px;}

.slc-szz__link{
  display:inline-flex;
  gap:10px;
  align-items:center;
  font-size: var(--szz-link-fs, 16px);
  font-weight: var(--szz-link-fw, 800);
  text-decoration:none;
  color: var(--szz-link-color, #111);
}

.slc-szz__link:hover{opacity:.9;}

html.sl-theme-dark .slc-szz__link{
  color: #fff;
}

/* Divider on normal cards becomes white in dark mode */
html.sl-theme-dark .slc-szz__card:not(.is-highlight) .slc-szz__cardtitle:after{
  background:#fff;
}



/* Reveal animation (stagger) */
.slc-szz__card{
  opacity:0;
  transform: translateY(18px);
  transition: opacity var(--szz-anim-dur, 520ms) ease, transform var(--szz-anim-dur, 520ms) ease;
  transition-delay: var(--szz-delay, 0ms);
}

.slc-szz__card.is-visible{
  opacity:1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce){
  .slc-szz__card{
    opacity:1 !important;
    transform:none !important;
    transition:none !important;
  }
}

/* Animation style: fade only */
.slc-szz--anim-fade .slc-szz__card{
  transform:none;
}
.slc-szz--anim-fade .slc-szz__card.is-visible{
  transform:none;
}

/* No animation */
.slc-szz--no-anim .slc-szz__card{
  opacity:1;
  transform:none;
  transition:none;
}


/* Highlight cards (invert) */
.slc-szz__card.is-highlight{
  background:#000;
  color:#fff;
}

.slc-szz__card.is-highlight .slc-szz__cardtitle,
.slc-szz__card.is-highlight .slc-szz__cardtext,
.slc-szz__card.is-highlight .slc-szz__link{
  color:#fff;
}

.slc-szz__card.is-highlight .slc-szz__cardtitle:after{
  background: var(--szz-underline-hi, #fff);
}

/* In dark mode: highlight cards become white bg + black text + PRIMARY divider */
html.sl-theme-dark .slc-szz__card.is-highlight{
  background:#fff;
  color:#000;
}

html.sl-theme-dark .slc-szz__card.is-highlight .slc-szz__cardtitle,
html.sl-theme-dark .slc-szz__card.is-highlight .slc-szz__cardtext,
html.sl-theme-dark .slc-szz__card.is-highlight .slc-szz__link{
  color:#000;
}

html.sl-theme-dark .slc-szz__card.is-highlight .slc-szz__cardtitle:after{
  background: var(--sl-primary, #5209E5);
}


/* Tablet landscape + small desktop */
@media (max-width: 1100px){
  .slc-szz__inner{
    grid-template-columns: 1fr 1fr;
    gap:34px;
  }
  .slc-szz__intro{grid-column:1 / -1; position:relative; top:auto;}
  .slc-szz__intro.is-sticky{position:relative; top:auto;}
  .slc-szz__lane--2{padding-top:40px;}
  .slc-szz__title{font-size: var(--szz-title-fs-tp, var(--szz-title-fs, 48px));}
}

/* Tablet portrait + mobile */
@media (max-width: 820px){
  .slc-szz{padding:70px 0;}
  .slc-szz__inner{grid-template-columns:1fr; gap:22px;}
  .slc-szz__lane--2{padding-top:0;}
  .slc-szz__title{font-size: var(--szz-title-fs-m, var(--szz-title-fs-tp, var(--szz-title-fs, 40px)));}
  .slc-szz__card{min-height:auto; width:100%; max-width:100%;}
}


/* =========================================================
   Responsive behavior — Services Zig-Zag (non-breaking)
   Desktop stays as approved. Adjust layout/offsets on smaller screens.
   ========================================================= */

/* Tablet landscape + small desktop */
@media (max-width: 1024px){
  /* Keep 3 columns but reduce right shift so nothing clips */
  .slc-szz__lane--1,
  .slc-szz__lane--2{ transform: translateX(var(--szz-tl-shift, 60px)); }

  .slc-szz__inner{
    padding-left: var(--szz-tl-pad, 40px);
    padding-right: var(--szz-tl-pad, 40px);
  }

  .slc-szz__intro{ padding-right: var(--szz-gap-intro, 60px); }
}

/* Tablet portrait */
@media (max-width: 900px){

  .slc-szz__kicker{font-size: var(--szz-kicker-fs-tp, var(--szz-kicker-fs, 14px));}
  .slc-szz__text{font-size: var(--szz-text-fs-tp, var(--szz-text-fs, 20px));}
  .slc-szz__btn{font-size: var(--szz-btn-fs-tp, var(--szz-btn-fs, 16px));}
  .slc-szz__cardtitle{font-size: var(--szz-cardtitle-fs-tp, var(--szz-cardtitle-fs, 34px));}
  .slc-szz__cardtext{font-size: var(--szz-cardtext-fs-tp, var(--szz-cardtext-fs, 16px));}
  .slc-szz__link{font-size: var(--szz-link-fs-tp, var(--szz-link-fs, 16px));}

  /* Stack intro on top, keep two lanes below */
  .slc-szz__inner{
    grid-template-columns: 1fr 1fr;
    gap:32px;
    padding-left: var(--szz-tp-pad, 20px);
    padding-right: var(--szz-tp-pad, 20px);
    align-items:start;
    box-sizing:border-box;
  }

  .slc-szz__intro{
    grid-column: 1 / -1;
    padding-right:0;
    max-width: 60ch;
    margin:0;
  }

  .slc-szz__lane--1,
  .slc-szz__lane--2{ transform: translateX(0); }

  .slc-szz__lane--2{ padding-top: var(--szz-tp-stagger, var(--szz-stagger, 55px)); }
}

/* Tablet portrait: optional single-column cards */
@media (max-width: 900px){
  .slc-szz--tp-1col .slc-szz__inner{ grid-template-columns: 1fr; }
  .slc-szz--tp-1col .slc-szz__intro{ grid-column:auto; max-width:none; }
  .slc-szz--tp-1col .slc-szz__lane--2{ padding-top: 0; }
}

/* Mobile */
@media (max-width: 750px){

  .slc-szz__kicker{font-size: var(--szz-kicker-fs-m, var(--szz-kicker-fs-tp, var(--szz-kicker-fs, 14px))); }
  .slc-szz__text{font-size: var(--szz-text-fs-m, var(--szz-text-fs-tp, var(--szz-text-fs, 20px))); }
  .slc-szz__btn{font-size: var(--szz-btn-fs-m, var(--szz-btn-fs-tp, var(--szz-btn-fs, 16px))); }
  .slc-szz__cardtitle{font-size: var(--szz-cardtitle-fs-m, var(--szz-cardtitle-fs-tp, var(--szz-cardtitle-fs, 34px))); }
  .slc-szz__cardtext{font-size: var(--szz-cardtext-fs-m, var(--szz-cardtext-fs-tp, var(--szz-cardtext-fs, 16px))); }
  .slc-szz__link{font-size: var(--szz-link-fs-m, var(--szz-link-fs-tp, var(--szz-link-fs, 16px))); }

  .slc-szz{ padding:70px 0; }

  .slc-szz__inner{
    grid-template-columns: 1fr;
    gap:22px;
    padding-left: var(--szz-m-pad, 0px);
    padding-right: var(--szz-m-pad, 0px);
    box-sizing:border-box;
  }

  .slc-szz__intro{
    grid-column:auto;
    max-width:none;
    width:100%;
  }

  /* Single column cards */
  .slc-szz__lane--1,
  .slc-szz__lane--2{
    padding-top:0 !important;
    transform:none !important;
    align-items:flex-start;
  }

  .slc-szz__card{
    max-width:100%;
  }
}

/* Disable animation on mobile (if enabled in settings) */
@media (max-width: 750px){
  .slc-szz--no-anim-mobile .slc-szz__card{
    opacity:1;
    transform:none;
    transition:none;
  }
}

/* Patch: force Learn More link text to stay white in dark mode (per site requirement) */
html.sl-theme-dark .slc-szz .slc-szz__card:not(.is-highlight) .slc-szz__link{ color:#fff !important; }
html.sl-theme-dark .slc-szz .slc-szz__card.is-highlight .slc-szz__link{ color:#000 !important; }


/* Dark mode — black cards border adjustment */
html.sl-theme-dark .slc-szz .slc-szz__card--dark {
    border: 1px solid rgba(0,0,0,0.08) !important;
}