/* ============================================================
   Program Cross-Link Section ("Explore our programs")
   Figma: s3OB1YtX1ctalxmNGbm2gN, component 3729:23322 (09-24 master copy).
   .pxl-* was built for /about; the program sub-pages use the .xlink-*
   variant below. Self-contained: nothing depends on page CSS. Link this file
   after theme.css. /about no longer carries this section (removed 2026-09-24 to
   match the approved about-us frame), so .pxl-* has no page right now; its
   markup is in git history (about.html at f002118).

   1512 artboard: 96px block / 44px inline padding, 64px between the header
   and the cards, three equal cards 24px apart. Card: Neutral 200 fill with a
   5px hand-drawn ring (the #sh-wavy filter the shared footer carries; with no
   filter on the page the ring is a clean line), 185px photo, H5 title
   left-aligned (as the page instances of 3729:23322 set it, e.g. 3729:23564),
   Body Large copy, small dark "Learn More" button.
   Hover (same as the homepage program cards): lift 4px, soft shadow, photo
   zooms 3%.
   ============================================================ */
.pxl {
  --pxl-carbon: #28201C;
  --pxl-card: #F1EDE5;
  display: flex; flex-direction: column; align-items: center; gap: 64px;
  padding: 96px 44px;
  background: #fff;
  font-family: 'Work Sans', system-ui, sans-serif;
  box-sizing: border-box;
  width: 100%;
}
.pxl *, .pxl *::before, .pxl *::after { box-sizing: border-box; }

