/*
 * Product cards (inc/helpers.php ab_product_card): avalon/product-cards, avalon/product-list, avalon/text-image with
 * products (their layout in text-image.css) and avalon/posts with products.
 *
 * In the language of the product categories on /fi/tuotteet/ (categories.css, the model): the picture on a tile, the
 * name and the note on the section's own background below or beside the tile. The tile is the only colour of a
 * product (2026-09-25: no card colour of its own, no border, no shadow, no hover effect): the tint on white and navy
 * sections, white on light sections (--ab-tint is white there, blocks.css .ab-bg-light). On dark sections the text is
 * white and the "Pyydä tarjous" button turquoise.
 *
 * Shapes by screen width:
 * - phones (<=768px): rows, the tile 96px at the left, name + note + "Katso tuote ›" at the right;
 * - tablets (769-1024px): the same rows, two side by side (1, 3 or 5: one column; a longer odd list: the last row
 *   runs across);
 * - desktop (>=1025px): in a grid (product-cards "grid", product-list, the posts block) the 4:3 tile with the text
 *   below it, the text 20px in from the tile's edge as in the model.
 * The "list" style: compact rows at every width, an 80px tile (72px on phones), the name and the note beside it.
 * The name's link covers the whole product (one link per product); the "Pyydä tarjous" button sits above it.
 * No image (or only a logo, helpers.php ab_is_logo_image): a navy tile with the company's real logo, the header's
 * (helpers.php ab_brand_logo; the same look as WooCommerce's placeholder, assets/img/placeholder.png). Never an
 * imitation of the logo.
 * In the editor, avalon/text-image previews its products through avalon/product-cards with the class .ab-pcards--ti:
 * the desktop card rules skip it, as the text-image column decides the look (text-image.css).
 */

/* ------------------------------------------------------------ the grid (avalon/product-cards) */

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

@media (min-width: 769px) {
	/* two rows side by side (one when the column is narrower than 2 x 260px) */
	.ab-pcards--grid {
		grid-template-columns: repeat(auto-fill, minmax(max(260px, calc((100% - var(--ab-gap, 32px)) / 2 - 1px)), 1fr));
		gap: 28px var(--ab-gap, 32px);
	}

	/* rows of at least 360px: a name like "Umpisäiliö erikoismatala IISI 3000 L" on one line next to the tile (two
	   lists side by side in a half-width column are one column each) */
	.ab-pcards--list {
		grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 1fr));
	}
}

/* tablets: no row alone next to an empty half at the end. 1, 3 or 5 products (not a "list" of 3 or 5, below): one
   column of full-width rows (the same rule for the products of the Artikkelit block is in posts.css); a longer odd
   list (a category page's 11 products) keeps two per row and its last row runs across. */
@media (min-width: 769px) and (max-width: 1024px) {
	.ab-pcards:has(> .ab-product:last-child:nth-child(odd)):not(:has(> .ab-product:nth-child(6))):not(.ab-pcards--list:has(> .ab-product:nth-child(3))) {
		grid-template-columns: minmax(0, 1fr);
	}

	.ab-pcards > .ab-product:nth-child(n+7):nth-child(odd):last-child {
		grid-column: 1 / -1;
	}
}

@media (min-width: 1025px) {
	/* at most --ab-cols cards side by side (render.php: the block's setting, or fewer when there are fewer products),
	   each at least 240px and at most 360px wide, from the left edge (with the text): two products are two cards,
	   not two thirds of a row (the grid is at most --ab-cols cards of 360px wide). A full row ends at the section's
	   right edge, as the model; when --ab-cols cards of 240px do not fit (four at 1025-1110px), fewer per row fill the
	   width instead of leaving an empty strip at the right. 24px between the cards, 40px between the rows (the text
	   below the tiles needs the air). (The quarter pixel only keeps rounding from dropping a column.) */
	.ab-pcards--grid {
		grid-template-columns: repeat(auto-fill, minmax(max(240px, calc((100% - (var(--ab-cols, 4) - 1) * 24px) / var(--ab-cols, 4) - 0.25px)), 1fr));
		gap: 40px 24px;
	}

	.ab-pcards--grid:not(.ab-pcards--ti) {
		max-width: calc(var(--ab-cols, 4) * var(--ab-pcard-max, 360px) + (var(--ab-cols, 4) - 1) * 24px);
	}
}

/* ------------------------------------------------------------ the product (a row) */

.ab-product {
	position: relative;
	display: grid;
	grid-template-columns: 96px minmax(0, 1fr);
	align-items: center;
	gap: 16px;
	min-width: 0;
	box-sizing: border-box;
	color: inherit;
}

/* the picture: no tile colour (2026-10-01, the user's CSS: background none), the product straight on the section's
   own background */
.ab-product__media {
	position: relative;
	display: block;
	aspect-ratio: 1;
	overflow: hidden;
	background: none;
}

/* (light sections: the picture area takes the section's own colour, so it looks like no background. The photos'
   white backgrounds blend away with multiply only against a colour inside the section's container: .ab-container is
   its own stacking context, z-index 1, so the section's colour behind it does not count) */
