/* Team page — reuses css/use-cases.css (nav, phero, .uc, caps, close, footer).
   Adds: a background-video hero, the "Life at Sellora" portrait gallery, the full
   team photo, the two founder cards, the member grid, and a shared click-to-open
   bio card. Swap each *-photo span for an <img> and each "Full name" for a real
   name when the team details are ready. */

/* ---------- Hero: background video with a scrim so the nav + text stay legible ---------- */
.top.team-hero{position:relative;background-color:#131110;overflow:hidden;min-height:100svh;display:flex;flex-direction:column;}
.team-hero-media{
  position:absolute;inset:0;z-index:0;overflow:hidden;
  background:url("../assets/img/team-hero-poster.jpg") center/cover no-repeat,
    radial-gradient(125% 95% at 70% 12%, oklch(0.29 0 0) 0%, oklch(0.17 0 0) 46%, oklch(0.1 0 0) 100%);
}
.team-hero-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;}
@media (prefers-reduced-motion:reduce){.team-hero-vid{display:none;}}   /* still poster instead of the moving video */
.team-hero-media::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(180deg, oklch(0.1 0 0 / .78) 0%, oklch(0.1 0 0 / .3) 34%, oklch(0.1 0 0 / .4) 64%, oklch(0.1 0 0 / .8) 100%),
    linear-gradient(90deg, oklch(0.1 0 0 / .52) 0%, oklch(0.1 0 0 / .1) 62%, oklch(0.1 0 0 / 0) 100%);
}
/* the fixed nav (z-index:90) already sits above the hero media; only the phero needs lifting */
.top.team-hero .phero{position:relative;z-index:1;}
.top.team-hero .phero{
  flex:1;min-height:clamp(20rem,52vh,32rem);
  display:flex;flex-direction:column;justify-content:flex-end;
}

/* ---------- Life at Sellora: portrait video gallery (staggered grid, not a carousel) ---------- */
.team-reels{
  background:oklch(0.14 0 0);color:#fff;
  padding:clamp(3.5rem,8vh,6rem) var(--side) clamp(4.5rem,10vh,7.5rem);
}
.team-reels-top{max-width:52rem;margin-bottom:clamp(2.5rem,5vh,3.5rem);}
.team-reels .kicker{color:oklch(1 0 0 / .5);}
.team-reels h2{
  margin:0;font-size:clamp(1.75rem,4vw,3rem);font-weight:600;
  letter-spacing:-.03em;line-height:1.06;text-transform:uppercase;color:#fff;
}
.team-reels h2 .dim{color:oklch(1 0 0 / .45);}
.team-reels-note{margin:1rem 0 0;max-width:46ch;color:oklch(1 0 0 / .6);font-size:clamp(.9375rem,1.3vw,1.0625rem);line-height:1.6;}

.tvid-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(.875rem,1.6vw,1.375rem);align-items:start;}
.tvid{
  position:relative;aspect-ratio:9/16;overflow:hidden;
  border-radius:var(--r-3xl);background:oklch(0.2 0 0);
  outline:1px solid oklch(1 0 0 / .1);outline-offset:-1px;
}
.tvid:nth-child(even){margin-top:clamp(1rem,3.5vw,2.25rem);}   /* stagger */
.tvid video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;}
.tvid-scrim{position:absolute;inset:0;background:linear-gradient(to bottom,transparent 45%,oklch(0 0 0 / .55) 100%);}
.tvid-time{
  position:absolute;right:.75rem;top:.75rem;padding:.1875rem .4375rem;border-radius:9999px;
  background:oklch(0 0 0 / .5);font-size:.625rem;font-weight:600;color:oklch(1 0 0 / .85);font-variant-numeric:tabular-nums;
}
@media (max-width:820px){
  .tvid-grid{grid-template-columns:repeat(2,1fr);}
  .tvid:nth-child(even){margin-top:0;}
}

/* ---------- Whole team: one wide group photo, framed floating-card style ---------- */
.team-photo{
  margin:clamp(2.5rem,5vh,3.5rem) 0 0;
  border-radius:var(--r-4xl);overflow:hidden;aspect-ratio:2/1;
  background:linear-gradient(140deg,var(--secondary),var(--muted));
  outline:1px solid color-mix(in oklch,var(--foreground) 6%,transparent);outline-offset:-1px;
  box-shadow:0 22px 40px -22px color-mix(in oklch,var(--foreground) 24%,transparent);
}
.team-photo img{width:100%;height:100%;object-fit:cover;display:block;}
@media (max-width:640px){.team-photo{aspect-ratio:3/2;}}

