/* 9 · Showcase — cover photo, round profile photo, work gallery */
.sx-t-showcase .sx-cover {
  height: 172px; overflow: hidden;
  background: linear-gradient(135deg, var(--c-primary), color-mix(in srgb, var(--c-accent) 65%, var(--c-primary)));
}
.sx-t-showcase .sx-cover img { width: 100%; height: 100%; object-fit: cover; }
.sx-t-showcase .sx-av {
  position: relative;
  width: 110px; height: 110px; margin: -56px 0 0 20px;
  border-radius: 50%; border: 4px solid var(--c-bg);
  box-shadow: 0 6px 16px -8px color-mix(in srgb, var(--c-text) 60%, transparent);
  background: var(--c-surface); color: var(--c-primary);
  font-size: 36px; font-weight: 700;
}
.sx-t-showcase .sx-id { padding: 12px 20px 0; }
.sx-t-showcase .sx-name { font-size: 25px; font-weight: 700; }
.sx-t-showcase .sx-role { margin-top: 4px; font-size: 13.5px; color: var(--c-muted); }
.sx-t-showcase .sx-body { padding: 18px 20px 8px; display: flex; flex-direction: column; gap: 16px; }
.sx-t-showcase .sx-act { background: var(--c-primary); color: var(--c-button-text); }
.sx-t-showcase .sx-gal-h { display: flex; justify-content: space-between; font-size: 13.5px; font-weight: 600; }
.sx-t-showcase .sx-gal-h span:last-child { font-weight: 400; color: var(--c-muted); }
.sx-t-showcase .sx-gal { display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: 96px 96px; gap: 7px; margin-top: -6px; }
.sx-t-showcase .sx-gal a, .sx-t-showcase .sx-gal-more a { display: block; overflow: hidden; border-radius: 12px; background: var(--c-surface); }
.sx-t-showcase .sx-gal img, .sx-t-showcase .sx-gal-more img { width: 100%; height: 100%; object-fit: cover; }
.sx-t-showcase .sx-gal a:first-child { grid-row: 1 / 3; }
.sx-t-showcase .sx-gal[data-count="1"] { grid-template-columns: 1fr; grid-template-rows: 210px; }
.sx-t-showcase .sx-gal[data-count="2"] { grid-template-columns: 1fr 1fr; grid-template-rows: 150px; }
.sx-t-showcase .sx-gal[data-count="1"] a:first-child, .sx-t-showcase .sx-gal[data-count="2"] a:first-child { grid-row: auto; }
.sx-t-showcase .sx-gal-more { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin-top: -8px; }
.sx-t-showcase .sx-gal-more a { aspect-ratio: 1; border-radius: 10px; }
.sx-t-showcase .sx-list { border-top: 1px solid var(--sx-line); }
.sx-t-showcase .sx-li { border-bottom: 1px solid var(--sx-line); }
.sx-t-showcase .sx-save { background: var(--c-accent); color: var(--c-on-accent, var(--c-text)); }
.sx-t-showcase .sx-soc a { background: var(--c-surface); }