/* ==========================================================================
   Block: On the Drawing Board (bga/drawing-board)
   ========================================================================== */

.bga-drawing-board {
	position: relative;
	background-color: rgba(234, 230, 225, 0);
	isolation: isolate;
	overflow: hidden;
	padding-block: clamp(var(--sp-80), 12vw, var(--sp-96));
}

/*
 * Organic watercolour cloud backdrop. Anchored centre, never stretched —
 * cropped by the viewport on smaller screens. Per client brief the clouds
 * read as WHITE over the cream — the source PNG is light grey, so
 * The PNG is already a white watercolour cloud with grey edge/speckle detail, so a
 * normal blend at ~0.7 opacity shows the white body over cream while keeping the
 * grey watercolour detail visible (screen/invert recolours wash the detail out).
 */
.bga-drawing-board::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image: url("../../images/organic-cloud-bg.png");
	background-repeat: no-repeat;
	background-position: center top;
	background-size: cover; /* mobile / narrow: fill, crop edges */
	opacity: 0.9;
	pointer-events: none;
}

@media (min-width: 1440px) {
	/* Wide screens: lock to natural width centred — no stretching.
	   Cloud reduced ~12% (2500→2200px) per client feedback for more whitespace. */
	.bga-drawing-board::before {
		background-size: 2200px auto;
		background-position: center -120px;
	}
}

@media (min-width: 2400px) {
	.bga-drawing-board::before {
		background-position: center top;
	}
}

.bga-drawing-board__heading {
	font-family: var(--font-heading);
	font-style: normal;
	font-size: var(--font-size-h2);
	margin-bottom: var(--sp-40);
	color: var(--color-brown);
}

.bga-drawing-board__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--grid-gap-lg);
}

/* Muted card treatment.
   filter triggers paint but is acceptable for hover interactions. */
.bga-project-card--muted .bga-project-card__image {
	filter: saturate(0.6) opacity(0.85);
	transition: filter 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
	            transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.bga-project-card--muted .bga-project-card__link:hover .bga-project-card__image,
.bga-project-card--muted .bga-project-card__link:focus-within .bga-project-card__image {
	filter: saturate(1) opacity(1);
	transform: scale(1.03);
}

/* Stronger text contrast on muted / in-progress cards */
.bga-project-card--muted .bga-project-card__title {
	color: var(--color-brown);
	font-weight: var(--font-weight-medium, 500);
}

.bga-project-card--muted .bga-project-card__type {
	color: var(--color-brown);
	opacity: 0.72;
	font-weight: var(--font-weight-regular);
}

.bga-project-card--muted .bga-project-card__content::before {
	background: rgba(41, 19, 5, 0.32);
}

@media (min-width: 768px) {
	.bga-drawing-board__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {
	.bga-drawing-board__grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* Cinematic section height on tablet+ — mobile keeps natural height to
   avoid awkward empty space below the grid. */
@media (min-width: 768px) {
	.bga-drawing-board {
		min-height: 90vh;
	}
}