/* ============================================================
   Display Case Study Block — build 3

   No .SDblock — page-width-control.css's generic
   ".entry-content > :not(.alignfull):not(.SDblock)" rule clamps this
   block via the shared --boxedWidth/--wideWidth/--veryWideWidth tokens,
   same convention as Display Audiences / Work Portfolio Grid.

   Button uses class="button" (+ .btn-secondary / .btn-ghost) so it's
   styled entirely by the sitewide Button tokens in
   assets/css/global/components/buttons.css — no button color/shape here.
   Button Style itself is now a sitewide Design Tokens choice (Case Study
   Display → Button Style), not a per-block field.
   ============================================================ */

.display-case-study {
	display: flex;
	flex-direction: column;
	gap: 4rem;
	padding-top:    var(--dcs-space-above, clamp(40px, 6vw, 100px));
	padding-bottom: var(--dcs-space-below, clamp(40px, 6vw, 100px));
}

/* ── Block Header (optional Block Head/Subhead, above all rows) ─────
   Same convention as Display Posts' .dp-header — Type Role vars only
   exist when a role is picked (set inline via shew_type_role_css_vars()),
   so with no role chosen these fall through to the sitewide Default Type
   Role. Needs the #SD ID prefix to out-specificity the sitewide
   "#SD H2 { font-size: var(--h2Size); }" rule in SDstandards.css. */
.display-case-study .dcs-header {
	text-align:    center;
	max-width:     42rem;
	margin-left:   auto;
	margin-right:  auto;
	margin-bottom: clamp(2rem, 5vw, 4rem);
}

#SD .display-case-study .dcs-block-title {
	margin-top:     0;
	margin-bottom:  0;
	font-family:    var(--dcs-block-title-family, var(--text-role-default-family, inherit));
	font-weight:    var(--dcs-block-title-weight, var(--text-role-default-weight, inherit));
	font-style:     var(--dcs-block-title-style, var(--text-role-default-style, normal));
	font-size:      var(--dcs-block-title-size, var(--text-role-default-size, inherit));
	line-height:    var(--dcs-block-title-line-height, var(--text-role-default-line-height, normal));
	letter-spacing: var(--dcs-block-title-letter-spacing, var(--text-role-default-letter-spacing, normal));
	text-transform: var(--dcs-block-title-text-transform, var(--text-role-default-text-transform, none));
	color:          var(--dcs-block-title-color, var(--text-role-default-color, inherit));
}

#SD .display-case-study .dcs-block-subhead {
	margin-top:     0.75rem;
	margin-bottom:  0;
	font-family:    var(--dcs-block-subhead-family, var(--text-role-default-family, inherit));
	font-weight:    var(--dcs-block-subhead-weight, var(--text-role-default-weight, inherit));
	font-style:     var(--dcs-block-subhead-style, var(--text-role-default-style, normal));
	font-size:      var(--dcs-block-subhead-size, var(--text-role-default-size, inherit));
	line-height:    var(--dcs-block-subhead-line-height, var(--text-role-default-line-height, normal));
	letter-spacing: var(--dcs-block-subhead-letter-spacing, var(--text-role-default-letter-spacing, normal));
	text-transform: var(--dcs-block-subhead-text-transform, var(--text-role-default-text-transform, none));
	color:          var(--dcs-block-subhead-color, var(--text-role-default-color, inherit));
}

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

.dcs-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 3rem;
	align-items: center;
}

.dcs-row--image-right {
	grid-template-areas: "content images";
}
.dcs-row--image-right .dcs-images { grid-area: images; }
.dcs-row--image-right .dcs-content { grid-area: content; }

.dcs-row--image-left {
	grid-template-areas: "images content";
}
.dcs-row--image-left .dcs-images { grid-area: images; }
.dcs-row--image-left .dcs-content { grid-area: content; }

.dcs-images {
	position: relative;
	aspect-ratio: 4 / 3;
}

.dcs-image {
	position: absolute;
	overflow: hidden;
}

/* Featured image corner radius — Case Study Image & Screen tokens
   (inc/case-study-frame-tokens.php); the Layered Reveal frame below uses
   the same token. */
.dcs-image--primary {
	border-radius: var(--dcs-image-radius, 0);
}

