.soapkits-team-grid {
  display: grid;
  grid-template-columns: repeat(var(--soapkits-team-cols, 4), 1fr);
  gap: var(--soapkits-team-gap, 24px);
  width: 100%;
  box-sizing: border-box;
}

@media (max-width: 1024px) {
  .soapkits-team-grid {
    grid-template-columns: repeat(var(--soapkits-team-cols-tablet, 2), 1fr);
  }
}

@media (max-width: 767px) {
  .soapkits-team-grid {
    grid-template-columns: repeat(var(--soapkits-team-cols-mobile, 1), 1fr);
  }
}

.soapkits-team-card {
  position: relative;
  background: var(--soapkits-team-card-bg, #ffffff);
  border-radius: var(--soapkits-team-card-radius, 24px);
  overflow: hidden;
  box-shadow: var(--soapkits-team-card-shadow, 0 4px 20px rgba(0, 0, 0, 0.04));
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
  display: flex;
  flex-direction: column;
}

.soapkits-team-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--soapkits-team-card-hover-shadow, 0 16px 36px -8px rgba(0, 0, 0, 0.09), 0 8px 16px -6px rgba(0, 0, 0, 0.04));
}

.soapkits-team-card__image-wrapper {
  position: relative;
  width: 100%;
  height: var(--soapkits-team-image-height, 280px);
  overflow: hidden;
  background-color: #f1f3f5;
  /* The Photo → Border Radius control sets a single radius for every corner; when it
     is unset the wrapper follows the card's top corners. */
  border-radius: var(--soapkits-team-image-radius, var(--soapkits-team-card-radius, 24px) var(--soapkits-team-card-radius, 24px) 0 0);
}

.soapkits-team-card__image {
  width: 100%;
  height: 100%;
  object-fit: var(--soapkits-team-image-fit, cover);
  object-position: var(--soapkits-team-image-position, center top);
  display: block;
  transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), filter 0.4s ease;
}

.soapkits-team-card:hover .soapkits-team-card__image {
  transform: scale(var(--soapkits-team-image-hover-scale, 1.05));
}

/* Photo → Grayscale: desaturated at rest, full colour while the card is hovered/focused. */
.soapkits-team--grayscale .soapkits-team-card__image {
  filter: grayscale(100%);
}

.soapkits-team--grayscale .soapkits-team-card:hover .soapkits-team-card__image,
.soapkits-team--grayscale .soapkits-team-card:focus-within .soapkits-team-card__image {
  filter: none;
}

/* Hover Social Icons Pop Over Image */
.soapkits-team-card__socials {
  position: absolute;
  bottom: var(--soapkits-team-social-offset, 16px);
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--soapkits-team-social-gap, 8px);
  margin: 0 auto;
  padding: 0;
  list-style: none;
  z-index: 5;
  pointer-events: none;
}

.soapkits-team-card__social-item {
  margin: 0;
  padding: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(18px) scale(0.6);
  transition: opacity 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
              transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
              visibility 0.3s ease;
  pointer-events: auto;
}

