/* ──────────────────────────────────────────────────────────────────────
   Aidem Project Shapes (2026-10-18)

   Base  = a responsive grid of shapes (no JS / editor / reduced motion).
   .aps-live (added by project-shapes-widget.js) = one shared space where
   the shapes are positioned absolutely and moved by the script.
   Text inside a shape scales with the shape itself (container query
   units), so it stays inside circles and pills at every size.
   ────────────────────────────────────────────────────────────────────── */

.aps {
	--aps-accent: #8c5ff5;
	--aps-type: #abd555;
	--aps-field-h: 92vh;
	--aps-vw: 75;
	box-sizing: border-box;
	/* Break out of a narrow boxed column: the space is a share of the
	   SCREEN width, centred, so the mosaic uses the width like the
	   reference site no matter how the parent container is set up. */
	width: calc(var(--aps-vw) * 1vw);
	max-width: 1900px;
	margin-left: 50%;
	transform: translateX(-50%);
}

@media (max-width: 1024px) {
	.aps { --aps-vw: 92; }
}

@media (max-width: 767px) {
	.aps { --aps-vw: 94; }
}

.aps *,
.aps *::before,
.aps *::after {
	box-sizing: inherit;
}

/* Filter row */
.aps-filter {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin: 0 0 24px;
}

.aps-chip {
	appearance: none;
	cursor: pointer;
	padding: 10px 20px;
	border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, 0.3);
	background: rgba(255, 255, 255, 0.08);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	color: #ffffff;
	font-size: var(--n-size-button-14-16px, 14px);
	font-weight: 600;
	letter-spacing: 0.04em;
	line-height: 1;
	transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}

.aps-chip:hover {
	border-color: var(--aps-accent);
	transform: translateY(-2px);
}

.aps-chip.is-active {
	background: var(--aps-accent);
	border-color: var(--aps-accent);
}

.aps-chip:focus-visible,
.aps-shape:focus-visible {
	outline: 3px solid #ffffff;
	outline-offset: 3px;
}

/* Fallback grid */
.aps-field {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 20px;
}

.aps-shape {
	position: relative;
	display: block;
	container-type: size;
	flex: 0 0 auto;
	width: min(100%, var(--aps-k-w));
	height: var(--aps-k-h);
	min-height: calc(var(--aps-in-h, var(--aps-d-inh)) + 10px);
	overflow: hidden;
	text-decoration: none;
	color: #ffffff;
	background: #14121f;
	isolation: isolate;
	-webkit-tap-highlight-color: transparent;
	user-select: none;
	-webkit-user-select: none;
}

/* Static grid (no JS / editor): the SAME three kinds as the live layout, with
   the same default sizes, so the text area always fits. Square, then a
   horizontal capsule, then an oblong. */
.aps {
	--aps-d-inw: 280px;
	--aps-d-inh: 300px;
}
@media (max-width: 767px) {
	.aps {
		--aps-d-inw: 145px;
		--aps-d-inh: 230px;
	}
}
.aps-shape {
	--aps-k-w: var(--aps-sq-w, 340px);
	--aps-k-h: var(--aps-sq-h, 380px);
	border-radius: var(--aps-r, 72px);
}
.aps-shape:nth-child(3n+2) {
	--aps-k-w: var(--aps-cap-w, 700px);
	--aps-k-h: var(--aps-cap-h, 340px);
	border-radius: 999px;
}
.aps-shape:nth-child(3n) {
	--aps-k-w: var(--aps-obl-w, 320px);
	--aps-k-h: var(--aps-obl-h, 440px);
}
@media (max-width: 767px) {
	.aps-shape {
		--aps-k-w: var(--aps-sq-w, 165px);
		--aps-k-h: var(--aps-sq-h, 260px);
		border-radius: var(--aps-r, 40px);
	}
	.aps-shape:nth-child(3n+2) {
		--aps-k-w: var(--aps-cap-w, 340px);
		--aps-k-h: var(--aps-cap-h, 250px);
	}
	.aps-shape:nth-child(3n) {
		--aps-k-w: var(--aps-obl-w, 165px);
		--aps-k-h: var(--aps-obl-h, 320px);
	}
}

