/*
 * The lines on the home page: one tile per line.
 *
 * The tiles speak the product cards' language — chalk on linen, no border,
 * lifting on hover — because they are the same promise one level up: click
 * anywhere and you are in.
 */
.haft-linie__lista {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 260px, 1fr ) );
	gap: 24px;
	margin: 32px 0 0;
	padding: 0;
	list-style: none;
}

.haft-linia {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var( --haft-kreda );
	border-radius: var( --haft-radius-karta );
	padding: 12px 12px 20px;
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.haft-linia:hover,
.haft-linia:focus-within {
	transform: translateY( -4px );
	box-shadow: 0 12px 28px rgba( 23, 26, 33, 0.14 );
}

.haft-linia__foto {
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: calc( var( --haft-radius-karta ) - 4px );
	background: var( --haft-len );
}

.haft-linia__foto img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
}

.haft-linia:hover .haft-linia__foto img,
.haft-linia:focus-within .haft-linia__foto img {
	transform: scale( 1.04 );
}

.haft-linia__nazwa {
	margin: 16px 8px 4px;
	font-size: 1.75rem;
}

/*
 * `.haft-linia` in front of the link rules: in the block editor Blocksy colours
 * every link in the canvas red from a rule that outranks a single class.
 */
.haft-linia .haft-linia__link {
	color: var( --haft-atrament );
	text-decoration: none;
}

/* The whole tile is the line's link, as on the product cards (catalog.css). */
.haft-linia__link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.haft-linia__opis {
	margin: 0 8px 12px;
	font-size: 0.95rem;
	color: #4a505c;
}

.haft-linia__podkategorie {
	position: relative;
	z-index: 2;
	display: flex;
	flex-wrap: wrap;
	gap: 6px 16px;
	margin: auto 8px 0;
	padding: 0;
	list-style: none;
	font-family: var( --haft-font-kod );
	font-size: 0.75rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.haft-linia .haft-linia__podkategorie a {
	color: var( --haft-atrament );
	text-decoration: none;
}

.haft-linia .haft-linia__podkategorie a:hover,
.haft-linia .haft-linia__podkategorie a:focus-visible {
	color: var( --haft-mulina );
}

.haft-linie__napis {
	margin: 24px 0 0;
	text-align: center;
	font-weight: 700;
}

.haft-linie__napis a {
	color: var( --haft-mulina );
}

@media ( prefers-reduced-motion: reduce ) {
	.haft-linia,
	.haft-linia__foto img {
		transition: none;
	}

	.haft-linia:hover,
	.haft-linia:focus-within,
	.haft-linia:hover .haft-linia__foto img,
	.haft-linia:focus-within .haft-linia__foto img {
		transform: none;
	}
}