/*
 * Product categories (avalon/product-categories, blocks/product-categories/render.php) in the product cards'
 * language (products.css): white cards with a hairline, the picture on the tint, the name at the item size and a
 * short description. The name's link covers the whole card (one link per category).
 * - phones (<=768px): rows, the picture 96px at the left, the name (17px), 2 lines of the description, a chevron;
 * - tablets (769-1024px): cards two side by side, the picture 4:3, the name 18px, 3 lines, "Katso tuotteet ›";
 * - desktop (>=1025px): the same cards, --ab-cols side by side (render.php: the balanced count, e.g. 9 -> 3 per row,
 *   10 -> 5 per row), at least 232px wide (narrower screens fit fewer per row); the name 20px (18px below 290px).
 * The last row is always full: the cards are a wrapping flex row, and the cards of the last row grow to fill it
 * (7 in rows of 4: 4 + 3 wider cards). A card of 480px or more (one alone or two on the last row, e.g. 9 at 820px
 * or 10 in rows of 4) is a wide card: the picture at the left (at most 40 % / 320px), the text beside it.
 * No picture (or only a logo, render.php): a navy tile with the company's real logo (the header's), as for products.
 */

.ab-cats {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 16px;
}

/* ------------------------------------------------------------ the card (a row on phones) */

