/*
 * Projects — archive card grid, filter, pagination + single-project layout.
 *
 * This styles DYNAMIC-COLLECTION output (the Projects CPT query loop + single
 * template), which is exempt from the "no authored content CSS" rule — same
 * category as plugin/query output. It is driven entirely by the global design
 * tokens (theme.json palette + font presets), so it stays in sync with Global
 * Styles. Static marketing pages remain 100% block-editable and use none of this.
 */

:root {
	--norlon-ink: var(--wp--preset--color--ink, #231F20);
	--norlon-red: var(--wp--preset--color--norlon-red, #DE3412);
	--norlon-signal: var(--wp--preset--color--signal-red, #EF4135);
	--norlon-gray: var(--wp--preset--color--section-gray, #F4F4F4);
	--norlon-field: var(--wp--preset--color--field-gray-light, #F0F0F0);
	--norlon-hairline: var(--wp--preset--color--hairline-gray, #D9D9D9);
	--norlon-din: "URW DIN Cond", "Saira Condensed", "Oswald", sans-serif;
	--norlon-mont: "Montserrat", sans-serif;
	--norlon-body: "Open Sans", sans-serif;
	--norlon-cw: 1160px;
}

/* Content is a true 1160 on desktop (matches the block pages + design dividers);
   the 24px gutter only kicks in once the viewport is narrower than the content. */
.norlon-wrap { width: min(var(--norlon-cw), calc(100% - 48px)); margin-inline: auto; }
.norlon-section { padding-block: 64px; }
/* Stripes butt against their neighbours; vertical rhythm is each stripe's own
   padding, never a block-gap margin. Zero the block-gap that WP injects between
   these constrained Group blocks and the adjacent dividers (matches every other
   page's alignfull stripes, which already sit at margin-block:0). */
.norlon-ourprojects, .norlon-section { margin-block: 0 !important; }
/* Dividers use the canonical .norlon-divider (sections.css); the page hero uses the
   canonical .norlon-page-hero (sections.css) — neither is redefined here anymore. */

/* Eyebrows / labels */
.norlon-eyebrow {
	font-family: var(--norlon-mont); font-weight: 800; font-size: 11px;
	letter-spacing: 0.15em; text-transform: uppercase; margin: 0 0 16px;
}
.norlon-eyebrow.is-red { color: var(--norlon-red); }

/* Intro + hero are the CANONICAL shared components (.norlon-pageintro / .norlon-page-hero
   in sections.css) — the Projects page uses those exactly like About/Services/etc.,
   so there is no Projects-specific intro/hero styling here anymore. */
/* Section heading — inherits the GLOBAL h2 (50px/600/48px). Only layout here. */
.norlon-subhead { margin: 0; white-space: nowrap; }

/* "Our Projects" block — heading + copy beside it, filters below, the whole block
   vertically centred between the two content-width hairlines (R2). */
.norlon-ourprojects { padding-block: 50px; }
.norlon-ourprojects__head { display: flex; align-items: flex-start; gap: 44px; margin-bottom: 34px; }
.norlon-ourprojects__copy { max-width: 486px; margin: 0; font-family: var(--norlon-body); font-size: 14px; line-height: 1.5; color: var(--norlon-ink); }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* Filter row */
.norlon-filter { display: grid; grid-template-columns: 1.74fr 1fr; gap: 53px; align-items: end; margin: 0; }
.norlon-filter__cat .norlon-selectwrap { display: block; }
.norlon-filter label { display: block; font-family: var(--norlon-mont); font-weight: 800; font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--norlon-ink); margin-bottom: 10px; }
.norlon-filter input[type="search"],
.norlon-filter .norlon-select { width: 100%; height: 48px; border: 0; border-radius: 0; background: var(--norlon-field); color: var(--norlon-ink); font-family: var(--norlon-body); font-size: 14px; padding: 0 16px; }
.norlon-filter input[type="search"]::placeholder { color: #898989; }
/* Select red chevron square is defined once, site-wide, in sections.css. */
.norlon-selectwrap { position: relative; }
.norlon-filter .norlon-submit { height: 48px; border: 0; border-radius: 0; background: var(--norlon-red); color: #fff; font-family: var(--norlon-mont); font-weight: 700; font-size: 11px; letter-spacing: 0.09em; text-transform: uppercase; padding: 0 24px; cursor: pointer; transition: background-color .22s ease; }
.norlon-filter .norlon-submit:hover, .norlon-filter .norlon-submit:focus-visible { background: var(--wp--preset--color--ink, #231F20); }

/* Card grid */
/* R2 (Projects 208:766): cards are 549px with a 62px gutter (1160 = 549+62+549). */
.norlon-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 62px; margin-top: 24px; }
.norlon-card { display: flex; flex-direction: column; }
.norlon-card__imgwrap { display: block; aspect-ratio: 549 / 300; overflow: hidden; }
.norlon-card__imgwrap img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* R2-measured (208:766, wrapped titles e.g. "WESTERN UNIVERSITY BIOMEDICAL /
   RESEARCH FACILITY"): line pitch is exactly 30px on a 30px font → line-height 1.
   We had 1.05 (31.5px), so every wrapped line drifted 1.5px. */
.norlon-card__title { font-family: var(--norlon-din); font-weight: 700; font-size: 30px; line-height: 1; text-transform: uppercase; color: var(--norlon-ink); margin: 20px 0 14px; text-decoration: none; display: inline-flex; align-items: baseline; gap: 10px; }
.norlon-card__title:hover { color: var(--norlon-red); }
.norlon-card__title .chev { color: var(--norlon-red); font-weight: 700; }
/* R2: Client / Budget / Size are FIXED columns on ONE row (offsets 0 / 229 / 401
   within the 549px card) — a long value WRAPS inside its own column rather than
   pushing Size onto a second row. Was a wrapping flex, so long clients (e.g. "BGIS
   Global Integrated Solutions Canada LP") bumped Size down. */
.norlon-card__meta { display: grid; grid-template-columns: 190fr 133fr 148fr; column-gap: 39px; align-items: start; }
.norlon-card__meta > div { min-width: 0; }
.norlon-card__meta dt { font-family: var(--norlon-mont); font-weight: 800; font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--norlon-red); margin: 0 0 4px; }
.norlon-card__meta dd { font-family: var(--norlon-din); font-weight: 700; font-size: 23px; color: var(--norlon-ink); margin: 0; }
/* SIZE casing is authored in the DATA to match R2 ("46,662 SQ. FT.") — deliberately
   NOT a text-transform, so the field value is the source of truth and the editor sees
   exactly what renders. (.is-client/.is-budget/.is-size remain as semantic hooks.) */

/* Pagination */
.norlon-pagination { display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 48px; }
.norlon-pagination a, .norlon-pagination span {
	display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 44px;
	font-family: var(--norlon-mont); font-weight: 800; font-size: 14px; letter-spacing: 0.15em;
	color: var(--norlon-ink); text-decoration: none;
}
.norlon-pagination .current { background: var(--norlon-red); color: #fff; }
.norlon-pagination .dots { min-width: auto; }
.norlon-pagination .prev, .norlon-pagination .next { color: var(--norlon-ink); }
.norlon-pagination .disabled { opacity: 0.4; pointer-events: none; }

/* Single project */
.norlon-single__hero { width: 100%; max-width: var(--norlon-cw); margin: 40px auto 0; padding-inline: 24px; }
.norlon-single__hero img { width: 100%; height: auto; display: block; }
/* Project title. line-height 1 to match the other DIN titles — R2 proved 1.05 wrong
   on the identical card title (its pitch is exactly the font size). */
.norlon-single__title { font-family: var(--norlon-din); font-weight: 700; font-size: 50px; line-height: 1; color: var(--norlon-ink); margin: 0 0 24px; }
.norlon-single__metabar { display: flex; flex-wrap: wrap; gap: 40px; padding-block: 24px; border-top: var(--nr-divider-w, 2px) solid var(--norlon-hairline); border-bottom: var(--nr-divider-w, 2px) solid var(--norlon-hairline); margin-bottom: 32px; }
.norlon-single__metabar dt { font-family: var(--norlon-mont); font-weight: 800; font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--norlon-red); margin: 0 0 6px; }
.norlon-single__metabar dd { font-family: var(--norlon-din); font-weight: 700; font-size: 20px; color: var(--norlon-ink); margin: 0; }
.norlon-single__body { font-family: var(--norlon-body); font-size: 14px; line-height: 1.5; color: var(--norlon-ink); max-width: 760px; }
.norlon-single__body p { margin: 0 0 1em; }
/* Project scope (migrated "components" line items). */
.norlon-single__subhead { font-family: var(--norlon-din); font-weight: 700; font-size: 30px; line-height: 1; text-transform: uppercase; color: var(--norlon-ink); margin: 0 0 20px; }
.norlon-single__scope { max-width: 840px; }
.norlon-single__scopelist { margin: 0; padding: 0; list-style: none; }
.norlon-single__scopelist li { position: relative; font-family: var(--norlon-body); font-size: 14px; line-height: 1.5; color: var(--norlon-ink); padding: 0 0 12px 24px; }
.norlon-single__scopelist li::before { content: ""; position: absolute; left: 0; top: 8px; width: 8px; height: 8px; background: var(--norlon-red); }
/* Client testimonial. */
.norlon-single__quote { max-width: 900px; margin: 56px 0 0; padding-top: 40px; border-top: var(--nr-divider-w, 2px) solid var(--norlon-hairline); }
.norlon-single__quote-lead { font-family: var(--norlon-body); font-size: 14px; line-height: 1.5; color: var(--norlon-ink); margin: 0 0 22px; }
.norlon-single__quote blockquote { font-family: var(--norlon-din); font-weight: 600; font-size: 32px; line-height: 1.25; color: var(--norlon-ink); margin: 0 0 22px; }
.norlon-single__quote blockquote::before { content: "\201C"; }
.norlon-single__quote blockquote::after { content: "\201D"; }
.norlon-single__quote figcaption .n { display: block; font-family: var(--norlon-mont); font-weight: 800; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--norlon-ink); }
.norlon-single__quote figcaption .p { display: block; font-family: var(--norlon-mont); font-weight: 600; font-size: 12px; color: var(--norlon-red); margin-top: 5px; }
.norlon-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 40px; }
.norlon-gallery img { width: 100%; height: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; }

/* Responsive */
@media (max-width: 1024px) {
	.norlon-subhead { font-size: 26px; }
	.norlon-single__title { font-size: 34px; }
}
@media (max-width: 767px) {
	.norlon-filter, .norlon-grid { grid-template-columns: 1fr; }
	/* a single-column card is too narrow for three fixed meta columns */
	.norlon-card__meta { grid-template-columns: 1fr 1fr; column-gap: 24px; row-gap: 18px; }
	.norlon-gallery { grid-template-columns: 1fr 1fr; }
	.norlon-section { padding-block: 44px; }
}