/* =========================================================================
   HNZ Constructions — project grids, filters and tiles

   Owns the project grid, tiles, filters and loading state. Shared with the
   Projects archive, so nothing here is homepage-specific.

   Enqueued by hnz_enqueue_assets() in inc/enqueue.php.
   ========================================================================= */

/* Grid -------------------------------------------------------------------
   Measured off Home.png: columns sit at x 40-349 / 390-699 / 740-1049 /
   1090-1399, i.e. 310px tiles with 40px gaps and no extra inset — the grid
   fills the same content box as .container (1440px container, 40px gutter
   at desktop = 1360px content).

   Arithmetic check at a 1440px viewport: content box 1440 - 2*40 = 1360;
   4 columns with 3 gaps of 40px = 1360 - 120 = 1240 / 4 = 310px columns.
   Matches the measured 310px exactly.

   The export is desktop-only, so below 1300px (no reference in the design)
   this falls back to 2 columns with a tighter gap rather than cramming 4
   narrow columns in. */
.tile-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px;
	max-width: var(--container);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

@media (min-width: 1300px) {
	.tile-grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 40px;
	}
}

/* Tile ---------------------------------------------------------------- */

.tile {
	position: relative;
	display: block;
	overflow: hidden;
	background: var(--c-surface-muted);
}

/* Measured: tile row 1 is 1974-2343 (370px) at a 310px column width, i.e.
   310/370 = 31/37. Kept constant across breakpoints — the export has no
   other ratio to go on. */
.tile__image,
.tile__placeholder {
	display: block;
	width: 100%;
	aspect-ratio: 31 / 37;
	object-fit: cover;
	transition: transform 500ms cubic-bezier(0.4, 0, 0.2, 1);
}

.tile:hover .tile__image {
	transform: scale(1.04);
}

/* Hover/focus overlay --------------------------------------------------
   Measured off the first tile in the Home export ("Bowltiful Noodles
   Swanston" / "MELBOURNE"), the only one shown in its hover state:

     rule            (1px, full-strength ink text colour, i.e. white here)
     40px
     title           18px (--fs-400), bold, cap-height ~13px measured
     18px
     location        11px (--fs-utility), cap-height ~8px measured — already
                      the token this used before
     38px
     rule            (1px)

   Both rules measured 226px wide, inset ~42px from each tile edge inside
   the 310px tile (42 + 226 + 42 = 310) — implemented as min(226px, 100%) so
   it degrades to full-width on narrower tiles instead of overflowing.

   The overlay fill sampled dark and essentially unsaturated, consistent
   with the existing --c-overlay token (45% of the brand ink); there is no
   unblended reference image to solve for an exact alpha, so that token is
   reused rather than a new one invented. */
.tile__overlay {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 18px;
	padding: var(--sp-4);
	text-align: center;
	color: #fff;
	background: var(--c-overlay);
	opacity: 0;
	transition: opacity var(--transition);
}

.tile:hover .tile__overlay,
.tile:focus-visible .tile__overlay {
	opacity: 1;
}

.tile__title {
	position: relative;
	width: min(2256px, 100%);
	padding-top: 40px;
	font-family: var(--font-display);
	font-size: var(--fs-400); /* 18px */
	font-weight: var(--fw-bold);
	line-height: var(--lh-snug);
}

.tile__title::before {
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	width: min(226px, 100%);
	height: 1px;
	background: currentcolor;
	transform: translateX(-50%);
}

.tile__location {
	position: relative;
	width: min(226px, 100%);
	padding-top: 0;
	padding-bottom: 38px;
	font-size: var(--fs-utility); /* 11px */
	letter-spacing: var(--ls-wide);
	text-transform: uppercase;
}

.tile__location::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 50%;
	width: min(226px, 100%);
	height: 1px;
	background: currentcolor;
	transform: translateX(-50%);
}

/* Filters -------------------------------------------------------------- */

.filters__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--sp-2) var(--sp-4);
	margin-bottom: var(--sp-6);
}

