/* Homepage project tiles: tinted background + left accent bar. */
.eg-project-tile {
	border-radius: 12px;
	padding: 1rem 1.1rem;
	border-left: 4px solid transparent;
	border-radius: 0 12px 12px 0;
	height: 100%;
}

.eg-project-tile.eg-color-0 { background: #EEF2F8; border-left-color: #4A6FA5; }
.eg-project-tile.eg-color-1 { background: #EEF3EC; border-left-color: #7A9E7E; }
.eg-project-tile.eg-color-2 { background: #FBEEF1; border-left-color: #D98A9C; }
.eg-project-tile.eg-color-3 { background: #FBF1E8; border-left-color: #E2A26B; }
.eg-project-tile.eg-color-4 { background: #F1EEF7; border-left-color: #9585B5; }

.eg-project-tile .eg-tile-years {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 0.75rem;
}
.eg-color-0 .eg-tile-years { color: #185FA5; }
.eg-color-1 .eg-tile-years { color: #4E6B52; }
.eg-color-2 .eg-tile-years { color: #A85670; }
.eg-color-3 .eg-tile-years { color: #B06A2E; }
.eg-color-4 .eg-tile-years { color: #5F4D82; }

/* Single project page heading: same 5 colors, applied to the heading text
   and a thin underline so the page visually continues the tile it came from. */
.eg-project-heading {
	border-bottom: 3px solid transparent;
	padding-bottom: 0.5rem;
	margin-bottom: 1.5rem;
}
.eg-project-heading.eg-color-0 h1, .eg-project-heading.eg-color-0 { border-color: #4A6FA5; }
.eg-project-heading.eg-color-0 h1 { color: #185FA5; }
.eg-project-heading.eg-color-1 h1, .eg-project-heading.eg-color-1 { border-color: #7A9E7E; }
.eg-project-heading.eg-color-1 h1 { color: #4E6B52; }
.eg-project-heading.eg-color-2 h1, .eg-project-heading.eg-color-2 { border-color: #D98A9C; }
.eg-project-heading.eg-color-2 h1 { color: #A85670; }
.eg-project-heading.eg-color-3 h1, .eg-project-heading.eg-color-3 { border-color: #E2A26B; }
.eg-project-heading.eg-color-3 h1 { color: #B06A2E; }
.eg-project-heading.eg-color-4 h1, .eg-project-heading.eg-color-4 { border-color: #9585B5; }
.eg-project-heading.eg-color-4 h1 { color: #5F4D82; }

.eg-project-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 12px;
}
@media (max-width: 780px) {
	.eg-project-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
	.eg-project-grid { grid-template-columns: 1fr; }
}