/* Homepage extras: quick-jump chips overlaid on the Privacy & AI Risk
   Assessment spotlight card's image, so a visitor can go straight to one
   specific tool or reference section instead of always landing on the
   assessment overview. */

.spotlight-assessment {
	position: relative;
}

.spotlight-assessment .image-tools {
	position: absolute;
	top: 0;
	left: 0;
	width: 25em;
	height: 100%;
	z-index: 2;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: stretch;
	gap: 0.5em;
	padding: 2em;
	box-sizing: border-box;
	pointer-events: none;
}

	.spotlight-assessment .image-tools .tool-chip {
		pointer-events: auto;
		display: block;
		text-align: center;
		color: #ffffff;
		background: rgba(8, 14, 36, 0.55);
		border: solid 1px rgba(255, 255, 255, 0.3);
		border-radius: 2em;
		font-size: 0.72em;
		font-weight: bold;
		letter-spacing: 0.08em;
		text-transform: uppercase;
		text-decoration: none;
		padding: 0.65em 1em;
		transition: background-color 0.2s ease, border-color 0.2s ease;
	}

		.spotlight-assessment .image-tools .tool-chip:hover {
			background: rgba(127, 178, 229, 0.35);
			border-color: rgba(255, 255, 255, 0.6);
		}

@media screen and (max-width: 980px) {
	.spotlight-assessment .image-tools {
		width: 100%;
		height: 50vh;
		padding: 1.5em;
	}
}

@media screen and (max-width: 480px) {
	.spotlight-assessment .image-tools {
		gap: 0.4em;
		padding: 1em;
	}

		.spotlight-assessment .image-tools .tool-chip {
			font-size: 0.68em;
			padding: 0.55em 0.75em;
		}
}