/*
 * Wedding gallery — asymmetric masonry. Six images, predefined spans.
 */

.teledom-design .masonry {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	/* Taller rows than the original 102px — most uploaded photos are
	 * portrait-oriented, so smaller rows force aggressive top/bottom crop
	 * via object-fit: cover. 160px gives each tile ~50% more vertical
	 * room and lets the subjects (people, food, table settings) stay in
	 * frame without sacrificing the masonry rhythm. */
	grid-auto-rows: 160px;
	gap: 12px;
}

.teledom-design .masonry img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: var(--r);
	transition: transform 0.6s var(--ease);
	cursor: pointer;
}

.teledom-design .masonry img:hover {
	transform: scale(1.02);
}

/* Explicit grid placement (4 cols × 4 rows). m1 is the BIG hero; m2-m6 are
 * all 2-cell strips so the badge tile sits as a small vertical strip at
 * bottom-RIGHT, equal in size to m2/m3/m5.
 *
 *   Cols: 1  2  3  4
 *   ┌──────┬──┬──┐
 *   │      │m2│m3│  row 1   (m2, m3 vertical 1×2)
 *   │ m1   │  │  │  row 2
 *   │      ├──┼──┤
 *   │      │m5│m6│  row 3   (m5 vertical, m6 vertical → bottom-right)
 *   ├──────┤  │  │
 *   │  m4  │  │  │  row 4   (m4 horizontal 2×1)
 *   └──────┴──┴──┘
 */
.teledom-design .masonry .m1 { grid-column: 1 / span 2; grid-row: 1 / span 3; }
.teledom-design .masonry .m2 { grid-column: 3;          grid-row: 1 / span 2; }
.teledom-design .masonry .m3 { grid-column: 4;          grid-row: 1 / span 2; }
.teledom-design .masonry .m4 { grid-column: 1 / span 2; grid-row: 4;          }
.teledom-design .masonry .m5 { grid-column: 3;          grid-row: 3 / span 2; }
.teledom-design .masonry .m6 { grid-column: 4;          grid-row: 3 / span 2; }

/* +N badge — wraps the 6th thumb when admin uploaded > 6 photos. The wrapper
 * inherits the .m6 grid span so the visible layout is byte-identical to the
 * non-wrapped case. The <img> inside fills the wrapper exactly like a bare
 * <img class="m6"> would. */
.teledom-design .masonry .masonry-thumb-wrap {
	position: relative;
	overflow: hidden;
	border-radius: var(--r);
}

.teledom-design .masonry .masonry-thumb-wrap.m6 {
	grid-column: 4;
	grid-row: 3 / span 2;
}

.teledom-design .masonry .masonry-thumb-wrap img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 0; /* radius is on the wrapper to keep the badge rounded with the thumb */
	transition: transform 0.6s var(--ease), filter 0.4s var(--ease);
	cursor: pointer;
	/* Blurred + darkened to signal "more behind". Only the wrap that
	 * actually carries the +N badge gets this treatment — wraps without
	 * a badge fall back to no blur via the :not() rule below. */
	filter: blur(4px) brightness(0.7);
}

.teledom-design .masonry .masonry-thumb-wrap:hover img {
	transform: scale(1.04);
	filter: blur(2px) brightness(0.8);
}

.teledom-design .masonry .masonry-more-badge {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-family: var(--display);
	font-size: clamp(48px, 6vw, 84px);
	font-weight: 300;
	letter-spacing: -0.02em;
	line-height: 1;
	pointer-events: none;
	text-shadow: 0 2px 18px rgba(0, 0, 0, .5);
}

/* Mobile: 4-column masonry becomes 2 columns; the hero (m1) spans the
 * full row to stay visually dominant, the rest sit equal in pairs. */
@media (max-width: 880px) {
	.teledom-design .masonry {
		grid-template-columns: repeat(2, 1fr);
		grid-auto-rows: 140px;
	}

	.teledom-design .masonry .m1 { grid-column: 1 / span 2; grid-row: 1 / span 2; }
	.teledom-design .masonry .m2 { grid-column: 1; grid-row: 3; }
	.teledom-design .masonry .m3 { grid-column: 2; grid-row: 3; }
	.teledom-design .masonry .m4 { grid-column: 1 / span 2; grid-row: 5; }
	.teledom-design .masonry .m5 { grid-column: 1; grid-row: 4; }
	.teledom-design .masonry .m6,
	.teledom-design .masonry .masonry-thumb-wrap.m6 { grid-column: 2; grid-row: 4; }
}

/* Phone: single column stack — no creative spans, just full-width tiles. */
@media (max-width: 520px) {
	.teledom-design .masonry {
		grid-template-columns: 1fr;
		grid-auto-rows: 180px;
		gap: 10px;
	}

	.teledom-design .masonry .m1,
	.teledom-design .masonry .m2,
	.teledom-design .masonry .m3,
	.teledom-design .masonry .m4,
	.teledom-design .masonry .m5,
	.teledom-design .masonry .m6,
	.teledom-design .masonry .masonry-thumb-wrap.m6 {
		grid-column: 1;
		grid-row: auto;
	}

	.teledom-design .masonry .m1 {
		grid-row: span 2;
	}
}