/* ============================================================
   Reload Team — grid + click-to-open modal.
   Uses --reload-* brand tokens when available, with fallbacks so
   the grid still looks correct even if a different theme is active.
   ============================================================ */

.reload-team-grid{
  --rt-ink     : var(--reload-ink,     #2E405B);
  --rt-cream   : var(--reload-cream,   #FDF4F0);
  --rt-melon   : var(--reload-melon-2, #FFB08C);
  --rt-mauve   : var(--reload-mauve,   #987D9C);
  --rt-radius  : 16px;

  display:grid;
  grid-template-columns:repeat(var(--reload-team-cols, 3), minmax(0, 1fr));
  gap:16px;
  max-width:1280px;
  margin:0 auto;
  font-family:'Work Sans', system-ui, sans-serif;
  color:var(--rt-ink);
}

.reload-team-empty{
  text-align:center;
  color:var(--rt-ink);
  font-family:'Work Sans', system-ui, sans-serif;
  padding:48px 16px;
}

/* CARD ---------------------------------------------------------- */
.reload-team-card{
  position:relative; isolation:isolate; overflow:hidden;
  aspect-ratio: 416 / 496;
  border-radius:var(--rt-radius);
  background:#f4c2be;
  display:flex; align-items:flex-end;
  padding:24px;
  color:#fff;
  transition:transform .35s cubic-bezier(.22,.61,.36,1),
             box-shadow .35s ease;
}
.reload-team-card.is-clickable{
  cursor:pointer;
}
.reload-team-card.is-clickable:hover,
.reload-team-card.is-clickable:focus-visible{
  transform:translateY(-4px);
  box-shadow:0 24px 40px -22px rgba(46,64,91,.45);
  outline:none;
}
.reload-team-card.is-clickable:focus-visible{
  box-shadow:0 24px 40px -22px rgba(46,64,91,.45),
             0 0 0 3px rgba(255,176,140,.55);
}

.reload-team-card-media{
  position:absolute; inset:0;
  pointer-events:none;
  z-index:0;
}
.reload-team-card-media .reload-team-card-img{
  width:100%; height:100%; object-fit:cover; display:block;
}
.reload-team-card-placeholder{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  color:rgba(255,255,255,.45);
  background:#a8908a;
}
.reload-team-card-placeholder svg{ width:80px; height:80px }

/* Bottom-anchored dark gradient over the photo */
.reload-team-card::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,
    rgba(0,0,0,0) 55%,
    rgba(0,0,0,.72) 100%);
  z-index:1; pointer-events:none;
  border-radius:var(--rt-radius);
}

.reload-team-card-meta{
  position:relative; z-index:2;
  width:100%;
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:16px;
}
.reload-team-card-meta-text{ min-width:0 }
.reload-team-card-name{
  font-family:'Erstoria','Fraunces',serif;
  font-weight:400;
  font-size:clamp(22px, 1.9vw, 32px);
  line-height:1.2;
  letter-spacing:-.02em;
  margin:0 0 -2px;
  color:#fff;
  text-shadow:0 2px 14px rgba(0,0,0,.35);
}
.reload-team-card-role{
  margin:6px 0 0;
  font-size:15px;
  line-height:1.4;
  color:#F6F5F5;
  text-shadow:0 2px 10px rgba(0,0,0,.4);
}
.reload-team-card-li{
  flex:0 0 auto;
  width:32px; height:32px; border-radius:6px;
  background:rgba(255,255,255,.94);
  color:var(--rt-ink);
  display:inline-flex; align-items:center; justify-content:center;
  transition:transform .25s ease, background-color .25s ease, color .25s ease;
}
.reload-team-card-li:hover{
  background:var(--rt-melon);
  transform:translateY(-1px);
}
.reload-team-card-li svg{ width:16px; height:16px }

@media (max-width: 900px){
  .reload-team-grid{ grid-template-columns:repeat(2, 1fr) }
}
@media (max-width: 540px){
  .reload-team-grid{ grid-template-columns:1fr; gap:14px }
  .reload-team-card{ aspect-ratio: 5 / 6 }
}


/* ============================================================
   MODAL
   ============================================================ */
.reload-team-modal{
  --rt-ink     : var(--reload-ink,     #2E405B);
  --rt-cream   : var(--reload-cream,   #FDF4F0);
  --rt-melon   : var(--reload-melon-2, #FFB08C);
  --rt-mauve   : var(--reload-mauve,   #987D9C);

  position:fixed; inset:0; z-index:99999;
  display:flex; align-items:center; justify-content:center;
  padding:24px;
  opacity:0;
  transition:opacity .3s ease;
  font-family:'Work Sans', system-ui, sans-serif;
}
.reload-team-modal[hidden]{ display:none !important }
.reload-team-modal.is-open{ opacity:1 }

.reload-team-modal-backdrop{
  position:absolute; inset:0;
  background:rgba(18,25,72,.72);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  cursor:pointer;
}

.reload-team-modal-shell{
  position:relative;
  width:min(960px, 100%);
  max-height:calc(100vh - 48px);
  background:var(--rt-cream);
  color:var(--rt-ink);
  border-radius:24px;
  overflow:hidden;
  box-shadow:0 40px 80px -30px rgba(0,0,0,.55);
  transform:translateY(24px) scale(.98);
  transition:transform .35s cubic-bezier(.22,.61,.36,1);
  display:flex;
}
.reload-team-modal.is-open .reload-team-modal-shell{
  transform:none;
}

.reload-team-modal-close{
  position:absolute; top:14px; right:14px;
  z-index:3;
  width:40px; height:40px;
  background:rgba(46,64,91,.08); color:var(--rt-ink);
  border:0; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  cursor:pointer;
  transition:background-color .2s ease, transform .2s ease;
}
.reload-team-modal-close:hover{
  background:var(--rt-melon); color:var(--rt-ink);
  transform:scale(1.05);
}
.reload-team-modal-close svg{ width:20px; height:20px }

.reload-team-modal-grid{
  display:grid;
  grid-template-columns:minmax(280px, 380px) 1fr;
  width:100%;
  min-height:0;
}

.reload-team-modal-photo{
  position:relative; background:var(--rt-mauve);
  overflow:hidden;
  min-height:100%;
}
.reload-team-modal-photo .reload-team-modal-img{
  width:100%; height:100%; object-fit:cover; display:block;
}

.reload-team-modal-body{
  padding:48px 48px 40px;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  display:flex; flex-direction:column; gap:20px;
}

.reload-team-modal-name{
  font-family:'Erstoria','Fraunces',serif;
  font-weight:400;
  font-size:clamp(28px, 3.6vw, 44px);
  line-height:1.05;
  letter-spacing:-.02em;
  color:var(--rt-ink);
  margin:0;
}
.reload-team-modal-role{
  font-size:15px; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(46,64,91,.6);
  margin:0 0 8px;
}

.reload-team-modal-section{ margin-top:6px }
.reload-team-modal-section-title{
  font-family:'Erstoria','Fraunces',serif;
  font-weight:400;
  font-size:20px;
  line-height:1.2;
  letter-spacing:-.01em;
  color:var(--rt-melon);
  margin:0 0 10px;
  padding-top:14px;
  border-top:1px solid rgba(46,64,91,.14);
}
.reload-team-modal-section-body{
  font-size:15px;
  line-height:1.6;
  color:rgba(46,64,91,.9);
}
.reload-team-modal-section-body p{ margin:0 0 12px }
.reload-team-modal-section-body p:last-child{ margin-bottom:0 }
.reload-team-modal-section-body a{ color:var(--rt-melon) }

.reload-team-modal-linkedin{
  display:inline-flex; align-items:center; gap:10px;
  align-self:flex-start;
  padding:12px 22px;
  border-radius:999px;
  background:var(--rt-ink);
  color:var(--rt-cream);
  text-decoration:none;
  font-weight:500;
  font-size:14px;
  margin-top:12px;
  transition:transform .25s ease, background-color .25s ease, color .25s ease;
}
.reload-team-modal-linkedin:hover{
  background:var(--rt-melon);
  color:var(--rt-ink);
  transform:translateY(-1px);
}
.reload-team-modal-linkedin svg{ width:18px; height:18px }

/* Lock scrolling on body when modal is open */
body.reload-team-modal-open{
  overflow:hidden !important;
}

@media (max-width: 720px){
  .reload-team-modal{ padding:0 }
  .reload-team-modal-shell{
    max-height:100vh; border-radius:0; width:100%;
    flex-direction:column;
  }
  .reload-team-modal-grid{ grid-template-columns:1fr }
  .reload-team-modal-photo{
    aspect-ratio: 4 / 3;
    min-height:0;
  }
  .reload-team-modal-body{ padding:32px 24px 40px }
}

@media (prefers-reduced-motion: reduce){
  .reload-team-modal, .reload-team-modal-shell,
  .reload-team-card{ transition:none }
}