/*
 * Meet the Team — desktop interactive row + mobile accordion.
 * Plain PHP + Tailwind + vanilla JS replacement for the former React micro-app.
 * Geometry mirrors the original Figma design (pixel positions kept verbatim).
 * State is driven by the `.is-expanded` / `.is-dragging` classes toggled in meet-the-team.js.
 */

/* ---------- Desktop ---------- */
.mte-root { background: #f8f9fa; overflow: hidden; }
.mte-root[hidden] { display: none; }

.mte-viewport { padding-left: 15px; padding-right: 0; }
@media (min-width: 768px) { .mte-viewport { padding-left: 228px; } }

.mte-track {
  display: flex;
  gap: 24px;
  align-items: center;
  width: max-content;
  transform: translateX(var(--mte-offset, 0px));
  transition: transform 700ms ease-out;
  cursor: grab;
  user-select: none;
}
.mte-track.is-dragging { transition: none; cursor: grabbing; }
/* During a seamless loop reset, kill every transition so the jump is invisible */
.mte-track.is-jumping,
.mte-track.is-jumping * { transition: none !important; }

/* Card shell */
.mte-card {
  position: relative;
  height: 472px;
  width: 224px;
  flex-shrink: 0;
  border-radius: 20px;
  overflow: hidden;
  background: #ffd5d5;
  cursor: pointer;
  transition: width 700ms ease-out, background-color 700ms ease-out;
}
.mte-card.is-expanded { width: 843px; background: #0457a5; }

/* Image (left rail) */
.mte-card__img {
  position: absolute; top: 0; left: 0;
  height: 472px; width: 224px;
  overflow: hidden;
  border-top-left-radius: 20px; border-bottom-left-radius: 20px;
  transition: width 700ms ease-out;
}
.mte-card.is-expanded .mte-card__img { width: 305px; }
.mte-card__img img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  pointer-events: none;
}
.mte-card.is-expanded .mte-card__img img { object-position: top; }

/* Gradient over the image */
.mte-card__gradient {
  position: absolute; left: 0; top: 0;
  height: 472px; width: 224px;
  border-top-left-radius: 20px; border-bottom-left-radius: 20px;
  background: linear-gradient(to bottom, rgba(0,0,0,0) 44.843%, #000);
  transition: top 700ms ease-out, width 700ms ease-out;
  pointer-events: none;
}
.mte-card.is-expanded .mte-card__gradient { top: 352px; width: 305px; }

/* Collapsed label (name/title over the image) */
.mte-card__label {
  position: absolute; left: 15px; top: 327px;
  width: 194px;
  display: flex; flex-direction: column; gap: 8px;
  transition: top 700ms ease-out, opacity 700ms ease-out;
}
.mte-card.is-expanded .mte-card__label { top: 482px; opacity: 0; pointer-events: none; }

.mte-name  { color: #f8f9fa; font-size: 25px; line-height: 1.2; }
.mte-title { color: #87c9ed; font-size: 16px; font-weight: 600; line-height: 1.2; }

/* Arrow button */
.mte-card__arrow {
  position: absolute; top: 13.83px; left: 166.51px;
  width: 45.994px; height: 45.994px;
  transition: left 600ms ease-out, transform 600ms ease-out;
}
.mte-card.is-expanded .mte-card__arrow { left: 781.96px; transform: rotate(180deg); }
.mte-arrow-stroke { stroke: #0457A5; }
.mte-arrow-fill   { fill: #0457A5; }
.mte-card.is-expanded .mte-arrow-stroke { stroke: #F0F7FF; }
.mte-card.is-expanded .mte-arrow-fill   { fill: #F0F7FF; }

/* Expanded content (blue panel) */
.mte-card__expanded {
  position: absolute; left: 340.94px; top: 68px;
  width: 453.69px; max-height: 380px;
  display: flex; flex-direction: column; gap: 20px;
  opacity: 0; pointer-events: none;
  transition: opacity 300ms ease-out;
}
.mte-card.is-expanded .mte-card__expanded { opacity: 1; pointer-events: auto; }
.mte-card__expanded .mte-name { color: #ffffff; }
.mte-card__expanded-head { display: flex; align-items: center; width: 100%; }
.mte-bio {
  color: #f8f9fa; font-size: 16px; line-height: 1.5;
  white-space: pre-wrap; overflow-y: auto; padding-right: 12px;
  max-height: 300px;
  overscroll-behavior: contain;
  /* Firefox */
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.35) transparent;
}
/* WebKit / Chromium — slim, rounded, translucent */
.mte-bio::-webkit-scrollbar { width: 6px; }
.mte-bio::-webkit-scrollbar-track { background: transparent; }
.mte-bio::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.30);
  border-radius: 9999px;
}
.mte-bio:hover::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.55); }

/* ---------- Mobile accordion ---------- */
.mte-mobile { display: none; background: #f8f9fa; }
@media (max-width: 767px) {
  .mte-root { display: none; }
  .mte-mobile { display: block; }
}

.mte-mobile__list { display: flex; flex-direction: column; gap: 16px; padding-bottom: 32px; }

.mte-m-card { width: 100%; }

/* Collapsed mobile card */
.mte-m-collapsed {
  position: relative; display: block; width: 100%;
  padding: 0; border: 0; background: transparent;
  padding-top: 110%;
  border-radius: 20px; overflow: hidden; cursor: pointer;
}
.mte-m-card.is-expanded .mte-m-collapsed { display: none; }
.mte-m-collapsed img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.mte-m-collapsed .mte-m-shift { object-position: top; }
.mte-m-collapsed .mte-m-gradient { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0,0,0,0) 44.843%, #000); }
.mte-m-collapsed .mte-m-label { position: absolute; left: 15px; bottom: 35px; width: 225px; display: flex; flex-direction: column; gap: 8px; text-align: left; }
.mte-m-collapsed .mte-m-arrow { position: absolute; right: 25px; bottom: 36px; width: 45.994px; height: 45.994px; transform: rotate(90deg); }

/* Expanded mobile card */
.mte-m-expanded { display: none; flex-direction: column; width: 100%; }
.mte-m-card.is-expanded .mte-m-expanded { display: flex; }
.mte-m-expanded .mte-m-img { position: relative; height: 360px; overflow: hidden; border-top-left-radius: 16px; border-top-right-radius: 16px; }
/* Below md: scale the expanded image height with the viewport. */
@media (max-width: 767px) {
  .mte-m-expanded .mte-m-img { height: 100vw; }
}
.mte-m-expanded .mte-m-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.mte-m-expanded .mte-m-img img.mte-m-shift { object-position: top; }
.mte-m-expanded .mte-m-content {
  background: #0457a5;
  border-bottom-left-radius: 16px; border-bottom-right-radius: 16px;
  padding: 27px 16px;
  display: flex; flex-direction: column; gap: 10px; align-items: flex-end;
}
.mte-m-expanded .mte-m-inner { display: flex; flex-direction: column; gap: 20px; align-items: flex-start; width: 100%; }
/* Below md: cap the inner block to a viewport-relative height so it scales down
   on smaller phones; scroll if the content is taller than the cap. */
@media (max-width: 767px) {
  .mte-m-expanded .mte-m-inner {
    max-height: 80vw;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}
.mte-m-expanded .mte-m-head { display: flex; gap: 8px; align-items: flex-start; width: 100%; }
.mte-m-expanded .mte-name { color: #ffffff; }
.mte-m-expanded .mte-bio { max-height: none; overflow: visible; padding-right: 0; }
.mte-m-expanded .mte-m-collapse { width: 45.994px; height: 45.994px; background: transparent; border: 0; cursor: pointer; transform: rotate(-90deg); }

.mte-linkedin { flex-shrink: 0; width: 31px; height: 31px; }

/* Mobile arrows are always white (over dark gradient / blue panel) */
.mte-m-arrow .mte-arrow-stroke,
.mte-m-collapse .mte-arrow-stroke { stroke: #F8F9FA; }
.mte-m-arrow .mte-arrow-fill,
.mte-m-collapse .mte-arrow-fill { fill: #F8F9FA; }