/* Apple-style display frame */
.mod-elevologyportfolio__display {
	--display-bezel: 12px;
	--display-radius: 10px;
	background: linear-gradient(145deg, #2c2c2e 0%, #1c1c1e 100%);
	border-radius: calc(var(--display-radius) + var(--display-bezel));
	box-shadow:
		0 0 0 1px rgba(255, 255, 255, 0.06),
		0 4px 6px rgba(0, 0, 0, 0.2),
		inset 0 1px 0 rgba(255, 255, 255, 0.04);
	padding: var(--display-bezel);
	position: relative;
}

/* Optional camera notch */
.mod-elevologyportfolio__display::before {
	content: '';
	position: absolute;
	top: calc(var(--display-bezel) + 8px);
	left: 50%;
	transform: translateX(-50%);
	width: 6px;
	height: 6px;
	background: #0a0a0a;
	border-radius: 50%;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
	z-index: 1;
	pointer-events: none;
}

.mod-elevologyportfolio__screen {
	aspect-ratio: 16 / 10;
	background: #000;
	border-radius: var(--display-radius);
	overflow: hidden;
	overflow-y: auto;
	overflow-x: hidden;
	scrollbar-width: none;
	-ms-overflow-style: none;
	position: relative;
	/* Smooth scroll when we animate scrollTop in JS */
	scroll-behavior: smooth;
}

.mod-elevologyportfolio__screen::-webkit-scrollbar {
	display: none;
}

.mod-elevologyportfolio__screen img {
	display: block;
	width: 100%;
	height: auto;
}

/* Push-pull row layout: 1/2 display, 1/2 content */
.mod-elevologyportfolio__row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2rem;
	align-items: center;
	margin-bottom: 6.72rem;
}
.mod-elevologyportfolio__row:last-child {
	margin-bottom: 0;
}

/* ============================================================
   Premium case study styling (angled dark panel + screenshot accent plate)
   - Dark angled polygon: .portfolio-case-study__bg (z-index above accent)
   - Screenshot accent plate (rounded; uses site image under /images/bg/): .portfolio-case-study__bg-screenshot (stacked underneath)
   - Alternating directions: .portfolio-case-study--reverse
   - Screenshot card polish: .portfolio-case-study__image .mod-elevologyportfolio__display
   - Mobile fallback: @media (max-width: 960px)
   ============================================================ */

.portfolio-showcase {
	--portfolio-dark: #1e2225;
	--portfolio-dark-2: #151a1d;
	/* Polygon color (solid, no red/orange gradient) */
	--portfolio-polygon: #12161a;
	/* Screenshot plate: background image from site /images/bg/ (path is relative to this file: modules/.../assets/base.css → ../../../ = site root) */
	--portfolio-screenshot-plate-image: url('../../../images/bgs/circuit-board-bg.jpg');
}

/* Row vertical rhythm */
.portfolio-case-study.mod-elevologyportfolio__row {
	position: relative;
	isolation: isolate; /* keeps background blend/shadows contained per row */
	/* Desktop: screenshot accent is symmetrically taller (~40px top + bottom) than dark polygon */
	--portfolio-polygon-desktop-h: min(520px, 96%);
	--portfolio-accent-taller-total: 80px;

	/* Section padding + row gap (desktop; ~+20% vs previous pass) */
	padding: clamp(5.7rem, 7.56vw, 7.35rem) 0;
	margin-bottom: clamp(4.62rem, 5.88vw, 7.14rem);
}

/* Keep screenshot + copy above BOTH background plates */
.portfolio-case-study__image,
.portfolio-case-study__content {
	position: relative;
	z-index: 2;
}

/* Case study copy: horizontal inset (tuned ~40% less than previous pass) */
.portfolio-case-study__content {
	padding-inline: clamp(1.05rem, 3vw, 2.25rem);
}

/* ----------------------------
   Rounded “square plate” behind screenshot column
   - Placed UNDER .portfolio-case-study__bg so dark polygon paints on top; clip-path transparency still reveals this layer.
   - Height is explicitly ~40px taller above and below the dark polygon (see row --portfolio-accent-taller-total).
   ---------------------------- */
