/*
 * Project detail page — patterns/project-detail-hero.php,
 * project-detail-body.php, project-detail-feedback.php,
 * project-detail-related.php.
 * Geometry: docs/step-project-detail-page.md's own measured table, sourced
 * from .agents/skills/webflow-clone/state/source/pages/projects__xenitho.html
 * and its paired CSS.
 *
 * Reused unmodified, not repeated here: contact-hero.css (nav positioning,
 * badge, bottom-aligned row), work.css (.idia-work__card* card anatomy,
 * hover-scale), counter.css (.idia-counter__* reel geometry, divider).
 * This file only supplies what is new: the hero's card-vs-flush difference,
 * the meta row, the details rows and their divider, the paired-image grid,
 * the feedback block's centred container, and the related-projects title
 * row and query grid.
 */

/* ---- Hero: flush, not a card surface ----
   Confirmed against the live reference: .header-block.projects-details sets
   margin: 0, unlike .header-block.pricing (idia/projects-hero,
   idia/contact-hero) which is inset 16px via .is-surface-card. So this
   pattern's outer section carries radius and background directly (set as
   block attributes in the pattern) and gets none of .is-surface-card's
   margin — nothing to zero here, since the class was never applied. */

/* Row: bottom-aligned two-column at desktop, matching contact-hero.css's
   .idia-contact-hero__row — restated under the project-specific class
   because idia-project-hero__row is a different element (project-detail-
   hero.php's own row), even though it wants the identical behaviour. */
.idia-project-hero__row {
	justify-content: space-between;
	align-items: flex-end;
}

.idia-project-hero__right {
	min-width: 0;
}

/* Meta row (Year / Timeline / Services): gap 60 desktop, matching the
   reference's .career-meta. No spacing token is exactly 60px (48 and 64
   bracket it) — reported per AGENTS.md §15.6, using 64 (the nearer of the
   two, and the token work.css's own --padding--x already establishes as a
   legitimate one-off) rather than inventing a new token. */
.idia-project-hero__meta {
	column-gap: var(--wp--preset--spacing--64);
	row-gap: var(--wp--preset--spacing--16);
	padding-top: var(--wp--preset--spacing--24);
}

.idia-project-hero__meta-item {
	gap: var(--wp--preset--spacing--8);
	text-transform: uppercase;
}

.idia-project-hero__image-wrapper {
	position: relative;
	overflow: hidden;
}

.idia-project-hero__image-wrapper img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.idia-project-hero__preview {
	position: absolute;
	z-index: 2;
	left: 5%;
	bottom: 8%;
}

@media (max-width: 991px) {

	.idia-project-hero__row {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--wp--preset--spacing--44);
	}

	.idia-project-hero__meta {
		flex-wrap: wrap;
		column-gap: var(--wp--preset--spacing--40);
		row-gap: var(--wp--preset--spacing--16);
	}
}

@media (max-width: 767px) {

	.idia-project-hero__row {
		gap: var(--wp--preset--spacing--44);
	}

	.idia-project-hero__meta {
		column-gap: var(--wp--preset--spacing--16);
		row-gap: var(--wp--preset--spacing--8);
	}

	.idia-project-hero__title-column {
		flex-direction: column;
		align-items: flex-start;
	}
}

@media (max-width: 479px) {

	.idia-project-hero__row {
		gap: var(--wp--preset--spacing--36);
	}

	.idia-project-hero__meta {
		column-gap: var(--wp--preset--spacing--16);
		row-gap: var(--wp--preset--spacing--8);
	}
}

/* ---- Body: container/rail ----
   Same has-global-padding de-dup mechanism as projects.css/work.css/
   counter.css — WRAPPER is align:full with layout:constrained, so
   WordPress zeroes CONTAINER's own auto-applied root padding; !important
   wins the specificity tie against that later, equal-specificity rule. */
.idia-project-detail__container,
.idia-project-related__container {
	padding-left: var(--wp--custom--rail) !important;
	padding-right: var(--wp--custom--rail) !important;
}

.idia-project-detail__main-image,
.idia-project-detail__image,
.idia-project-hero__image-wrapper {
	overflow: hidden;
}

