/* Joey + Milo premium 3D host cards - 2026-09-21
   Presentation only. Photos, names, roles and biography content stay exactly as supplied. */

.home-hosts-bridge{
  position:relative;
  margin-top:10px!important;
  margin-bottom:18px!important;
}
.home-hosts-bridge::before,
.home-hosts-bridge::after{
  content:"";
  height:1px;
  flex:1 1 90px;
  background:linear-gradient(90deg,transparent,rgba(232,197,110,.46),rgba(255,255,255,.14),transparent);
  box-shadow:0 0 12px rgba(232,197,110,.12);
}
.home-hosts-bridge span{
  color:#f1d37f!important;
  text-shadow:0 1px 0 #4a2e0b,0 0 12px rgba(232,197,110,.22);
}
.home-hosts-bridge b{
  color:#b9c1cc!important;
}

.home-people-section{
  perspective:1500px;
  gap:24px!important;
  margin-bottom:34px!important;
}

.home-people-section .home-person-card{
  --host-accent:#55e7ff;
  --host-accent-rgb:85,231,255;
  position:relative;
  isolation:isolate;
  overflow:hidden;
  min-height:336px!important;
  max-height:360px!important;
  border:1px solid rgba(232,197,110,.52)!important;
  border-radius:22px!important;
  background:
    radial-gradient(circle at 86% 12%,rgba(var(--host-accent-rgb),.12),transparent 28%),
    radial-gradient(circle at 10% 100%,rgba(232,197,110,.08),transparent 30%),
    linear-gradient(145deg,#161a20 0%,#0a0c11 42%,#101018 100%)!important;
  transform:translateZ(0);
  transform-style:preserve-3d;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.30),
    inset 0 -1px 0 rgba(0,0,0,.92),
    inset 14px 0 38px rgba(var(--host-accent-rgb),.075),
    inset -12px 0 34px rgba(var(--host-accent-rgb),.05),
    0 5px 0 #4a3b24,
    0 8px 0 #14161b,
    0 20px 34px rgba(0,0,0,.52),
    0 0 13px rgba(var(--host-accent-rgb),.55),
    0 0 30px rgba(var(--host-accent-rgb),.34),
    0 0 58px rgba(var(--host-accent-rgb),.20),
    0 0 88px rgba(232,197,110,.07)!important;
  filter:
    drop-shadow(0 0 7px rgba(var(--host-accent-rgb),.24))
    drop-shadow(0 0 18px rgba(var(--host-accent-rgb),.14));
  transition:transform .24s ease,box-shadow .24s ease,filter .24s ease;
}

#home-joey-card{
  --host-accent:#55e7ff;
  --host-accent-rgb:85,231,255;
}
#home-milo-card{
  --host-accent:#ff60c8;
  --host-accent-rgb:255,96,200;
}

.home-people-section .home-person-card::before{
  content:"";
  position:absolute;
  z-index:8;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  background:
    radial-gradient(circle at 16% 10%,rgba(255,255,255,.16),transparent 22%),
    radial-gradient(circle at 88% 16%,rgba(var(--host-accent-rgb),.22),transparent 24%),
    linear-gradient(105deg,rgba(255,255,255,.20) 0%,rgba(255,255,255,.04) 12%,transparent 26% 72%,rgba(var(--host-accent-rgb),.14) 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.10),
    inset 0 0 0 4px rgba(0,0,0,.10),
    inset 0 0 26px rgba(var(--host-accent-rgb),.08);
}

.home-people-section .home-person-card::after{
  content:"";
  position:absolute;
  z-index:7;
  inset:7px;
  border-radius:15px;
  pointer-events:none;
  border:1px solid rgba(var(--host-accent-rgb),.30);
  background:
    linear-gradient(90deg,rgba(var(--host-accent-rgb),.32),transparent 18% 82%,rgba(var(--host-accent-rgb),.24)) top/100% 1px no-repeat,
    linear-gradient(90deg,rgba(232,197,110,.28),transparent 22% 78%,rgba(232,197,110,.18)) bottom/100% 1px no-repeat;
  opacity:.96;
  box-shadow:
    inset 0 0 18px rgba(var(--host-accent-rgb),.10),
    0 0 12px rgba(var(--host-accent-rgb),.18);
}

