/* Stoke Diaspora SACCO sponsor campaign.
   Based on the sponsor's ukaaf-banner.css. Every rule is scoped to
   #stoke-ukaaf-ad (homepage advert) or #stoke-together-banner (confirmation
   page banner), so nothing here can change the rest of the site. The advert
   keeps the sponsor's own colours: navy #314869, green #8EBE40, background
   #F6F9F1. To remove the campaign, see "Sponsor campaign" in README.md. */

/* ── Homepage advert ─────────────────────────────────────────────────── */

#stoke-ukaaf-ad {
  box-sizing: border-box;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  overflow: hidden;
  /* Same width as the site's other sections, with the same side margins. */
  width: min(calc(64rem - 2 * var(--gutter, 2.5rem)), calc(100% - 2 * var(--gutter, 1rem)));
  margin: clamp(2.5rem, 6vw, 4rem) auto 0;
  border: 1px solid #dae5c9;
  border-radius: 16px;
  background: #f6f9f1;
  color: #314869;
  font-family: Arial, Helvetica, sans-serif;
  box-shadow: 0 8px 24px rgba(24, 47, 80, 0.08);
}
#stoke-ukaaf-ad * { box-sizing: border-box; }
#stoke-ukaaf-ad .suc-copy { padding: clamp(24px, 4vw, 48px); align-self: center; }
#stoke-ukaaf-ad .suc-logo { display: block; width: min(100%, 315px); height: auto; margin: 0 0 20px; }
#stoke-ukaaf-ad h2 {
  color: #314869;
  font-family: inherit;
  font-size: clamp(32px, 4vw, 50px);
  line-height: 1.08;
  font-weight: 800;
  margin: 0 0 14px;
}
#stoke-ukaaf-ad .suc-lead { font-size: clamp(16px, 1.7vw, 19px); line-height: 1.55; margin: 0 0 23px; color: #314869; }
#stoke-ukaaf-ad .suc-cta {
  display: inline-block;
  background: #314869;
  color: #fff;
  text-decoration: none;
  border-radius: 8px;
  padding: 14px 22px;
  font-weight: 700;
  line-height: 1.3;
}
#stoke-ukaaf-ad .suc-cta:hover { background: #223954; color: #fff; }
/* Navy, not green: green on the pale background is too faint to see. */
#stoke-ukaaf-ad .suc-cta:focus-visible { outline: 3px solid #314869; outline-offset: 4px; }
#stoke-ukaaf-ad .suc-media { position: relative; min-height: 320px; overflow: hidden; background: #e7efd9; }
#stoke-ukaaf-ad .suc-media::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0 auto 0 0;
  width: 10px;
  background: #8ebe40;
}
/* The photo fills its frame at any size. */
#stoke-ukaaf-ad .suc-media img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

@media (max-width: 700px) {
  #stoke-ukaaf-ad { grid-template-columns: 1fr; }
  #stoke-ukaaf-ad .suc-copy { padding: 24px; }
  #stoke-ukaaf-ad .suc-logo { max-width: 265px; }
  #stoke-ukaaf-ad .suc-media { min-height: 215px; }
  #stoke-ukaaf-ad .suc-media::before { inset: 0 0 auto 0; width: auto; height: 7px; }
}

/* ── Confirmation page banner ────────────────────────────────────────── */

#stoke-together-banner { margin: 2.5rem 0 0; }
#stoke-together-banner .suc-banner-link { position: relative; display: block; border-radius: 4px; }
#stoke-together-banner .suc-banner-link:focus-visible { outline: 3px solid #314869; outline-offset: 4px; }
#stoke-together-banner img { display: block; width: 100%; height: auto; }

/* ── Shared ──────────────────────────────────────────────────────────── */

/* "Illustrative image": the people pictured are AI-generated, not members. */
#stoke-ukaaf-ad .suc-photo-note,
#stoke-together-banner .suc-photo-note {
  position: absolute;
  bottom: 9px;
  right: 10px;
  z-index: 2;
  padding: 4px 7px;
  background: rgba(255, 255, 255, 0.93);
  color: #314869;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  line-height: 1.3;
  border-radius: 4px;
}

/* Read out by screen readers, not shown. */
#stoke-ukaaf-ad .suc-visually-hidden,
#stoke-together-banner .suc-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}


/* Slim partner bar at the very top of the homepage. */
.partner-strip { background: #F6F9F1; border-bottom: 3px solid #8EBE40; }
.partner-strip__link {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 0.35rem 1rem; max-width: 64rem; margin: 0 auto; padding: 0.5rem 1rem;
  color: #314869; text-decoration: none; font-size: 0.95rem; line-height: 1.35; text-align: center;
}
.partner-strip__logo { flex: none; height: 28px; width: auto; }
.partner-strip__text strong { font-weight: 700; }
.partner-strip__cta { flex: none; font-weight: 700; border-bottom: 2px solid #8EBE40; padding-bottom: 1px; }
.partner-strip__link:hover .partner-strip__cta { color: #223954; border-color: #314869; }
.partner-strip__link:focus-visible { outline: 3px solid #8EBE40; outline-offset: -3px; }
/* Phones: just the name and the link, so the bar stays slim. */
@media (max-width: 620px) {
  .partner-strip__label, .partner-strip__tagline { display: none; }
  .partner-strip__logo { height: 24px; }
}