/* ─── Diamond grid container ─────────────────────────────────────────── */

.quilt-grid {
	display: flex;
	justify-content: center;
	margin-top: var(--wp--preset--spacing--60);
}

.quilt-grid__items {
	--tile: clamp(160px, 20vw, 260px);
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	grid-template-columns: repeat(6, calc(var(--tile) / 2));
	grid-auto-rows: calc(var(--tile) / 2);
}

/* ─── Grid item — positioned container only, not the visual shape ────── */

.quilt-grid__items .wp-block-post {
	position: relative;
	margin: 0;
	padding: 0;
	min-width: 0;
	min-height: 0;
	/* Prevent the rectangular grid cell from intercepting clicks meant for
	   adjacent diamonds in overlapping grid areas. */
	pointer-events: none;
}

/* ─── Rotation wrapper — a square that becomes a diamond when rotated ── */

/*
 * Why tile/√2:
 *   A square of side s rotated 45° has tip-to-tip width s×√2.
 *   We want tip-to-tip = --tile, so s = tile/√2 = tile/1.41421356.
 *   The white CSS border on this rotated square is a natural diamond
 *   border — no clip-path insets, no doubling at shared tips.
 */
.quilt-diamond {
	position: absolute;
	/* 0.93 creates ~18px gap between adjacent tips at 260px tile so the border
	   from one diamond never touches the next — no doubling at intersections. */
	width: calc(var(--tile) / 1.41421356 * 0.93);
	height: calc(var(--tile) / 1.41421356 * 0.93);
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) rotate(45deg);
	overflow: hidden;
	border: 11px solid white;
	pointer-events: auto;
}

/* ─── Link fills the inner (non-border) area of the rotated square ───── */

.quilt-diamond .wp-block-post-featured-image {
	position: absolute;
	inset: 0;
	display: block;
	background-color: #3d3631;
}

/* ─── Image counter-rotated so it appears upright inside the diamond ─── */

/*
 * Why 141.421356% (√2 × 100%):
 *   The container is s×s. A counter-rotated image must be s×√2 wide/tall
 *   so its corners reach the diamond edges when rotating back −45°.
 *   141.421356% ≈ √2 × 100%.
 */
.quilt-diamond .wp-block-post-featured-image img {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 141.421356%;
	height: 141.421356%;
	transform: translate(-50%, -50%) rotate(-45deg);
	object-fit: cover;
	display: block;
	max-width: none;
	transition: transform 0.3s ease, opacity 0.3s ease;
}

/* ─── Hover and focus states ─────────────────────────────────────────── */

/* When any diamond is active, dim all images (borders stay fully opaque)... */
.quilt-grid__items:hover .quilt-diamond .wp-block-post-featured-image img,
.quilt-grid__items:focus-within .quilt-diamond .wp-block-post-featured-image img {
	opacity: 0.65;
}

/* ...then restore and zoom the active diamond's image. */
.quilt-grid__items:hover .quilt-diamond:hover .wp-block-post-featured-image img,
.quilt-grid__items:focus-within .quilt-diamond:focus-within .wp-block-post-featured-image img {
	opacity: 1;
	transform: translate(-50%, -50%) rotate(-45deg) scale(1.08);
}

/* On a rotated container, a standard rectangular outline renders as a diamond
   border — which is on-brand. Pair with the sibling-dimming indicator. */
.quilt-diamond .wp-block-post-featured-image:focus-visible {
	outline: 3px solid #fff;
	outline-offset: 3px;
}

/* ─── Desktop: 3-2-3-2-3 placement ──────────────────────────────────── */