.home-person-media{
  position:relative;
  z-index:2;
  overflow:hidden;
  margin:12px 0 12px 12px;
  height:calc(100% - 24px)!important;
  border:1px solid rgba(255,255,255,.19)!important;
  border-right:1px solid rgba(232,197,110,.34)!important;
  border-radius:14px 0 0 14px!important;
  background:#06080c!important;
  box-shadow:
    inset 0 0 0 4px rgba(3,5,8,.72),
    inset -10px 0 24px rgba(0,0,0,.38),
    inset 0 0 18px rgba(var(--host-accent-rgb),.055),
    0 9px 18px rgba(0,0,0,.46),
    0 0 12px rgba(var(--host-accent-rgb),.24),
    4px 0 24px rgba(var(--host-accent-rgb),.18);
  transform:translateZ(18px);
}
.home-person-media::before{
  content:"";
  position:absolute;
  z-index:4;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(115deg,rgba(255,255,255,.13),transparent 22% 78%,rgba(var(--host-accent-rgb),.08)),
    linear-gradient(180deg,transparent 68%,rgba(4,6,10,.25));
}
.home-person-media::after{
  content:"";
  position:absolute;
  z-index:5;
  top:12%;
  right:-1px;
  width:3px;
  height:76%;
  border-radius:999px;
  pointer-events:none;
  background:linear-gradient(180deg,transparent,var(--host-accent),#f5d887,var(--host-accent),transparent);
  box-shadow:0 0 12px rgba(var(--host-accent-rgb),.55);
}
.home-person-media img,
.home-person-media video{
  transform:scale(1.01);
  transition:transform .35s ease,filter .35s ease;
  filter:contrast(1.035) saturate(1.035);
}

.home-person-copy{
  position:relative;
  z-index:3;
  margin:12px 12px 12px 0;
  padding:24px 24px 22px!important;
  border:1px solid rgba(255,255,255,.08);
  border-left:0;
  border-radius:0 14px 14px 0;
  background:
    linear-gradient(120deg,rgba(255,255,255,.05),transparent 20%),
    radial-gradient(circle at 100% 0,rgba(var(--host-accent-rgb),.18),transparent 34%),
    radial-gradient(circle at 26% 100%,rgba(232,197,110,.055),transparent 30%),
    linear-gradient(180deg,rgba(13,16,23,.82),rgba(6,8,12,.94));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.055),
    inset 0 -12px 20px rgba(0,0,0,.16),
    0 8px 18px rgba(0,0,0,.22);
  transform:translateZ(10px);
}

.home-person-copy h2{
  margin:0 0 10px!important;
  font-size:clamp(2rem,2.55vw,2.75rem)!important;
  letter-spacing:.065em!important;
  line-height:1!important;
  filter:
    drop-shadow(0 1px 0 rgba(255,247,220,.4))
    drop-shadow(0 3px 0 rgba(68,42,14,.95))
    drop-shadow(0 7px 9px rgba(0,0,0,.58))
    drop-shadow(0 0 12px rgba(238,199,112,.20))!important;
}
.home-person-copy h2::after{
  display:block!important;
  left:0!important;
  bottom:-7px!important;
  width:88%!important;
  height:1px!important;
  background:linear-gradient(90deg,var(--host-accent),#f2d58a 42%,transparent)!important;
  box-shadow:0 0 9px rgba(var(--host-accent-rgb),.28)!important;
}

.home-person-role{
  position:relative;
  display:inline-flex;
  width:max-content;
  max-width:100%;
  margin:7px 0 13px!important;
  padding:5px 9px;
  border:1px solid rgba(232,197,110,.22);
  border-radius:999px;
  background:linear-gradient(180deg,rgba(232,197,110,.08),rgba(0,0,0,.08));
  color:#f1d37f!important;
  font-size:12px!important;
  letter-spacing:.025em;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}

.home-person-bio{
  max-height:162px!important;
  margin-top:1px!important;
  padding:10px 13px 9px 12px!important;
  border-left:2px solid rgba(var(--host-accent-rgb),.36);
  border-radius:0 9px 9px 0;
  background:linear-gradient(90deg,rgba(var(--host-accent-rgb),.035),transparent 34%);
  color:#dfd0bb!important;
  line-height:1.52!important;
  box-shadow:inset 8px 0 14px rgba(var(--host-accent-rgb),.025);
  scrollbar-color:rgba(var(--host-accent-rgb),.55) rgba(255,255,255,.04)!important;
}
.home-person-bio::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,var(--host-accent),#d8b75f)!important;
  box-shadow:0 0 8px rgba(var(--host-accent-rgb),.22);
}

/* Stronger always-on showroom lighting so the host cards demand attention before hover. */
.home-people-section{
  position:relative;
}
#home-joey-card{
  outline:1px solid rgba(85,231,255,.28);
  outline-offset:3px;
}
#home-milo-card{
  outline:1px solid rgba(255,96,200,.28);
  outline-offset:3px;
}
.home-person-copy::after{
  content:"";
  position:absolute;
  z-index:-1;
  left:10%;
  right:10%;
  top:8px;
  height:34%;
  border-radius:50%;
  pointer-events:none;
  background:radial-gradient(ellipse,rgba(var(--host-accent-rgb),.16),transparent 70%);
  filter:blur(12px);
}
.home-person-role{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    0 0 9px rgba(232,197,110,.10),
    0 0 12px rgba(var(--host-accent-rgb),.08)!important;
}

