/**
 * MLT Team: team tiles and the team member page.
 * Colours come from the brand colours set in Customer Setup (TeamPlus
 * --mt-color-* variables), with sensible fallbacks.
 */
.mlt-team,
.mltt-member {
  --mltt-primary: var(--mt-color-primary, #0f6ff0);
  --mltt-primary-dark: var(--mt-color-primary-dark, #0b5ccc);
  --mltt-on-primary: var(--mt-color-primary-contrast, #ffffff);
  --mltt-dark: var(--mt-color-dark-colored, #0f2a3c);
  --mltt-text: var(--mt-color-default-contrast, #2d3748);
  --mltt-soft: var(--mt-color-default-light, #f5f7fa);
  --mltt-line: rgba(0, 0, 0, 0.08);
  --mltt-radius: var(--mt-radius, 12px);
}

/* ---- Tiles ------------------------------------------------------------------ */
.mlt-team .view-content,
.mltt-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1.5rem;
}

.mlt-team .views-row {
  display: flex;
}

.mltt-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  overflow: hidden;
  background: var(--mt-surface, #fff);
  border: 1px solid var(--mltt-line);
  border-radius: var(--mltt-radius);
  color: var(--mltt-text) !important;
  text-align: center;
  text-decoration: none !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.mltt-card:hover {
  transform: translateY(-3px);
  border-color: var(--mltt-primary);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.1);
}

.mltt-card:focus-visible {
  outline: 3px solid var(--mltt-primary);
  outline-offset: 3px;
}

.mltt-card__media {
  display: block;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--mltt-soft);
}

.mltt-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.mltt-card__body {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 1rem 1rem 1.2rem;
  border-top: 4px solid var(--mltt-primary);
}

.mltt-card__name {
  font-family: var(--mt-hff, inherit);
  font-size: 1.12rem;
  font-weight: 700;
}

.mltt-card__role {
  color: var(--mltt-primary);
  font-size: 0.92rem;
  font-weight: 600;
}

/* ---- Team member page ----------------------------------------------------------- */
.mltt-member {
  color: var(--mltt-text);
}

.mltt-member__grid {
  display: grid;
  grid-template-columns: minmax(220px, 360px) 1fr;
  gap: 2.5rem;
  align-items: start;
}

.mltt-member__photo img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--mltt-radius);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
}

.mltt-member__role {
  margin: 0 0 1rem;
  color: var(--mltt-primary);
  font-size: 1.15rem;
  font-weight: 700;
}

.mltt-member__text {
  font-size: 1.05rem;
  line-height: 1.75;
}

.mltt-member h2 {
  font-family: var(--mt-hff, inherit);
}

.mltt-cta {
  margin: 3rem 0;
  padding: 2rem;
  background: var(--mltt-dark);
  border-radius: var(--mltt-radius);
  color: #fff;
  text-align: center;
}

.mltt-cta h2 {
  margin: 0 0 0.5rem;
  color: #fff;
}

.mltt-cta p {
  margin: 0 0 1.25rem;
  opacity: 0.9;
}

.mltt-cta__buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
}

.mltt-btn {
  display: inline-block;
  padding: 0.8rem 1.4rem;
  border: 2px solid transparent;
  border-radius: var(--mt-radius-sm, 8px);
  font-weight: 700;
  text-decoration: none !important;
}

.mltt-btn--primary {
  background: var(--mltt-primary);
  color: var(--mltt-on-primary) !important;
}

.mltt-btn--primary:hover {
  background: var(--mltt-primary-dark);
}

.mltt-btn--outline {
  border-color: #fff;
  color: #fff !important;
}

.mltt-btn--outline:hover {
  background: rgba(255, 255, 255, 0.12);
}

.mltt-more h2 {
  margin: 0 0 1.25rem;
}

@media (max-width: 767px) {
  .mltt-member__grid {
    grid-template-columns: 1fr;
  }

  .mltt-member__photo {
    max-width: 320px;
  }
}

@media (max-width: 575px) {
  .mltt-cta {
    padding: 1.5rem;
  }

  .mltt-btn {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mltt-card,
  .mltt-card:hover {
    transition: none;
    transform: none;
  }
}