/* =========================================================================
   HNZ Constructions — page sections

   One block per ACF page-builder layout, matching template-parts/sections/.

   Enqueued by hnz_enqueue_assets() in inc/enqueue.php, which fixes the load
   order. Design tokens live in tokens.css.
   ========================================================================= */

/* Shared and generic section styles ===================================== */

/* Shared hero and page hero ------------------------------------------- */

.section--hero,
.section--page-hero {
	@media (min-width: 1300px) {
		padding-block: 0;
	}
}

.home .section--hero {
	padding-bottom: 0;

	.hero {
		position: relative;
		padding-bottom: 6.125rem; /* 98px at the 1440px reference artboard. */

		.hero__media {
			z-index: 1;
		}
	}
}

.section--hero.section--divider::before,
.section--page-hero.section--divider::before {
	display: none;
}

.hero,
.page-hero {
	position: relative;
	max-width: var(--container);
	margin-inline: auto;
	padding-inline: var(--gutter);

	@media (min-width: 1300px) {
		margin-top: var(--sp-5);
	}
}


#philosophy-section-1 {
	.text-columns__body {
		padding-bottom: var(--sp-7);
		border-bottom: 1px solid var(--c-divider);
	}
}

.hero__media,
.page-hero__media {
	position: relative;
	background: var(--c-ink);
	max-width: 904px;
}

.hero__image,
.page-hero__image {
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;

	@media (min-width: 1300px) {
		aspect-ratio: 4 / 3;
	}
}

.media-focus--left,
.media-focus--left img { object-position: left center; }

.media-focus--centre,
.media-focus--centre img { object-position: center center; }

.media-focus--right,
.media-focus--right img { object-position: right center; }

.media-focus--top,
.media-focus--top img { object-position: center top; }

.media-focus--bottom,
.media-focus--bottom img { object-position: center bottom; }

.hero__content {
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	padding: var(--sp-5) var(--gutter) var(--sp-6);
	color: #fff;
	background: linear-gradient(to top, rgb(0 0 0 / 45%), transparent);
}

.hero__heading {
	font-size: var(--fs-800); /* 36px–97px */
	margin-bottom: var(--sp-4);
}

.page-hero__heading {
	position: absolute;
	left: var(--gutter);
	bottom: var(--sp-5);
	color: #fff;
	/* Inner-page titles use the same display scale as the Home message. The
	   source export has clean type over the photography rather than a blurred
	   text shadow. */
	font-size: var(--fs-800); /* 36px–97px */
	text-shadow: none;
}

.page-hero__media--plain {
	background: var(--c-surface-muted);
	min-height: 220px;
}

.page-hero__heading--plain {
	color: var(--c-ink);
	text-shadow: none;
}

.page-hero__intro {
	padding-top: var(--sp-6);
	position: relative;
	z-index: 1;
}

.page-hero__intro-inner {
	max-width: 92ch;
	padding-bottom: var(--sp-6);
	border-bottom: 1px solid var(--c-rule);
}

/* Desktop: the offset hero block. */
@media (min-width: 1300px) {
	.hero__media,
	.page-hero__media {
		margin-left: auto;
		margin-right: 177px;
	}

	.hero__image,
	.page-hero__image {
		/* About.png measures 904 x 534px. It is deliberately taller than a
		   conventional 16:9 banner, which keeps the large title within the
		   photograph's darker lower third. */
		aspect-ratio: 904 / 534;
	}

	.hero__content {
		background: none;
		padding-inline: var(--sp-7);
	}

	.page-hero__heading {
		left: var(--sp-7);
		bottom: var(--sp-6);
	}

	.page-hero__intro {
		padding-top: 3.5rem;
	}

	.page-hero__intro-inner {
		width: 60%;
		max-width: none;
		margin-left: 30.5%;
		padding-bottom: 3.5rem;
	}
}

/* Text columns -------------------------------------------------------- */

.text-columns {
	display: grid;
	gap: var(--sp-5);
}

.text-columns__heading {
	font-size: var(--fs-700); /* 30px–50px */
}

.text-columns__media {
	margin-top: var(--sp-6);
}

.text-columns__media img {
	width: 100%;
	object-fit: cover;
	aspect-ratio: 3 / 4;
}

.text-columns__media--wide {
	margin-top: var(--sp-7);
}

.text-columns__media--wide img {
	aspect-ratio: 21 / 9;
}

.text-columns--centred .text-columns__heading,
.text-columns--centred .text-columns__body {
	text-align: center;
}

