/* Donations — public campaign page (hero, progress, donate widget, donor wall).
   Unlayered, .ac-plugin-scoped like every other module. Colors/spacing/type
   come from the --ac-* Harbor tokens only. */

.ac-plugin .ac-donation-campaign { display: grid; gap: 1.25rem; }

/* Donate result banner (?ap_error / ?ap_donation PRG redirect flags).
   Base .ac-message look comes from components.css; these add the state color. */
.ac-plugin .ac-donation-campaign .ac-donate-result { margin: 0; }
.ac-plugin .ac-donation-campaign .ac-message--error { border-color: color-mix(in srgb, var(--ac-crit) 45%, var(--ac-line)); background: var(--ac-crit-soft); color: var(--ac-crit); }
.ac-plugin .ac-donation-campaign .ac-message--success { border-color: color-mix(in srgb, var(--ac-good, #1f7a4d) 45%, var(--ac-line)); background: var(--ac-good-soft, #e6f4ec); color: var(--ac-good, #1f7a4d); }

/* Masthead — the page's single heading, with the accent rule the other
   plugin section headers use. */
.ac-plugin .ac-campaign-masthead__title { position: relative; margin: 0; padding-bottom: .55rem; }
.ac-plugin .ac-campaign-masthead__title::after { content: ""; position: absolute; left: 0; bottom: 0; width: 44px; height: 3px; border-radius: 3px; background: var(--ac-accent); }

/* Hero image */
.ac-plugin .ac-campaign-hero { margin: 0; border-radius: var(--ac-radius); overflow: hidden; box-shadow: var(--ac-shadow); }
.ac-plugin .ac-campaign-hero img { display: block; width: 100%; max-height: 420px; object-fit: cover; }

/* Two-column layout: story + wall left, progress/donate panel right.
   On small screens the panel stacks first so the ask is above the fold. */
.ac-plugin .ac-campaign-layout { display: grid; gap: 1.25rem; grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); align-items: start; }
.ac-plugin .ac-campaign-main { display: grid; gap: 1.25rem; min-width: 0; }
@media (max-width: 900px) {
  .ac-plugin .ac-campaign-layout { grid-template-columns: 1fr; }
  .ac-plugin .ac-campaign-side { order: -1; }
}

.ac-plugin .ac-campaign-story > :first-child { margin-top: 0; }
.ac-plugin .ac-campaign-story > :last-child { margin-bottom: 0; }

/* Progress panel */
.ac-plugin .ac-campaign-panel { display: grid; gap: .9rem; }
.ac-plugin .ac-campaign-raised { margin: 0; font-family: var(--ac-font-display); font-size: 2.1rem; font-weight: 600; line-height: 1.1; color: var(--ac-ink); }
.ac-plugin .ac-campaign-raised__sub { display: block; margin-top: .3rem; font-family: var(--ac-font-body); font-size: .92rem; font-weight: 400; color: var(--ac-muted); }

.ac-plugin .ac-progress { height: 12px; border-radius: 999px; background: var(--ac-soft); overflow: hidden; }
.ac-plugin .ac-progress__fill { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--ac-primary), color-mix(in srgb, var(--ac-accent) 55%, var(--ac-primary))); transition: width .5s ease; }
@media (prefers-reduced-motion: reduce) { .ac-plugin .ac-progress__fill { transition: none; } }

.ac-plugin .ac-campaign-stats { display: flex; flex-wrap: wrap; gap: .35rem 1.1rem; margin: 0; color: var(--ac-muted); font-size: .9rem; }
.ac-plugin .ac-campaign-stats__item strong { color: var(--ac-ink); font-variant-numeric: tabular-nums; }
.ac-plugin .ac-campaign-stats__item--ended { color: var(--ac-crit); font-weight: 600; }

