/* ============ SMART WORKPLACES SLIDER ============ */
.swp-section {
  --swp-card-w: 160px;      /* small card width */
  --swp-gap: 24px;          /* gap between cards */
  --swp-start: 120px;       /* left zone where passed cards peek out; active card starts right of it */
  padding: 60px 5%; overflow: hidden;
}
/* Kills all motion for one frame while the infinite loop rebases indices onto the middle copy */
.swp-no-anim, .swp-no-anim * { transition: none !important; animation: none !important; }
.swp-heading { text-align: center; font-size: 32px; margin-bottom: 48px; }
.swp-heading-accent { color: var(--sharry-pink, #f0047f); }

.swp-slider { position: relative; }

/* Arrows — desktop: right next to the info box
   (start zone + active card 320px + info-box gap + info box 320px + 20px spacing) */
.swp-arrows {
  position: absolute;
  left: calc(var(--swp-start) + 320px + var(--swp-gap) + 320px + 20px);
  /* .swp-info's height varies with its CMS text, so its bottom edge can't be
     derived from fixed constants — the JS measures it and sets this inline
     on load/switch/resize. This is just a sane value before that first runs. */
  bottom: 220px;
  z-index: 3; display: flex; gap: 12px;
}
.swp-prev, .swp-next {
  width: 44px; height: 44px; border-radius: 50%;
  background: #638dff; color: #fff;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background-color .2s ease, transform .1s ease, opacity .2s ease;
}
.swp-prev:hover, .swp-next:hover { background: #4a76f5; }
.swp-prev:active, .swp-next:active { transform: scale(.97); }
.swp-prev .w-embed, .swp-next .w-embed { display: flex; }

/* Track — JS translates it so the active card always sits right of the arrows */
.swp-list { overflow: hidden; }
.swp-list .w-dyn-items {
  display: flex; align-items: flex-end; gap: var(--swp-gap);
  min-height: 584px; padding: 4px 4px 4px var(--swp-start);
  transform: translateX(0);
  transition: transform .3s ease-out;
  will-change: transform;
}

/* Card */
.swp-card {
  position: relative;
  width: var(--swp-card-w); height: 280px;
  border-radius: 16px;
  cursor: pointer;
  will-change: width, height;
  transition: width .3s ease-out, height .3s ease-out;
}
.swp-card.swp-active { width: 320px; height: 560px; cursor: default; }
.swp-photo { width: 100%; height: 100%; object-fit: cover; border-radius: 16px; display: block; pointer-events: none; -webkit-user-drag: none; }
.swp-card, .swp-info { user-select: none; -webkit-user-select: none; }

/* Info box — desktop: floats right of the active photo */
.swp-info {
  /* same gap from the main photo as the thumbnail row's card-to-card gap */
  position: absolute; left: calc(100% + var(--swp-gap)); top: 64px; z-index: 2;
  width: 320px; max-width: 60vw;
  background: #e9f3fc; border-radius: 16px; padding: 24px 28px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease-out;
}
/* Opacity only — JS fades the box out in place BEFORE the shrink+slide sequence
   and fades it back in (swp-show-info) after it finishes, so the box never travels */
.swp-card.swp-show-info .swp-info { opacity: 1; pointer-events: auto; }

.swp-info-row { display: flex; align-items: center; gap: 8px; }
.swp-flag { width: 22px; height: auto; border-radius: 2px; }
.swp-location { font-weight: 600; font-size: 15px; }
.swp-name { font-size: 28px; font-weight: 600; margin: 8px 0 16px; }
.swp-area, .swp-vms-row { font-size: 14px; opacity: .8; }
/* Label and CMS value flow as one sentence instead of two side-by-side cells */
.swp-vms-row { display: block; margin-top: 2px; }
.swp-vms-label, .swp-vms-value { display: inline; }
.swp-vms-label::after { content: " "; }
.swp-area:empty { display: none; }

/* ============ TABLET & MOBILE (<992px) ============
   One visible slide, arrows in the side gutters, content stretched full width */
@media (max-width: 991px) {
  .swp-section { padding: 40px 4%; }
  .swp-heading { font-size: 26px; margin-bottom: 24px; }
  .swp-slider { position: relative; }
  .swp-arrows { position: static; margin: 0; }
  .swp-prev, .swp-next { position: absolute; top: 50%; margin-top: -22px; z-index: 3; }
  .swp-prev { left: 0; }
  .swp-next { right: 0; }

  /* content spans the full width between the arrow gutters */
  .swp-list { overflow: visible; margin: 0 56px; }
  .swp-list .w-dyn-items {
    display: block; min-height: 0; padding: 0;
    transform: none !important; transition: none;
  }
  .swp-list .w-dyn-item { display: none; }
  .swp-list .w-dyn-item.swp-current { display: block; animation: swpFade .25s ease-out; }

  .swp-section .swp-card, .swp-section .swp-card.swp-active {
    width: 100%; height: auto; margin: 0; cursor: default; transition: none;
    display: flex; align-items: stretch; gap: 20px;
  }
  /* tablet: photo left, info box right — both stretched edge to edge */
  .swp-section .swp-photo {
    width: 42%; max-width: none; height: auto; aspect-ratio: 41 / 71; align-self: center;
  }
  .swp-section .swp-info, .swp-section .swp-card.swp-active .swp-info {
    position: static; opacity: 1; transform: none; pointer-events: auto;
    flex: 1 1 auto; min-width: 0; width: auto; max-width: none; padding: 24px;
    display: flex; flex-direction: column; justify-content: center;
  }
  .swp-name { font-size: 22px; }
}

@keyframes swpFade {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

/* Mobile: photo on top, info box below it, both 100% wide */
@media (max-width: 767px) {
  .swp-list { margin: 0 52px; }
  .swp-section .swp-card, .swp-section .swp-card.swp-active {
    flex-direction: column; align-items: stretch; gap: 12px;
  }
  .swp-section .swp-photo {
    width: 100%; aspect-ratio: auto; height: 380px; align-self: stretch;
  }
  .swp-section .swp-info, .swp-section .swp-card.swp-active .swp-info {
    flex: none; width: 100%; padding: 18px 20px; justify-content: flex-start;
  }
  .swp-prev, .swp-next { top: 190px; } /* centered on the photo, not the whole slide */
}

@media (max-width: 479px) {
  .swp-heading { font-size: 22px; }
  .swp-name { font-size: 18px; }
  .swp-list { margin: 0 48px; }
  .swp-section .swp-photo { height: 320px; }
  .swp-prev, .swp-next { top: 160px; }
}