/*--------------------------------------------------------------
# Cooperations
#
# Index page: a plain card grid -- no category filters, since a
# CooperationDetPage doesn't have a category field the way Facilities do.
# CooperationPage.get_context (see cooperation/models.py) already
# restricts the queryset to is_active=True, so every card on this page is
# a live partnership; the only thing left to signal per card is *when*
# it runs, via the duration badge on the image.
#
# Detail page: hero image, then partner + duration badges, then the
# intro copy -- the same "hero, meta row, copy" shape as the Facility
# detail page (see static/css/facility.css), reused here rather than
# reinvented so the two "About" sub-sections stay visually consistent.
--------------------------------------------------------------*/
.cooperation-directory,
.cooperation-detail {
  --coop-accent: var(--accent-color, #0d6efd);
  --coop-heading: var(--heading-color, #1b1f27);
  --coop-text-muted: var(--default-color, #5a6472);
  --coop-surface: var(--surface-color, #ffffff);
}

/*--------------------------------------------------------------
# Stats strip -- quick "how many active partnerships" summary above the
# grid, same pattern as .facility-stats.
--------------------------------------------------------------*/
.cooperation-stats {
  display: flex;
  justify-content: center;
  color: var(--coop-text-muted);
  font-weight: 600;
}

.cooperation-stats strong {
  color: var(--coop-heading);
  font-weight: 700;
}

/*--------------------------------------------------------------
# Card
--------------------------------------------------------------*/
.cooperation-card {
  --coop-card-radius: 1.25rem;
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--coop-surface);
  border: 1px solid color-mix(in srgb, var(--coop-heading), transparent 92%);
  border-radius: var(--coop-card-radius);
  overflow: hidden;
  box-shadow: 0 1px 2px color-mix(in srgb, var(--coop-heading), transparent 93%), 0 10px 25px color-mix(in srgb, var(--coop-heading), transparent 95%);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.cooperation-card:hover,
.cooperation-card:focus-within {
  transform: translateY(-4px);
  box-shadow: 0 1.25rem 2.5rem color-mix(in srgb, var(--coop-accent), transparent 85%);
}

@media (prefers-reduced-motion: reduce) {
  .cooperation-card {
    transition: none;
  }
  .cooperation-card:hover,
  .cooperation-card:focus-within {
    transform: none;
  }
}

.cooperation-card-media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: color-mix(in srgb, var(--coop-heading), transparent 95%);
}

.cooperation-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.35s ease;
}

.cooperation-card:hover .cooperation-card-img {
  transform: scale(1.06);
}

@media (prefers-reduced-motion: reduce) {
  .cooperation-card-img {
    transition: none;
  }
  .cooperation-card:hover .cooperation-card-img {
    transform: none;
  }
}

.cooperation-card-img--placeholder {
  color: color-mix(in srgb, var(--coop-heading), transparent 60%);
  font-size: 2.5rem;
}

.cooperation-zoom-link {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1.5rem;
  background: color-mix(in srgb, #000, transparent 55%);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.cooperation-card:hover .cooperation-zoom-link,
.cooperation-zoom-link:focus-visible {
  opacity: 1;
}

/* Base: a plain pill, for when the duration badge sits inline in a
   normal flex row -- .cooperation-meta on the detail page. Overlaying
   the image instead (.cooperation-card-media, the index grid) is the
   special case, handled below -- same split as .facility-category-badge. */
.cooperation-date-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: #fff;
  background: color-mix(in srgb, var(--coop-heading), transparent 25%);
}

.cooperation-card-media .cooperation-date-badge {
  position: absolute;
  top: 0.85rem;
  left: 0.85rem;
  box-shadow: 0 2px 6px color-mix(in srgb, #000, transparent 75%);
}

.cooperation-date-badge--inline {
  color: var(--coop-text-muted);
  background: color-mix(in srgb, var(--coop-heading), transparent 94%);
}

.cooperation-card-body {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  padding: 1.25rem 1.35rem 1.5rem;
}

.cooperation-card-title {
  font-size: 1.1rem;
  margin-bottom: 0.5rem;
}

.cooperation-card-title a {
  color: var(--coop-heading);
  text-decoration: none;
}

.cooperation-card-title a:hover {
  color: var(--coop-accent);
}

.cooperation-partner-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  align-self: flex-start;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--coop-accent);
  background: color-mix(in srgb, var(--coop-accent), transparent 90%);
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  margin-bottom: 0.75rem;
}

.cooperation-card-excerpt {
  color: var(--coop-text-muted);
  font-size: 0.92rem;
  line-height: 1.6;
  margin-bottom: 1rem;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.cooperation-card-link {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--coop-accent);
  text-decoration: none;
}

.cooperation-card-link i {
  transition: transform 0.15s ease;
}

.cooperation-card-link:hover i {
  transform: translateX(3px);
}

/*--------------------------------------------------------------
# Detail page
--------------------------------------------------------------*/
.cooperation-hero-img {
  width: 100%;
  max-height: 28rem;
  object-fit: cover;
  border-radius: 1.25rem;
  display: block;
}

.cooperation-hero-img--placeholder {
  height: 20rem;
  background: color-mix(in srgb, var(--coop-heading), transparent 95%);
  color: color-mix(in srgb, var(--coop-heading), transparent 60%);
  font-size: 3.5rem;
}

.cooperation-intro {
  font-size: 1.15rem;
  color: var(--coop-heading);
  font-weight: 500;
  line-height: 1.7;
}