/* ==========================================================
   Speakers grid
   ========================================================== */
.sp-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:40px}

.sp{
  position:relative;display:flex;flex-direction:column;
  background:var(--bg);border:1px solid var(--line);border-radius:var(--r-lg);
  overflow:hidden;isolation:isolate;
  transition:transform .3s cubic-bezier(.2,.7,.3,1),border-color .3s ease,box-shadow .3s ease;
}
.sp:hover{transform:translateY(-6px);border-color:color-mix(in srgb,var(--teal) 50%,var(--line));box-shadow:0 30px 50px -34px rgba(8,30,38,.7)}

/* A teal line along the top edge, drawn in on hover */
.sp::before{content:"";position:absolute;inset-block-start:0;inset-inline:0;height:3px;background:linear-gradient(90deg,var(--teal),#7FD6D2);transform:scaleX(0);transform-origin:left;transition:transform .35s ease;z-index:2}
html[dir="rtl"] .sp::before{transform-origin:right}
.sp:hover::before{transform:scaleX(1)}

/* Photo */
.sp .ph{aspect-ratio:4/5;background:var(--surface-2);display:grid;place-items:center;color:var(--teal);position:relative;overflow:hidden}
.sp .ph::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(8,30,38,.28));opacity:0;transition:opacity .3s ease;pointer-events:none}
.sp:hover .ph::after{opacity:1}
.sp .ph img{width:100%;height:100%;object-fit:cover;filter:saturate(.94);transition:transform .6s cubic-bezier(.2,.7,.3,1),filter .3s ease}
.sp:hover .ph img{transform:scale(1.05);filter:saturate(1.04)}
.sp .ph svg{width:34%;opacity:.5}
.sp .ph em{position:absolute;z-index:1;inset-block-start:12px;inset-inline-start:12px;display:inline-flex;align-items:center;gap:6px;background:color-mix(in srgb,var(--bg) 85%,transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:var(--text);font-style:normal;font-size:11.5px;font-weight:700;letter-spacing:.02em;padding:5px 11px;border-radius:99px;border:1px solid var(--line)}
.sp .ph em::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--teal)}

/* Name and specialty, under the photo */
.sp-body{flex:1;display:flex;flex-direction:column;gap:5px;padding:17px 18px 19px;border-top:1px solid var(--line)}
.sp-body h3{font-size:17.5px;font-weight:700;line-height:1.28;letter-spacing:-0.01em}
.sp-body p{font-size:13.5px;line-height:1.5;color:var(--muted)}

/* Not announced yet: shaped placeholders, never pretend text */
.sp.is-soon{background:var(--surface);border-style:dashed}
.sp.is-soon .ph{background:radial-gradient(circle at 50% 42%,color-mix(in srgb,var(--teal) 10%,var(--surface-2)),var(--surface-2))}
.sp.is-soon .ph svg{width:30%;opacity:.28}
.sk-line{position:relative;height:13px;border-radius:99px;background:linear-gradient(90deg,var(--line),color-mix(in srgb,var(--line) 55%,transparent),var(--line));background-size:200% 100%;animation:skShift 2.6s ease-in-out infinite}
.sk-line.sk-short{width:62%;height:10px;margin-top:2px;opacity:.75}
@keyframes skShift{0%,100%{background-position:0% 0}50%{background-position:-100% 0}}
.sp.is-soon:hover{transform:none;box-shadow:none;border-color:var(--line)}
.sp.is-soon:hover::before{transform:scaleX(0)}
.sp.is-soon .sp-body{gap:12px;justify-content:center}

@media (max-width:1060px){
  .sp-grid{grid-template-columns:repeat(2,1fr);gap:20px}
}
@media (max-width:560px){
  .sp-grid{grid-template-columns:1fr 1fr;gap:14px}
  .sp-body{padding:13px 14px 15px;gap:6px}
  .sp-body h3{font-size:15.5px}
  .sp-body p{font-size:12.5px}
  .sp .ph em{font-size:10.5px;padding:4px 9px;inset-block-start:9px;inset-inline-start:9px}
}
@media (prefers-reduced-motion: reduce){
  .sk-line{animation:none}
  .sp,.sp .ph img,.sp::before{transition:none}
  .sp:hover{transform:none}
  .sp:hover .ph img{transform:none}
}