/* ========================================================
   CARDS — Consistent card system for all content types
   ======================================================== */

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition:
    box-shadow 0.25s ease,
    border-color 0.25s ease,
    transform 0.2s ease;
}
.card:hover {
  box-shadow: var(--shadow-xl);
  border-color: var(--primary-muted);
  transform: translateY(-3px);
}
.card-body {
  padding: var(--space-5);
  flex: 1;
  display: flex;
  flex-direction: column;
}
.card-title {
  font-size: var(--text-title);
  margin-bottom: var(--space-2);
}
.card-text {
  color: var(--muted);
  font-size: var(--text-small);
  line-height: 1.65;
  flex: 1;
  margin-bottom: 1.25rem;
}

/* Program Card */
.prog-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--r-md);
  background: var(--primary-subtle);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-h3);
  margin-bottom: 1.125rem;
  flex-shrink: 0;
}
.prog-meta {
  font-size: var(--text-xs);
  padding: 0.5rem 0.75rem;
  background: var(--bg-alt);
  border-radius: var(--r-sm);
  color: var(--fg-2);
  font-weight: 500;
  margin-bottom: 0.375rem;
  border: 1px solid var(--border);
}

/* Event Card */
.card.event-card {
  border-left: 3px solid var(--accent);
  position: relative;
  overflow: hidden;
}
.event-date {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--warning);
  background: var(--warning-subtle);
  padding: 0.25rem 0.625rem;
  border-radius: var(--r-full);
  margin-bottom: 0.875rem;
}
[data-theme="dark"] .event-date {
  color: var(--accent); /* Use accent for dark mode */
  background: var(--accent-subtle);
}

/* Event Card with Video Thumbnail Overlay */
.card-video-thumbnail {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.card-video-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.3);
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: auto;
}
.card-slideshow:hover .card-video-overlay,
.position-relative:hover .card-video-overlay {
  opacity: 1;
}
.card-video-play-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease;
  pointer-events: auto;
}
.card-video-play-btn:hover {
  transform: scale(1.1);
}
.card-video-play-btn svg {
  display: block;
}

/* Student Card */
.student-visual {
  height: 200px;
  background: linear-gradient(135deg, var(--primary), hsl(152, 50%, 42%));
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary-foreground);
  font-size: 4rem;
  font-weight: 800;
  position: relative;
}
.student-level {
  position: absolute;
  bottom: 0.75rem;
  left: 0.75rem;
  font-size: var(--text-2xs);
  font-weight: 700;
  padding: 0.2rem 0.6rem;
  background: var(--accent);
  color: var(--accent-foreground);
  border-radius: var(--r-full);
}
.student-dream {
  font-size: var(--text-small);
  font-weight: 600;
  color: var(--primary);
  margin-bottom: 0.625rem;
}
[data-theme="dark"] .student-dream {
  color: var(--accent);
}

/* Student Card Thumbnail (for listing pages) */
.student-card-thumbnail {
  position: relative;
  overflow: hidden;
  background: var(--surface-2);
  aspect-ratio: 4/3;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
  font-weight: 700;
  color: var(--primary);
  border-radius: var(--r-md);
}
.student-card-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.student-card-thumbnail .badge {
  position: absolute;
  bottom: 10px;
  left: 10px;
  font-size: var(--text-xs);
}

/* Student Detail Photo (portrait on the detail page) */
.student-photo {
  width: 100%;
  max-width: 320px;
  aspect-ratio: 1/1;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--surface-2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 4rem;
  font-weight: 700;
  color: var(--primary);
  margin: 0 auto 1rem;
}
.student-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Student detail card (softer hover than the browse cards) */
.student-detail-card {
  box-shadow: var(--shadow-md);
}

/* Sponsorship call-to-action panel */
.sponsorship-action-card {
  background: linear-gradient(
    135deg,
    var(--primary-subtle),
    var(--accent-subtle)
  );
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--space-5);
}
.sponsorship-action-card .btn {
  width: 100%;
}

/* Sponsorship Opportunities section (student sponsorship pages) */
.sponsorship-action-card {
  background: linear-gradient(
    135deg,
    var(--primary-subtle),
    var(--accent-subtle)
  );
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--space-5);
}
.sponsorship-action-card .btn {
  width: 100%;
}

