/**
 * BongoHive Capabilities Grid
 *
 * 3-column × 2-row grid: 1 heading cell + 5 department cards. Cells
 * alternate between transparent and a soft grey background to produce
 * the checkerboard rhythm shown in Figma 10579-2938.
 *
 * Layout breakpoints:
 *   - ≥1024px: 3 columns × 2 rows (default)
 *   - 768–1023px: 2 columns × 3 rows
 *   - <768px: single column
 *
 * Every cell is min-height controlled so the rhythm stays consistent
 * even when descriptions are short. Cards with links use <a> with no
 * default styling — colour comes from the card-title / cta classes.
 *
 * All styles scoped under `.bh-capabilities` BEM.
 */

.bh-capabilities {
	width: 100%;
	box-sizing: border-box;
	background-color: #ffffff;
	padding: 80px;
}

.bh-capabilities *,
.bh-capabilities *::before,
.bh-capabilities *::after {
	box-sizing: border-box;
}

/* ─── Grid ────────────────────────────────────────────────────────────── */

.bh-capabilities__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0;
	width: 100%;
}

/* ─── Cell (shared) ───────────────────────────────────────────────────── */

.bh-capabilities__cell {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: flex-start;
	min-height: 292px;
	padding: 20px;
	min-width: 0;
	overflow: hidden;
	transition:
		background-color 0.25s ease,
		transform 0.25s ease,
		box-shadow 0.25s ease;
}

/*
 * Subtle accent bar that grows from the bottom-left of a card on hover,
 * pulling from the dark accent into the bright accent. Positioned
 * behind the content via z-index management on the children below.
 */
.bh-capabilities__cell--card::before {
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	height: 3px;
	width: 100%;
	background: linear-gradient(90deg, #60460e 0%, #f0af24 100%);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.35s ease;
	z-index: 0;
}

a.bh-capabilities__cell--card:hover::before,
a.bh-capabilities__cell--card:focus-visible::before {
	transform: scaleX(1);
}

/* Keep card text above the accent bar */
.bh-capabilities__card-text,
.bh-capabilities__cta {
	position: relative;
	z-index: 1;
}

/* Alt cells get the grey background to create the checkerboard. */
.bh-capabilities__cell--alt {
	background-color: #efefef;
}

/* ─── Heading cell ────────────────────────────────────────────────────── */

.bh-capabilities__cell--heading {
	padding: 20px 20px 20px 0;
	justify-content: center;
}

.bh-capabilities__heading {
	font-family: 'PT Sans', 'Ubuntu', sans-serif;
	font-weight: 700;
	font-size: clamp(2rem, 3.4vw, 2.75rem);
	line-height: 1.2;
	letter-spacing: -0.44px;
	color: #60460e;
	margin: 0;
}

.bh-capabilities__heading-line {
	display: block;
}

.bh-capabilities__accent {
	font-weight: 700;
}

.bh-capabilities__accent--dark {
	color: #60460e;
}

.bh-capabilities__accent--bright {
	color: #f0af24;
}

/* ─── Department card cells ───────────────────────────────────────────── */

.bh-capabilities__cell--card {
	text-decoration: none;
	color: inherit;
	cursor: default;          /* default on non-link cards */
}

a.bh-capabilities__cell--card {
	cursor: pointer;
}

a.bh-capabilities__cell--card:hover,
a.bh-capabilities__cell--card:focus-visible {
	background-color: #f7f0e0;
	transform: translateY(-4px);
	box-shadow: 0 12px 24px rgba(72, 52, 10, 0.10);
	text-decoration: none;
}

a.bh-capabilities__cell--card:focus-visible {
	outline: 2px solid #60460e;
	outline-offset: -2px;
}

/* Alt cells use a darker hover tint so the lift remains visible. */
a.bh-capabilities__cell--card.bh-capabilities__cell--alt:hover,
a.bh-capabilities__cell--card.bh-capabilities__cell--alt:focus-visible {
	background-color: #ece4d2;
}

.bh-capabilities__card-text {
	display: flex;
	flex-direction: column;
	gap: 8px;
	width: 100%;
}

.bh-capabilities__card-title {
	font-family: 'Ubuntu', 'PT Sans', sans-serif;
	font-weight: 700;
	font-size: 1.75rem;
	line-height: 1.4;
	letter-spacing: -0.28px;
	color: #48340a;
	margin: 0;
	transition: color 0.25s ease;
}

a.bh-capabilities__cell--card:hover .bh-capabilities__card-title,
a.bh-capabilities__cell--card:focus-visible .bh-capabilities__card-title {
	color: #60460e;
}

.bh-capabilities__card-body {
	font-family: 'Ubuntu', sans-serif;
	font-weight: 400;
	font-size: 1.125rem;
	line-height: 1.5;
	color: #606469;
	margin: 0;
}

/* ─── Explore More CTA ────────────────────────────────────────────────── */

.bh-capabilities__cta {
	display: inline-flex;
	align-items: center;
	gap: 15px;
	font-family: 'Ubuntu', sans-serif;
	font-weight: 500;
	font-size: 1rem;
	line-height: 1.5;
	color: #60460e;
	transition: gap 0.25s ease, color 0.25s ease;
	margin-top: auto;
}

.bh-capabilities__cta-text {
	position: relative;
	display: inline-block;
}

/* Animated underline that grows from left on hover. */
.bh-capabilities__cta-text::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: -2px;
	height: 1.5px;
	width: 100%;
	background-color: currentColor;
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.3s ease;
}

