/**
 * campaign.css – Shared P2P + ECF campaign card (redesign 2026).
 * Mockup reference: ui-ux-redesign-2026/mockups/campaign-card.html.
 * One card component used on the home index previews and on the
 * /p2pcampaign + /ecfcampaign listing pages. Uses --c-* tokens
 * (tokens.css), so dark mode is automatic. Imported globally via Style.java.
 */

/* ---- Section wrapper ---- */
.alx-camp-wrap {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--sp-xl) var(--sp-lg);
}

/* ---- Grid ---- */
.alx-camp-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-xl);
  list-style: none;
  margin: 0;
  padding: 0;
}

/* ---- Card ---- */
.alx-camp-card {
  background: var(--c-card);
  border: 1px solid var(--c-line);
  border-radius: var(--r-card);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow);
  transition: transform .18s, box-shadow .18s, border-color .18s;
}
.alx-camp-card:hover {
  transform: translateY(-3px);
  border-color: var(--c-blue);
  box-shadow: var(--shadow-hover);
}
.alx-camp-card[data-funded="true"] { opacity: .72; }

/* ---- Cover + status badge ---- */
.alx-camp-cover {
  aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, var(--c-card-2), var(--c-bg-muted));
  position: relative;
  overflow: hidden;
  display: block;
}
.alx-camp-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.alx-camp-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: .72rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: var(--r-pill);
}
.alx-camp-badge--open {
  background: var(--c-pos-bg);
  color: var(--c-success-text);
  border: 1px solid var(--c-success);
}
.alx-camp-badge--closed {
  background: var(--c-chip);
  color: var(--c-muted);
  border: 1px solid var(--c-line);
}

/* ---- Body ---- */
.alx-camp-body {
  padding: var(--sp-lg);
  display: flex;
  flex-direction: column;
  gap: var(--sp-md);
  flex: 1;
  text-align: left;
}
.alx-camp-tag {
  display: inline-block;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--c-blue);
  background: var(--c-active);
  padding: 3px 10px;
  border-radius: var(--r-pill);
}
.alx-camp-tag--ecf { color: var(--c-success-text); background: var(--c-pos-bg); }
.alx-camp-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.2rem;
  line-height: 1.25;
  color: var(--c-text);
  margin: 8px 0 0;
}
.alx-camp-desc {
  color: var(--c-body);
  font-size: .9rem;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.alx-camp-daysleft { color: var(--c-muted); font-size: .78rem; margin: 0; }

/* ---- Progress ---- */
.alx-camp-progress {
  background: var(--c-bg-muted);
  border: 1px solid var(--c-line);
  border-radius: var(--r-pill);
  height: 10px;
  overflow: hidden;
}
.alx-camp-progress > span {
  display: block;
  height: 100%;
  max-width: 100%;
  background: linear-gradient(90deg, var(--c-success), var(--c-green-alt));
}
.alx-camp-progress-meta {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: .8rem;
  color: var(--c-muted);
  margin-top: 6px;
}
.alx-camp-progress-meta b { color: var(--c-text); }

/* ---- Stat chips (2x2) ---- */
.alx-camp-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-xs);
}
.alx-camp-stat {
  background: var(--c-bg-muted);
  border: 1px solid var(--c-line);
  border-radius: var(--r-chip);
  padding: 10px 12px;
}
.alx-camp-stat .k {
  font-size: .72rem;
  color: var(--c-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.alx-camp-stat .v { font-size: 1.02rem; font-weight: 800; color: var(--c-text); }
.alx-camp-stat .v small { font-weight: 600; color: var(--c-muted); font-size: .78rem; }

/* ---- CTA ---- */
.alx-camp-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: auto;
  border-radius: var(--r-pill);
  padding: 12px 22px;
  font-family: var(--font-button);
  font-weight: 700;
  font-size: .92rem;
  text-decoration: none;
  background: var(--c-green);
  color: var(--c-btn-text);
  transition: .15s;
}
.alx-camp-cta:hover { background: var(--c-green-hover); color: #fff; }
.alx-camp-cta--closed {
  background: var(--c-chip);
  color: var(--c-muted);
}
.alx-camp-cta--closed:hover { background: var(--c-chip); color: var(--c-text); }

/* ---- Responsive ---- */
@media (max-width: 980px) { .alx-camp-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .alx-camp-grid { grid-template-columns: 1fr; } }

/* ---- Listing page header (P2P / ECF) ---- */
.alx-camp-wrap .alx-eyebrow {
  color: var(--c-blue);
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: .8rem;
  margin-bottom: var(--sp-xs);
}
.alx-camp-h1 {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  font-weight: 700;
  color: var(--c-text);
  line-height: 1.15;
  margin: 0 0 var(--sp-md);
}
.alx-camp-intro { color: var(--c-muted); margin-bottom: var(--sp-lg); }
.alx-camp-intro:empty { display: none; }

/* ---- Filter / sort toolbar (client-side, listing pages) ---- */
.alx-camp-toolbar {
  display: flex;
  gap: var(--sp-sm);
  flex-wrap: wrap;
  align-items: center;
  background: var(--c-card);
  border: 1px solid var(--c-line);
  border-radius: var(--r-card);
  padding: var(--sp-sm) var(--sp-md);
  margin-bottom: var(--sp-lg);
}
.alx-camp-toolbar select,
.alx-camp-toolbar input {
  background: var(--c-bg-muted);
  color: var(--c-text);
  border: 1px solid var(--c-line);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: .9rem;
  font-family: var(--font-body);
}
.alx-camp-toolbar input:focus,
.alx-camp-toolbar select:focus { outline: none; border-color: var(--c-blue); box-shadow: var(--focus-ring); }
.alx-camp-count { margin-left: auto; color: var(--c-muted); font-size: .85rem; }
.alx-seg { display: inline-flex; border: 1px solid var(--c-line); border-radius: var(--r-pill); overflow: hidden; }
.alx-seg button {
  background: transparent;
  color: var(--c-muted);
  border: none;
  padding: 8px 16px;
  cursor: pointer;
  font-weight: 600;
  font-family: var(--font-button);
}
.alx-seg button.is-active { background: var(--c-blue); color: #fff; }

/* Keep the search box on the same row as the segment + sort controls */
.alx-camp-toolbar input[type="search"] { flex: 1 1 200px; min-width: 140px; }

/* Segment buttons match the toolbar's other controls (radius + size + height) */
.alx-camp-toolbar .alx-seg { border-radius: 8px; align-self: stretch; }
.alx-camp-toolbar .alx-seg button {
  font-size: .9rem;
  line-height: 1.2;
  display: inline-flex;
  align-items: center;
}