/* ==========================================================================
   Photo Gallery (neilkelly/photo-gallery)
   Figma: Photo Gallery / Photo Gallery Body (1988:30)
   Token-driven. Wrapper: .wp-block-neilkelly-photo-gallery-hub.nk-photo-gallery
   Category tabs · 3-col masonry of project photos · Load More.
   ========================================================================== */
.wp-block-neilkelly-photo-gallery-hub.nk-photo-gallery {
	display: flex;
	flex-direction: column;
	gap: var(--wp--custom--components--photo-gallery--section-gap);
	/* Full-bleed section; horizontal inset lives on the centered inner bands
	   below so the content aligns with faq-hub and other full-bleed sections. */
	padding: var(--wp--preset--spacing--12) 0 var(--wp--preset--spacing--section);
	background: var(--wp--preset--color--surface-page);
	font-family: var(--wp--preset--font-family--inter);
	box-sizing: border-box;
}

/* Inner bands (tabs + grid) = page max-width; the gutter padding then yields a
   content-width (1296) band, matching wp-block-neilkelly-faq-hub. */
.wp-block-neilkelly-photo-gallery-hub .nk-photo-gallery__tabs,
.wp-block-neilkelly-photo-gallery-hub .nk-photo-gallery__grid {
	width: 100%;
	max-width: var(--wp--custom--layout--max-width);
	margin-inline: auto;
	padding-inline: var(--wp--preset--spacing--gutter);
	box-sizing: border-box;
}

/* Category tabs --------------------------------------------------------- */
/* Match the homepage nk-services__filters styling. Tabs are <a> links (services
   filters are <button>s), so inline-flex + fixed height reproduces the centered
   fixed-height button look. */
.wp-block-neilkelly-photo-gallery-hub .nk-photo-gallery__tabs {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--3);
}

.wp-block-neilkelly-photo-gallery-hub .nk-photo-gallery__tab {
	margin: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	height: var(--wp--preset--spacing--12);
	padding: var(--wp--preset--spacing--3) var(--wp--preset--spacing--6);
	background: none;
	border: 1px solid var(--wp--preset--color--border-default);
	border-radius: var(--wp--custom--radius--default);
	color: var(--wp--preset--color--ink-primary);
	font-family: var(--wp--preset--font-family--inter);
	font-size: var(--wp--preset--font-size--sm-md);
	font-weight: var(--wp--custom--font-weight--medium);
	line-height: var(--wp--custom--line-height--base);
	white-space: nowrap;
	text-decoration: none; /* tabs are <a> links to each gallery */
	cursor: pointer;
	transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease;
}

.wp-block-neilkelly-photo-gallery-hub .nk-photo-gallery__tab:hover {
	border-color: var(--wp--preset--color--ink-primary);
}

.wp-block-neilkelly-photo-gallery-hub .nk-photo-gallery__tab.is-active {
	background-color: var(--wp--preset--color--brand-red);
	color: var(--wp--preset--color--brand-white);
	border-color: var(--wp--preset--color--brand-red);
}

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

/* Masonry grid (CSS multicolumn) ---------------------------------------- */
.wp-block-neilkelly-photo-gallery-hub .nk-photo-gallery__grid {
	column-count: var(--wp--custom--components--photo-gallery--masonry-columns);
	column-gap: var(--wp--preset--spacing--5);
	/* margin-inline: auto + padding-inline: gutter come from the inner-band rule
	   above; only reset the block-axis list defaults here. */
	margin-block: 0;
	padding-block: 0;
	list-style: none;
}

.wp-block-neilkelly-photo-gallery-hub .nk-photo-gallery__item {
	break-inside: avoid;
	margin: 0 0 var(--wp--preset--spacing--5);
}

/* Filter / Load More hide tiles via the hidden attribute (view.js). */
.wp-block-neilkelly-photo-gallery-hub .nk-photo-gallery__item[hidden] {
	display: none;
}

.wp-block-neilkelly-photo-gallery-hub .nk-photo-gallery__figure {
	position: relative;
	margin: 0;
	border-radius: var(--wp--custom--components--photo-gallery--photo-radius);
	overflow: hidden;
}

/* Category pill overlaid top-left (same treatment as the article lead-media pill:
   brand-red chip, white 8px bold uppercase, full radius). pointer-events:none so a
   click on the pill still falls through to the image button (opens the lightbox). */
