/* Source: 3.5 Все проекты (21.09.26).
   Every project a performer has shown, on a page of its own. */

.brigade-projects-page-shell { font-size: 16px; color: var(--foreground); }

.brigade-projects-page-shell a { color: inherit; text-decoration: none; }

.brigade-projects-page-shell a:hover { color: var(--primary-hover); }

.brigade-projects-page-shell .crumb { display: flex; align-items: center; gap: 8px; font-size: var(--text-xs); padding: 18px 0 14px; flex-wrap: wrap; }

.brigade-projects-page-shell .crumb i, .brigade-projects-page-shell .crumb svg { width: 13px; height: 13px; }

.pj-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 20px; }

.pj-head h1 { margin: 0; }

.pj-sub { font-size: 15px; margin-top: 7px; }

.pj-back { height: 40px; padding: 0 16px; font-size: 14.5px; font-weight: 600; }

.pj-back i, .pj-back svg { width: 16px; height: 16px; }

.pj-filters { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; }

/* The year chips. Pressed is carried by fill rather than border alone: they sit on the page's
   own background, where a border change is easy to miss. */
.pj-chip { height: 36px; padding: 0 15px; border-radius: 999px; font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }

.pj-chip[data-active="true"] { background: #111; border-color: #111; color: #fff; }

.pj-chip[data-active="true"]:hover { background: #111; color: #fff; }

.pj-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; padding-bottom: 80px; }

@media (max-width: 1024px){ .pj-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

@media (max-width: 640px){ .pj-grid { grid-template-columns: minmax(0, 1fr); } }

.pj-card { overflow: hidden; display: flex; flex-direction: column; }

.pj-img { position: relative; height: 190px; background: var(--muted); display: grid; place-items: center; color: oklch(0.78 0 0); }

.pj-img i, .pj-img svg { width: 34px; height: 34px; }

.pj-badge { position: absolute; top: 12px; left: 12px; display: inline-flex; align-items: center; background: var(--primary); color: var(--primary-foreground); font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px; }

.pj-photos { position: absolute; bottom: 10px; left: 12px; background: rgba(0,0,0,.42); color: #fff; font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 999px; font-variant-numeric: tabular-nums; }

.pj-place { position: absolute; bottom: 10px; right: 12px; background: rgba(0,0,0,.42); color: #fff; font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 999px; }

/* `min-width: 0` so a long title wraps inside its column instead of widening the grid track. */
.pj-body { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px 16px; flex: 1; min-width: 0; }

.pj-title { font-size: 16.5px; font-weight: 700; letter-spacing: -0.01em; overflow-wrap: anywhere; }

.pj-work { font-size: 14px; overflow-wrap: anywhere; }

/* `margin-top: auto` pins the facts to the bottom, so cards of different text length still line
   their last row up with each other. */
.pj-facts { font-size: 13.5px; font-weight: 600; font-variant-numeric: tabular-nums; margin-top: auto; padding-top: 8px; }

.pj-source { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; }

.pj-source i, .pj-source svg { width: 18px; height: 18px; color: var(--primary-hover); flex: none; }

.profile-empty { display: flex; align-items: flex-start; gap: 14px; padding: 18px; border: 1px dashed var(--border); border-radius: 14px; background: color-mix(in oklch, var(--muted) 72%, var(--card)); margin-bottom: 80px; }

.profile-empty-icon { display: grid; width: 46px; height: 46px; flex: none; place-items: center; border-radius: 12px; background: var(--card); color: var(--muted-foreground); box-shadow: var(--shadow-xs); }

.profile-empty-icon i, .profile-empty-icon svg { width: 22px; height: 22px; }

.profile-empty-title { font-size: 16px; font-weight: 700; line-height: 1.25; }

.profile-empty p { max-width: 520px; margin: 4px 0 0; font-size: 14px; line-height: 1.45; }