/* ============================================================
   ISATIS — Meet the Team section
   ============================================================ */

@import url('./globals.css');

/* ── Section ─────────────────────────────────────────────── */
.mtt { position: relative; background: var(--e-global-color-bg); }

.mtt__top {
  background: var(--e-global-color-bg);
  padding: var(--section-pad-y) 0;
}

.mtt__inner {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: 1fr minmax(0, 460px);
  gap: clamp(36px, 4vw, 56px);
  align-items: center;
}

/* ── Left column ─────────────────────────────────────────── */
.mtt__left {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.mtt__heading {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  font-size: clamp(30px, 3.2vw, 44px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--e-global-color-text);
  margin: 0;
}

.mtt__body-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.mtt__body {
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  line-height: 1.65;
  color: var(--e-global-color-text-dim);
  margin: 0;
}

.mtt__cta-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

/* ── Cards — flex-grow swap ──────────────────────────────── */
.mtt__cards {
  display: flex;
  gap: 10px;
  height: 420px;
  position: relative;
  z-index: 2;
}

.mtt-card {
  position: relative;
  border-radius: 0;
  overflow: hidden;
  display: block;
  text-decoration: none;
  transition: flex-grow 0.4s ease-in-out;
}

.mtt-card--wide   { flex: 68 68 0%; }
.mtt-card--narrow { flex: 32 32 0%; }

.mtt__cards.is-flipped .mtt-card--wide   { flex-grow: 32; }
.mtt__cards.is-flipped .mtt-card--narrow { flex-grow: 68; }

.mtt-card img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: top center;
  display: block; pointer-events: none;
}

.mtt-card::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(15,26,46,0.72) 0%, rgba(15,26,46,0.00) 55%);
  pointer-events: none;
}

/* ── Info overlay ────────────────────────────────────────── */
.mtt-card__info { position: absolute; inset: 0; z-index: 2; pointer-events: none; }

/* Horizontal: role above name, sits at bottom-left */
.mtt-card__info-h {
  position: absolute;
  bottom: 22px; left: 22px; right: 22px;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.35s ease, transform 0.35s ease;
}

/* Vertical: single role line, writing-mode on right edge */
.mtt-card__info-v {
  position: absolute;
  top: 0; right: 14px; bottom: 0;
  width: max-content;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-end;
  padding: 22px 0;
  opacity: 0;
  transform: translateX(6px);
  transition: opacity 0.35s ease, transform 0.35s ease;
}

.mtt-card__info-v .mtt-card__role {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  margin: 0;
}

.mtt-card__role {
  font-family: 'Inter', sans-serif; font-size: 13px;
  color: #fff; margin: 0 0 5px; line-height: 1.3;
  text-shadow: 0 1px 6px rgba(0,0,0,0.55);
}

.mtt-card__name {
  font-family: 'JetBrains Mono', monospace; font-weight: 700;
  font-size: clamp(16px, 1.4vw, 20px); color: #fff; margin: 0;
}

.mtt-card__linkedin {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  padding: 5px 12px 5px 8px;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 20px;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: #fff;
  text-decoration: none;
  pointer-events: auto;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.25s ease 0.1s, transform 0.25s ease 0.1s, background 0.2s ease;
}

.mtt-card__linkedin svg {
  width: 13px; height: 13px; flex-shrink: 0;
}

.mtt-card__linkedin:hover {
  background: rgba(255,255,255,0.22);
}

/* ── Default state — delay matches card expansion (0.4s) ────── */
.mtt-card--wide   .mtt-card__info-h    { opacity: 1; transform: translateY(0); transition-delay: 0.4s; }
.mtt-card--narrow .mtt-card__info-v    { opacity: 1; transform: translateX(0); transition-delay: 0.4s; }
.mtt-card--wide   .mtt-card__linkedin  { opacity: 1; transform: translateY(0); transition: opacity 0.25s ease 0.5s, transform 0.25s ease 0.5s, background 0.2s ease 0s; }

