/*
 * EC Our Projects — Editorial Yearbook
 *
 * Visual treatment for the home "Recent Work by Show" preview AND the
 * standalone /our-projects/ page. Both surfaces share the same per-show
 * row markup; modifiers tune what's visible (hero band, year markers,
 * sticky nav appear only on the standalone page).
 *
 * Palette uses the full EC logo system: navy (#04171A) + gold (#F9BE17)
 * + green (#39DBB0) + white + warm-white. CSS variables come from
 * prod/mu-plugins/ec/our-projects-styles.php → wp_add_inline_style().
 *
 * Typography: Fraunces (variable serif) for display, Plus Jakarta Sans
 * for body & eyebrow. Both load via Google Fonts in the mu-plugin.
 *
 * The .ec-our-projects parent prefix scopes every selector here so we
 * never bleed into OneUp/WPBakery component styles.
 */

/* =========================================================================
 *  ROOT WRAPPER + RESET
 * ========================================================================= */
.ec-our-projects {
	font-family: var(--ec-font-body);
	color: var(--ec-navy);
	background: var(--ec-white);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	position: relative;
}
.ec-our-projects *,
.ec-our-projects *::before,
.ec-our-projects *::after { box-sizing: border-box; }
.ec-our-projects img { max-width: 100%; height: auto; display: block; }
.ec-our-projects a { color: inherit; text-decoration: none; }

/* =========================================================================
 *  HERO BAND  —  standalone page only
 *  Dark navy with a faint mint grid texture; gold rule below.
 * ========================================================================= */
.ec-our-projects .ec-hero {
	position: relative;
	padding: 96px 24px 88px;
	background: var(--ec-navy);
	color: var(--ec-white);
	text-align: center;
	overflow: hidden;
	border-bottom: 1px solid rgba(255,255,255,0.06);
}
.ec-our-projects .ec-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(to right, rgba(57,219,176,0.08) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(57,219,176,0.05) 1px, transparent 1px);
	background-size: 80px 80px, 80px 80px;
	background-position: center;
	pointer-events: none;
	mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
	-webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
}
.ec-our-projects .ec-hero > * { position: relative; z-index: 1; }
.ec-our-projects .ec-hero-eyebrow {
	font-family: var(--ec-font-body);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--ec-gold-text);
	margin-bottom: 18px;
}
.ec-our-projects .ec-hero-title {
	font-family: var(--ec-font-display);
	font-weight: 700;
	font-size: clamp(40px, 7vw, 88px);
	line-height: 1.02;
	letter-spacing: -0.02em;
	color: var(--ec-white);
	margin: 0 auto 22px;
	max-width: 920px;
	font-variation-settings: "opsz" 144, "SOFT" 50;
}
.ec-our-projects .ec-hero-title em {
	font-style: italic;
	font-weight: 500;
	color: var(--ec-green-text);
	font-variation-settings: "opsz" 144, "SOFT" 100;
}
.ec-our-projects .ec-hero-sub {
	font-size: 17px;
	line-height: 1.5;
	max-width: 620px;
	margin: 0 auto;
	color: rgba(255,255,255,0.78);
}
.ec-our-projects .ec-hero-meta {
	display: flex;
	gap: 28px;
	justify-content: center;
	flex-wrap: wrap;
	margin-top: 40px;
	font-size: 13px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba(255,255,255,0.6);
}
.ec-our-projects .ec-hero-meta strong {
	display: block;
	font-family: var(--ec-font-display);
	font-size: 32px;
	font-weight: 700;
	color: var(--ec-green-text);
	letter-spacing: -0.01em;
	margin-bottom: 2px;
	text-transform: none;
}
.ec-our-projects .ec-hero::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 0;
	transform: translateX(-50%);
	width: 96px;
	height: 3px;
	background: var(--ec-gold);
}

/* =========================================================================
 *  CONTAINER
 *  Generous padding; sticky nav reserves a right gutter at ≥1024px.
 * ========================================================================= */
.ec-our-projects-inner {
	max-width: 1280px;
	margin: 0 auto;
	padding: 64px 24px 96px;
	position: relative;
}
.ec-our-projects[data-ec-mode="preview"] .ec-our-projects-inner {
	padding-top: 24px;
}

