/* ============================================================
   Display Audiences Block ("Who We Help") — build 5

   No longer uses .SDblock — page-width-control.css's generic
   ".entry-content > :not(.alignfull):not(.SDblock)" rule clamps this
   block via the shared --boxedWidth/--wideWidth/--veryWideWidth tokens
   the same way .wpg-block (Work Portfolio Grid) does, so it respects
   whatever page-width tier (Boxed/Wide/Very Wide/Full) the page is set
   to instead of running its own fixed --maxWidth. .alignfull below is
   the only explicit override, same as .wpg-block.alignfull.
   ============================================================ */

.display-audiences {
	padding-top:    clamp(40px, 6vw, 100px);
	padding-bottom: clamp(40px, 6vw, 100px);
}

.display-audiences.alignfull {
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

/* ── Header ────────────────────────────────────────────────── */

.display-audiences .da-header {
	text-align:    center;
	max-width:     42rem;
	margin-left:   auto;
	margin-right:  auto;
	margin-bottom: clamp(2rem, 5vw, 4rem);
}

.display-audiences .da-title {
	margin-top:    0;
	margin-bottom: 0;
}

/* Title Type Role — only applies when a role is chosen on the block
   (data-da-title-role present); falls back to the theme's H2 tokens for
   any property the role itself didn't set. Same convention as Dynamic
   Rows' .dr-section-heading (assets/css/conditional/blocks/dynamicRows.css). */
#SD .display-audiences[data-da-title-role] .da-title {
	font-family:    var(--da-title-family, var(--h2-font));
	font-weight:    var(--da-title-weight, var(--h2-weight));
	font-style:     var(--da-title-style, normal);
	font-size:      var(--da-title-size, var(--h2Size));
	line-height:    var(--da-title-line-height, normal);
	letter-spacing: var(--da-title-letter-spacing, var(--h2-tracking));
	text-transform: var(--da-title-text-transform, none);
	color:          var(--da-title-color, inherit);
}

.display-audiences .da-intro {
	margin-top: 0.75rem;
}

.display-audiences .da-intro p {
	margin: 0;
}

.display-audiences[data-da-intro-role] .da-intro {
	font-family:    var(--da-intro-family, inherit);
	font-weight:    var(--da-intro-weight, inherit);
	font-style:     var(--da-intro-style, normal);
	font-size:      var(--da-intro-size, inherit);
	line-height:    var(--da-intro-line-height, inherit);
	letter-spacing: var(--da-intro-letter-spacing, inherit);
	text-transform: var(--da-intro-text-transform, none);
	color:          var(--da-intro-color, inherit);
}

/* ── Grid ──────────────────────────────────────────────────── */
/* Column counts are sitewide tokens (Design Tokens → Audience Grid
   Layout), emitted at :root by inc/audience-card-tokens.php — no
   per-block override, same as Portfolio Grid Layout. Breakpoints match
   workPortfolioGrid.css exactly (768 / 1024 / 1440px). */

.display-audiences .da-grid {
	display: grid;
	grid-template-columns: repeat(var(--da-grid-cols-mobile, 1), 1fr);
	column-gap: var(--da-grid-gap-col, clamp(1.5rem, 3vw, 2.5rem));
	row-gap:    var(--da-grid-gap-row, clamp(1.5rem, 3vw, 2.5rem));
}

@media screen and (min-width: 768px) {
	.display-audiences .da-grid {
		grid-template-columns: repeat(var(--da-grid-cols-tablet, 2), 1fr);
	}
}

@media screen and (min-width: 1024px) {
	.display-audiences .da-grid {
		grid-template-columns: repeat(var(--da-grid-cols-desktop, 3), 1fr);
	}
}

@media screen and (min-width: 1440px) {
	.display-audiences .da-grid {
		grid-template-columns: repeat(var(--da-grid-cols-desktop-lg, 3), 1fr);
	}
}

