/**
 * Prayer Wall: masonry cards, category pills and filter.
 */

.sp-wall {
	--sp-accent: var(--accent, #866850);
	--sp-accent-2: var(--accent-2, #CDAA8C);
	--sp-accent-3: var(--accent-3, #D9CFC2);
	--sp-base: var(--base, #EAE5DC);
	--sp-base-2: var(--base-2, #F7F5F1);
	--sp-white: var(--base-3, #ffffff);
	--sp-contrast: var(--contrast, #1C1B18);
	--sp-text: var(--contrast-2, #4A463F);
	--sp-serif: var(--gp-font--cormorant-garamond, "Cormorant Garamond", Georgia, serif);
	--sp-sans: var(--gp-font--source-sans-3, "Source Sans 3", system-ui, sans-serif);
	--sp-radius: 8px;
	--sp-shadow: 0 0 14px 6px rgba(80, 80, 102, 0.06);
	font-family: var(--sp-sans);
	color: var(--sp-text);
	max-width: 1100px;
	margin: 0 auto;
}

.sp-wall__header {
	text-align: center;
	margin-bottom: 2rem;
}

.sp-wall__tagline {
	margin-bottom: 1rem;
}

.sp-wall__title {
	font-family: var(--sp-serif);
	margin: 0;
}

/* Filter */
.sp-wall__filter {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.5rem;
	margin-bottom: 2rem;
}

.sp-wall__filter-btn {
	border: 1px solid var(--sp-accent-3);
	background: var(--sp-white);
	color: var(--sp-text);
	border-radius: 9999px;
	padding: 0.4rem 1rem;
	font-size: 0.9rem;
	font-family: var(--sp-sans);
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.sp-wall__filter-btn:hover {
	background: var(--sp-base);
}

.sp-wall__filter-btn.is-active {
	background: var(--sp-accent);
	border-color: var(--sp-accent);
	color: var(--sp-white);
}

/* Masonry via CSS columns. Desktop count is set by the shortcode's
   `columns` attribute (default 3) via the --sp-wall-columns variable;
   the media queries below still cap it to 2 then 1 on smaller screens. */
.sp-wall__grid {
	column-count: var(--sp-wall-columns, 3);
	column-gap: 1.25rem;
}

/* Visual card styling comes from the site's global .gbp-card / .gbp-card--border
   (matches the home page). Here we only handle masonry layout. */
.sp-wall__card {
	display: inline-block;
	width: 100%;
	margin: 0 0 1.25rem;
	break-inside: avoid;
	box-sizing: border-box;
	text-align: left;
}

.sp-wall__card-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	margin-bottom: 0.75rem;
}

.sp-wall__pill {
	display: inline-block;
	background: var(--sp-base);
	color: var(--sp-text);
	border-radius: 9999px;
	padding: 0.2rem 0.7rem;
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.02em;
}

.sp-wall__time {
	font-size: 0.8rem;
	opacity: 0.6;
	margin-bottom: 0; /* override .gbp-card__meta-text default margin in the row */
}

.sp-wall__message {
	line-height: 1.55;
}

.sp-wall__author {
	margin: 0.85rem 0 0;
	font-weight: 600;
	color: var(--sp-accent);
}

/* Attribution dash added here to keep it out of markup */
.sp-wall__author::before {
	content: "\2014\00a0";
}

.sp-wall__response {
	margin-top: 1rem;
	padding: 0.9rem 1rem;
	background: var(--sp-base-2);
	border-radius: var(--sp-radius);
	border-left: 3px solid var(--sp-accent-2);
}

.sp-wall__response-label {
	display: block;
	font-size: 0.72rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	opacity: 0.6;
	margin-bottom: 0.3rem;
}

.sp-wall__response-text {
	font-style: italic;
	line-height: 1.5;
}

.sp-wall__empty {
	text-align: center;
	opacity: 0.7;
	column-span: all;
}

.sp-wall__footer {
	text-align: center;
	margin-top: 1.5rem;
}

.sp-wall__status {
	margin: 0.75rem 0 0;
	min-height: 1em;
	opacity: 0.7;
	font-size: 0.9rem;
}

@media (max-width: 1024px) {
	.sp-wall__grid {
		column-count: 2;
	}
}

@media (max-width: 640px) {
	.sp-wall__grid {
		column-count: 1;
	}
}