/* ── Typography Block ───────────────────────────────────────────────────────── */

.projectBlockTypography.projectBlock
{
	padding: calc(var(--defaultInterval) * 2) calc(var(--defaultInterval) * .5);
}

/* ── Linear: text stacks above tiles ────────────────────────────────────────── */

.projectBlockTypography .typo-text
{
	max-width: var(--maxWidth);
	margin-left: auto;
	margin-right: auto;
	margin-bottom: calc(var(--defaultInterval) * 1.5);
}

#SD .projectBlockTypography .typo-headline
{
	margin-bottom:  calc(var(--defaultInterval) * .5);
	font-family:    var(--subhead-font);
	font-weight:    var(--subhead-weight);
	text-transform: var(--subhead-transform);
	letter-spacing: var(--subhead-tracking);
	font-size:      var(--subhead-size);
	color:          var(--subhead-color);
}

/* ── Radial: two-column layout ───────────────────────────────────────────────── */

.projectBlockTypography .typo-columns
{
	display: flex;
	align-items: center;
	gap: calc(var(--defaultInterval) * 2);
	max-width: var(--maxWidth);
	margin-left: auto;
	margin-right: auto;
}

.projectBlockTypography .typo-col--text
{
	flex: 1 1 0;
}

.projectBlockTypography .typo-col--type
{
	flex: 1 1 0;
}

/* Column split ratios — applied via class on .typo-columns */

.projectBlockTypography .col-split-50-50 .typo-col--text { flex: 50 1 0; }
.projectBlockTypography .col-split-50-50 .typo-col--type { flex: 50 1 0; }

.projectBlockTypography .col-split-60-40 .typo-col--text { flex: 60 1 0; }
.projectBlockTypography .col-split-60-40 .typo-col--type { flex: 40 1 0; }

.projectBlockTypography .col-split-40-60 .typo-col--text { flex: 40 1 0; }
.projectBlockTypography .col-split-40-60 .typo-col--type { flex: 60 1 0; }

.projectBlockTypography .col-split-67-33 .typo-col--text { flex: 67 1 0; }
.projectBlockTypography .col-split-67-33 .typo-col--type { flex: 33 1 0; }

.projectBlockTypography .col-split-33-67 .typo-col--text { flex: 33 1 0; }
.projectBlockTypography .col-split-33-67 .typo-col--type { flex: 67 1 0; }

/* Headline inside the radial column */
.projectBlockTypography .typo-col--text .typo-headline
{
	margin-bottom: calc(var(--defaultInterval) * .5);
}

/* ── Shared element container ────────────────────────────────────────────────── */

.projectBlockTypography .type-elements
{
	max-width: var(--maxWidth);
	margin-left: auto;
	margin-right: auto;
}

/* Inside a column the max-width constraint is irrelevant — let it fill */
.projectBlockTypography .typo-col--type .type-elements
{
	max-width: none;
}

/* ── Linear layout ───────────────────────────────────────────────────────────── */

.projectBlockTypography .type-elements-linear
{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: calc(var(--defaultInterval) * 1);
}

.projectBlockTypography .type-elements-linear .type-tile
{
	flex: 0 0 auto;
	width: clamp(120px, 18%, 200px);
}

/* ── Radial layout ───────────────────────────────────────────────────────────── */

.projectBlockTypography .type-elements-radial
{
	position: relative;
	width: min(560px, 100%);
	aspect-ratio: 1 / 1;
	margin-left: auto;
	margin-right: auto;
}

.projectBlockTypography .type-elements-radial .type-element-wrap
{
	position: absolute;
	transform: translate(-50%, -50%);
	width: clamp(100px, 20%, 180px);
}

/* ── Individual tile ─────────────────────────────────────────────────────────── */

.projectBlockTypography .type-tile
{
	display: flex;
	flex-direction: column;
	align-items: center;
}

.projectBlockTypography .tile-square
{
	width: 100%;
	aspect-ratio: 1 / 1;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--defaultBorderRadius);
	overflow: hidden;
	padding: 12%;
	box-sizing: border-box;
}

.projectBlockTypography .tile-letterform
{
	width: 100%;
	line-height: 0;
}

.projectBlockTypography .tile-letterform svg
{
	width: 100%;
	height: auto;
	display: block;
}

.projectBlockTypography .tile-font-name
{
	margin-top: calc(var(--defaultInterval) * .4);
	width: 100%;
	line-height: 0;
}

.projectBlockTypography .tile-font-name svg
{
	width: 100%;
	height: auto;
	display: block;
}

/* ── Staggered layout ────────────────────────────────────────────────────────── */

/* Two-column wrapper shared with radial, plus staggered-specific tweaks */
.projectBlockTypography .typo-columns--staggered
{
	align-items: stretch; /* both columns grow to the taller one's height */
}

/* Text column — vertically centered within the shared column height */
.projectBlockTypography .typo-columns--staggered .typo-col--text
{
	display: flex;
	flex-direction: column;
	justify-content: center;
}

/* Left column — sized to one card + the max horizontal spread (5 × 18 = 90 px) */
.projectBlockTypography .typo-columns--staggered .typo-col--type
{
	flex: 0 0 auto;
	min-width: 180px;
	overflow: visible; /* cards overflow right into the gap — intentional */
}