/* Reserve gutters at desktop for year marker (left) + sticky show-nav (right). */
@media ( min-width: 1280px ) {
	.ec-our-projects[data-ec-mode="full"] .ec-our-projects-inner {
		padding-left: 260px;
		padding-right: 260px;
	}
}
@media ( min-width: 1024px ) and ( max-width: 1279px ) {
	.ec-our-projects[data-ec-mode="full"] .ec-our-projects-inner {
		padding-left: 32px;
		padding-right: 240px;
	}
}

/* =========================================================================
 *  PREVIEW HEADER (home page only)
 *  Replaces the hero band; matches the existing 6940 "[vc_custom_heading]"
 *  pattern (eyebrow + animated h2).
 * ========================================================================= */
.ec-our-projects .ec-preview-header {
	margin: 24px 0 48px;
	text-align: center;
}
.ec-our-projects .ec-preview-eyebrow {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--ec-gold-text);
	margin-bottom: 12px;
}
.ec-our-projects .ec-preview-title {
	font-family: var(--ec-font-display);
	font-weight: 700;
	font-size: clamp(32px, 4.2vw, 52px);
	line-height: 1.06;
	letter-spacing: -0.02em;
	color: var(--ec-navy);
	margin: 0 auto;
	max-width: 760px;
	font-variation-settings: "opsz" 96;
}
.ec-our-projects .ec-preview-title em {
	font-style: italic;
	color: var(--ec-green-text);
	font-weight: 600;
}

/* =========================================================================
 *  SHOW ROW
 *  Each show = one <article> with eyebrow + display heading + sub + rule
 *  + photo grid. Year-marker numeral pinned in left margin (≥1280px only).
 * ========================================================================= */
.ec-our-projects .ec-show-row {
	position: relative;
	padding: 56px 0 64px;
}
.ec-our-projects .ec-show-row + .ec-show-row { border-top: 1px solid var(--ec-rule-dim); }

/* Warm-white tint every 3rd show for vertical rhythm */
.ec-our-projects .ec-show-row:nth-child(3n+1) {
	background: linear-gradient(180deg, transparent 0, transparent 6%, var(--ec-warm-white) 6%, var(--ec-warm-white) 94%, transparent 94%);
}

/* Year-marker numeral — large outline, color rotates by recency.
 * Pinned in the left gutter at desktop (≥1280px); hidden on mobile.
 * Sized to fit 4 chars at the chosen font + a 24px gap to the show title. */
.ec-our-projects .ec-year-marker {
	position: absolute;
	top: 56px;
	left: 0;
	width: 220px;
	font-family: var(--ec-font-display);
	font-weight: 900;
	font-size: 76px;
	line-height: 1;
	letter-spacing: -0.04em;
	color: transparent;
	-webkit-text-stroke: 1.5px var(--ec-rule-dim);
	text-stroke: 1.5px var(--ec-rule-dim);
	user-select: none;
	pointer-events: none;
	opacity: 0.9;
	text-align: right;
	font-variation-settings: "opsz" 96;
	overflow: hidden;
	white-space: nowrap;
}
@media ( max-width: 1279px ) {
	.ec-our-projects .ec-year-marker { display: none; }
}
/* Hide year markers in preview mode (home block) — they're a yearbook-page
 * decoration that only makes sense alongside the standalone hero band. */
.ec-our-projects[data-ec-mode="preview"] .ec-year-marker { display: none; }
@media ( min-width: 1280px ) {
	.ec-our-projects[data-ec-mode="full"] .ec-year-marker {
		/* Container has padding-left:240 reserving the rail; year-marker
		 * sits in that gutter via negative left + right-aligned text so
		 * the last digit lines up ~24px before the show-title's left edge. */
		left: -240px;
		width: 220px;
	}
}
.ec-our-projects .ec-show-row[data-year-rank="current"] .ec-year-marker {
	color: var(--ec-gold-text);
	-webkit-text-stroke: 0;
	opacity: 1;
}
.ec-our-projects .ec-show-row[data-year-rank="previous"] .ec-year-marker {
	color: var(--ec-green-text);
	-webkit-text-stroke: 0;
	opacity: 0.95;
}
.ec-our-projects .ec-show-row[data-year-rank="older"] .ec-year-marker {
	-webkit-text-stroke: 2px var(--ec-navy);
	opacity: 0.4;
}