/* ── Flipped state ───────────────────────────────────────── */
.mtt__cards.is-flipped .mtt-card--wide .mtt-card__info-h   { opacity: 0; transform: translateY(6px);  transition-delay: 0s; }
.mtt__cards.is-flipped .mtt-card--wide .mtt-card__info-v   { opacity: 1; transform: translateX(0);    transition-delay: 0.4s; }
.mtt__cards.is-flipped .mtt-card--wide .mtt-card__linkedin { opacity: 0; transform: translateY(4px);  transition-delay: 0s; }
.mtt__cards.is-flipped .mtt-card--narrow .mtt-card__info-v { opacity: 0; transform: translateX(6px);  transition-delay: 0s; }
.mtt__cards.is-flipped .mtt-card--narrow .mtt-card__info-h { opacity: 1; transform: translateY(0);    transition-delay: 0.4s; }
.mtt__cards.is-flipped .mtt-card--narrow .mtt-card__linkedin { opacity: 1; transform: translateY(0);  transition: opacity 0.25s ease 0.5s, transform 0.25s ease 0.5s, background 0.2s ease 0s; }

/* ── Responsive ──────────────────────────────────────────── */
/* TABLET (<=1024px): text + image row stacks into one column;
   cards keep the side-by-side flex-grow swap at a shorter height. */
@media (max-width: 1024px) {
  /* Fixed 460px right column -> fluid single column stack */
  .mtt__inner { grid-template-columns: 1fr; gap: clamp(28px, 4vw, 36px); }
  .mtt__cards { height: clamp(300px, 42vw, 340px); width: 100%; max-width: 100%; }
  .mtt__body { max-width: var(--measure); }   /* leesbreedte cappen in gestapelde staat */
}

/* PHONE (<=640px): cards collapse to a single stacked column;
   heading min lowered so it never overflows the gutter. */
@media (max-width: 640px) {
  .mtt__left { gap: 22px; }

  /* Lower oversized heading minimum so it never overflows */
  .mtt__heading { font-size: clamp(24px, 7vw, 32px); }

  /* Naast elkaar op telefoon: twee gelijke kaarten, gegevens onderin op
     dezelfde hoogte (naam + LinkedIn-pill zijn bottom-anchored, dus die
     lijnen automatisch uit bij gelijke kaarthoogtes). */
  .mtt__cards { flex-direction: row; gap: 10px; height: auto; width: 100%; max-width: 100%; }
  .mtt-card--wide,
  .mtt-card--narrow { flex: 1 1 0%; height: clamp(200px, 55vw, 240px); }
  .mtt__cards.is-flipped .mtt-card--wide,
  .mtt__cards.is-flipped .mtt-card--narrow { flex-grow: 1; }
  .mtt-card__info-v { opacity: 0 !important; }
  .mtt-card__info-h { opacity: 1 !important; transform: none !important; bottom: 14px; left: 14px; right: 14px; }
  .mtt-card__name { font-size: 14px; }

  /* CTA row stays wrap-friendly so buttons stay tappable */
  .mtt__cta-row { gap: 10px; }

  /* LinkedIn-pill: compacter (minder padding boven/onder), altijd zichtbaar */
  .mtt-card__linkedin {
    opacity: 1 !important;
    transform: none !important;
    min-height: 0;
    padding: 5px 12px 5px 8px;
  }
  /* Geen hover/tap-effecten op de content in de foto */
  .mtt-card,
  .mtt-card__info-h,
  .mtt-card__info-v { transition: none; }
  .mtt-card__linkedin:hover { background: rgba(255,255,255,0.12); }
}

@media (max-width: 420px) {
  .mtt__heading { font-size: clamp(22px, 8vw, 28px); }
}

@media (prefers-reduced-motion: reduce) {
  .mtt-card,
  .mtt-card__info-h,
  .mtt-card__info-v { transition: none; }
}