/* Studio Profile V2 -- «Tattoo artists in {city}» on a directory card
 * INK-STUDIOS-DIRECTORY-CLEANUP B5 (2026-10-30). Mobile first (390 px), dark-theme tokens only.
 */
.sp-la-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-portfolio-gap); }
.sp-la-card { display: flex; flex-direction: column; min-width: 0; background: var(--color-bg-card); border-radius: var(--radius-md, 8px); overflow: hidden; color: var(--color-text); text-decoration: none; }
.sp-la-card__work { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; background: var(--color-bg-card); }
.sp-la-card__work--mono, .sp-la-card__avatar--mono { display: flex; align-items: center; justify-content: center; background: var(--color-accent, var(--color-text-muted)); color: var(--color-bg, #000); font-family: var(--font-ui); font-weight: 700; }
.sp-la-card__work--mono { font-size: var(--text-2xl, 1.5rem); }
.sp-la-card__meta { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2); min-width: 0; }
.sp-la-card__avatar { flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%; object-fit: cover; font-size: var(--text-xs, 0.75rem); }
.sp-la-card__text { display: flex; flex-direction: column; min-width: 0; }
.sp-la-card__name, .sp-la-card__styles { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-la-card__name { font-size: var(--text-sm, 0.875rem); font-weight: 600; }
.sp-la-card__styles { font-size: var(--text-xs, 0.75rem); color: var(--color-text-muted); }
.sp-la-styles { margin-top: var(--space-6); }
.sp-la-styles__title { font-size: var(--text-base); margin: 0 0 var(--space-2); }
.sp-la-styles__list { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.sp-la-styles__item { padding: var(--space-1, 4px) var(--space-3, 12px); border: 1px solid var(--color-border, var(--color-text-muted)); border-radius: 999px; font-size: var(--text-sm, 0.875rem); }
.sp-la-link { display: inline-block; margin-top: var(--space-6); color: var(--color-accent, var(--color-text)); }
@media (min-width: 768px) {
    .sp-la-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-portfolio-gap-md); }
}