/* ============================================================
   "Explore ways to give" cards (.d-givex / .d-gcard), fidelity pass
   2026-09-24. Figma: Cross Link Section, e.g. programs 3361:15418
   (s3OB1YtX1ctalxmNGbm2gN). Linked after theme.css on /about, /programs
   and /stories-of-hope; theme.css keeps the base rules.
   Card: 422px tall at 1512, 24px / 16px padding, 5px ring in its own fill
   drawn by the .wavy-edge helper, 8px radius. Title H5 left, description
   Body Large in Licorice, the button pinned to the bottom on one line.
   ============================================================ */
.d-givex .d-gcard {
  --wavy-color: var(--neutral-200, #F1EDE5);
  border: 5px solid var(--neutral-200, #F1EDE5);
  padding: 24px 16px; gap: 20px; border-radius: 8px;
  min-height: 422px;
}
.d-givex .d-gcard--sunny { --wavy-color: var(--sunny, #FFD100); border-color: var(--sunny, #FFD100); }
/* The helper's ring is placed from the padding box; move it out past the 5px
   border so the roughened edge shows outside the card, not under it. */
.d-givex .d-gcard.wavy-edge::after { inset: -7.5px; border-width: 5px; border-radius: 10px; }
/* Photo box (2026-10-02): the photos are 3:2 and the frame's 185px-tall box
   showed only about two thirds of their width at 1280, cutting the people at
   the sides (Uplift Circle, Bridge, Legacy). The box now has the photo's own
   shape, so nothing is cropped at any width; the card is 36px shorter. */
.d-givex .d-gcard { min-height: 386px; }
.d-givex .d-gcard-img { aspect-ratio: 3 / 2; height: auto; }
/* Isabel 10-13: match the Partnerships card (.vp-card). Its content sits
   24px / 16px from the edge; ours added the 5px ring border on top of that
   padding (29 / 21). The photo takes the Partnerships 233.6 x 185 box and
   the pill keeps inside the card. */
.d-givex .d-gcard { padding: 19px 11px; }
.d-givex .d-gcard-img { aspect-ratio: 233.6 / 185; }
.d-givex .d-gcard-cta { padding: 8px 18px; max-width: 100%; }
/* One type scale for this component on every page that uses it: heading 44px
   (H3 of the frame), card title 28px (H5), both in Carbon. */
.d-givex .d-givex-title { font-size: 44px; color: var(--carbon, #28201C); }
.d-givex .d-gcard-info h3 { font-size: 28px; color: var(--carbon, #28201C); }
/* Descriptions: Neutral 600 on the Neutral cards, Carbon on the Sunny card. */
.d-givex .d-gcard-info p { font-size: 20px; color: var(--neutral-600, #5C534D); }
.d-givex .d-gcard--sunny .d-gcard-info p { color: var(--carbon, #28201C); }
/* Five 272px cards 16px apart at 1512 (the frame); the text column is 230px. */
@media (min-width: 1101px) { .d-givex .d-gcards { gap: 16px; } }
.d-givex .d-gcard-cta {
  white-space: nowrap; 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);
}
.d-givex .d-gcard:hover .d-gcard-cta { background: var(--neutral-700, #3D342F); }
@media (max-width: 1280px) {
  /* Five across gets too narrow for one-line buttons; let the label wrap. */
  .d-givex .d-gcard-cta { white-space: normal; }
  .d-givex .d-gcard-info h3 { font-size: clamp(22px, 1.9vw, 28px); }
  .d-givex .d-gcard-info p { font-size: clamp(16px, 1.3vw, 20px); }
}
@media (max-width: 1100px) {
  .d-givex .d-gcard { min-height: 0; }
  .d-givex .d-givex-title { font-size: clamp(36px, 4vw, 44px); }
}
/* Keyboard focus: Carbon reads on the white section and on the Sunny card. */
.d-givex :is(a, .btn, .d-gcard):focus-visible { outline: 2px solid var(--carbon, #28201C); outline-offset: 2px; box-shadow: none; }

/* ---- Phones: "Cross Link Section / Mobile" (Figma WmKUes42Xq4m4lJ956wuwe,
   3800:8774). Heading, intro and a full-width "See All", then ONE row of
   272px cards that scrolls sideways, 16px apart, the next card peeking. The
   frame fixes the cards at 390px, which runs the description under the
   button; here the row sets the height and the button stays at the bottom. */
@media (max-width: 720px) {
  .d-sec.d-givex { padding: 40px 24px; gap: 16px; align-items: stretch; }
  .d-givex .d-givex-head { flex-direction: column; align-items: stretch; gap: 16px; }
  .d-givex .d-givex-title { font-size: 36px; line-height: 1.2; letter-spacing: -.5px; margin: 0 0 8px; }
  .d-givex .d-givex-sub { font-size: 16px; line-height: 1.6; }
  .d-givex .d-givex-head > .btn { width: 100%; justify-content: center; white-space: nowrap; font-size: 16px; min-height: 53px; padding: 12px 16px; }
  .d-givex .d-gcards {
    display: flex; flex-wrap: nowrap; gap: 16px; align-items: stretch;
    width: auto; align-self: stretch;
    overflow-x: auto; scroll-snap-type: x mandatory;
    margin-inline: -24px; padding: 10px 24px; scroll-padding-inline: 24px;
  }
  .d-givex .d-gcard { flex: 0 0 272px; min-height: 0; padding: 19px 11px; gap: 20px; scroll-snap-align: start; }
  .d-givex .d-gcard:hover { transform: none; box-shadow: none; }
  .d-givex .d-gcard-info h3 { font-size: 28px; line-height: 1.25; }
  .d-givex .d-gcard-info p { font-size: 18px; line-height: 1.6; }
  .d-givex .d-gcard-cta { white-space: nowrap; font-size: 16px; }
  .d-givex .sc-dots { margin-top: 0; }
}