/* ============================================================
   Testimonial Cards Block — build 4
   ============================================================ */

.SDblock.testimonial-cards {
	padding-top:    var(--tc-space-above, clamp(40px, 6vw, 100px));
	padding-bottom: var(--tc-space-below, clamp(40px, 6vw, 100px));
}

/* ── Title ─────────────────────────────────────────────────── */

.SDblock.testimonial-cards .tc-title {
	text-align:    center;
	margin-top:    0;
	margin-bottom: clamp(2rem, 5vw, 4rem);
}

/* Type Role — always applies, whether or not a role is chosen on the
   block: --tc-title-* only exists when a role is picked (set inline via
   shew_type_role_css_vars()), so with no role picked every var() here
   falls through to this style's Design Tokens default (--tc-grid-title-*
   or --ts-editorial-title-*, set via Design Tokens → Testimonial Cards —
   Grid and Single tabs are fully separate, so each style falls back to
   its own default, never the other's), then the sitewide Default Type
   Role (--text-role-default-*). Needs the #SD ID prefix to out-specificity
   the sitewide "#SD H2 { font-size: var(--h2Size); }" rule in
   SDstandards.css — same convention as Display Posts' .dp-title
   (assets/css/conditional/blocks/displayPosts.css). */
#SD .SDblock.testimonial-cards:not(.tc-style-single) .tc-title h1,
#SD .SDblock.testimonial-cards:not(.tc-style-single) .tc-title h2,
#SD .SDblock.testimonial-cards:not(.tc-style-single) .tc-title h3,
#SD .SDblock.testimonial-cards:not(.tc-style-single) .tc-title h4,
#SD .SDblock.testimonial-cards:not(.tc-style-single) .tc-title h5,
#SD .SDblock.testimonial-cards:not(.tc-style-single) .tc-title h6,
#SD .SDblock.testimonial-cards:not(.tc-style-single) .tc-title p {
	margin-top:     0;
	margin-bottom:  0;
	font-family:    var(--tc-title-family, var(--tc-grid-title-family, var(--text-role-default-family, inherit)));
	font-weight:    var(--tc-title-weight, var(--tc-grid-title-weight, var(--text-role-default-weight, inherit)));
	font-style:     var(--tc-title-style, var(--tc-grid-title-style, var(--text-role-default-style, normal)));
	font-size:      var(--tc-title-size, var(--tc-grid-title-size, var(--text-role-default-size, inherit)));
	line-height:    var(--tc-title-line-height, var(--tc-grid-title-line-height, var(--text-role-default-line-height, normal)));
	letter-spacing: var(--tc-title-letter-spacing, var(--tc-grid-title-letter-spacing, var(--text-role-default-letter-spacing, normal)));
	text-transform: var(--tc-title-text-transform, var(--tc-grid-title-text-transform, var(--text-role-default-text-transform, none)));
	color:          var(--tc-title-color, var(--tc-grid-title-color, var(--text-role-default-color, inherit)));
}

#SD .SDblock.testimonial-cards.tc-style-single .tc-title h1,
#SD .SDblock.testimonial-cards.tc-style-single .tc-title h2,
#SD .SDblock.testimonial-cards.tc-style-single .tc-title h3,
#SD .SDblock.testimonial-cards.tc-style-single .tc-title h4,
#SD .SDblock.testimonial-cards.tc-style-single .tc-title h5,
#SD .SDblock.testimonial-cards.tc-style-single .tc-title h6,
#SD .SDblock.testimonial-cards.tc-style-single .tc-title p {
	margin-top:     0;
	margin-bottom:  0;
	font-family:    var(--tc-title-family, var(--ts-editorial-title-family, var(--text-role-default-family, inherit)));
	font-weight:    var(--tc-title-weight, var(--ts-editorial-title-weight, var(--text-role-default-weight, inherit)));
	font-style:     var(--tc-title-style, var(--ts-editorial-title-style, var(--text-role-default-style, normal)));
	font-size:      var(--tc-title-size, var(--ts-editorial-title-size, var(--text-role-default-size, inherit)));
	line-height:    var(--tc-title-line-height, var(--ts-editorial-title-line-height, var(--text-role-default-line-height, normal)));
	letter-spacing: var(--tc-title-letter-spacing, var(--ts-editorial-title-letter-spacing, var(--text-role-default-letter-spacing, normal)));
	text-transform: var(--tc-title-text-transform, var(--ts-editorial-title-text-transform, var(--text-role-default-text-transform, none)));
	color:          var(--tc-title-color, var(--ts-editorial-title-color, var(--text-role-default-color, inherit)));
}