@media(hover:hover) and (pointer:fine){
  .home-people-section .home-person-card:hover{
    transform:translateY(-7px) rotateX(1.25deg) scale(1.006);
    filter:brightness(1.035);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.28),
      inset 0 -1px 0 rgba(0,0,0,.9),
      inset 14px 0 32px rgba(var(--host-accent-rgb),.05),
      0 7px 0 #4a3d29,
      0 11px 0 #151820,
      0 29px 44px rgba(0,0,0,.55),
      0 0 34px rgba(var(--host-accent-rgb),.20)!important;
  }
  .home-people-section .home-person-card:hover .home-person-media img,
  .home-people-section .home-person-card:hover .home-person-media video{
    transform:scale(1.045);
    filter:contrast(1.055) saturate(1.07);
  }
}

@media(max-width:980px){
  .home-people-section{
    gap:16px!important;
  }
  .home-people-section .home-person-card{
    min-height:318px!important;
    max-height:344px!important;
  }
  .home-person-copy{
    padding:20px 18px!important;
  }
  .home-person-copy h2{
    font-size:clamp(1.7rem,3.4vw,2.2rem)!important;
  }
}

@media(max-width:820px){
  .home-hosts-bridge::before,
  .home-hosts-bridge::after{display:none}
  .home-people-section{
    perspective:none;
  }
  .home-people-section .home-person-card{
    min-height:0!important;
    max-height:none!important;
    border-radius:18px!important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.18),
      0 4px 0 #302b24,
      0 13px 26px rgba(0,0,0,.42),
      0 0 20px rgba(var(--host-accent-rgb),.09)!important;
  }
  .home-people-section .home-person-card::after{
    top:auto;
    right:24px;
    left:24px;
    bottom:7px;
    width:auto;
    height:2px;
    border-radius:999px;
    background:linear-gradient(90deg,transparent,var(--host-accent),#e8c56e,var(--host-accent),transparent);
  }
  .home-person-media{
    margin:10px 10px 0!important;
    width:calc(100% - 20px)!important;
    height:auto!important;
    min-height:0!important;
    aspect-ratio:16/10;
    border:1px solid rgba(255,255,255,.16)!important;
    border-radius:12px 12px 0 0!important;
  }
  .home-person-media::after{
    top:auto;
    left:10%;
    right:10%;
    bottom:-1px;
    width:auto;
    height:2px;
  }
  .home-person-copy{
    margin:0 10px 10px!important;
    padding:20px 17px 18px!important;
    border:1px solid rgba(255,255,255,.08)!important;
    border-top:0!important;
    border-radius:0 0 12px 12px!important;
  }
  .home-person-copy h2{
    font-size:clamp(1.9rem,8vw,2.5rem)!important;
  }
  .home-person-role{
    width:100%;
    white-space:normal;
    border-radius:9px;
  }
  .home-person-bio{
    max-height:none!important;
    overflow:visible!important;
  }
}

@media(prefers-reduced-motion:reduce){
  .home-people-section .home-person-card,
  .home-person-media img,
  .home-person-media video{
    transition:none!important;
    transform:none!important;
  }
}


/* 2026-09-21 phone review: compact host cards + working touch bio scrollers */
@media(max-width:820px){
  .home-people-section{
    gap:12px!important;
  }
  .home-people-section .home-person-card{
    max-height:none!important;
    min-height:0!important;
  }
  .home-person-media{
    height:clamp(150px,46vw,210px)!important;
    aspect-ratio:auto!important;
    overflow:hidden!important;
  }
  .home-person-media img,
  .home-person-media video{
    width:100%!important;
    height:100%!important;
    object-fit:cover!important;
    object-position:center 30%!important;
  }
  .home-person-copy{
    padding:13px 14px 14px!important;
  }
  .home-person-copy h2{
    margin-bottom:6px!important;
    font-size:clamp(1.55rem,7vw,2rem)!important;
    line-height:.92!important;
  }
  .home-person-role{
    margin-bottom:9px!important;
    padding:7px 9px!important;
    font-size:.78rem!important;
    line-height:1.18!important;
  }
  .home-person-bio{
    display:block!important;
    max-height:165px!important;
    min-height:92px!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    padding:9px 10px 9px 12px!important;
    line-height:1.45!important;
    font-size:.92rem!important;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
    touch-action:pan-y!important;
    scrollbar-width:thin;
  }
}
@media(max-width:430px){
  .home-person-media{
    height:155px!important;
  }
  .home-person-bio{
    max-height:150px!important;
    min-height:86px!important;
  }
}


/* 2026-09-21 targeted phone follow-up: show the complete host photo instead of cropping faces/body */
@media(max-width:820px){
  .home-person-media{
    height:230px!important;
    min-height:230px!important;
    background:
      radial-gradient(circle at 50% 45%,rgba(var(--host-accent-rgb),.08),transparent 58%),
      #06080c!important;
  }
  .home-person-media img,
  .home-person-media video{
    width:100%!important;
    height:100%!important;
    max-height:none!important;
    object-fit:contain!important;
    object-position:center center!important;
    transform:none!important;
  }
}
@media(max-width:430px){
  .home-person-media{
    height:220px!important;
    min-height:220px!important;
  }
}