.dcs-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Image-left rows: content sits to the right, so the secondary image
   hugs the right/inner edge, next to the content column. */
.dcs-row--image-left .dcs-image--primary {
	top: 0;
	left: 0;
	width: 72%;
	height: 82%;
	z-index: 1;
}

.dcs-row--image-left .dcs-image--secondary {
	right: 0;
	bottom: 0;
	width: 42%;
	height: 46%;
	z-index: 2;
}

/* Image-right rows: content sits to the left, so the whole composition
   mirrors horizontally — primary anchors top-right, secondary anchors
   bottom-left — keeping the secondary image on the inner/center side,
   next to the content column, instead of stranded on the outer edge. */
.dcs-row--image-right .dcs-image--primary {
	top: 0;
	right: 0;
	width: 72%;
	height: 82%;
	z-index: 1;
}

.dcs-row--image-right .dcs-image--secondary {
	left: 0;
	bottom: 0;
	width: 42%;
	height: 46%;
	z-index: 2;
}

.dcs-content {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1.25rem;
}

/* Type Role — sitewide (Case Study Display → Title → Type Role), applies
   to every case study's own title. Same fallback convention as
   .dcs-block-title above. */
#SD .dcs-title {
	margin:         0;
	font-family:    var(--dcs-title-family, var(--text-role-default-family, inherit));
	font-weight:    var(--dcs-title-weight, var(--text-role-default-weight, inherit));
	font-style:     var(--dcs-title-style, var(--text-role-default-style, normal));
	font-size:      var(--dcs-title-size, var(--text-role-default-size, inherit));
	line-height:    var(--dcs-title-line-height, var(--text-role-default-line-height, normal));
	letter-spacing: var(--dcs-title-letter-spacing, var(--text-role-default-letter-spacing, normal));
	text-transform: var(--dcs-title-text-transform, var(--text-role-default-text-transform, none));
	color:          var(--dcs-title-color, var(--text-role-default-color, inherit));
}

/* Overview / Quote / Quote Meta / Quotation Mark read --dcs-{element}-*
   vars from Design Tokens → Portfolio → Anchor Portfolio Pieces → Base
   (shew_apt_dcs_style(), inc/anchor-portfolio-tokens.php) — the same
   tokens as the Work Portfolio Grid anchor cards. Each falls back to this
   block's original hardcoded look when no role is picked. */
.dcs-overview {
	margin: 0;
	font-family:    var(--dcs-overview-family, inherit);
	font-weight:    var(--dcs-overview-weight, inherit);
	font-style:     var(--dcs-overview-style, inherit);
	font-size:      var(--dcs-overview-size, inherit);
	line-height:    var(--dcs-overview-line-height, inherit);
	letter-spacing: var(--dcs-overview-letter-spacing, inherit);
	text-transform: var(--dcs-overview-text-transform, none);
	color:          var(--dcs-overview-color, inherit);
}

/* Tighten the overview block — the wysiwyg's last paragraph shouldn't
   leave trailing space before the button. */
.dcs-overview > *:last-child {
	margin-bottom: 0;
}

/* ── Pull quote — testimonial relationship (shew_anchor_testimonial_data()),
   same source/markup shape as the Work Portfolio Grid Anchor Tile's
   .wpg-anchor-quote-content (workPortfolioGrid.css), renamed with the dcs-
   prefix rather than shared classes since this block's content column has
   no hanging-indent grid to hook the quote mark's offset to. ────────────── */
.dcs-quote-content {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	min-width: 0;
}

/* Hanging indent: the whole content column (title, overview, quote text,
   photo/name, button) is inset by the circle's width + gap, and only the
   quotation-mark circle sits out in that indent — so every element shares
   one left edge and the mark hangs left of it. */
.dcs-content {
	--dcs-mark-circle-size: 2rem;
	--dcs-mark-circle-gap: 0.625rem;
	--dcs-hang: calc(var(--dcs-mark-circle-size) + var(--dcs-mark-circle-gap));
	padding-left: var(--dcs-hang);
}