/* Image radius — 32px desktop, stepping to 24/16/16.
   The pattern's own block attribute sets border-radius via the `2-xl`
   PRESET (var(--wp--preset--border-radius--2-xl)), which WordPress bakes
   at :root as a single literal "32px" — it never re-resolves at a
   breakpoint even though the custom property it points to
   (--wp--custom--radius--32) does step 32/24/16/16 in style.css — the
   exact trap home-hero-card.php's own comment documents ("no radius
   PRESET can step at a breakpoint... a preset would render 24px at every
   width instead of 24/24/16/16"). Measured directly with computed styles:
   --wp--preset--border-radius--2-xl stayed "32px" at both 991px and
   767px while --wp--custom--radius--32 correctly read "24px" and "16px"
   respectively on the same page. !important needed because the preset
   renders as an INLINE style attribute (a block attribute), which beats
   any stylesheet selector regardless of specificity — same trade-off as
   contact-hero.css's badge/nav padding overrides. Fixed by reading the
   custom property directly, the same escape hatch work.css/projects.css
   already use for their own card images. */
@media (max-width: 991px) {

	.idia-project-detail__main-image,
	.idia-project-detail__image,
	.idia-project-hero__image-wrapper {
		border-radius: var(--wp--custom--radius--32) !important;
	}
}

.idia-project-detail__main-image img,
.idia-project-detail__image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Details rows: bottom border, space-between, top-aligned — matching
   .projects-details-wrap. The border sits on the FIRST row only in the
   reference (Challenges); rows 2 and 3 (._02 variant) carry no border,
   matching .projects-details-wrap._02's own reference rule. */
.idia-project-detail__row {
	border-bottom: 1px solid var(--wp--preset--color--border-light);
}

.idia-project-detail__row--02 {
	border-bottom: none;
}

.idia-project-detail__copy {
	min-width: 0;
}

@media (max-width: 991px) {

	.idia-project-detail__row {
		flex-direction: column;
		gap: var(--wp--preset--spacing--24);
	}
}

@media (max-width: 767px) {

	.idia-project-detail__row {
		gap: var(--wp--preset--spacing--16);
	}

	.idia-project-detail__row--02 {
		gap: var(--wp--preset--spacing--12);
	}

	.idia-project-detail__image-pair {
		grid-template-columns: 1fr !important;
	}
}

@media (max-width: 479px) {

	.idia-project-detail__row--02 {
		padding-top: var(--wp--preset--spacing--24) !important;
		padding-bottom: var(--wp--preset--spacing--24) !important;
	}

	.idia-project-detail__image-pair {
		padding-top: var(--wp--preset--spacing--24) !important;
		gap: var(--wp--preset--spacing--16) !important;
	}
}

/* ---- Feedback: centred container, left-aligned text ----
   margin-inline:auto centres the CONTAINER; nothing inside is
   text-align:center — see the pattern file's own comment for why this is
   not .is-measure-centred (AGENTS.md §8.3). 800px has no matching measure
   token (`hero` 850, `testimonial` 620 bracket it) — reported, not
   resolved with an invented token. */
.idia-project-feedback__container {
	max-width: 800px;
	margin-inline: auto;
	padding-inline: var(--wp--custom--rail);
}

.idia-project-feedback__client-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.idia-project-feedback__divider.wp-block-separator {
	border-style: dashed;
	border-width: 1px 0 0 0;
	border-color: var(--wp--preset--color--border-light);
	width: 100%;
}

@media (max-width: 767px) {

	.idia-project-feedback__container {
		padding-inline: var(--wp--preset--spacing--20);
	}
}

/* ---- Related: title row + query grid ----
   Same 2-up grid gap/behaviour as .idia-projects__grid (projects.css) —
   restated under this section's own class rather than sharing the
   selector, since this grid is a core/query block (WordPress prints its
   own generated grid-template-columns inline) rather than a plain group. */
.idia-project-related__grid.wp-block-query {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	gap: var(--wp--preset--spacing--40);
}

.idia-project-related__grid .wp-block-post-template {
	display: contents;
}

@media (max-width: 991px) {

	.idia-project-related__title-row {
		flex-direction: column;
		align-items: flex-start;
	}

	.idia-project-related__grid.wp-block-query {
		gap: var(--wp--preset--spacing--20);
	}
}

@media (max-width: 767px) {

	.idia-project-related__grid.wp-block-query {
		grid-template-columns: 1fr !important;
	}
}

@media (max-width: 479px) {

	.idia-project-related__title-row {
		gap: var(--wp--preset--spacing--16);
	}

	.idia-project-related__title-right {
		text-align: left;
	}

	.idia-project-related__grid.wp-block-query {
		gap: var(--wp--preset--spacing--28);
	}
}