.sponsorship-heading {
  font-size: clamp(1.25rem, 2.6vw, 1.6rem);
  font-weight: 700;
}
.sponsorship-subtext {
  line-height: 1.6;
  max-width: 640px;
}

/* Tier option cards — a hidden radio + a styled label (clickable). */
.sponsorship-tier-group {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-3);
  margin-bottom: 1.5rem;
}
.sponsorship-tier-option {
  /* Visually-hidden radio kept as a sibling so :checked + label works */
}
.sponsorship-tier-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.sponsorship-tier {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.125rem 1rem;
  background: var(--surface);
  border: 2px solid var(--border);
  border-radius: var(--r-md);
  cursor: pointer;
  transition:
    border-color 0.2s ease,
    transform 0.2s ease,
    box-shadow 0.2s ease,
    background 0.2s ease;
  text-align: left;
}
.sponsorship-tier:focus-within {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.sponsorship-tier:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}
/* Selected state */
.sponsorship-tier-input:checked + .sponsorship-tier {
  border-color: var(--accent);
  box-shadow: 0 4px 16px hsl(152 69% 31% / 0.18);
}
.sponsorship-tier-input:checked + .sponsorship-tier .sponsorship-tier-body {
  opacity: 1;
}
.sponsorship-tier-check {
  align-self: flex-start;
  width: 1.125rem;
  height: 1.125rem;
  flex-shrink: 0;
  margin-top: -0.125rem;
  border: 2px solid var(--border);
  border-radius: 50%;
  background: var(--surface-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(0.85);
  transition:
    opacity 0.18s ease,
    transform 0.18s ease,
    border-color 0.18s ease,
    background 0.18s ease;
}
.sponsorship-tier-input:checked + .sponsorship-tier .sponsorship-tier-check {
  opacity: 1;
  transform: scale(1);
  border-color: var(--accent);
  background: var(--accent);
  color: var(--accent-foreground);
}
.sponsorship-tier-input:checked
  + .sponsorship-tier
  .sponsorship-tier-check::after {
  content: "";
  display: block;
  width: 0.28rem;
  height: 0.5rem;
  border: solid currentColor;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) translate(1px, -1px);
}
.sponsorship-tier-amount {
  font-weight: 700;
  font-size: var(--text-small);
  padding: 0.25rem 0.625rem;
  border-radius: var(--r-sm);
  background: var(--accent-subtle);
  color: var(--accent);
  white-space: nowrap;
  align-self: flex-start;
}
.sponsorship-tier-body {
  min-width: 0;
  opacity: 0.9;
  transition: opacity 0.18s ease;
}
.sponsorship-tier-title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
}
.sponsorship-tier-desc {
  margin: 0;
  color: var(--muted);
  font-size: var(--text-small);
  line-height: 1.55;
}

/* Collapsible sponsorship dropdown (tiers hide inside the toggle button) */
.sponsorship-dropdown {
  border: none;
  margin: 0;
}
.sponsorship-toggle {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  user-select: none;
}
.sponsorship-toggle::-webkit-details-marker {
  display: none;
}
.sponsorship-toggle::marker {
  content: '';
}
.sponsorship-toggle-icon {
  display: inline-block;
  transition: transform 0.2s ease;
  font-size: 1.1em;
  line-height: 1;
}
.sponsorship-dropdown[open] .sponsorship-toggle-icon {
  transform: rotate(180deg);
}
.sponsorship-dropdown[open] .sponsorship-toggle {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.sponsorship-dropdown-panel {
  margin-top: var(--space-3);
  padding: var(--space-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: none;
  border-radius: 0 0 var(--r-md) var(--r-md);
  animation: sponsorship-drop 0.18s ease;
}
@keyframes sponsorship-drop {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .sponsorship-dropdown-panel { animation: none; }
}
/* Responsive: single column tiers on small screens */
@media (max-width: 640px) {
  .sponsorship-tier-group {
    grid-template-columns: 1fr;
  }
  .sponsorship-toggle,
  .sponsorship-dropdown-panel .btn {
    width: 100%;
  }
/* Keep CTA flush to the tier group without an extra wrapper gap */
.sponsorship-tier-group + .btn {
  width: 100%;
}
}

/* Student Profile Avatar */
.student-profile-avatar {
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), hsl(162, 55%, 40%));
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 3.5rem;
  font-weight: 700;
  margin: 0 auto 1.5rem;
  box-shadow: 0 4px 16px hsl(152 69% 31% / 0.25);
  overflow: hidden;
  position: relative;
}
.student-profile-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Blog Card */
.blog-thumb {
  height: 190px;
  background: var(--surface-2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
  color: var(--muted);
}
.post-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.875rem;
  font-size: var(--text-xs);
  color: var(--muted);
  margin-bottom: 0.625rem;
}

