/*
 * Krugio Theme: product grid, Product Card and discount badge.
 * Every colour, size, space and shape comes from the design tokens.
 * Breakpoints (fixed): tablet >= 768px, desktop >= 1024px.
 */

/* Grid: columns per device from tokens */
.krugio-grid {
	display: grid;
	grid-template-columns: repeat(var(--krugio-columns-mobile), minmax(0, 1fr));
	gap: var(--krugio-grid-gap-row) var(--krugio-grid-gap);
	margin: 0 0 var(--krugio-space-6);
	padding: 0;
	list-style: none;
}

@media (min-width: 768px) {
	.krugio-grid {
		grid-template-columns: repeat(var(--krugio-columns-tablet), minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.krugio-grid {
		grid-template-columns: repeat(var(--krugio-columns-desktop), minmax(0, 1fr));
	}
}

/* Card */
.krugio-card {
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

.krugio-card__media {
	position: relative;
	aspect-ratio: var(--krugio-image-ratio);
	overflow: hidden;
	background: var(--krugio-color-surface);
	border-radius: var(--krugio-radius-card);
}

.krugio-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Hover image: hidden by default (a lazy image is then never fetched); touch devices never show it */
.krugio-card__img--hover {
	display: none;
}

@media (hover: hover) and (pointer: fine) {
	.krugio-card__img--hover {
		position: absolute;
		inset: 0;
		display: block;
		opacity: 0;
		transition: opacity var(--krugio-transition);
	}

	.krugio-card:hover .krugio-card__img--hover {
		opacity: 1;
	}
}

.krugio-card__body {
	padding-top: var(--krugio-space-3);
}

/* Category label (design config card_category); long names wrap. Case and spacing are left to designs. */
.krugio-card__category {
	margin: 0 0 var(--krugio-space-1);
	overflow-wrap: anywhere;
	color: var(--krugio-color-text-muted);
	font-size: var(--krugio-font-size-sm);
	line-height: 1.3;
}

/* Title clamped to the token number of lines; the full title stays in the DOM */
.krugio-card__title {
	display: -webkit-box;
	-webkit-line-clamp: var(--krugio-card-title-lines);
	-webkit-box-orient: vertical;
	margin: 0 0 var(--krugio-space-1);
	overflow: hidden;
	overflow-wrap: anywhere;
	font-size: var(--krugio-font-size-base);
}

/* The only link of the card, stretched over the whole card: one tab stop, first tap opens the product */
.krugio-card__link {
	color: var(--krugio-color-text);
	text-decoration: none;
}

.krugio-card__link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	border-radius: var(--krugio-radius-card);
}

.krugio-card__link:hover {
	color: var(--krugio-color-accent);
}

.krugio-card__price {
	font-size: var(--krugio-font-size-base);
}

.krugio-card__price del {
	margin-right: var(--krugio-space-2);
	color: var(--krugio-color-text-muted);
}

.krugio-card__price ins {
	color: var(--krugio-color-sale);
	text-decoration: none;
}

/* Discount badge: position from tokens inside the card image box */
.krugio-badge {
	display: inline-block;
	padding: var(--krugio-space-1) var(--krugio-space-2);
	background: var(--krugio-color-sale);
	color: var(--krugio-color-on-sale);
	border-radius: var(--krugio-radius-badge);
	font-size: var(--krugio-badge-size);
	font-weight: var(--krugio-weight-heading);
	line-height: 1;
}

.krugio-card__media .krugio-badge {
	position: absolute;
	top: var(--krugio-badge-top);
	left: var(--krugio-badge-left);
	z-index: 1;
}