/* Segment tiles — README §1.3, §2 */

/* Horizontal gutter comes from the nested .container. */
.segment-tiles { padding-top: 96px; padding-bottom: 100px; }

.segment-tiles__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--space-24);
	margin-bottom: 48px;
}
.segment-tiles__head .eyebrow { margin-bottom: var(--space-8); }

.segment-tiles__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--space-24);
}

.segment-tile {
	display: flex;
	flex-direction: column;
	gap: 18px;
	padding: 30px 26px 28px;
	border: 1px solid var(--color-line);
	text-decoration: none;
	color: inherit;
	transition: var(--transition-fast);
	transition-property: border-color;
}
.segment-tile:hover,
.segment-tile:focus-visible { border-color: var(--color-ink); }
.segment-tile__icon { width: 30px; height: 30px; color: var(--color-ink); }
.segment-tile h3 { margin: 0; }
.segment-tile__scope {
	flex: 1;
	margin: 0;
	font-size: 15px;
	line-height: 1.6;
	color: var(--color-muted);
}
.segment-tile__link {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 14px;
	color: var(--color-accent);
}
.segment-tile:hover .segment-tile__link,
.segment-tile:focus-visible .segment-tile__link { color: var(--color-ink); }
.segment-tile__link--mobile { display: none; }

@media (max-width: 1279px) {
	.segment-tiles__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
	.segment-tiles { padding-top: 56px; padding-bottom: 56px; }
	.segment-tiles__grid { grid-template-columns: 1fr; gap: 14px; }
	.segment-tile { padding: 22px 20px; }
	.segment-tile__link--desktop { display: none; }
	.segment-tile__link--mobile { display: inline; }
}