/* ==========================================================================
   Bremner Featured Projects — self-contained styles
   Scoped under .bfp-section so nothing leaks into the theme.
   ========================================================================== */

.bfp-section {
	--bfp-ink: #0A1F33;
	--bfp-pool: #01AED9;
	--bfp-aqua: #01AED9;
	--bfp-paper: #FBF8F2;
	--bfp-line: rgba(10, 31, 51, 0.14);
	--bfp-muted: #5A6B7C;
	--bfp-display: 'Montserrat', sans-serif;
	--bfp-body: 'Inter', -apple-system, sans-serif;

	padding: 0;
	font-family: var(--bfp-body);
	color: var(--bfp-ink);
	background: transparent;
	box-sizing: border-box;
}
.bfp-section *,
.bfp-section *::before,
.bfp-section *::after { box-sizing: border-box; }

.bfp-wrap { width: 100%; max-width: 100%; margin: 0; padding: 0; }

.bfp-section h3 {
	font-family: var(--bfp-display);
	font-weight: 800;
	line-height: 1.05;
	letter-spacing: -0.025em;
	margin: 0;
}

/* Layout grids */
.bfp-featured {
	display: grid; grid-template-columns: 1.4fr 1fr; gap: 20px;
	margin-bottom: 20px; align-items: stretch;
}
.bfp-secondary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }

/* Card base */
.bfp-card {
	position: relative; border-radius: 12px; overflow: hidden;
	background-color: var(--bfp-ink); background-size: cover; background-position: center;
	display: flex; flex-direction: column; justify-content: flex-end;
	color: var(--bfp-paper); cursor: pointer; isolation: isolate; text-decoration: none;
	transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.4s;
}
.bfp-card::before {
	content: ""; position: absolute; inset: 0; z-index: 0;
	background: linear-gradient(180deg, rgba(5,20,34,0) 30%, rgba(5,20,34,0.4) 65%, rgba(5,20,34,0.92) 100%);
	transition: opacity 0.4s;
}
.bfp-card:hover { transform: translateY(-4px); box-shadow: 0 40px 80px -30px rgba(0,0,0,0.5); }

.bfp-feature-main { min-height: 620px; }
.bfp-feature-side { min-height: 620px; }
.bfp-secondary .bfp-card,
.bfp-card.bfp-secondary { min-height: 340px; }

.bfp-body {
	position: relative; z-index: 1; padding: 32px;
	display: flex; flex-direction: column; gap: 14px;
}
.bfp-card.bfp-secondary .bfp-body { padding: 22px; gap: 10px; }

.bfp-tags { display: flex; gap: 8px; flex-wrap: wrap; }
.bfp-tag {
	display: inline-flex; align-items: center;
	font-size: 9px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
	color: var(--bfp-paper); background: rgba(5, 20, 34, 0.55);
	border: 1px solid rgba(255, 255, 255, 0.18);
	backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
	padding: 5px 10px; border-radius: 999px;
}
.bfp-card.bfp-secondary .bfp-tag { font-size: 8px; padding: 4px 9px; letter-spacing: 0.16em; }

.bfp-title {
	font-family: var(--bfp-display); font-weight: 800;
	text-transform: uppercase; letter-spacing: -0.025em; line-height: 1; color: var(--bfp-paper);
}
.bfp-feature-main .bfp-title { font-size: 38px; }
.bfp-feature-side .bfp-title { font-size: 30px; }
.bfp-card.bfp-secondary .bfp-title { font-size: 18px; }

.bfp-meta {
	display: flex; gap: 16px; flex-wrap: wrap;
	font-size: 12px; font-weight: 500; color: rgba(255,255,255,0.85);
}
.bfp-meta span { display: inline-flex; align-items: center; gap: 6px; }
.bfp-meta i { color: var(--bfp-aqua); font-size: 14px; }
.bfp-card.bfp-secondary .bfp-meta { font-size: 11px; gap: 12px; }

.bfp-cta {
	display: inline-flex; align-items: center; gap: 8px;
	font-family: var(--bfp-display); font-weight: 700;
	font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
	color: var(--bfp-aqua); margin-top: 4px; transition: gap 0.2s;
}
.bfp-card:hover .bfp-cta { gap: 14px; }

/* Responsive */
@media (max-width: 1100px) {
	.bfp-featured { grid-template-columns: 1fr; }
	.bfp-secondary { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 800px) {
	.bfp-secondary { grid-template-columns: 1fr; }
	.bfp-featured { gap: 14px; margin-bottom: 14px; }
	.bfp-secondary { gap: 14px; }
	.bfp-feature-main { min-height: 440px; }
	.bfp-feature-side { min-height: 320px; }
	.bfp-secondary .bfp-card,
	.bfp-card.bfp-secondary { min-height: 300px; }
	.bfp-feature-main .bfp-title { font-size: 28px; }
	.bfp-feature-side .bfp-title { font-size: 24px; }
	.bfp-body { padding: 24px; }
}