.pxl-head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 24px;
  width: 100%; max-width: 1424px;
}
.pxl-head-copy { display: flex; flex-direction: column; gap: 12px; max-width: 900px; min-width: 0; }
.pxl-title {
  font-family: 'Fredoka', system-ui, sans-serif; font-weight: 600;
  font-size: clamp(32px, 2.9vw, 44px); line-height: 1.15;
  color: var(--pxl-carbon); margin: 0;
}
.pxl-sub { font-size: clamp(17px, 1.35vw, 20px); line-height: 1.6; color: #6F6762; margin: 0; }

.pxl-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border-radius: 9999px; border: 1px solid transparent;
  font-family: 'Work Sans', system-ui, sans-serif; font-weight: 600; line-height: 1.6;
  white-space: nowrap; text-decoration: none;
  box-shadow: 0 6px 6px rgba(0,0,0,.08), 0 2px 1px rgba(0,0,0,.06), inset 0 -1px 2px rgba(0,0,0,.1), inset 0 1px 2px rgba(255,255,255,.4);
  transition: background .15s ease, border-color .15s ease;
}
.pxl-btn svg { flex: none; }
.pxl-btn--sunny { background: #FFD100; border-color: #D1A400; color: var(--pxl-carbon); font-size: 16px; padding: 12px 16px; flex: none; }
.pxl-btn--sunny svg { width: 20px; height: 20px; }
.pxl-btn--sunny:hover { background: #D1A400; }
.pxl-btn--dark { background: var(--pxl-carbon); border-color: #3D342F; color: #FDF9F1; font-size: 16px; padding: 8px 20px; align-self: flex-start; }
.pxl-btn--dark svg { width: 16px; height: 16px; }
.pxl-btn:focus-visible, .pxl-card:focus-visible { outline: 2px solid #859B2B; outline-offset: 3px; }

.pxl-cards {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px;
  width: 100%; max-width: 1424px; margin: 0; padding: 0; list-style: none;
}
.pxl-cards > li { display: flex; min-width: 0; }
.pxl-card {
  position: relative; isolation: isolate;
  display: flex; flex-direction: column; width: 100%; min-height: 390px;
  background: var(--pxl-card); border: 5px solid var(--pxl-card); border-radius: 8px;
  color: inherit; text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease;
}
.pxl-card::after {
  content: ""; position: absolute; inset: -4px; border-radius: 10px;
  border: 4px solid var(--pxl-card); pointer-events: none; filter: url(#sh-wavy); z-index: -1;
}
.pxl-card:hover { transform: translateY(-4px); box-shadow: 0 16px 32px rgba(10,13,18,.12); }
.pxl-photo { aspect-ratio: 458.67 / 185; height: auto; width: 100%; border-radius: 8px; overflow: hidden; flex: none; background: #E5E1D8; }
.pxl-photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .45s cubic-bezier(.22,1,.36,1); }
.pxl-card:hover .pxl-photo img { transform: scale(1.03); }
.pxl-body { flex: 1; display: flex; flex-direction: column; gap: 20px; padding: 24px 16px; }
.pxl-text { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.pxl-card-title {
  font-family: 'Fredoka', system-ui, sans-serif; font-weight: 500;
  font-size: clamp(24px, 1.9vw, 28px); line-height: 1.25; color: var(--pxl-carbon);
  text-align: left; margin: 0;
}
.pxl-card-desc { font-size: clamp(17px, 1.35vw, 20px); line-height: 1.6; color: #171211; margin: 0; }

@media (max-width: 1100px) {
  .pxl { padding: 72px 40px; gap: 48px; }
}
@media (max-width: 900px) {
  .pxl-cards { grid-template-columns: 1fr; max-width: 560px; }
  .pxl-card { min-height: 0; }
}
@media (max-width: 720px) {
  .pxl { padding: 56px 16px; gap: 32px; }
  .pxl-head { flex-direction: column; align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  .pxl-card, .pxl-photo img { transition: none; }
  .pxl-card:hover { transform: none; }
  .pxl-card:hover .pxl-photo img { transform: none; }
}

/* ---- Program sub-pages variant (.xlink-*), from the sub-pages build 2026-09-24.
   Same Figma component 3729:23322; reconcile onto one prefix later. ---- */
/* ============================================================
   Program Cross-Link Section ("Explore our programs")
   Figma: Program Cross-Link Section, frame 3729:23322 (More Better
   master copy s3OB1YtX1ctalxmNGbm2gN, 2026-09-24).
   Built by the subpages group on 2026-09-24 so the program detail
   pages did not wait on the shared component. Another builder is
   creating the same file for about/programs; reconcile at merge.
   Class prefix: .xlink-
   Behaviour (hosted mock-up, programs + about): the card lifts 4px with a
   soft shadow on hover; the whole card is one link target.
   ============================================================ */

/* Desktop: Figma "Program Cross-Link Section" 3773:12008 (re-pulled
   2026-10-02): 96px block / 80px inline padding, one-line subtitle, three
   525px Neutral 200 cards with the hand-drawn ring, a photo that fills the
   card above the text inside a 7px Magnolia torn frame (24px radius). */
.xlink {
  display: flex; flex-direction: column; align-items: center; gap: 64px;
  padding: 96px 80px;
  background: #fff;
}
.xlink > * { width: 100%; max-width: 1352px; }

.xlink-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.xlink-headcopy { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.xlink-title {
  font-family: 'Fredoka', system-ui, sans-serif; font-weight: 600;
  font-size: clamp(32px, 2.95vw, 44px); line-height: 1.15;
  color: var(--carbon, #28201C); margin: 0;
}
.xlink-sub {
  font-family: 'Work Sans', system-ui, sans-serif; font-size: 20px; line-height: 1.6;
  color: #6F6762; margin: 0;
}
.xlink-all { flex: none; }

.xlink-cards { display: flex; gap: 24px; align-items: stretch; }
.xlink-card {
  position: relative; isolation: isolate; flex: 1 1 0; min-width: 0; min-height: 525px;
  display: flex; flex-direction: column; gap: 20px; padding: 24px 16px;
  background: var(--neutral-200, #F1EDE5);
  border-radius: 8px;
  transition: transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s cubic-bezier(.22,1,.36,1);
}
/* Hand-drawn ring in the card colour (the footer carries #sh-wavy). */
.xlink-card::before {
  content: ""; position: absolute; inset: -3px; border-radius: 10px;
  border: 5px solid var(--neutral-200, #F1EDE5);
  pointer-events: none; filter: url(#sh-wavy); z-index: -1;
}
.xlink-card:hover, .xlink-card:focus-within { transform: translateY(-4px); box-shadow: 0 16px 32px rgba(10,13,18,.12); }
.xlink-photo { position: relative; flex: 1 1 260px; min-height: 260px; border-radius: 24px; overflow: hidden; }
.xlink-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
/* Torn Magnolia frame around the photo. */
.xlink-photo::after {
  content: ""; position: absolute; inset: -2px; border-radius: 26px;
  border: 8px solid var(--magnolia, #FDF9F1);
  pointer-events: none; filter: url(#sh-wavy);
}
.xlink-body { flex: none; display: flex; flex-direction: column; gap: 20px; }
.xlink-text { display: flex; flex-direction: column; gap: 8px; }
.xlink-name {
  font-family: 'Fredoka', system-ui, sans-serif; font-weight: 500;
  font-size: 28px; line-height: 1.25; text-align: left;
  color: var(--carbon, #28201C); margin: 0;
}
.xlink-desc { font-family: 'Work Sans', system-ui, sans-serif; font-size: 20px; line-height: 1.6; color: var(--neutral-900, #171211); margin: 0; }
.xlink-more {
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 20px; border-radius: 9999px;
  background: var(--carbon, #28201C); border: 1px solid var(--neutral-700, #3D342F);
  color: var(--magnolia, #FDF9F1);
  font-family: 'Work Sans', system-ui, sans-serif; font-weight: 600; font-size: 16px; line-height: 1.6;
  box-shadow: 0 6px 6px rgba(0,0,0,.08), 0 2px 1px rgba(0,0,0,.06), inset 0 -1px 2px rgba(0,0,0,.1), inset 0 1px 2px rgba(255,255,255,.4);
  transition: background var(--ease, .3s ease);
}
.xlink-more svg { width: 16px; height: 16px; flex: none; }
/* One link per card; its hit area covers the whole card. */
.xlink-more::after { content: ""; position: absolute; inset: 0; border-radius: 8px; }
.xlink-card:hover .xlink-more { background: var(--neutral-700, #3D342F); }
.xlink-more:focus-visible { outline: none; }
.xlink-card:focus-within { outline: 3px solid var(--grass-600, #859B2B); outline-offset: 3px; }
/* Isabel 10-13: one photo height on every card (the frame's 288px) and the
   title one line where it fits, so a two-line "Education & Capacity Building"
   no longer shrinks its photo and sets that card apart from its siblings.
   The Learn More pill sits at the foot of every card. */
@media (min-width: 1101px) {
  .xlink-photo { flex: none; height: 288px; min-height: 0; }
  .xlink-body { flex: 1 1 auto; }
  .xlink-more { margin-top: auto; }
  .xlink-name { font-size: clamp(24px, 1.85vw, 28px); }
}

@media (max-width: 1100px) {
  .xlink { padding: 72px 32px; gap: 40px; }
  .xlink-cards { flex-wrap: wrap; }
  .xlink-card { flex: 1 1 calc(50% - 12px); min-height: 440px; }
}
/* Phones: Figma mobile "Program cross-links" (3920:31759 and siblings).
   H3 heading over a 16px subtitle, a scroller of 260px cream cards (2px
   Neutral 200 border, 24px radius, inset 184px photo with the torn edge, H7
   title, full-width dark "Learn More"), the dots, then a full-width "See All"
   BELOW the cards. .xlink-head is flattened so the button can be ordered
   after the scroller without touching the desktop markup. */
@media (max-width: 720px) {
  .xlink { padding: 24px 24px 56px; gap: 16px; align-items: stretch; }
  .xlink > * { max-width: none; }
  .xlink-card::before { display: none; }
  .xlink-head { display: contents; }
  .xlink-headcopy { flex: none; max-width: none; gap: 8px; }
  .xlink-title { font-size: 36px; line-height: 1.2; letter-spacing: -.5px; }
  .xlink-sub { font-size: 16px; color: var(--neutral-600, #5C534D); }
  .xlink-cards {
    order: 1; flex-wrap: nowrap; gap: 12px; width: auto;
    overflow-x: auto; scroll-snap-type: x mandatory;
    margin-inline: -24px; padding: 4px 24px 10px; scroll-padding-inline: 24px;
  }
  .xlink > .sc-dots { order: 2; margin-top: 0; --sc-dot: var(--sunny, #FFD100); }
  .xlink-all { order: 3; width: 100%; min-height: 56px; font-size: 18px; white-space: nowrap; }
  .xlink-card {
    flex: 0 0 260px; min-height: 430px; gap: 16px; padding: 14px;
    background: var(--magnolia, #FDF9F1);
    border: 2px solid var(--neutral-200, #F1EDE5); border-radius: 24px;
    box-shadow: 0 4px 6px -1px rgba(10,13,18,.1), 0 2px 4px -2px rgba(10,13,18,.06);
    scroll-snap-align: start;
  }
  .xlink-card:hover, .xlink-card:focus-within { transform: none; box-shadow: 0 4px 6px -1px rgba(10,13,18,.1), 0 2px 4px -2px rgba(10,13,18,.06); }
  .xlink-photo { flex: none; min-height: 0; height: 184px; border-radius: 16px; }
  .xlink-photo::after { inset: -3px; border-width: 7px; border-radius: 19px; }
  .xlink-body { flex: 1 1 auto; gap: 16px; }
  .xlink-text { flex: 1 1 auto; }
  .xlink-name { font-size: 22px; line-height: 1.3; }
  .xlink-desc { font-size: 16px; color: var(--neutral-600, #5C534D); }
  .xlink-more { align-self: stretch; justify-content: center; min-height: 44px; }
  .xlink-more::after { inset: -2px; border-radius: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .xlink-card { transition: none; }
  .xlink-card:hover, .xlink-card:focus-within { transform: none; }
}