/* ── Related Links ───────────────────────────────────────────────────────────
   Off-white section with eyebrow, heading, and a responsive auto-fit grid
   of link pills. Each pill has an arrow icon on the left via CSS ::before.
   Used for "Related Services" / "Also From Imagewize" footer sections.
   ─────────────────────────────────────────────────────────────────────── */

.wp-block-imagewize-related-links {
	background: var(--wp--preset--color--tertiary, #f5f5f6);
	padding: 64px 0;
}

/* Inner wrapper — centered, constrained to wideSize */
.related-links__inner {
	max-width: var(--wp--style--global--wide-size, 64rem);
	margin: 0 auto;
	padding-left: var(--wp--preset--spacing--50);
	padding-right: var(--wp--preset--spacing--50);
}

/* Reset WP flow layout margin on direct children */
.related-links__inner > * {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

/* ── Section header ──────────────────────────────────────────────────────── */

.related-links__label {
	display: inline-block !important;
	font-size: 11px !important;
	font-weight: 700 !important;
	letter-spacing: 0.12em !important;
	text-transform: uppercase !important;
	color: var(--wp--preset--color--primary, #017cb6) !important;
	margin-bottom: 10px !important;
	line-height: 1.4 !important;
}

.related-links__title {
	font-size: clamp(1.4rem, 3vw, 1.8rem) !important;
	line-height: 1.2 !important;
	color: var(--wp--preset--color--main, #171b23) !important;
	margin-bottom: 28px !important;
}

/* ── Link grid ───────────────────────────────────────────────────────────── */

/* Override WP flex layout with CSS grid */
.related-links__grid.wp-block-buttons {
	display: grid !important;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
	gap: 12px !important;
	flex-wrap: unset !important;
	margin-top: 0 !important;
}

/* Reset is-layout-flex gap that WP applies */
.related-links__grid.wp-block-buttons > .wp-block-button {
	margin: 0 !important;
}

/* ── Individual link pill ─────────────────────────────────────────────────── */

/* Arrow via background-image + left padding — no flex, no ::before, fully editable */
.related-links__grid .wp-block-button__link {
	display: block !important;
	width: 100% !important;
	padding: 16px 18px 16px 44px !important;
	background-color: #ffffff !important;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23017cb6' stroke-width='2'%3E%3Cpath d='M5 12h14M12 5l7 7-7 7'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: 14px center !important;
	background-size: 16px 16px !important;
	border: 1px solid var(--wp--preset--color--border-light, #ebeced) !important;
	border-radius: 8px !important;
	text-decoration: none !important;
	color: var(--wp--preset--color--main, #171b23) !important;
	font-size: 14px !important;
	font-weight: 500 !important;
	transition: border-color 0.2s, color 0.2s, box-shadow 0.2s !important;
	line-height: 1.4 !important;
}

.related-links__grid .wp-block-button__link:hover {
	border-color: var(--wp--preset--color--primary, #017cb6) !important;
	color: var(--wp--preset--color--primary, #017cb6) !important;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
}

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

@media (max-width: 640px) {
	.wp-block-imagewize-related-links {
		padding: 48px 0;
	}

	.related-links__grid.wp-block-buttons {
		grid-template-columns: 1fr 1fr !important;
	}
}

@media (max-width: 400px) {
	.related-links__grid.wp-block-buttons {
		grid-template-columns: 1fr !important;
	}
}