a.bh-capabilities__cell--card:hover .bh-capabilities__cta-text::after,
a.bh-capabilities__cell--card:focus-visible .bh-capabilities__cta-text::after {
	transform: scaleX(1);
}

a.bh-capabilities__cell--card:hover .bh-capabilities__cta,
a.bh-capabilities__cell--card:focus-visible .bh-capabilities__cta {
	gap: 22px;
	color: #48340a;
}

.bh-capabilities__cta svg {
	width: 20px;
	height: 20px;
	flex: 0 0 20px;
	transition: transform 0.25s ease;
}

a.bh-capabilities__cell--card:hover .bh-capabilities__cta svg,
a.bh-capabilities__cell--card:focus-visible .bh-capabilities__cta svg {
	transform: translateX(3px);
}

/* ─── Responsive ──────────────────────────────────────────────────────── */

/* Tablet — 2 columns × 3 rows */
@media (max-width: 1024px) {
	.bh-capabilities {
		padding: 56px 24px;
	}

	.bh-capabilities__grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.bh-capabilities__cell {
		min-height: 240px;
	}

	/* Recompute checkerboard for 2-col layout: alternate by position. */
	.bh-capabilities__cell--alt {
		background-color: transparent;
	}

	.bh-capabilities__cell:nth-child(2n) {
		background-color: #efefef;
	}

	.bh-capabilities__card-title {
		font-size: 1.5rem;
	}
}

/* Mobile — single column. Heading cell sits at top, no alternating bg. */
@media (max-width: 767px) {
	.bh-capabilities {
		padding: 40px 16px;
	}

	.bh-capabilities__grid {
		grid-template-columns: 1fr;
	}

	.bh-capabilities__cell {
		min-height: 0;
		padding: 24px 16px;
	}

	.bh-capabilities__cell--heading {
		padding: 16px;
	}

	/* Cards get a hairline divider between them on mobile, no alt bg. */
	.bh-capabilities__cell:nth-child(2n) {
		background-color: transparent;
	}

	.bh-capabilities__cell--card + .bh-capabilities__cell--card {
		border-top: 1px solid #e0e0e0;
	}

	.bh-capabilities__heading {
		font-size: 1.875rem;
	}

	.bh-capabilities__card-title {
		font-size: 1.375rem;
	}

	.bh-capabilities__card-body {
		font-size: 1rem;
	}
}

/* ─── Motion preferences ──────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
	.bh-capabilities__cell,
	.bh-capabilities__cell--card::before,
	.bh-capabilities__card-title,
	.bh-capabilities__cta,
	.bh-capabilities__cta svg,
	.bh-capabilities__cta-text::after {
		transition: none;
	}

	a.bh-capabilities__cell--card:hover,
	a.bh-capabilities__cell--card:focus-visible {
		transform: none;
		box-shadow: none;
	}

	a.bh-capabilities__cell--card:hover .bh-capabilities__cta svg,
	a.bh-capabilities__cell--card:focus-visible .bh-capabilities__cta svg {
		transform: none;
	}
}