/* Projectdetailpagina — Eiken Bijgebouwen (single-portfolio) */

.eb-project-detail {
	background: #faf9f6;
	color: #1a1a1a;
	font-family: 'Public Sans', system-ui, sans-serif;
}

.eb-project-detail * {
	box-sizing: border-box;
}

.eb-project-detail img {
	max-width: 100%;
	display: block;
}

.eb-breadcrumb {
	max-width: 1400px;
	margin: 0 auto;
	padding: 20px 56px 0;
	font-size: 12px;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: rgba(26, 26, 26, .4);
}

.eb-breadcrumb a {
	color: inherit;
	text-decoration: none;
}

.eb-breadcrumb a:hover {
	color: #c6963c;
}

.eb-hero-row {
	display: grid;
	grid-template-columns: 380px 1fr;
	gap: 40px;
	max-width: 1600px;
	margin: 0 auto;
	padding: 24px 56px 0;
	align-items: stretch;
}

.eb-info {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 18px;
}

.eb-tag {
	background: #c6963c;
	color: #fff;
	font: 600 11px/1 'Space Grotesk', sans-serif;
	letter-spacing: .05em;
	text-transform: uppercase;
	padding: 7px 12px;
	border-radius: 2px;
	width: fit-content;
}

.eb-title {
	font: 600 32px/1.15 'Space Grotesk', sans-serif;
	letter-spacing: -.01em;
	margin: 0;
}

.eb-meta {
	display: flex;
	flex-direction: column;
	gap: 8px;
	font-size: 14px;
	color: rgba(26, 26, 26, .6);
	list-style: none;
	margin: 0;
	padding: 0;
}

.eb-meta div,
.eb-meta li {
	display: flex;
	align-items: center;
	gap: 10px;
}

.eb-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #c6963c;
	flex: none;
}

.eb-intro {
	font-size: 14.5px;
	line-height: 1.7;
	color: rgba(26, 26, 26, .65);
	margin: 0;
}

.eb-cta {
	background: #c6963c;
	color: #fff;
	border: none;
	padding: 14px 24px;
	font: 600 14px 'Public Sans', sans-serif;
	border-radius: 4px;
	cursor: pointer;
	width: fit-content;
	text-decoration: none;
	display: inline-block;
	transition: background-color .2s ease, transform .15s ease, box-shadow .2s ease;
}

.eb-cta:hover {
	background: #a97a2b;
	color: #fff;
	transform: translateY(-2px);
	box-shadow: 0 8px 18px rgba(198, 150, 60, .4);
}

.eb-cta.gold {
	background: #c6963c;
	color: #fff;
}

.eb-cta.gold:hover {
	background: #a97a2b;
	color: #fff;
	transform: translateY(-2px);
	box-shadow: 0 8px 18px rgba(198, 150, 60, .4);
}

.eb-slider {
	position: relative;
	width: 100%;
	height: 560px;
	border-radius: 10px;
	overflow: hidden;
	background: #1a1a1a;
}

.eb-slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity .5s ease;
	pointer-events: none;
}

.eb-slide.active {
	opacity: 1;
	pointer-events: auto;
}

.eb-slide a {
	display: block;
	width: 100%;
	height: 100%;
	cursor: pointer;
}

.eb-slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.eb-placeholder {
	width: 100%;
	height: 100%;
	background: repeating-linear-gradient(135deg, #efe9dc, #efe9dc 16px, #e2d8c2 16px, #e2d8c2 32px);
	display: flex;
	align-items: center;
	justify-content: center;
}

.eb-placeholder span {
	font: 12px ui-monospace, Menlo, monospace;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: rgba(26, 26, 26, .45);
	text-align: center;
	padding: 0 10px;
}

.eb-dots {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 16px;
	display: flex;
	justify-content: center;
	gap: 6px;
}

.eb-dotbtn {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .55) !important;
	border: none !important;
	box-shadow: none !important;
	cursor: pointer;
	padding: 0;
	transition: all .25s;
}

