/* ============================================================
   Equitable Futures — projects.css
   Project archive + single (loaded only on those pages)
   ============================================================ */

/* ── Archive list: two cards per row when they fit, one when they don't ── */
.project-list {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(min(400px, 100%), 1fr));
}

/* Status tabs */
.project-tabs { display: flex; flex-direction: column; gap: 20px; }
.project-tablist {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  border-bottom: 1px solid var(--c-border);
}
.project-tab {
  padding: 10px 18px;
  font-weight: 700;
  font-size: 14px;
  color: var(--c-text-2);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.project-tab:hover { color: var(--c-text); }
.project-tab.is-active { color: var(--c-accent-dark); border-bottom-color: var(--c-accent); }
.js .project-tab-panel { display: none; }
.js .project-tab-panel.is-active { display: block; }

/* ── Archive card ── */
.project-card {
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.project-card-cover { display: block; }
.project-card-cover img { display: block; width: 100%; height: auto; }

.project-card-head {
  padding: 18px 22px 16px;
  background: #FDF0E8;
  border-bottom: 1px solid #F3D9C8;
}
.project-card-title { font-weight: 700; font-size: 19px; line-height: 1.25; }
.project-card-title a { color: var(--c-text); text-decoration: none; }
.project-card-title a:hover { color: var(--c-accent-dark); }

.project-card-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--c-text-2);
}
.project-card-dot { flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--c-accent); }
.project-card-dot.is-active { background: var(--c-green); }
.project-card-dot.is-ended { background: var(--c-accent); }

.project-card-cost { margin-top: 6px; font-weight: 700; font-size: 15px; color: var(--c-text); }

.project-card-body { display: flex; flex-direction: column; gap: 14px; padding: 16px 22px 20px; }

.project-card-goal-label {
  display: block;
  margin-bottom: 6px;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-green);
}
.project-card-goal-text { font-size: 14px; line-height: 1.55; color: var(--c-text-2); }
.project-card-goal-text > * + * { margin-top: 10px; }
.project-card-goal-text a { color: var(--c-green); text-decoration: underline; text-underline-offset: 2px; }

.project-card-tags { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin-top: 2px; }
.project-card-tags li {
  padding: 4px 11px;
  background: #EEF5EA;
  border: 1px solid #D6E6CF;
  border-radius: 99px;
  font-size: 12.5px;
  color: var(--c-green);
}

/* Full-width card (one per row): slightly larger type */
@container (min-width: 560px) {
  .project-card-head { padding: 20px 24px 18px; }
  .project-card-body { padding: 18px 24px 22px; }
  .project-card-title { font-size: 22px; }
  .project-card-meta { font-size: 14px; }
  .project-card-goal-text { font-size: 15px; }
}

/* ── Single ── */
.project {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.project-header { padding: 32px 40px; }
.project-title {
  font-family: var(--f-head);
  font-weight: 700;
  font-size: 32px;
  line-height: 1.25;
  color: var(--c-text);
}

.project-tags { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; }
.project-tags li {
  padding: 4px 11px;
  background: #EEF5EA;
  border: 1px solid #D6E6CF;
  border-radius: 99px;
  font-size: 13.5px;
  color: var(--c-green);
}

/* Header meta: period (with status dot) + tags on one row */
.project-eyebrow {
  margin-bottom: 6px;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-accent-dark);
}
.project-header-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin-top: 16px;
}
.project-period { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--c-text-2); }
.project-dot { flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--c-accent); }
.project-dot.is-active { background: var(--c-green); }
.project-dot.is-ended { background: var(--c-accent); }

/* Stats bar: columns separated by soft vertical lines */
.project-stats { display: flex; flex-wrap: wrap; padding: 20px 24px; }
.project-stat {
  flex: 1 1 120px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0 20px;
  border-left: 1px solid var(--c-border);
}
.project-stat:first-child { border-left: 0; padding-left: 0; }
.project-stat-label {
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-text-3);
}
.project-stat-value { font-size: 16px; font-weight: 700; line-height: 1.3; color: var(--c-text); }

/* Goal / Outcome / Related news blocks */
.project-block { padding: 32px 40px; }
.project-block-title {
  margin-bottom: 14px;
  font-family: var(--f-head);
  font-weight: 700;
  font-size: 24px;
  line-height: 1.3;
  color: var(--c-text);
}
.project-block-title::after {
  content: '';
  display: block;
  width: 40px;
  height: 3px;
  margin-top: 12px;
  background: var(--c-accent);
  border-radius: 2px;
}

.project-text { font-size: 15px; line-height: 1.65; color: var(--c-text-2); }
.project-text > * + * { margin-top: 12px; }
.project-text a { color: var(--c-green); text-decoration: underline; text-underline-offset: 2px; }
.project-text ul, .project-text ol { padding-left: 1.3em; }
.project-text ul { list-style: disc; }
.project-text ol { list-style: decimal; }

.project-news { padding: 28px 40px 32px; }
.project-news-list { list-style: none; }
.project-news-list li + li { margin-top: 8px; }
.project-news-list a { color: var(--c-green); text-decoration: underline; text-underline-offset: 2px; }
.project-news-list a:hover { text-decoration-thickness: 2px; }

/* Gallery slider */
.project-gallery-slider { position: relative; overflow: hidden; }
.project-gallery-track { display: flex; flex-direction: column; width: 100%; }
.js .project-gallery-track { flex-direction: row; transition: transform 0.4s ease; }
.project-gallery-slide {
  flex: 0 0 100%;
  min-width: 0;
  margin: 0;
  height: 420px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.project-gallery-slide img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  border: 1px solid var(--c-border);
  border-radius: 6px;
}
.project-gallery-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--c-border);
  border-radius: 50%;
  background: var(--c-surface);
  color: var(--c-text);
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.project-gallery-arrow:hover { background: #F2F7F0; border-color: var(--c-green); color: var(--c-green); }
.project-gallery-arrow--prev { left: 12px; }
.project-gallery-arrow--next { right: 12px; }
.project-gallery-controls { display: flex; justify-content: center; padding: 12px 0 0; }
.project-gallery-dots { display: flex; gap: 4px; }
.project-gallery-dot { padding: 7px; background: none; border: 0; cursor: pointer; }
.project-gallery-dot::before {
  content: '';
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 5px;
  background: var(--c-border);
  transition: width 0.25s, background 0.25s;
}
.project-gallery-dot[aria-current="true"]::before { width: 28px; background: var(--c-accent); }

/* ── Responsive ── */
@media (max-width: 900px) {
  .project-header { padding: 24px 20px; }
  .project-block { padding: 24px 20px; }
  .project-news { padding: 22px 20px 26px; }
  .project-title { font-size: 26px; }
  .project-block-title { font-size: 22px; }
  .project-gallery-slide { height: 260px; }
}

@media (max-width: 600px) {
  .project-stats { padding: 16px 20px; }
  .project-stat { flex: 1 1 50%; padding: 10px 12px; border-left: 0; }
  .project-stat:nth-child(even) { border-left: 1px solid var(--c-border); }
}