/* ── Grid ────────────────────────────────────────────────── */

.SDblock.testimonial-cards .tc-grid {
	display:               grid;
	grid-template-columns: repeat(var(--tc-cols-d, 3), 1fr);
	gap:                   clamp(1.5rem, 3vw, 2.5rem);
	max-width:             var(--maxWidth);
	margin-left:           auto;
	margin-right:          auto;
	padding-left:          var(--sideSpace, 1.5rem);
	padding-right:         var(--sideSpace, 1.5rem);
}

@media (max-width: 1024px) {
	.SDblock.testimonial-cards .tc-grid {
		grid-template-columns: repeat(var(--tc-cols-t, 2), 1fr);
	}
}

@media (max-width: 600px) {
	.SDblock.testimonial-cards .tc-grid {
		grid-template-columns: repeat(var(--tc-cols-m, 1), 1fr);
	}
}

/* ── Card ────────────────────────────────────────────────── */

.SDblock.testimonial-cards .tc-card {
	display:        flex;
	flex-direction: column;
	gap:            0.75rem;
}

/* ── Photo ───────────────────────────────────────────────── */

.SDblock.testimonial-cards .tc-photo-wrap {
	width:      6rem;
	height:     6rem;
	flex-shrink: 0;
}

.SDblock.testimonial-cards .tc-photo,
.SDblock.testimonial-cards .tc-photo-placeholder {
	width:         100%;
	height:        100%;
	border-radius: 50%;
	display:       block;
}

.SDblock.testimonial-cards .tc-photo {
	object-fit: cover;
}

.SDblock.testimonial-cards .tc-photo-placeholder {
	background-color: #999;
}

/* ── Quote ───────────────────────────────────────────────── */
/* Type Role + mark come from Design Tokens → Testimonial Cards — Grid tab
   (--tc-grid-quote-*, --tc-grid-mark-*). Every var() falls back to the
   existing hardcoded style, so the card looks the same as before until
   those tokens are actually set. */

.SDblock.testimonial-cards .tc-quote {
	position:       relative;
	margin:         0;
	padding:        0;
	border:         none;
	font-family:    var(--tc-grid-quote-family, inherit);
	font-weight:    var(--tc-grid-quote-weight, inherit);
	font-style:     var(--tc-grid-quote-style, normal);
	font-size:      var(--tc-grid-quote-size, clamp(0.9rem, 1.4vw, 1rem));
	line-height:    var(--tc-grid-quote-line-height, 1.6);
	letter-spacing: var(--tc-grid-quote-letter-spacing, normal);
	color:          var(--tc-grid-quote-color, inherit);
	flex:           1;
}

/* Mark hangs outside the text column so the quote's left edge still lines
   up with the photo and name below it — nudged up so it sits closer to
   the text it's introducing rather than floating above the cap-height. */
.SDblock.testimonial-cards .tc-quote::before {
	content:     '\201C';
	position:    absolute;
	right:       100%;
	top:         0;
	margin-right: var(--tc-grid-mark-gap, 0.15em);
	margin-top:   var(--tc-grid-mark-lift, -0.2em);
	font-family: var(--tc-grid-mark-family, var(--tc-grid-quote-family, inherit));
	font-weight: var(--tc-grid-mark-weight, 700);
	font-style:  var(--tc-grid-mark-style, normal);
	font-size:   1.8em;
	line-height: inherit;
	color:       var(--tc-grid-mark-color, var(--colC));
	white-space: nowrap;
}