.eb-dotbtn.active {
	width: 22px;
	height: 6px;
	border-radius: 3px;
	background: rgba(31, 46, 42, .8) !important;
}

.eb-blocks {
	max-width: 1400px;
	margin: 0 auto;
	padding: 48px 56px 0;
}

.eb-grid12 {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	gap: 24px;
}

.eb-card {
	background: #fff;
	border: 1px solid rgba(26, 26, 26, .08);
	border-radius: 10px;
	padding: 32px;
	box-shadow: 0 1px 3px rgba(26, 26, 26, .04);
}

.eb-story {
	grid-column: span 8;
}

.eb-story h3 {
	font: 600 20px 'Space Grotesk', sans-serif;
	margin: 0 0 14px;
}

.eb-story p {
	font-size: 15px;
	line-height: 1.75;
	color: rgba(26, 26, 26, .72);
	margin: 0 0 14px;
}

.eb-story p:last-child {
	margin-bottom: 0;
}

.eb-story.eb-story--full {
	grid-column: span 12;
}

.eb-wood {
	grid-column: span 4;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 12px;
	text-align: center;
}

.eb-wood .bar {
	width: 18px;
	height: 3px;
	background: #c6963c;
}

.eb-wood .label {
	font-size: 12px;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: rgba(26, 26, 26, .45);
}

.eb-wood .value {
	font: 600 22px 'Space Grotesk', sans-serif;
}

.eb-photo {
	grid-column: span 5;
	border-radius: 10px;
	overflow: hidden;
	aspect-ratio: 5 / 4;
}

.eb-photo a {
	display: block;
	width: 100%;
	height: 100%;
	cursor: pointer;
}

.eb-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.eb-quote {
	grid-column: span 7;
	background: #1F2E2A;
	border-radius: 10px;
	padding: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
}

.eb-quote p {
	font: 500 italic 21px 'Space Grotesk', sans-serif;
	color: #fff;
	line-height: 1.5;
	margin: 0;
}

.eb-related {
	max-width: 1400px;
	margin: 0 auto;
	padding: 48px 56px 60px;
}

.eb-related h3 {
	font: 600 20px 'Space Grotesk', sans-serif;
	margin: 0 0 20px;
	text-align: center;
}

.eb-related-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 18px;
	max-width: 900px;
	margin: 0 auto;
}

.eb-rel-card {
	background: #fff;
	border: 1px solid rgba(26, 26, 26, .08);
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0 1px 3px rgba(26, 26, 26, .04);
	text-decoration: none;
	color: inherit;
	display: block;
	transition: transform .25s ease, box-shadow .25s ease;
}

.eb-rel-card:hover {
	transform: translateY(-4px) scale(1.03);
	box-shadow: 0 12px 26px rgba(26, 26, 26, .14);
}

.eb-rel-photo {
	width: 100%;
	aspect-ratio: 4 / 3;
	overflow: hidden;
}

.eb-rel-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .3s ease;
}

.eb-rel-card:hover .eb-rel-photo img {
	transform: scale(1.08);
}

.eb-rel-body {
	padding: 12px;
}

.eb-rel-body .t {
	font: 600 14px 'Space Grotesk', sans-serif;
	margin-bottom: 3px;
}

.eb-rel-body .l {
	font-size: 12px;
	color: rgba(26, 26, 26, .5);
}

.eb-footer-cta {
	background: #1a1a1a;
	padding: 44px 56px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 20px;
}

.eb-footer-cta div {
	color: #fff;
	font: 600 20px 'Space Grotesk', sans-serif;
}

@media (max-width: 900px) {
	.eb-hero-row {
		grid-template-columns: 1fr;
	}

	.eb-slider {
		height: 340px;
	}

	.eb-story,
	.eb-wood,
	.eb-photo,
	.eb-quote {
		grid-column: span 12;
	}

	.eb-related-grid {
		grid-template-columns: 1fr;
	}

	.eb-breadcrumb,
	.eb-hero-row,
	.eb-blocks,
	.eb-related,
	.eb-footer-cta {
		padding-left: 24px;
		padding-right: 24px;
	}
}