/* ============================================================================
   campaign.css  —  two-column layout for the reusable donation campaign
   ============================================================================
   Shell only: content box (left) + widget (right). The widget's own card
   styling (border, shadow, framing) lives in donorbox.css and is reused as-is.
   Built by campaign.js from <div class="campaign" data-campaign="…">.
   ============================================================================ */

.campaign {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 460px);
  gap: 48px;
  align-items: start;
  max-width: 1100px;
  margin: 0 auto;
  text-align: left;   /* .donate centers text; the campaign row reads left */
}

/* Widget-only variant (campaign with no content box) — single centered column.
   Centers the widget when it stands alone. */
.campaign--solo {
  grid-template-columns: minmax(0, 460px);
  justify-content: center;
}

/* ── Left content column ── */
.campaign-content .section-body {
  margin-bottom: 0;
}

/* The giving grid is a 4-across row in a full-width section; inside the narrower
   content column, drop it to two columns. */
.campaign-content .giving-grid {
  grid-template-columns: 1fr 1fr;
  max-width: none;
  margin: 24px 0 0;
}

/* Any stray inline image in campaign content never overflows the column. */
.campaign-content img {
  max-width: 100%;
  height: auto;
}

/* Campaign photos now use the shared gallery grid: campaigns embed a
   `.gallery-embed` in their content fragment, which gallery.js expands into a
   `.gallery-grid`. The tile look (and the legacy `.campaign-gallery` selector)
   lives in gallery.css so campaign and standalone galleries stay identical. */

/* ── Right column ── */
.campaign-widget {
  width: 100%;
}

/* ── Responsive: stack content above the widget at the site breakpoint ── */
@media (max-width: 900px) {
  .campaign,
  .campaign--solo {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .campaign-content .giving-grid {
    grid-template-columns: 1fr 1fr;
  }
}