.ab-cat {
	--ab-heading: var(--wp--preset--color--heading, #012b55); /* dark text also in dark sections: the card is white */
	position: relative;
	display: grid;
	grid-template-columns: 96px minmax(0, 1fr) 16px;
	align-items: center;
	gap: 12px;
	min-width: 0;
	box-sizing: border-box;
	padding: 10px;
	border-radius: var(--ab-radius, 12px);
	background: #fff;
	color: var(--ab-body, #282828);
}


/* chevron (4px into the gap: "Harmaavesipuhdistamot" needs 187px at 17px) */
.ab-cat::after {
	content: "";
	width: 16px;
	height: 16px;
	margin-left: -4px;
	background-color: var(--ab-navy, #002b56);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E") center / contain no-repeat;
}

.ab-cat__media {
	position: relative;
	display: block;
	aspect-ratio: 1;
	overflow: hidden;
	border-radius: var(--ab-radius-s, 8px);
	background: var(--ab-tint, #eaf8f9);
}

/* (two classes: WooCommerce's ".woocommerce-page img { height: auto }" must not win) */
.ab-cat .ab-cat__img {
	position: absolute;
	inset: 0;
	display: block;
	box-sizing: border-box;
	width: 100%;
	max-width: none;
	height: 100%;
	aspect-ratio: auto;
	margin: 0;
	padding: 6%;
	object-fit: contain;
	mix-blend-mode: multiply; /* white picture backgrounds take the tint */
}

/* no picture: the company's real logo on navy (the header's file, helpers.php ab_brand_logo; never an imitation of
   the logo), at most its own size */
.ab-cat__media--none {
	display: grid;
	place-items: center;
	box-sizing: border-box; /* (the padding inside the square: as high as the pictures' tiles) */
	padding: 8px;
	background: var(--ab-navy, #002b56);
}

.ab-cat .ab-cat__logo {
	display: block;
	width: min(132px, 72%);
	max-width: none;
	height: auto;
	margin: 0;
	padding: 0;
	mix-blend-mode: normal;
}

.ab-cat__body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	min-width: 0;
}

/* whole names: never broken inside a word, not hyphenated (Chrome has no Finnish hyphenation) */
.ab-cat .ab-cat__name {
	margin: 0 0 4px;
	color: var(--ab-heading);
	font-size: var(--ab-item-size, 17px);
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: normal;
	text-transform: none;
	overflow-wrap: normal;
	word-break: normal;
	hyphens: manual;
	text-wrap: pretty;
}

.ab-cat .ab-cat__link {
	color: inherit;
	text-decoration: none;
}

/* the name's link covers the card */
.ab-cat .ab-cat__link::after {
	content: "";
	position: absolute;
	z-index: 1;
	inset: -1px;
	border-radius: var(--ab-radius, 12px);
}

.ab-cat:hover .ab-cat__link {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* focus ring around the whole card: white + navy, visible on white and on navy sections */
.ab-cat .ab-cat__link:focus {
	outline: none;
}

.ab-cat .ab-cat__link:focus-visible::after {
	box-shadow: 0 0 0 2px #fff, 0 0 0 5px var(--ab-navy, #002b56);
}

.ab-cat__desc {
	display: -webkit-box;
	margin: 0;
	overflow: hidden;
	color: var(--ab-muted, #4a5563);
	font-size: 14px;
	line-height: 1.4;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
}

/* rows: the chevron says it */
.ab-cat__more {
	display: none;
}

/* small phones: a smaller picture leaves room for the long names (at 360px 192px for the name) */
@media (max-width: 380px) {
	.ab-cat {
		grid-template-columns: 72px minmax(0, 1fr) 14px;
	}

	.ab-cat::after {
		width: 14px;
		height: 14px;
	}
}

/* ------------------------------------------------------------ tablets and desktop: cards */

@media (min-width: 769px) {
	/* two per row; an odd last card grows to the full row (a wide card, see the end) */
	.ab-cats {
		display: flex;
		flex-wrap: wrap;
		gap: 40px var(--ab-gap, 32px);
	}

	.ab-cats > .ab-cat {
		flex: 1 1 calc((100% - 24px) / 2 - 0.5px);
	}

	/* the card is a size container: narrow cards (below 290px) get a smaller name, wide ones (480px and more) put
	   the picture at the left, see the end. Its two columns are for the wide card; a normal card's picture and text
	   span both. */
	.ab-cat {
		container: ab-cat / inline-size;
		grid-template-columns: min(40%, 320px) minmax(0, 1fr);
		grid-template-rows: auto 1fr;
		align-items: stretch;
		gap: 0;
		padding: 0;
	}

	.ab-cat::after {
		display: none;
	}

	.ab-cat__media,
	.ab-cat__body {
		grid-column: 1 / -1;
	}

	.ab-cat__media {
		aspect-ratio: 4 / 3;
		border-radius: max(0px, calc(var(--ab-radius, 12px) - 1px)) max(0px, calc(var(--ab-radius, 12px) - 1px)) 0 0;
	}

	.ab-cat .ab-cat__img {
		padding: 7% 10%;
	}

	.ab-cat__body {
		padding: 16px 20px 20px;
	}

	.ab-cat .ab-cat__name {
		margin-bottom: 6px;
	}

	.ab-cat__desc {
		font-size: 15px;
		line-height: 1.5;
		-webkit-line-clamp: 3;
		line-clamp: 3;
	}

	/* at the bottom of the card: the cards of a row end at the same line */
	.ab-cat__more {
		display: block;
		margin-top: auto;
		padding-top: 12px;
		color: var(--ab-navy, #002b56);
		font-size: 14px;
		font-weight: 700;
		line-height: 1.3;
	}

	.ab-cat__more::after {
		content: "\00a0\00203a";
	}

}

/* desktop: --ab-cols per row while a card stays 232px or wider (5 per row from about 1340px, 4 from 1080px) */
@media (min-width: 1025px) {
	.ab-cats > .ab-cat {
		flex-basis: max(232px, calc((100% - (var(--ab-cols, 4) - 1) * 24px) / var(--ab-cols, 4) - 0.5px));
	}
}

/* narrow cards (232-290px, e.g. five in a row at 1440px): 18px names and 16px sides ("Harmaavesipuhdistamot" is
   198px at 18px, the card's text 200px at 232px) */
@container ab-cat (max-width: 290px) {
	.ab-cat__body {
		padding-inline: 16px;
	}

	.ab-cat .ab-cat__name {
		font-size: 17px;
	}
}

/* wide card (480px and more: alone or one of two on the last row): the picture at the left over the card's height,
   the text beside it */
@container ab-cat (min-width: 480px) {
	/* at least 4:3 of its column, taller with a longer text */
	.ab-cat__media {
		grid-column: 1;
		grid-row: 1 / -1;
		aspect-ratio: auto;
		min-height: calc(min(40cqw, 320px) * 3 / 4);
		border-radius: max(0px, calc(var(--ab-radius, 12px) - 1px)) 0 0 max(0px, calc(var(--ab-radius, 12px) - 1px));
	}

	.ab-cat__body {
		grid-column: 2;
		grid-row: 1 / -1;
		justify-content: center;
		padding: 20px 24px;
	}

	.ab-cat__more {
		margin-top: 0;
	}
}