/* Shared image slot: a photo, or a labelled placeholder box. */
.xh-core-media {
	position: relative;
	overflow: hidden;
	display: flex;
	align-items: flex-end;
}
.xh-core-media__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.xh-core-media--empty span {
	font-family: var(--wp--preset--font-family--mono, monospace);
	font-size: 12px;
	color: var(--xh-muted, #61666E);
}

/* Case study gallery. */
.xh-case-gallery {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr));
	gap: 20px;
}
.xh-case-gallery .xh-core-media {
	height: 320px;
	border-radius: 22px;
	background: #E3E4E1;
	padding: 18px;
}

/* Bento category tiles (v2 design). */
.xh-bento {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-auto-rows: 240px;
	grid-auto-flow: dense;
	gap: 16px;
}
.xh-bento__tile {
	position: relative;
	display: flex;
	align-items: flex-end;
	padding: 22px;
	overflow: hidden;
	border-radius: 28px;
	border: 1px solid var(--xh-glass-border, rgba(8,14,26,.08));
	box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 24px 50px -30px rgba(30,60,110,.45);
	background:
		radial-gradient(90% 80% at 15% 10%, var(--xh-a), transparent 65%),
		radial-gradient(80% 80% at 92% 100%, var(--xh-b), transparent 65%),
		var(--xh-canvas, #F4F7FB);
	color: var(--xh-heading, #0B1220);
	text-decoration: none;
}
.xh-bento__tile:nth-child(1) { grid-column: span 2; grid-row: span 2; }
.xh-bento__tile:nth-child(4),
.xh-bento__tile:nth-child(7),
.xh-bento__tile:nth-child(8),
.xh-bento__tile:nth-child(9) { grid-column: span 2; }
.xh-bento__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	mix-blend-mode: multiply;
	transition: transform 1.4s cubic-bezier(.16,1,.3,1);
}
html[data-theme="dark"] .xh-bento__img { mix-blend-mode: normal; }
.xh-bento__tile:hover .xh-bento__img { transform: scale(1.06); }
.xh-bento__placeholder {
	position: absolute;
	left: 22px;
	top: 22px;
	font: 400 12px var(--wp--preset--font-family--mono, monospace);
	color: var(--xh-muted, #61666E);
}
.xh-bento__name {
	position: relative;
	z-index: 2;
	padding: 8px 16px;
	border-radius: 99px;
	background: var(--xh-chip, rgba(255,255,255,.84));
	font-size: 15px;
	line-height: 1.3;
}
.xh-bento__more {
	position: absolute;
	z-index: 3;
	left: 12px;
	right: 12px;
	bottom: 12px;
	padding: 14px 16px;
	border-radius: 18px;
	background: var(--xh-chip, rgba(255,255,255,.9));
	border: 1px solid var(--xh-glass-border, rgba(8,14,26,.08));
	-webkit-backdrop-filter: blur(24px);
	backdrop-filter: blur(24px);
	font-size: 13.5px;
	line-height: 1.45;
	transform: translateY(130%);
	transition: transform .6s cubic-bezier(.16,1,.3,1);
}
.xh-bento__tile:hover .xh-bento__more,
.xh-bento__tile:focus-visible .xh-bento__more { transform: none; }
@media (max-width: 860px) {
	.xh-bento { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 200px; }
	.xh-bento__tile:nth-child(n) { grid-column: auto; grid-row: auto; }
	.xh-bento__tile:nth-child(1),
	.xh-bento__tile:nth-child(8),
	.xh-bento__tile:nth-child(9) { grid-column: span 2; }
	.xh-bento__more { display: none; }
}
@media (prefers-reduced-motion: reduce) {
	.xh-bento__img, .xh-bento__more { transition: none; }
}

/* Case study gallery (v2): photos on a colour mesh. */
.xh-case-gallery .xh-core-media {
	border-radius: 28px;
	border: 1px solid var(--xh-glass-border, rgba(8,14,26,.08));
	background:
		radial-gradient(90% 80% at 15% 10%, rgba(139,123,255,.35), transparent 65%),
		radial-gradient(80% 80% at 92% 100%, rgba(34,211,238,.35), transparent 65%),
		var(--xh-canvas, #F6F9FC);
}
.xh-case-gallery .xh-core-media__img { mix-blend-mode: multiply; }
html[data-theme="dark"] .xh-case-gallery .xh-core-media__img { mix-blend-mode: normal; }