/**
 * HTPLaw Tile Band widget ("Working alongside technical specialists…").
 *
 * Measured from the 4x Figma export of the IP Litigation Support page
 * (design px, section top = 0 at y1312, height 349): #f5f7f9 band.
 * Eyebrow cap top ~50; 43/50 heading (max ~700px); tiles 45px below:
 * equal widths, 56px apart, ~67px tall, #0f2a3f with a 1px #d9d9d9
 * border and 6px radius, label Source Serif 4 600 20px white, centred.
 * Below 768px the tiles stack.
 */

.htplaw-tb {
	--_bg: var(--htplaw-tb-bg, var(--htplaw-color-muted));
	--_tile-bg: var(--htplaw-tb-tile-bg, var(--htplaw-color-secondary));

	padding-top: var(--htplaw-tb-pad-top, 45px);
	padding-bottom: var(--htplaw-tb-pad-bottom, 48px);
	background: var(--_bg);
}

.htplaw-tb__eyebrow {
	text-transform: uppercase;
}

.htplaw-tb .htplaw-tb__title {
	max-width: 700px;
	margin-top: 24px;
}

.htplaw-tb__tiles {
	display: grid;
	grid-template-columns: repeat(var(--htplaw-tb-count, 3), minmax(0, 1fr));
	gap: 16px 56px;
	margin: 45px 0 0;
	padding: 0;
	list-style: none;
}

.htplaw-tb__tiles li {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 67px;
	padding: 12px 20px;
	border: 1px solid #d9d9d9;
	border-radius: var(--htplaw-radius);
	background: var(--_tile-bg);
	color: #ffffff;
	font-family: var(--htplaw-font-heading);
	font-size: 20px;
	font-weight: 600;
	line-height: 1.3;
	text-align: center;
}

/*
 * Dark variant (Practice Areas "A full range of portfolio management
 * services"): #0f2a3f band, 345px tall; eyebrow (AA copper on navy) and
 * white heading on the left; tiles on the right, 205×91, 10px apart,
 * transparent with a 1px #d9d9d9 border and 5px radius, centred in the
 * band; labels Source Serif 4 600 17/22 white, left-aligned, 22px padding.
 */
.htplaw-tb--dark {
	--_bg: var(--htplaw-tb-bg, var(--htplaw-color-secondary));
	--htplaw-heading-color: #ffffff;
	--htplaw-eyebrow-color: var(--htplaw-color-accent-on-dark);

	padding-top: var(--htplaw-tb-pad-top, 70px);
	padding-bottom: var(--htplaw-tb-pad-bottom, 130px);
}

.htplaw-tb--dark .htplaw-tb__title {
	max-width: 420px;
}

.htplaw-tb--dark .htplaw-tb__tiles li {
	justify-content: flex-start;
	min-height: 91px;
	padding: 20px 22px;
	border-radius: 5px;
	background: transparent;
	font-size: 17px;
	line-height: 22px;
	text-align: left;
}

@media (min-width: 1025px) {
	.htplaw-tb--dark .htplaw-tb__inner {
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		gap: 40px;
	}

	.htplaw-tb--dark .htplaw-tb__tiles {
		grid-template-columns: repeat(var(--htplaw-tb-count, 3), 205px);
		gap: 10px;
		align-self: center;
		margin: 0;
		/* Figma centres the tiles in the band; the text block sits higher. */
		transform: translateY(30px);
	}
}

@media (max-width: 1024px) {
	.htplaw-tb__tiles {
		column-gap: 24px;
	}

	.htplaw-tb--dark {
		padding-bottom: var(--htplaw-tb-pad-bottom, 64px);
	}
}

@media (max-width: 767px) {
	.htplaw-tb__tiles {
		grid-template-columns: minmax(0, 1fr);
		margin-top: 28px;
	}

	.htplaw-tb__tiles li {
		min-height: 56px;
		font-size: 18px;
	}
}

/* Mobile spacing: section padding is capped at the shared mobile token
   (variables.css), so large desktop values set in Elementor don't carry
   over to tablets and phones; smaller custom values are kept. */
@media (max-width: 900px) {
	.htplaw-tb {
		padding-top: min(var(--htplaw-tb-pad-top, var(--htplaw-space-section)), var(--htplaw-space-section));
		padding-bottom: min(var(--htplaw-tb-pad-bottom, var(--htplaw-space-section)), var(--htplaw-space-section));
	}
}