/* ---------- Founders: two featured cards, click opens the bio card ---------- */
.founders-grid{
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(1.25rem,2.4vw,2rem);
  margin-top:clamp(2.5rem,5vh,3.5rem);
}
.founder{
  display:flex;gap:clamp(1.25rem,2.6vw,2rem);align-items:center;text-align:left;
  padding:clamp(1.5rem,3vw,2.25rem);
  background:var(--card);border:1px solid var(--border);border-radius:var(--r-4xl);
  cursor:pointer;font:inherit;color:inherit;text-decoration:none;
  box-shadow:0 4px 6px -1px color-mix(in oklch,var(--foreground) 6%,transparent);
  transition:transform .32s cubic-bezier(.16,1,.3,1),box-shadow .32s cubic-bezier(.16,1,.3,1),border-color .32s;
}
.founder:hover{
  transform:translateY(-3px);
  box-shadow:0 22px 38px -16px color-mix(in oklch,var(--foreground) 22%,transparent);
  border-color:color-mix(in oklch,var(--foreground) 14%,transparent);
}
.founder:focus-visible{outline:2px solid var(--foreground);outline-offset:2px;}
.founder-photo{
  flex:0 0 auto;display:block;width:12.5rem;aspect-ratio:1/1;object-fit:cover;border-radius:var(--r-4xl);
  outline:1px solid color-mix(in oklch,var(--foreground) 6%,transparent);outline-offset:-1px;
  background:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23a1a1aa'%20stroke-width='1.3'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='12'%20cy='9'%20r='3.2'/%3E%3Cpath%20d='M5.5%2020c0-3.6%203-5.5%206.5-5.5s6.5%201.9%206.5%205.5'/%3E%3C/svg%3E") center / 56% no-repeat, linear-gradient(140deg,var(--secondary),var(--muted));
}
.founder-info{display:flex;flex-direction:column;min-width:0;}
.founder-name{font-size:clamp(1.1875rem,1.8vw,1.625rem);font-weight:600;letter-spacing:-.02em;line-height:1.2;}
.founder-role{margin-top:.3125rem;font-size:.6875rem;font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:var(--muted-foreground);}
.founder-line{margin-top:.75rem;font-size:.9375rem;line-height:1.55;color:var(--muted-foreground);}
.founder-more{margin-top:.875rem;display:inline-flex;align-items:center;gap:.375rem;font-size:.8125rem;font-weight:600;color:var(--foreground);}
.founder-more svg{width:.75rem;height:.75rem;transition:transform .3s cubic-bezier(.16,1,.3,1);}
.founder:hover .founder-more svg{transform:translateX(3px);}
@media (max-width:1200px){.founder-photo{width:11rem;}}
@media (max-width:820px){.founders-grid{grid-template-columns:1fr;}}
@media (max-width:420px){.founder{flex-direction:column;align-items:flex-start;}}

/* ---------- The team: compact member cards, click opens the bio card ---------- */
.crew-grid{
  display:grid;grid-template-columns:repeat(6,1fr);
  gap:clamp(1.75rem,2.8vw,2.5rem);
  margin-top:clamp(2.5rem,5vh,3.5rem);
}
.crew{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  background:none;border:0;padding:0;margin:0;font:inherit;color:inherit;cursor:pointer;
  transition:transform .32s cubic-bezier(.16,1,.3,1);
}
.crew:hover,.crew:focus-visible{transform:translateY(-4px);}
.crew-photo{
  display:block;width:100%;max-width:10.5rem;aspect-ratio:1/1;object-fit:cover;margin:0 auto .875rem;border-radius:var(--r-4xl);
  outline:1px solid color-mix(in oklch,var(--foreground) 6%,transparent);outline-offset:-1px;
  background:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23a1a1aa'%20stroke-width='1.3'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='12'%20cy='9'%20r='3.2'/%3E%3Cpath%20d='M5.5%2020c0-3.6%203-5.5%206.5-5.5s6.5%201.9%206.5%205.5'/%3E%3C/svg%3E") center / 42% no-repeat, linear-gradient(140deg,var(--secondary),var(--muted));
  transition:transform .32s cubic-bezier(.16,1,.3,1),box-shadow .32s cubic-bezier(.16,1,.3,1);
}
.crew:hover .crew-photo,.crew:focus-visible .crew-photo{box-shadow:0 18px 34px -16px color-mix(in oklch,var(--foreground) 30%,transparent);outline-color:color-mix(in oklch,var(--foreground) 16%,transparent);}
.crew:focus-visible{outline:none;}
.crew:focus-visible .crew-photo{outline:2px solid var(--foreground);outline-offset:2px;}
.crew-name{font-size:1rem;font-weight:600;color:var(--foreground);letter-spacing:-.015em;line-height:1.2;}
.crew-role{margin-top:.3125rem;font-size:.625rem;font-weight:600;text-transform:uppercase;letter-spacing:.09em;color:var(--muted-foreground);line-height:1.3;}
.crew-more{display:inline-flex;align-items:center;gap:.3125rem;margin-top:.625rem;font-size:.625rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--muted-foreground);transition:color .2s;}
.crew-more svg{width:.75rem;height:.75rem;transition:transform .3s cubic-bezier(.16,1,.3,1);}
.crew:hover .crew-more,.crew:focus-visible .crew-more{color:var(--foreground);}
.crew:hover .crew-more svg{transform:translateX(3px);}
@media (prefers-reduced-motion:reduce){.crew,.crew-more svg{transition:none;}}
@media (max-width:1200px){.crew-grid{grid-template-columns:repeat(5,1fr);}}
@media (max-width:960px){.crew-grid{grid-template-columns:repeat(4,1fr);}}
@media (max-width:720px){.crew-grid{grid-template-columns:repeat(3,1fr);}}
@media (max-width:520px){.crew-grid{grid-template-columns:repeat(2,1fr);}}

