/* ==========================================================================
   JobTetris - Team Profile Widget Styles (v2)
   ========================================================================== */

:root {
  --jt-color-avatar-bg:    oklch(88% 0.06 255);
  --jt-color-avatar-text:  oklch(38% 0.14 255);
}

/* ─── SHARED BASE ──────────────────────────────────────────────────────────── */
.jt-staff-layout {
  font-family: var(--jt-font);
  color: var(--jt-color-text);
  -webkit-font-smoothing: antialiased;
  width: 100%;
}
.jt-staff-layout *,
.jt-staff-layout *::before,
.jt-staff-layout *::after { box-sizing: border-box; }
.jt-staff-layout a   { color: inherit; text-decoration: none; }
.jt-staff-layout img { display: block; max-width: 100%; }

.jt-no-results {
  color: var(--jt-color-muted);
  font-size: 14px;
  padding: 32px;
  text-align: center;
}

/* ─── INITIALS AVATAR ──────────────────────────────────────────────────────── */
.jt-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--jt-color-avatar-bg);
  color: var(--jt-color-avatar-text);
  font-weight: 600;
  border-radius: 50%;
  flex-shrink: 0;
  letter-spacing: -0.5px;
  user-select: none;
  font-family: var(--jt-font);
}

/* ─── CONTACT ICONS ────────────────────────────────────────────────────────── */
.jt-contact-icons { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.jt-contact-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1.5px solid var(--jt-color-border);
  color: var(--jt-color-muted);
  transition: color var(--jt-transition), border-color var(--jt-transition), background var(--jt-transition);
  flex-shrink: 0;
}
.jt-contact-icon:hover {
  color: var(--jt-color-accent);
  border-color: var(--jt-color-accent);
  background: var(--jt-color-accent-soft);
}
.jt-contact-icon svg { width: 15px; height: 15px; }

/* ══════════════════════════════════════════════════════════════════════════════
   1. CARD GRID  (.jt-staff-card-grid)
   ══════════════════════════════════════════════════════════════════════════════ */
.jt-staff-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 180px), 1fr));
  gap: 14px;
}
.jt-scard {
  background: var(--jt-color-surface);
  border: 1.5px solid var(--jt-color-border);
  border-radius: var(--jt-radius-card);
  box-shadow: var(--jt-shadow-card);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: box-shadow var(--jt-transition), transform var(--jt-transition), border-color var(--jt-transition);
}
.jt-scard:hover { box-shadow: var(--jt-shadow-hover); transform: translateY(-2px); border-color: oklch(80% 0.06 255); }
.jt-scard-body { padding: 18px 16px 14px; flex: 1; display: flex; flex-direction: column; gap: 3px; }
.jt-scard-name  { font-size: 15px; font-weight: 600; letter-spacing: -0.15px; }
.jt-scard-role  { font-size: 12.5px; color: var(--jt-color-muted); }
.jt-scard-footer { display: flex; align-items: center; gap: 6px; padding: 10px 16px; border-top: 1px solid var(--jt-color-border); background: var(--jt-color-footer-bg); }

/* ══════════════════════════════════════════════════════════════════════════════
   2. CARD GRID - IMAGE TOP  (.jt-staff-card-grid-image-top)
   ══════════════════════════════════════════════════════════════════════════════ */