.text-columns--centred .text-columns__body {
	max-width: 100ch;
	margin-inline: auto;
	text-align: left;
}

.text-columns--style-services_summary .text-columns__lead {
	padding-bottom: 43px;
	border-bottom: 1px solid var(--c-divider);
}

.text-columns--style-services_summary .text-columns__heading {
	font-size: var(--fs-600); /* 24px–40px */
	text-align: center;
}

.text-columns--style-services_summary .text-columns__body {
	max-width: 1095px;
	margin-top: var(--sp-7);
	text-align: left;
}

.text-columns--style-services_summary .text-columns__media--wide {
	max-width: 1095px;
}

.text-columns--style-services_summary .text-columns__media--wide img {
	aspect-ratio: 1095 / 560;
}

@media (min-width: 1300px) {
	.text-columns--split {
		grid-template-columns: 1fr 1.5fr;
		column-gap: var(--sp-8);
		align-items: start;
	}

	/*
	 * About / Our Philosophy is an editorial split, not the site's generic
	 * equal-weight text layout. Measured from About.png: the composition is
	 * inset 136px inside the 1360px content area, then resolves to a 344px
	 * image column, 85px of clear space, and a 655px reading column.
	 */
	.text-columns--style-philosophy .text-columns {
		width: 90%;
		max-width: 1095px;
		margin-left: 10%;
		grid-template-columns: 344fr 655fr;
		column-gap: 5.3125rem;
		align-items: start;
	}

	.text-columns--style-philosophy .text-columns__heading {
		line-height: 1.16;
	}

	.text-columns--style-philosophy .text-columns__body {
		padding-top: 6rem;
	}

	.text-columns--style-philosophy:not(.section--divider) .text-columns__body {
		position: relative;
		padding-bottom: 4.125rem;
	}

	.text-columns--style-philosophy:not(.section--divider) .text-columns__body::after {
		content: "";
		position: absolute;
		left: 0;
		right: calc(-1 * clamp(0px, calc((100vw - 80rem) * 0.79), 139px));
		bottom: 0;
		height: 1px;
		background: var(--c-divider);
	}

	.text-columns--style-philosophy.section--divider {
		padding-bottom: 4.3125rem;
	}

	.text-columns--style-philosophy.section--divider::before {
		display: none;
	}

	.text-columns--style-philosophy .text-columns__media {
		margin-top: 3.25rem;
	}

	.text-columns--style-philosophy .text-columns__media img {
		aspect-ratio: 344 / 445;
	}

	.text-columns--style-services_summary .text-columns__body,
	.text-columns--style-services_summary .text-columns__media--wide {
		margin-left: 10%;
	}

	.page-template-template-services .page-hero__intro-inner {
		padding-bottom: 3.875rem;
	}

	.page-template-template-services .section--service-shopfitting {
		min-height: 1097px;
	}

	.page-template-template-services .section--service-project-management {
		min-height: 937px;
	}

	.page-template-template-services .section--service-joinery {
		min-height: 775px;
	}

	.page-template-template-services .section--service-installation {
		min-height: 771px;
	}

	.page-template-template-services .text-columns--style-services_summary {
		min-height: 1053px;
	}
}

/* Service block ------------------------------------------------------- */

.section--service {
	--section-py: 5.5rem;
}

.section--page-hero + .section--service {
	padding-top: var(--sp-8);
}

.section--page-hero + .section--service.section--divider::before {
	display: none;
}

.service__media {
	margin-bottom: var(--sp-5);
}

.service__media img {
	width: 100%;
	object-fit: cover;
	aspect-ratio: 904 / 310;
}

.service {
	display: grid;
	gap: var(--sp-4);
	position: relative;
	z-index: 1;
}

.service__heading {
	font-size: var(--fs-700); /* 30px–50px */
}

.service__detail-media {
	margin-top: var(--sp-10);
}

.service__detail-media img {
	width: 100%;
	aspect-ratio: 344 / 400;
	object-fit: cover;
}

.service__intro {
	font-size: var(--fs-200); /* 13px */
	margin-bottom: var(--sp-4);
}

.service__list {
	display: grid;
	gap: var(--sp-3);
	font-size: var(--fs-200); /* 13px */
	list-style: disc;
	padding-left: 1.2em;
}

.service__item-title {
	font-weight: var(--fw-bold);
}

@media (min-width: 1300px) {
	.service {
		max-width: 1095px;
		margin-left: 10%;
		grid-template-columns: 344fr 655fr;
		column-gap: 5.3125rem;
		align-items: start;
	}

	.service__lead {
		text-align: center;
	}

	.service__media {
		width: 66.47%;
		margin-left: 23.46%;
		margin-bottom: var(--sp-8);
	}
}