.dcs-quote {
	margin: 0;
	position: relative;
	font-family:    var(--dcs-quote-family, inherit);
	font-weight:    var(--dcs-quote-weight, inherit);
	font-style:     var(--dcs-quote-style, italic);
	font-size:      var(--dcs-quote-size, 1.1rem);
	line-height:    var(--dcs-quote-line-height, 1.5);
	letter-spacing: var(--dcs-quote-letter-spacing, normal);
	text-transform: var(--dcs-quote-text-transform, none);
	color:          var(--dcs-quote-color, inherit);
}

/* Circle badge — same treatment as the anchor card's
   .wpg-anchor-quote-mark (workPortfolioGrid.css). Mark Type Role supplies
   family/weight/style only; size stays fixed to the circle. */
.dcs-quote-mark {
	position: absolute;
	left: calc(-1 * var(--dcs-hang));
	top: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--dcs-mark-circle-size);
	height: var(--dcs-mark-circle-size);
	/* The glyph sits in the top of its em box — nudged down so it reads
	   centered in the circle rather than riding its upper edge. */
	padding-top: 0.35em;
	box-sizing: border-box;
	border-radius: 50%;
	background: var(--dcs-mark-bg, var(--colF));
	color: var(--dcs-mark-fg, #ffffff);
	font-family: var(--dcs-mark-family, inherit);
	font-weight: var(--dcs-mark-weight, 700);
	font-style: var(--dcs-mark-style, normal);
	font-size: 1.5rem;
	line-height: 1;
	letter-spacing: normal;
	text-transform: none;
}

.dcs-quote-meta {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	font-family:    var(--dcs-quote-meta-family, inherit);
	font-weight:    var(--dcs-quote-meta-weight, inherit);
	font-style:     var(--dcs-quote-meta-style, normal);
	font-size:      var(--dcs-quote-meta-size, 0.875em);
	line-height:    var(--dcs-quote-meta-line-height, inherit);
	letter-spacing: var(--dcs-quote-meta-letter-spacing, normal);
	text-transform: var(--dcs-quote-meta-text-transform, none);
	color:          var(--dcs-quote-meta-color, inherit);
}

.dcs-quote-face {
	flex: 0 0 auto;
	width: 3rem;
	height: 3rem;
	border-radius: 50%;
	overflow: hidden;
}

.dcs-quote-face img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.dcs-quote-meta-text {
	display: flex;
	flex-direction: column;
	gap: 0.15em;
	min-width: 0;
}

.dcs-person {
	font-weight: 600;
}

.dcs-title-org {
	opacity: 0.8;
}

/* ── Title link — inherits the sitewide link colour + hover (GeneratePress
   a / a:hover), just without the underline. ─────────────────────────────── */
.dcs-title-link {
	text-decoration: none;
}

/* ── Desktop screen — in the shared Flat Screen Image style
   (.screenImage--flat, screenImageDemo.css; stroke/radius/shadow from the
   sitewide Screen Image tokens). Both Classic and Layered Reveal render it
   inside .dcs-image-link. Treating the featured image as a 10 × 10 grid: the
   screen is 3⅓ units wide, its right edge 1 unit in from the image's right
   edge, and its bottom 2 units below the image's bottom (the link overlay
   is the same size as the image, so these percentages are image-relative).
   Layered Reveal slides/fades it in as part of the entrance timeline
   (displayCaseStudy.js); it's visible by default if that never runs. */
.dcs-screen {
	position: absolute;
	right: 10%;
	bottom: -20%;
	width: 33.333%;
}

/* Case Study Image & Screen tokens (inc/case-study-frame-tokens.php) —
   override the sitewide Screen Image radius/stroke for this screen only,
   falling back to those --si-flat-* values when unset. */
.dcs-screen .screenImage--flat {
	border-radius: var(--dcs-screen-radius, var(--si-flat-radius, 0px));
	border-width:  var(--dcs-screen-stroke-width, var(--si-flat-border-width, 0px));
	border-color:  var(--dcs-screen-stroke-color, var(--si-flat-border-color, transparent));
}

/* Image-right (even) rows mirror it: left edge 1 unit in from the image's
   left edge instead. Reset below the 780px breakpoint, where every row is
   forced to the same composition (see the media query further down). */
.dcs-row--image-right .dcs-screen {
	right: auto;
	left: 10%;
}

/* Transparent overlay making the whole featured image (screen included) a
   link — kept out of the tab order/a11y tree since the title and button
   link to the same case study. */
