/*!
 * @be-partner-labs/ds v1.8.0 — components/card
 * © 2026 Be Partner Labs. MIT License.
 *
 * CDN:  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@be-partner-labs/ds@1.8.0/dist/components/card.min.css">
 * npm:  @import "@be-partner-labs/ds/components/card";
 * Docs: https://ds.bepartnerlabs.com/components/card/
 */
@layer bp-tokens, bp-reset, bp-grid, bp-components, bp-utilities;

@layer bp-components {
	/**
	 * .bp-card
	 * Public API:
	 *   --card-background        Background color
	 *   --card-radius    Border radius
	 *   --card-padding   Inner padding
	 *   --card-shadow    Box shadow
	 *   --card-border    Border
	 */
	.bp-card {
		--_background: var(--card-background, var(--bp-color-bg-elevated));
		--_radius: var(--card-radius, var(--bp-radius-lg));
		--_padding: var(--card-padding, var(--bp-space-6));
		--_shadow: var(--card-shadow, var(--bp-shadow-md));
		--_border: var(--card-border, 1px solid var(--bp-color-border));

		background-color: var(--_background);
		border-radius: var(--_radius);
		padding: var(--_padding);
		box-shadow: var(--_shadow);
		border: var(--_border);
		display: flex;
		flex-direction: column;
		gap: var(--bp-space-4);
		container-type: inline-size;
		container-name: card;
	}

	.bp-card__image {
		border-radius: calc(var(--_radius) - 2px) calc(var(--_radius) - 2px) 0 0;
		margin: calc(var(--_padding) * -1) calc(var(--_padding) * -1) 0;
		overflow: hidden;
	}

	.bp-card__image img {
		width: 100%;
		height: auto;
		object-fit: cover;
	}

	.bp-card__header {
		display: flex;
		flex-direction: column;
		gap: var(--bp-space-1);
	}

	.bp-card__title {
		font-size: var(--bp-text-lg);
		font-weight: var(--bp-font-weight-semibold);
		color: var(--bp-color-text);
	}

	/* cqi fluid type — named so it resolves to this card even when nested inside another inline-size container (e.g. a fluid card grid) */
	@container card (inline-size > 0) {
		.bp-card__title {
			font-size: clamp(var(--bp-text-base), 4cqi, var(--bp-text-lg));
		}
		.bp-card__body {
			font-size: clamp(var(--bp-text-sm), 3.5cqi, var(--bp-text-base));
		}
	}

	.bp-card__meta {
		font-size: var(--bp-text-sm);
		color: var(--bp-color-text-muted);
	}

	.bp-card__body {
		color: var(--bp-color-text-muted);
		font-size: var(--bp-text-base);
		line-height: var(--bp-leading-normal);
		flex: 1;
	}

	.bp-card__footer {
		display: flex;
		align-items: center;
		gap: var(--bp-space-3);
		padding-top: var(--bp-space-4);
		border-top: 1px solid var(--bp-color-border);
	}

	/* --- Variant: horizontal --- */
	.bp-card--horizontal {
		flex-direction: row;
		align-items: flex-start;
	}

	.bp-card--horizontal .bp-card__image {
		border-radius: calc(var(--_radius) - 2px) 0 0 calc(var(--_radius) - 2px);
		margin: calc(var(--_padding) * -1) 0 calc(var(--_padding) * -1) calc(var(--_padding) * -1);
		flex-shrink: 0;
		width: 40%;
		min-height: 100%;
	}

	/* --- Variant: interactive (hover lift) --- */
	.bp-card--interactive {
		cursor: pointer;
		transition:
			transform var(--bp-duration-normal) var(--bp-ease),
			box-shadow var(--bp-duration-normal) var(--bp-ease);
	}

	.bp-card--interactive:hover {
		transform: translateY(-2px);
		--card-shadow: var(--bp-shadow-lg);
	}

	.bp-card--interactive:focus-visible {
		outline: none;
		box-shadow: var(--bp-focus-ring);
	}
}