/**
 * FWM Related Guides — Frontend styles.
 *
 * Intentionally token-free and self-contained so the cards render consistently
 * regardless of the surrounding theme/builder. Matches the existing FWM Docks
 * card aesthetic (rounded corners, subtle shadow, accent underline on hover).
 */

.fwm-rg-group {
	margin: 2.5rem 0;
	padding: 1.5rem;
	background: #f7f8fa;
	border-left: 4px solid #0b5394;
	border-radius: 6px;
}

.fwm-rg-group-heading {
	margin: 0 0 1rem;
	font-size: 1.05rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: #0b5394;
	font-weight: 700;
}

.fwm-rg-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 1rem;
}

.fwm-rg-card {
	background: #fff;
	border: 1px solid #e3e7ec;
	border-radius: 6px;
	padding: 1rem 1.25rem;
	transition: box-shadow 120ms ease, transform 120ms ease;
}

.fwm-rg-card:hover {
	box-shadow: 0 6px 16px rgba(11, 83, 148, 0.08);
	transform: translateY(-1px);
}

.fwm-rg-eyebrow {
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: #6b7280;
	margin-bottom: 0.25rem;
}

.fwm-rg-title {
	font-size: 1.05rem;
	font-weight: 600;
	color: #0f172a;
	margin-bottom: 0.5rem;
	line-height: 1.3;
}

.fwm-rg-link {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	color: #0b5394;
	text-decoration: none;
	font-weight: 600;
	line-height: 1.4;
}

.fwm-rg-link:hover,
.fwm-rg-link:focus {
	text-decoration: underline;
	color: #083966;
}

.fwm-rg-arrow {
	display: inline-block;
	transition: transform 120ms ease;
}

.fwm-rg-link:hover .fwm-rg-arrow,
.fwm-rg-link:focus .fwm-rg-arrow {
	transform: translateX(3px);
}

@media (max-width: 640px) {
	.fwm-rg-group {
		margin: 1.75rem 0;
		padding: 1.25rem;
	}
	.fwm-rg-cards {
		grid-template-columns: 1fr;
	}
}