/**
 * Cards — generic surface card, media card (product/city), and the
 * light-tint panel used for hero/info surfaces in approved-v1.
 */

.nbf-card {
	background: var(--nbf-color-surface);
	border: 1px solid var(--nbf-color-border);
	border-radius: var(--nbf-radius-lg);
	box-shadow: var(--nbf-shadow-sm);
}

.nbf-card__body {
	padding: var(--nbf-space-4);
}

.nbf-card__header,
.nbf-card__footer {
	padding: var(--nbf-space-4);
}

.nbf-card__header {
	border-block-end: 1px solid var(--nbf-color-border);
	font-weight: var(--nbf-fw-bold);
}

.nbf-card__footer {
	border-block-start: 1px solid var(--nbf-color-border);
}

/* Elevation / interaction variants */
.nbf-card--flat {
	box-shadow: none;
}

.nbf-card--raised {
	border: 0;
	box-shadow: var(--nbf-shadow-md);
}

.nbf-card--interactive {
	transition:
		box-shadow var(--nbf-duration) var(--nbf-ease),
		transform var(--nbf-duration) var(--nbf-ease);
}

.nbf-card--interactive:hover {
	box-shadow: var(--nbf-shadow-md);
	transform: translateY(-2px);
}

.nbf-card--interactive:focus-within {
	box-shadow: var(--nbf-shadow-md);
}

/* Tinted panel (hero wash, info strips) */
.nbf-panel {
	background: var(--nbf-color-surface-tint);
	border-radius: var(--nbf-radius-xl);
	padding: var(--nbf-space-6);
}

/* --- Media card: product / city / gallery tiles --- */
.nbf-media-card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.nbf-media-card__media {
	position: relative;
	aspect-ratio: 4 / 3;
	background: var(--nbf-color-surface-sunken);
}

.nbf-media-card__media img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}

.nbf-media-card__badge {
	position: absolute;
	inset-block-start: var(--nbf-space-3);
	inset-inline-start: var(--nbf-space-3);
}

.nbf-media-card__title {
	font-size: var(--nbf-fs-lg);
	font-weight: var(--nbf-fw-black);
	margin-block-end: var(--nbf-space-1);
}

.nbf-media-card__subtitle {
	font-size: var(--nbf-fs-sm);
	color: var(--nbf-color-text-2);
	margin-block-end: var(--nbf-space-3);
}

/* Price row per approved card anatomy */
.nbf-price {
	display: flex;
	align-items: baseline;
	gap: var(--nbf-space-1);
	font-weight: var(--nbf-fw-black);
	color: var(--nbf-color-text);
	font-variant-numeric: tabular-nums;
}

.nbf-price__amount {
	font-size: var(--nbf-fs-lg);
}

.nbf-price__currency,
.nbf-price__prefix {
	font-size: var(--nbf-fs-xs);
	font-weight: var(--nbf-fw-medium);
	color: var(--nbf-color-text-2);
}

.nbf-price__old {
	font-size: var(--nbf-fs-sm);
	font-weight: var(--nbf-fw-regular);
	color: var(--nbf-color-text-3);
	text-decoration: line-through;
}

/* Cover-link pattern: whole card clickable, single tab stop */
.nbf-media-card {
	position: relative;
}

.nbf-media-card__cover-link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.nbf-media-card__cover-link:focus-visible::after {
	outline: 2px solid var(--nbf-color-focus-ring);
	outline-offset: -2px;
	border-radius: var(--nbf-radius-lg);
}

/* Actions above the cover link stay clickable */
.nbf-media-card .nbf-btn,
.nbf-media-card .nbf-icon-btn {
	position: relative;
	z-index: 2;
}