/* Synapse Stacking Services
   Styled to match the existing Services rows: text left, image right, red slab-serif titles,
   small grey copy, square 3:2 photos, page-coloured background.
   Headings inherit your theme's heading font; body copy inherits the theme's body font. */

.syn-services{
  --syn-red:#d0112b; --syn-text:#666; --syn-bg:#f4f2f2;
  --syn-top:110px; --syn-top-m:80px; --syn-gap:18px; --syn-gap-m:12px;
  background:var(--syn-bg); padding:70px 20px 90px;
}
.syn-wrap{max-width:1110px;margin:0 auto}

.syn-card{
  position:sticky;
  top:calc(var(--syn-top) + var(--i, 0) * var(--syn-gap));
  margin-bottom:40px;
}
.syn-card:last-child{margin-bottom:0}

/* Each row has the page background so it fully covers the row beneath it while stacking */
.syn-card__inner{
  position:relative; display:grid; grid-template-columns:1fr 1fr; gap:50px; align-items:center;
  background:var(--syn-bg);
  transform-origin:center top;
  transform:scale(calc(1 - var(--p, 0) * .05));
  will-change:transform;
}
/* soft edge only on rows that slide over another row, so the overlap reads clearly */
.syn-card + .syn-card .syn-card__inner{box-shadow:0 -14px 24px -18px rgba(0,0,0,.18)}

.syn-card--flip .syn-card__media{order:-1}

.syn-card__text{padding:10px 0}
.syn-num{display:block;font-size:13px;font-weight:600;letter-spacing:.12em;color:var(--syn-red);margin-bottom:8px}
.syn-services .syn-card h3{color:var(--syn-red);font-size:clamp(26px,2.6vw,36px);font-weight:500;line-height:1.2;margin:0 0 14px}
.syn-card h3 small{display:block;font-size:.8em;font-weight:inherit;margin-top:2px}
.syn-services .syn-card p{color:var(--syn-text);font-size:14px;line-height:1.85;margin:0}
.syn-services .syn-link{display:inline-block;margin-top:18px;font-size:14px;color:var(--syn-red);text-decoration:none;
  border-bottom:1px solid currentColor;padding-bottom:2px;transition:opacity .25s}
.syn-services .syn-link:hover,.syn-services .syn-link:focus{opacity:.7;color:var(--syn-red)}

.syn-card__media{margin:0;position:relative;aspect-ratio:3/2;overflow:hidden}
.syn-card__media img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;
  transform:scale(calc(1.05 - var(--e, 1) * .05));transition:transform .2s linear}
