/**
 * Category tile — the four "Sladké aj slané…" cards.
 *
 * Shared by the homepage and the About page, so it lives here rather than in
 * pages/home.css. Class names keep the .home- prefix they were generated with;
 * inc/home.php builds the markup for both pages. See DESIGN-SYSTEM.md §5.
 *
 * The page owns the grid around the cards, the component owns the card itself.
 */

.home-cat-card {
	position: relative;
	display: block;
	padding: var( --space-34 ) var( --space-24 ) var( --space-30 );
	border-radius: var( --radius-28 );
	text-align: center;
	background: var( --surface-raised );
	border: 1px solid var( --c-cocoa-a08 );
	box-shadow: var( --shadow-card-alt );
	transition: transform .3s, box-shadow .3s;
}

.home-cat-card:hover {
	transform: translateY( -8px );
	box-shadow: var( --shadow-float );
}

.home-cat-card__badge {
	position: absolute;
	top: var( --space-18 );
	left: var( --space-18 );
	padding: var( --space-5 ) var( --space-12 );
	border-radius: var( --radius-pill );
	background: var( --c-honey-100 );
	font-size: var( --fs-11 );
	font-weight: var( --fw-black );
	letter-spacing: var( --ls-eyelet );
	text-transform: uppercase;
	color: var( --color-heading );
}

.home-cat-card__badge--eco {
	background: var( --c-green-100 );
	color: var( --c-green-700 );
}

.home-cat-card__img {
	width: var( --space-172 );
	height: var( --space-172 );
	margin: 0 auto var( --space-22 );
	border-radius: var( --radius-circle );
	outline: var( --space-5 ) solid var( --c-honey-100 );
	outline-offset: var( --space-6 );
	object-fit: cover;
}

.home-cat-card--eco .home-cat-card__img {
	outline-color: var( --c-green-100 );
}

.home-cat-card__title {
	margin-bottom: var( --space-6 );
	font-size: var( --fs-22 );
	font-weight: var( --fw-560 );
	/* Mockup leaves this h3 without an explicit line-height override, so it
	 * renders at the body's inherited 1.65 rather than the 1.12 heading
	 * default — matches the flattened reference render exactly. */
	line-height: var( --lh-base );
}

.home-cat-card__text {
	margin-bottom: var( --space-18 );
	font-size: var( --fs-14-5 );
}

/* Dot + label CTA reused by category tiles and recipe cards. */
.home-cta-link {
	display: inline-flex;
	align-items: center;
	gap: var( --space-8 );
	font-size: var( --fs-15 );
	font-weight: var( --fw-black );
	color: var( --color-heading );
}

.home-cta-link::before {
	content: "";
	width: var( --space-8 );
	height: var( --space-8 );
	border-radius: var( --radius-circle );
	background: var( --c-honey-500 );
}