.ab-bg-light .ab-product__media:not(.ab-product__media--none) {
	background: var(--wp--preset--color--light, #f2f6f8);
}

/* ...except on dark sections: a product photo with a white or transparent background needs a light tile there, or
   the product (mostly black or dark grey) disappears into the navy */
.is-dark .ab-product__media:not(.ab-product__media--none) {
	background: var(--ab-tint, #eaf8f9);
}

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

/* no image: the real logo on navy, at most its own size (132px, the header's file) */
.ab-product__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);
}

/* ...and on a dark section a lighter navy, so the tile still reads as a tile next to the tint ones */
.is-dark .ab-product__media--none {
	background: rgba(255, 255, 255, 0.08);
}

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

.ab-product__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	align-items: flex-start;
	min-width: 0;
	padding: 0;
	font-size: 15px;
	line-height: 1.45;
}

/* the name never breaks inside a word and is not hyphenated (whole product names); white on dark sections
   (--ab-heading, blocks.css .is-dark) */
.ab-product .ab-product__title {
	margin: 0 0 6px;
	color: var(--ab-heading);
	font-size: var(--ab-item-size, 17px);
	font-weight: 700;
	line-height: 1.3;
	overflow-wrap: normal;
	word-break: normal;
	hyphens: manual;
	text-wrap: pretty;
}

.ab-product .ab-product__link {
	color: inherit;
	text-decoration: none;
}

/* the name's link covers the product (no hover effect: the pointer says it) */
.ab-product .ab-product__link::after {
	content: "";
	position: absolute;
	z-index: 1;
	inset: -4px;
}

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

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

.ab-product__note {
	margin: 0;
	color: var(--ab-muted, #4a5563);
	font-size: 14px;
	line-height: 1.45;
}

.is-dark .ab-product__note {
	color: rgba(255, 255, 255, 0.8);
}

.ab-product__cats {
	position: relative;
	z-index: 2; /* its links above the product link */
	margin: 4px 0 0;
	font-size: 14px;
	line-height: 1.4;
}

.ab-product__cats span {
	margin-right: 4px;
}

.ab-product__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 16px;
	width: 100%;
	margin-top: 10px;
}