.portfolio-case-study__bg-screenshot {
	position: absolute;
	z-index: -1;
	pointer-events: none;
	top: 50%;
	transform: translateY(-50%);

	/* Slightly smaller than grid column footprint so it reads as a distinct plate behind the device */
	width: min(92%, calc(47% + 6rem));
	max-width: 640px;
	/* Taller plate: polygon height + 80px (~40px past dark panel top & bottom while centered via translateY) */
	height: calc(var(--portfolio-polygon-desktop-h) + var(--portfolio-accent-taller-total));

	border-radius: 28px; /* rounded-square plate (no clip-path: keeps corners reliably soft) */
	background-color: var(--portfolio-dark-2); /* fallback if image missing / slow load */
	background-image: var(--portfolio-screenshot-plate-image);
	background-size: cover;
	/* Show the right-hand side of the bitmap (cover crops from the left when the box is narrower than the image ratio) */
	background-position: right center;
	background-repeat: no-repeat;
	/*
	 * Directional depth for #1e2225 — short offsets + modest blur so shadow stays near the plate edge.
	 * Shadows use tinted charcoal (~rgb 42,46,53) instead of pure black so they read softer on dark UI.
	 */
	box-shadow:
		0 0 0 1px rgba(255, 255, 255, 0.1),
		-8px -7px 14px rgba(42, 46, 53, 0.5),
		-12px 2px 18px rgba(42, 46, 53, 0.44),
		0 -8px 14px rgba(42, 46, 53, 0.4),
		0 12px 22px rgba(42, 46, 53, 0.58),
		-6px 13px 18px rgba(42, 46, 53, 0.44),
		6px 13px 18px rgba(42, 46, 53, 0.44),
		0 0 24px rgba(58, 64, 72, 0.28);

	/* Default push/pull: screenshot column on the left → anchor accent to left */
	left: max(-14px, -1.25%);
	right: auto;
}

/* Alternate: screenshot on the right → mirror accent anchoring */
.portfolio-case-study--reverse .portfolio-case-study__bg-screenshot {
	right: max(-14px, -1.25%);
	left: auto;
}

/* ----------------------------
   Angled / polygon background
   ---------------------------- */
.portfolio-case-study__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;

	/* Polygon sizing (oversized): ~75%–85% of row width */
	/* Anchored to case study column (first row = copy right): right edge of panel aligns with row right; panel extends left under screenshot */
	width: min(84%, 1280px);
	right: -2%;
	left: auto;
	top: 50%;
	transform: translateY(-50%);
	/* Polygon height: ~85%–100% of the row — keep in sync with --portfolio-polygon-desktop-h */
	height: var(--portfolio-polygon-desktop-h);

	/* Polygon color (solid) */
	background: var(--portfolio-polygon);
	border: 1px solid rgba(255, 255, 255, 0.05);
	box-shadow:
		0 22px 65px rgba(0, 0, 0, 0.45),
		0 2px 0 rgba(255, 255, 255, 0.035) inset;

	/* Angular edge on image (left column); cleaner “straight” boundary on copy (right) */
	/*
	 * Sharp corners vs rounded angled edge:
	 * polygon() joins are always perfect points — you can’t round a single joint without splitting the diagonal.
	 * clip-path: path() keeps the SAME overall angle but fillets ONLY the angled edge ends (tiny cubic curves),
	 * so the shear still reads identical at a glance, just softened where it sits under the screenshot.
	 */
	clip-path: polygon(9% 0%, 100% 0%, 100% 100%, 0% 100%);
	border-radius: 18px; /* only visible if clip-path is unsupported */
}

/* No gradients: keep panel purely solid */
.portfolio-case-study__bg::before,
.portfolio-case-study__bg::after {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: 18px;
	pointer-events: none;
}

/* Gradient removed (disable highlight layer) */
.portfolio-case-study__bg::before {
	background: none;
	opacity: 0;
}

/* Gradient removed (disable texture/glow layer) */
.portfolio-case-study__bg::after {
	background: none;
	opacity: 0;
}

/* ----------------------------
   Alternate direction
   - default: copy column right → anchor panel RIGHT (primary mass under case study)
   - --reverse: copy column left → anchor panel LEFT (primary mass under case study)
   - clip-path stays: angled boundary under screenshot column; full vertical boundary on copy side
   ---------------------------- */
.portfolio-case-study--reverse .portfolio-case-study__bg {
	/* Alternate: screenshot on right, copy left — anchor left so panel sits under case study column */
	right: auto;
	left: -2%;
	clip-path: polygon(0% 0%, 91% 0%, 100% 100%, 0% 100%);
}

.portfolio-case-study--reverse .portfolio-case-study__bg::before {
	background: none;
	opacity: 0;
}

.portfolio-case-study--reverse .portfolio-case-study__bg::after {
	opacity: 0;
}

/*
 * Rounded fillets on the screenshot-side angled edge (path() only; falls back to polygon() above where unsupported)
 */
@supports (clip-path: path(nonzero, 'M 0 0 L 1px 0')) {
	.portfolio-case-study__bg {
		clip-path: path(
			nonzero,
			'M 14% 0 L 100% 0 L 100% 100% L 5% 100% C 0% 100% 0% 96.5% 0% 92% L 12% 4% C 12% 0.4% 13% 0% 14% 0 Z'
		);
	}

	.portfolio-case-study--reverse .portfolio-case-study__bg {
		clip-path: path(
			nonzero,
			'M 0 0 L 84.5% 0 C 90.2% 0% 91.4% 0.8% 92.8% 3.8% L 99.2% 95.8% C 100% 100% 96.8% 100% 93% 100% L 0 100 Z'
		);
	}
}

/* ----------------------------
   Screenshot card polish
   - keeps existing "Apple display" frame but makes it feel more floating/premium
   ---------------------------- */