.syn-card__placeholder{position:absolute;inset:0;background:#e6dede}
.syn-shade{position:absolute;inset:0;background:var(--syn-bg);pointer-events:none;opacity:calc(var(--p, 0) * .55)}

/* Sticky stops working if any parent has overflow:hidden – clear it on the Beaver Builder wrappers around this block */
.fl-row:has(.syn-stack), .fl-row-content-wrap:has(.syn-stack), .fl-row-content:has(.syn-stack),
.fl-col-group:has(.syn-stack), .fl-col:has(.syn-stack), .fl-col-content:has(.syn-stack),
.fl-module:has(.syn-stack), .fl-module-content:has(.syn-stack){overflow:visible !important}

/* Tablet / mobile: image on top, text below */
@media (max-width:860px){
  .syn-services{padding:48px 16px 64px}
  .syn-card{top:calc(var(--syn-top-m) + var(--i, 0) * var(--syn-gap-m));margin-bottom:28px}
  .syn-card__inner{grid-template-columns:1fr;gap:18px;padding-bottom:20px}
  .syn-card__media,.syn-card--flip .syn-card__media{order:-1}
  .syn-services .syn-card h3{font-size:26px;margin-bottom:10px}
  .syn-services .syn-card p{font-size:14px;line-height:1.7}
}
/* Very short screens: no stacking, so nothing gets cut off */
@media (max-height:560px){ .syn-card{position:relative;top:auto} }
/* Respect "reduce motion" */
@media (prefers-reduced-motion:reduce){
  .syn-card{position:relative;top:auto}
  .syn-card__inner,.syn-card__media img{transform:none}
}

/* =====================================================================
   Sticky "Schedule an Appointment" bar
   Add the class  syn-sticky-cta  to the Beaver Builder ROW
   (Row Settings → Advanced → HTML Element → Class).
   The row stays pinned to the bottom of the screen as a slim bar while you scroll,
   then expands back to full size when you reach its normal place on the page.
   ===================================================================== */
.syn-sticky-cta{position:sticky !important;bottom:0;z-index:60}
/* sticky breaks inside an overflow:hidden parent – clip horizontally only */
.fl-page:has(.syn-sticky-cta), .fl-page-content:has(.syn-sticky-cta),
#fl-main-content:has(.syn-sticky-cta), .fl-builder-content:has(.syn-sticky-cta){overflow-x:clip !important;overflow-y:visible !important}

.syn-sticky-cta.is-stuck > .fl-row-content-wrap{
  padding-top:12px !important;padding-bottom:12px !important;
  box-shadow:0 -10px 30px rgba(0,0,0,.18);
}
.syn-sticky-cta.is-stuck .fl-col-content{
  display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px 28px;
}
.syn-sticky-cta.is-stuck .fl-module-content{margin-top:0 !important;margin-bottom:0 !important}
.syn-sticky-cta.is-stuck :is(h1,h2,h3,h4){font-size:22px !important;line-height:1.2 !important;margin:0 !important}
/* hide the supporting sentence, keep anything with a link/button */
.syn-sticky-cta.is-stuck p:not(:has(a, .fl-button, button)){display:none !important}
/* drop modules left empty (e.g. a text-only module) so the bar stays centred */
.syn-sticky-cta.is-stuck .fl-module:not(:has(a, button, h1, h2, h3, h4)){display:none !important}
.syn-sticky-cta.is-stuck .fl-button{padding-top:8px !important;padding-bottom:8px !important}

@media (max-width:860px){
  .syn-sticky-cta.is-stuck > .fl-row-content-wrap{padding:10px 12px !important}
  .syn-sticky-cta.is-stuck :is(h1,h2,h3,h4){font-size:17px !important}
  .syn-sticky-cta.is-stuck .fl-col-content{gap:6px 14px}
}
@media (max-width:420px){
  /* very small phones: button only */
  .syn-sticky-cta.is-stuck .fl-module:not(:has(a, button)){display:none !important}
  .syn-sticky-cta.is-stuck :is(h1,h2,h3,h4):not(:has(a)){display:none !important}
}
/* short landscape screens: don't pin anything */
@media (max-height:560px){ .syn-sticky-cta{position:relative !important} }

/* =====================================================================
   Home page block  [synapse_home_services]
   Desktop: cards side by side.  Mobile: the same collapsing stack as the Services page.
   ===================================================================== */
.syn-services--grid{padding:10px 0 20px}
.syn-services--grid .syn-more{text-align:center;margin-top:36px}
.syn-services--grid .syn-more__btn{display:inline-block;padding:12px 28px;border:1.5px solid var(--syn-red);color:var(--syn-red);
  font-size:14px;letter-spacing:.04em;text-decoration:none;transition:background .25s,color .25s}
.syn-services--grid .syn-more__btn:hover,.syn-services--grid .syn-more__btn:focus{background:var(--syn-red);color:#fff}

@media (min-width:861px){
  .syn-services--grid .syn-stack{display:grid;grid-template-columns:repeat(var(--syn-cols,4),minmax(0,1fr));gap:28px}
  .syn-services--grid .syn-card{position:relative;top:auto;margin:0}
  .syn-services--grid .syn-card__inner{grid-template-columns:1fr;gap:0;align-items:start;align-content:start;height:100%;
    transform:none;box-shadow:none;background:transparent}
  .syn-services--grid .syn-card + .syn-card .syn-card__inner{box-shadow:none}
  .syn-services--grid .syn-card__media{order:-1}
  .syn-services--grid .syn-card__text{padding:20px 4px 0}
  .syn-services--grid .syn-card h3{font-size:clamp(22px,1.9vw,28px);margin-bottom:10px}
  .syn-services--grid .syn-card p{font-size:14px;line-height:1.75}
  .syn-services--grid .syn-shade{display:none}
  .syn-services--grid .syn-card__media img{transition:transform .5s ease}
  .syn-services--grid .syn-card:hover .syn-card__media img{transform:scale(1.04)}
}
/* tablet: 2 per row */
@media (min-width:861px) and (max-width:1024px){
  .syn-services--grid .syn-stack{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* mobile: stacking cards need a solid background so each fully covers the one beneath */
@media (max-width:860px){
  .syn-services--grid .syn-card__inner{background:var(--syn-card-m,#f4f2f2)}
}
@media (max-width:860px){
  .syn-services--grid .syn-shade{background:var(--syn-card-m,#f4f2f2)}
}