.dcs-image-link {
	position: absolute;
	inset: 0;
	z-index: 4;
}

/* Room below the row for the screen's overhang (0.2 × image width). Margin
   percentages resolve against the block's width; the image column is
   (100% − 3rem gap) / 2 of that, so 0.2 × that = 10% − 0.3rem. Kept off
   .dcs-images itself so the text column stays centred on the image. */
.dcs-row:has(.dcs-screen) {
	margin-bottom: calc(10% - 0.3rem);
}

@media (max-width: 780px) {
	.dcs-row,
	.dcs-row--image-left,
	.dcs-row--image-right {
		grid-template-columns: 1fr;
		grid-template-areas:
			"images"
			"content";
		/* Tighter than the desktop column gap — once stacked, this becomes
		   the vertical space between the image and the title right below it.
		   Matches .dcs-content's own gap (title → description → button) so
		   the image-to-title spacing reads the same as the rest of the
		   stack, rather than looking like its own, tighter rhythm. */
		gap: 1.25rem;
	}

	/* Desktop/tablet alternate the image left/right (.dcs-row--image-right
	   above); once rows stack to one column below this breakpoint that
	   alternation just reads as inconsistent, so every row is forced to the
	   same flush-left composition here, mobile only. */
	.dcs-row--image-right .dcs-image--primary {
		left: 0;
		right: auto;
	}
	.dcs-row--image-right .dcs-image--secondary {
		left: auto;
		right: 0;
	}

	/* .dcs-image--primary's 82%-height rule (below) leaves the remaining
	   18% of the .dcs-images box as dead space under the photo before the
	   gap above even starts — invisible on desktop where the secondary
	   image usually fills that corner, but with no secondary present
	   (:only-child) it just pads out the title further than the gap alone
	   suggests. Mobile only: let the single image fill the box so the gap
	   above is the true visible distance to the title. */
	.dcs-image--primary:only-child {
		height: 100%;
	}

	/* Stacked: the title sits right under the image, so the overhang room
	   (20% of the full-width image) goes under the image instead of the row. */
	.dcs-row:has(.dcs-screen) {
		margin-bottom: 0;
	}
	.dcs-row--image-right .dcs-screen {
		left: auto;
		right: 10%;
	}
	.dcs-images:has(.dcs-screen) {
		margin-bottom: 20%;
	}
}

/* ============================================================
   Reveal Style: Layered Reveal — background photo + foreground SVG
   collapse/draw/settle, driven by displayCaseStudy.js + the sitewide
   Case Study Reveal tokens (data-csr-settings, JSON on .dcs-reveal-frame).
   Ported from the Reveal Rig prototype. Replaces the primary/secondary
   pair entirely for this style — see block-display-case-study.php.
   ============================================================ */
.dcs-images--reveal {
	aspect-ratio: 1 / 1;
}

.dcs-reveal-frame {
	position: absolute;
	inset: 0;
	overflow: hidden;
	border-radius: var(--dcs-image-radius, 0);
}

.dcs-reveal-bg-group {
	position: absolute;
	inset: 0;
	opacity: 0;
}

.dcs-reveal-bg-img {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
}

.dcs-reveal-bg-tint {
	position: absolute;
	inset: 0;
}

.dcs-reveal-fg-outer {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 10%;
}

.dcs-reveal-fg-outer svg {
	width: 100%;
	height: 100%;
	overflow: visible;
	transform-box: fill-box;
	transform-origin: center;
}

/* Hides the untouched source copy the JS reads once, then clones into the
   stroke-layer/fill-layer divs it builds at runtime (see displayCaseStudy.js —
   same two-layer approach as the Reveal Rig, needed because many source SVGs
   carry their own `isolation: isolate` group, which traps mix-blend-mode set
   on elements inside it before it ever reaches this background photo). */
.dcs-reveal-fg-source {
	display: none;
}

.dcs-fg-layer {
	position: absolute;
	inset: 0;
}

/* ── Redraw hover (displayCaseStudy.js, after the entrance timeline
   finishes) — full-colour copy of the background photo, faded in over the
   tinted/levelled one. ─────────────────────────────────────────────────── */
.dcs-reveal-bg-color {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	opacity: 0;
}