/**
 * Salafi Donations — graphic appeal grid.
 *
 * A responsive grid of icons that fill from top-to-bottom in the configured
 * order as donations roll in. Inline SVG + currentColor so the .is-filled
 * state is just a colour swap, no asset reload. Scoped under .sd-appeal so it
 * never bleeds into a theme.
 */
.sd-appeal {
  /* Cascade from the landing page accent so a campaign palette (e.g. Ocean)
     reaches the filled-icon colour. Falls back to the brand green when the
     appeal is embedded outside a landing page (the standalone shortcode). */
  --sd-appeal-accent: var(--sd-lp-accent, #0e7a5f);
  --sd-appeal-empty: #d8e0db;
  --sd-appeal-ink: #14231d;
  --sd-appeal-muted: #5b6b63;
  max-width: 760px;
  margin: 32px auto;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--sd-appeal-ink);
}

.sd-appeal__grid {
  display: grid;
  /* Fixed column count (set inline from PHP via --sd-appeal-cols) so the grid
     keeps the SAME rows and columns across breakpoints — on mobile the tiles
     scale down to fit rather than reflowing into fewer columns. minmax(0,1fr)
     lets the tiles shrink freely; the gap scales down with the viewport. */
  grid-template-columns: repeat(var(--sd-appeal-cols, 8), minmax(0, 1fr));
  gap: clamp(3px, 1.2vw, 8px);
  list-style: none;
  margin: 0;
  padding: 0;
}

.sd-appeal__tile {
  position: relative;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: var(--sd-appeal-empty);
}

.sd-appeal__tile svg {
  width: 78%;
  height: 78%;
  fill: currentColor;
  transition: color 240ms ease, transform 240ms ease;
}

.sd-appeal__tile.is-filled {
  color: var(--sd-appeal-accent);
}

.sd-appeal__tile.is-filled svg {
  transform: scale(1.04);
}

@media (prefers-reduced-motion: reduce) {
  .sd-appeal__tile svg {
    transition: none;
  }
}

.sd-appeal__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 28px;
  justify-content: center;
  list-style: none;
  margin: 24px 0 0;
  padding: 18px 0 0;
  border-top: 1px solid rgba(20, 35, 29, 0.08);
}

.sd-appeal__legend-item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
}

.sd-appeal__legend-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  color: var(--sd-appeal-accent);
}

.sd-appeal__legend-icon svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
}

.sd-appeal__legend-meta {
  display: inline-flex;
  flex-direction: column;
  line-height: 1.25;
}

.sd-appeal__legend-label {
  color: var(--sd-appeal-ink);
  font-weight: 600;
}

.sd-appeal__legend-count {
  color: var(--sd-appeal-muted);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.sd-appeal__legend-price {
  margin-left: 8px;
  color: var(--sd-appeal-muted);
}

/* On phones, lay the icon keys out as a tidy two-up grid (two next to each
   other) instead of a free-wrapping centred row. */
@media (max-width: 600px) {
  .sd-appeal__legend {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 16px;
    justify-items: start;
  }
  .sd-appeal__legend-item {
    font-size: 12px;
  }
}

.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}