.jt-staff-card-grid-image-top {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
  gap: 18px;
}
.jt-scit-card {
  background: var(--jt-color-surface);
  border: 1.5px solid var(--jt-color-border);
  border-radius: var(--jt-radius-card);
  box-shadow: var(--jt-shadow-card);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: box-shadow var(--jt-transition), transform var(--jt-transition), border-color var(--jt-transition);
}
.jt-scit-card:hover { box-shadow: var(--jt-shadow-hover); transform: translateY(-2px); border-color: oklch(80% 0.06 255); }
.jt-scit-photo-wrap { width: 100%; aspect-ratio: 1/1; overflow: hidden; background: var(--jt-color-avatar-bg); display: flex; align-items: center; justify-content: center; }
.jt-scit-photo  { width: 100%; height: 100%; object-fit: cover; }
.jt-scit-avatar { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.jt-scit-body { padding: 16px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.jt-scit-name     { font-size: 15px; font-weight: 600; letter-spacing: -0.15px; }
.jt-scit-role     { font-size: 12.5px; color: var(--jt-color-accent); font-weight: 500; }
.jt-scit-bio      { font-size: 13px; color: var(--jt-color-muted); line-height: 1.55; margin-top: 2px; }
.jt-scit-contacts { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }

/* ══════════════════════════════════════════════════════════════════════════════
   3. CAROUSEL  (.jt-staff-carousel-wrap)
   ══════════════════════════════════════════════════════════════════════════════ */
.jt-staff-carousel-wrap { position: relative; display: flex; align-items: center; gap: 8px; }
.jt-carousel { flex: 1; overflow: hidden; min-width: 0; }
.jt-carousel-track { display: flex; gap: 16px; transition: transform 320ms cubic-bezier(0.4, 0, 0.2, 1); }
.jt-carousel-slide { flex: 0 0 calc(25% - 12px); min-width: 0; }
@media (max-width: 900px) { .jt-carousel-slide { flex: 0 0 calc(50% - 8px); } }
@media (max-width: 540px)  { .jt-carousel-slide { flex: 0 0 100%; } }

.jt-carousel-card {
  background: var(--jt-color-surface);
  border: 1.5px solid var(--jt-color-border);
  border-radius: var(--jt-radius-card);
  box-shadow: var(--jt-shadow-card);
  padding: 20px;
  display: flex; flex-direction: column; align-items: center;
  text-align: center; gap: 6px; height: 100%;
}
.jt-carousel-photo { width: 72px; height: 72px; border-radius: 50%; overflow: hidden; background: var(--jt-color-avatar-bg); display: flex; align-items: center; justify-content: center; margin-bottom: 4px; flex-shrink: 0; }
.jt-carousel-img      { width: 100%; height: 100%; object-fit: cover; }
.jt-carousel-name     { font-size: 15px; font-weight: 600; letter-spacing: -0.15px; }
.jt-carousel-role     { font-size: 12.5px; color: var(--jt-color-accent); font-weight: 500; }
.jt-carousel-bio      { font-size: 13px; color: var(--jt-color-muted); line-height: 1.55; }
.jt-carousel-contacts { display: flex; gap: 6px; margin-top: 8px; justify-content: center; flex-wrap: wrap; }

.jt-carousel-btn {
  flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%;
  border: 1.5px solid var(--jt-color-border); background: var(--jt-color-surface);
  color: var(--jt-color-muted); font-size: 20px;
  display: flex; align-items: center; justify-content: center;
  transition: color var(--jt-transition), border-color var(--jt-transition);
  box-shadow: var(--jt-shadow-card); line-height: 1; cursor: pointer;
  font-family: var(--jt-font);
}
.jt-carousel-btn:hover    { color: var(--jt-color-accent); border-color: var(--jt-color-accent); }
.jt-carousel-btn:disabled { opacity: .3; pointer-events: none; }

.jt-carousel-dots { display: flex; justify-content: center; gap: 6px; margin-top: 16px; }
.jt-carousel-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--jt-color-border);
  transition: background var(--jt-transition), transform var(--jt-transition);
  cursor: pointer; border: none; padding: 0;
}
.jt-carousel-dot.jt-dot-active { background: var(--jt-color-accent); transform: scale(1.3); }

/* ══════════════════════════════════════════════════════════════════════════════
   4. COMPACT LIST  (.jt-staff-compact-list)
   ══════════════════════════════════════════════════════════════════════════════ */
