/**
 * Bridge summary pages — work engagements (/work/{slug}/) + project bridges (/projects/{slug}/).
 * Templates: page-work-bridge.html, page-project-bridge.html → main.studio-bridge-page
 * Mobile layout: @media (max-width: 782px) block at end of file (all bridge pages).
 * Overview grid + placeholder: .bridge-overview (theme/inc/bridge-overview-placeholder.php).
 */

@media (prefers-reduced-motion: no-preference) {
	main.studio-bridge-page :is(
		.wp-block-column,
		.wp-block-group,
		.wp-block-columns,
		.wp-block-image,
		.wp-block-image figure,
		.wp-block-image img,
		.wp-block-html,
		.cs-section
	) {
		transition: none !important;
	}

	main.studio-bridge-page :is(
		.wp-block-column,
		.wp-block-group,
		.wp-block-columns,
		.wp-block-image,
		.wp-block-image figure
	):hover {
		transform: none !important;
		box-shadow: none !important;
		filter: none !important;
	}
}

/* Body blocks render as direct children of <main> (no .entry-content wrapper). */
main.studio-bridge-page {
	--studio-shell-max: calc(
		var(--studio-wide-size, 1200px) + var(--wp--style--root--padding-left, 1.5rem)
			+ var(--wp--style--root--padding-right, 1.5rem)
	);
	box-sizing: border-box;
	width: 100%;
	max-width: none !important;
	margin-inline: 0 !important;
	padding-inline: max(
		var(--wp--style--root--padding-left, 1.5rem),
		calc((100% - var(--studio-wide-size, 1200px)) / 2)
	) !important;
	padding-bottom: var(--wp--preset--spacing--70, 6rem);
	overflow-x: visible;
	background: var(--wp--preset--color--base, #faf9f7);
}

/* Fallback if WP wraps post content */
main.studio-bridge-page > .alignfull.wp-block-post-content,
main.studio-bridge-page > .alignfull.entry-content,
main.studio-bridge-page > .wp-block-post-content.alignfull,
main.studio-bridge-page > .entry-content.alignfull {
	margin-inline: 0 !important;
	width: 100%;
	max-width: none;
}

main.studio-bridge-page > .wp-block-post-content,
main.studio-bridge-page > .entry-content {
	box-sizing: border-box;
	width: 100%;
	max-width: none !important;
	margin-inline: 0 !important;
	padding-inline: 0 !important;
	overflow-x: visible;
}

.wp-site-blocks > .studio-hero.studio-hero--work-bridge.studio-hero--video,
.wp-site-blocks > .studio-hero.studio-hero--project-bridge.studio-hero--video {
	min-height: min(48vh, 480px);
}

.wp-site-blocks > .studio-hero--work-bridge .wp-block-heading,
.wp-site-blocks > .studio-hero--project-bridge .wp-block-heading {
	color: var(--wp--preset--color--base) !important;
}

.wp-site-blocks > .studio-hero--work-bridge p,
.wp-site-blocks > .studio-hero--project-bridge p {
	color: rgba(250, 249, 247, 0.65) !important;
}

.wp-site-blocks > .studio-hero--work-bridge a,
.wp-site-blocks > .studio-hero--project-bridge a {
	color: rgba(250, 249, 247, 0.9) !important;
}

/* Breadcrumb — Work → domain (hero + below-hero bar) */
.studio-bridge-crumb {
	font-family: var(--wp--preset--font-family--sans, 'Source Sans 3', sans-serif);
	font-size: 0.8rem;
	font-weight: 500;
	letter-spacing: 0.04em;
	margin: 0;
}

.studio-bridge-crumb--hero {
	margin: 0 0 var(--wp--preset--spacing--30, 1rem);
	max-width: var(--studio-wide-size, 1200px);
}

.studio-bridge-crumb--hero .studio-bridge-crumb__link {
	color: rgba(250, 249, 247, 0.72) !important;
}

.studio-bridge-crumb--hero .studio-bridge-crumb__link:hover,
.studio-bridge-crumb--hero .studio-bridge-crumb__link:focus-visible {
	color: #faf9f7 !important;
}

.studio-bridge-crumb--hero .studio-bridge-crumb__sep {
	color: rgba(250, 249, 247, 0.38);
}

main.studio-work-bridge > .studio-bridge-crumb-bar {
	width: 100%;
	max-width: none !important;
	margin-inline: 0 !important;
	padding-block: var(--wp--preset--spacing--40, 1.5rem) var(--wp--preset--spacing--30, 1rem);
	padding-inline: 0 !important;
	box-sizing: border-box;
	border-bottom: 1px solid rgba(26, 26, 26, 0.08);
}

main.studio-work-bridge > .studio-bridge-crumb-bar + .cs-section {
	padding-top: var(--wp--preset--spacing--50, 2.5rem);
}

.studio-bridge-crumb--below .studio-bridge-crumb__link {
	color: var(--studio-teal, #2c5f6e);
	text-decoration: none;
	transition: color 0.2s ease;
}

.studio-bridge-crumb--below .studio-bridge-crumb__link:hover,
.studio-bridge-crumb--below .studio-bridge-crumb__link:focus-visible {
	color: var(--studio-teal-light, #3d7a8c);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.studio-bridge-crumb--below .studio-bridge-crumb__sep {
	color: var(--wp--preset--color--muted);
}

.studio-bridge-crumb__link {
	text-decoration: none;
	transition: color 0.2s ease;
}

/* Current page — non-linked final segment */
.studio-bridge-crumb--hero .studio-bridge-crumb__current {
	color: rgba(255, 255, 255, 0.65);
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.studio-bridge-crumb--below .studio-bridge-crumb__current {
	color: var(--wp--preset--color--foreground, #1a1a1a);
	font-weight: 600;
}

main.studio-bridge-page > .cs-callout {
	margin-inline: 0 !important;
	width: 100%;
	max-width: none;
	padding: 3rem var(--wp--preset--spacing--50, 2.5rem) !important;
	box-sizing: border-box;
}

main.studio-bridge-page .cs-section {
	padding-block: var(--wp--preset--spacing--55, 3rem);
	padding-inline: 0 !important;
	box-sizing: border-box;
	width: 100%;
	max-width: none !important;
	margin-inline: 0 !important;
}

/* Overview split — narrative left, product visual right (work + project bridges) */
.bridge-overview {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(2rem, 4vw, 4rem);
	align-items: start;
}

.bridge-overview:has(.bridge-overview__visual) {
	grid-template-columns: minmax(0, 1fr) minmax(260px, 38%);
}

.bridge-overview:has(.bridge-overview__visual) .bridge-overview__meta {
	grid-column: 1;
	grid-row: 1;
}

.bridge-overview:has(.bridge-overview__visual) .bridge-overview__body {
	grid-column: 1;
	grid-row: 2;
}

.bridge-overview__meta,
.bridge-overview__body {
	min-width: 0;
}

.bridge-overview__visual {
	min-width: 0;
	grid-column: 2;
	grid-row: 1 / -1;
	align-self: start;
	position: sticky;
	top: calc(var(--studio-header-offset, 5rem) + 1.25rem);
}

/* Left column wrapper — meta + body stacked as a single grid item.
   Decouples left-column height from the sticky right column (image + gate),
   preventing CSS Grid from inflating row-1 height and leaving blank space
   below the short meta block. */
.bridge-overview__left {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: clamp(2rem, 4vw, 4rem);
}

/* Sticky side column — visual + gate stacked in col 2 */
.bridge-overview__side {
	min-width: 0;
	grid-column: 2;
	align-self: start;
	position: sticky;
	top: calc(var(--studio-header-offset, 5rem) + 1.25rem);
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--40, 2rem);
}

/* Visual inside __side: clear any inherited grid/sticky properties */
.bridge-overview__side .bridge-overview__visual {
	grid-column: auto;
	grid-row: auto;
	align-self: auto;
	position: static;
	top: auto;
}

/* Gate inside __side: zero its own margins — flex gap on __side provides spacing */
.bridge-overview__side .studio-gate,
.bridge-overview__side .studio-gate.alignwide {
	margin-top: 0;
	margin-bottom: 0;
	margin-inline: 0;
	max-width: none;
	width: 100%;
	box-sizing: border-box;
}


.bridge-visual {
	margin: 0;
	border-radius: 6px;
	overflow: visible;
	background: #fff;
	border: 1px solid rgba(26, 26, 26, 0.1);
	box-shadow:
		0 1px 2px rgba(26, 26, 26, 0.06),
		0 12px 40px rgba(44, 95, 110, 0.12);
	padding: 1rem;
	box-sizing: border-box;
}

.bridge-visual--zoomable .bridge-visual__trigger {
	border-radius: 4px;
}

.bridge-visual img,
.bridge-visual__video {
	display: block;
	width: 100%;
	height: auto;
	vertical-align: middle;
}

.bridge-visual--video .bridge-visual__video {
	background: #f3efe8;
}

.bridge-visual--placeholder {
	cursor: default;
}

.bridge-visual--placeholder img {
	object-fit: cover;
	aspect-ratio: 16 / 10;
	background: #f3efe8;
}

.bridge-visual__caption {
	font-family: var(--wp--preset--font-family--sans, 'Source Sans 3', sans-serif);
	font-size: 0.72rem;
	line-height: 1.35;
	color: var(--wp--preset--color--muted);
	margin: 0.65rem 0 0;
	letter-spacing: 0.02em;
	max-width: 100%;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.bridge-overview__body .cs-body {
	max-width: 58ch;
}

.bridge-overview__body .cs-outcomes {
	margin-top: var(--wp--preset--spacing--50, 2.5rem);
}

/* Callout in overview — align with narrative column (not full-bleed centered) */
.studio-bridge-page .bridge-overview__body .cs-callout,
.studio-bridge-page .bridge-overview__left .cs-callout {
	margin-inline: 0 !important;
	margin-top: var(--wp--preset--spacing--50, 2.5rem);
	width: 100%;
	max-width: 58ch;
	text-align: left;
	box-sizing: border-box;
}

@media (max-width: 900px) {
	.bridge-overview,
	.bridge-overview:has(.bridge-overview__visual) {
		grid-template-columns: 1fr !important;
		gap: var(--wp--preset--spacing--50, 2.5rem);
	}

	.bridge-overview:has(.bridge-overview__visual) .bridge-overview__meta {
		grid-column: 1;
		grid-row: 1;
	}

	.bridge-overview__side,
	.bridge-overview__visual {
		position: static;
		grid-column: 1;
	}

	.bridge-overview__left {
		grid-column: 1;
	}
}

/* Homepage gate rail — white background; extra top space below the console */
[data-hp-gate].studio-bridge-gate-rail {
	background: #fff;
	padding-top: var(--wp--preset--spacing--60, 4rem);
	padding-bottom: var(--wp--preset--spacing--40, 1.5rem);
}

/* Gate rail — hoisted above main; matches body padding so gate content aligns with text below */
.studio-bridge-gate-rail {
	width: 100%;
	box-sizing: border-box;
	background: var(--wp--preset--color--base, #faf9f7);
	padding-inline: max(
		var(--wp--style--root--padding-left, 1.5rem),
		calc((100% - var(--studio-wide-size, 1200px)) / 2)
	);
	padding-top: var(--wp--preset--spacing--55, 3rem);
	padding-bottom: var(--wp--preset--spacing--55, 3rem);
}

.studio-bridge-gate-rail .studio-gate {
	margin-top: 0;
	margin-bottom: 0;
}

.studio-bridge-gate-rail .studio-gate--case-study,
.studio-bridge-gate-rail .studio-gate--project,
.studio-bridge-gate-rail .studio-gate--hub {
	width: 100%;
	max-width: none;
	margin-inline: 0;
	padding-inline: 0;
	box-sizing: border-box;
}

/* Gate wrapper — full rail width; padding lives on .studio-gate__shell */
main.studio-bridge-page > .studio-gate.alignwide:has(.studio-gate__shell),
main.studio-bridge-page > .alignwide.studio-gate:has(.studio-gate__shell) {
	max-width: none !important;
	width: 100% !important;
	margin-inline: 0 !important;
	padding-inline: 0 !important;
}

main.studio-bridge-page .cs-related {
	font-family: var(--wp--preset--font-family--sans, 'Source Sans 3', sans-serif);
	font-size: var(--wp--preset--font-size--small, 0.875rem);
	margin-top: var(--wp--preset--spacing--40, 1.5rem);
}

main.studio-bridge-page .cs-related a {
	color: var(--studio-teal, #2c5f6e);
}

main.studio-bridge-page .studio-gate--case-study,
main.studio-bridge-page .studio-gate--project,
main.studio-bridge-page .studio-gate--hub {
	width: 100%;
	max-width: none;
	margin-inline: 0;
	padding-inline: 0;
	box-sizing: border-box;
}

@media (max-width: 782px) {
	main.studio-bridge-page {
		overflow-x: clip;
	}

	/* Hero crumb is enough on small screens */
	main.studio-work-bridge > .studio-bridge-crumb-bar {
		display: none;
	}

	main.studio-work-bridge > .studio-bridge-crumb-bar + .cs-section {
		padding-top: var(--wp--preset--spacing--40, 1.5rem);
	}

	.wp-site-blocks > .studio-hero.studio-hero--work-bridge.studio-hero--video,
	.wp-site-blocks > .studio-hero.studio-hero--project-bridge.studio-hero--video {
		min-height: min(44vh, 400px);
	}

	.studio-hero--work-bridge .cluster-hero__content,
	.studio-hero--project-bridge .cluster-hero__content {
		padding-top: var(--wp--preset--spacing--50, 2.5rem);
		padding-bottom: var(--wp--preset--spacing--50, 2.5rem);
	}

	.studio-hero--work-bridge .wp-block-heading,
	.studio-hero--project-bridge .wp-block-heading {
		font-size: clamp(1.6rem, 6.8vw, 2.15rem) !important;
		line-height: 1.12 !important;
		max-width: none;
	}

	.studio-bridge-crumb--hero {
		font-size: 0.75rem;
	}

	.bridge-visual {
		padding: 0.75rem;
	}

	.bridge-visual__caption {
		white-space: normal;
		overflow: visible;
		text-overflow: unset;
	}

	.bridge-overview__body .cs-body {
		max-width: none;
	}

	main.studio-bridge-page .cs-stack-row {
		grid-template-columns: minmax(0, 7.5rem) minmax(0, 1fr);
		gap: 0.35rem 0.75rem;
		align-items: start;
		word-break: break-word;
	}

	main.studio-bridge-page .cs-outcome {
		grid-template-columns: 1fr;
		gap: 0.5rem;
		padding: 1.5rem 0;
	}

	.studio-bridge-gate-rail {
		padding-top: var(--wp--preset--spacing--50, 2.5rem);
		padding-bottom: var(--wp--preset--spacing--50, 2.5rem);
	}

	main.studio-bridge-page .studio-gate__shell {
		padding: var(--wp--preset--spacing--40, 1.5rem) var(--wp--preset--spacing--30, 1rem);
	}

	.studio-bridge-gate-rail .studio-gate__shell {
		padding: var(--wp--preset--spacing--40, 1.5rem) var(--wp--preset--spacing--30, 1rem);
	}

	.studio-bridge-gate-rail .studio-gate__main {
		display: flex;
		flex-direction: column;
		gap: var(--wp--preset--spacing--35, 1.25rem);
	}

	.studio-bridge-gate-rail .studio-gate__head {
		margin-bottom: 0;
	}

	.studio-bridge-gate-rail .studio-gate__actions {
		width: 100%;
		flex-direction: column;
		align-items: stretch;
		gap: var(--wp--preset--spacing--30, 1rem);
	}

	.studio-bridge-gate-rail .studio-gate__cta {
		width: 100%;
		margin: 0 !important;
	}

	.studio-bridge-gate-rail .studio-gate__cta .studio-btn-primary {
		width: 100%;
		justify-content: center;
		box-sizing: border-box;
	}

	.studio-bridge-gate-rail .studio-gate__alt {
		text-align: center;
	}

	main.studio-bridge-page .studio-gate__main {
		display: flex;
		flex-direction: column;
		gap: var(--wp--preset--spacing--35, 1.25rem);
	}

	main.studio-bridge-page .studio-gate__head {
		margin-bottom: 0;
	}

	main.studio-bridge-page .studio-gate__actions {
		width: 100%;
		flex-direction: column;
		align-items: stretch;
		gap: var(--wp--preset--spacing--30, 1rem);
	}

	main.studio-bridge-page .studio-gate__cta {
		width: 100%;
		margin: 0 !important;
	}

	main.studio-bridge-page .studio-gate__cta .studio-btn-primary {
		width: 100%;
		justify-content: center;
		box-sizing: border-box;
	}

	main.studio-bridge-page .studio-gate__alt {
		text-align: center;
	}
}

@media (max-width: 480px) {
	main.studio-bridge-page .cs-stack-row {
		grid-template-columns: 1fr;
	}

	main.studio-bridge-page .cs-stack-key {
		display: block;
		margin-bottom: 0.1rem;
	}
}

@media (max-width: 700px) {
	main.studio-bridge-page .cs-section {
		padding-block: var(--wp--preset--spacing--50, 2.5rem);
	}
}

/* ─── Podcast callout ─────────────────────────────────── */

.cs-podcast-callout {
	display: flex;
	align-items: flex-start;
	gap: 1.25rem;
	border-left: 3px solid var(--studio-teal, #2c5f6e);
	padding: 1.25rem 1.5rem;
	margin-top: var(--wp--preset--spacing--50, 2.5rem);
	margin-bottom: var(--wp--preset--spacing--40, 1.5rem);
	font-family: var(--wp--preset--font-family--sans, 'Source Sans 3', sans-serif);
}

.cs-podcast-callout__cover {
	flex-shrink: 0;
	width: 120px;
	height: 120px;
	border-radius: 4px;
	overflow: hidden;
}

.cs-podcast-callout__cover img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.cs-podcast-callout__body {
	flex: 1;
	min-width: 0;
}

.cs-podcast-callout__label {
	font-size: 0.68rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted, #6b6560);
	margin: 0 0 0.35rem;
}

.cs-podcast-callout__title {
	font-size: 1.05rem;
	font-weight: 600;
	color: var(--wp--preset--color--contrast, #1a1a1a);
	margin: 0 0 0.25rem;
}

.cs-podcast-callout__meta {
	font-size: 0.82rem;
	color: var(--wp--preset--color--muted, #6b6560);
	margin: 0 0 0.5rem;
}

.cs-podcast-callout__lede {
	font-size: 0.92rem;
	line-height: 1.5;
	color: var(--wp--preset--color--contrast, #1a1a1a);
	margin: 0 0 0.75rem;
}

.cs-podcast-callout__link {
	font-size: 0.88rem;
	font-weight: 600;
	color: var(--studio-teal, #2c5f6e);
	text-decoration: none;
	border-bottom: 1px solid rgba(44, 95, 110, 0.35);
	padding-bottom: 1px;
	transition: border-color 0.2s ease, color 0.2s ease;
}

.cs-podcast-callout__link:hover {
	border-color: var(--studio-teal, #2c5f6e);
	color: var(--wp--preset--color--contrast, #1a1a1a);
}

@media (max-width: 480px) {
	.cs-podcast-callout {
		flex-direction: column;
		gap: 0.75rem;
	}

	.cs-podcast-callout__cover {
		width: 60px;
		height: 60px;
	}
}