/* Project meta / gallery ---------------------------------------------- */

.project-meta {
	display: grid;
	gap: 0;
}

.project-meta__row {
	display: flex;
	gap: var(--sp-2);
	padding-block: var(--sp-3);
	border-bottom: 1px solid var(--c-rule);
	font-family: var(--font-display);
	font-size: var(--fs-500); /* 20px–24px */
	font-weight: var(--fw-bold);
}

.project-meta__label {
	font-weight: var(--fw-bold);
}

.project-meta__value {
	margin: 0;
}

.project__intro {
	margin-top: var(--sp-5);
}

.project-gallery {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-5);
}

.project-gallery__item {
	width: 100%;
}

.project-gallery__item img {
	width: 100%;
}

@media (min-width: 48em) {
	.project-meta,
	.project__intro {
		width: 59.34%;
		margin-left: 30.5%;
	}

	.project-gallery {
		width: 66.47%;
		margin-left: 23.46%;
		gap: 40px 52px;
	}

	.project-gallery__item--full,
	.project-gallery__item--wide { width: 100%; }
	.project-gallery__item--medium { width: calc(50% - 26px); }
	.project-gallery__item--half { width: calc(50% - 26px); }

	.project-gallery__item--align-centre { margin-inline: auto; }
	.project-gallery__item--align-right { margin-left: auto; }
	.project-gallery__item--align-left { margin-right: auto; }
}

@media (min-width: 1300px) {
	.section--project-gallery {
		padding-bottom: 12.875rem;
	}
}

/* Media + text -------------------------------------------------------- */

.section--media-text__grid {
	display: grid;
	gap: var(--sp-6);
	align-items: center;
}

@media (min-width: 48em) {
	.section--media-text__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--sp-8);
	}

	.section--media-right .section--media-text__media {
		order: 2;
	}
}

/* Accordion ----------------------------------------------------------- */

.accordion {
	border-top: 1px solid var(--c-rule);
}

.accordion__item {
	border-bottom: 1px solid var(--c-rule);
}

.accordion__question {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-4);
	padding: var(--sp-4) 0;
	font-family: var(--font-display);
	font-weight: var(--fw-bold);
	font-size: var(--fs-400); /* 18px */
	cursor: pointer;
	list-style: none;
}

.accordion__question::-webkit-details-marker {
	display: none;
}

.accordion__question::after {
	content: "+";
	flex: none;
	font-weight: var(--fw-regular);
}

.accordion__item[open] .accordion__question::after {
	content: "–";
}

.accordion__answer {
	padding-bottom: var(--sp-5);
	font-size: var(--fs-200); /* 13px */
}

/* CTA banner ---------------------------------------------------------- */

.section--cta-banner {
	isolation: isolate;
}

.section--cta-banner__media {
	position: absolute;
	inset: 0;
	z-index: -1;
}

.section--cta-banner__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgb(51 49 50 / 55%);
}

.section--cta-banner.has-background {
	color: #fff;
}

.section--cta-banner__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.section--cta-banner__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-5);
}

/* Entry / archive ----------------------------------------------------- */

.entry__header,
.page__header,
.archive__header {
	padding-top: var(--sp-8);
	margin-bottom: var(--sp-5);
}

.entry__meta {
	font-size: var(--fs-100); /* 12px */
	color: var(--c-ink-muted);
	margin-bottom: var(--sp-3);
}

.entry__thumbnail {
	margin-block: var(--sp-6);
}

.archive {
	padding-block: var(--sp-8);
}

.card-grid {
	display: grid;
	gap: var(--sp-5);
}

@media (min-width: 40em) {
	.card-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1300px) {
	.card-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.card {
	border: 1px solid var(--c-rule);
	background: var(--c-surface);
}

.card__media img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.card__body { padding: var(--sp-5); }

.card__meta {
	font-size: var(--fs-100); /* 12px */
	color: var(--c-ink-muted);
	margin-bottom: var(--sp-2);
}

.card__title {
	font-size: var(--fs-400); /* 18px */
	margin-bottom: var(--sp-2);
}

.card__excerpt {
	font-size: var(--fs-200); /* 13px */
	color: var(--c-ink-muted);
}

.pagination {
	margin-top: var(--sp-7);
	display: flex;
	justify-content: center;
	gap: var(--sp-2);
}

.pagination .page-numbers.current {
	font-weight: var(--fw-bold);
	text-decoration: underline;
}