/* ============================================================
 * BIOTA · PRIMITIVE · Tile
 * Image card with a dark scrim (theme.json gradient preset on the Cover)
 * and text overlaid at the bottom-left. Pair with .biota-card on the same
 * Cover for the hover lift. A --featured modifier gives a larger hero tile.
 * ============================================================ */

.biota-tile {
	min-height: 130px;
	border-radius: 16px;
	overflow: hidden;
	padding: var(--wp--preset--spacing--bt-40); /* 22px (Figma) */
}

.biota-tile .wp-block-cover__inner-container {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.biota-tile__title {
	margin: 0;
	color: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--title-sm);
	line-height: 1.15;
}
/* Card title is a link; keep it the tile's white, no underline. The whole
   tile is clickable too — see card-links.js (a CSS stretched-link doesn't
   reach past WP core's shrink-wrapped .wp-block-cover__inner-container). */
.biota-tile__title a {
	color: inherit;
	text-decoration: none;
}

.biota-tile__sub {
	margin: 0;
	color: var(--wp--preset--color--base);
	font-size: var(--wp--preset--font-size--caption);
}

/* Larger featured tile — badge pinned to the top, title + sub at the bottom. */
.biota-tile--featured {
	min-height: 210px;
	border-radius: 20px;
	padding: 26px;
}
/* Fill the tile height so the badge and text can sit at opposite ends. */
.biota-tile--featured .wp-block-cover__inner-container {
	align-self: stretch;
	justify-content: flex-start;
	gap: 4px;
}
/* Push the title (and the sub after it) down to the bottom; badge stays on top. */
.biota-tile--featured .biota-tile__title {
	margin-top: auto;
	font-size: var(--wp--preset--font-size--heading);
}

/* Mobile: tighter padding, sized proportionally to each tile. Small tiles get
   14px all round; the larger Kamera hero keeps roomier 17px/20px padding
   (badge 17px from the top, text 17px from the bottom, 20px from the sides). */
@media (max-width: 899px) {
	.biota-tile {
		padding: 14px;
	}
	.biota-tile--featured {
		padding: 17px 20px;
	}
}

/* --------------------------------------------------------------
 * Hover lift — shared by tiles, product cards and review cards.
 * Apply class "biota-card" alongside the card's own class.
 * -------------------------------------------------------------- */
.biota-card {
	cursor: pointer; /* the whole card is clickable, via card-links.js */
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.biota-card:hover,
.biota-card:focus-within {
	transform: translateY(-3px);
	box-shadow: 0 16px 40px -20px rgba(16, 44, 87, 0.28);
}
@media (prefers-reduced-motion: reduce) {
	.biota-card {
		transition: none;
	}
}