.wp-block-neilkelly-photo-gallery-hub .nk-photo-gallery__category {
	position: absolute;
	top: var(--wp--preset--spacing--5);
	left: var(--wp--preset--spacing--5);
	z-index: 2;
	pointer-events: none;
	display: inline-flex;
	align-items: center;
	padding: var(--wp--preset--spacing--2);
	background: var(--wp--preset--color--brand-red);
	color: var(--wp--preset--color--brand-white);
	border-radius: var(--wp--custom--radius--full);
	font-size: var(--wp--preset--font-size--xxs);
	font-weight: var(--wp--custom--font-weight--bold);
	line-height: 1;
	text-transform: uppercase;
}

/* The image is a button that opens the lightbox — reset native button chrome. */
.wp-block-neilkelly-photo-gallery-hub .nk-photo-gallery__link {
	display: block;
	position: relative;
	width: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	color: inherit;
	cursor: pointer;
}

.wp-block-neilkelly-photo-gallery-hub .nk-photo-gallery__img {
	display: block;
	width: 100%;
	height: auto;
}

/* Placeholder photos cycle a few aspect ratios to mimic the masonry rhythm. */
.wp-block-neilkelly-photo-gallery-hub .nk-photo-gallery__img--placeholder {
	aspect-ratio: 4 / 3;
	background: var(--wp--preset--color--surface-section);
}
.wp-block-neilkelly-photo-gallery-hub .nk-photo-gallery__item:nth-child(3n+1) .nk-photo-gallery__img--placeholder { aspect-ratio: 1 / 1; }
.wp-block-neilkelly-photo-gallery-hub .nk-photo-gallery__item:nth-child(3n+2) .nk-photo-gallery__img--placeholder { aspect-ratio: 3 / 4; }

/* Hover overlay + View Project ------------------------------------------ */
/* Scrim only — non-interactive so clicks fall through to the image button
   (which opens the lightbox); the "View Project" link sits above it. */
.wp-block-neilkelly-photo-gallery-hub .nk-photo-gallery__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, transparent 0%, var(--wp--preset--color--surface-dark-overlay) 100%);
	opacity: 0;
	transition: opacity 0.2s ease;
	pointer-events: none;
}

/* "View Project" — a real link over the image (navigates to the project page).
   Clicking it goes to the project; clicking elsewhere on the image opens the
   lightbox. */
.wp-block-neilkelly-photo-gallery-hub .nk-photo-gallery__view {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--1);
	color: var(--wp--preset--color--brand-white);
	font-size: var(--wp--preset--font-size--ui-nav);
	font-weight: var(--wp--custom--font-weight--medium);
	text-decoration: none;
	white-space: nowrap;
	opacity: 0;
	transition: opacity 0.2s ease;
}

/* Reveal the scrim + link on hover or when any control in the tile is focused. */
.wp-block-neilkelly-photo-gallery-hub .nk-photo-gallery__figure:hover .nk-photo-gallery__overlay,
.wp-block-neilkelly-photo-gallery-hub .nk-photo-gallery__figure:focus-within .nk-photo-gallery__overlay,
.wp-block-neilkelly-photo-gallery-hub .nk-photo-gallery__figure:hover .nk-photo-gallery__view,
.wp-block-neilkelly-photo-gallery-hub .nk-photo-gallery__figure:focus-within .nk-photo-gallery__view {
	opacity: 1;
}

.wp-block-neilkelly-photo-gallery-hub .nk-photo-gallery__link:focus-visible {
	outline: 2px solid var(--wp--preset--color--brand-white);
	outline-offset: -2px;
}

.wp-block-neilkelly-photo-gallery-hub .nk-photo-gallery__view:focus-visible {
	outline: 2px solid var(--wp--preset--color--brand-white);
	outline-offset: 2px;
}

/* Award tag ------------------------------------------------------------- */
.wp-block-neilkelly-photo-gallery-hub .nk-photo-gallery__tag {
	position: absolute;
	top: var(--wp--preset--spacing--3);
	left: var(--wp--preset--spacing--3);
	padding: var(--wp--preset--spacing--1-75) var(--wp--preset--spacing--3-5);
	background: var(--wp--preset--color--surface-dark);
	color: var(--wp--preset--color--brand-white);
	border-radius: var(--wp--custom--radius--full);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: var(--wp--custom--font-weight--semibold);
	line-height: 1;
}

