/* ==========================================================================
   HostingTags — Cross-links Bar
   Contextual internal navigation between theme tools.
   Uses --ht-* design tokens; no custom fonts or font-sizes.
   ========================================================================== */

/* ---------- Container ---------- */
.ht-crosslinks {
	margin: 2.5em 0 1em;
	padding: 1.5em;
	background: var(--ht-gray-50, #f9fafb);
	border: 1px solid var(--ht-gray-200, #e5e7eb);
	border-radius: var(--ht-radius-lg, 12px);
}

/* ---------- Title ---------- */
.ht-crosslinks__title {
	display: flex;
	align-items: center;
	gap: .5em;
	margin: 0 0 1em;
	color: var(--ht-heading, #1a1a1a);
}
.ht-crosslinks__title svg {
	color: var(--ht-primary, #054239);
	flex-shrink: 0;
}

/* ---------- Grid ---------- */
.ht-crosslinks__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: .75em;
}

/* ---------- Card ---------- */
.ht-crosslinks__card {
	display: flex;
	align-items: center;
	gap: .75em;
	padding: .85em 1em;
	background: var(--ht-gray-0, #fff);
	border: 1px solid var(--ht-gray-200, #e5e7eb);
	border-radius: var(--ht-radius, 8px);
	text-decoration: none;
	color: inherit;
	transition: border-color var(--ht-transition, .2s),
	            box-shadow var(--ht-transition, .2s),
	            transform var(--ht-transition, .2s);
}
.ht-crosslinks__card:hover,
.ht-crosslinks__card:focus-visible {
	border-color: var(--ht-primary, #054239);
	box-shadow: var(--ht-shadow, 0 2px 8px rgba(0,0,0,.08));
	transform: translateY(-2px);
}

/* ---------- Icon ---------- */
.ht-crosslinks__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	flex-shrink: 0;
	background: var(--ht-primary-lighter, #e8eef7);
	color: var(--ht-primary, #054239);
	border-radius: var(--ht-radius-sm, 6px);
}

/* ---------- Text ---------- */
.ht-crosslinks__text {
	display: flex;
	flex-direction: column;
	gap: .15em;
	min-width: 0;
}
.ht-crosslinks__text strong {
	color: var(--ht-heading, #1a1a1a);
}
.ht-crosslinks__text span {
	color: var(--ht-gray-500, #6b7280);
}

/* ---------- Arrow ---------- */
.ht-crosslinks__arrow {
	margin-inline-start: auto;
	flex-shrink: 0;
	color: var(--ht-gray-400, #9ca3af);
	transition: color var(--ht-transition, .2s),
	            transform var(--ht-transition, .2s);
}
.ht-crosslinks__card:hover .ht-crosslinks__arrow {
	color: var(--ht-primary, #054239);
	transform: translateX(3px);
}

/* ---------- RTL Arrow ---------- */
[dir="rtl"] .ht-crosslinks__arrow {
	transform: scaleX(-1);
}
[dir="rtl"] .ht-crosslinks__card:hover .ht-crosslinks__arrow {
	transform: scaleX(-1) translateX(3px);
}

/* ---------- Compact variant (for single review posts) ---------- */
.ht-crosslinks--compact {
	padding: 1.25em;
}

/* ---------- Responsive ---------- */
@media (max-width: 600px) {
	.ht-crosslinks {
		padding: 1em;
	}
	.ht-crosslinks__grid {
		grid-template-columns: 1fr;
	}
	.ht-crosslinks__card {
		padding: .7em .85em;
	}
}