/* Practical contact actions and a visual finish for the programme pages. */
.contact-footer {
  padding-block: 0;
  background: var(--color-surface);
  color: var(--color-text-primary);
  scroll-margin-block-start: calc(var(--space-16) + var(--space-6));
}
.contact-footer [hidden] { display: none !important; }
.contact-footer :is(a, button, input):focus-visible { outline: calc(var(--space-1) / 2) solid var(--color-focus-ring); outline-offset: var(--space-1); }
.contact-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: var(--space-12);
  padding-block: clamp(var(--space-12), 6vw, calc(var(--space-16) + var(--space-8)));
}
.contact-intro { display: grid; gap: var(--space-5); justify-items: start; }
.contact-footer .contact-intro h2 { max-inline-size: 21ch; color: var(--color-text-accent); font-size: var(--text-2xl); text-wrap: balance; }
.contact-intro > p:not(.eyebrow) { max-inline-size: 48ch; color: var(--color-text-secondary); }
.contact-topics { display: grid; gap: var(--space-3); inline-size: 100%; margin-block-start: var(--space-2); }
.contact-topic {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  border: var(--border-width-hairline) solid var(--color-border);
  border-radius: var(--radius-lg);
  padding-block: var(--space-4);
  padding-inline: var(--space-4);
  color: var(--color-text-accent);
  text-decoration: none;
}
.contact-topic img { inline-size: var(--space-12); block-size: var(--space-12); flex: none; }
.contact-topic > span { display: grid; gap: var(--space-1); }
.contact-topic strong { color: var(--color-text-accent); font-size: var(--text-base); }
.contact-topic small { font-size: var(--text-sm); color: var(--color-text-secondary); }
.contact-topic:hover { background: var(--color-surface-lavender); border-color: var(--color-action-primary); }
.contact-topic:hover strong { text-decoration: underline; text-underline-offset: var(--space-1); }
.contact-topic-note { color: var(--color-text-muted); font-size: var(--text-sm); }
/* Enquiry form. Field, control, and button styling all come from the design system. */
.contact-form { display: grid; gap: var(--space-4); inline-size: 100%; margin-block-start: var(--space-2); }
.contact-form__heading { color: var(--color-text-accent); font-size: var(--text-lg); }
.contact-form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.contact-form__mobile { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: var(--space-2); inline-size: 100%; direction: ltr; }
.contact-form__mobile .control { min-inline-size: 0; }
.contact-form__textarea { min-block-size: var(--space-16); line-height: 1.6; resize: vertical; }
.contact-form__submit { justify-self: start; }
.contact-form__status { min-block-size: var(--space-5); color: var(--color-text-secondary); font-size: var(--text-sm); }
.contact-form__status.is-success { color: var(--color-text-accent); }
.contact-form__status.is-error { color: var(--color-status-rejected); }
/* Honeypot: moved off-screen rather than display:none, which automated fillers skip. */
.contact-form__trap { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* The form is tall, so the columns align at the top instead of the footer's default centring. */
.contact-layout:has(.contact-form) { align-items: start; }
.contact-card {
  display: grid;
  gap: var(--space-5);
  padding-block: var(--space-8);
  padding-inline: var(--space-8);
  border: var(--border-width-hairline) solid var(--color-border);
  border-block-start: var(--space-1) solid var(--color-accent);
  border-radius: var(--radius-xl);
  background: var(--color-surface-accent);
}
.contact-card__person { display: flex; gap: var(--space-4); align-items: center; }
.contact-card__person > img { inline-size: var(--space-14); block-size: var(--space-14); flex: none; }
.contact-card__person > div { display: grid; gap: var(--space-1); }
.contact-card h3 { color: var(--color-text-accent); font-size: var(--text-xl); }
.contact-card__person p { color: var(--color-text-secondary); font-size: var(--text-sm); }
.contact-card__email-block { display: grid; gap: var(--space-1); }
.contact-card__email-block > span { font-size: var(--text-sm); color: var(--color-text-secondary); }
.contact-footer .contact-card__email { justify-self: start; color: var(--color-text-accent); font-size: var(--text-lg); font-weight: 700; text-underline-offset: var(--space-1); overflow-wrap: anywhere; }
.contact-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.contact-footer .button { min-inline-size: 0; border-radius: var(--radius-pill); font-size: var(--text-sm); }
.contact-footer .button--secondary { color: var(--color-action-primary); }
.contact-footer .button--primary { color: var(--color-action-primary-text); }
.contact-copy-status { color: var(--color-text-accent); font-size: var(--text-sm); }
.contact-copy-status:empty { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.contact-copy-fallback { display: grid; gap: var(--space-2); }
.contact-copy-fallback label { font-size: var(--text-sm); font-weight: 700; }
.contact-copy-fallback input { inline-size: 100%; min-inline-size: 0; min-block-size: var(--space-11); padding-block: var(--space-3); padding-inline: var(--space-3); border: var(--border-width-hairline) solid var(--color-border-strong); border-radius: var(--radius-md); background: var(--color-surface); color: var(--color-text-primary); font: inherit; }
.contact-footer .contact-office { margin: 0; padding-block-start: var(--space-5); border-block-start: var(--border-width-hairline) solid var(--color-border); font-size: var(--text-sm); color: var(--color-text-secondary); }
.contact-office strong { color: var(--color-text-accent); }
.contact-footer__partners { padding-block: var(--space-8); background: var(--color-surface); border-block-start: var(--border-width-hairline) solid var(--color-border); }
.contact-partners-inner { display: grid; gap: var(--space-4); }
.contact-footer .partner-attributions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; align-items: stretch; }
.contact-footer .partner-attribution { display: grid; align-content: start; justify-items: center; gap: var(--space-4); padding: var(--space-4) var(--space-6); text-align: center; }
.contact-footer .partner-attribution + .partner-attribution { border-inline-start: var(--border-width-hairline) solid var(--color-border); }
.contact-footer .partner-attribution__label { margin: 0; color: var(--color-text-secondary); font-size: var(--text-sm); font-weight: 700; }
.contact-footer .partner-attribution img { display: block; inline-size: 100%; max-inline-size: 15rem; block-size: auto; min-block-size: 0; aspect-ratio: auto; }
.contact-footer .partner-attribution--donor img { max-inline-size: 23rem; }
.contact-footer__bottom { display: flex; flex-wrap: wrap; gap: var(--space-4); justify-content: space-between; align-items: center; padding-block-start: var(--space-4); margin-block-start: var(--space-4); border-block-start: var(--border-width-hairline) solid var(--color-border); color: var(--color-text-secondary); font-size: var(--text-sm); }
.contact-footer__bottom a { color: var(--color-text-accent); font-weight: 700; text-underline-offset: var(--space-1); }
.contact-footer__credit { margin: 0; max-inline-size: 60ch; }
.contact-footer__links { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-5); }
.contact-footer__site-link { display: inline-flex; align-items: center; gap: var(--space-2); }
.contact-footer__site-link img { inline-size: var(--space-5); block-size: var(--space-5); }
.contact-footer__social { display: flex; align-items: center; gap: var(--space-3); }
.contact-footer__social-link { display: grid; place-items: center; color: var(--color-text-secondary); }
.contact-footer__social-link .icon { inline-size: var(--space-5); block-size: var(--space-5); }
/* Not yet linked: styled like the others, but inert (no href) until real profiles are confirmed. */
@media (max-width: 47.999rem) {
  .contact-footer__bottom { justify-content: center; text-align: center; }
}

