/* Programme illustrations: enterprise, financial learning, sustainable production.
   Use complete compositions and keep brand artwork independent of the imagery. */

.landing-hero__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.purpose-card { padding: 0; gap: 0; justify-items: stretch; text-align: start; }
.hero-illustration { margin: 0; inline-size: 100%; background: var(--color-surface-accent); }
.hero-illustration > img { display: block; inline-size: 100%; block-size: auto; aspect-ratio: 3 / 2; }
.hero-illustration figcaption {
  padding-block: var(--space-3);
  padding-inline: var(--space-5);
  border-block-end: calc(var(--space-1) / 2) solid var(--color-accent);
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
}
.purpose-card__story {
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr);
  gap: var(--space-4);
  align-items: center;
  padding-block: var(--space-6) var(--space-4);
  padding-inline: var(--space-6);
}
.purpose-card .brand-scene { inline-size: 100%; }
.purpose-card .brand-scene__mark { inline-size: var(--space-14); }
.purpose-card__message { display: grid; gap: var(--space-2); }
.purpose-card__message h2 { max-inline-size: 20ch; font-size: var(--text-lg); }
.purpose-card__body { max-inline-size: 38ch; }
.purpose-card__footer {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
  border-block-start: var(--border-width-hairline) solid var(--color-brand-lavender);
  padding-block-start: var(--space-3);
}
.purpose-card .brand-values { justify-content: start; gap: var(--space-2); }
.purpose-card .brand-values li { border: 0; padding: 0; }
.purpose-card .brand-values li + li::before { content: "·"; margin-inline-end: var(--space-2); color: var(--color-accent); }

.support-route {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding: 0;
  overflow: hidden;
}
.support-route__visual {
  margin: 0;
  background: var(--color-surface-accent);
  flex: none;
}
.support-route__visual > img {
  display: block;
  inline-size: 100%;
  block-size: auto;
  aspect-ratio: 3 / 2;
}
.support-route__visual figcaption {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding-block: var(--space-3);
  padding-inline: var(--space-6);
  color: var(--color-text-accent);
  font-size: var(--text-sm);
  font-weight: 700;
}
.support-route__visual figcaption::before {
  content: "";
  inline-size: var(--space-2);
  block-size: var(--space-2);
  flex: none;
  border-radius: 50%;
  background: var(--color-accent);
}
.support-route__body {
  display: flex;
  flex-direction: column;
  align-items: start;
  gap: var(--space-3);
  flex: 1;
  padding-block: var(--space-6);
  padding-inline: var(--space-6);
}
.support-route__heading { display: flex; align-items: center; gap: var(--space-3); }
.support-route__heading img { inline-size: var(--space-12); block-size: var(--space-12); flex: none; }
.support-route__body > p { font-size: var(--text-sm); color: var(--color-text-secondary); }
.support-route__body .route-link { padding-block-end: var(--space-1); }
.imagery-note { max-inline-size: 85ch; color: var(--color-text-muted); font-size: var(--text-sm); }

@media (min-width: 48rem) {
  .support-results[data-selected]:not([data-selected="all"]) { max-inline-size: none; }
  .support-results[data-selected]:not([data-selected="all"]) .support-route {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    align-items: start;
  }
}
@media (min-width: 48rem) and (max-width: 63.999rem) {
  .support-route { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); align-items: start; }
  .purpose-card__story { grid-template-columns: 5rem minmax(0, 1fr); padding-inline: var(--space-4); }
  .purpose-card .brand-scene__mark { inline-size: var(--space-11); }
  .purpose-card__message h2 { font-size: var(--text-base); }
  .purpose-card__footer { justify-content: center; }
}
@media (max-width: 47.999rem) {
  .landing-hero__inner { grid-template-columns: minmax(0, 1fr); }
  .purpose-card__story { grid-template-columns: 5rem minmax(0, 1fr); padding-inline: var(--space-4); gap: var(--space-3); }
  .purpose-card .brand-scene__mark { inline-size: var(--space-11); }
  .purpose-card__message h2 { font-size: var(--text-base); }
  .purpose-card__footer { justify-content: center; }
  .support-route__body, .support-route__visual figcaption { padding-inline: var(--space-5); }
}