/* campaign_hero block (Phase 3 Stage 4).
   CSS ported from design-export/base.css; no literal colour, every value a token.
   Summer of Skills campaign band; SoS palette tokens */

/* padding-inline-start clears an overhanging site logo (--logo-clear in
   tokens.css, 0 for every brand but UCNL, and 0 below 64em on UCNL too).
   The inset goes on the WRAP, not the card: .campaign-hero is a full-bleed
   rounded band, so the whole card moves clear of the mark rather than the mark
   sitting on top of its corner. */
.campaign-hero-wrap { position: relative; padding-inline-start: var(--logo-clear); }
.campaign-hero { position: relative; border-radius: var(--radius-lg); overflow: hidden; background: linear-gradient(135deg, var(--sos-teal) 0%, var(--sos-teal-deep) 100%); }
.campaign-hero__rule { height: 6px; background: linear-gradient(90deg, var(--sos-gold) 0%, var(--sos-cream) 30%, var(--sos-sky) 64%, var(--sos-blue) 100%); }
.campaign-hero__inner { padding: 2.1rem 2.3rem; display: flex; align-items: center; gap: 2.4rem; flex-wrap: wrap; }
.campaign-hero__type { flex: 0 0 auto; }
.campaign-hero__title { display: flex; gap: .06em; font-size: 4rem; line-height: .9; color: var(--white); }
.campaign-hero__subtitle { font-family: var(--font-display); font-weight: 400; font-style: italic; font-size: 2rem; color: var(--sos-cream); }
.campaign-hero__content { flex: 1 1 340px; }
.campaign-hero__date { display: inline-block; font-family: var(--font-mono); font-weight: 700; letter-spacing: .12em; color: rgba(var(--on-dark-rgb), .88); background: rgba(var(--sos-scrim-rgb), .42); padding: .5rem 1rem; border-radius: var(--radius-pill); margin-bottom: .9rem; }
.campaign-hero__strap { font-size: 1.3125rem; line-height: 1.6; color: rgba(var(--on-dark-rgb), .92); margin-bottom: 1.2rem; }
.campaign-hero__ctas { display: flex; gap: .75rem; flex-wrap: wrap; }
.campaign-hero__btn--primary { background: var(--sos-cream); color: var(--sos-ink); }
.campaign-hero__btn--lime { background: transparent; border-color: rgba(var(--on-dark-rgb), .7); color: var(--white); }