/* ════════════════════════════════════════════════════════════
   SLIDE 7 — OUR USERS (personas)
   Displayed slide #7, data-index 6. Scoped entirely by class
   (.usr-*) — NOT by [data-index] — so it survives future slide
   renumbering. Header reuses the shared .s4-header (pill + title),
   so the pill is lifted by initDeckPillSlots() with no JS change.
   B1 layout: borderless columns, each avatar floats on a soft
   radial "spotlight"; the animated WebP is masked at the bottom
   to fade the watermark residue and ground the figure.
═══════════════════════════════════════════════════════════════ */

.usr-layout{
  width:100%;
  height:100%;
  box-sizing:border-box;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start; /* top-anchored under the pill — deck standard (matches slide 6 .hiw-layout, TASK-R06); was center, which floated the title to mid-slide */
  gap:clamp(20px,4vh,56px);
  /* top clears the lifted pill; left clears the 72px sidenav rail */
  padding:var(--pill-reserve) clamp(24px,4vw,64px) clamp(20px,3vh,40px) 80px;
}

/* a touch more space below the title before the persona grid (scoped to slide 7) */
.usr-layout .deck-slide-title{ margin-bottom:clamp(10px,2.4vh,27px); } /* +70% 2026-06-01 */

/* 4 columns; rows = name / avatar / caption. Each card is a SUBGRID
   spanning those 3 rows, so the three bands line up across all four
   columns regardless of how many lines each caption wraps to. */
.usr-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  grid-template-rows:auto auto auto;
  gap:clamp(8px,1.3vh,16px) clamp(12px,1.8vw,30px);
  width:100%;
  max-width:min(1280px,100%);
}

.usr-card{
  display:grid;
  grid-row:1 / -1;
  grid-template-rows:subgrid;
  text-align:center;
  min-width:0;
}

.usr-card__name{
  align-self:end;
  font-size:clamp(17px,1.5vw,23px);
  font-weight:700;
  letter-spacing:-0.01em;
  color:var(--text);
  line-height:1.1;
}

/* avatar stage — sized by height so it never couples to column width */
.usr-card__avatar{
  position:relative;
  align-self:end;
  width:100%;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  margin:clamp(12px,2.1vh,27px) 0; /* breathing room above (from the name) and below (from the caption) — +50% 2026-06-01 */
}

/* soft cool-blue spotlight pooled behind/under the figure (B1) */
.usr-card__avatar::before{
  content:"";
  position:absolute;
  left:50%;
  bottom:3%;
  transform:translateX(-50%);
  width:90%;
  height:70%;
  border-radius:50%;
  background:radial-gradient(50% 50% at 50% 62%,
    rgba(75,139,255,0.30),
    rgba(75,139,255,0.12) 55%,
    transparent 73%);
  filter:blur(7px);
  z-index:0;
  pointer-events:none;
}

.usr-card__avatar img{
  position:relative;
  z-index:1;
  height:clamp(208px,38vh,384px);
  width:auto;
  max-width:100%;
  object-fit:contain;
  /* fade the bottom edge: hides the faint METAPERSON watermark
     residue near the feet + grounds the floating figure */
  -webkit-mask-image:linear-gradient(to bottom,#000 78%,transparent 99%);
          mask-image:linear-gradient(to bottom,#000 78%,transparent 99%);
}

.usr-card__text{
  align-self:start;
  justify-self:center;
  margin:0;
  font-size:clamp(13px,0.95vw,16px);
  line-height:1.42;
  color:var(--text-dim);
  max-width:30ch;
}

/* ── Mobile (body.deck-mobile, ≤1023px coarse) ──────────────────
   4 columns reflow to a 2×2 grid. Subgrid is dropped here (cards go
   back to flex) since the 2×2 has its own row structure; avatars
   shrink so all four personas fit without internal scroll
   (.slide is overflow:hidden). */
body.deck-mobile .usr-layout{
  padding:var(--pill-reserve) 16px 16px;
  gap:clamp(14px,2.4vh,26px);
  justify-content:center;
}
body.deck-mobile .usr-grid{
  grid-template-columns:repeat(2,1fr);
  grid-template-rows:none;
  gap:clamp(10px,3vw,20px) clamp(8px,4vw,18px);
  max-width:560px;
}
body.deck-mobile .usr-card{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  /* reset the desktop subgrid placement — otherwise grid-row:1/-1 collapses
     all four cards into row 1 of the 2-col grid and they overlap */
  grid-row:auto;
  grid-template-rows:initial;
}
/* the enlarged desktop margins (avatar +50%, title +70%) overflow the short 2×2;
   keep mobile at the prior values that fit without internal scroll */
body.deck-mobile .usr-card__avatar{ margin:clamp(8px,1.4vh,18px) 0; }
body.deck-mobile .usr-layout .deck-slide-title{ margin-bottom:clamp(6px,1.4vh,16px); }
body.deck-mobile .usr-card__name{
  font-size:clamp(15px,4vw,18px);
}
body.deck-mobile .usr-card__avatar img{
  height:clamp(124px,20vh,188px);
}
body.deck-mobile .usr-card__text{
  font-size:clamp(11.5px,3vw,13.5px);
  line-height:1.34;
  max-width:26ch;
}

/* tablet band (iPad Mini portrait and up) — give the avatars more room */
@media (min-width:600px){
  body.deck-mobile .usr-card__avatar img{
    height:clamp(180px,26vh,260px);
  }
  body.deck-mobile .usr-grid{ max-width:680px; }
}