/* web/themes/techprosolutions/css/components/sf-expert-carousel.css
 *
 * "Instant Expert Match" — ClearTax-style two-phase expert carousel.
 *   SEARCH: experts fan out as LIGHT cards (cut-out headshot on a neutral card)
 *           and shuffle; a status line cycles below the fan.
 *   MATCH:  the centre card lifts, enlarges, its card turns GREEN and a check
 *           stamp appears — the matched expert — while the rest dim behind.
 * JS (sf-expert-carousel.js) drives the phases + writes each card's transform;
 * this file owns the visual states + transitions.
 *
 * House rules: 4px grid for layout, Manrope, brand tokens, SOLID rgba, inline
 * SVG icons. Scoped under .sfx-carousel.
 * ------------------------------------------------------------------------- */

.sfx-carousel {
  --sfx-green: #A3CD98;         /* sage "matched" card */
  --sfx-card-bg: #E7EAEE;       /* neutral "searching" card */
  position: relative;
  width: 100%;
  max-width: 360px;
  height: 100%;
  min-height: 400px;
  margin: 0 auto;
  font-family: 'Manrope', system-ui, -apple-system, sans-serif;
}

/* Fan lives in the upper area; the bottom 44px is reserved for the status line
   so it can NEVER be clipped by the media slot's overflow. */
.sfx-carousel__deck {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 44px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* One expert card, centred in the deck; JS adds the fan/match transform. */
.sfx-card {
  position: absolute;
  left: 50%;
  top: 46%;
  width: 168px;                /* 42 x 4px */
  height: 224px;               /* 56 x 4px */
  margin-left: -84px;
  margin-top: -112px;
  /* Initial fan (also the no-JS fallback); JS drives the same transform. */
  --sfx-off: calc(var(--sfx-i, 0) - (var(--sfx-n, 3) - 1) / 2);
  --sfx-abs: max(var(--sfx-off), calc(-1 * var(--sfx-off)));
  transform:
    translateX(calc(var(--sfx-off) * 60px))
    translateY(calc(var(--sfx-abs) * 26px))
    rotate(calc(var(--sfx-off) * 12deg));
  border-radius: 18px;
  overflow: hidden;
  background: var(--sfx-card-bg);
  box-shadow: 0 20px 40px -18px rgba(15, 25, 45, 0.4);
  will-change: transform, opacity;
  transition:
    transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.45s ease,
    background-color 0.45s ease,
    box-shadow 0.45s ease;
}

/* Photo layer. The card background shows AROUND a cut-out (transparent) photo. */
.sfx-card__photo-wrap {
  position: absolute;
  inset: 0;
  background: transparent;
}
.sfx-card__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 12%;
  display: block;
}

/* Green "matched" check stamp, top-right; hidden until matched. */
.sfx-card__check {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 24px;
  height: 24px;
  line-height: 0;
  opacity: 0;
  transform: scale(0.4);
  transition: opacity 0.35s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.25));
  z-index: 3;
}

/* Info badge at the card foot — compact so it doesn't cover the face. */
.sfx-card__badge {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 8px;
  z-index: 2;
  padding: 7px 10px 8px;
  border-radius: 12px;
  background: rgba(12, 18, 30, 0.86);
  color: #FFFFFF;
}
.sfx-card__name {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  font-size: 0.8125rem;        /* 13px */
  font-weight: 700;
  line-height: 1.15;
  /* !important: the base theme forces a dark p colour (#322f2f) that beats the
     badge's inherited white; the role survives only via its own explicit colour. */
  color: #FFFFFF !important;
}
.sfx-card__name-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #FFFFFF !important;
}
.sfx-card__verified { flex: 0 0 auto; color: #2F9BE0; }
.sfx-card__role {
  margin: 1px 0 0;
  font-size: 0.625rem;         /* 10px */
  font-weight: 500;
  line-height: 1.2;
  color: rgba(255, 255, 255, 0.72) !important;
}
.sfx-card__meta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 5px;
}
.sfx-card__pill {
  padding: 2px 7px;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.16);
  font-size: 0.625rem;         /* 10px */
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
  color: #FFFFFF !important;
}
.sfx-card__rating {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 0.6875rem;
  font-weight: 700;
  white-space: nowrap;
  color: #FFFFFF !important;
}
.sfx-card__rating svg { color: #F5B301; }

/* ---- MATCHED state: green card + ring, check in, lifted (transform in JS) ----
   The green CARD shows only behind a cut-out (transparent) headshot; for full-
   bleed photos the green RING + glow carry the "selected" read regardless. */
.sfx-card.is-matched {
  background: var(--sfx-green);
  box-shadow:
    0 0 0 3px #3CB944,
    0 28px 56px -16px rgba(47, 138, 74, 0.6);
}
.sfx-card.is-matched .sfx-card__check {
  opacity: 1;
  transform: scale(1);
}
/* Non-matched cards recede while a match is on screen. */
.sfx-carousel.is-matching .sfx-card:not(.is-matched) {
  opacity: 0.5;
  filter: saturate(0.85) brightness(0.96);
}

/* ---- Status line: sits in the reserved 44px band, always visible ---- */
.sfx-carousel__status {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 8px;
  margin: 0;
  text-align: center;
  font-size: 0.9375rem;        /* 15px */
  font-weight: 600;
  color: var(--et-body-color, #45464F);
  transition: opacity 0.3s ease;
}
.sfx-carousel.is-matching .sfx-carousel__status { opacity: 0; }

/* ---- Reduced motion: static matched card, no fan/shuffle ---- */
@media (prefers-reduced-motion: reduce) {
  .sfx-card { transition: none; }
  .sfx-card__check { transition: none; }
}