/* Team Showcase widget styles.
   Everything is scoped under .ts-team (the shortcode's root container) and
   every class is ts-* prefixed, since this file is loaded on arbitrary
   WordPress pages alongside a theme and other plugins. */

.ts-team {
  --ts-card-bg: #ffffff;
  --ts-name-color: #1a1a1a;
  --ts-title-color: #4f9a52;
  --ts-overlay-bg: rgba(10, 14, 20, 0.82);
  --ts-card-radius: 18px;
  --ts-photo-radius: 14px;

  box-sizing: border-box;
  font-family:
    "Poppins", system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
}

.ts-team,
.ts-team *,
.ts-team *::before,
.ts-team *::after {
  box-sizing: border-box;
}

.ts-team__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

@media (max-width: 900px) {
  .ts-team__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 520px) {
  .ts-team__grid {
    grid-template-columns: 1fr;
  }
}

/* Card — modern "framed photo" layout: the photo sits inset within its own
   rounded frame instead of bleeding edge-to-edge into the name/title text,
   so there's always solid card background separating them (no more photo
   pixels touching the text block directly). */

.ts-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--ts-card-radius);
  background: var(--ts-card-bg);
  border: 1px solid rgba(0, 0, 0, 0.07);
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.06),
    0 8px 20px rgba(0, 0, 0, 0.06);
  padding: 12px 12px 20px;
  isolation: isolate;
  transition:
    transform 220ms ease,
    box-shadow 220ms ease;
  outline-offset: 3px;
}

.ts-card:hover {
  transform: translateY(-4px);
  box-shadow:
    0 4px 8px rgba(0, 0, 0, 0.08),
    0 18px 32px rgba(0, 0, 0, 0.1);
}

.ts-card__photo-frame {
  position: relative;
  overflow: hidden;
  border-radius: var(--ts-photo-radius);
  aspect-ratio: 4 / 5;
  background: #e2e8f0;
}

.ts-card__photo {
  /* !important: the WordPress theme's own generic `img { max-width: 100%;
     height: auto; }` reset otherwise wins and lets the image shrink to its
     own aspect ratio instead of filling the frame — exposing the frame's
     placeholder background as a visible rectangle under shorter photos.
     Same interference pattern hit elsewhere in this project's plugins. */
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover !important;
  display: block;
  margin: 0;
}

/* Always-visible name + designation, now in normal flow below the photo
   frame instead of an absolutely-positioned bar over it. */

.ts-card__footer {
  padding-top: 16px;
  text-align: center;
}

.ts-card__name {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--ts-name-color);
  line-height: 1.25;
}

.ts-card__title {
  margin: 6px 0 0;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--ts-title-color);
  line-height: 1.3;
}

/* Glassy black overlay that swipes up from the bottom on hover, covering
   the whole card (photo frame + footer together). */

.ts-card__overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* flex-start, not center: a long bio can be taller than the card, and a
     centered flex box clips overflow equally from both ends, hiding the
     start of the text with no way to reach it. Starting from the top and
     letting the panel scroll keeps the whole bio reachable. */
  justify-content: flex-start;
  gap: 10px;
  padding: 28px 20px;
  text-align: center;
  background: var(--ts-overlay-bg);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: #fff;
  border-radius: var(--ts-card-radius);
  transform: translateY(100%);
  transition: transform 320ms ease;
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.ts-card__overlay::-webkit-scrollbar {
  display: none;
}

.ts-card:hover .ts-card__overlay,
.ts-card:focus-within .ts-card__overlay,
.ts-card--active .ts-card__overlay {
  transform: translateY(0);
}

.ts-card__overlay-name {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #ffffff;
}

.ts-card__overlay-title {
  margin: 0;
  font-size: 0.8125rem;
  color: #cbd5e0;
}

.ts-card__overlay-bio {
  margin: 4px 0 0;
  font-size: 0.8125rem;
  line-height: 1.6;
  color: #e2e8f0;
  max-width: 240px;
}