/* ==========================================================================
   Annex Roofing — Exterior Single presentation layer
   Concept: ELEVATION  ·  v0.1
   Independent of project-single.css. Prefix .ex- only; nothing here can reach
   a roofing page and nothing there reaches this one.
   Tokens come from the theme's Design System v2 (fallbacks kept for safety).
   ========================================================================== */

.annex-project--exterior {
	--ex-navy:       var(--annex-navy, #062452);
	--ex-navy-deep:  var(--annex-navy-deep, #071B3D);
	--ex-red:        var(--annex-red, #E52B24);
	--ex-red-dark:   var(--annex-red-dark, #C9231E);
	--ex-white:      var(--annex-white, #FFFFFF);
	--ex-light:      var(--annex-light, #F6F8FA);
	--ex-text:       var(--annex-text, #0A2148);
	--ex-text-2:     var(--annex-text-secondary, #5F6F84);
	--ex-text-light: var(--annex-text-light, #B7C1D0);

	--ex-max: 1280px;
	--ex-pad: 32px;
	--ex-h: 560px;      /* hero bay height, wide cover   */
	--ex-modh: 780px;   /* gallery row height ceiling    */
	--ex-gap: 16px;

	background: var(--ex-white);
	color: var(--ex-text);
	font-family: "Inter Tight", var(--annex-font, system-ui), sans-serif;
}

.annex-project--exterior .ex-wrap {
	max-width: var(--ex-max);
	margin: 0 auto;
	padding: 0 var(--ex-pad);
}

.annex-project--exterior img { max-width: 100%; }

/* --------------------------------------------------------------------------
   1. ELEVATION HERO — vertical bays
   -------------------------------------------------------------------------- */

.ex-hero {
	background: var(--ex-navy-deep);
	background-image: linear-gradient(200deg, var(--ex-navy) 0%, var(--ex-navy-deep) 72%);
	color: var(--ex-white);
	/* The theme's fixed header is cleared by body{padding-top:var(--ph-h)}. */
	padding: 56px 0 64px;
}

.ex-hero__grid {
	max-width: var(--ex-max);
	margin: 0 auto;
	padding: 0 var(--ex-pad);
	display: grid;
	gap: 44px;
	align-items: stretch;
}

.ex-hero--wide .ex-hero__grid { grid-template-columns: 36% 1fr; }
/* A tall cover keeps its own run: the bay is exactly as wide as the
   photograph's proportions ask for, so a facade shot is never cropped. */
/*
 * A tall cover cannot be widened without being made taller — its proportions
 * are fixed and it is never cropped. So the composition narrows instead: the
 * whole hero runs on a tighter measure, which raises the photograph's share of
 * the bay without adding a pixel of height.
 */
.ex-hero--tall { --ex-h: 600px; padding: 44px 0 48px; }
/* The composition keeps the page's left edge and gives back the width it does
   not need as a trailing navy bay, so the hero stays aligned with every other
   section while the photograph's share of the occupied width goes up. */
.ex-hero--tall .ex-hero__grid {
	gap: 40px;
	grid-template-columns: 1fr calc(var(--ex-h) * var(--r, 0.5)) minmax(0, 0.34fr);
}
/* The plumb line continues down the edge of the image bay, so the photograph
   reads as a bay in an elevation rather than a picture placed on navy. */
.ex-hero--tall .ex-hero__media::before {
	content: "";
	position: absolute;
	left: -20px;
	top: 0;
	bottom: 0;
	width: 3px;
	background: var(--ex-red);
}
/* One fact and no description: tighten further so the panel reads as a
   complete minimal record rather than a page missing its content. */
.ex-hero:has(.ex-rail--1) { --ex-h: 560px; }
.ex-hero:has(.ex-rail--1) .ex-hero__panel { gap: 26px; }
.ex-hero--nocover .ex-hero__grid { grid-template-columns: minmax(0, 720px); }

.ex-hero__panel {
	display: flex;
	flex-direction: column;
	/* Centred, not spread: with two facts and no description the panel would
	   otherwise hold a few hundred pixels of dead navy. The data block stays
	   compact against the full run of the cover. */
	justify-content: center;
	gap: 34px;
	min-height: var(--ex-h);
}

.ex-hero__kicker {
	position: relative;
	margin: 0 0 20px;
	padding-left: 18px;
	font-size: 13px;
	font-weight: 500;
	color: var(--ex-text-light);
}
/* The plumb line: red runs vertically on this page, never horizontally. */
.ex-hero__kicker::before {
	content: "";
	position: absolute;
	left: 0;
	top: 1px;
	bottom: 1px;
	width: 3px;
	background: var(--ex-red);
}

.ex-hero__title {
	margin: 0;
	font-size: clamp(38px, 4.2vw, 62px);
	line-height: .98;
	font-weight: 600;
	letter-spacing: -.035em;
	color: var(--ex-white);
}

.ex-hero__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 16px;
	margin: 20px 0 0;
	font-size: 16px;
	color: rgba(255, 255, 255, .82);
}
.ex-hero__meta span + span::before {
	content: "";
	display: inline-block;
	width: 3px;
	height: 12px;
	background: var(--ex-red);
	margin-right: 16px;
	vertical-align: -1px;
}

.ex-hero__summary {
	margin: 18px 0 0;
	max-width: 44ch;
	font-size: 16px;
	line-height: 1.55;
	color: rgba(255, 255, 255, .72);
}

.ex-hero__foot { display: flex; flex-direction: column; gap: 26px; }

.ex-hero__action {
	align-self: flex-start;
	font-size: 16px;
	font-weight: 600;
	color: var(--ex-white);
	text-decoration: none;
	padding-bottom: 5px;
	border-bottom: 2px solid var(--ex-red);
}
.ex-hero__action:hover { color: var(--ex-red); }

.ex-hero__media {
	position: relative;
	margin: 0;
	line-height: 0;
}
.ex-hero__img {
	display: block;
	width: 100%;
	height: var(--ex-h);
	object-fit: cover;
	object-position: var(--focus, 50% 50%);
}

/* --------------------------------------------------------------------------
   2. SPEC RAIL — inside the navy panel. Not a card, not an overlap.
   -------------------------------------------------------------------------- */

.ex-rail {
	display: flex;
	flex-wrap: wrap;
	gap: 22px 0;
	margin: 0;
	padding-top: 20px;
	border-top: 1px solid rgba(255, 255, 255, .18);
}
.ex-rail__cell {
	padding-right: 26px;
	margin-right: 26px;
	border-right: 1px solid rgba(255, 255, 255, .16);
}
.ex-rail__cell:last-child { padding-right: 0; margin-right: 0; border-right: 0; }

.ex-rail dt {
	margin: 0 0 7px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .55);
}
.ex-rail dd {
	margin: 0;
	font-size: 19px;
	font-weight: 600;
	letter-spacing: -.02em;
	color: var(--ex-white);
}
.ex-rail--4 dd,
.ex-rail--5 dd { font-size: 17px; }

/* --------------------------------------------------------------------------
   3. THE ENVELOPE — bays, bands and frames
   -------------------------------------------------------------------------- */

.ex-envelope {
	background: var(--ex-light);
	padding: 52px 0 56px;
}

.ex-envelope__title {
	position: relative;
	margin: 0 0 16px;
	padding-left: 18px;
	font-size: clamp(22px, 2.3vw, 30px);
	font-weight: 600;
	letter-spacing: -.025em;
	color: var(--ex-text);
}
.ex-envelope__title::before {
	content: "";
	position: absolute;
	left: 0;
	top: 4px;
	bottom: 4px;
	width: 3px;
	background: var(--ex-red);
}

.ex-mod + .ex-mod { margin-top: 14px; }

.ex-mod__inner {
	display: flex;
	gap: var(--ex-gap);
	align-items: stretch;
	/* A row takes the width its own proportions ask for, never more. */
	max-width: calc(var(--ex-modh) * var(--sum, 2) + var(--ex-gap));
	margin-inline: 0;
}

.ex-cell {
	margin: 0;
	flex-basis: 0;
	flex-shrink: 1;
	min-width: 0;
	line-height: 0;
}
.ex-shot {
	display: block;
	width: 100%;
	aspect-ratio: var(--r, 1.5);
	object-fit: cover;
}

/*
 * Two wide photographs in a row: an even split reads as a stock two-column
 * gallery. They are split 62/38 instead and share one bay height, which gives
 * a landscape-heavy project the same elevation rhythm as a facade one. Wide
 * images may be cropped; nothing tall ever is.
 */
.ex-mod--mstack .ex-mod__inner { height: clamp(360px, 34vw, 460px); }
.ex-mod--mstack .ex-cell { position: relative; }
.ex-mod--mstack .ex-cell:last-child { max-width: 38%; }
.ex-mod--mstack .ex-shot {
	position: absolute;
	inset: 0;
	aspect-ratio: auto;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* A single wide photograph spans the content width and is capped in height. */
.ex-mod--band .ex-mod__inner { max-width: none; }
.ex-mod--band .ex-shot {
	aspect-ratio: auto;
	height: clamp(360px, 36vw, 500px);
}

/* Navy frame — a module narrower than the content width would sit in a dead
   light field, so it is framed. At most one per page; the engine decides. */
.ex-mod--frame {
	width: min(100%, calc(var(--ex-modh) * var(--sum, 1) + var(--ex-gap) + 48px));
	/* Left-aligned, not centred: the frame shares its edge with every band
	   above and below it, which is what makes the sequence read as one wall. */
	margin: 20px 0;
	padding: 24px;
	background: var(--ex-navy);
}
.ex-mod--frame .ex-mod__inner { max-width: 100%; }

/* --------------------------------------------------------------------------
   4. MATERIAL & WORK (only when the data exists)
   -------------------------------------------------------------------------- */

.ex-story { background: var(--ex-white); padding: 64px 0 68px; }
.ex-story__grid { display: grid; grid-template-columns: 3fr 9fr; gap: 44px; }

.ex-story__rail h2 {
	position: relative;
	margin: 0;
	padding-left: 18px;
	font-size: 21px;
	font-weight: 600;
	letter-spacing: -.02em;
}
.ex-story__rail h2::before {
	content: "";
	position: absolute;
	left: 0;
	top: 3px;
	bottom: 3px;
	width: 3px;
	background: var(--ex-red);
}
.ex-story__body { max-width: 74ch; }

.ex-transition {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 26px 44px;
	margin: 0 0 36px;
	padding: 28px 30px;
	background: var(--ex-navy);
	color: var(--ex-white);
}
.ex-transition__side dt {
	font-size: 11px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--ex-text-light);
	margin-bottom: 8px;
}
.ex-transition__side dd {
	margin: 0;
	font-size: 19px;
	font-weight: 600;
	letter-spacing: -.02em;
}
.ex-transition__side--new { position: relative; padding-left: 22px; }
.ex-transition__side--new::before {
	content: "";
	position: absolute;
	left: 0;
	top: 2px;
	bottom: 2px;
	width: 3px;
	background: var(--ex-red);
}

.ex-story__block + .ex-story__block { margin-top: 30px; }
.ex-story__block h3 {
	margin: 0 0 10px;
	padding-left: 16px;
	border-left: 3px solid var(--ex-red);
	font-size: 17px;
	font-weight: 600;
}
.ex-story__block p {
	margin: 0;
	font-size: 17px;
	line-height: 1.6;
	color: var(--ex-text-2);
}

/* --------------------------------------------------------------------------
   5. NEXT EXTERIOR PROJECT — a narrow vertical bay, then the copy
   -------------------------------------------------------------------------- */

.ex-next { background: var(--ex-light); }
.ex-next__link {
	display: grid;
	grid-template-columns: 32% 1fr;
	align-items: stretch;
	min-height: 296px;
	text-decoration: none;
	color: inherit;
}
.ex-next__media { position: relative; overflow: hidden; }
.ex-next__img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .4s ease;
}
.ex-next__link:hover .ex-next__img { transform: scale(1.03); }

/*
 * A tall next cover keeps its own run inside a navy bay instead of being
 * cropped into a wide strip. The bay is wider than the photograph on purpose:
 * that margin of navy is the frame, and it is what makes the transition read
 * as the next elevation rather than a thumbnail.
 */
.ex-next--tall .ex-next__link { grid-template-columns: 20% 1fr; }
.ex-next--tall .ex-next__media { background: var(--ex-navy); }
.ex-next--tall .ex-next__img {
	position: absolute;
	left: 50%;
	top: 0;
	bottom: 0;
	transform: translateX(-50%);
	width: auto;
	height: 100%;
	object-fit: contain;
}
.ex-next--tall .ex-next__link:hover .ex-next__img { transform: translateX(-50%) scale(1.03); }
.ex-next--tall .ex-next__body { padding-left: 48px; }

.ex-next__body {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 40px 56px;
}
.ex-next__kicker {
	position: relative;
	margin: 0 0 14px;
	padding-left: 16px;
	font-size: 13px;
	font-weight: 500;
	color: var(--ex-text-2);
}
.ex-next__kicker::before {
	content: "";
	position: absolute;
	left: 0;
	top: 1px;
	bottom: 1px;
	width: 3px;
	background: var(--ex-red);
}
.ex-next__title {
	margin: 0;
	font-size: clamp(30px, 3.2vw, 46px);
	font-weight: 600;
	letter-spacing: -.03em;
	line-height: 1.04;
}
.ex-next__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 16px;
	margin: 12px 0 0;
	font-size: 17px;
	color: var(--ex-text-2);
}
.ex-next__meta span + span::before {
	content: "";
	display: inline-block;
	width: 3px;
	height: 12px;
	background: var(--ex-red);
	margin-right: 16px;
	vertical-align: -1px;
}
.ex-next__cue {
	display: block;
	width: 64px;
	height: 4px;
	background: var(--ex-red);
	margin-top: 22px;
	transition: width .3s ease;
}
.ex-next__link:hover .ex-next__cue { width: 92px; }

/* --------------------------------------------------------------------------
   6. FINAL CTA
   -------------------------------------------------------------------------- */

.ex-cta {
	background: var(--ex-navy-deep);
	color: var(--ex-white);
	padding: 72px 0 80px;
}
.ex-cta__grid {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 34px;
}
.ex-cta__title {
	margin: 0;
	max-width: 17ch;
	font-size: clamp(30px, 3.4vw, 46px);
	font-weight: 600;
	letter-spacing: -.03em;
	line-height: 1.06;
}
.ex-cta__actions { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }
.ex-btn--red {
	display: inline-block;
	padding: 17px 34px;
	background: var(--ex-red-dark);
	color: var(--ex-white);
	font-size: 16px;
	font-weight: 600;
	text-decoration: none;
}
.ex-btn--red:hover { background: var(--ex-red); }
.ex-cta__phone {
	color: var(--ex-white);
	font-size: 16px;
	font-weight: 600;
	text-decoration: none;
	border-bottom: 2px solid var(--ex-red);
	padding-bottom: 4px;
}

.annex-project--exterior a:focus-visible {
	outline: 3px solid var(--ex-red);
	outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   7. TABLET
   -------------------------------------------------------------------------- */

@media (max-width: 1080px) {
	.annex-project--exterior { --ex-h: 520px; --ex-modh: 600px; }
	.ex-hero--wide .ex-hero__grid { grid-template-columns: 42% 1fr; gap: 32px; }
	.ex-story__grid { grid-template-columns: 1fr; gap: 24px; }
	.ex-next__body { padding: 34px 32px; }
}

/* --------------------------------------------------------------------------
   8. MOBILE — a separate composition, not a stacked desktop
   -------------------------------------------------------------------------- */

@media (max-width: 760px) {
	.annex-project--exterior {
		--ex-pad: 18px;
		--ex-modh: 420px;
		--ex-gap: 8px;
	}

	.ex-hero,
	.ex-hero--tall { padding: 30px 0 34px; }
	.ex-hero__grid,
	.ex-hero--wide .ex-hero__grid,
	.ex-hero--tall .ex-hero__grid,
	.ex-hero--nocover .ex-hero__grid {
		max-width: none;
		display: flex;
		flex-direction: column;
		gap: 22px;
		grid-template-columns: none;
	}
	/* The cover moves up between the title and the record, so the hero is one
	   compact block instead of a screen of copy followed by a photograph. */
	.ex-hero__panel { display: contents; }
	.ex-hero__head { order: 1; }
	.ex-hero__media { order: 2; }
	.ex-hero__foot { order: 3; gap: 20px; }
	.ex-hero--tall .ex-hero__media::before { display: none; }
	.ex-hero__title { font-size: clamp(34px, 10vw, 46px); }

	/* A wide cover runs to the edges; a tall one keeps its run and is
	   centred, with navy either side rather than a crop. */
	.ex-hero--wide .ex-hero__media { margin-inline: calc(-1 * var(--ex-pad)); }
	.ex-hero--wide .ex-hero__img { height: clamp(200px, 48vw, 250px); }
	.ex-hero--tall .ex-hero__media { display: flex; justify-content: center; }
	.ex-hero--tall .ex-hero__img { width: 66%; height: auto; max-height: 380px; object-fit: contain; }

	.ex-rail { gap: 18px 0; }
	.ex-rail__cell { width: 50%; padding-right: 16px; margin-right: 0; border-right: 0; }
	.ex-rail__cell:nth-child(odd) { border-right: 1px solid rgba(255, 255, 255, .16); }
	.ex-rail dd,
	.ex-rail--4 dd,
	.ex-rail--5 dd { font-size: 17px; }

	.ex-envelope { padding: 34px 0 40px; }
	.ex-envelope__title { margin-bottom: 12px; }
	.ex-mod + .ex-mod { margin-top: 8px; }
	/* Every module shares the same edges so the sequence reads as one wall. */
	.ex-mod--row,
	.ex-mod--band,
	.ex-mod--bay { margin-inline: calc(-1 * var(--ex-pad)); }
	.ex-mod__inner { max-width: none; }
	.ex-mod--band .ex-shot { height: clamp(210px, 52vw, 270px); }
	/* Two wide photographs stack rather than shrink to a strip. */
	.ex-mod--mstack .ex-mod__inner { flex-direction: column; height: auto; }
	.ex-mod--mstack .ex-cell { width: 100%; flex-basis: auto; max-width: none; position: static; }
	.ex-mod--mstack .ex-shot { position: static; aspect-ratio: var(--r, 1.5); height: auto; }

	/* A tall photograph beside a wide one would come out a sliver at its
	   natural share, so on a phone they split the row evenly: the tall image
	   keeps its exact proportions and sets the height, the wide one fills
	   what is left. Scoped with :has() so all-wide and all-tall rows keep the
	   proportional behaviour. */
	/* Capping the wide cell, rather than fighting the inline flex-grow, is
	   what actually hands the space to the tall one. */
	.ex-mod--row .ex-mod__inner:has(.ex-cell--tall, .ex-cell--slim) .ex-cell--wide,
	.ex-mod--row .ex-mod__inner:has(.ex-cell--tall, .ex-cell--slim) .ex-cell--square {
		position: relative;
		max-width: 50%;
	}
	.ex-mod--row .ex-mod__inner:has(.ex-cell--tall, .ex-cell--slim) .ex-cell--wide .ex-shot,
	.ex-mod--row .ex-mod__inner:has(.ex-cell--tall, .ex-cell--slim) .ex-cell--square .ex-shot {
		position: absolute;
		inset: 0;
		aspect-ratio: auto;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
	.ex-mod--frame {
		width: auto;
		margin: 12px 0;
		padding: 14px;
	}

	.ex-story { padding: 40px 0 44px; }
	.ex-transition { grid-template-columns: 1fr; gap: 18px; padding: 22px 20px; }
	.ex-transition__side--new { padding-left: 0; padding-top: 14px; }
	.ex-transition__side--new::before { left: 0; top: 0; bottom: auto; width: 26px; height: 3px; }

	.ex-next__link,
	.ex-next--tall .ex-next__link { grid-template-columns: 1fr; min-height: 0; }
	.ex-next--tall .ex-next__body { padding-left: var(--ex-pad); }
	.ex-next--tall .ex-next__img { position: static; transform: none; width: 100%; height: 100%; object-fit: cover; }
	.ex-next__media { position: static; aspect-ratio: 16 / 9; }
	.ex-next__img { position: static; }
	.ex-next__body { padding: 26px var(--ex-pad) 32px; }

	.ex-cta { padding: 46px 0 52px; }
	.ex-cta__grid { flex-direction: column; align-items: flex-start; gap: 24px; }
	.ex-cta__actions { flex-direction: column; align-items: stretch; gap: 18px; width: 100%; }
	.ex-btn--red { text-align: center; }
	.ex-cta__phone { align-self: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
	.annex-project--exterior * { transition: none !important; }
}