/* ── Attribution ─────────────────────────────────────────── */

.SDblock.testimonial-cards .tc-attribution {
	display:        flex;
	flex-direction: column;
	gap:            0.1em;
}

.SDblock.testimonial-cards .tc-name {
	font-family:    var(--tc-grid-name-family, inherit);
	font-weight:    var(--tc-grid-name-weight, 700);
	font-style:     var(--tc-grid-name-style, normal);
	font-size:      var(--tc-grid-name-size, 0.875rem);
	line-height:    var(--tc-grid-name-line-height, 1.3);
	letter-spacing: var(--tc-grid-name-letter-spacing, normal);
	color:          var(--tc-grid-name-color, inherit);
}

.SDblock.testimonial-cards .tc-company {
	font-size:      0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	opacity:        0.7;
}

/* ── More button ─────────────────────────────────────────── */

.SDblock.testimonial-cards .tc-more-wrap {
	text-align: center;
	margin-top: clamp(2rem, 4vw, 3rem);
}

#SD .SDblock.testimonial-cards .tc-more-wrap .button {
	margin-left:   auto;
	margin-right:  auto;
	padding-left:  1.5rem;
	padding-right: 1.5rem;
}

/* ── Style: Single — Editorial Column ───────────────────────
   Look is themed from Design Tokens → Testimonial Cards, Single tab
   (inc/testimonial-single-tokens.php), which emits the
   --ts-editorial-* custom properties referenced below at :root.
   Every var() here has a literal fallback so the layout still
   works correctly before any tokens are configured.

   This markup/CSS is shared with the bottom-of-page testimonial module on
   brand/website single posts (inc/helpers/page-testimonial-render.php) —
   it renders the identical .SDblock.testimonial-cards.tc-style-single /
   .ts-editorial structure so both consumers get the same styling from
   these same tokens, with nothing to duplicate or drift out of sync. */

/* Background Color (--ts-editorial-bg-color) lives on this outer section,
   not .ts-editorial, and breaks out to full viewport width -- same
   alignfull technique used sitewide (e.g. .display-case-study.alignfull in
   displayCaseStudy.css), applied unconditionally here rather than gated
   behind an .alignfull class, since this style is always meant to run
   edge-to-edge. Transparent by default, so the width/padding below are
   harmless even with no background set. */
.SDblock.testimonial-cards.tc-style-single {
	box-sizing:    border-box;
	width:         100vw;
	margin-left:   calc(50% - 50vw);
	margin-right:  calc(50% - 50vw);
	padding-left:  var(--sideSpace, 1.5rem);
	padding-right: var(--sideSpace, 1.5rem);
	background:    var(--ts-editorial-bg-color, transparent);
}

/* Centered layout (2026-09): mark circle centered above the quote, quote
   and name/org centered beneath it. */
.SDblock.testimonial-cards.tc-style-single .ts-editorial {
	--ts-gutter: var(--ts-editorial-gutter, clamp(2.4rem, 5.5vw, 3.6rem));
	--ts-mark-gap: var(--ts-editorial-mark-gap, 1rem);
	max-width:  38rem;
	margin:     0 auto;
	text-align: center;
}

/* Mark sits in a circle badge, centered above the quote -- no hairline
   guide line running through it (removed: read as clutter more than
   structure). */
.SDblock.testimonial-cards.tc-style-single .ts-editorial::before {
	content:      '\201C';
	display:        flex;
	align-items:    center;
	justify-content: center;
	width:        var(--ts-gutter);
	aspect-ratio: 1;
	margin:       0 auto var(--ts-mark-gap) auto;
	border-radius: 50%;
	background:  var(--ts-editorial-mark-bg-color, var(--colC50));
	font-family: var(--ts-editorial-mark-family, var(--ts-editorial-quote-family, var(--accentFontFamily), serif));
	font-weight: var(--ts-editorial-mark-weight, 400);
	font-style:  var(--ts-editorial-mark-style, normal);
	font-size:   clamp(1.5rem, 3vw, 2.1rem);
	line-height: 1;
	color:       var(--ts-editorial-mark-color, var(--colC));
}

