Feat/masonry layout utilities

components/masonry.css

@@ -0,0 +1,227 @@
+/* ============================================================
+   EaseMotion CSS — masonry.css
+   Pinterest-style masonry layout utilities for flexible content grids
+   ============================================================ */
+
+/* ────────────────────────────────────────────────────────────
+   MASONRY BASE CLASS
+   – Defines the base container for masonry layouts
+   – Uses CSS columns for a lightweight, accessible approach
+   ──────────────────────────────────────────────────────────── */
+
+.ease-masonry {
+  column-gap: var(--ease-space-4);
+  break-inside: avoid-column;
+}
+
+.ease-masonry > * {
+  break-inside: avoid;
+  margin-bottom: var(--ease-space-4);
+}
+
+/* ────────────────────────────────────────────────────────────
+   2-COLUMN MASONRY LAYOUT
+   – Responsive: 1 column mobile (< 640px), 2 columns tablet+
+   ──────────────────────────────────────────────────────────── */
+
+.ease-masonry-2 {
+  columns: 2;
+  column-gap: var(--ease-space-4);
+}
+
+.ease-masonry-2 > * {
+  break-inside: avoid;
+  margin-bottom: var(--ease-space-4);
+}
+
+/* Mobile: single column */
+@media (max-width: 639px) {
+  .ease-masonry-2 {
+    columns: 1;
+  }
+}
+
+/* ────────────────────────────────────────────────────────────
+   3-COLUMN MASONRY LAYOUT
+   – Responsive: 1 column mobile (< 640px)
+   –            2 columns tablet (640px - 1023px)
+   –            3 columns desktop (>= 1024px)
+   ──────────────────────────────────────────────────────────── */
+
+.ease-masonry-3 {
+  columns: 3;
+  column-gap: var(--ease-space-4);
+}
+
+.ease-masonry-3 > * {
+  break-inside: avoid;
+  margin-bottom: var(--ease-space-4);
+}
+
+/* Mobile: single column */
+@media (max-width: 639px) {
+  .ease-masonry-3 {
+    columns: 1;
+  }
+}
+
+/* Tablet: two columns */
+@media (min-width: 640px) and (max-width: 1023px) {
+  .ease-masonry-3 {
+    columns: 2;
+  }
+}
+
+/* ────────────────────────────────────────────────────────────
+   4-COLUMN MASONRY LAYOUT
+   – Responsive: 1 column mobile (< 640px)
+   –            2 columns tablet (640px - 1023px)
+   –            3 columns small desktop (1024px - 1279px)
+   –            4 columns large desktop (>= 1280px)
+   ──────────────────────────────────────────────────────────── */
+
+.ease-masonry-4 {
+  columns: 4;
+  column-gap: var(--ease-space-4);
+}
+
+.ease-masonry-4 > * {
+  break-inside: avoid;
+  margin-bottom: var(--ease-space-4);
+}
+
+/* Mobile: single column */
+@media (max-width: 639px) {
+  .ease-masonry-4 {
+    columns: 1;
+  }
+}
+
+/* Tablet: two columns */
+@media (min-width: 640px) and (max-width: 1023px) {
+  .ease-masonry-4 {
+    columns: 2;
+  }
+}
+
+/* Small desktop: three columns */
+@media (min-width: 1024px) and (max-width: 1279px) {
+  .ease-masonry-4 {
+    columns: 3;
+  }
+}
+
+/* ────────────────────────────────────────────────────────────
+   MASONRY GAP VARIANTS
+   – Override default gap spacing using ease-space-* variables
+   ──────────────────────────────────────────────────────────── */
+
+.ease-masonry.ease-gap-1,
+.ease-masonry-2.ease-gap-1,
+.ease-masonry-3.ease-gap-1,
+.ease-masonry-4.ease-gap-1 {
+  column-gap: var(--ease-space-1);
+}
+
+.ease-masonry.ease-gap-1 > *,
+.ease-masonry-2.ease-gap-1 > *,
+.ease-masonry-3.ease-gap-1 > *,
+.ease-masonry-4.ease-gap-1 > * {
+  margin-bottom: var(--ease-space-1);
+}
+
+.ease-masonry.ease-gap-2,
+.ease-masonry-2.ease-gap-2,
+.ease-masonry-3.ease-gap-2,
+.ease-masonry-4.ease-gap-2 {
+  column-gap: var(--ease-space-2);
+}
+
+.ease-masonry.ease-gap-2 > *,
+.ease-masonry-2.ease-gap-2 > *,
+.ease-masonry-3.ease-gap-2 > *,
+.ease-masonry-4.ease-gap-2 > * {
+  margin-bottom: var(--ease-space-2);
+}
+
+.ease-masonry.ease-gap-3,
+.ease-masonry-2.ease-gap-3,
+.ease-masonry-3.ease-gap-3,
+.ease-masonry-4.ease-gap-3 {
+  column-gap: var(--ease-space-3);
+}
+
+.ease-masonry.ease-gap-3 > *,
+.ease-masonry-2.ease-gap-3 > *,
+.ease-masonry-3.ease-gap-3 > *,
+.ease-masonry-4.ease-gap-3 > * {
+  margin-bottom: var(--ease-space-3);
+}
+
+.ease-masonry.ease-gap-6,
+.ease-masonry-2.ease-gap-6,
+.ease-masonry-3.ease-gap-6,
+.ease-masonry-4.ease-gap-6 {
+  column-gap: var(--ease-space-6);
+}
+
+.ease-masonry.ease-gap-6 > *,
+.ease-masonry-2.ease-gap-6 > *,
+.ease-masonry-3.ease-gap-6 > *,
+.ease-masonry-4.ease-gap-6 > * {
+  margin-bottom: var(--ease-space-6);
+}
+
+.ease-masonry.ease-gap-8,
+.ease-masonry-2.ease-gap-8,
+.ease-masonry-3.ease-gap-8,
+.ease-masonry-4.ease-gap-8 {
+  column-gap: var(--ease-space-8);
+}
+
+.ease-masonry.ease-gap-8 > *,
+.ease-masonry-2.ease-gap-8 > *,
+.ease-masonry-3.ease-gap-8 > *,
+.ease-masonry-4.ease-gap-8 > * {
+  margin-bottom: var(--ease-space-8);
+}
+
+/* ────────────────────────────────────────────────────────────
+   MASONRY IMAGE SUPPORT
+   – Ensure images are responsive within masonry columns
+   ──────────────────────────────────────────────────────────── */
+
+.ease-masonry img,
+.ease-masonry-2 img,
+.ease-masonry-3 img,
+.ease-masonry-4 img {
+  width: 100%;
+  height: auto;
+  display: block;
+}
+
+/* ────────────────────────────────────────────────────────────
+   ACCESSIBILITY: REDUCED MOTION SUPPORT
+   – Respect user preferences for animations/transitions
+   ──────────────────────────────────────────────────────────── */
+
+@media (prefers-reduced-motion: reduce) {
+  .ease-masonry > *,
+  .ease-masonry-2 > *,
+  .ease-masonry-3 > *,
+  .ease-masonry-4 > * {
+    transition: none !important;
+  }
+}
+
+/* ────────────────────────────────────────────────────────────
+   MASONRY + CARD INTEGRATION
+   – Seamless integration with ease-card utilities
+   ──────────────────────────────────────────────────────────── */
+
+.ease-masonry .ease-card,
+.ease-masonry-2 .ease-card,
+.ease-masonry-3 .ease-card,
+.ease-masonry-4 .ease-card {
+  margin-bottom: inherit;
+}