/* Report Row */
.report-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  padding: 1.375rem 1.5rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  transition: var(--t-fast);
}
.report-row:hover {
  border-color: var(--primary);
  box-shadow: var(--shadow-md);
}
.report-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--r-sm);
  background: var(--primary-subtle);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-h3);
  flex-shrink: 0;
}
.report-info h4 {
  font-size: var(--text-body);
  margin-bottom: 0.25rem;
}
.report-info p {
  font-size: var(--text-small);
  color: var(--muted);
  margin: 0;
}
.report-actions {
  display: flex;
  gap: 0.5rem;
  flex-shrink: 0;
}

/* Team Card */
.team-card {
  text-align: center;
}
.team-avatar-wrap {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), hsl(162, 55%, 40%));
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 2.25rem;
  font-weight: 700;
  margin: 0 auto 1.125rem;
  box-shadow: 0 4px 16px hsl(152 69% 31% / 0.25);
}
.team-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* The circular shape lives on .team-avatar-wrap, so round the photo too
     (and keep the mail badge on the wrapper unclipped). */
  border-radius: 50%;
}
.team-role {
  font-size: var(--text-small);
  font-weight: 600;
  color: var(--primary);
  margin-bottom: 0.625rem;
}
[data-theme="dark"] .team-role {
  color: var(--accent);
}

/* Partner chips (legacy, kept for homepage) */
.partner-strip {
  background: var(--surface);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 2rem 0;
}
.partner-strip-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.875rem;
  align-items: center;
}
.partner-chip {
  padding: 0.5rem 1.125rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  font-size: var(--text-small);
  font-weight: 600;
  color: var(--fg-2);
  transition: var(--t-fast);
}
.partner-chip:hover {
  border-color: var(--primary);
  color: var(--primary);
}

/* Vision / Mission / Values cards (About page).
   Horizontal row of 3 on large screens, stacked vertical on small screens.
   Each card uses --vmv-bg (set inline per card) as a background image under
   a fixed-contrast navy overlay so white text stays legible in BOTH light
   and dark themes — the overlay does not follow theme tokens on purpose. */
.vmv-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  align-items: stretch;
}
.vmv-card {
  position: relative;
  isolation: isolate;
  min-height: 320px;
  justify-content: flex-end;
  padding: 0;
  border: none;
  overflow: hidden;
}
/* Photo background — scoped as `.card.vmv-card` (compound selector) so it
   outranks the generic `.card` rule in gradients.css, which loads later and
   would otherwise win on source order with equal specificity, replacing the
   photo with the default card gradient. Mirrors the `.card.event-card`
   pattern used below. */
.card.vmv-card {
  /* Each card's inline style sets --vmv-bg as a CSS custom property holding
     the full `background` shorthand value (url(...) center/cover no-repeat).
     We use the `background` shorthand here — NOT `background-image` — because
     the variable contains position/size/repeat tokens that are invalid for
     the background-image property alone (which would cause the entire value
     to be discarded and only the fallback color would show). */
  background: var(--vmv-bg);
  /* Fallback fill color shown if the image fails to load or --vmv-bg is unset.
     Declared after the shorthand so it is not reset by it. */
  background-color: #101d33;
  /* Scale the background to cover the card (fill width, keep aspect ratio,
     overflow clipped) — object-fit: cover semantics at the CSS level. The
     source is never hard-cropped; only the served optimised copy is
     downscaled by optimize_images.py. The image is centred: letterboxed
     on navy where the aspect ratios differ. */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.vmv-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(
    180deg,
    rgb(10 20 38 / 0.25) 0%,
    rgb(10 20 38 / 0.62) 55%,
    rgb(10 20 38 / 0.88) 100%
  );
}
.vmv-card-body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.625rem;
  padding: 1.75rem;
  margin-top: auto;
}
.vmv-card-title {
  margin: 0;
  font-size: var(--text-h3);
  font-weight: 800;
  letter-spacing: -0.01em;
  color: #ffd479;
}
.vmv-card-text {
  margin: 0;
  font-size: var(--text-body);
  line-height: 1.7;
  color: #ffffff;
}
.vmv-card:hover {
  border-color: transparent;
}

