/**
 * Areas of Expertise — compact diagonal tiles (Design 1).
 * Native Elementor containers on Technical Hub + shortcode lab fallback.
 */

.bqe-expertise-lab {
	--bqe-exp-navy: #094069;
	--bqe-exp-orange: #f0544c;
	--bqe-exp-mist: #e8f4fa;
	--bqe-exp-mist-hover: #d9eef8;
	--bqe-exp-max: 1200px;
	--bqe-exp-gutter: clamp(20px, 4vw, 44px);
	--bqe-exp-radius: 10px 0 10px 0;
	width: min(100%, calc(var(--bqe-exp-max) + (2 * var(--bqe-exp-gutter))));
	margin: 0 auto;
	padding: 48px var(--bqe-exp-gutter) 80px;
	box-sizing: border-box;
	font-family: Montserrat, sans-serif;
	color: var(--bqe-exp-navy);
}

.bqe-expertise-lab__header {
	margin-bottom: 36px;
	max-width: 44rem;
}

.bqe-expertise-lab__eyebrow {
	margin: 0 0 8px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--bqe-exp-orange);
}

.bqe-expertise-lab__page-title {
	margin: 0 0 10px;
	font-size: clamp(22px, 3vw, 32px);
	font-weight: 800;
	line-height: 1.2;
	color: var(--bqe-exp-navy);
}

.bqe-expertise-lab__hint {
	margin: 0;
	font-size: 14px;
	line-height: 1.5;
	color: #4a4a4a;
}

.bqe-expertise-lab__preview {
	padding: 36px 0 0;
	border-top: 1px solid rgba(9, 64, 105, 0.12);
}

.bqe-expertise-lab__section-title {
	margin: 0 0 18px;
	font-size: clamp(18px, 2.2vw, 22px);
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--bqe-exp-navy);
}

/* —— Tile grid (shortcode div + Elementor container) —— */
.bqe-expertise-tiles {
	--bqe-exp-navy: #094069;
	--bqe-exp-sky: #1699d9;
	--bqe-exp-orange: #f0544c;
	--bqe-exp-mist: #e8f4fa;
	--bqe-exp-mist-hover: #d9eef8;
	--bqe-exp-radius: 10px 0 10px 0;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
	width: 100%;
	box-sizing: border-box;
	font-family: Montserrat, sans-serif;
}

.bqe-expertise-tiles.e-con {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
	row-gap: 24px;
	column-gap: 24px;
	align-items: stretch;
	width: 100%;
	/* Match prior loop-grid inset under the section heading */
	--padding-top: 22px !important;
	--padding-bottom: 30px !important;
	--padding-left: 0 !important;
	--padding-right: 0 !important;
	padding: 22px 0 30px !important;
}

.bqe-expertise-tiles.e-con > .e-con-inner {
	display: contents;
}

.bqe-expertise-tiles.e-con > .e-con,
.bqe-expertise-tiles.e-con > .e-con-inner > .e-con {
	--width: 100% !important;
	width: 100% !important;
	max-width: 100% !important;
	min-width: 0;
	flex: none !important;
}

.bqe-expertise-tiles__tile,
.bqe-expertise-tiles__tile.e-con,
a.bqe-expertise-tiles__tile {
	display: flex !important;
	flex-direction: row !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 8px;
	min-height: 44px;
	padding: 10px 12px !important;
	--padding-top: 10px !important;
	--padding-bottom: 10px !important;
	--padding-left: 12px !important;
	--padding-right: 12px !important;
	border-radius: var(--bqe-exp-radius);
	border-top: 3px solid var(--bqe-exp-sky);
	background: var(--bqe-exp-mist) !important;
	color: var(--bqe-exp-navy);
	text-decoration: none;
	text-align: left;
	box-sizing: border-box;
	transition: transform 140ms ease, background 140ms ease, border-color 140ms ease;
}

.bqe-expertise-tiles__tile.e-con > .e-con-inner {
	display: contents !important;
	padding: 0 !important;
}

.bqe-expertise-tiles__tile:hover,
.bqe-expertise-tiles__tile:focus-visible,
.bqe-expertise-tiles__tile.e-con:hover,
.bqe-expertise-tiles__tile.e-con:focus-visible,
a.bqe-expertise-tiles__tile:hover,
a.bqe-expertise-tiles__tile:focus-visible {
	transform: translateY(-2px);
	background: var(--bqe-exp-mist-hover) !important;
	border-top-color: var(--bqe-exp-orange);
	outline: none;
	color: var(--bqe-exp-navy);
}

.bqe-expertise-tiles__title,
.bqe-expertise-tiles__title.elementor-widget-heading {
	margin: 0 !important;
	flex: 1 1 auto;
	min-width: 0;
	width: auto !important;
	text-align: left !important;
}

.bqe-expertise-tiles__title .elementor-heading-title,
.bqe-expertise-tiles__title {
	margin: 0;
	font-size: 13px !important;
	font-weight: 700 !important;
	line-height: 1.25 !important;
	letter-spacing: 0.01em;
	color: var(--bqe-exp-navy) !important;
	text-align: left !important;
}

/* Match page section spacing (same as other Technical Hub blocks) */
.elementor-element-5a74d63.elementor-widget-heading {
	--padding-top: 40px !important;
	--padding-bottom: 0 !important;
	padding: 40px 0 0 !important;
	margin: 0 !important;
}

/* Arrow: Elementor tiles use ::after; shortcode can use span or ::after */
.bqe-expertise-tiles__tile::after {
	content: "→";
	flex-shrink: 0;
	font-size: 14px;
	font-weight: 800;
	line-height: 1;
	color: var(--bqe-exp-orange);
	transition: transform 140ms ease;
}

.bqe-expertise-tiles__tile:hover::after,
.bqe-expertise-tiles__tile:focus-visible::after {
	transform: translateX(3px);
}

/* Shortcode span arrow (hide ::after to avoid double) */
.bqe-expertise-tiles__tile:has(.bqe-expertise-tiles__go)::after {
	content: none;
}

.bqe-expertise-tiles__go {
	flex-shrink: 0;
	font-size: 14px;
	font-weight: 800;
	line-height: 1;
	color: var(--bqe-exp-orange);
	transition: transform 140ms ease;
}

.bqe-expertise-tiles__tile:hover .bqe-expertise-tiles__go,
.bqe-expertise-tiles__tile:focus-visible .bqe-expertise-tiles__go {
	transform: translateX(3px);
}

@media (max-width: 900px) {
	.bqe-expertise-tiles,
	.bqe-expertise-tiles.e-con {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 18px;
		row-gap: 18px;
		column-gap: 18px;
	}
}

@media (max-width: 560px) {
	.bqe-expertise-tiles,
	.bqe-expertise-tiles.e-con {
		grid-template-columns: 1fr;
		gap: 14px;
		row-gap: 14px;
		column-gap: 14px;
	}
}