/* Our Sponsorship: Bambi's memorial sponsorship section of the home page.
   Every rule starts with .bambi-sponsorship, so nothing else on any page changes.
   Fonts, the red, the pink frame and the card shadow are the site's own. */

.bambi-sponsorship {
  /* Site values (the same as elsewhere on the site, repeated so this file stands alone) */
  --acp-red: #BB1100;
  --acp-frame: #FF99CC;
  --acp-card-radius: 4px;
  --acp-card-shadow: 0 4px 8px 0 rgba(0,0,0,.2), 0 6px 20px 0 rgba(0,0,0,.19);
  --acp-card-shadow-hover: 0 6px 12px 0 rgba(0,0,0,.24), 0 10px 28px 0 rgba(0,0,0,.22);
  --acp-header-clearance: 100px;
  --acp-font-body: "open_sansregular", Arial, sans-serif;
  --acp-font-heading: "roboto_condensedregular", "Arial Narrow", Arial, sans-serif;
  --acp-yellow: #FFF32C;
  --acp-gold: #FFCC00;
  --acp-muted: #777;

  /* Section values */
  --bsp-band: linear-gradient(90deg, hsl(359,100%,38%) 0%, hsl(359,100%,45%) 42%, hsl(359,100%,38%) 100%);
  --bsp-blue-band: linear-gradient(105deg, #073e75, #0b6aa8);
  --bsp-blue: #076797;
  --bsp-impact-bg: linear-gradient(130deg, #111 0%, #132d4c 64%, #0b5d8c 100%);
  --bsp-impact-soft: #efc5db;
  --bsp-wordmark-pink: #ec8cbd;
  --bsp-wordmark-font: bold italic 24px/1.2 "Times New Roman", Times, serif;
  --bsp-tint: #fff0f8;
  --bsp-tint-soft: #fff8fc;
  --bsp-ink-2: #555;
  --bsp-ink-3: #666;
  --bsp-muted: #6b6b6b;
  --bsp-line: #ddd;
  --bsp-field-line: #8a8a8a;
  --bsp-heart: #FF0000;
  --bsp-photo-fade: 900ms;
  --bsp-tribute-w: 340px;            /* the tribute picture's width, set per layout band below */
  --bsp-tribute-ar: calc(720 / 543); /* its shape: the same two numbers as its width and height attributes */

  display: block;
  clear: both; /* the divider above is a floated full-width column; start below it */
  padding: 0; /* main.css gives every section a 60px top padding */
  scroll-margin-top: var(--acp-header-clearance);
  font: 13px/1.6 var(--acp-font-body);
  color: #000;
}

/* Undo the page-wide heading, paragraph, label and link styles inside this section only */
.bambi-sponsorship :where(h2, h3, h4, p, figure, ul) { margin: 0; }
.bambi-sponsorship :where(h2, h3, h4) { font-family: var(--acp-font-heading); font-weight: normal; line-height: 1.2; color: #000; }
.bambi-sponsorship :where(label) { display: block; max-width: none; margin: 0; font-weight: normal; }
.bambi-sponsorship :where(button, select) { font: inherit; }
.bambi-sponsorship :where(button) { cursor: pointer; color: inherit; }
/* :where() keeps this as weak as the site's own a:hover rule, so each link's colour below still wins */
.bambi-sponsorship a,
.bambi-sponsorship a:where(:hover, :focus) { color: inherit; text-underline-offset: 4px; }
.bambi-sponsorship summary { display: list-item; cursor: pointer; }
.bambi-sponsorship [hidden] { display: none !important; }
.bambi-sponsorship:not(.is-ready) .bsp-needs-script { display: none !important; }

/* Focus: always visible (the site removes the outline from focused links) */
.bambi-sponsorship :is(a, button, select, summary, video):focus-visible { outline: 3px solid var(--acp-red); outline-offset: 4px; }
.bambi-sponsorship :is(a, button, select, summary, video):focus:not(:focus-visible) { outline: none; }

/* Icons: inline SVG that takes the colour of its text */
.bambi-sponsorship .bsp-icon {
  display: inline-block; flex: none; width: 1em; height: 1em; vertical-align: -.125em;
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.bambi-sponsorship .bsp-icon--solid { fill: currentColor; stroke: none; }
.bambi-sponsorship .bsp-arrow { font-size: 18px; transition: transform .2s; }
.bambi-sponsorship [aria-expanded="true"] .bsp-when-closed,
.bambi-sponsorship [aria-expanded="false"] .bsp-when-open,
.bambi-sponsorship [aria-pressed="true"] .bsp-when-playing,
.bambi-sponsorship [aria-pressed="false"] .bsp-when-paused { display: none; }

/* Heading row: the section's heading keeps the look it has on the page today */
.bambi-sponsorship .bsp-top { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; padding: 30px 0 21px; }
.bambi-sponsorship .bsp-title { font-size: 34.125px; line-height: 1.1; }
.bambi-sponsorship .bsp-heart { width: .8em; height: .8em; margin-left: 4px; vertical-align: -.05em; color: var(--bsp-heart); }
.bambi-sponsorship .bsp-subtitle { margin-top: 8px; font: 23px/1.35 var(--acp-font-heading); color: var(--acp-muted); }
.bambi-sponsorship .bsp-motto {
  padding-bottom: 7px; border-bottom: 3px solid var(--acp-gold); white-space: nowrap;
  font-size: 11px; letter-spacing: .07em; text-transform: uppercase; color: var(--bsp-muted);
}

/* Hero */
.bambi-sponsorship .bsp-hero {
  display: grid; grid-template-columns: 32% 1fr; min-height: 232px; overflow: hidden;
  background: #fff; border: 1px solid var(--acp-frame); border-radius: var(--acp-card-radius); box-shadow: var(--acp-card-shadow);
}

/* Portrait: photos fill the frame, each with its own focal point */
.bambi-sponsorship .bsp-portrait { position: relative; min-height: 232px; overflow: hidden; isolation: isolate; background: var(--bsp-tint); }
.bambi-sponsorship .bsp-portrait img {
  position: absolute; inset: 0; z-index: 0; display: block; width: 100%; height: 100%; max-width: none;
  object-fit: cover; object-position: var(--bsp-focus, 50% 50%);
  opacity: 0; transition: opacity var(--bsp-photo-fade) ease-in-out;
}
.bambi-sponsorship .bsp-portrait img.is-active { opacity: 1; z-index: 1; }
.bambi-sponsorship .bsp-portrait img.is-leaving { opacity: 1; z-index: 0; }
.bambi-sponsorship .bsp-portrait::after {
  content: ""; position: absolute; inset: 55% 0 0; z-index: 2; pointer-events: none;
  background: linear-gradient(transparent, rgba(0,0,0,.83));
}
.bambi-sponsorship .bsp-portrait figcaption {
  position: absolute; left: 20px; right: 20px; bottom: 15px; z-index: 3; pointer-events: none;
  display: flex; align-items: baseline; gap: 12px; color: #fff; font-size: 12px; text-shadow: 1px 1px 2px #000;
}
.bambi-sponsorship .bsp-portrait figcaption strong { font: 30px/1 var(--acp-font-heading); }
.bambi-sponsorship .bsp-photo-toggle {
  position: absolute; top: 10px; right: 10px; z-index: 4; display: grid; place-items: center;
  width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: rgba(0,0,0,.55); color: #fff;
}
.bambi-sponsorship .bsp-photo-toggle .bsp-icon { width: 18px; height: 18px; }
.bambi-sponsorship .bsp-photo-toggle:focus-visible { outline: 3px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 7px #000; }

/* Story side, with the tribute photo seated flush in its lower right corner. The story column is always
   tall enough for all of her (her ears 12px below its top), and the text stops short of her back. */
.bambi-sponsorship .bsp-hero-copy {
  position: relative; overflow: hidden; padding: 23px 290px 24px 29px;
  min-height: calc(var(--bsp-tribute-w) / var(--bsp-tribute-ar) + 12px);
  background: linear-gradient(105deg, #fff 55%, var(--bsp-tint));
}
.bambi-sponsorship .bsp-wordmark {
  position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 7px;
  font: var(--bsp-wordmark-font); color: var(--bsp-wordmark-pink); text-shadow: 1px 1px 0 #777;
}
.bambi-sponsorship .bsp-wordmark-upper { font-size: 21px; }
.bambi-sponsorship .bsp-paw { position: relative; flex: none; display: inline-block; width: 26px; height: 28px; margin: 0 2px; color: #000; transform: rotate(-10deg); }
.bambi-sponsorship .bsp-paw span { position: absolute; top: 0; width: 6px; height: 9px; border-radius: 50%; background: currentColor; }
.bambi-sponsorship .bsp-paw span:nth-child(1) { left: 0; top: 7px; transform: rotate(-30deg); }
.bambi-sponsorship .bsp-paw span:nth-child(2) { left: 7px; }
.bambi-sponsorship .bsp-paw span:nth-child(3) { left: 15px; top: 1px; }
.bambi-sponsorship .bsp-paw span:nth-child(4) { left: 22px; top: 8px; transform: rotate(28deg); }
.bambi-sponsorship .bsp-paw::after {
  content: ""; position: absolute; left: 5px; top: 13px; width: 17px; height: 15px;
  background: currentColor; border-radius: 60% 60% 40% 40%; transform: rotate(6deg);
}
.bambi-sponsorship .bsp-hero-title { position: relative; z-index: 1; margin: 12px 0 8px; font-size: 36px; line-height: 1.15; }
.bambi-sponsorship .bsp-hero-title em { font-style: normal; color: var(--acp-red); }
.bambi-sponsorship .bsp-hero-text { position: relative; z-index: 1; max-width: 520px; font-size: 13px; line-height: 1.7; color: var(--bsp-ink-2); }
.bambi-sponsorship .bsp-hero-bottom { position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 20px; margin-top: 18px; }
.bambi-sponsorship .bsp-story-link {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; max-width: 100%;
  font-size: 12px; font-weight: bold; text-decoration: none; color: var(--acp-red);
}
.bambi-sponsorship .bsp-story-link:where(:hover, :focus) { color: var(--acp-red); text-decoration: none; }
.bambi-sponsorship .bsp-story-link > span { padding: 3px 0; border-bottom: 1px solid #ee9b93; }
.bambi-sponsorship .bsp-powered { display: flex; align-items: center; gap: 7px; }
.bambi-sponsorship .bsp-powered-label { font: 11px/1 var(--acp-font-heading); letter-spacing: .035em; color: var(--bsp-ink-2); }
.bambi-sponsorship .bsp-logo-text {
  position: relative; isolation: isolate; display: inline-flex; white-space: nowrap;
  font: bold italic 22px/1.1 "Times New Roman", Times, serif; letter-spacing: -.9px; color: #fff;
  text-shadow: -1px -1px 0 #353535, 1px -1px 0 #353535, -1px 1px 0 #353535, 1px 1px 0 #353535;
}
.bambi-sponsorship .bsp-logo-text b,
.bambi-sponsorship .bsp-logo-text small { font: inherit; }
.bambi-sponsorship .bsp-logo-tint { position: relative; }
.bambi-sponsorship .bsp-logo-tint::before {
  content: ""; position: absolute; z-index: -1; left: -5%; bottom: -10%; width: 107%; height: 83%;
  background: #fff000; border-bottom: 2px solid #555; border-radius: 50%; transform: rotate(-6deg);
}
.bambi-sponsorship .bsp-tribute {
  position: absolute; right: 0; bottom: 0; z-index: 2; display: block; width: var(--bsp-tribute-w); height: auto; max-width: none; pointer-events: none;
  object-fit: contain; object-position: right bottom; filter: drop-shadow(0 3px 3px rgba(0,0,0,.09));
}

/* Latest sponsorships */
/* when the heading and note do not fit on one line, the note drops below rather than the heading breaking */
.bambi-sponsorship .bsp-latest-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 2px 12px; margin: 25px 0 12px; }
.bambi-sponsorship .bsp-latest-title { font-size: 24px; }
.bambi-sponsorship .bsp-latest-note { font-size: 12px; color: var(--bsp-muted); }
.bambi-sponsorship .bsp-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 23px; }
.bambi-sponsorship .bsp-card {
  --bsp-accent: var(--acp-red);
  position: relative; display: flex; flex-direction: column; min-width: 0; overflow: hidden;
  background: #fff; border: 1px solid var(--acp-frame); border-radius: var(--acp-card-radius); box-shadow: var(--acp-card-shadow);
  transition: transform .2s, box-shadow .2s;
}
.bambi-sponsorship .bsp-card--blue { --bsp-accent: var(--bsp-blue); }
.bambi-sponsorship .bsp-card-top {
  flex-shrink: 0; display: flex; justify-content: space-between; align-items: center; gap: 10px; height: 38px; padding: 10px 19px;
  background: var(--bsp-band); color: #fff; font-size: 12px; font-weight: bold; line-height: 1.2;
}
.bambi-sponsorship .bsp-card--blue .bsp-card-top { background: var(--bsp-blue-band); }
.bambi-sponsorship .bsp-card-top > span:not(.bsp-tag) { font-size: 11px; letter-spacing: .03em; }
.bambi-sponsorship .bsp-tag {
  display: inline-block; padding: 4px 7px; border-radius: 2px; background: var(--acp-yellow); color: #262000;
  font-size: 11px; font-weight: bold; letter-spacing: .04em; text-transform: uppercase;
}
.bambi-sponsorship .bsp-card-body { position: relative; flex: 1; min-width: 0; padding: 17px 20px 18px; }
.bambi-sponsorship .bsp-amount { display: block; margin: 0 0 10px; font: 64px/1 var(--acp-font-heading); letter-spacing: -2px; color: var(--bsp-accent); }
.bambi-sponsorship .bsp-amount small { margin-right: 2px; font-size: 34px; line-height: 1.35; letter-spacing: 0; vertical-align: top; }
.bambi-sponsorship .bsp-gift {
  position: absolute; top: 24px; right: 19px; display: grid; place-items: center; width: 47px; height: 47px;
  border-radius: 50%; background: #fff0f7; color: #c8224e;
}
.bambi-sponsorship .bsp-gift .bsp-icon { width: 22px; height: 22px; }
.bambi-sponsorship .bsp-card--blue .bsp-gift { background: #e8f6ff; color: #0877bb; }
.bambi-sponsorship .bsp-recipient { display: flex; align-items: center; gap: 12px; min-height: 86px; }
.bambi-sponsorship .bsp-recipient-copy { flex: 1; min-width: 0; }
.bambi-sponsorship .bsp-org-logo { flex: none; display: block; width: 64px; height: 86px; }
.bambi-sponsorship .bsp-org-logo img { display: block; width: 100%; height: 100%; object-fit: contain; }
.bambi-sponsorship .bsp-card-title { max-width: 260px; margin: 0 0 8px; font-size: 21px; }
.bambi-sponsorship .bsp-card-text { min-height: 18px; font-size: 12px; color: var(--bsp-ink-3); }
.bambi-sponsorship .bsp-card-link {
  flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; height: 56px;
  padding: 12px 18px; border: 0; border-top: 1px solid #efdfeb; background: var(--bsp-tint-soft);
  font-size: 12px; font-weight: bold; text-align: left; color: var(--bsp-accent);
}
.bambi-sponsorship .bsp-card-link::after { content: ""; position: absolute; inset: 0; } /* the whole card opens its details */
.bambi-sponsorship .bsp-card-link:focus-visible { outline-offset: -5px; }
.bambi-sponsorship .bsp-card--blue .bsp-card-link { background: #eff9ff; border-top-color: #d3eaf6; }

/* The adoption milestone card */
.bambi-sponsorship .bsp-card--impact { --bsp-accent: var(--acp-yellow); background: var(--bsp-impact-bg); color: #fff; }
.bambi-sponsorship .bsp-card--impact .bsp-card-top { background: #101010; border-bottom: 2px solid var(--acp-gold); }
.bambi-sponsorship .bsp-card--impact .bsp-card-title { color: #fff; }
.bambi-sponsorship .bsp-card--impact .bsp-card-text { color: #e8e8e8; }
.bambi-sponsorship .bsp-micro { margin-top: 6px; font-size: 12px; color: var(--bsp-impact-soft); }
.bambi-sponsorship .bsp-card--impact .bsp-card-link { background: #0a192b; border-top-color: #3d4c5a; color: #fff; }
.bambi-sponsorship .bsp-card--impact .bsp-card-link:focus-visible { outline-color: var(--acp-yellow); }

/* Action bar: both buttons open their panel in place */
.bambi-sponsorship .bsp-bar {
  display: flex; justify-content: space-between; align-items: stretch; gap: 18px;
  margin-top: 24px; padding-bottom: 23px; border-bottom: 1px solid var(--bsp-line);
}
.bambi-sponsorship .bsp-bar-button {
  display: flex; align-items: center; justify-content: center; gap: 11px; min-height: 45px; padding: 11px 19px;
  border: 1px solid var(--acp-red); border-radius: var(--acp-card-radius); font-size: 12px; font-weight: 600;
}
.bambi-sponsorship .bsp-bar-button--primary { background: var(--bsp-band); border-color: #d20004; color: #fff; box-shadow: 0 3px 8px rgba(189,23,21,.13); }
.bambi-sponsorship .bsp-bar-button--secondary { background: #fff; color: var(--acp-red); }
.bambi-sponsorship .bsp-bar-button--secondary[aria-expanded="true"] { background: var(--bsp-tint); }
.bambi-sponsorship .bsp-count { font-size: 11px; font-weight: normal; }
.bambi-sponsorship .bsp-plus { display: inline-flex; color: var(--acp-yellow); font-size: 20px; }
.bambi-sponsorship .bsp-round {
  display: grid; place-items: center; flex: none; width: 22px; height: 22px; border-radius: 50%;
  background: var(--acp-red); color: #fff; font-size: 10px;
}

/* Archive and videos panels. Both are written into the page, so they read
   without scripts; the script closes them and the bar buttons open them. */
.bambi-sponsorship .bsp-panel { padding: 24px 0; border-bottom: 1px solid var(--bsp-line); scroll-margin-top: var(--acp-header-clearance); }
.bambi-sponsorship .bsp-panel-head { display: flex; justify-content: space-between; align-items: baseline; gap: 15px; margin-bottom: 18px; }
.bambi-sponsorship .bsp-panel-title { font-size: 29px; }
.bambi-sponsorship .bsp-panel-note { font-size: 12px; color: var(--bsp-muted); }

/* Archive filters: one guided category choice, with organisation and year tucked underneath.
   Written into the page but shown only once the script is running (rows never leave the page). */
.bambi-sponsorship .bsp-filter-panel {
  padding: 18px 20px; border: 1px solid #efcbdc; border-top: 3px solid var(--acp-frame); border-radius: var(--acp-card-radius);
  background: linear-gradient(110deg, var(--bsp-tint-soft), #fff);
}
.bambi-sponsorship .bsp-category { max-width: 650px; }
.bambi-sponsorship .bsp-category .bsp-filter-label { margin-bottom: 10px; font: 23px/1.2 var(--acp-font-heading); color: #000; }
.bambi-sponsorship .bsp-category select {
  display: block; width: 100%; height: 52px; padding: 11px 42px 11px 15px; cursor: pointer;
  border: 1px solid var(--acp-red); border-radius: var(--acp-card-radius); background: #fff; color: #111;
  font: 14px var(--acp-font-body); box-shadow: 0 2px 5px rgba(187,17,0,.06);
}
.bambi-sponsorship .bsp-category-description { margin-top: 9px; font-size: 12px; color: var(--bsp-ink-3); }
.bambi-sponsorship .bsp-more { margin-top: 16px; padding-top: 13px; border-top: 1px solid #eadce4; }
.bambi-sponsorship .bsp-more summary { min-height: 44px; padding: 10px 0; font-size: 12px; font-weight: bold; color: var(--acp-red); }
.bambi-sponsorship .bsp-optional { margin-left: 5px; font-size: 11px; font-weight: normal; color: var(--bsp-muted); }
.bambi-sponsorship .bsp-filters { display: flex; align-items: flex-end; gap: 14px; max-width: 780px; margin: 15px 0 10px; }
.bambi-sponsorship .bsp-filters label { flex: 1; min-width: 0; }
.bambi-sponsorship .bsp-filters label:first-child { flex: 2; }
.bambi-sponsorship .bsp-filter-label { display: block; margin-bottom: 6px; font-size: 12px; font-weight: bold; color: #222; }
.bambi-sponsorship .bsp-filters select {
  width: 100%; height: 46px; padding: 10px; cursor: pointer; border: 1px solid var(--bsp-field-line); border-radius: var(--acp-card-radius);
  background: #fff; color: #222; font-size: 12px;
}
.bambi-sponsorship .bsp-filter-help { font-size: 12px; color: var(--bsp-ink-3); }
.bambi-sponsorship .bsp-filter-adjustment { margin-top: 10px; padding: 9px 12px; border-left: 3px solid var(--acp-gold); background: #fff7d9; color: #704012; font-size: 12px; }
.bambi-sponsorship .bsp-results-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 12px 0; }
.bambi-sponsorship .bsp-results-note { font-size: 12px; line-height: 1.6; color: var(--bsp-muted); }
.bambi-sponsorship .bsp-results-note strong { color: #333; }
.bambi-sponsorship .bsp-current-selection { display: block; margin-top: 5px; font-size: 12px; color: var(--bsp-muted); }
.bambi-sponsorship .bsp-clear {
  flex: none; min-height: 44px; padding: 8px 13px; border: 1px solid #c33; border-radius: var(--acp-card-radius);
  background: #fff; color: var(--acp-red); font-size: 12px; font-weight: bold;
}
.bambi-sponsorship .bsp-empty { padding: 27px 18px; border: 1px solid var(--bsp-line); border-radius: var(--acp-card-radius); background: #fafafa; color: #333; text-align: center; }
.bambi-sponsorship .bsp-empty h4 { margin-bottom: 14px; font-size: 25px; line-height: 1.25; }

/* Archive rows: each gift opens in place to its story and links */
.bambi-sponsorship .bsp-rows { border-top: 1px solid #eee; }
.bambi-sponsorship .bsp-row { border-bottom: 1px solid #eee; background: #fff; scroll-margin-top: var(--acp-header-clearance); }
.bambi-sponsorship .bsp-row-summary {
  display: grid; grid-template-columns: 100px minmax(0, 1fr) 100px 100px; align-items: center; gap: 18px; min-height: 72px;
  padding: 14px 8px; border-left: 3px solid transparent; list-style: none; text-align: left;
}
.bambi-sponsorship .bsp-row-summary::-webkit-details-marker { display: none; }
.bambi-sponsorship .bsp-row-summary:focus-visible { outline-offset: -3px; }
.bambi-sponsorship .bsp-row[open] > .bsp-row-summary { background: var(--bsp-tint-soft); border-left-color: var(--acp-frame); }
.bambi-sponsorship .bsp-row time { font-size: 12px; color: var(--bsp-muted); }
.bambi-sponsorship .bsp-row-main { min-width: 0; }
.bambi-sponsorship .bsp-row-main strong { display: block; font-size: 13px; font-weight: bold; }
.bambi-sponsorship .bsp-row-description { display: block; margin-top: 4px; font-size: 12px; color: var(--bsp-muted); }
.bambi-sponsorship .bsp-row-sum { text-align: right; font: 23px var(--acp-font-heading); color: var(--acp-red); }
.bambi-sponsorship .bsp-row-sum.is-long { font-size: 17px; }
.bambi-sponsorship .bsp-row-action { display: inline-flex; align-items: center; justify-content: flex-end; gap: 4px; white-space: nowrap; font-size: 12px; font-weight: bold; color: var(--acp-red); }
.bambi-sponsorship .bsp-row-action .bsp-arrow { font-size: 16px; }
.bambi-sponsorship .bsp-row[open] .bsp-row-action .bsp-arrow { transform: rotate(90deg); }
.bambi-sponsorship .bsp-row-body { padding: 4px 8px 22px 129px; background: var(--bsp-tint-soft); border-left: 3px solid var(--acp-frame); }
.bambi-sponsorship .bsp-row-copy { max-width: 680px; font-size: 13px; line-height: 1.8; color: var(--bsp-ink-2); }
.bambi-sponsorship .bsp-row-copy p + p { margin-top: 10px; }
.bambi-sponsorship .bsp-row-links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.bambi-sponsorship .bsp-row-links a {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 10px 13px; font-size: 12px; text-decoration: none;
  border: 1px solid var(--bsp-line); border-radius: 3px; background: #fff;
}
.bambi-sponsorship .bsp-row-links a:first-child { background: var(--bsp-band); border-color: #d20004; color: #fff; }
.bambi-sponsorship .bsp-row-links .bsp-arrow { font-size: 15px; }
.bambi-sponsorship .bsp-originals { margin-top: 20px; font-size: 12px; }
.bambi-sponsorship .bsp-originals summary { min-height: 44px; padding: 10px 0; color: var(--acp-red); }
.bambi-sponsorship .bsp-originals p { margin-top: 12px; }
.bambi-sponsorship .bsp-originals ul { padding-left: 20px; line-height: 2; }
.bambi-sponsorship .bsp-originals a { text-decoration: underline; }
.bambi-sponsorship .bsp-originals .bsp-arrow { margin-left: 4px; font-size: 13px; }

/* Videos: each story plays in place, fetched only when a visitor presses play */
.bambi-sponsorship .bsp-video-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 15px; align-items: stretch; }
/* Rob 10-03-2026: card heights of any type match and line up top and bottom. Each tile stretches to its row;
   the tile is a flex column, so its caption stays under the video and the spare height sits at the bottom. */
.bambi-sponsorship .bsp-video-grid--level-rows-v1 > .bsp-video-tile { height: 100%; }
.bambi-sponsorship .bsp-video-tile {
  display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 12px; text-align: left;
  border: 1px solid var(--acp-frame); border-radius: var(--acp-card-radius); background: linear-gradient(135deg, #fff, #f1f1f1); box-shadow: 0 3px 8px rgba(0,0,0,.07);
}
.bambi-sponsorship .bsp-video-tile video { display: block; width: 100%; height: auto; aspect-ratio: 9 / 16; background: #000; border-radius: 2px; }
.bambi-sponsorship .bsp-video-tile figcaption { display: flex; flex-direction: column; gap: 4px; }
.bambi-sponsorship .bsp-video-tile strong { font: 18px/1.25 var(--acp-font-heading); }
.bambi-sponsorship .bsp-video-tile small { font-size: 12px; color: var(--bsp-muted); }

/* Partner strip */
.bambi-sponsorship .bsp-partners { padding: 19px 0 23px; }
.bambi-sponsorship .bsp-partners-lead { margin-bottom: 12px; font-size: 18px; }
.bambi-sponsorship .bsp-partner-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.bambi-sponsorship .bsp-partner {
  --bsp-partner-line: #169be1; --bsp-partner-bg: #f3fbff;
  display: grid; grid-template-columns: minmax(0, 1fr) 18px; grid-template-rows: 96px auto; align-content: start; gap: 13px 8px;
  min-height: 185px; padding: 16px 18px; text-decoration: none; color: #111;
  border: 1px solid var(--bsp-line); border-left: 4px solid var(--bsp-partner-line); border-radius: 3px; background: var(--bsp-partner-bg);
  transition: box-shadow .2s, transform .2s;
}
.bambi-sponsorship .bsp-partner:where(:hover, :focus) { color: #111; text-decoration: none; }
.bambi-sponsorship .bsp-partner--sale { --bsp-partner-line: #39892c; --bsp-partner-bg: #f4faef; }
.bambi-sponsorship .bsp-partner--hope { --bsp-partner-line: #e35494; --bsp-partner-bg: #fff1f7; }
.bambi-sponsorship .bsp-partner--k9 { --bsp-partner-line: #303e59; --bsp-partner-bg: #f5f5f5; }
.bambi-sponsorship .bsp-partner-logo { grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; min-width: 0; height: 96px; padding: 6px 12px; }
.bambi-sponsorship .bsp-partner-logo img { display: block; width: auto; height: auto; max-width: 100%; max-height: 82px; }
.bambi-sponsorship .bsp-partner-copy { display: block; min-width: 0; align-self: center; }
.bambi-sponsorship .bsp-partner-name { display: block; font-size: 14px; font-weight: 600; line-height: 1.3; color: #111; }
.bambi-sponsorship .bsp-partner-description { display: block; margin-top: 3px; font-size: 12px; color: var(--bsp-ink-3); }
.bambi-sponsorship .bsp-partner .bsp-arrow--out { align-self: center; justify-self: end; color: var(--acp-red); }

/* Hover belongs to real pointers only, so nothing sticks after a tap */
@media (hover: hover) and (pointer: fine) {
  .bambi-sponsorship .bsp-card:hover { transform: translateY(-2px); box-shadow: var(--acp-card-shadow-hover); }
  .bambi-sponsorship .bsp-partner:hover { transform: translateY(-2px); box-shadow: 0 3px 9px rgba(0,0,0,.13); }
  .bambi-sponsorship .bsp-row-summary:hover { background: #fff5fa; border-left-color: var(--acp-frame); }
  .bambi-sponsorship .bsp-clear:hover { background: #fff0f5; }
  .bambi-sponsorship .bsp-video-tile:hover { border-color: var(--acp-red); }
  .bambi-sponsorship :is(a, button):hover .bsp-arrow--out { transform: translate(2px, -2px); }
  .bambi-sponsorship :is(a, button):hover .bsp-arrow--next,
  .bambi-sponsorship .bsp-card:hover .bsp-arrow--next { transform: translateX(2px); }
}

/* The section heading steps down exactly as it does today */
@media (max-width: 800px) {
  .bambi-sponsorship .bsp-title { font-size: 32.5px; }
  .bambi-sponsorship .bsp-subtitle { font-size: 21.333px; }
}

/* 992px to 1199px: the card is 638px wide (774px above), so the picture narrows to stay clear of the "Powered by" logo */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .bambi-sponsorship { --bsp-tribute-w: 240px; }
  .bambi-sponsorship .bsp-hero-copy { padding-right: 207px; }
}

/* Below 992px: the column is 720px or less */
@media (max-width: 991.98px) {
  .bambi-sponsorship { --bsp-tribute-w: 250px; }
  .bambi-sponsorship .bsp-hero { grid-template-columns: 31% 1fr; }
  .bambi-sponsorship .bsp-hero-copy { padding: 23px 195px 23px 23px; }
  .bambi-sponsorship .bsp-hero-title { font-size: 30px; }
  .bambi-sponsorship .bsp-powered { display: none; }
  .bambi-sponsorship .bsp-cards { grid-template-columns: 1fr; gap: 16px; }
  .bambi-sponsorship .bsp-amount { font-size: 60px; }
  .bambi-sponsorship .bsp-amount small { font-size: 32px; }
  .bambi-sponsorship .bsp-bar-button { padding: 11px 14px; }
  .bambi-sponsorship .bsp-row-body { padding-left: 21px; }
  .bambi-sponsorship .bsp-video-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bambi-sponsorship .bsp-partner-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bambi-sponsorship .bsp-partner { padding: 15px 17px; }
}

@media (max-width: 767.98px) {
  .bambi-sponsorship { --bsp-tribute-w: 220px; }
  .bambi-sponsorship .bsp-hero-copy { padding-right: 147px; }
}

/* Phones */
@media (max-width: 640px) {
  .bambi-sponsorship { --bsp-tribute-w: 190px; }
  .bambi-sponsorship .bsp-top { padding: 24px 0 18px; }
  .bambi-sponsorship .bsp-title { font-size: 30.55px; }
  .bambi-sponsorship .bsp-subtitle { margin-top: 6px; font-size: 19px; }
  .bambi-sponsorship .bsp-motto { display: none; }

  .bambi-sponsorship .bsp-hero { grid-template-columns: 1fr; min-height: 0; }
  .bambi-sponsorship .bsp-portrait { min-height: 0; aspect-ratio: 1.57; }
  .bambi-sponsorship .bsp-portrait figcaption { gap: 10px; font-size: 12px; }
  .bambi-sponsorship .bsp-portrait figcaption strong { font-size: 29px; }
  .bambi-sponsorship .bsp-hero-copy { display: grid; grid-template-columns: max-content minmax(0, 1fr); column-gap: 8px; min-height: 0; padding: 22px; }
  .bambi-sponsorship .bsp-hero-copy > .bsp-wordmark,
  .bambi-sponsorship .bsp-hero-copy > .bsp-hero-title,
  .bambi-sponsorship .bsp-hero-copy > .bsp-hero-text { grid-column: 1 / -1; }
  .bambi-sponsorship .bsp-wordmark { gap: 4px; font-size: 21px; }
  .bambi-sponsorship .bsp-wordmark-upper { font-size: 13px; }
  .bambi-sponsorship .bsp-paw { margin: 0 -5px 0 -3px; transform: scale(.7) rotate(-10deg); }
  .bambi-sponsorship .bsp-hero-title { margin: 11px 0 8px; }
  .bambi-sponsorship .bsp-hero-bottom { grid-column: 1; grid-row: 4; align-self: center; margin-top: 16px; }
  .bambi-sponsorship .bsp-story-link { gap: 8px; }
  .bambi-sponsorship .bsp-tribute {
    position: relative; right: auto; bottom: auto; grid-column: 2; grid-row: 4; align-self: end; justify-self: end;
    max-width: calc(100% + 22px); margin: 12px -22px -22px 0;
  }

  .bambi-sponsorship .bsp-latest-head { margin: 24px 0 12px; }
  .bambi-sponsorship .bsp-latest-title { font-size: 22px; }
  .bambi-sponsorship .bsp-gift { top: 22px; right: 20px; width: 42px; height: 42px; }

  .bambi-sponsorship .bsp-bar { gap: 10px; margin-top: 20px; padding-bottom: 20px; }
  .bambi-sponsorship .bsp-bar-button { flex: 1; gap: 6px; min-height: 52px; padding: 10px; }
  .bambi-sponsorship .bsp-bar-button--primary { flex: 1.3; }
  .bambi-sponsorship .bsp-count { display: none; }
  .bambi-sponsorship .bsp-round { width: 19px; height: 19px; }

  .bambi-sponsorship .bsp-panel-head { display: block; }
  .bambi-sponsorship .bsp-panel-note { margin-top: 7px; }
  .bambi-sponsorship .bsp-panel-title { font-size: 26px; }
  .bambi-sponsorship .bsp-filter-panel { padding: 15px 13px; }
  .bambi-sponsorship .bsp-category .bsp-filter-label { font-size: 22px; }
  .bambi-sponsorship .bsp-category select { height: 50px; padding-left: 10px; padding-right: 28px; font-size: 16px; }
  .bambi-sponsorship .bsp-filters { flex-wrap: wrap; gap: 12px; }
  .bambi-sponsorship .bsp-filters label,
  .bambi-sponsorship .bsp-filters label:first-child { flex: 1 1 100%; }
  .bambi-sponsorship .bsp-filters select { font-size: 16px; }
  .bambi-sponsorship .bsp-results-toolbar { align-items: flex-start; gap: 10px; }
  .bambi-sponsorship .bsp-clear { max-width: 130px; padding: 8px 10px; }
  .bambi-sponsorship .bsp-row-summary { grid-template-columns: 56px minmax(0, 1fr) 82px 68px; gap: 7px; padding: 13px 4px; }
  .bambi-sponsorship .bsp-row-sum { font-size: 18px; white-space: nowrap; }
  .bambi-sponsorship .bsp-row-sum.is-long { font-size: 13px; }
  .bambi-sponsorship .bsp-row-action { white-space: normal; line-height: 1.4; }
  .bambi-sponsorship .bsp-row-body { padding: 4px 12px 20px 13px; }
  .bambi-sponsorship .bsp-video-grid { gap: 12px; }
  .bambi-sponsorship .bsp-video-tile { padding: 10px; }
  .bambi-sponsorship .bsp-video-tile strong { font-size: 17px; }

  .bambi-sponsorship .bsp-partners { padding: 17px 0; }
  .bambi-sponsorship .bsp-partner { gap: 11px 5px; padding: 13px 12px; }
  .bambi-sponsorship .bsp-partner-name { font-size: 13px; }
  .bambi-sponsorship .bsp-partner-description { line-height: 1.5; }
  .bambi-sponsorship .bsp-partner-logo { padding: 6px 8px; }
}

@media (max-width: 480px) {
  .bambi-sponsorship .bsp-title { font-size: 27.625px; }
  .bambi-sponsorship .bsp-subtitle { font-size: 17.333px; }
  .bambi-sponsorship .bsp-row-summary { grid-template-columns: minmax(0, 1fr) max-content; gap: 6px 12px; padding: 14px 10px; align-items: baseline; }
  .bambi-sponsorship .bsp-row time { grid-column: 1; grid-row: 1; }
  .bambi-sponsorship .bsp-row-main { grid-column: 1 / -1; grid-row: 2; }
  .bambi-sponsorship .bsp-row-sum { grid-column: 2; grid-row: 1; font-size: 21px; }
  .bambi-sponsorship .bsp-row-sum.is-long { font-size: 16px; }
  .bambi-sponsorship .bsp-row-action { grid-column: 1 / -1; grid-row: 3; justify-content: flex-start; white-space: nowrap; }
}

@media (max-width: 380px) {
  .bambi-sponsorship .bsp-wordmark { font-size: 19px; }
  .bambi-sponsorship .bsp-wordmark-upper { font-size: 12px; }
  .bambi-sponsorship .bsp-partner-grid { grid-template-columns: 1fr; }
  .bambi-sponsorship .bsp-partner { grid-template-columns: 94px minmax(0, 1fr) 18px; grid-template-rows: auto; align-items: center; gap: 13px; min-height: 124px; }
  .bambi-sponsorship .bsp-partner-logo { grid-column: auto; }
  .bambi-sponsorship .bsp-partner-name { font-size: 14px; }
}

/* Reduced motion: nothing moves; the hover shadow still answers the pointer */
@media (prefers-reduced-motion: reduce) {
  .bambi-sponsorship *,
  .bambi-sponsorship *::before,
  .bambi-sponsorship *::after { transition: none !important; animation: none !important; }
  .bambi-sponsorship .bsp-card:hover,
  .bambi-sponsorship .bsp-partner:hover,
  .bambi-sponsorship .bsp-arrow { transform: none !important; }
}