/*
 * Post card.
 *
 * Same rules as every component stylesheet: design-system `--btx-*` tokens
 * only, a fallback on every var(). See cta-button/style.css for the full note.
 */

@layer bertex-components {
	.btxc-post-card {
		/*
		 * How much excerpt a card shows. Named so a host can trade evenness for
		 * detail — a two-column layout can afford four lines where a four-column
		 * one cannot.
		 */
		--btxc-post-card-excerpt-lines: 3;
		--btxc-post-card-avatar-size: 1.75rem;

		position: relative;
		display: flex;
		flex-direction: column;

		/* A card is as tall as its slot, so a row of them lines up along the
		   bottom whatever the excerpts do. */
		height: 100%;

		box-sizing: border-box;
		border: 1px solid var(--btx-color-text-bg-1-dark-40, #d1d3d4);
		border-radius: var(--btx-border-radius-lg, 0.5rem);

		background-color: var(--btx-color-text-bg-1, #f6f3ee);
		color: var(--btx-color-primary-1, #1a2744);

		font-family: var(--btx-font-body-family, system-ui, sans-serif);
		overflow: hidden;

		transition:
			box-shadow 0.18s ease,
			border-color 0.18s ease;
	}

	/* Variants ------------------------------------------------------------ */

	.btxc-post-card--outline {
		background-color: transparent;
	}

	.btxc-post-card--elevated {
		border-color: transparent;
		box-shadow: 0 1px 2px rgb(0 0 0 / 6%), 0 8px 24px rgb(0 0 0 / 8%);
	}

	.btxc-post-card--elevated.btxc-post-card--linked:hover {
		box-shadow: 0 2px 4px rgb(0 0 0 / 8%), 0 16px 40px rgb(0 0 0 / 12%);
	}

	/* Parts --------------------------------------------------------------- */

	.btxc-post-card__media {
		margin: 0;
		aspect-ratio: 16 / 9;
		background-color: var(--btx-color-text-bg-1-dark-10, #dfd6c7);
	}

	.btxc-post-card__image {
		display: block;
		width: 100%;
		height: 100%;
		object-fit: cover;
		transition: transform 0.3s ease;
	}

	.btxc-post-card__body {
		display: flex;
		flex: 1 1 auto;
		flex-direction: column;
		gap: var(--btx-text-spacing, 0.65rem);
		padding: var(--btx-card-spacing, 1rem);
	}

	.btxc-post-card__eyebrow {
		margin: 0;
		color: var(--btx-color-primary-1, #1a2744);
		font-size: var(--btx-font-body-xs, 0.8rem);
		font-weight: 600;
		letter-spacing: 0.06em;
		text-transform: uppercase;
	}

	.btxc-post-card__title {
		margin: 0;
		font-family: var(--btx-font-heading-family, georgia, serif);
		font-size: var(--btx-font-heading-lg, 1.375rem);
		line-height: var(--btx-line-height-heading, 1.15);
	}

	/*
	 * Clamped so the byline sits on the same line across a row of cards. The
	 * `-webkit-` prefixed properties are not a legacy fallback — they are still
	 * the only form every engine implements, and the unprefixed `line-clamp`
	 * below them is what takes over as they catch up.
	 */
	.btxc-post-card__excerpt {
		display: -webkit-box;
		margin: 0;
		overflow: hidden;
		font-size: var(--btx-font-body-m, 1rem);
		line-height: var(--btx-line-height-body, 1.6);
		-webkit-line-clamp: var(--btxc-post-card-excerpt-lines, 3);
		line-clamp: var(--btxc-post-card-excerpt-lines, 3);
		-webkit-box-orient: vertical;
	}

	/*
	 * `margin-block-start: auto` pushes the byline to the bottom of the card
	 * rather than leaving it under a short excerpt, which is what makes a row of
	 * cards read as a row.
	 */
	.btxc-post-card__meta {
		display: flex;
		align-items: center;
		gap: var(--btx-spacing-xs, 0.45rem);
		margin: 0;
		margin-block-start: auto;
		padding-block-start: var(--btx-spacing-xxs, 0.3rem);
		color: var(--btx-color-primary-1-light-40, #2e4578);
		font-size: var(--btx-font-body-s, 0.875rem);
	}

	.btxc-post-card__avatar {
		flex: none;
		width: var(--btxc-post-card-avatar-size, 1.75rem);
		height: var(--btxc-post-card-avatar-size, 1.75rem);
		border-radius: var(--btx-border-radius-round, 9999px);
		object-fit: cover;
	}

	.btxc-post-card__author {
		font-weight: 600;
	}

	.btxc-post-card__meta-sep {
		opacity: 0.6;
	}

	/* Linked card --------------------------------------------------------- */

	.btxc-post-card__link {
		color: inherit;
		text-decoration: none;
	}

	/*
	 * Stretch the title's link over the whole card. The link stays the only
	 * focusable element and keeps the title as its accessible name; only the hit
	 * area grows.
	 */
	.btxc-post-card__link::after {
		content: "";
		position: absolute;
		inset: 0;
	}

	.btxc-post-card--linked:hover {
		border-color: var(--btx-color-primary-1, #1a2744);
	}

	.btxc-post-card--linked:hover .btxc-post-card__link {
		text-decoration: underline;
		text-underline-offset: 0.15em;
	}

	.btxc-post-card--linked:hover .btxc-post-card__image {
		transform: scale(1.04);
	}

	/* Focus lands on the link, but the card is what the user sees. */
	.btxc-post-card:has(.btxc-post-card__link:focus-visible) {
		outline: 2px solid var(--btx-color-primary-1, #1a2744);
		outline-offset: 2px;
	}

	.btxc-post-card__link:focus-visible {
		outline: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	@layer bertex-components {
		.btxc-post-card,
		.btxc-post-card__image {
			transition-duration: 0.01ms;
		}

		.btxc-post-card--linked:hover .btxc-post-card__image {
			transform: none;
		}
	}
}