/* Campaigns index - page-specific layout only.
   Loaded after styles.css and css/shared.css, and it only ADDS selectors: every class here is
   new (.camp-*, .storyband) or a compound of an existing class with a new one
   (.tiles-mini.camp-tiles), so nothing the home page uses can move.
   Everything else on this page - .mcard, .badge, .chip, .explorer, .strip, .phero, .band--sage,
   .grid-3, .empty, .notice, .cta - comes from the two shared sheets unchanged. */

/* ---------------------------------------------------------------- Active campaigns
   The asymmetric block from the design: one featured card at 7 columns, its supporting cards
   at 5. With two active campaigns that is exactly one card each side, and the column is closed
   off by the "where needed most" card so the right-hand side never looks half-built. A fourth
   active campaign (or more) spills into a full-width row underneath. */
.camp-split { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--gap); align-items: start; }
.camp-split__main { min-width: 0; }
.camp-split__side { display: grid; gap: var(--gap); align-content: start; min-width: 0; }
.camp-split__more { grid-column: 1 / -1; margin-top: 4px; }

/* the unrestricted option that closes the supporting column */
.camp-need { display: grid; gap: 10px; align-content: start; }
.camp-need .disc { margin-bottom: 2px; }
.camp-need h3 { margin: 0; }
.camp-need p { margin: 0; }
.camp-need .btn { justify-self: start; margin-top: 4px; }

/* the year sits opposite the programme chip on a completed card; the programme chip gives way
   so a long programme name can never run into it */
.mcard__media .chip.camp-year { left: auto; right: 14px; font-variant-numeric: tabular-nums; }
.mcard__media .chip:not(.camp-year) { max-width: calc(100% - 28px); }
.mcard__media:has(.camp-year) .chip:not(.camp-year) { max-width: calc(100% - 96px); }
.mcard__media .badge + .chip.camp-year { top: auto; }

/* ---------------------------------------------------------------- Coming next
   The upcoming campaigns as wide rows, and beside them the fund the soonest one feeds. */
.camp-next { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--gap); align-items: start; }
.camp-next__list { display: grid; gap: var(--gap); min-width: 0; }
.camp-next__aside { min-width: 0; }
.camp-fund { display: grid; gap: 10px; align-content: start; }
.camp-fund .eyebrow, .camp-fund h3, .camp-fund p { margin: 0; }
.camp-fund .link-btn { padding-bottom: 0; justify-self: start; }

/* ---------------------------------------------------------------- Explorer bar
   The bar belongs to the section head under it, so it keeps a tighter gap than a full section. */
#explore { padding-bottom: clamp(18px, 2.2vw, 32px); }

/* ---------------------------------------------------------------- Explorer empty state */
.camp-empty { display: grid; justify-items: center; gap: 8px; margin-top: 10px; }
.camp-empty p { margin: 0; }

/* ---------------------------------------------------------------- Story banner
   Photograph left, forest panel right - a hard split, no gradient over the picture. */
.storyband { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: stretch; }
.storyband__media { position: relative; min-height: 340px; background: var(--sage); overflow: hidden; }
.storyband__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.storyband__copy { display: flex; align-items: center; min-width: 0; }
.storyband__inner { max-width: 620px; padding: clamp(40px, 5vw, 76px) var(--gutter) clamp(40px, 5vw, 76px) clamp(28px, 4vw, 68px); }
.storyband__inner h2 { max-width: 16ch; }
.storyband__inner p { max-width: 46ch; }
.storyband__inner .btn { margin-top: 6px; }

/* ---------------------------------------------------------------- Transparency row
   Four tiles across, as the design has them (the shared rule is three). */
.tiles-mini.camp-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.about__copy .notice { margin-top: 20px; }

/* ---------------------------------------------------------------- Responsive */
@media (max-width: 1199px) {
  .tiles-mini.camp-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 899px) {
  .camp-split, .camp-next { grid-template-columns: 1fr; }
  .storyband { grid-template-columns: 1fr; }
  .storyband__media { min-height: 0; height: clamp(220px, 42vw, 320px); }
  .storyband__inner { padding-inline: var(--gutter); max-width: none; }
}
@media (max-width: 599px) {
  .tiles-mini.camp-tiles { grid-template-columns: 1fr 1fr; }
}