/* projects-collaboration/module.css — Climate Solutions explorer. Prefix: .prj-
   Token-driven so all themes apply automatically. */

.prj-loading {
  display: flex; align-items: center; justify-content: center; gap: var(--space-2);
  padding: var(--space-8) var(--space-4);
  color: var(--app-text-secondary);
}

/* intro */
.prj-intro { margin-bottom: var(--space-4); }
.prj-title {
  font-size: var(--text-2xl, 1.6rem); font-weight: 700; line-height: var(--leading-tight, 1.2);
  color: var(--app-text-primary); margin: 0 0 var(--space-1);
}
.prj-title:focus-visible { outline: 2px solid var(--app-accent-primary); outline-offset: 4px; border-radius: var(--radius-sm); }
.prj-sub { color: var(--app-text-secondary); margin: 0 0 var(--space-2); }
.prj-source {
  display: inline-flex; align-items: center; gap: var(--space-1);
  color: var(--app-text-muted, var(--app-text-secondary)); font-size: var(--text-sm); margin: 0;
}
.prj-meta-icon { width: 1em; height: 1em; opacity: .8; }

/* toolbar */
.prj-toolbar {
  display: flex; gap: var(--space-3); align-items: center; flex-wrap: wrap;
  margin: var(--space-4) 0 var(--space-3);
}
.prj-search { position: relative; flex: 1 1 260px; display: flex; align-items: center; }
.prj-search-icon {
  position: absolute; left: var(--space-3); width: 1.05em; height: 1.05em;
  color: var(--app-text-muted, var(--app-text-secondary)); pointer-events: none;
}
.prj-search input {
  width: 100%; padding: var(--space-3) var(--space-3) var(--space-3) calc(var(--space-3) + 1.6em);
  background: var(--app-input-bg, var(--app-card-bg)); color: var(--app-text-primary);
  border: 1px solid var(--app-card-border); border-radius: var(--radius-full, 999px);
  font: inherit; font-size: var(--text-sm);
}
.prj-search input:focus-visible { outline: 2px solid var(--app-accent-primary); outline-offset: 1px; }

.prj-savedtoggle {
  display: inline-flex; align-items: center; gap: var(--space-1);
  padding: var(--space-2) var(--space-3); border-radius: var(--radius-full, 999px);
  border: 1px solid var(--app-card-border); background: var(--app-card-bg);
  color: var(--app-text-secondary); font: inherit; font-size: var(--text-sm); cursor: pointer;
  transition: color var(--dur-fast, 140ms), border-color var(--dur-fast, 140ms), background var(--dur-fast, 140ms);
}
.prj-savedtoggle:hover { border-color: var(--app-card-border-hover, var(--app-accent-primary)); }
.prj-savedtoggle--on { color: #f5c518; border-color: #f5c518; }
.prj-savedtoggle .prj-btn-icon { width: 1.05em; height: 1.05em; }
.prj-savedcount {
  min-width: 1.4em; padding: 0 .35em; text-align: center; border-radius: var(--radius-full, 999px);
  background: var(--app-overlay-medium, rgba(127,127,127,.18)); font-size: var(--text-xs); font-weight: 700;
}

/* sector chips */
.prj-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-3); }
.prj-chip {
  padding: var(--space-1) var(--space-3); border-radius: var(--radius-full, 999px);
  border: 1px solid var(--app-card-border); background: transparent;
  color: var(--app-text-secondary); font: inherit; font-size: var(--text-sm); cursor: pointer;
  transition: color var(--dur-fast, 140ms), border-color var(--dur-fast, 140ms), background var(--dur-fast, 140ms);
}
.prj-chip:hover { border-color: var(--app-accent-primary); color: var(--app-text-primary); }
.prj-chip--on {
  background: var(--app-accent-primary); border-color: var(--app-accent-primary);
  color: var(--app-accent-contrast, #fff); font-weight: 600;
}

.prj-resultline { color: var(--app-text-muted, var(--app-text-secondary)); font-size: var(--text-sm); margin: 0 0 var(--space-3); }

/* grid */
.prj-grid {
  display: grid; gap: var(--space-4);
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

/* solution card */
.prj-card { display: flex; flex-direction: column; gap: 0; padding: 0; overflow: hidden; }
.prj-card-media {
  position: relative; aspect-ratio: 16 / 9; background: var(--app-overlay-medium, rgba(127,127,127,.12));
}
.prj-card-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.prj-card--noimg .prj-card-media { aspect-ratio: auto; min-height: var(--space-8); background: transparent; }

.prj-save {
  position: absolute; top: var(--space-2); right: var(--space-2);
  display: inline-flex; padding: var(--space-1); border: none; cursor: pointer;
  background: var(--app-overlay-strong, rgba(0,0,0,.45)); color: #fff;
  border-radius: var(--radius-full, 999px);
  transition: color var(--dur-fast, 140ms), transform var(--dur-fast, 140ms);
}
.prj-save:hover { color: #f5c518; transform: scale(1.12); }
.prj-save:focus-visible { outline: 2px solid var(--app-accent-primary); outline-offset: 2px; }
.prj-save-icon { width: 1.2em; height: 1.2em; }
.prj-save--on { color: #f5c518; }
.prj-save--on .prj-save-icon { fill: currentColor; }
.prj-card--noimg .prj-save {
  background: transparent; color: var(--app-text-muted, var(--app-text-secondary));
}
.prj-card--noimg .prj-save--on { color: #f5c518; }

.prj-card-body { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4); flex: 1; }
.prj-card-title {
  font-size: var(--text-md, 1.05rem); font-weight: 700; color: var(--app-text-primary);
  margin: 0; line-height: var(--leading-tight, 1.25);
}
.prj-card-org { color: var(--app-text-secondary); font-size: var(--text-sm); margin: 0; }
.prj-card-desc {
  color: var(--app-text-secondary); font-size: var(--text-sm);
  line-height: var(--leading-body, 1.55); margin: 0;
}

.prj-sectors { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.prj-sector {
  display: inline-flex; align-items: center; padding: 2px var(--space-2);
  border-radius: var(--radius-sm); font-size: var(--text-xs); font-weight: 600;
  color: var(--app-accent-primary);
  background: var(--app-overlay-medium, rgba(127,127,127,.16));
}

.prj-tags { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.prj-tag {
  display: inline-flex; align-items: center; padding: 2px var(--space-2);
  border-radius: var(--radius-full, 999px); border: 1px solid var(--app-card-border);
  font-size: var(--text-xs); color: var(--app-text-muted, var(--app-text-secondary));
}

.prj-card-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: auto; padding-top: var(--space-2); }
.prj-btn-icon { width: 1.05em; height: 1.05em; }

/* load more (live mode pagination) */
.prj-more { display: flex; justify-content: center; margin-top: var(--space-5); }
.prj-more .btn { min-width: 12rem; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); }
.prj-more .btn[disabled] { opacity: .65; cursor: progress; }
.prj-more .prj-btn-icon { width: 1.05em; height: 1.05em; }

/* empty */
.prj-empty {
  display: flex; flex-direction: column; align-items: center; gap: var(--space-2);
  padding: var(--space-8) var(--space-4); color: var(--app-text-secondary); text-align: center;
  grid-column: 1 / -1;
}
.prj-empty-icon { width: 2rem; height: 2rem; opacity: .6; }

@media (max-width: 560px) {
  .prj-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .prj-save, .prj-chip, .prj-savedtoggle { transition: none; }
}