@import url("/zz/fonts.css");
/*
 * "Children waiting for a sponsor" (lib/orphans/section.ts): a soft blue band, a serif heading as on the gift card,
 * then one card per child — photo, first name, age, boy/girl, country, monthly price and a "Sponsor an orphan" button.
 * Cards as on News & Updates (white, 20px corners, layered shadow, lift on hover); the button as the gift card's.
 * Site colours: the logo's blue #006DB8 (buttons and chosen options in its gradient), green #8BC34A; Source Serif 4 headings, Poppins labels, Roboto text.
 * !important where the Alone theme styles h2/h3/p/a/ul globally.
 */
.zzo {
  --b: #006db8; --b-d: #005592; --navy: #006db8; --ink: #101828; --t: #344054; --m: #667085; --line: #e4e7ec; --g: #8bc34a; --g-d: #4f7a1a;
  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  position: relative; display: block; padding: 88px 24px 96px; overflow: hidden;
  background: linear-gradient(180deg, #f3f8fd 0%, #f8fbfe 100%); border-top: 1px solid #e6edf5;
  font-family: "Roboto", system-ui, sans-serif; color: var(--t);
}
.zzo, .zzo *, .zzo *::before, .zzo *::after { box-sizing: border-box; }
.zzo__wrap { position: relative; max-width: 1240px; margin: 0 auto; }
.zzo a { text-decoration: none !important; }
.zzo-sr { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- heading ---------- */
.zzo-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; margin-bottom: 40px; }
.zzo-head__text { max-width: 660px; }
.zzo .zzo-eyebrow { margin: 0 0 12px !important; font: 500 13px/1.4 "Poppins", sans-serif !important; letter-spacing: 0.06em; text-transform: uppercase !important; color: var(--b) !important; }
.zzo .zzo-title {
  margin: 0 !important; font: 700 42px/1.08 var(--serif) !important; letter-spacing: -0.02em; color: #0b1b36 !important;
  text-transform: none !important; text-wrap: balance;
}
.zzo .zzo-lead { margin: 14px 0 0 !important; font: 400 17px/1.6 "Roboto", sans-serif !important; color: #475467 !important; text-wrap: pretty; }
.zzo .zzo-count {
  display: inline-flex; flex: none; align-items: center; gap: 8px; margin: 0 0 6px !important; padding: 10px 18px; border-radius: 999px;
  background: #fff; box-shadow: inset 0 0 0 1px var(--line), 0 1px 2px rgb(16 24 40 / 0.04); font: 400 14px/1.3 "Roboto", sans-serif; color: var(--t);
}
.zzo-count strong { font: 600 15px/1 "Poppins", sans-serif; color: var(--navy); font-variant-numeric: tabular-nums; }

/* ---------- cards ---------- */
.zzo .zzo-grid {
  display: grid; grid-template-columns: repeat(var(--zzo-cols, 4), minmax(0, 1fr)); gap: 18px;
  margin: 0 !important; padding: 0 !important; list-style: none !important;
}
.zzo .zzo-card {
  position: relative; display: flex; flex-direction: column; margin: 0 !important; padding: 0 !important; list-style: none !important;
  border: 1px solid rgb(16 24 40 / 0.06); border-radius: 20px; background: #fff;
  box-shadow: 0 1px 2px rgb(16 24 40 / 0.05), 0 4px 10px -2px rgb(16 24 40 / 0.06), 0 16px 32px -12px rgb(16 24 40 / 0.14);
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.zzo .zzo-card::before { display: none !important; }
.zzo .zzo-card:hover { transform: translateY(-4px); box-shadow: 0 2px 4px rgb(16 24 40 / 0.05), 0 12px 24px -6px rgb(16 24 40 / 0.10), 0 32px 56px -20px rgb(0 85 146 / 0.28); }
.zzo-photo { position: relative; aspect-ratio: 1 / 1; overflow: hidden; border-radius: 19px 19px 0 0; background: linear-gradient(135deg, #e8f1fa, #f4f8ec); isolation: isolate; }
.zzo-photo img { display: block; width: 100% !important; height: 100% !important; max-width: none !important; object-fit: cover; transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1); }
.zzo-card:hover .zzo-photo img { transform: scale(1.035); }
.zzo-photo::after { content: ""; position: absolute; inset: auto 0 0 0; height: 30%; background: linear-gradient(0deg, rgb(0 20 50 / 0.18), rgb(0 20 50 / 0)); pointer-events: none; }
.zzo-ph { display: grid; place-items: center; width: 100%; height: 100%; font: 700 96px/1 var(--serif); color: rgb(0 85 146 / 0.22); }
.zzo-chip {
  position: absolute; z-index: 1; top: 14px; left: 14px; display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 999px;
  background: rgb(255 255 255 / 0.94); box-shadow: 0 4px 14px -4px rgb(16 24 40 / 0.3); font: 500 12.5px/1 "Poppins", sans-serif; color: var(--navy);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.zzo-body { display: flex; flex: 1; flex-direction: column; padding: 20px 22px 22px; }
.zzo .zzo-name { margin: 0 !important; font: 600 21px/1.25 "Poppins", sans-serif !important; letter-spacing: -0.01em; color: var(--navy) !important; text-transform: none !important; }
.zzo .zzo-meta { margin: 6px 0 0 !important; font: 400 14.5px/1.45 "Roboto", sans-serif !important; color: var(--m) !important; }
.zzo .zzo-price {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 10px; margin: 16px 0 18px !important; padding-top: 16px;
  border-top: 1px solid var(--line); font: 400 14px/1.3 "Roboto", sans-serif !important; color: var(--m) !important;
}
.zzo-price strong { font: 600 20px/1 "Poppins", sans-serif; color: var(--ink); }
.zzo .zzo-btn {
  display: flex; align-items: center; justify-content: center; height: 50px; margin-top: auto; padding: 0 18px; border-radius: 999px;
  background: linear-gradient(135deg, #0b7ac4 0%, #006db8 50%, #005592 100%); color: #fff !important; font: 600 15px/1 "Poppins", sans-serif; white-space: nowrap;
  box-shadow: 0 12px 22px -14px rgb(0 85 146 / 0.75), inset 0 1px 0 rgb(255 255 255 / 0.14), inset 0 0 0 99px rgb(255 255 255 / 0); transition: box-shadow 0.2s ease;
}
/* lighter on hover with an inset white wash, not filter: a filter makes the button the box of its ::after below, which
   then shrinks to the button, the hover ends and it grows back — the cursor flickers */
.zzo .zzo-btn:hover { box-shadow: 0 16px 28px -14px rgb(0 85 146 / 0.8), inset 0 1px 0 rgb(255 255 255 / 0.14), inset 0 0 0 99px rgb(255 255 255 / 0.08); }
.zzo .zzo-btn:focus-visible { outline: 3px solid rgb(0 109 184 / 0.35); outline-offset: 3px; }
/* the whole card opens the sponsor page; while the card is lifted it still reaches where the card was, so the hover
   holds at its bottom edge (hence the card's corners clipped on the photo rather than overflow: hidden) */
.zzo .zzo-btn::after { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: 20px; }
.zzo .zzo-card:hover .zzo-btn::after { bottom: -4px; }

/* ---------- under the cards ---------- */
.zzo-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; margin-top: 32px; }
.zzo .zzo-note { display: flex; align-items: center; gap: 10px; margin: 0 !important; font: 400 14.5px/1.5 "Roboto", sans-serif !important; color: var(--m) !important; }
.zzo-note svg { flex: none; color: var(--g-d); }
.zzo .zzo-more {
  display: inline-flex; align-items: center; gap: 10px; height: 48px; padding: 0 24px; border-radius: 999px;
  background: #fff; color: var(--navy) !important; box-shadow: inset 0 0 0 1.5px #c9d4e2, 0 1px 2px rgb(16 24 40 / 0.05);
  font: 600 15px/1 "Poppins", sans-serif; white-space: nowrap; transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, gap 0.25s ease;
}
.zzo .zzo-more:hover, .zzo .zzo-more:focus-visible { gap: 14px; background: var(--navy); color: #fff !important; box-shadow: inset 0 0 0 1.5px var(--navy); }
.zzo .zzo-more:focus-visible { outline: 3px solid rgb(0 109 184 / 0.35); outline-offset: 3px; }
.zzo-empty { max-width: 640px; margin: 0 auto; padding: 44px 32px; border-radius: 24px; background: #fff; text-align: center; box-shadow: 0 1px 2px rgb(16 24 40 / 0.05), 0 16px 32px -12px rgb(16 24 40 / 0.14); }
.zzo .zzo-empty p { margin: 0 0 18px !important; font-size: 16px; line-height: 1.6; color: var(--m); }
.zzo .zzo-empty .zzo-empty__title { margin-bottom: 8px !important; font: 600 20px/1.35 "Poppins", sans-serif; color: var(--navy); }

/* ---------- responsive ---------- */
@media (max-width: 1099px) {
  .zzo .zzo-grid { grid-template-columns: repeat(min(var(--zzo-cols, 4), 2), minmax(0, 1fr)); }
  .zzo .zzo-title { font-size: 36px !important; }
}
@media (max-width: 767px) {
  .zzo { padding: 56px 16px 64px; }
  .zzo-head { flex-direction: column; align-items: flex-start; gap: 18px; margin-bottom: 28px; }
  .zzo .zzo-title { font-size: 30px !important; }
  .zzo .zzo-lead { font-size: 16px !important; }
  /* the cards scroll sideways on phones, edge to edge, one and a bit in view */
  .zzo .zzo-grid {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 76%; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory;
    margin: -10px -16px -22px !important; padding: 14px 16px 40px !important; scrollbar-width: none; -webkit-overflow-scrolling: touch; /* room for the cards' shadow */
  }
  .zzo .zzo-grid::-webkit-scrollbar { display: none; }
  .zzo .zzo-card { scroll-snap-align: center; }
  .zzo .zzo-card:hover { transform: none; }
  .zzo-foot { flex-direction: column; align-items: flex-start; margin-top: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .zzo * { transition: none !important; }
  .zzo .zzo-card:hover, .zzo-card:hover .zzo-photo img { transform: none; }
}