/* Show header */
.ec-our-projects .ec-show-header { margin-bottom: 56px; max-width: 760px; }
.ec-our-projects .ec-eyebrow {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--ec-gold-text);
	margin-bottom: 14px;
}
.ec-our-projects .ec-show-title {
	font-family: var(--ec-font-display);
	font-weight: 700;
	font-size: clamp(38px, 5.5vw, 72px);
	line-height: 1.02;
	letter-spacing: -0.025em;
	color: var(--ec-navy);
	margin: 0 0 16px;
	font-variation-settings: "opsz" 128;
}
.ec-our-projects .ec-show-sub {
	font-size: 16px;
	line-height: 1.55;
	color: var(--ec-text-dim);
	margin: 0 0 28px;
	max-width: 620px;
}
.ec-our-projects .ec-show-sub a {
	color: var(--ec-green-text);
	border-bottom: 1px solid currentColor;
	padding-bottom: 1px;
	transition: color 160ms ease;
}
.ec-our-projects .ec-show-sub a:hover { color: var(--ec-navy); }
.ec-our-projects .ec-rule {
	width: 60px;
	height: 2px;
	background: var(--ec-gold);
	margin-top: 28px;
}

/* =========================================================================
 *  PHOTO GRID
 *  12-column on desktop. Modifiers reflect photo count.
 *
 *  --4 (hero + 2 medium + 1 thumb):   |  HERO  | M1 |
 *                                     |  HERO  | M2 |
 *                                     |     THUMB-WIDE       |
 *
 *  --3 (hero + 2 medium, no thumbs):  |  HERO  | M1 |
 *                                     |  HERO  | M2 |
 *
 *  --5+ (hero + 2 medium + 3+ thumbs)
 * ========================================================================= */
.ec-our-projects .ec-grid {
	display: grid;
	gap: 18px;
}
.ec-our-projects .ec-tile {
	position: relative;
	overflow: hidden;
	border-radius: 6px;
	background: var(--ec-warm-white);
	transition: transform 220ms cubic-bezier(0.22,0.61,0.36,1), box-shadow 220ms ease;
	cursor: pointer;
}
.ec-our-projects .ec-tile img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 600ms cubic-bezier(0.22,0.61,0.36,1), filter 280ms ease;
	will-change: transform;
}
.ec-our-projects .ec-tile::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 3px;
	background: var(--ec-green);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 320ms cubic-bezier(0.22,0.61,0.36,1);
	z-index: 1;
}
.ec-our-projects .ec-tile:hover {
	transform: translateY(-4px);
	box-shadow: 0 22px 48px -16px rgba(4,23,26,0.28);
}
.ec-our-projects .ec-tile:hover img { transform: scale(1.04); filter: brightness(1.04); }
.ec-our-projects .ec-tile:hover::after { transform: scaleX(1); }
.ec-our-projects .ec-tile:focus-visible {
	outline: 2px solid var(--ec-green);
	outline-offset: 4px;
}

/* =========================================================================
 *  Photo-count-specific grid layouts.
 *  Each grid uses explicit template areas so the hero and adjacent medium
 *  tiles share a common total height — no orphan empty space below shorter
 *  tiles. Aspect ratios are picked so the hero defines the row height and
 *  the medium tiles fill exactly half of it each.
 * ========================================================================= */

/* 1-photo grid (degenerate case) */
.ec-our-projects .ec-grid--1 {
	grid-template-columns: 1fr;
}
.ec-our-projects .ec-grid--1 .ec-tile--hero {
	aspect-ratio: 16 / 9;
}

/* 2–3 photo grid: hero on left + medium tile(s) stacked on right.
 * Hero 8/12 cols, mediums 4/12 cols. Aspect ratios picked so that
 * two stacked medium heights + the 18px gap between them exactly equal
 * the hero height. At 8:4 column ratio (≈2:1), hero 3:2 → each medium 8:5.
 * Math: hero_h = hero_w × 2/3 = (2·m_w) × 2/3 ≈ 1.33·m_w
 *       2·m_h + gap ≈ hero_h → m_h ≈ 0.66·m_w → aspect 3:2 close; 8:5 looks better. */
