/**
 * Testimonial Showcase — front-end grid styles.
 *
 * Luxury light treatment, matched to the Salon Cassiopé Ayurveda palette:
 *   - Warm ivory card   #FCF8F1  (lifts off any background)
 *   - Forest green      #193325  (author name, avatar fallback)
 *   - Antique gold      #B8912E  (quotation mark, hairlines, avatar ring)
 *   - Ink               #23302A  (quote text)
 *   - Headings: "Noto Serif"        (loaded globally by the theme)
 *   - Body:     "Plus Jakarta Sans" (loaded globally by the theme)
 *
 * Layout: staggered masonry via CSS multi-column — dynamic offsets, no JS.
 * Design intent: restraint + whitespace. Airy padding, generous gaps,
 * barely-there shadow, a single gold hairline. Less colour, more elegance.
 */

.tshc-grid {
	/* --- Brand tokens (override in a child theme if needed) ------------- */
	--tshc-columns: 3;
	--tshc-card-bg: #FCF8F1;        /* warm ivory card                    */
	--tshc-green: #193325;          /* author name / avatar fallback      */
	--tshc-ink: #23302A;            /* quote text                         */
	--tshc-gold: #B8912E;           /* quote mark, hairlines, ring        */
	--tshc-gold-line: rgba(184, 145, 46, 0.22); /* dividers / borders     */
	--tshc-muted: #8A9088;          /* muted sage for role / company      */

	--tshc-radius: 18px;
	--tshc-gap: 20px;               /* clear space between every card      */
	--tshc-shadow: 0 18px 44px rgba(25, 51, 37, 0.07);
	--tshc-shadow-hover: 0 26px 56px rgba(25, 51, 37, 0.12);

	--tshc-font-heading: "Noto Serif", Georgia, "Times New Roman", serif;
	--tshc-font-body: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

	/* --- Masonry via CSS multi-column ---------------------------------- */
	/* Columns fill top-to-bottom, giving the natural staggered offset,    */
	/* with zero JavaScript.                                               */
	column-count: var(--tshc-columns);
	column-gap: var(--tshc-gap);
	margin: 0 auto;
	padding: 4px;          /* keeps card shadows from clipping at edges.   */
	max-width: 1180px;
	font-family: var(--tshc-font-body);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

/* --- JS masonry mode -------------------------------------------------- */
/* When masonry.js runs it swaps the CSS-column layout for flex columns,   */
/* placing each card in the shortest column so every column ends level.    */
.tshc-grid--flex {
	display: flex;
	align-items: flex-start;
	column-count: auto;      /* disable the multi-column fallback          */
	gap: var(--tshc-gap);    /* horizontal space between columns           */
}

.tshc-col {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: var(--tshc-gap);    /* even vertical space between cards           */
}

/* In flex mode the column `gap` handles spacing, so drop the card margin. */
.tshc-grid--flex .tshc-card {
	margin: 0 !important;
}

/* --- Card ------------------------------------------------------------- */
.tshc-card {
	position: relative;
	display: inline-block; /* Required so column-break rules behave.       */
	width: 100%;
	box-sizing: border-box;
	/* !important defeats the theme/Elementor figure resets (figure{margin:0},
	   Kadence figure:last-child{margin-bottom:0}) that otherwise remove the
	   vertical row gap between masonry cards. */
	margin: 0 0 var(--tshc-gap) !important;
	padding: 42px 36px 34px;         /* airy: whitespace = luxury.         */
	background: var(--tshc-card-bg);
	border: 1px solid var(--tshc-gold-line);
	border-radius: var(--tshc-radius);
	box-shadow: var(--tshc-shadow);
	break-inside: avoid;             /* Never split a card across columns. */
	-webkit-column-break-inside: avoid;
	page-break-inside: avoid;
	transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.tshc-card:hover {
	transform: translateY(-5px);
	box-shadow: var(--tshc-shadow-hover);
	border-color: rgba(184, 145, 46, 0.4);
}

/* --- Antique-gold serif quotation mark -------------------------------- */
.tshc-card__mark {
	display: block;
	font-family: var(--tshc-font-heading);
	font-size: 60px;
	line-height: 0.5;
	font-weight: 700;
	color: var(--tshc-gold);
	opacity: 0.9;
	margin-bottom: 18px;
	user-select: none;
}

/* --- Quote text ------------------------------------------------------- */
.tshc-card__quote {
	margin: 0 0 28px;
	padding: 0;
	border: 0;
	color: var(--tshc-ink);
	font-size: 1.0625rem;   /* ~17px */
	line-height: 1.85;      /* open, readable, unhurried                  */
	font-weight: 400;
}

.tshc-card__quote p {
	margin: 0 0 0.8em;
}

.tshc-card__quote p:last-child {
	margin-bottom: 0;
}

/* --- Footer: avatar + author meta ------------------------------------- */
.tshc-card__footer {
	display: flex;
	align-items: center;
	gap: 15px;
	margin: 0;
	padding-top: 24px;
	border-top: 1px solid var(--tshc-gold-line); /* single gold hairline  */
}

.tshc-card__avatar {
	flex: 0 0 auto;
	width: 54px;
	height: 54px;
	border-radius: 50%;      /* Perfectly circular avatar.                */
	object-fit: cover;       /* Crop non-square images cleanly.           */
	display: block;
	background: var(--tshc-green);
	box-shadow: 0 0 0 1px #fff, 0 0 0 3px var(--tshc-gold-line); /* ring   */
}

/* Green-initial fallback when no avatar image is set. */
.tshc-card__avatar--placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--tshc-card-bg);
	background: var(--tshc-green);
	font-family: var(--tshc-font-heading);
	font-size: 1.35rem;
	font-weight: 700;
	text-transform: uppercase;
}

