/**
 * OSHIDA — card.
 *
 * @figma 1601:2092  veil rgba(74,74,74,.2), r=20, padding 37/30, gap 25,
 *                   shadow -10px 18px 113.2px 0 rgba(0,0,0,.19)
 * @figma 1601:2093  title 22px / 900, body 18px / 200, both on 35px leading
 * @figma 1579:1067  --lg: r=50, padding 70/40, shadow spread -2px
 *
 * NOT in the shared layer. A route that uses cards adds
 * "assets/css/components/card.css" to its own list in assets/asset-map.json.
 *
 * Owner: work package B1.
 */

.o-card {
	display: flex;
	flex-direction: column;
	gap: var(--o-space-sm);
	padding: var(--o-pad-card);
	border-radius: var(--o-radius-md);
	background-color: var(--o-veil-card);
	box-shadow: var(--o-shadow-card);
}

.o-card--lg {
	gap: var(--o-space-md);
	padding: var(--o-pad-card-lg);
	border-radius: var(--o-radius-xl);
	box-shadow: var(--o-shadow-panel);
}

.o-card__icon,
.o-card__icon-svg {
	inline-size: 73px;
	block-size: 73px;
}

.o-card__title {
	margin: 0;
	font-size: var(--o-fs-lg);
	font-weight: var(--o-fw-black);
	line-height: var(--o-leading-card);
	letter-spacing: var(--o-track-tight);
}

.o-card--lg .o-card__title {
	font-size: var(--o-fs-h2);
}

.o-card__body {
	margin: 0;
	font-size: var(--o-fs-md);
	font-weight: var(--o-fw-extralight);
	line-height: var(--o-leading-card);
	letter-spacing: var(--o-track-tight);
}

.o-card--lg .o-card__body {
	font-size: var(--o-fs-lg);
	line-height: var(--o-lh-snug);
	letter-spacing: 0;
}

/* One tab stop per card: the title link stretches over the whole card. */
.o-card__link {
	text-decoration: none;
}

.o-card--linked {
	position: relative;
}

.o-card--linked .o-card__link::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
}

.o-card--linked:focus-within {
	outline: 2px solid var(--o-gold);
	outline-offset: 3px;
}

/* An accent from oshida_service meta, when one is set. */
.o-card[style*="--o-card-accent"] {
	border-block-start: 2px solid var(--o-card-accent, transparent);
}

@media (prefers-reduced-motion: no-preference) {
	.o-card {
		transition: background-color var(--o-dur-base) var(--o-ease-standard);
	}
}

.o-card--linked:hover {
	background-color: var(--o-veil-panel);
}

@media (max-width: 599px) {
	.o-card {
		padding: var(--o-space-md) var(--o-space-xs);
	}

	.o-card--lg {
		padding: var(--o-space-lg) var(--o-space-md);
	}
}