/* Framed, illustrated-feeling cards used for quick actions, mission
   stops, resources and diary entries. */

.card {
	background: var(--color-surface);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-card);
	padding: var(--space-5);
}

.card--framed {
	border: 3px solid var(--color-reward);
	position: relative;
}

.card--framed::before {
	content: '';
	position: absolute;
	inset: 6px;
	border: 2px solid var(--color-reward-soft);
	border-radius: calc(var(--radius-lg) - 8px);
	pointer-events: none;
}

.card--interactive {
	transition: transform var(--duration-base) var(--ease-standard);
	text-decoration: none;
	color: inherit;
	display: block;
}

.card--interactive:hover {
	transform: translateY(-4px);
}

.card__eyebrow {
	color: var(--color-interface-alt);
	font-size: var(--text-sm);
	font-weight: 700;
}

.card__title {
	margin: var(--space-2) 0;
}

.card__illustration {
	width: 100%;
	border-radius: var(--radius-md);
	margin-bottom: var(--space-3);
}

.card--quick-action {
	text-align: center;
}

.card--quick-action .card__illustration {
	max-width: 96px;
	margin-inline: auto;
}

.card--resource,
.card--diary {
	display: flex;
	flex-direction: column;
	height: 100%;
}

/* A gentle colour cycle across repeated cards (resources, reviews, diary
   entries) so a grid of the same component doesn't read as one flat
   block — small variety without needing per-card custom art. */
.card--resource,
.card--diary {
	border-top: 6px solid var(--color-interface-alt);
}

.card--resource:nth-of-type(4n+2),
.card--diary:nth-of-type(4n+2) {
	border-top-color: var(--color-reward-strong);
}

.card--resource:nth-of-type(4n+3),
.card--diary:nth-of-type(4n+3) {
	border-top-color: var(--color-accent-strong);
}

.card--resource:nth-of-type(4n+4),
.card--diary:nth-of-type(4n+4) {
	border-top-color: var(--raw-sky-500);
}