/* Row 1 — 3 tiles */
.quilt-grid__items .wp-block-post:nth-child(1)  { grid-area: 1 / 1 / 3 / 3; }
.quilt-grid__items .wp-block-post:nth-child(2)  { grid-area: 1 / 3 / 3 / 5; }
.quilt-grid__items .wp-block-post:nth-child(3)  { grid-area: 1 / 5 / 3 / 7; }
/* Row 2 — 2 tiles (offset) */
.quilt-grid__items .wp-block-post:nth-child(4)  { grid-area: 2 / 2 / 4 / 4; }
.quilt-grid__items .wp-block-post:nth-child(5)  { grid-area: 2 / 4 / 4 / 6; }
/* Row 3 — 3 tiles */
.quilt-grid__items .wp-block-post:nth-child(6)  { grid-area: 3 / 1 / 5 / 3; }
.quilt-grid__items .wp-block-post:nth-child(7)  { grid-area: 3 / 3 / 5 / 5; }
.quilt-grid__items .wp-block-post:nth-child(8)  { grid-area: 3 / 5 / 5 / 7; }
/* Row 4 — 2 tiles (offset) */
.quilt-grid__items .wp-block-post:nth-child(9)  { grid-area: 4 / 2 / 6 / 4; }
.quilt-grid__items .wp-block-post:nth-child(10) { grid-area: 4 / 4 / 6 / 6; }
/* Row 5 — 3 tiles */
.quilt-grid__items .wp-block-post:nth-child(11) { grid-area: 5 / 1 / 7 / 3; }
.quilt-grid__items .wp-block-post:nth-child(12) { grid-area: 5 / 3 / 7 / 5; }
.quilt-grid__items .wp-block-post:nth-child(13) { grid-area: 5 / 5 / 7 / 7; }

/* ─── Mobile: 2-1-2-1-2-1-2-1 + tile 13 ─────────────────────────────── */

@media (max-width: 767px) {
	.quilt-grid__items {
		--tile: clamp(120px, 46vw, 180px);
		grid-template-columns: repeat(4, calc(var(--tile) / 2));
	}

	.quilt-diamond {
		border-width: 7px;
	}

	/* Row 1 — 2 tiles */
	.quilt-grid__items .wp-block-post:nth-child(1)  { grid-area: 1 / 1 / 3 / 3; }
	.quilt-grid__items .wp-block-post:nth-child(2)  { grid-area: 1 / 3 / 3 / 5; }
	/* Row 2 — 1 tile (center) */
	.quilt-grid__items .wp-block-post:nth-child(3)  { grid-area: 2 / 2 / 4 / 4; }
	/* Row 3 — 2 tiles */
	.quilt-grid__items .wp-block-post:nth-child(4)  { grid-area: 3 / 1 / 5 / 3; }
	.quilt-grid__items .wp-block-post:nth-child(5)  { grid-area: 3 / 3 / 5 / 5; }
	/* Row 4 — 1 tile (center) */
	.quilt-grid__items .wp-block-post:nth-child(6)  { grid-area: 4 / 2 / 6 / 4; }
	/* Row 5 — 2 tiles */
	.quilt-grid__items .wp-block-post:nth-child(7)  { grid-area: 5 / 1 / 7 / 3; }
	.quilt-grid__items .wp-block-post:nth-child(8)  { grid-area: 5 / 3 / 7 / 5; }
	/* Row 6 — 1 tile (center) */
	.quilt-grid__items .wp-block-post:nth-child(9)  { grid-area: 6 / 2 / 8 / 4; }
	/* Row 7 — 2 tiles */
	.quilt-grid__items .wp-block-post:nth-child(10) { grid-area: 7 / 1 / 9 / 3; }
	.quilt-grid__items .wp-block-post:nth-child(11) { grid-area: 7 / 3 / 9 / 5; }
	/* Row 8 — 1 tile (center) */
	.quilt-grid__items .wp-block-post:nth-child(12) { grid-area: 8 / 2 / 10 / 4; }
	/* Row 9 — 1 tile (left, starts next 2-row) */
	.quilt-grid__items .wp-block-post:nth-child(13) { grid-area: 9 / 1 / 11 / 3; }

	/* End on the row-7 pair (tiles 10+11) for a clean angled bottom edge */
	.quilt-grid__items .wp-block-post:nth-child(12),
	.quilt-grid__items .wp-block-post:nth-child(13) { display: none; }
}