/* Roman, not italic — overrides --accentFontStyle's sitewide italic default,
   which this treatment deliberately doesn't use (see conversation: primary
   font here should read as a quiet statement, not a stylized flourish). */
.SDblock.testimonial-cards.tc-style-single .ts-editorial blockquote {
	margin:  0;
	padding: 0;
	border:  none;
	font-family:    var(--ts-editorial-quote-family, var(--accentFontFamily), serif);
	font-weight:    var(--ts-editorial-quote-weight, 400);
	font-style:     normal;
	font-size:      var(--ts-editorial-quote-size, clamp(1.5rem, 2.6vw, 2rem));
	line-height:    var(--ts-editorial-quote-line-height, 1.5);
	letter-spacing: var(--ts-editorial-quote-letter-spacing, normal);
	color:          var(--ts-editorial-quote-color, inherit);
}

/* Photo sits on its own centered line above name/org — photo is the
   optional first child, so the stack still lays out correctly (no leftover
   gap) when a testimonial has no photo, since nothing is rendered in that
   case at all. */
.SDblock.testimonial-cards.tc-style-single .ts-editorial footer {
	margin-top:      2rem;
	display:         flex;
	flex-direction:  column;
	align-items:     center;
	gap:             0.75rem;
	font-family:     var(--ts-editorial-name-family, var(--primaryFontFamily));
	font-style:      normal;
}

/* Sized from Photo Size (Design Tokens → Testimonial Cards → Single tab) —
   a Spacing Scale step, same token system used sitewide for length/distance
   values. No fallback size on purpose: with the token unset, --ts-editorial-
   photo-size never renders (see shew_render_testimonial_single_tokens()),
   so width/height fall through to `auto`/`auto` and the image would show at
   its native size — callers should treat "no Photo Size configured" as "use
   a sane default width" via their own CSS width if that's ever a problem;
   in practice this field is always set once the module ships. */
.SDblock.testimonial-cards.tc-style-single .ts-editorial .ts-photo {
	flex:          0 0 auto;
	width:         var(--ts-editorial-photo-size, 3.5rem);
	height:        var(--ts-editorial-photo-size, 3.5rem);
	border-radius: 50%;
	object-fit:    cover;
	display:       block;
}

.SDblock.testimonial-cards.tc-style-single .ts-editorial .ts-attribution {
	display:        flex;
	flex-direction: column;
	align-items:    center;
}

.SDblock.testimonial-cards.tc-style-single .ts-editorial .ts-name {
	font-size:      var(--ts-editorial-name-size, 0.9rem);
	font-weight:    var(--ts-editorial-name-weight, 700);
	letter-spacing: var(--ts-editorial-name-letter-spacing, 0.02em);
	text-transform: var(--ts-editorial-name-text-transform, none);
	color:          var(--ts-editorial-name-color, inherit);
}

/* Organization & Title — Type Role (field_ts_ec_org_role). Previously a
   fixed reduced style riding on .ts-name's family; now its own role, with
   the same reduced-opacity treatment kept as a literal fallback so an
   unconfigured role still reads as secondary to the name above it. */
.SDblock.testimonial-cards.tc-style-single .ts-editorial .ts-org {
	margin-top:     0.2em;
	font-family:    var(--ts-editorial-org-family, inherit);
	font-weight:    var(--ts-editorial-org-weight, 400);
	font-style:     var(--ts-editorial-org-style, normal);
	font-size:      var(--ts-editorial-org-size, 0.8rem);
	line-height:    var(--ts-editorial-org-line-height, normal);
	letter-spacing: var(--ts-editorial-org-letter-spacing, normal);
	color:          var(--ts-editorial-org-color, inherit);
	opacity:        var(--ts-editorial-org-opacity, 0.7);
}