/* ── Card ──────────────────────────────────────────────────── */
/* Icon medallion / icon-color / type-roles are sitewide tokens (Design
   Tokens → Audience Cards), emitted at :root by inc/audience-card-tokens.php.
   Cards have no box, border, or radius — icon, name, and description sit
   directly on the page background, so a card never reads as a button. */

.display-audiences .da-card {
	display:         flex;
	flex-direction:  column;
	align-items:     center;
	text-align:      center;
	color:           inherit;
	text-decoration: none;
}

a.da-card:hover .da-name,
a.da-card:focus-visible .da-name {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.display-audiences .da-icon {
	width:    var(--da-card-icon-size, 1.5rem);
	height:   var(--da-card-icon-size, 1.5rem);
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--da-card-icon-bg-padding, 1rem);
	margin-bottom: var(--da-card-icon-gap, 0.75rem);
	border-radius: 50%;
	background: var(--da-card-icon-bg, transparent);
	color:    var(--da-card-icon-color, currentColor);
}

.display-audiences .da-icon svg,
.display-audiences .da-icon img {
	width:      100%;
	height:     100%;
	object-fit: contain;
}

/* Duotone source icons (inc/svg-helpers.php shew_inline_svg() tags the
   minority-color shapes class="shew-icon-accent") render their accent
   details as a lighter tint of the same Icon Color token — one color in,
   two tones out, no second color field to keep in sync. */
.display-audiences .da-icon .shew-icon-accent {
	fill: color-mix(in srgb, currentColor 45%, white);
}

/* #SD prefix matches the specificity of the sitewide "#SD h1...h5"
   heading weight rule (typography-tokens.php) — a plain class selector
   loses to that ID+element rule, same fix as .wpg-card-name in
   workPortfolioGrid.css. */
#SD .display-audiences .da-name:last-child {
	margin-bottom: 0;
}

#SD .display-audiences .da-name {
	margin:         0;
	margin-bottom:  0.75rem;
	font-family:    var(--da-card-title-family, inherit);
	font-weight:    var(--da-card-title-weight, inherit);
	font-style:     var(--da-card-title-style, normal);
	font-size:      var(--da-card-title-size, clamp(1.05rem, 1.6vw, 1.25rem));
	line-height:    var(--da-card-title-line-height, 1.3);
	letter-spacing: var(--da-card-title-letter-spacing, normal);
	text-transform: var(--da-card-title-text-transform, none);
	color:          var(--da-card-title-color, inherit);
}

#SD .display-audiences .da-description {
	margin:         0;
	font-family:    var(--da-card-desc-family, inherit);
	font-weight:    var(--da-card-desc-weight, inherit);
	font-style:     var(--da-card-desc-style, normal);
	font-size:      var(--da-card-desc-size, clamp(0.9rem, 1.4vw, 1rem));
	line-height:    var(--da-card-desc-line-height, 1.6);
	letter-spacing: var(--da-card-desc-letter-spacing, normal);
	text-transform: var(--da-card-desc-text-transform, none);
	color:          var(--da-card-desc-color, inherit);
	opacity:        0.85;
}

/* ── Mobile: icon-left / text-right row layout ───────────────────────
   Below the tablet breakpoint (matches .da-grid's own 768px switch),
   cards drop the centered icon-on-top layout for a compact table-style
   row — small icon on the left, left-justified name/description on the
   right — instead of a full-width stacked card per audience. Icon size
   tokens are overridden locally rather than site-wide since the
   sitewide Design Token values are tuned for the larger desktop medallion. */
@media screen and (max-width: 767px) {
	.display-audiences .da-card {
		--da-card-icon-size:       1.5rem;
		--da-card-icon-bg-padding: 0.5rem;
		display:      grid;
		grid-template-columns: auto 1fr;
		column-gap:   0.85rem;
		align-items:  center;
		text-align:   left;
	}

	.display-audiences .da-icon {
		grid-column:   1;
		grid-row:      1 / -1;
		margin-bottom: 0;
	}

	#SD .display-audiences .da-name {
		grid-column:   2;
		margin-bottom: 0.25rem;
	}

	#SD .display-audiences .da-description {
		grid-column: 2;
	}
}