.ab-product__more {
	margin: 0;
	color: var(--ab-navy, #002b56);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.3;
	text-decoration: none;
}

.is-dark .ab-product__more {
	color: #fff;
}

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

/* "Pyydä tarjous" (opens the quote form, inc/quote-modal.php): navy, turquoise with navy text on dark sections */
.ab-product__buy {
	position: relative;
	z-index: 2;
	padding: 0;
}

.ab-product .ab-product__buy .button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-height: var(--ab-tap, 44px);
	margin: 0;
	padding: 0 18px;
	border: 0;
	border-radius: 0;
	background: var(--ab-navy, #002b56);
	color: #fff;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
}

.ab-product .ab-product__buy .button:hover,
.ab-product .ab-product__buy .button:focus-visible {
	background: #00436b;
	color: #fff;
}

.is-dark .ab-product .ab-product__buy .button {
	background: var(--ab-accent, #30cbd3);
	color: var(--ab-navy, #002b56);
}

.is-dark .ab-product .ab-product__buy .button:hover,
.is-dark .ab-product .ab-product__buy .button:focus-visible {
	background: var(--ab-accent-hover, #28b5bd);
	color: var(--ab-navy, #002b56);
}

.ab-product .ab-product__buy .button:focus-visible {
	outline: 3px solid var(--ab-accent, #30cbd3);
	outline-offset: 2px;
}

.is-dark .ab-product .ab-product__buy .button:focus-visible {
	outline-color: #fff;
}

/* small phones: a smaller tile leaves room for long names ("Fosforinsaostuskemikaalit" needs 203px at 17px) */
@media (max-width: 380px) {
	.ab-product {
		grid-template-columns: 80px minmax(0, 1fr);
		gap: 12px;
	}
}

/* phones, a product with "Pyydä tarjous": a 72px tile (64px on small phones) and a compact 44px button on the same
   line as "Katso tuote ›", so the row stays about 140px instead of 190-230px with the button on a line of its own.
   A long name that needs the room still wraps the button below. */
@media (max-width: 768px) {
	.ab-product.ab-product--quote {
		grid-template-columns: 72px minmax(0, 1fr);
		gap: 12px;
	}

	.ab-product--quote .ab-product__foot {
		justify-content: space-between;
		gap: 8px 10px;
		margin-top: 6px;
	}

	.ab-product.ab-product--quote .ab-product__buy .button {
		padding: 0 12px;
		font-size: 14px;
	}
}

@media (max-width: 380px) {
	.ab-product.ab-product--quote {
		grid-template-columns: 64px minmax(0, 1fr);
		gap: 10px;
	}
}

/* ------------------------------------------------------------ desktop: the tile above the text in the grids */

@media (min-width: 1025px) {
	/* the product is a size container: narrow cards (below 290px) get 16px sides, see below */
	:is(.ab-pcards--grid:where(:not(.ab-pcards--ti)), .ab-posts--products) .ab-product {
		container: ab-card / inline-size;
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: auto 1fr;
		align-items: stretch;
		gap: 0;
	}

	:is(.ab-pcards--grid:where(:not(.ab-pcards--ti)), .ab-posts--products) .ab-product__media {
		aspect-ratio: 4 / 3;
	}

	:is(.ab-pcards--grid:where(:not(.ab-pcards--ti)), .ab-posts--products) .ab-product__img {
		padding: 7% 10%;
	}

	/* the text 20px in from the tile's edge, as in the model */
	:is(.ab-pcards--grid:where(:not(.ab-pcards--ti)), .ab-posts--products) .ab-product__body {
		padding: 16px 20px 0;
	}

	/* the model's type: the name at the item size (18px; 17px in a narrow card, below), the note 15px */
	:is(.ab-pcards--grid:where(:not(.ab-pcards--ti)), .ab-posts--products) .ab-product__note {
		font-size: 15px;
		line-height: 1.5;
	}

	/* "Katso tuote" and the button at the bottom: the products of a row end at the same line */
	:is(.ab-pcards--grid:where(:not(.ab-pcards--ti)), .ab-posts--products) .ab-product__foot {
		margin-top: auto;
		padding-top: 12px;
	}
}

/* narrow cards (240-290px, e.g. four in a row at 1112-1320px): 16px sides and a 17px name, as the model
   ("Fosforinsaostuskemikaali" is 209px at 18px, the card's text 208px at 240px) */
@container ab-card (max-width: 290px) {
	:is(.ab-pcards--grid:where(:not(.ab-pcards--ti)), .ab-posts--products) .ab-product__body {
		padding-inline: 16px;
	}

	:is(.ab-pcards--grid:where(:not(.ab-pcards--ti)), .ab-posts--products) .ab-product .ab-product__title {
		font-size: 17px;
	}
}

/* ------------------------------------------------------------ "list": compact rows (e.g. the sizes of a range) */
/* an 80px tile (72px on phones) with the name and the note beside it; 24px between the rows and the grid gap between
   the columns. The tile follows the section: the tint on white and navy, white on light (2026-09-25: the rows had
   no tile at all and nothing marked the products on a light section). */

.ab-pcards--list {
	gap: 24px var(--ab-gap, 20px);
}

.ab-pcards--list .ab-product {
	grid-template-columns: 80px minmax(0, 1fr);
	gap: 20px;
}

.ab-pcards--list .ab-product .ab-product__title {
	margin: 0;
	font-size: var(--ab-item-size, 17px);
}

.ab-pcards--list .ab-product__note {
	margin-top: 4px;
}

@media (max-width: 768px) {
	.ab-pcards--list .ab-product {
		grid-template-columns: 72px minmax(0, 1fr);
		gap: 16px;
	}
}

/* tablets: a list of 3 or 5 is two rows side by side too (its last row runs across), not one column of rows in a
   750px wide section */
@media (min-width: 769px) and (max-width: 1024px) {
	.ab-pcards--list:has(> .ab-product:nth-child(3)) {
		grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
	}

	.ab-pcards.ab-pcards--list > .ab-product:last-child:nth-child(odd):not(:first-child) {
		grid-column: 1 / -1;
	}
}

.ab-pcards--list :is(.ab-product__foot, .ab-product__cats) {
	display: none;
}

/* no image: the logo a little wider on the small tile */
.ab-pcards--list .ab-product .ab-product__logo {
	width: 84%;
}

/* ------------------------------------------------------------ products in the Artikkelit block (6019) */

/* tablets: rows two side by side, as in the product grid (a row needs about 300px: "Harmaavesipuhdistamo" alone is
   190px at 18px), whatever the block's tablet column setting */
@media (min-width: 769px) and (max-width: 1024px) {
	.ab-posts.ab-posts--products .ab-grid.ab-grid {
		grid-template-columns: repeat(auto-fill, minmax(max(260px, calc((100% - 24px) / 2 - 1px)), 1fr));
	}

	/* an odd number in one column (posts.css): the rows as far apart as the product grid's (28px, not 12px) */
	.ab-posts.ab-posts--products .ab-grid.ab-grid:has(> .ab-product:last-child:nth-child(odd)) {
		row-gap: 28px;
	}
}

/* desktop: the product grid's spacing (24px between the cards, 40px between the rows), not the articles' 48px */
@media (min-width: 1025px) {
	.ab-posts.ab-posts--products .ab-grid {
		gap: 40px 24px;
	}
}

@media (max-width: 768px) {
	/* rows, one per line (the block's "two side by side on phones" was for the old square cards) */
	.ab-posts.ab-posts--products .ab-grid {
		grid-template-columns: minmax(0, 1fr) !important;
		gap: 24px;
	}

	.ab-posts--products .ab-product .ab-product__title {
		font-size: var(--ab-item-size, 17px);
	}
}