@font-face {
  font-family: 'BrittanySignature';
  src: url('https://cdn.shopify.com/s/files/1/0595/4709/1100/files/BrittanySignature.ttf?v=1765737528') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

.team-stats-porsche,
.statistieken{
  padding-top: var(--tsp-top, 60px);
  padding-bottom: var(--tsp-bottom, 60px);
}

.tsp__grid{
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--tsp-gap, 28px);
  align-items: center;
}

/* LEFT */
.tsp__kicker{
  opacity: .75;
  margin: 0 0 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: .85rem;
}

.tsp__heading{
  margin: 0 0 12px;
  line-height: 1.1;
}

.tsp__subtext{
  margin-bottom: 22px;
  opacity: .9;
}

.tsp__stats{
  display: grid;
  gap: 18px;
  margin-top: 10px;
}

.tsp__stat{
  padding: 16px 18px;
  border-radius: var(--tsp-radius, 18px);
  background: rgba(0,0,0,.04);
}

.scheme-dark .tsp__stat,
.scheme-inverse .tsp__stat{
  background: rgba(255,255,255,.08);
}

.tsp__statTop{
  display: flex;
  align-items: baseline;
  gap: 10px;
}

/* ==============================
   CHANGED: SMALLER STATISTICS NUMBERS
   ============================== */
.tsp__statValue{
  font-size: clamp(2.5rem, 4vw, 3.5rem); /* Changed from clamp(1.7rem, 3vw, 2.3rem) */
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1;
}

.tsp__statUnit{
  font-size: 1.4rem; /* Changed from 1rem */
  opacity: .85;
}

.tsp__statLabel{
  margin-top: 8px;
  font-size: 1.1rem; /* Changed from .98rem */
  opacity: .9;
}

.tsp__cta{
  margin-top: 22px;
}

.tsp__button{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: calc(var(--tsp-radius, 18px) - 6px);
}

/* RIGHT */
.tsp__media{
  position: relative;
}

.tsp__teamGrid{
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr 1fr;
}

.tsp__member{
  position: relative;
  overflow: hidden;
  border-radius: var(--tsp-radius, 18px);
  margin: 0;
  min-height: 190px;
  background: rgba(0,0,0,.04);
}

.scheme-dark .tsp__member,
.scheme-inverse .tsp__member{
  background: rgba(255,255,255,.08);
}

.tsp__member--3{
  grid-column: 1 / -1;
  min-height: 240px;
}

.tsp__memberImg{
  width: 100%;
  height: 100%;
}