/* History timeline cards (About page — 3 columns on large screens,
   stacked vertical on small screens). Mirrors the .vmv-card treatment:
   photo background under a fixed-contrast navy overlay so white text
   stays legible in BOTH light and dark themes. */
.history-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  align-items: stretch;
}
.history-card {
  position: relative;
  isolation: isolate;
  min-height: 440px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: 0;
  border: none;
  overflow: hidden;
  background-color: var(--surface);
}
.history-card-body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.75rem;
  padding: 1.75rem;
  min-width: 0;
}
/* Photo strip pinned to the bottom of each History card. Text (on a
   theme-reactive --surface card above) stays legible in both themes; a CSS
   mask fades the photo's top edge away so it melts into whichever surface
   colour the active theme provides. */
.history-card-photo {
  flex: 0 0 auto;
  height: 175px;
  background-image: var(--history-bg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 32%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 32%);
}
.history-card-kicker {
  margin: 0;
  font-size: var(--text-lead);
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--primary);
}
.history-card-sub {
  margin: 0;
  font-size: var(--text-lead);
  font-weight: 700;
  line-height: 1.5;
  color: var(--fg-2);
}
.history-card-year {
  margin: 0;
  font-size: 3rem;
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--primary);
}
.history-card-text {
  margin: 0;
  font-size: var(--text-small);
  line-height: 1.75;
  color: var(--fg-2);
}
/* Six key programs — pill chips inside the Growth card (2 rows on desktop),
   each with a small emoji icon beside the label. */
.history-chip-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
  width: 100%;
  min-width: 0;
}
.history-chip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  min-width: 0;
  overflow-wrap: break-word;
  padding: 0.5rem 0.875rem;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--fg-2);
  white-space: normal;
  text-align: center;
}
.history-chip-icon {
  font-size: var(--text-small);
  line-height: 1;
  flex: 0 0 auto;
}
/* Four pillars inside the Today card — 2x2 mini-grid, emoji icon + label. */
.history-pillar-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
  width: 100%;
}
.history-pillar {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.75rem 0.875rem;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}
.history-pillar-icon {
  font-size: var(--text-lead);
  line-height: 1;
  flex: 0 0 auto;
}
.history-pillar-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.25rem;
  min-width: 0;
}
.history-pillar-name {
  font-size: var(--text-small);
  font-weight: 800;
  color: var(--primary);
}
.history-pillar-desc {
  font-size: var(--text-xs);
  line-height: 1.45;
  color: var(--fg-2);
}
.history-card:hover {
  border-color: transparent;
}

/* Full-width photo band at the bottom of the History section, matching the
   reference mockup: caption bottom-left, MYO wordmark bottom-right, all on a
   fixed-contrast overlay so it works in both light and dark themes. */
.history-band {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 230px;
  margin-top: 1.5rem;
  background-color: #101d33;
  background-image: url("/static/uploads/banners/banner4.JPG");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.history-band::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(
    180deg,
    rgb(10 20 38 / 0.45) 0%,
    rgb(10 20 38 / 0.72) 60%,
    rgb(10 20 38 / 0.9) 100%
  );
}
.history-band-caption {
  position: absolute;
  z-index: 1;
  left: 1.5rem;
  bottom: 1.5rem;
  max-width: 45%;
  margin: 0;
  font-size: var(--text-lead);
  font-weight: 700;
  font-style: italic;
  color: #ffe9c4;
}
.history-band-logo {
  position: absolute;
  right: 1.5rem;
  bottom: 0.5rem;
  margin: 0;
  font-size: 4rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  line-height: 1;
  color: #ffffff;
  text-shadow: 0 2px 14px rgb(10 20 38 / 0.8);
  opacity: 0.92;
}

/* Theory of Change — horizontal step flow (About page). Three "how we
   create change" steps joined by right arrows feed into the outcome, drawn
   with the design tokens so it reacts to both light and dark themes.

   Arrows are flex items sized to their content; the step cards stretch to
   share the remaining width evenly, so each arrow lands exactly midway
   between two adjacent cards. */