.portfolio-case-study__image .mod-elevologyportfolio__display {
	transform: translateY(-2px);
	box-shadow:
		0 0 0 1px rgba(255, 255, 255, 0.08),
		0 18px 55px rgba(0, 0, 0, 0.55),
		0 4px 10px rgba(0, 0, 0, 0.25),
		inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.portfolio-case-study__image .mod-elevologyportfolio__screen {
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.55) inset;
}

/* ----------------------------
   Text content styling
   - stays clean/professional; relies on background panel for “premium” feel
   ---------------------------- */
.portfolio-case-study__content .mod-elevologyportfolio__title {
	color: rgba(255, 255, 255, 0.92);
	letter-spacing: -0.01em;
	font-size: clamp(1.5rem, 1.2rem + 0.9vw, 2.1rem);
}

.portfolio-case-study__content .mod-elevologyportfolio__copy {
	color: rgba(255, 255, 255, 0.76);
	font-size: 1.02rem;
	line-height: 1.7;
	max-width: 62ch;
}

/* Focus/hover: subtle lift so rows feel interactive without being busy */
.portfolio-case-study:has(.mod-elevologyportfolio__screen:hover) .portfolio-case-study__bg,
.portfolio-case-study:focus-within .portfolio-case-study__bg {
	box-shadow:
		0 28px 85px rgba(0, 0, 0, 0.52),
		0 2px 0 rgba(255, 255, 255, 0.05) inset;
	border-color: rgba(255, 255, 255, 0.09);
}

.portfolio-case-study:has(.mod-elevologyportfolio__screen:hover) .portfolio-case-study__bg-screenshot,
.portfolio-case-study:focus-within .portfolio-case-study__bg-screenshot {
	box-shadow:
		0 0 0 1px rgba(255, 255, 255, 0.11),
		-10px -8px 17px rgba(42, 46, 53, 0.54),
		-14px 2px 21px rgba(42, 46, 53, 0.48),
		0 -10px 17px rgba(42, 46, 53, 0.44),
		0 14px 26px rgba(42, 46, 53, 0.62),
		-7px 15px 20px rgba(42, 46, 53, 0.48),
		7px 15px 20px rgba(42, 46, 53, 0.48),
		0 0 28px rgba(60, 66, 74, 0.32);
}

/* Alternate: display on right, content on left */
.mod-elevologyportfolio__row--reverse {
	direction: rtl;
}
.mod-elevologyportfolio__row--reverse .mod-elevologyportfolio__display-wrap,
.mod-elevologyportfolio__row--reverse .mod-elevologyportfolio__content {
	direction: ltr;
}

.mod-elevologyportfolio__display-wrap {
	min-width: 0;
}

.mod-elevologyportfolio__content {
	min-width: 0;
}

.mod-elevologyportfolio__title {
	margin: 0 0 1rem;
	font-size: 1.5rem;
	line-height: 1.3;
}

.mod-elevologyportfolio__copy {
	margin: 0;
	font-size: 1rem;
	line-height: 1.6;
}

@media (max-width: 960px) {
	.mod-elevologyportfolio__row,
	.mod-elevologyportfolio__row--reverse {
		grid-template-columns: 1fr;
		direction: ltr;
	}
	.mod-elevologyportfolio__row .mod-elevologyportfolio__display-wrap {
		order: 1;
	}
	.mod-elevologyportfolio__row .mod-elevologyportfolio__content {
		order: 2;
	}

	/* ----------------------------
	   Mobile fallback
	   - simplify angled panel into a clean rounded container
	   - place behind the whole stacked content
	   ---------------------------- */
	.portfolio-case-study.mod-elevologyportfolio__row {
		padding: 1.26rem 0 1.68rem;
		margin-bottom: 3.6rem;
	}

	.portfolio-case-study__bg {
		width: 100%;
		left: 0;
		right: 0;
		top: auto;
		transform: none;
		height: 100%;
		clip-path: none; /* remove angled polygon on mobile */
		border-radius: 20px;
	}

	.portfolio-case-study__bg::before {
		opacity: 0;
	}

	.portfolio-case-study__bg::after {
		opacity: 0;
	}

	/*
	 * Mobile screenshot accent
	 * - Full-width dark polygon would fully cover z-index:-1; lift accent slightly so it stays visible behind screenshot only.
	 */
	.portfolio-case-study__bg-screenshot {
		z-index: 1;
		left: 50%;
		right: auto;
		transform: translate(-50%, -48%);
		width: min(calc(100% - 2rem), 420px);
		max-width: none;
		/* Mirror desktop: red plate ~40px taller top & bottom than previous mobile sizing */
		height: calc(min(360px, 52vw) + 80px);
		border-radius: 22px;
	}

	.portfolio-case-study--reverse .portfolio-case-study__bg-screenshot {
		left: 50%;
		right: auto;
		transform: translate(-50%, -48%);
	}

	.portfolio-case-study__image {
		padding-inline: 1rem;
	}

	.portfolio-case-study__content {
		padding-inline: clamp(0.8rem, 3.6vw, 1.35rem);
	}
}