.ec-our-projects .ec-grid--3 {
	grid-template-columns: 8fr 4fr;
	grid-template-areas:
		"hero m1"
		"hero m2";
}
.ec-our-projects .ec-grid--3 .ec-tile--hero {
	grid-area: hero;
	aspect-ratio: 3 / 2;
}
.ec-our-projects .ec-grid--3 .ec-tile--medium {
	aspect-ratio: 8 / 5;
}
.ec-our-projects .ec-grid--3 .ec-tile--medium:nth-of-type(2) { grid-area: m1; }
.ec-our-projects .ec-grid--3 .ec-tile--medium:nth-of-type(3) { grid-area: m2; }

/* 4–6 photo grid: hero + 2 medium stacked + 1 wide thumb row beneath. */
.ec-our-projects .ec-grid--4 {
	grid-template-columns: 8fr 4fr;
	grid-template-areas:
		"hero m1"
		"hero m2"
		"wide wide";
}
.ec-our-projects .ec-grid--4 .ec-tile--hero {
	grid-area: hero;
	aspect-ratio: 3 / 2;
}
.ec-our-projects .ec-grid--4 .ec-tile--medium {
	aspect-ratio: 8 / 5;
}
.ec-our-projects .ec-grid--4 .ec-tile--medium:nth-of-type(2) { grid-area: m1; }
.ec-our-projects .ec-grid--4 .ec-tile--medium:nth-of-type(3) { grid-area: m2; }
.ec-our-projects .ec-grid--4 .ec-tile--thumb {
	grid-area: wide;
	aspect-ratio: 21 / 7;
}

/* Case-study badge — green chip in top-right of tile */
.ec-our-projects .ec-tile-badge {
	position: absolute;
	top: 14px;
	right: 14px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px 6px 14px;
	background: var(--ec-green);
	color: var(--ec-navy);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	border-radius: 999px;
	box-shadow: 0 6px 20px -6px rgba(4,23,26,0.45);
	z-index: 2;
	transform: translateY(-3px) translateZ(0);
	opacity: 0;
	transition: opacity 260ms ease, transform 260ms ease;
}
.ec-our-projects .ec-tile:hover .ec-tile-badge,
.ec-our-projects .ec-tile:focus-visible .ec-tile-badge {
	opacity: 1;
	transform: translateY(0);
}
.ec-our-projects .ec-tile--has-cta .ec-tile-badge {
	opacity: 1;
	transform: translateY(0);
}
.ec-our-projects .ec-tile-badge svg { width: 10px; height: 10px; }

/* =========================================================================
 *  STICKY SHOW-NAV RAIL  —  standalone page only, desktop ≥1024px
 * ========================================================================= */
.ec-our-projects .ec-show-nav {
	display: none; /* hidden on mobile + on preview mode */
}
@media ( min-width: 1024px ) {
	.ec-our-projects[data-ec-mode="full"] .ec-show-nav {
		display: block;
		position: fixed;
		top: 140px;
		right: max(24px, calc((100vw - 1280px) / 2 + 32px));
		width: 210px;
		max-height: calc(100vh - 200px);
		overflow-y: auto;
		padding: 18px 14px;
		z-index: 9;
		font-size: 13px;
		background: rgba(255,255,255,0.85);
		backdrop-filter: blur(12px) saturate(120%);
		-webkit-backdrop-filter: blur(12px) saturate(120%);
		border-radius: 8px;
		border: 1px solid rgba(4,23,26,0.06);
		box-shadow: 0 10px 32px -10px rgba(4,23,26,0.18);
		opacity: 0;
		transform: translateX(20px);
		pointer-events: none;
		transition: opacity 280ms ease, transform 280ms ease;
	}
	.ec-our-projects[data-ec-mode="full"] .ec-show-nav.is-revealed {
		opacity: 1;
		transform: translateX(0);
		pointer-events: auto;
	}
}
.ec-our-projects .ec-show-nav-year {
	margin-bottom: 22px;
	padding-left: 14px;
	border-left: 1px solid var(--ec-rule-dim);
}
.ec-our-projects .ec-show-nav-year-label {
	font-family: var(--ec-font-display);
	font-weight: 700;
	font-size: 14px;
	color: var(--ec-text-dim);
	margin-bottom: 8px;
	letter-spacing: 0.04em;
}
.ec-our-projects .ec-show-nav-year ul {
	list-style: none;
	padding: 0;
	margin: 0;
}
.ec-our-projects .ec-show-nav-year li {
	margin-bottom: 2px;
}
.ec-our-projects .ec-show-nav-year a {
	position: relative;
	display: block;
	padding: 6px 0 6px 16px;
	font-size: 13px;
	color: var(--ec-text-dim);
	transition: color 180ms ease, transform 180ms ease;
}
.ec-our-projects .ec-show-nav-year a::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: transparent;
	border: 1px solid var(--ec-rule-dim);
	transform: translateY(-50%);
	transition: background 220ms ease, border-color 220ms ease, transform 220ms ease;
}
.ec-our-projects .ec-show-nav-year a:hover {
	color: var(--ec-navy);
	transform: translateX(2px);
}
.ec-our-projects .ec-show-nav-year a.is-active {
	color: var(--ec-navy);
	font-weight: 600;
}
.ec-our-projects .ec-show-nav-year a.is-active::before {
	background: var(--ec-green);
	border-color: var(--ec-green-text);
	transform: translateY(-50%) scale(1.4);
	box-shadow: 0 0 0 4px var(--ec-green-tint);
}

