/* Govindani Donor Wall — fully our own markup (queries GiveWP's Donation
   model directly; see donor-wall.php for why). Properties a host theme
   commonly overrides on cards/buttons/images are hardened with !important
   throughout, per this project's own hard-won lesson: an unprotected
   property on a new styled element gets silently overridden sooner or later. */

.ggsd-donor-wall{width:100%;max-width:1100px;margin:0 auto;box-sizing:border-box}
.ggsd-donor-wall *{box-sizing:border-box}
.ggsd-donor-wall-heading{text-align:center;font-size:28px;line-height:1.2;margin:0 0 6px;color:var(--ggsdw-card-text,#15213d)}
.ggsd-donor-wall-subheading{text-align:center;font-size:15px;margin:0 0 24px;color:color-mix(in srgb, var(--ggsdw-card-text,#15213d) 65%, transparent)}
.ggsdw-empty{text-align:center;color:color-mix(in srgb, var(--ggsdw-card-text,#15213d) 55%, transparent);font-size:14px}

/* Grid + card */
.ggsdw-grid{display:grid!important;gap:18px!important}
.ggsdw-grid--1{grid-template-columns:1fr!important}
.ggsdw-grid--2{grid-template-columns:repeat(2,1fr)!important}
.ggsdw-grid--3{grid-template-columns:repeat(3,1fr)!important}
.ggsdw-grid--4{grid-template-columns:repeat(4,1fr)!important}
@media(max-width:640px){
  .ggsdw-grid--2,.ggsdw-grid--3,.ggsdw-grid--4{grid-template-columns:1fr!important}
}
.ggsdw-card{
  box-sizing:border-box!important;width:100%!important;margin:0!important;
  padding:22px 20px!important;
  background:var(--ggsdw-card-bg,#fff)!important;
  color:var(--ggsdw-card-text,#15213d)!important;
  border:1px solid color-mix(in srgb, var(--ggsdw-accent,#d29a00) 20%, transparent)!important;
  border-radius:var(--ggsdw-radius,16px)!important;
  box-shadow:0 6px 20px rgba(21,33,61,.06)!important;
  display:flex!important;flex-direction:column!important;align-items:center!important;gap:8px!important;
  text-align:center!important;
}

/* Avatar */
.ggsdw-avatar{
  position:relative!important;flex:none!important;margin:0 0 4px!important;
  border-radius:50%!important;overflow:hidden!important;
}
.ggsdw-avatar img{
  display:block!important;width:100%!important;height:100%!important;
  object-fit:cover!important;border-radius:50%!important;
  border:2px solid color-mix(in srgb, var(--ggsdw-accent,#d29a00) 40%, transparent)!important;
}
.ggsdw-avatar-initial{
  display:flex!important;align-items:center!important;justify-content:center!important;
  width:100%!important;height:100%!important;
  background:var(--ggsdw-accent,#d29a00)!important;color:#fff!important;
  font-weight:800!important;font-size:26px!important;line-height:1!important;
}

/* Name / company / date */
.ggsdw-info{display:flex!important;flex-direction:column!important;align-items:inherit!important;gap:2px!important;width:100%!important}
.ggsdw-name{margin:0!important;font-size:16px!important;font-weight:700!important;color:var(--ggsdw-card-text,#15213d)!important}
.ggsdw-company{margin:0!important;font-size:12.5px!important;font-weight:600!important;color:color-mix(in srgb, var(--ggsdw-card-text,#15213d) 70%, transparent)!important}
.ggsdw-date{margin:0!important;font-size:12px!important;color:color-mix(in srgb, var(--ggsdw-card-text,#15213d) 55%, transparent)!important}

/* Comment */
.ggsdw-comment-wrap{width:100%!important;text-align:left!important;border-left:3px solid var(--ggsdw-accent,#d29a00)!important;padding:4px 0 4px 12px!important;margin:2px 0 0!important}
.ggsdw-comment,.ggsdw-comment-excerpt{margin:0!important;font-size:13.5px!important;line-height:1.5!important;color:color-mix(in srgb, var(--ggsdw-card-text,#15213d) 80%, transparent)!important}
.ggsdw-comment-excerpt{cursor:pointer!important;list-style:none!important}
.ggsdw-comment-excerpt::-webkit-details-marker{display:none!important}
.ggsdw-readmore{font-weight:700!important;color:var(--ggsdw-accent,#d29a00)!important}
.ggsdw-comment-wrap[open] .ggsdw-comment-excerpt{display:none!important}

/* Amount / form name row */
.ggsdw-details{
  width:100%!important;display:flex!important;align-items:center!important;justify-content:space-between!important;
  margin-top:auto!important;padding-top:10px!important;
  border-top:1px solid color-mix(in srgb, var(--ggsdw-card-text,#15213d) 10%, transparent)!important;
}
.ggsdw-form-title{
  font-size:11.5px!important;text-transform:uppercase!important;letter-spacing:.03em!important;
  color:color-mix(in srgb, var(--ggsdw-card-text,#15213d) 55%, transparent)!important;
}
.ggsdw-amount{font-size:17px!important;font-weight:800!important;color:var(--ggsdw-accent,#d29a00)!important;margin-left:auto!important}

/* Load more */
.ggsdw-loadmore{
  display:block!important;margin:22px auto 0!important;
  background:var(--ggsdw-accent,#d29a00)!important;color:#fff!important;
  border:0!important;border-radius:12px!important;padding:12px 26px!important;
  font-weight:700!important;font-size:14px!important;cursor:pointer!important;
  box-shadow:none!important;text-shadow:none!important;
}
.ggsdw-loadmore:hover{filter:brightness(1.06)!important}
.ggsdw-loadmore:disabled{opacity:.6!important;cursor:wait!important}

/* ============================================================================
   STYLE TEMPLATES — everything above is "Classic Grid" (ggsdw-tpl-grid), the
   baseline. Each template below only overrides what actually changes about
   its layout; unlisted properties keep the grid defaults.
   ============================================================================ */

/* Minimal List — full-width rows, avatar left, amount right. */
.ggsdw-tpl-list .ggsdw-grid{grid-template-columns:1fr!important}
.ggsdw-tpl-list .ggsdw-card{
  flex-direction:row!important;align-items:center!important;text-align:left!important;
  flex-wrap:wrap!important;padding:14px 18px!important;
}
.ggsdw-tpl-list .ggsdw-avatar{margin:0 14px 0 0!important}
.ggsdw-tpl-list .ggsdw-info{width:auto!important;flex:1 1 auto!important;min-width:140px!important}
.ggsdw-tpl-list .ggsdw-comment-wrap{flex-basis:100%!important;margin-top:8px!important;order:3!important}
.ggsdw-tpl-list .ggsdw-details{
  width:auto!important;flex:none!important;border-top:0!important;margin-top:0!important;padding-top:0!important;
  flex-direction:column!important;align-items:flex-end!important;gap:2px!important;
}

/* Elevated Cards — bigger shadow, no border, accent stripe on top. */
.ggsdw-tpl-elevated .ggsdw-card{
  border:0!important;border-top:4px solid var(--ggsdw-accent,#d29a00)!important;
  box-shadow:0 18px 40px rgba(21,33,61,.14)!important;padding:28px 22px!important;
}
.ggsdw-tpl-elevated .ggsdw-avatar{box-shadow:0 0 0 5px color-mix(in srgb, var(--ggsdw-accent,#d29a00) 15%, transparent)!important;border-radius:50%!important}

/* Flat Minimal — no card chrome at all, just a divider between entries. */
.ggsdw-tpl-minimal .ggsdw-card{
  background:transparent!important;box-shadow:none!important;border:0!important;
  border-bottom:1px solid color-mix(in srgb, var(--ggsdw-card-text,#15213d) 14%, transparent)!important;
  border-radius:0!important;padding:20px 4px!important;
}
.ggsdw-tpl-minimal .ggsdw-details{border-top:0!important}

/* Compact Chips — small, dense, comment hidden; for showing many donors. */
.ggsdw-tpl-compact .ggsdw-grid{gap:10px!important}
.ggsdw-tpl-compact .ggsdw-card{padding:12px 10px!important;gap:4px!important}
.ggsdw-tpl-compact .ggsdw-avatar{max-width:44px!important;max-height:44px!important}
.ggsdw-tpl-compact .ggsdw-name{font-size:13px!important}
.ggsdw-tpl-compact .ggsdw-date{font-size:10.5px!important}
.ggsdw-tpl-compact .ggsdw-comment-wrap{display:none!important}
.ggsdw-tpl-compact .ggsdw-details{padding-top:6px!important}
.ggsdw-tpl-compact .ggsdw-amount{font-size:14px!important}

/* Timeline — a single connected vertical feed, most recent at the top. The
   avatar stays in normal flow (like the List template) rather than being
   absolutely positioned into a fixed-width gutter, specifically because the
   avatar's actual size is admin-configurable (avatar_size, default 75px but
   not always) — a fixed gutter narrower than a larger configured size
   caused the avatar to overlap the donor's name. The connecting line is
   drawn per-row instead, centered on the avatar via --ggsdw-avatar-size, so
   it lines up correctly at any configured size without hardcoding one. */
/* A timeline reads as a scanning feed, not a wide grid — capped narrower so
   the amount sits naturally close to the rest of each row instead of
   stretching to a far, disconnected right edge. */
.ggsdw-tpl-timeline .ggsdw-grid{grid-template-columns:1fr!important;gap:0!important;max-width:640px!important;margin:0 auto!important}
.ggsdw-tpl-timeline .ggsdw-card{
  position:relative!important;flex-direction:row!important;align-items:flex-start!important;text-align:left!important;
  background:transparent!important;box-shadow:none!important;border:0!important;border-radius:0!important;
  padding:0 0 26px 0!important;
}
.ggsdw-tpl-timeline .ggsdw-card::before{
  content:"";position:absolute!important;
  left:calc(var(--ggsdw-avatar-size, 75px) / 2)!important;transform:translateX(-50%)!important;
  top:0!important;bottom:0!important;width:2px!important;
  background:color-mix(in srgb, var(--ggsdw-accent,#d29a00) 30%, transparent)!important;
}
.ggsdw-tpl-timeline .ggsdw-card:last-child::before{display:none!important}
.ggsdw-tpl-timeline .ggsdw-avatar{
  position:relative!important;z-index:1!important;margin:0 14px 0 0!important;
  box-shadow:0 0 0 4px var(--ggsdw-card-bg,#fff)!important;
}
.ggsdw-tpl-timeline .ggsdw-info{width:auto!important;flex:1!important}
.ggsdw-tpl-timeline .ggsdw-comment-wrap{margin-top:6px!important}
.ggsdw-tpl-timeline .ggsdw-details{
  width:auto!important;justify-content:flex-start!important;gap:10px!important;
  border-top:0!important;margin-top:8px!important;padding-top:0!important;
}