/* Home page additions */
.home-photos { display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.home-photos a { display: block; border-radius: var(--r-lg); overflow: hidden; background: var(--tint-2); }
.home-photos img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 5; transition: transform 0.6s var(--ease); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) { .home-photos a:hover img { transform: scale(1.04); } }
@media (min-width: 900px) {
  .home-photos { grid-template-columns: 1fr 1.4fr 1fr 1.4fr; }
  .home-photos img { aspect-ratio: auto; height: 340px; }
}

/* Events (home) -------------------------------------------------------- */
.home-events__head { display: flex; flex-wrap: wrap; gap: 16px 32px; justify-content: space-between; align-items: flex-end; max-width: none; }
.home-events__head > div { max-width: 36rem; }
.home-events__head h2 { margin: 0; }

.home-events__grid { align-items: stretch; }
/* Past events move after upcoming ones */
.home-events__grid > .is-past { order: 1; }

.home-event { display: flex; flex-direction: column; padding: 0; min-width: 0; }
.home-event,
.js .home-event.reveal { transition: opacity 0.6s var(--ease) var(--reveal-delay, 0s), transform 0.6s var(--ease) var(--reveal-delay, 0s), box-shadow var(--t-shadow, 0.4s ease), border-color var(--t-shadow, 0.4s ease); }

.home-event__media { position: relative; overflow: hidden; aspect-ratio: 16 / 10; border-radius: calc(var(--r-lg) - 1px) calc(var(--r-lg) - 1px) 0 0; background: var(--tint-2); }
.home-event__media img { display: block; width: 100%; height: 100%; object-fit: cover; transform: scale(1.001); transition: transform 0.6s var(--ease), filter 0.6s var(--ease); }
.home-event__media--upper img { object-position: 50% 32%; }
/* Keep the event badge clear of the guest at the left of the portrait. */
.home-event__media--upper .home-event__badge { left: auto; right: 14px; }
.home-event.is-past .home-event__media img { filter: saturate(0.82); }

.home-event__badge { position: absolute; top: 14px; left: 14px; padding: 0.4em 0.85em; background: #fff; color: var(--p700); box-shadow: 0 2px 10px rgba(29, 11, 62, 0.14); }
.home-event__badge.badge--muted { background: rgba(255, 255, 255, 0.92); color: var(--ink-2); }

.home-event__body { display: flex; flex-direction: column; gap: 14px; flex: 1; padding: clamp(20px, 2.6vw, 28px); }
.home-event__head { display: flex; gap: 16px; align-items: center; }
.home-event__head .date-tile { width: 60px; padding: 9px 0 10px; border-radius: 14px; }
.home-event__head .date-tile__day { font-size: 1.65rem; }
.home-event__head > div:last-child { min-width: 0; }
.home-event__when { margin: 6px 0 0; text-wrap: balance; color: var(--p700); font-size: 0.95rem; font-weight: 600; line-height: 1.4; }
.home-event.is-past .home-event__when { color: var(--ink-3); }

.home-event__where { display: flex; gap: 8px; align-items: flex-start; margin: 0; color: var(--ink-2); font-size: 0.97rem; line-height: 1.45; }
.home-event__where .icon { margin-top: 0.1em; color: var(--p600); }
.home-event__desc { margin: 0; color: var(--ink-2); line-height: 1.6; }
.home-event__thanks { display: flex; gap: 10px; align-items: flex-start; margin: 0; padding: 12px 14px; border-radius: var(--r-sm); background: var(--tint); color: var(--ink-2); font-size: 0.97rem; line-height: 1.5; }
.home-event__thanks .icon { flex: none; margin-top: 0.1em; padding: 3px; width: 1.35em; height: 1.35em; border-radius: 50%; background: var(--p100); color: var(--p600); stroke-width: 2.5; }

.home-event__actions { margin-top: auto; padding-top: 6px; gap: 10px; }
.home-event__more .icon { width: 1.05em; height: 1.05em; transition: transform 0.3s var(--ease); }
.home-event__more:hover .icon { transform: translateX(3px); }

@media (hover: hover) {
  .home-event:hover { box-shadow: var(--sh-2); border-color: var(--p200); }
  .home-event:hover .home-event__media img { transform: scale(1.04); }
}

/* Narrow cards: buttons share the row (or stack) at equal widths */
.home-event__actions .btn { flex: 1 1 140px; padding-inline: 1em; }
@media (min-width: 1000px) {
  .home-event__actions .btn { flex: 0 0 auto; padding-inline: 1.55em; }
}

@media (prefers-reduced-motion: reduce) {
  .home-event__media img, .home-event__more .icon { transition: none; }
  .home-event:hover .home-event__media img, .home-event__more:hover .icon { transform: none; }
}

/* Sections ------------------------------------------------------------- */
.home-why__photo { justify-self: center; align-self: center; width: min(100%, 300px); margin: 0 auto; }
.home-why__photo img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: 50% 20%; border-radius: var(--r-lg); box-shadow: var(--sh-2); }
/* With the scrolling ribbon a ribbon heart lies over the portrait and frames Connie's
   face (ribbon-3d.js: heartPortrait, HEART_*). --portrait is the photo's width,
   --portrait-mt / -mb its margins, which hold the heart's lobes rising over its top edge
   and the ribbon's way in, which runs under it. The heart is centred on her face (45.3%
   across the photo), so the photo moves right by the rest to put her face in the middle
   of its column. */
html.ribbon-scroll .home-why__photo {
  position: relative; left: calc(var(--portrait, 300px) * 0.047);
  width: min(var(--portrait, 300px), 100%); max-width: none;
  margin: var(--portrait-mt, 90px) auto var(--portrait-mb, 110px);
}
html.ribbon-scroll .home-why__photo img { display: block; }
/* the photo's margins hold the heart and the ribbon's way in; the top padding leaves
   room for the ribbon's run under the fundraising bar */
html.ribbon-scroll .home-why { padding-block: calc(var(--rw, 60px) * 2.2) clamp(8px, 1.5vw, 20px); }
/* (from 900px, where text and portrait sit side by side: equal columns up to 1200px,
   so the heart has room beside the text without coming near the window's edge) */
@media (min-width: 900px) and (max-width: 1199px) { html.ribbon-scroll .home-why .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.home-impact__stat { padding: clamp(28px, 4vw, 44px); }
.home-impact__stat .stat__value { font-size: clamp(3rem, 2rem + 4vw, 5rem); }
.home-impact__stat .stat__label { font-size: 1.05rem; }
.home-community__head { display: flex; flex-wrap: wrap; gap: 16px 32px; justify-content: space-between; align-items: end; max-width: none; }
.home-community__head > div { max-width: 36rem; }

/* room for the ribbon between the Events heading and the cards */
html.ribbon-scroll .home-events__head { margin-bottom: calc(var(--rw, 60px) * 1.5); }