/* =========================================================================
 *  CLOSING CTA
 * ========================================================================= */
.ec-our-projects .ec-closing {
	margin-top: 80px;
	padding: 64px 32px;
	background: var(--ec-navy);
	color: var(--ec-white);
	border-radius: 6px;
	text-align: center;
	position: relative;
	overflow: hidden;
}
.ec-our-projects .ec-closing::before {
	content: "";
	position: absolute;
	inset: -50% -10% auto auto;
	width: 480px;
	height: 480px;
	background: radial-gradient(circle, var(--ec-green-tint), transparent 60%);
	pointer-events: none;
}
.ec-our-projects .ec-closing > * { position: relative; }
.ec-our-projects .ec-closing-eyebrow {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--ec-green-text);
	margin-bottom: 14px;
}
.ec-our-projects .ec-closing .ec-closing-title,
.ec-our-projects h2.ec-closing-title {
	font-family: var(--ec-font-display) !important;
	font-weight: 700;
	font-size: clamp(28px, 4.2vw, 44px) !important;
	line-height: 1.1;
	letter-spacing: -0.02em;
	max-width: 720px;
	margin: 0 auto 32px;
	color: var(--ec-white) !important;
}
.ec-our-projects .ec-closing .ec-closing-title em {
	font-style: italic;
	color: var(--ec-green-text) !important;
	font-weight: 500;
}
.ec-our-projects .ec-closing .ec-cta-btn,
.ec-our-projects a.ec-cta-btn {
	display: inline-flex !important;
	align-items: center;
	gap: 10px;
	padding: 16px 28px !important;
	background: var(--ec-gold) !important;
	color: var(--ec-navy) !important;
	font-family: var(--ec-font-body) !important;
	font-size: 14px !important;
	font-weight: 700 !important;
	letter-spacing: 0.08em !important;
	text-transform: uppercase;
	border-radius: 999px;
	text-decoration: none !important;
	line-height: 1 !important;
	transition: transform 200ms ease, background 200ms ease;
}
.ec-our-projects .ec-cta-btn::after {
	content: "→";
	transition: transform 220ms ease;
	font-weight: 400;
}
.ec-our-projects .ec-cta-btn:hover {
	background: var(--ec-green) !important;
	transform: translateY(-2px);
}
.ec-our-projects .ec-cta-btn:hover::after { transform: translateX(4px); }

/* =========================================================================
 *  LIGHTBOX
 * ========================================================================= */
.ec-lightbox {
	position: fixed;
	inset: 0;
	background: rgba(4,23,26,0.94);
	display: none;
	align-items: center;
	justify-content: center;
	z-index: 99999;
	padding: 60px 80px;
	cursor: zoom-out;
}
.ec-lightbox.is-open { display: flex; }
.ec-lightbox img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	box-shadow: 0 40px 120px -30px rgba(57,219,176,0.30);
}
.ec-lightbox-close,
.ec-lightbox-prev,
.ec-lightbox-next {
	position: absolute;
	background: transparent;
	border: 1px solid rgba(255,255,255,0.18);
	color: var(--ec-white);
	font-size: 24px;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	cursor: pointer;
	transition: background 180ms ease, border-color 180ms ease;
}
.ec-lightbox-close { top: 24px; right: 24px; font-size: 28px; }
.ec-lightbox-prev  { left: 24px; top: 50%; transform: translateY(-50%); }
.ec-lightbox-next  { right: 24px; top: 50%; transform: translateY(-50%); }
.ec-lightbox-close:hover,
.ec-lightbox-prev:hover,
.ec-lightbox-next:hover {
	background: var(--ec-green);
	border-color: var(--ec-green-text);
	color: var(--ec-navy);
}

