/* Shared tool-card component — homepage, recent activity, and tools archive. */
.shaghaf-tool-card,
.shaghaf-tool-card *,
.shaghaf-tool-card *::before,
.shaghaf-tool-card *::after {
	box-sizing: border-box;
}

.shaghaf-tool-card {
	--stc-orange: var(--mh-orange, var(--sj-primary, #f15a24));
	--stc-orange-dark: var(--mh-orange-dark, var(--sj-primary-dark, #c94412));
	--stc-radius: var(--mh-radius-lg, 20px);
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 1;
	overflow: hidden;
	color: #fff !important;
	background:
		radial-gradient(circle at 18% 16%, rgba(255,255,255,.17), transparent 32%),
		linear-gradient(145deg, #f36a35 0%, var(--stc-orange) 48%, #e94f19 100%);
	border: 1px solid rgba(111, 30, 4, .14);
	border-radius: var(--stc-radius);
	box-shadow: 0 8px 22px rgba(181, 57, 13, .11);
	isolation: isolate;
	text-decoration: none !important;
	-webkit-tap-highlight-color: transparent;
	transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.shaghaf-tool-card::before {
	position: absolute;
	top: -55%;
	inset-inline-start: -45%;
	z-index: 0;
	width: 120%;
	height: 120%;
	content: "";
	background: radial-gradient(circle, rgba(255,255,255,.16), rgba(255,255,255,0) 67%);
	pointer-events: none;
}

.shaghaf-tool-card::after {
	position: absolute;
	inset: 7px;
	z-index: 0;
	content: "";
	border: 1px solid rgba(255,255,255,.24);
	border-radius: calc(var(--stc-radius) - 7px);
	pointer-events: none;
}

.shaghaf-tool-card__art {
	position: absolute;
	top: 39%;
	left: 50%;
	z-index: 1;
	display: grid;
	width: 74%;
	height: 74%;
	place-items: center;
	color: #fff;
	opacity: .14;
	line-height: 0;
	transform: translate(-50%, -50%);
	pointer-events: none;
}

.shaghaf-tool-card__art svg {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	max-height: none;
	overflow: visible;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.12;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.shaghaf-tool-card__art svg > * {
	vector-effect: non-scaling-stroke;
}

.shaghaf-tool-card__badge {
	position: absolute;
	top: 9px;
	inset-inline-end: 9px;
	z-index: 5;
	display: grid;
	width: clamp(42px, 4vw, 52px);
	height: clamp(42px, 4vw, 52px);
	place-items: center;
	color: #111;
	isolation: isolate;
	transform: rotate(-10deg);
}

.shaghaf-tool-card__star {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	filter: drop-shadow(0 5px 8px rgba(103, 25, 1, .15));
}

.shaghaf-tool-card__star polygon {
	fill: #fff;
	stroke: rgba(0,0,0,.06);
	stroke-width: 1;
}

.shaghaf-tool-card__badge > span {
	position: relative;
	z-index: 1;
	color: #111;
	font-size: clamp(10px, .9vw, 12px);
	font-weight: 950;
	line-height: 1;
	white-space: nowrap;
}

.shaghaf-tool-card__meta,
.shaghaf-tool-card__category {
	position: absolute;
	top: 13px;
	inset-inline-start: 13px;
	z-index: 6;
	display: inline-flex;
	min-height: 27px;
	max-width: calc(100% - 80px);
	align-items: center;
	padding: 4px 9px;
	overflow: hidden;
	color: #fff;
	background: rgba(91, 24, 3, .18);
	border: 1px solid rgba(255,255,255,.24);
	border-radius: 999px;
	font-size: 10px;
	font-weight: 900;
	line-height: 1;
	text-overflow: ellipsis;
	white-space: nowrap;
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
}

.shaghaf-tool-card__category {
	top: auto;
	bottom: 12px;
	inset-inline-start: 50%;
	max-width: calc(100% - 28px);
	transform: translateX(50%);
}

.shaghaf-tool-card__title {
	position: absolute;
	top: 64%;
	inset-inline: 8px;
	z-index: 4;
	display: flex;
	min-height: 70px;
	align-items: center;
	justify-content: center;
	margin: 0 !important;
	padding: 0 4px;
	color: #fff !important;
	font-family: "thmanyahserifdisplay", Tahoma, Arial, sans-serif !important;
	font-size: clamp(21px, 1.85vw, 30px);
	font-weight: 950;
	line-height: 1.08;
	letter-spacing: -.025em;
	text-align: center;
	text-wrap: balance;
	overflow-wrap: anywhere;
	text-shadow: 0 1px 0 rgba(100,24,1,.15);
	transform: translateY(-50%);
}

.shaghaf-tool-card--suggested .shaghaf-tool-card__meta {
	background: rgba(255,255,255,.16);
}

.shaghaf-tool-card:focus-visible {
	outline: 3px solid rgba(241,90,36,.25);
	outline-offset: 4px;
}

@media (hover:hover) and (pointer:fine) {
	.shaghaf-tool-card:hover {
		border-color: rgba(115,31,4,.24);
		box-shadow: 0 14px 32px rgba(181,57,13,.18);
		transform: translateY(-3px);
	}

	.shaghaf-tool-card:hover .shaghaf-tool-card__art {
		opacity: .18;
	}
}

@media (max-width:720px) {
	.shaghaf-tool-card {
		--stc-radius: 17px;
		box-shadow: 0 7px 18px rgba(167,55,14,.1);
	}

	.shaghaf-tool-card::after {
		border-radius: 10px;
	}

	.shaghaf-tool-card__art {
		top: 40%;
		width: 82%;
		height: 82%;
	}

	.shaghaf-tool-card__badge {
		width: 48px;
		height: 48px;
	}

	.shaghaf-tool-card__badge > span {
		font-size: 10.5px;
	}

	.shaghaf-tool-card__meta,
	.shaghaf-tool-card__category {
		top: 11px;
		inset-inline-start: 10px;
		min-height: 24px;
		max-width: calc(100% - 70px);
		padding-inline: 7px;
		font-size: 8.8px;
	}

	.shaghaf-tool-card__category {
		top: auto;
		bottom: 10px;
		inset-inline-start: 50%;
		max-width: calc(100% - 24px);
	}

	.shaghaf-tool-card__title {
		top: 64%;
		min-height: 64px;
		font-size: clamp(20px,6.4vw,28px);
	}
}

@media (max-width:430px) {
	.shaghaf-tool-card__badge {
		width: 43px;
		height: 43px;
	}

	.shaghaf-tool-card__badge > span {
		font-size: 9.5px;
	}

	.shaghaf-tool-card__title {
		font-size: 19px;
	}
}

@media (prefers-reduced-motion:reduce) {
	.shaghaf-tool-card {
		transition: none !important;
	}
}