.filters__item + .filters__item::before {
	content: "/";
	margin-right: var(--sp-4);
	color: var(--c-ink-muted);
}

.filters__link {
	padding-bottom: 2px;
	border-bottom: 1px solid transparent;
	font-family: var(--font-display);
	font-size: var(--fs-300); /* 13px */
	font-weight: var(--fw-bold);
	transition: border-color var(--transition), opacity var(--transition);
}

.filters__link:hover {
	opacity: 0.6;
}

.filters__link.is-active {
	border-bottom-color: currentcolor;
}

/* Projects listing ------------------------------------------------------
   The design puts the category row in its own band: no rule directly below
   the hero, then a full container-width rule below the filters before the
   first tile row. */
.section--page-hero + .section--project-filter.section--divider::before {
	display: none;
}

.section--project-filter .filters {
	margin-bottom: 5.25rem;
	padding-top: 29px;
	padding-bottom: 32px;
	border-bottom: 1px solid var(--c-divider);
}

.section--project-filter .filters__list {
	margin-bottom: 0;
	gap: var(--sp-2) var(--sp-5);
}

.section--project-filter .filters__link {
	position: relative;
	font-size: var(--fs-500); /* 20px–24px */
}

.section--project-filter .filters__link.is-active {
	border-bottom-color: transparent;
}

/* The short tick above the row marks the selected category, not the row
   itself — it moves to sit above whichever link is active. */
.section--project-filter .filters__link.is-active::before {
	content: "";
	position: absolute;
	top: -26px;
	left: 50%;
	width: 29px;
	height: 1px;
	transform: translateX(-50%);
	background: var(--c-divider);
}

.section--project-filter .section__footer {
	margin-top: 3.25rem;
}

[data-projects-grid] {
	transition: opacity 120ms linear;
}

[data-projects-grid][aria-busy="true"] {
	opacity: 0.45;
}

.section--project-grid {
	/* The header is sticky, so anchor links must stop clear of it. */
	scroll-margin-top: calc(var(--header-height) + var(--sp-3));

	.section__footer{
		margin-top: 4rem;
	}
}

@media (min-width: 1300px) {
	.section--project-grid {
		padding-bottom: 60px; /*  at the 1440px reference artboard. */
	}

	.section--project-filter {
		padding-bottom: 5.75rem;
	}

	.section--project-filter .filters {
		margin-bottom: 4.8125rem;
	}
}

/* Hover is unavailable on touch. Keeping the overlay visible on devices
   that cannot hover preserves the project title and location rather than
   turning every card into an unlabelled photograph. */
@media (hover: none) {
	.tile__overlay {
		justify-content: flex-end;
		opacity: 1;
		background: linear-gradient(to top, rgb(51 49 50 / 72%), transparent 62%);
	}

	.tile__title {
		padding-top: 0;
	}

	.tile__title::before,
	.tile__location::after {
		content: none;
	}

	.tile__location {
		padding-bottom: 0;
	}
}

/* Single project ------------------------------------------------------- */

.single-project .section--project-hero {
	padding: 0;
}

.single-project .project-hero {
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
}

.single-project .project-hero::before {
	display: none;
}

.single-project .project-hero__media {
	isolation: isolate;
	width: 100%;
	max-width: none;
	margin: 0;
	background: var(--c-ink);
}

.single-project .project-hero__media::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: rgb(0 0 0 / 18%);
	pointer-events: none;
}

.single-project .project-hero__image {
	width: 100%;
	height: auto;
	aspect-ratio: 1440 / 743;
	object-fit: cover;
}

.single-project .project-hero__heading {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: grid;
	place-items: center;
	width: auto;
	padding-inline: var(--gutter);
	font-size: 30px;
	font-weight: var(--fw-display);
	line-height: 1;
	letter-spacing: var(--ls-tight);
	text-align: center;
	text-wrap: balance;
	transform: none;
}

.single-project .section--project-meta {
	display: flex;
	align-items: center;
	padding-block: 0;

	.container {
		border-bottom: 1px solid var(--c-divider);
	}
	
}

