/*
 * [lt_team_grid] -- compact card grid + mobile snap carousel.
 *
 * - >=992px:  static 4-column grid
 * - 640-991px: static 2-column grid
 * - <640px:   horizontal swipe carousel using CSS scroll-snap.
 *             grid.js handles auto-advance + dot pagination.
 */

.lt-team {
  padding: 64px 0;
  background: var(--lt-bg);
  color: var(--lt-ink);
}

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

.lt-team__container {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 16px;
}

.lt-team__heading {
  text-align: center;
  margin: 0 0 40px;
}

.lt-team__title {
  margin: 0 0 12px;
  font-family: var(--lt-font);
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -0.005em;
  color: var(--lt-ink);
  line-height: 1.2;
}

.lt-team__subtitle {
  margin: 0 auto;
  max-width: 640px;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--lt-mute);
}

.lt-team__viewport {
  width: 100%;
}

.lt-team__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
  align-items: stretch;
  list-style: none;
  margin: 0;
  padding: 0;
}

.lt-team__item {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

.lt-team__dots {
  display: none;
}

.lt-team__card {
  display: flex;
  flex-direction: column;
  width: 100%;
  background: var(--lt-surface);
  border: 1px solid var(--lt-border);
  border-radius: var(--lt-radius);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  box-shadow: var(--lt-shadow-sm);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.lt-team__card:hover,
.lt-team__card:focus-visible {
  transform: translateY(-4px);
  box-shadow: var(--lt-shadow-md);
  border-color: var(--lt-border-strong);
  text-decoration: none;
  color: inherit;
  outline: none;
}

.lt-team__photo {
  position: relative;
  width: 100%;
  aspect-ratio: 5 / 6;
  overflow: hidden;
  background: linear-gradient(180deg, #f3f4f6 0%, #e5e7eb 100%);
}

.lt-team__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  transition: transform 0.4s ease;
}

.lt-team__card:hover .lt-team__photo img,
.lt-team__card:focus-visible .lt-team__photo img {
  transform: scale(1.04);
}

.lt-team__info {
  padding: 18px 20px 22px;
  text-align: center;
  background: var(--lt-surface);
}

.lt-team__name {
  margin: 0;
  font-family: var(--lt-font);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--lt-ink);
  line-height: 1.3;
  letter-spacing: 0.005em;
}

.lt-team__role {
  margin: 6px 0 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--lt-accent);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* Tablet: 2 columns */
@media (max-width: 991px) {
  .lt-team__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    max-width: 640px;
    margin: 0 auto;
  }
}

/* Mobile: native swipe carousel with scroll-snap + auto-advance (via grid.js) */
@media (max-width: 640px) {
  .lt-team {
    padding: 48px 0;
  }

  .lt-team__container {
    padding: 0;
  }

  .lt-team__heading {
    margin-bottom: 28px;
    padding: 0 16px;
  }

  .lt-team__title {
    font-size: 1.55rem;
  }

  .lt-team__subtitle {
    font-size: 0.95rem;
    padding: 0 8px;
  }

  /* Horizontal scroll container. The browser handles the touch swipe;
   * scroll-snap aligns each card to the centre when the user lets go,
   * eliminating partial-card "stuck between" positions. */
  .lt-team__viewport {
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scroll-padding-inline: 12.5%;     /* leaves a peek of neighbours */
    scrollbar-width: none;             /* Firefox */
    overscroll-behavior-x: contain;    /* don't trigger page swipe back */
  }
  .lt-team__viewport::-webkit-scrollbar { display: none; }  /* WebKit */

  .lt-team__grid {
    display: flex;
    grid-template-columns: none;
    gap: 12px;
    width: max-content;
    max-width: none;
    margin: 0;
    padding: 4px 12.5% 8px;            /* matches scroll-padding-inline */
  }

  .lt-team__item {
    flex: 0 0 75vw;                    /* ~1 card per screen, peek of next */
    max-width: 320px;
    scroll-snap-align: center;
    scroll-snap-stop: always;          /* one swipe = one card, no skipping */
  }

  .lt-team__card:hover {
    transform: none;
  }
  .lt-team__card:hover .lt-team__photo img {
    transform: none;
  }

  /* Pagination dots. Dots are inserted by grid.js so we can
   * keep the markup bot-friendly even without JS. */
  .lt-team__dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin: 16px 0 0;
    padding: 0 16px;
    list-style: none;
  }

  .lt-team__dot {
    appearance: none;
    -webkit-appearance: none;
    background: var(--lt-border, #d1d5db);
    border: 0;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    padding: 0;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.2s ease;
  }

  .lt-team__dot[aria-current="true"] {
    background: var(--lt-accent, #0e7a26);
    transform: scale(1.35);
  }

  .lt-team__dot:focus-visible {
    outline: 2px solid var(--lt-accent, #0e7a26);
    outline-offset: 2px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lt-team__viewport { scroll-behavior: auto; }
  .lt-team__card,
  .lt-team__photo img { transition: none !important; }
  .lt-team__card:hover,
  .lt-team__card:focus-visible { transform: none; }
  .lt-team__card:hover .lt-team__photo img,
  .lt-team__card:focus-visible .lt-team__photo img { transform: none; }
}