.toc-flow {
  display: flex;
  flex-direction: row; /* one horizontal line on desktop */
  align-items: stretch;
  justify-content: center;
  gap: 0.75rem;
  max-width: 100%;
  margin: 0 auto;
}
.toc-step {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 0.875rem;
  min-width: 0;
  padding: 0.875rem 1.25rem;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
}
.toc-step-label {
  font-size: var(--text-lead);
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--fg);
}
.toc-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto; /* arrows keep their natural size, don't grow/shrink */
  width: auto;
  height: auto;
  padding: 0 0.3rem; /* a little breathing room around the glyph */
  margin: 0; /* spacing between cards and arrows is handled by the container's gap */
  background: transparent;
  border: none;
  color: var(--primary);
  font-size: var(--text-lead);
  line-height: 1;
  transition: color 0.2s ease;
}
.toc-arrow:hover {
  color: var(--accent);
}
.toc-outcome {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 0.875rem;
  padding: 0.875rem 1.25rem;
  background: var(--primary);
  border: 1px solid var(--accent);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  color: var(--primary-foreground);
}
.toc-outcome-label {
  font-size: var(--text-lead);
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.4;
  max-width: 230px;
}

/* Lead-in paragraph above the flow */
.toc-intro {
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

/* Partner logo cards (About page — logo is the main item, click redirects) */
.partner-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.5rem;
  align-items: stretch;
}
.partner-card {
  text-decoration: none;
  color: inherit;
  text-align: center;
  align-items: center;
  padding: 2rem 1.5rem 1.5rem;
  gap: 1.25rem;
}
a.partner-card {
  cursor: pointer;
}
.partner-card-logo {
  width: 100%;
  min-height: 140px;
  max-height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  /* Keep the logo well constant across themes so every logo stays
     legible in both light and dark mode. Default (light) well is pure
     white for dark/colored artwork (Joanne, Maecenata). White artwork
     (Crown, Restoration) uses .partner-card-logo--dark instead. */
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}
[data-theme="dark"] .partner-card-logo {
  background: #ffffff;
  border-color: var(--border);
}
.partner-card-logo img {
  max-width: 100%;
  max-height: 120px;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}
.partner-card-logo--dark {
  /* Deep navy well for white/gold artwork (Crown white SVG, gold
     Restoration mark). Fixed in both themes so the artwork never
     crashes against a light background, and the card body (name/type
     below) still follows the theme via --fg/--muted. */
  background: #101d33;
  border-color: #101d33;
}
[data-theme="dark"] .partner-card-logo--dark {
  background: #101d33;
  border-color: oklch(30% 0.03 265);
}
.partner-card-initial {
  font-size: 3rem;
  font-weight: 800;
  color: var(--primary);
}
.partner-card-logo--dark .partner-card-initial {
  color: #f4b63f;
}
.partner-card-body {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  align-items: center;
}
.partner-card-name {
  font-size: var(--text-lead);
  font-weight: 700;
  margin: 0;
  color: var(--fg);
}
.partner-card-type {
  font-size: var(--text-2xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
}

/* Responsive card adjustments */
@media (max-width: 960px) {
  /* Vision/Mission/Values: 3-across -> single vertical stack on small screens */
  .vmv-grid {
    grid-template-columns: 1fr;
  }
  .card.vmv-card {
    min-height: 260px;
  }
  /* History: 3-across -> single vertical stack on small screens */
  .history-grid {
    grid-template-columns: 1fr;
  }
  .history-card {
    min-height: 380px;
  }
  .history-card-photo {
    height: 160px;
  }
  /* History chips: 3-up -> 2-up on smaller screens */
  .history-chip-list {
    grid-template-columns: repeat(2, 1fr);
  }
  .history-band {
    min-height: 180px;
  }
  .history-band-caption {
    font-size: var(--text-small);
    max-width: 70%;
  }
  .history-band-logo {
    font-size: 3rem;
  }
  /* Theory of Change flow: stack vertically on small screens,
     arrows rotate to point down */
  .toc-flow {
    flex-direction: column;
    max-width: 420px;
  }
  .toc-step {
    min-width: 0;
    width: 100%;
  }
  .toc-arrow {
    transform: rotate(90deg);
  }
  .toc-outcome {
    width: 100%;
    justify-content: center;
  }
}
@media (max-width: 640px) {
  .report-row {
    flex-direction: column;
    align-items: flex-start;
  }
  .report-actions {
    width: 100%;
  }
  .report-actions .btn {
    flex: 1;
  }
}