/* ============================================================
   Youth n Rise — our team page (builds on styles.css)
   ============================================================ */

.tm-hero { padding: calc(var(--header-h) + 11rem) 0 6rem; background: var(--bg); text-align: center; }
.tm-hero .eyebrow { color: var(--coral); margin-bottom: 1.8rem; }
.tm-hero h1 { font-size: clamp(4rem, 8vw, 9rem); line-height: 0.92; max-width: 16ch; margin: 0 auto 2.4rem; }
.tm-hero h1 em { font-style: normal; color: var(--coral); }
.tm-hero p { font-size: 2rem; opacity: 0.7; max-width: 56rem; margin: 0 auto; }

/* ---------- team carousel (compact black & white cards) ---------- */
.tm-carousel-wrap { background: var(--bg); padding: 4rem 0 12rem; }
.tm-carousel { padding: 0 4rem; overflow: hidden; }
.tm-carousel .swiper-wrapper { align-items: stretch; }
.tm-slide { height: auto; }

.tm-slide__photo {
  position: relative; aspect-ratio: 3/4; border-radius: 1.6rem; overflow: hidden;
  background: var(--bg-soft); box-shadow: 0 1.4rem 3.5rem rgba(0,0,0,0.12);
}
.tm-slide__photo img {
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(1) contrast(1.03);
  transition: filter 0.5s ease, transform 0.7s var(--ease-expo);
}
.tm-slide:hover .tm-slide__photo img { filter: grayscale(0); transform: scale(1.04); }
.tm-slide__photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(0,0,0,0.35)); }

.tm-slide__label {
  position: absolute; left: 1rem; right: 1rem; bottom: 1rem; z-index: 2;
  background: #fff; border-radius: 0.9rem; padding: 0.7rem 1rem;
  box-shadow: 0 0.6rem 1.6rem rgba(0,0,0,0.16);
}
.tm-slide__label h3 { font-size: 1.4rem; line-height: 1.08; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tm-slide__label span { display: block; font-size: 0.95rem; color: var(--coral); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; margin-top: 0.15rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.tm-carousel__hint { text-align: center; font-size: 1.4rem; opacity: 0.5; margin-top: 3.5rem; }

@media (max-width: 1023px) {
  .tm-hero { padding: calc(var(--header-h) + 8rem) 0 3rem; }
  .tm-carousel-wrap { padding: 3rem 0 8rem; }
  .tm-carousel { padding: 0 2.4rem; }
}