/* Donate widget */
.ac-plugin .ac-donate-form { display: grid; gap: .75rem; border-top: 1px solid var(--ac-line); padding-top: 1rem; }
.ac-plugin .ac-donate-label { display: block; font-weight: 600; font-size: .85rem; color: var(--ac-ink); }
.ac-plugin .ac-donate-presets { border: 0; margin: 0; padding: 0; display: grid; gap: .5rem; }
.ac-plugin .ac-donate-presets legend { padding: 0; }
.ac-plugin .ac-donate-presets__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; }
@media (max-width: 380px) { .ac-plugin .ac-donate-presets__grid { grid-template-columns: repeat(2, 1fr); } }
.ac-plugin .ac-donate-preset {
  font: inherit; font-weight: 700; font-size: .95rem; cursor: pointer;
  padding: .55rem .25rem; text-align: center;
  border: 1px solid var(--ac-line); border-radius: var(--ac-button-radius);
  background: var(--ac-surface); color: var(--ac-ink);
  transition: border-color .12s, background .12s;
}
.ac-plugin .ac-donate-preset:hover { border-color: color-mix(in srgb, var(--ac-primary) 40%, var(--ac-line)); background: var(--ac-soft); }
.ac-plugin .ac-donate-preset:focus-visible { outline: 2px solid var(--ac-primary); outline-offset: 2px; }
.ac-plugin .ac-donate-preset.is-active { border-color: var(--ac-primary); background: var(--ac-accent-soft); color: var(--ac-primary); }

.ac-plugin .ac-donate-amount { position: relative; }
.ac-plugin .ac-donate-amount__symbol { position: absolute; left: .85rem; top: 50%; transform: translateY(-50%); color: var(--ac-muted); font-weight: 600; }
.ac-plugin .ac-donate-amount__input { padding-left: 1.9rem; }

.ac-plugin .ac-donate-check { display: flex; align-items: flex-start; gap: .55rem; font-size: .92rem; color: var(--ac-ink); cursor: pointer; }
.ac-plugin .ac-donate-check input { accent-color: var(--ac-primary); width: 1.05rem; height: 1.05rem; flex: none; margin-top: .1rem; }

.ac-plugin .ac-donate-actions .ac-button { flex: 1 1 auto; justify-content: center; }

/* Share line */
.ac-plugin .ac-campaign-share { margin: 0; border-top: 1px solid var(--ac-line); padding-top: .9rem; color: var(--ac-muted); font-size: .85rem; overflow-wrap: anywhere; }
.ac-plugin .ac-campaign-share a { color: var(--ac-primary); }

/* Donor wall */
.ac-plugin .ac-donor-wall__title { margin: 0 0 1rem; font-size: 1.15rem; }
.ac-plugin .ac-donor-wall__list { list-style: none; margin: 0; padding: 0; display: grid; }
.ac-plugin .ac-donor { display: flex; align-items: flex-start; gap: .75rem; padding: .8rem 0; border-bottom: 1px solid var(--ac-line); }
.ac-plugin .ac-donor:first-child { padding-top: 0; }
.ac-plugin .ac-donor:last-child { border-bottom: 0; padding-bottom: 0; }
.ac-plugin .ac-donor .ac-avatar { margin-bottom: 0; flex: none; }
.ac-plugin .ac-donor__name { display: block; font-weight: 600; color: var(--ac-ink); }
.ac-plugin .ac-donor__message { margin: .15rem 0 0; color: var(--ac-muted); font-size: .92rem; overflow-wrap: anywhere; }

/* General-fund donate form ([association_general_donation]) — one centered
   panel at the campaign page's side-panel width; heading/blurb sit above the
   form's existing border-top divider. */
.ac-plugin .ac-general-donation { max-width: 460px; margin-inline: auto; }
.ac-plugin .ac-general-donation__blurb { margin: 0; color: var(--ac-muted); }
/* On the Payments & Giving page the form sits in a full-width column with the
   dues card, so drop the standalone form's narrow centering there. */
.ac-payments-giving .ac-plugin .ac-general-donation { max-width: none; margin-inline: 0; }

/* Campaigns listing ([association_donation_campaigns]) — same card-grid
   anatomy as the classifieds cards (.ac-card--linked overlay link, image top,
   body below), with the single page's .ac-progress bar inside each card. */
.ac-plugin .ac-campaigns-grid { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.ac-plugin .ac-campaign-card { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.ac-plugin .ac-campaign-card__thumb { margin: 0; aspect-ratio: 16 / 9; overflow: hidden; }
.ac-plugin .ac-campaign-card__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ac-plugin .ac-campaign-card__body { padding: 1rem 1.1rem 1.25rem; display: grid; gap: .7rem; align-content: start; flex: 1; }
.ac-plugin .ac-campaign-card__title { margin: 0; font-size: 1.05rem; line-height: 1.3; }

/* The FSE theme's single template already prints the post featured image; the
   campaign view renders its own hero image (.ac-campaign-hero__img), so suppress
   the theme's copy on the campaign single to avoid a duplicate. Scoped to this
   CPT so other plugin CPT singles (classifieds/events) keep their theme image. */
.single-donation_campaign .wp-block-post-featured-image { display: none; }