/* Shape fill when a project has no featured image */
.aps-tint-0 { background: linear-gradient(135deg, #8c5ff5, #3b2a7a); }
.aps-tint-1 { background: linear-gradient(135deg, #abd555, #3f5d12); }
.aps-tint-2 { background: linear-gradient(135deg, #2f5bd9, #121a4a); }
.aps-tint-3 { background: linear-gradient(135deg, #f0406a, #6b1330); }

.aps-shape__media,
.aps-shape__scrim {
	position: absolute;
	inset: 0;
}

.aps-shape__img {
	position: absolute;
	inset: 0;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	object-fit: cover;
	object-position: center top;
	display: block;
	pointer-events: none;
	transition: transform 0.7s ease;
}

.aps-shape__scrim {
	background:
		radial-gradient(circle at 50% 55%, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0.7) 100%),
		linear-gradient(to top, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.1));
	transition: opacity 0.4s ease;
}

.aps-shape__info > * {
	flex-shrink: 0;
}

.aps-shape__logo {
	position: relative;
	flex: 0 0 auto;
	margin: 0 0 max(0px, calc(var(--aps-logo-gap, 10px) - 4px));
	max-width: calc(30cqmin + min(var(--aps-logo-add, 25px) * 2.4, 19cqmin));
	max-height: calc(13cqmin + min(var(--aps-logo-add, 25px), 8cqmin));
	width: auto;
	height: auto;
	object-fit: contain;
	pointer-events: none;
	filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.6));
}

/* The text area. Without JS it fills the whole shape; in live mode it is a
   fixed-size INNER AREA centred in the shape (set by --aps-in-w / --aps-in-h),
   so the logo, type, title, company name and button sit in exactly the same
   place in every shape however big the outer shape is. */
.aps-shape__info {
	position: absolute;
	inset: 0;
	z-index: 3;
	container-type: size;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	gap: 1.4cqmin;
	padding: 10cqmin 10cqmin 7cqmin;
	box-sizing: border-box;
	text-align: center;
	pointer-events: none;
}

.aps-shape__info {
	inset: auto;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: var(--aps-in-w, var(--aps-d-inw));
	height: var(--aps-in-h, var(--aps-d-inh));
	max-width: 100%;
	padding: 0;
}

.aps-shape__type {
	font-size: clamp(9px, 3.8cqmin, 13px);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--aps-type);
	position: relative;
	top: var(--aps-type-y, 0px);
	left: var(--aps-type-x, 0px);
}

.aps-shape__title {
	font-size: clamp(12px, 8.2cqmin, 34px);
	font-weight: 800;
	line-height: 1.12;
	color: var(--aps-title, #ffffff);
	position: relative;
	top: var(--aps-title-y, 0px);
	left: var(--aps-title-x, 0px);
	flex: 0 0 auto;
	/* fixed two-line slot: one-line and two-line titles start and end in the
	   same place, so the company name below always lines up */
	min-height: 2.24em;
	display: flex;
	flex-direction: column;
	justify-content: center;
	text-wrap: balance;
}

.aps-shape__client {
	font-size: clamp(10px, 4.8cqmin, 18px);
	color: var(--aps-client, rgba(255, 255, 255, 0.9));
	position: relative;
	top: var(--aps-client-y, 0px);
	left: var(--aps-client-x, 0px);
	line-height: 1.2;
}

.aps-shape__cta {
	margin-top: auto;
	padding: var(--aps-cta-py, 1.8cqmin) var(--aps-cta-px, 5.5cqmin);
	border-radius: var(--aps-cta-radius, 999px);
	border: var(--aps-cta-bw, 2px) solid var(--aps-cta-border, #abd555);
	background: var(--aps-cta-bg, transparent);
	color: var(--aps-cta-color, #abd555);
	font-size: clamp(10px, 4cqmin, 14px);
	font-weight: 700;
	letter-spacing: 0.06em;
	line-height: 1.2;
	white-space: nowrap;
	position: relative;
	top: var(--aps-cta-y, 0px);
	transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.aps-shape:hover .aps-shape__cta,
.aps-shape:focus-visible .aps-shape__cta {
	background: var(--aps-cta-bg-hover, rgba(171, 213, 85, 0.18));
	color: var(--aps-cta-color-hover, var(--aps-cta-color, #abd555));
	border-color: var(--aps-cta-border-hover, var(--aps-cta-border, #abd555));
}

.aps-shape:hover .aps-shape__img,
.aps-shape:focus-visible .aps-shape__img {
	transform: scale(1.08);
}

/* Filtered-out shapes in the static grid */
.aps-shape.is-dim {
	opacity: 0.25;
	filter: grayscale(0.7);
}

/* ── Live mode: one shared space ─────────────────────────────────── */

.aps-live .aps-field {
	display: block;
	position: relative;
	/* about 4:3 of the space's width (tall enough for two-line titles and
	   company names), never taller than the chosen
	   Space height (default 80vh) */
	height: min(var(--aps-field-h), calc(var(--aps-vw) * 1vw * 0.74));
	min-height: 440px;
	overflow: hidden;
	touch-action: pan-y;
	contain: layout paint;
}

@media (max-width: 767px) {
	.aps-live .aps-field {
		height: clamp(560px, 150vw, 900px); /* JS sets the real height from the shape count */
		min-height: 0;
	}
}

.aps-live .aps-shape {
	position: absolute;
	left: 0;
	top: 0;
	width: var(--aps-w, 200px);
	height: var(--aps-h, 200px);
	max-width: none;
	aspect-ratio: auto;
	grid-column: auto;
	border-radius: var(--aps-r, 28px);
	will-change: transform, opacity;
	cursor: pointer;
	touch-action: pan-y;
}

.aps-live .aps-shape.is-dim {
	pointer-events: none;
}

/* ── Card -> project page morph (also set by the Case Study widget) ── */
@view-transition {
	navigation: auto;
}

@media (prefers-reduced-motion: reduce) {
	@view-transition {
		navigation: none;
	}

	.aps-shape__img,
	.aps-shape__cta {
		transition: none;
	}
}