.soapkits-team-card:hover .soapkits-team-card__social-item {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

/*
 * "Always Show Icons" (content switch). The pop-in is a hover affordance, so it is
 * simply skipped here — no transition, no transform — and the row is visible from
 * the start, which also makes the links reachable on touch devices.
 */
.soapkits-team--socials-visible .soapkits-team-card__social-item {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.soapkits-team-card:hover .soapkits-team-card__social-item:nth-child(1) { transition-delay: 0.03s; }
.soapkits-team-card:hover .soapkits-team-card__social-item:nth-child(2) { transition-delay: 0.08s; }
.soapkits-team-card:hover .soapkits-team-card__social-item:nth-child(3) { transition-delay: 0.13s; }
.soapkits-team-card:hover .soapkits-team-card__social-item:nth-child(4) { transition-delay: 0.18s; }
.soapkits-team-card:hover .soapkits-team-card__social-item:nth-child(5) { transition-delay: 0.23s; }

.soapkits-team-card__social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--soapkits-team-social-size, 36px);
  height: var(--soapkits-team-social-size, 36px);
  border-radius: var(--soapkits-team-social-radius, 50%);
  background-color: var(--soapkits-team-social-bg, #A3E6B5);
  color: var(--soapkits-team-social-color, #111827);
  text-decoration: none;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
  font-size: var(--soapkits-team-social-icon-size, 14px);
  transition: transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1), background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.soapkits-team-card__social-link:hover {
  transform: translateY(-3px) scale(1.1);
  background-color: var(--soapkits-team-social-hover-bg, #82dc99);
  color: var(--soapkits-team-social-hover-color, #000000);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.2);
}

.soapkits-team-card__social-link i,
.soapkits-team-card__social-link svg {
  width: var(--soapkits-team-social-icon-size, 14px);
  height: var(--soapkits-team-social-icon-size, 14px);
  fill: currentColor;
  color: currentColor;
}

/* Card Content / Details */
.soapkits-team-card__content {
  padding: 22px 18px 24px;
  text-align: center;
  background: var(--soapkits-team-card-bg, #ffffff);
  display: flex;
  flex-direction: column;
  /* `stretch` (not `center`) so the block children fill the card and the Content
     Alignment control only has to move the text, never the boxes. */
  align-items: stretch;
}

.soapkits-team-card__name {
  font-size: var(--soapkits-team-name-size, 18px);
  font-weight: 700;
  color: var(--soapkits-team-name-color, #111827);
  margin: 0 0 6px 0;
  line-height: 1.25;
}

.soapkits-team-card__position {
  font-size: var(--soapkits-team-position-size, 13.5px);
  font-weight: 500;
  color: var(--soapkits-team-position-color, #6b7280);
  margin: 0;
  line-height: 1.3;
}

/* Member profile interactions */
.soapkits-team-card__name a,
.soapkits-team-card__profile-trigger {
  color: inherit;
  font: inherit;
  text-decoration: none;
}

.soapkits-team-card__name a:hover,
.soapkits-team-card__profile-trigger:hover {
  color: var(--soapkits-team-trigger-hover-color, inherit);
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

/*
 * "Profile Link / Button → Underline On Hover" switched off. The underline is a
 * hover affordance only; the resting state is already `text-decoration: none`.
 */
.soapkits-team--no-underline .soapkits-team-card__name a:hover,
.soapkits-team--no-underline .soapkits-team-card__profile-trigger:hover {
  text-decoration: none;
}

.soapkits-team-card__profile-trigger {
  appearance: none;
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 0;
}

.soapkits-team-card__name a:focus-visible,
.soapkits-team-card__profile-trigger:focus-visible,
.soapkits-team-drawer__close:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}

.soapkits-team-card__profile {
  width: 100%;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid rgba(17, 24, 39, 0.12);
  color: var(--soapkits-team-position-color, #6b7280);
  text-align: left;
}

.soapkits-team-card__profile-details > :first-child,
.soapkits-team-drawer__details > :first-child {
  margin-top: 0;
}

.soapkits-team-card__profile-details > :last-child,
.soapkits-team-drawer__details > :last-child {
  margin-bottom: 0;
}

.soapkits-team-drawer {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: grid;
  /* The panel column is capped by the Drawer Width control; the backdrop takes the rest. */
  grid-template-columns: minmax(0, 1fr) min(100%, var(--soapkits-team-drawer-width, 560px));
}

/* Left-edge panel: the column order is mirrored so the backdrop keeps filling the gap. */
.soapkits-team-drawer--left {
  grid-template-columns: min(100%, var(--soapkits-team-drawer-width, 560px)) minmax(0, 1fr);
}

.soapkits-team-drawer[hidden] {
  display: none;
}

.soapkits-team-drawer__backdrop {
  grid-column: 1 / -1;
  grid-row: 1;
  background: var(--soapkits-team-drawer-overlay, rgba(17, 24, 39, 0.52));
  /* Optional frosted glass over the page behind the drawer. */
  backdrop-filter: blur(var(--soapkits-team-drawer-blur, 0px));
  -webkit-backdrop-filter: blur(var(--soapkits-team-drawer-blur, 0px));
  /* Taps and drags on the dimmed area must never pan the page underneath. */
  touch-action: none;
}

.soapkits-team-drawer__panel {
  grid-column: 2;
  grid-row: 1;
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--soapkits-team-drawer-bg, var(--soapkits-team-card-bg, #ffffff));
  color: var(--soapkits-team-drawer-name-color, var(--soapkits-team-name-color, #111827));
  box-shadow: -18px 0 42px rgba(0, 0, 0, 0.18);
  /* Unset on desktop (flush edge); the mobile block supplies the sheet corners. */
  border-radius: var(--soapkits-team-drawer-radius, 0);
  padding: 0;
}

.soapkits-team-drawer--left .soapkits-team-drawer__panel {
  grid-column: 1;
  /* The shadow has to fall on the side the panel is not anchored to. */
  box-shadow: 18px 0 42px rgba(0, 0, 0, 0.18);
}

/*
 * The panel shell never scrolls; only this inner area does. The close button is
 * a child of the shell, so it stays pinned. When the panel itself was the scroll
 * box the button was laid out inside it and scrolled straight out of view on
 * small screens, leaving no visible way to dismiss the drawer.
 */
.soapkits-team-drawer__scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  padding: 72px 36px 36px;
}

/*
 * Pinned close button + the scrim that keeps scrolled content from colliding
 * with it. The scrim only ever covers the panel's top padding at rest, so it
 * hides nothing until the content actually scrolls underneath.
 */
.soapkits-team-drawer__panel::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 76px;
  /* Same colour as the panel, faded out along its lower edge with a mask so no
     transparent-colour maths is needed and any panel background keeps working. */
  background: var(--soapkits-team-drawer-bg, var(--soapkits-team-card-bg, #ffffff));
  -webkit-mask-image: linear-gradient(to bottom, #000 62%, transparent);
  mask-image: linear-gradient(to bottom, #000 62%, transparent);
  pointer-events: none;
  z-index: 1;
}

.soapkits-team-drawer__close {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--soapkits-team-drawer-close-size, 44px);
  height: var(--soapkits-team-drawer-close-size, 44px);
  padding: 0;
  border: 0;
  border-radius: var(--soapkits-team-drawer-close-radius, 50%);
  background: var(--soapkits-team-drawer-close-bg, var(--soapkits-team-social-bg, #A3E6B5));
  color: var(--soapkits-team-drawer-close-color, var(--soapkits-team-social-color, #111827));
  cursor: pointer;
  font-size: var(--soapkits-team-drawer-close-icon-size, 28px);
  line-height: 1;
  touch-action: manipulation;
  transition: background-color 0.2s ease, color 0.2s ease;
}

/* The close button always sits on the panel's inner edge: `right: 16px` is the screen
   side for a right-edge panel and the content side for a left-edge panel. */

.soapkits-team-drawer__close:hover {
  background: var(--soapkits-team-drawer-close-hover-bg, var(--soapkits-team-social-hover-bg, #82dc99));
  color: var(--soapkits-team-drawer-close-hover-color, var(--soapkits-team-social-hover-color, #000000));
}

.soapkits-team-drawer__identity {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 28px;
}

.soapkits-team-drawer__identity img {
  width: var(--soapkits-team-drawer-photo-size, 88px);
  height: var(--soapkits-team-drawer-photo-size, 88px);
  flex: 0 0 var(--soapkits-team-drawer-photo-size, 88px);
  border-radius: var(--soapkits-team-drawer-photo-radius, 50%);
  object-fit: cover;
}

.soapkits-team-drawer__identity h2 {
  margin: 0;
  color: inherit;
  font-size: 26px;
  line-height: 1.15;
}

.soapkits-team-drawer__identity p {
  margin: 6px 0 0;
  color: var(--soapkits-team-drawer-role-color, var(--soapkits-team-position-color, #6b7280));
}

.soapkits-team-drawer__details {
  color: var(--soapkits-team-drawer-details-color, var(--soapkits-team-position-color, #6b7280));
  font-size: 16px;
  line-height: 1.7;
}

/*
 * Scroll lock. `overflow: hidden` on <body> alone does nothing when <html>
 * carries a non-visible overflow value (a very common theme/plugin rule such as
 * `html { overflow-x: hidden }`): the body's overflow is then not propagated to
 * the viewport, so <html> keeps scrolling and the page slides behind the
 * drawer. Lock both elements. iOS Safari ignores overflow for touch scrolling
 * altogether, which the touchmove guard in team.js covers.
 */
html.soapkits-team-drawer-open,
body.soapkits-team-drawer-open {
  overflow: hidden;
  overscroll-behavior: none;
}

@media (max-width: 767px) {
  /* The `--left` variant carries an extra class, so it has to be listed here as well:
     a phone always gets the single-column bottom sheet regardless of the chosen edge. */
  .soapkits-team-drawer,
  .soapkits-team-drawer--left {
    grid-template-columns: 1fr;
    /* minmax(0, …) lets the backdrop row collapse, so the panel can never be
       pushed past the bottom of the viewport on short screens. */
    grid-template-rows: minmax(0, 1fr) auto;
    height: 100vh;
    height: 100dvh;
  }

  .soapkits-team-drawer__panel,
  .soapkits-team-drawer--left .soapkits-team-drawer__panel {
    grid-column: 1;
    grid-row: 2;
    /* A bottom sheet lifts upwards, whichever edge the desktop panel hugs. */
    box-shadow: 0 -18px 42px rgba(0, 0, 0, 0.18);
    /* dvh keeps the sheet clear of the mobile browser toolbar; vh is the fallback. */
    max-height: 88vh;
    max-height: 88dvh;
    /* Falls back to the sheet corners only while Panel Radius is unset, so a radius
       chosen in the editor is never silently dropped on phones. */
    border-radius: var(--soapkits-team-drawer-radius, 24px 24px 0 0);
  }

  .soapkits-team-drawer__scroll {
    padding: 68px 24px 28px;
  }

  .soapkits-team-drawer__identity {
    align-items: flex-start;
  }
}

@media (prefers-reduced-motion: reduce) {
  .soapkits-team-card,
  .soapkits-team-card__image,
  .soapkits-team-card__social-item,
  .soapkits-team-card__social-link {
    transition-duration: 0.01ms !important;
  }
}