/* Save (Pinterest / IdeaBook) — integration wired in Hardening ---------- */
.wp-block-neilkelly-photo-gallery-hub .nk-photo-gallery__save {
	position: absolute;
	top: var(--wp--preset--spacing--3);
	right: var(--wp--preset--spacing--3);
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--wp--custom--components--photo-gallery--save-size);
	height: var(--wp--custom--components--photo-gallery--save-size);
	padding: 0;
	background: var(--wp--preset--color--brand-white);
	border: 0;
	border-radius: var(--wp--custom--radius--full);
	color: var(--wp--preset--color--brand-red);
	cursor: pointer;
	opacity: 0;
	transition: opacity 0.2s ease, transform 0.15s ease;
}

.wp-block-neilkelly-photo-gallery-hub .nk-photo-gallery__figure:hover .nk-photo-gallery__save,
.wp-block-neilkelly-photo-gallery-hub .nk-photo-gallery__save:focus-visible {
	opacity: 1;
}

.wp-block-neilkelly-photo-gallery-hub .nk-photo-gallery__save:hover {
	transform: scale(1.06);
}

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

.wp-block-neilkelly-photo-gallery-hub .nk-photo-gallery__save-icon {
	display: block;
}

/* Load More ------------------------------------------------------------- */
.wp-block-neilkelly-photo-gallery-hub .nk-photo-gallery__load-more-wrap {
	display: flex;
	justify-content: center;
}

/* view.js hides the control when the active filter has no more tiles. */
.wp-block-neilkelly-photo-gallery-hub .nk-photo-gallery__load-more-wrap[hidden] {
	display: none;
}

.wp-block-neilkelly-photo-gallery-hub .nk-photo-gallery__load-more {
	margin: 0;
	padding: var(--wp--preset--spacing--3-75) var(--wp--preset--spacing--8);
	background: transparent;
	border: 1px solid var(--wp--preset--color--ink-primary);
	border-radius: var(--wp--custom--radius--md);
	color: var(--wp--preset--color--ink-primary);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--base);
	font-weight: var(--wp--custom--font-weight--semibold);
	line-height: 1;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.wp-block-neilkelly-photo-gallery-hub .nk-photo-gallery__load-more:hover {
	background: var(--wp--preset--color--ink-primary);
	color: var(--wp--preset--color--brand-white);
}

.wp-block-neilkelly-photo-gallery-hub .nk-photo-gallery__load-more:focus-visible {
	outline: 2px solid var(--wp--preset--color--ink-primary);
	outline-offset: 2px;
}

/* Reduced motion -------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.wp-block-neilkelly-photo-gallery-hub .nk-photo-gallery__overlay,
	.wp-block-neilkelly-photo-gallery-hub .nk-photo-gallery__view,
	.wp-block-neilkelly-photo-gallery-hub .nk-photo-gallery__save,
	.wp-block-neilkelly-photo-gallery-hub .nk-photo-gallery__tab,
	.wp-block-neilkelly-photo-gallery-hub .nk-photo-gallery__load-more {
		transition: none;
	}
}

/* Responsive ------------------------------------------------------------ */
@media (max-width: 1023px) {
	.wp-block-neilkelly-photo-gallery-hub .nk-photo-gallery__grid {
		column-count: 2;
	}
	/* Tabs shrink like nk-services__filters on tablet. */
	.wp-block-neilkelly-photo-gallery-hub .nk-photo-gallery__tabs { gap: var(--wp--preset--spacing--2); }
	.wp-block-neilkelly-photo-gallery-hub .nk-photo-gallery__tab { height: var(--wp--preset--spacing--10); padding: var(--wp--preset--spacing--1-5) var(--wp--preset--spacing--3); font-size: var(--wp--preset--font-size--sm); }
}

@media (max-width: 767px) {
	.wp-block-neilkelly-photo-gallery-hub.nk-photo-gallery {
		padding-left: var(--wp--preset--spacing--6);
		padding-right: var(--wp--preset--spacing--6);
	}

	.wp-block-neilkelly-photo-gallery-hub .nk-photo-gallery__grid {
		column-count: 1;
	}

	/* Tabs scroll horizontally like nk-services__filters on mobile. */
	.wp-block-neilkelly-photo-gallery-hub .nk-photo-gallery__tabs { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: var(--wp--preset--spacing--1); }
	.wp-block-neilkelly-photo-gallery-hub .nk-photo-gallery__tabs::-webkit-scrollbar { display: none; }
	.wp-block-neilkelly-photo-gallery-hub .nk-photo-gallery__tab { flex-shrink: 0; }
}