/*
 * Responsive overrides. Breakpoint pixel values are documented in
 * tokens.css and must stay consistent with this file (CSS custom
 * properties cannot be used inside @media conditions).
 */

/* Mobile primary navigation: collapse to a toggled vertical list below
   the tablet breakpoint. The "Discuss Your Project" CTA lives inside
   this same <nav> (see site-header.php), so it naturally appears as
   part of the opened mobile menu instead of a separate, awkward header
   row — no extra markup/JS needed. */
@media (max-width: 767px) {
	.mc-nav-toggle {
		display: inline-flex;
	}

	.mc-primary-nav {
		flex-basis: 100%;
		order: 3;
	}

	.mc-primary-nav__list {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--mc-space-3);
		padding-block: var(--mc-space-4);
		border-top: 1px solid var(--mc-border);
	}

	.mc-primary-nav[data-state="closed"] {
		display: none;
	}

	.mc-primary-nav .mc-site-header__cta {
		display: flex;
		margin: 0 0 var(--mc-space-4);
	}
}

@media (min-width: 768px) {
	.mc-nav-toggle {
		display: none;
	}

	.mc-primary-nav {
		display: flex !important;
		align-items: center;
		gap: var(--mc-space-5);
	}
}

/* Card grids: single column on mobile, more columns as space allows. */
.mc-card-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--mc-space-5);
}

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

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

/* Grids with only a few real items (e.g. a single featured project):
   keep cards at a natural width instead of stretching to fill the row,
   so a lone card doesn't float in a wide empty grid. */
.mc-card-grid--compact {
	grid-template-columns: 1fr;
}

@media (min-width: 768px) {
	.mc-card-grid--compact {
		grid-template-columns: repeat(auto-fit, minmax(260px, 340px));
		justify-content: flex-start;
	}
}

/* Grids with a fixed, always-even item count (capability tiles, regions):
   2 columns avoids a lone orphaned item on its own row at 3 columns. */
@media (min-width: 768px) {
	.mc-card-grid--pair {
		grid-template-columns: repeat(2, 1fr);
	}
}