/* ---------- Bio card: shared overlay, filled from the clicked card (js/team.js) ---------- */
.bio-modal{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:clamp(1rem,4vw,2rem);}
.bio-modal[hidden]{display:none;}
.bio-backdrop{position:absolute;inset:0;background:oklch(0.1 0 0 / .55);backdrop-filter:blur(2px);opacity:0;transition:opacity .3s cubic-bezier(.16,1,.3,1);}
.bio-modal.open .bio-backdrop{opacity:1;}
.bio-card{
  position:relative;z-index:1;width:min(30rem,100%);max-height:min(85vh,42rem);overflow-y:auto;
  background:var(--card);border:1px solid var(--border);border-radius:var(--r-4xl);
  padding:clamp(1.75rem,4vw,2.5rem);
  box-shadow:0 30px 60px -20px oklch(0 0 0 / .5);
  opacity:0;transform:translateY(12px) scale(.98);
  transition:opacity .3s cubic-bezier(.16,1,.3,1),transform .3s cubic-bezier(.16,1,.3,1);
}
.bio-modal.open .bio-card{opacity:1;transform:none;}
.bio-close{
  position:absolute;top:1rem;right:1rem;width:2rem;height:2rem;border-radius:9999px;
  display:flex;align-items:center;justify-content:center;
  background:var(--secondary);border:1px solid var(--border);cursor:pointer;color:var(--muted-foreground);
  transition:color .2s,background .2s;
}
.bio-close:hover{color:var(--foreground);background:var(--muted);}
.bio-close svg{width:.875rem;height:.875rem;}
.bio-photo{
  display:block;width:4.5rem;aspect-ratio:1/1;border-radius:var(--r-3xl);margin-bottom:1.25rem;
  outline:1px solid color-mix(in oklch,var(--foreground) 6%,transparent);outline-offset:-1px;
  background:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23a1a1aa'%20stroke-width='1.3'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='12'%20cy='9'%20r='3.2'/%3E%3Cpath%20d='M5.5%2020c0-3.6%203-5.5%206.5-5.5s6.5%201.9%206.5%205.5'/%3E%3C/svg%3E") center / 56% no-repeat, linear-gradient(140deg,var(--secondary),var(--muted));
}
.bio-role{font-size:.625rem;font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:var(--muted-foreground);}
.bio-name{margin:.375rem 0 0;font-size:clamp(1.25rem,2vw,1.625rem);font-weight:600;letter-spacing:-.02em;line-height:1.15;}
.bio-text{margin:1rem 0 0;}
.bio-text p{margin:0 0 .875rem;font-size:.9375rem;line-height:1.65;color:var(--muted-foreground);}
.bio-text p:last-child{margin-bottom:0;}
.bio-links{margin:1.25rem 0 0;padding-top:1.25rem;border-top:1px solid var(--border);}
.bio-links[hidden]{display:none;}
.bio-link{
  display:inline-flex;align-items:center;gap:.5rem;
  font-size:.8125rem;font-weight:600;color:var(--foreground);text-decoration:none;
  padding:.5rem .875rem;border:1px solid var(--border);border-radius:9999px;
  transition:background .2s,border-color .2s;
}
.bio-link:hover{background:var(--secondary);border-color:color-mix(in oklch,var(--foreground) 18%,transparent);}
.bio-link svg{width:.9375rem;height:.9375rem;}

@media (prefers-reduced-motion:reduce){
  .bio-backdrop,.bio-card,.crew-photo,.founder,.founder-more svg{transition:none;}
}