/* Location left, category right, spread to the edges of the shared inner
   column the gallery below runs in, so the caption lines up with the images
   it describes. The rule stays on the wider .container. */
.project-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.625rem 2.5rem;
	width: min(var(--inner-container), 100%);
	margin: 0 auto;
	font-family: var(--font-display);
	font-size: 20px;
	font-weight: 300;
	line-height: 1;
	letter-spacing: -0.03em;
	padding-block: 32px;
}

.section--project-gallery {
	padding: 4.75rem 0 0;
}

.project-gallery {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: 2.5rem;
	row-gap: 3.25rem;
	width: min(var(--inner-container), 100%);
	max-width: none;
	margin-inline: auto;
}

.project-gallery__item {
	margin: 0;
}

.project-gallery__item img {
	display: block;
	width: 100%;
	height: auto;
}

.project-gallery__item--half {
	grid-column: span 1;
	width: 100%;
}

.project-gallery__item--full,
.project-gallery__item--wide,
.project-gallery__item--medium {
	grid-column: 1 / -1;
}

.project-gallery__item--medium {
	width: 75%;
}

.project-gallery__item--full,
.project-gallery__item--wide {
	width: 100%;
}

/* The video opens the gallery, full width and ahead of every image. 16:9 is
   the frame both Vimeo and an uploaded file are authored to; the box holds
   that ratio so the page does not jump while either one loads. */
.project-gallery__video {
	position: relative;
	aspect-ratio: 16 / 9;
	background: var(--c-ink);
}

.project-gallery__video iframe,
.project-gallery__video video {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
	object-fit: cover;
}

.project-gallery__item--align-left {
	justify-self: start;
}

.project-gallery__item--align-centre {
	justify-self: center;
}

.project-gallery__item--align-right {
	justify-self: end;
}

.section--project-navigation {
	padding: 3.5rem 0 7.5rem;
}

.project-navigation {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	align-items: center;
	width: min(var(--inner-container), 100%);
	max-width: none;
	margin-inline: auto;
}

.project-navigation__link {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	width: fit-content;
	font-family: var(--font-display);
	font-size: 11px;
	font-weight: var(--fw-display);
	line-height: 1;
	letter-spacing: 0.17em;
	text-transform: uppercase;
	transition: opacity var(--transition), transform var(--transition);
}

.project-navigation__link--next {
	justify-self: end;
}

.project-navigation__link:hover,
.project-navigation__link:focus-visible {
	opacity: 0.65;
}

.project-navigation__link--previous:hover,
.project-navigation__link--previous:focus-visible {
	transform: translateX(-4px);
}

.project-navigation__link--next:hover,
.project-navigation__link--next:focus-visible {
	transform: translateX(4px);
}

@media (max-width: 81.1875em) {
	body.single-project .site-header {
		position: fixed;
		background: transparent;
		color: #e6e7e8;
	}

	body.single-project .site-header:not(.is-stuck) .logo__image {
		filter: brightness(0) invert(1);
	}

	body.single-project .site-header.is-stuck {
		background: var(--c-surface);
		color: var(--c-ink);
	}

	.single-project .project-hero__image {
		height: 70svh;
		min-height: 30rem;
		max-height: 46rem;
		aspect-ratio: auto;
	}
}

@media (max-width: 47.9375em) {
	.single-project .project-hero__heading {
		font-size: 28px;
	}

	.single-project .section--project-meta {
		min-height: 5.25rem;
		padding-block: 1.5rem;
	}

	.section--project-gallery {
		padding-top: 2.5rem;
	}

	.project-gallery {
		grid-template-columns: minmax(0, 1fr);
		gap: 1.5rem;
	}

	.project-gallery__item--half,
	.project-gallery__item--full,
	.project-gallery__item--wide,
	.project-gallery__item--medium {
		grid-column: 1;
		width: 100%;
		justify-self: stretch;
	}

	.section--project-navigation {
		padding: 2.5rem 0 4rem;
	}

	.project-navigation__link {
		font-size: 10px;
	}
}