/* ==========================================================================
   Project Solution Gallery (neilkelly/project-solution-gallery)
   Figma: The Solution — lower half (4633:588)
   Full-width band image + 2-up image row + "View All Photos" trigger. Pairs with
   nk-project-solution (narrative + Side Photos). Token-driven.
   Wrapper: .wp-block-neilkelly-project-solution-gallery.nk-project-solution-gallery
   ========================================================================== */
.wp-block-neilkelly-project-solution-gallery.nk-project-solution-gallery {
	/* Match nk-project-solution: content-width cap, centered, min gutter, white bg. */
	padding: var(--wp--preset--spacing--6) max( var(--wp--preset--spacing--gutter), calc( ( 100% - var(--wp--custom--layout--content-width) ) / 2 ) ) var(--wp--preset--spacing--24);
	background: var(--wp--preset--color--brand-white);
	font-family: var(--wp--preset--font-family--inter);
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--6);
}

/* When the client testimonial follows directly (project-numbers smart-hidden),
   drop this section's bottom padding so the only gap between them is the
   testimonial's 90px top padding. The doubled class raises specificity above the
   responsive shorthands so it holds at every breakpoint. */
.wp-block-neilkelly-project-solution-gallery.nk-project-solution-gallery:has( + .wp-block-neilkelly-project-testimonial.nk-project-testimonial--client ) {
	padding-bottom: 0;
}

/* Full-width band image. */
.wp-block-neilkelly-project-solution-gallery .nk-project-solution-gallery__band {
	width: 100%;
}
.wp-block-neilkelly-project-solution-gallery .nk-project-solution-gallery__band-img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1296 / 557;
	object-fit: cover;
	border-radius: var(--wp--custom--radius--lg);
}

/* 2-up image row. */
.wp-block-neilkelly-project-solution-gallery .nk-project-solution-gallery__pair {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--wp--preset--spacing--6);
}
.wp-block-neilkelly-project-solution-gallery .nk-project-solution-gallery__pair-img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 636 / 420;
	object-fit: cover;
	border-radius: var(--wp--custom--radius--lg);
}

/* View-all-photos trigger (opens the gallery lightbox). +24px above via margin,
   which adds to the section's 24px flex gap. */
.wp-block-neilkelly-project-solution-gallery .nk-project-solution-gallery__viewall {
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--2);
	margin: var(--wp--preset--spacing--6) 0 0 0;
	padding: 0;
	background: none;
	border: 0;
	cursor: pointer;
	font-family: inherit;
	font-size: var(--wp--preset--font-size--base);
	font-weight: var(--wp--custom--font-weight--semibold);
	line-height: var(--wp--custom--line-height--none);
	color: var(--wp--preset--color--brand-red);
}

.wp-block-neilkelly-project-solution-gallery .nk-project-solution-gallery__viewall:focus-visible {
	outline: 2px solid var(--wp--preset--color--brand-red);
	outline-offset: 2px;
}

.wp-block-neilkelly-project-solution-gallery .nk-project-solution-gallery__arrow {
	display: block;
	transition: transform 200ms ease;
}

.wp-block-neilkelly-project-solution-gallery .nk-project-solution-gallery__viewall:hover .nk-project-solution-gallery__arrow,
.wp-block-neilkelly-project-solution-gallery .nk-project-solution-gallery__viewall:focus-visible .nk-project-solution-gallery__arrow {
	transform: translateX(var(--wp--preset--spacing--1));
}

@media (prefers-reduced-motion: reduce) {
	.wp-block-neilkelly-project-solution-gallery .nk-project-solution-gallery__arrow {
		transition: none;
	}
	.wp-block-neilkelly-project-solution-gallery .nk-project-solution-gallery__viewall:hover .nk-project-solution-gallery__arrow,
	.wp-block-neilkelly-project-solution-gallery .nk-project-solution-gallery__viewall:focus-visible .nk-project-solution-gallery__arrow {
		transform: none;
	}
}

/* --- Responsive --- */
@media (max-width: 1023px) {
	.wp-block-neilkelly-project-solution-gallery.nk-project-solution-gallery {
		padding: var(--wp--preset--spacing--6) var(--wp--preset--spacing--12) var(--wp--preset--spacing--16);
	}
}

@media (max-width: 767px) {
	.wp-block-neilkelly-project-solution-gallery.nk-project-solution-gallery {
		padding: var(--wp--preset--spacing--6) var(--wp--preset--spacing--6) var(--wp--preset--spacing--12);
	}
	.wp-block-neilkelly-project-solution-gallery .nk-project-solution-gallery__pair {
		grid-template-columns: 1fr;
	}
}

/* No block-gap seam between full-bleed sections. */
.wp-block-neilkelly-project-solution-gallery { margin-block: 0; }