.jt-staff-compact-list { display: flex; flex-direction: column; gap: 6px; }
.jt-scl-item {
  background: var(--jt-color-surface);
  border: 1.5px solid var(--jt-color-border);
  border-radius: 10px; padding: 12px 16px;
  display: flex; align-items: center; gap: 12px;
  box-shadow: var(--jt-shadow-card);
  transition: box-shadow var(--jt-transition), transform var(--jt-transition), border-color var(--jt-transition);
}
.jt-scl-item:hover { box-shadow: var(--jt-shadow-hover); transform: translateX(2px); border-color: oklch(80% 0.06 255); }
.jt-scl-avatar { width: 36px; height: 36px; font-size: 13px; }
.jt-scl-info { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.jt-scl-name { font-size: 14px; font-weight: 600; letter-spacing: -0.1px; white-space: nowrap; }
.jt-scl-sep  { width: 3px; height: 3px; border-radius: 50%; background: var(--jt-color-border); flex-shrink: 0; align-self: center; }
.jt-scl-role { font-size: 12.5px; color: var(--jt-color-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jt-scl-contacts { display: flex; gap: 6px; flex-shrink: 0; }

/* ══════════════════════════════════════════════════════════════════════════════
   5. DETAILED CARD GRID  (.jt-staff-detailed-card-grid)
   ══════════════════════════════════════════════════════════════════════════════ */
.jt-staff-detailed-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
  gap: 20px;
}
.jt-sdcg-card {
  background: var(--jt-color-surface);
  border: 1.5px solid var(--jt-color-border);
  border-radius: var(--jt-radius-card);
  box-shadow: var(--jt-shadow-card);
  padding: 24px 20px 20px;
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px;
  transition: box-shadow var(--jt-transition), transform var(--jt-transition), border-color var(--jt-transition);
}
.jt-sdcg-card:hover { box-shadow: var(--jt-shadow-hover); transform: translateY(-2px); border-color: oklch(80% 0.06 255); }
.jt-sdcg-photo-wrap { width: 80px; height: 80px; border-radius: 50%; overflow: hidden; background: var(--jt-color-avatar-bg); display: flex; align-items: center; justify-content: center; margin-bottom: 8px; flex-shrink: 0; }
.jt-sdcg-photo    { width: 100%; height: 100%; object-fit: cover; }
.jt-sdcg-name     { font-size: 16px; font-weight: 600; letter-spacing: -0.2px; }
.jt-sdcg-role     { font-size: 12.5px; color: var(--jt-color-accent); font-weight: 500; }
.jt-sdcg-bio      { font-size: 13px; color: var(--jt-color-muted); line-height: 1.6; margin-top: 4px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.jt-sdcg-contacts { display: flex; gap: 6px; margin-top: 10px; justify-content: center; flex-wrap: wrap; }

/* ══════════════════════════════════════════════════════════════════════════════
   6. DETAILED LIST  (.jt-staff-detailed-list)
   ══════════════════════════════════════════════════════════════════════════════ */
.jt-staff-detailed-list { display: flex; flex-direction: column; gap: 12px; }
.jt-sdl-item {
  background: var(--jt-color-surface);
  border: 1.5px solid var(--jt-color-border);
  border-radius: var(--jt-radius-card);
  padding: 20px 24px;
  display: flex; align-items: flex-start; gap: 20px;
  box-shadow: var(--jt-shadow-card);
  transition: box-shadow var(--jt-transition), transform var(--jt-transition), border-color var(--jt-transition);
}
.jt-sdl-item:hover { box-shadow: var(--jt-shadow-hover); transform: translateX(3px); border-color: oklch(80% 0.06 255); }
.jt-sdl-photo  { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.jt-sdl-avatar { width: 64px; height: 64px; font-size: 22px; }
.jt-sdl-main   { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.jt-sdl-name     { font-size: 16px; font-weight: 600; letter-spacing: -0.2px; }
.jt-sdl-role     { font-size: 12.5px; color: var(--jt-color-accent); font-weight: 500; }
.jt-sdl-bio      { font-size: 13.5px; color: var(--jt-color-muted); line-height: 1.6; margin-top: 4px; }
.jt-sdl-contacts { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; }

/* ══════════════════════════════════════════════════════════════════════════════
   7. MASONRY GRID  (.jt-staff-masonry-grid)
   ══════════════════════════════════════════════════════════════════════════════ */
.jt-staff-masonry-grid { columns: 3; column-gap: 16px; container-type: inline-size; }
@container (max-width: 700px) { .jt-staff-masonry-grid { columns: 2; } }
@container (max-width: 420px) { .jt-staff-masonry-grid { columns: 1; } }
@media (max-width: 700px) { .jt-staff-masonry-grid { columns: 2; } }
@media (max-width: 420px) { .jt-staff-masonry-grid { columns: 1; } }

.jt-smg-item {
  background: var(--jt-color-surface);
  border: 1.5px solid var(--jt-color-border);
  border-radius: var(--jt-radius-card);
  padding: 20px;
  display: flex; flex-direction: column; gap: 6px;
  margin-bottom: 16px; break-inside: avoid;
  box-shadow: var(--jt-shadow-card);
  transition: box-shadow var(--jt-transition), transform var(--jt-transition), border-color var(--jt-transition);
}
.jt-smg-item:hover { box-shadow: var(--jt-shadow-hover); transform: translateY(-2px); border-color: oklch(80% 0.06 255); }
.jt-smg-photo-wrap { width: 60px; height: 60px; border-radius: 50%; overflow: hidden; background: var(--jt-color-avatar-bg); display: flex; align-items: center; justify-content: center; margin-bottom: 4px; }
.jt-smg-photo    { width: 100%; height: 100%; object-fit: cover; }
.jt-smg-name     { font-size: 15px; font-weight: 600; letter-spacing: -0.15px; }
.jt-smg-role     { font-size: 12.5px; color: var(--jt-color-accent); font-weight: 500; }
.jt-smg-bio      { font-size: 13px; color: var(--jt-color-muted); line-height: 1.6; }
.jt-smg-contacts { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; }