.tshc-card__meta {
	display: flex;
	flex-direction: column;  /* Vertical stack: name over role.           */
	min-width: 0;            /* Allow long text to wrap.                   */
}

.tshc-card__name {
	color: var(--tshc-green);
	font-family: var(--tshc-font-heading);
	font-weight: 700;
	font-size: 1.05rem;      /* ~17px */
	line-height: 1.3;
	letter-spacing: 0.01em;
}

.tshc-card__role {
	color: var(--tshc-muted);
	font-size: 0.8125rem;    /* ~13px */
	line-height: 1.4;
	margin-top: 3px;
}

/* --- Loading state ---------------------------------------------------- */
.tshc-wrap {
	position: relative;
}

/* Dim + soften the outgoing cards while the next page is fetched. */
.tshc-wrap.is-loading .tshc-grid {
	opacity: 0.4;
	filter: saturate(0.85);
	transition: opacity 0.2s ease;
	pointer-events: none;
}

/* Floating gold spinner badge — fixed so it's always in view. */
.tshc-spinner {
	position: fixed;
	left: 50%;
	bottom: 34px;
	transform: translateX(-50%);
	display: flex;
	align-items: center;
	gap: 11px;
	padding: 11px 20px;
	background: var(--tshc-green, #193325);
	color: var(--tshc-gold, #FFDF98);
	border-radius: 999px;
	box-shadow: 0 14px 34px rgba(25, 51, 37, 0.3);
	font-family: "Plus Jakarta Sans", -apple-system, "Segoe UI", Roboto, sans-serif;
	font-size: 0.9rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	z-index: 9999;
	animation: tshc-fade-in 0.2s ease;
}

.tshc-spinner::before {
	content: "";
	width: 16px;
	height: 16px;
	border: 2px solid rgba(255, 223, 152, 0.3);
	border-top-color: var(--tshc-gold, #FFDF98);
	border-radius: 50%;
	animation: tshc-spin 0.7s linear infinite;
}

@keyframes tshc-spin {
	to {
		transform: rotate(360deg);
	}
}

@keyframes tshc-fade-in {
	from {
		opacity: 0;
		transform: translate(-50%, 8px);
	}
	to {
		opacity: 1;
		transform: translate(-50%, 0);
	}
}

@media (prefers-reduced-motion: reduce) {
	.tshc-spinner::before {
		animation-duration: 1.4s;
	}
	.tshc-spinner {
		animation: none;
	}
}

/* --- Pagination ------------------------------------------------------- */
.tshc-pagination {
	margin: 40px auto 4px;
	max-width: 1180px;
	font-family: var(--tshc-font-body);
}

.tshc-pagination .page-numbers {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 12px;
	margin: 0;
	padding: 0;
}

.tshc-pagination .page-numbers li {
	margin: 0;
}

.tshc-pagination a.page-numbers,
.tshc-pagination span.page-numbers {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 46px;
	height: 46px;
	padding: 0 14px;
	border-radius: 999px;
	border: 1px solid var(--tshc-gold-line);
	background: var(--tshc-card-bg);
	color: var(--tshc-green);
	font-size: 0.98rem;
	font-weight: 500;
	line-height: 1;
	text-decoration: none;
	box-shadow: 0 4px 14px rgba(25, 51, 37, 0.05);
	transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease,
		border-color 0.2s ease, box-shadow 0.2s ease;
}

.tshc-pagination a.page-numbers:hover {
	border-color: var(--tshc-gold);
	color: var(--tshc-gold);
	transform: translateY(-2px);
	box-shadow: 0 10px 22px rgba(25, 51, 37, 0.12);
}

/* Current page: solid forest green with gold serif numeral. */
.tshc-pagination span.page-numbers.current {
	background: var(--tshc-green);
	border-color: var(--tshc-green);
	color: var(--tshc-gold);
	font-family: var(--tshc-font-heading);
	box-shadow: 0 8px 20px rgba(25, 51, 37, 0.22);
}

/* Prev / next chevrons: circular, a touch larger. */
.tshc-pagination a.prev.page-numbers,
.tshc-pagination a.next.page-numbers {
	padding: 0;
	min-width: 46px;
	font-size: 1.25rem;
	font-family: var(--tshc-font-heading);
}

.tshc-pagination .page-numbers.dots {
	border-color: transparent;
	background: transparent;
	box-shadow: none;
	color: var(--tshc-muted);
}

/* --- Responsive column counts ---------------------------------------- */
@media (max-width: 900px) {
	.tshc-grid {
		column-count: 2;
	}
}

@media (max-width: 600px) {
	.tshc-grid {
		column-count: 1;
	}
	.tshc-card {
		padding: 34px 28px 28px;
	}
}

/* Respect users who prefer reduced motion. */
@media (prefers-reduced-motion: reduce) {
	.tshc-card {
		transition: none;
	}
	.tshc-card:hover {
		transform: none;
	}
}