From 6631bd798098bcaae7bc2a179ad027040c33bcbd Mon Sep 17 00:00:00 2001
From: Kuba Orlik <kontakt@kuba-orlik.name>
Date: Mon, 24 Aug 2026 10:06:27 +0200
Subject: [PATCH] Add pop-out style to dynamic grid

---
 .../dynamic-grid-v2/dynamic-grid-v2.css       | 19 +++++++++++++++++++
 .../dynamic-grid-v2/dynamic-grid-v2.jdd.tsx   | 10 ++++++++--
 2 files changed, 27 insertions(+), 2 deletions(-)

diff --git a/src/back/jdd-components/dynamic-grid-v2/dynamic-grid-v2.css b/src/back/jdd-components/dynamic-grid-v2/dynamic-grid-v2.css
index 87743f3..4b2e8ae 100644
--- a/src/back/jdd-components/dynamic-grid-v2/dynamic-grid-v2.css
+++ b/src/back/jdd-components/dynamic-grid-v2/dynamic-grid-v2.css
@@ -250,4 +250,23 @@
 			}
 		}
 	}
+
+	&.dynamic-grid--style-pop-out {
+		.tile {
+			overflow: visible;
+
+			.tile-content {
+				transform: translateY(-20px) translateX(20px);
+				box-shadow: -10px 10px 0px #00000026;
+			}
+
+			.tile-image {
+				grid-row: 1/3 !important;
+			}
+
+			.tile-image--vertical {
+				grid-row: 1/5 !important;
+			}
+		}
+	}
 }
diff --git a/src/back/jdd-components/dynamic-grid-v2/dynamic-grid-v2.jdd.tsx b/src/back/jdd-components/dynamic-grid-v2/dynamic-grid-v2.jdd.tsx
index af88cdf..668c29b 100644
--- a/src/back/jdd-components/dynamic-grid-v2/dynamic-grid-v2.jdd.tsx
+++ b/src/back/jdd-components/dynamic-grid-v2/dynamic-grid-v2.jdd.tsx
@@ -10,6 +10,7 @@ const component_arguments = {
 	bleed: new ComponentArguments.Enum(["none", "bleed", "screen"]).setDefaultValue(
 		"none"
 	),
+	style: new ComponentArguments.Enum(["flat", "pop-out"]),
 	tiles: new ComponentArguments.List(
 		new ComponentArguments.Structured({
 			title: new ComponentArguments.ShortText(),
@@ -90,14 +91,19 @@ export class DynamicGridV2 extends Component<typeof component_arguments> {
 	}
 
 	toHTML({
-		args: { tiles, bleed },
+		args: { tiles, bleed, style },
 		jdd_context,
 		classes,
 		index,
 	}: ComponentToHTMLArgs<typeof component_arguments>): FlatTemplatable {
 		return (
 			<div
-				class={["dynamic-grid", `dynamic-grid--bleed-${bleed}`, ...classes]}
+				class={[
+					"dynamic-grid",
+					`dynamic-grid--bleed-${bleed}`,
+					`dynamic-grid--style-${style}`,
+					...classes,
+				]}
 				style={`--jdd-index: ${index}`}
 			>
 				<div class="tiles-container">