/* Card stack — no gap; overlap handled by negative margin on subsequent cards */
.projectBlockTypography .type-elements-staggered
{
	display:         flex;
	flex-direction:  column;
	justify-content: flex-start;
	gap:             0;
	height:          auto;
	overflow:        visible;
}

/* Each card after the first overlaps by 20px (less than 24px padding — content never obscured) */
.projectBlockTypography .type-elements-staggered .type-card + .type-card
{
	margin-top: -20px;
}

.projectBlockTypography .type-elements-staggered .type-card
{
	position:    relative;
	background:  #aaa;
	padding:     24px;
	box-shadow:  6px 6px 10px rgba(0, 0, 0, 0.25);
	width:       160px;
	height:      160px;
	box-sizing:  border-box;
	flex-shrink: 0;
	display:     flex;
	overflow:    hidden;
}

.projectBlockTypography .type-elements-staggered .type-tile
{
	width:          100%;
	height:         100%;
	display:        flex;
	flex-direction: column;
}

/* Staggered cards: the card itself is the background — no inner colored square */
.projectBlockTypography .type-elements-staggered .tile-square
{
	flex:            1 1 auto;
	min-height:      0; /* allow flex shrink below content size */
	background:      transparent;
	border-radius:   0;
	padding:         0;
	aspect-ratio:    auto;
	overflow:        hidden;
	align-items:     center;
	justify-content: center;
}

/* Letterform fills the available height without escaping the padding */
.projectBlockTypography .type-elements-staggered .tile-letterform
{
	height:          100%;
	width:           100%;
	display:         flex;
	align-items:     center;
	justify-content: center;
	line-height:     0;
}

.projectBlockTypography .type-elements-staggered .tile-letterform svg
{
	width:     auto;
	height:    100%;
	max-width: 100%;
	display:   block;
}

/* Letterform: white by default, overridden by svg_fg_color field via inline color: */
.projectBlockTypography .type-elements-staggered .tile-letterform
{
	color: #fff;
}

.projectBlockTypography .type-elements-staggered .tile-letterform svg *
{
	fill:   currentColor;
	stroke: none;
}

/* Font name: full card width, natural height (no distortion) */
/* Black by default, overridden by svg_fg_color field via inline color: */
.projectBlockTypography .type-elements-staggered .tile-font-name
{
	margin-top:  6px;
	flex-shrink: 0;
	width:       100%;
	line-height: 0;
	color:       #000;
}

.projectBlockTypography .type-elements-staggered .tile-font-name svg
{
	width:   100%;
	height:  auto;
	display: block;
}

.projectBlockTypography .type-elements-staggered .tile-font-name svg *
{
	fill: currentColor;
}

/* ── Responsive ──────────────────────────────────────────────────────────────── */

@media only screen and (max-width: 800px)
{
	/* Radial two-column collapses to single column;
	   order-text-first → text on top, order-type-first → type on top */
	.projectBlockTypography .typo-columns
	{
		flex-direction: column;
	}

	.projectBlockTypography .typo-columns.order-type-first
	{
		flex-direction: column-reverse;
	}

	/* All column flex ratios irrelevant at single column — full width */
	.projectBlockTypography .typo-col--text,
	.projectBlockTypography .typo-col--type
	{
		flex: 1 1 auto;
		width: 100%;
	}

	/* Linear */
	.projectBlockTypography .type-elements-linear
	{
		gap: calc(var(--defaultInterval) * .75);
	}

	.projectBlockTypography .type-elements-linear .type-tile
	{
		width: clamp(90px, 28vw, 150px);
	}

	/* Radial */
	.projectBlockTypography .type-elements-radial
	{
		width: min(420px, 90vw);
	}

	.projectBlockTypography .type-elements-radial .type-element-wrap
	{
		width: clamp(70px, 18%, 130px);
	}

	/* Staggered — collapse to single column on mobile */
	.projectBlockTypography .typo-columns--staggered
	{
		flex-direction: column;
	}

	.projectBlockTypography .typo-columns--staggered .typo-col--type
	{
		min-width: 0;
		width: 100%;
	}

	.projectBlockTypography .type-elements-staggered
	{
		height:          auto;
		flex-direction:  column;
		flex-wrap:       nowrap;
		align-items:     center;
		justify-content: flex-start;
		gap:             0;
	}

	.projectBlockTypography .type-elements-staggered .type-card
	{
		margin-left: 0 !important; /* reset PHP-driven horizontal offsets */
		width:   clamp(120px, 28vw, 160px);
		padding: 20px;
	}

	/* Overlap successive cards by 10px */
	.projectBlockTypography .type-elements-staggered .type-card + .type-card
	{
		margin-top: -10px;
	}

	/* Odd cards left, even cards right — 10px total horizontal stagger */
	.projectBlockTypography .type-elements-staggered .type-card:nth-child(odd)
	{
		transform: translateX(-10px);
	}

	.projectBlockTypography .type-elements-staggered .type-card:nth-child(even)
	{
		transform: translateX(10px);
	}
}