/* =========================================================================
 *  RESPONSIVE  —  collapse to single-column gracefully
 * ========================================================================= */
@media ( max-width: 1023px ) {
	.ec-our-projects .ec-year-marker { display: none; }
	.ec-our-projects-inner { padding-left: 20px; padding-right: 20px; }
}
@media ( max-width: 768px ) {
	.ec-our-projects .ec-show-row { padding: 40px 0 48px; }
	.ec-our-projects .ec-show-header { margin-bottom: 32px; }
	.ec-our-projects .ec-grid { gap: 12px; }
	/* Reset grid template — desktop named-area rules (.ec-grid--N .ec-tile--X)
	 * have specificity 0,3,0, beating the generic tile override 0,2,0 below.
	 * Without resetting grid-template-areas + grid-area, multiple tiles that
	 * share a named area (e.g. both thumb tiles in grid-4 get grid-area:wide)
	 * stack at the exact same grid cell and their badges pixel-overlap. */
	.ec-our-projects .ec-grid--3,
	.ec-our-projects .ec-grid--4 {
		grid-template-columns: 1fr;
		grid-template-areas: none;
	}
	/* General reset (specificity 0,3,0) */
	.ec-our-projects .ec-grid--3 .ec-tile--hero,
	.ec-our-projects .ec-grid--3 .ec-tile--medium,
	.ec-our-projects .ec-grid--4 .ec-tile--hero,
	.ec-our-projects .ec-grid--4 .ec-tile--medium,
	.ec-our-projects .ec-grid--4 .ec-tile--thumb {
		grid-area: auto;
		grid-column: auto;
		grid-row: auto;
		aspect-ratio: 4 / 3;
	}
	/* nth-of-type overrides (specificity 0,4,0) — must match the desktop
	 * nth-of-type selectors to win; general .ec-tile--medium above doesn't. */
	.ec-our-projects .ec-grid--3 .ec-tile--medium:nth-of-type(2),
	.ec-our-projects .ec-grid--3 .ec-tile--medium:nth-of-type(3),
	.ec-our-projects .ec-grid--4 .ec-tile--medium:nth-of-type(2),
	.ec-our-projects .ec-grid--4 .ec-tile--medium:nth-of-type(3) {
		grid-area: auto;
		grid-column: auto;
		grid-row: auto;
	}
	.ec-our-projects .ec-tile--hero,
	.ec-our-projects .ec-tile--medium,
	.ec-our-projects .ec-tile--thumb,
	.ec-our-projects .ec-tile--wide {
		grid-column: span 12;
		grid-row: auto;
		aspect-ratio: 4 / 3;
	}
	.ec-our-projects .ec-hero { padding: 56px 20px 48px; }
	.ec-our-projects .ec-tile-badge { font-size: 10px; padding: 4px 10px; }
}

/* =========================================================================
 *  GRID — extra thumb tiles in grid-4/grid-3 desktop stacking fix
 *
 *  grid-template-areas "wide wide" has ONE cell named "wide". When a show
 *  has 2+ .ec-tile--thumb entries, CSS grid stacks them all on that one
 *  cell (badge pixel-overlap). The ≤768px responsive block already resets
 *  grid-area to auto for all tiles; this rule does the same for the 2nd+
 *  thumb tile at desktop so it auto-places into a new row spanning the
 *  full grid width instead of stacking in the "wide" cell.
 * ========================================================================= */
.ec-our-projects .ec-grid--4 .ec-tile--thumb ~ .ec-tile--thumb,
.ec-our-projects .ec-grid--3 .ec-tile--thumb ~ .ec-tile--thumb {
	grid-area: auto;
	grid-column: span 2;
	aspect-ratio: 4 / 3;
}

/* =========================================================================
 *  PRINT — readable monochrome
 * ========================================================================= */
@media print {
	.ec-our-projects { color: #000; background: #fff; }
	.ec-our-projects .ec-show-nav,
	.ec-our-projects .ec-year-marker,
	.ec-our-projects .ec-tile-badge { display: none; }
	.ec-our-projects .ec-hero { background: #fff; color: #000; }
	.ec-our-projects .ec-tile { break-inside: avoid; }
}