.partnership-section .partnership-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); align-items: center; gap: var(--space-12); }
.partnership-message { display: grid; gap: var(--space-5); justify-items: start; }
.partnership-message .section-heading { font-size: var(--text-2xl); }
.partnership-visual { inline-size: 100%; margin: 0; border-radius: var(--radius-xl); overflow: hidden; background: var(--color-surface-accent); }
.partnership-visual img { display: block; inline-size: 100%; block-size: auto; aspect-ratio: 3 / 2; }

@media (max-width: 63.999rem) {
  .contact-layout { gap: var(--space-6); }
  .contact-card { padding-inline: var(--space-5); }
  .contact-card__person { align-items: start; gap: var(--space-3); }
  .contact-card__person > img { inline-size: var(--space-10); block-size: var(--space-10); }
  .contact-card h3 { font-size: var(--text-lg); }
  .contact-card__email { font-size: var(--text-base); }
  .partnership-section .partnership-layout { gap: var(--space-6); }
}
@media (max-width: 47.999rem) {
  .contact-form__row { grid-template-columns: minmax(0, 1fr); }
  .landing-hero { padding-block: var(--space-8); }
  .hero-copy { gap: var(--space-4); }
  .landing-hero__headline { font-size: clamp(2rem, 9.6vw, 2.625rem); max-inline-size: 20ch; }
  .landing-hero__description { font-size: var(--text-base); }
  .hero-actions { gap: var(--space-3); }
  .contact-layout, .partnership-section .partnership-layout { grid-template-columns: minmax(0, 1fr); }
  .contact-card { padding-block: var(--space-6); }
  .contact-footer .partner-attributions { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .contact-footer .partner-attribution { grid-template-columns: minmax(5.5rem, 0.65fr) minmax(0, 1fr); justify-items: start; align-items: center; gap: var(--space-5); padding-inline: 0; text-align: start; }
  .contact-footer .partner-attribution + .partner-attribution { padding-block-start: var(--space-5); border-inline-start: 0; border-block-start: var(--border-width-hairline) solid var(--color-border); }
  .contact-footer .partner-attribution img { max-inline-size: 11rem; }
  .contact-footer .partner-attribution--donor img { max-inline-size: 16rem; }
}

@media (max-width: 29.999rem) {
  .contact-footer .partner-attribution { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
}
/* Client notes (3): one centred contact card — the forum, the team, then the address. */
.contact-layout--stacked { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: var(--space-8); }
.contact-footer .contact-heading { margin: 0; max-inline-size: none; color: var(--color-text-accent); font-size: var(--text-2xl); text-align: center; text-wrap: balance; }
.contact-card--channels { inline-size: min(100%, 44rem); gap: var(--space-5); }
.contact-channel-group { display: grid; gap: var(--space-3); padding-block-end: var(--space-5); border-block-end: var(--border-width-hairline) solid var(--color-border); }
.contact-footer .contact-channel-group__title { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); margin: 0; color: var(--color-text-accent); font-size: var(--text-lg); }
.contact-footer .contact-channel-group__role { color: var(--color-text-secondary); font-size: var(--text-sm); font-weight: 400; }
.contact-channel { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); margin: 0; max-inline-size: none; font-size: var(--text-base); }
.contact-channel > img, .contact-channel-group__title > img { inline-size: 1.5rem; block-size: 1.5rem; flex: none; }
.contact-channel__label { color: var(--color-text-secondary); font-weight: 700; }
.contact-channel__label::after { content: ":"; }
.contact-footer .contact-channel .contact-card__email { font-size: var(--text-base); }
.contact-footer .contact-channel--address { flex-wrap: nowrap; align-items: start; font-style: normal; color: var(--color-text-secondary); }
.contact-channel--address > span { flex: 1 1 auto; min-inline-size: 0; }
@media (max-width: 47.999rem) { .contact-footer .contact-heading { font-size: var(--text-xl); } }