/* ===========================================================
   SMOOVIE — PUBLIC TEAM PAGE (team.css)
   Sharp edges only (Bauhaus)
   =========================================================== */

.team-page{
  width: 100%;
  max-width: var(--public-maxw);
  margin: 0 auto;
  padding: 18px var(--public-pad) 56px;

  background:
    radial-gradient(1100px 520px at 50% -280px, rgba(238,241,255,1) 0%, rgba(238,241,255,0) 55%),
    linear-gradient(180deg, #fbfbfd 0%, #ffffff 70%);
}

/* ===========================================================
   HERO
   =========================================================== */
.team-hero{
  border: 1px solid var(--line);
  background: #fff;
  box-shadow: var(--shadow);
  border-radius: 0;
  padding: 16px 14px;
  margin: 14px 0 18px;
}

.team-hero h1{
  margin: 0 0 8px;
  font-weight: 950;
  font-size: clamp(28px, 3.1vw, 42px);
  letter-spacing: -0.02em;
  color: var(--ink);
}

.team-hero p{
  margin: 0;
  max-width: 74ch;
  font-weight: 850;
  font-size: 13px;
  line-height: 1.6;
  color: rgba(15,15,16,.72);
}

/* ===========================================================
   GRID
   =========================================================== */
.team-grid{
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 980px){
  .team-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px){
  .team-grid{ grid-template-columns: 1fr; }
}

/* ===========================================================
   MEMBER CARD
   =========================================================== */
.team-member{
  border: 1px solid var(--line);
  background: #fff;
  box-shadow: var(--shadow);
  border-radius: 0;
  overflow: hidden;

  transition: transform .08s ease, box-shadow .15s ease, border-color .15s ease;
}

.team-member:hover{
  border-color: rgba(0,0,0,.18);
  box-shadow: 0 16px 40px rgba(0,0,0,.12);
}

.team-member:active{
  transform: translateY(1px);
}

/* ===========================================================
   PORTRAIT PHOTO (taller)
   =========================================================== */
.team-photo{
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5; /* portrait */
  background: #111;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}

/* lighter top -> darker bottom (like venue hero) */
.team-photo::after{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(0,0,0,0.02) 0%,
    rgba(0,0,0,0.10) 55%,
    rgba(0,0,0,0.28) 100%
  );
}

.team-photo img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: 50% 28%;
  border: 0;
  border-radius: 0;
  filter: saturate(1.03) contrast(1.02);
}

/* Placeholder */
.team-photo-placeholder{
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(0,0,0,.04);
}

.team-photo-placeholder::before{
  content: "";
  width: 86px;
  height: 110px; /* tall */
  border: 1px solid var(--line);
  background: rgba(255,255,255,.08);
}

/* ===========================================================
   TEXT
   =========================================================== */
.team-info{
  padding: 14px;
}

.team-name{
  margin: 0 0 6px;
  font-weight: 950;
  font-size: 18px;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--ink);
}

/* Role as a sharp “label tile” */
.team-role{
  display: inline-flex;
  align-items: center;
  height: 30px;
  padding: 0 10px;
  margin: 0 0 10px;

  border: 1px solid var(--line);
  background: rgba(0,0,0,.02);
  border-radius: 0;

  font-weight: 950;
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(15,15,16,.70);
}

.team-bio{
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: rgba(15,15,16,.78);
}

/* ===========================================================
   LINKS (sharp tabs)
   =========================================================== */
.team-links{
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.team-links a{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  height: 38px;
  padding: 0 12px;

  border: 1px solid var(--line);
  background: #fff;
  border-radius: 0;

  font-weight: 950;
  font-size: 12px;
  letter-spacing: .02em;
  color: rgba(15,15,16,.78);
  text-decoration: none;

  transition: background-color .15s ease, border-color .15s ease, transform .08s ease;
}

.team-links a:hover{
  background: rgba(0,0,0,.03);
  border-color: rgba(0,0,0,.18);
}

.team-links a:active{
  transform: translateY(1px);
}

/* Accessible focus ring (same language as site) */
.team-links a:focus,
.team-links a:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(225,29,72,.12);
  border-color: rgba(225,29,72,.45);
}

.team-empty{
  padding: 14px;
  border: 1px solid var(--line);
  background: rgba(0,0,0,.02);
  border-radius: 0;
}