.tsp__memberImg img,
.tsp__memberImg svg{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.tsp__memberName{
  position: absolute;
  left: 14px;
  bottom: 14px;
  padding: 10px 14px;
  border-radius: 999px;

  font-family: var(--tsp-name-font, inherit);
  font-size: 1.4rem;
  letter-spacing: .02em;
  line-height: 1;

  backdrop-filter: blur(10px);
  background: rgba(0,0,0,.35);
  color: #fff;
}

/* =========================
   MOBILE: Porsche-style
   ========================= */
@media (max-width: 767px){

  /* One column layout */
  .tsp__grid{
    grid-template-columns: 1fr;
    gap: 22px;
  }

  /* Center align everything (stats like Porsche) */
  .tsp__content{
    text-align: center;
  }

  .tsp__kicker{
    margin-left: auto;
    margin-right: auto;
  }

  .tsp__subtext{
    margin-left: auto;
    margin-right: auto;
  }

  /* Stats stacked + centered */
  .tsp__stats{
    justify-items: center;
    gap: 22px;
    margin-top: 18px;
  }

  .tsp__stat{
    width: 100%;
    max-width: 420px;
    background: transparent;      /* more like Porsche (clean) */
    padding: 0;                   /* remove card feel */
    border-radius: 0;
  }

  .tsp__statTop{
    justify-content: center;
    gap: 8px;
  }

  /* ==============================
     CHANGED: SMALLER MOBILE STATISTICS NUMBERS
     ============================== */
  .tsp__statValue{
    font-size: 2.8rem;            /* Changed from 2.4rem - made slightly smaller */
  }

  .tsp__statUnit{
    font-size: 1.3rem; /* Changed from 1.1rem */
    opacity: .8;
  }

  .tsp__statLabel{
    margin-top: 10px;
    font-size: 1rem; /* Added font-size for mobile */
    opacity: .8;
  }

  /* Button centered and wide */
  .tsp__cta{
    display: flex;
    justify-content: center;
    margin-top: 22px;
  }

  .tsp__button{
    width: min(520px, 100%);
  }

  /* Team images: 3 next to each other */
  .tsp__teamGrid{
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    align-items: center;
  }

  /* Make all 3 equal — remove the "big third" */
  .tsp__member{
    min-height: 110px;
    border-radius: 16px;
  }

  .tsp__member--3{
    grid-column: auto;
    min-height: 110px;
  }

  /* Optional: cleaner name label for small tiles */
  .tsp__memberName{
    left: 8px;
    bottom: 8px;
    padding: 7px 10px;
    font-size: 1.05rem;
  }
}
@font-face {
  font-family: 'BrittanySignature';
  src: url('https://cdn.shopify.com/s/files/1/0595/4709/1100/files/BrittanySignature.ttf?v=1765737528') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

.team-stats-porsche,
.statistieken{
  padding-top: var(--tsp-top, 60px);
  padding-bottom: var(--tsp-bottom, 60px);
}

.tsp__grid{
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--tsp-gap, 28px);
  align-items: center;
}

/* LEFT */
.tsp__kicker{
  opacity: .75;
  margin: 0 0 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: .85rem;
}

.tsp__heading{
  margin: 0 0 12px;
  line-height: 1.1;
}

.tsp__subtext{
  margin-bottom: 22px;
  opacity: .9;
}

.tsp__stats{
  display: grid;
  gap: 18px;
  margin-top: 10px;
}

.tsp__stat{
  padding: 16px 18px;
  border-radius: var(--tsp-radius, 18px);
  background: rgba(0,0,0,.04);
}

.scheme-dark .tsp__stat,
.scheme-inverse .tsp__stat{
  background: rgba(255,255,255,.08);
}

.tsp__statTop{
  display: flex;
  align-items: baseline;
  gap: 10px;
}

/* ==============================
   CHANGED: SMALLER STATISTICS NUMBERS
   ============================== */
.tsp__statValue{
  font-size: clamp(2.5rem, 4vw, 3.5rem);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1;
}

.tsp__statUnit{
  font-size: 1.4rem;
  opacity: .85;
}

.tsp__statLabel{
  margin-top: 8px;
  font-size: 1.1rem;
  opacity: .9;
}

.tsp__cta{
  margin-top: 22px;
}

.tsp__button{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: calc(var(--tsp-radius, 18px) - 6px);
}

/* RIGHT */
.tsp__media{
  position: relative;
}

.tsp__teamGrid{
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr 1fr;
}

.tsp__member{
  position: relative;
  overflow: hidden;
  border-radius: var(--tsp-radius, 18px);
  margin: 0;
  min-height: 190px;
  background: rgba(0,0,0,.04);
}

.scheme-dark .tsp__member,
.scheme-inverse .tsp__member{
  background: rgba(255,255,255,.08);
}

.tsp__member--3{
  grid-column: 1 / -1;
  min-height: 240px;
}

.tsp__memberImg{
  width: 100%;
  height: 100%;
}

.tsp__memberImg img,
.tsp__memberImg svg{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.tsp__memberName{
  position: absolute;
  left: 14px;
  bottom: 14px;
  padding: 10px 14px;
  border-radius: 999px;

  font-family: var(--tsp-name-font, inherit);
  font-size: 1.4rem;
  letter-spacing: .02em;
  line-height: 1;

  backdrop-filter: blur(10px);
  background: rgba(0,0,0,.35);
  color: #fff;
}

/* =========================
   MOBILE: Porsche-style
   ========================= */
@media (max-width: 767px){

  /* One column layout */
  .tsp__grid{
    grid-template-columns: 1fr;
    gap: 22px;
  }

  /* Center align everything (stats like Porsche) */
  .tsp__content{
    text-align: center;
  }

  .tsp__kicker{
    margin-left: auto;
    margin-right: auto;
  }

  .tsp__subtext{
    margin-left: auto;
    margin-right: auto;
  }

  /* Stats stacked + centered */
  .tsp__stats{
    justify-items: center;
    gap: 22px;
    margin-top: 18px;
  }

  .tsp__stat{
    width: 100%;
    max-width: 420px;
    background: transparent;
    padding: 0;
    border-radius: 0;
  }

  .tsp__statTop{
    justify-content: center;
    gap: 8px;
  }

  /* ==============================
     CHANGED: SMALLER MOBILE STATISTICS NUMBERS
     ============================== */
  .tsp__statValue{
    font-size: 2.8rem;
  }

  .tsp__statUnit{
    font-size: 1.3rem;
    opacity: .8;
  }

  .tsp__statLabel{
    margin-top: 10px;
    font-size: 1rem;
    opacity: .8;
  }

  /* Button centered and wide */
  .tsp__cta{
    display: flex;
    justify-content: center;
    margin-top: 22px;
  }

  .tsp__button{
    width: min(520px, 100%);
  }

  /* Team images: 3 next to each other */
  .tsp__teamGrid{
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    align-items: center;
  }

  /* Make all 3 equal — remove the "big third" */
  .tsp__member{
    min-height: 110px;
    border-radius: 16px;
  }

  .tsp__member--3{
    grid-column: auto;
    min-height: 110px;
  }

  /* Optional: cleaner name label for small tiles */
  .tsp__memberName{
    left: 8px;
    bottom: 8px;
    padding: 7px 10px;
    font-size: 1.05rem;
  }
}

/* =========================================================
   DESKTOP FIX: prevent collage cards getting "clamped"
   - desktop only
   - safe even if you use .tsp__layout instead of .tsp__grid
   - makes right column responsive + guarantees min width
   - forces overflow visible for overlapping collage cards
========================================================= */
@media (min-width: 990px){

  /* Let grid items actually shrink properly (prevents weird overflow sizing) */
  .tsp__content,
  .tsp__media{
    min-width: 0;
  }

  /* If your theme uses tsp__grid (older Porsche block), fix columns */
  .tsp__grid{
    /* Left column can flex, right column must not get too narrow */
    grid-template-columns: minmax(420px, 0.45fr) minmax(720px, 1fr);
    align-items: stretch;
  }

  /* If your section uses tsp__layout (your custom section), also harden it */
  .tsp__layout{
    grid-template-columns: minmax(420px, 0.45fr) minmax(720px, 1fr);
    align-items: stretch;
    overflow: visible;
  }

  /* Critical: allow the collage overlap to render outside its box */
  .tsp__media{
    overflow: visible !important;
  }

  /* If your collage wrapper is tsp__trainerStage, make it responsive and padded */
  .tsp__trainerStage{
    overflow: visible !important;

    /* Responsive width on every desktop, without becoming too wide */
    width: 100%;
    max-width: clamp(760px, 52vw, 980px);

    /* Breathing room so cards never touch/clip the edge */
    padding-left: clamp(16px, 2vw, 40px);
    padding-right: clamp(16px, 2vw, 40px);

    margin-left: auto;
    margin-right: auto;
  }

  /* Extra safety: ensure any absolute collage cards aren’t clipped */
  .tsp__trainer,
  .tsp__trainerStage *{
    overflow: visible;
  }
}