/*
 * Linkkikortit (avalon/link-cards + avalon/link-card): cards that are each one link.
 *
 * "image" (2026-09-25, "tasaa kortin teksti kuvan kanssa"): the picture is the card's only surface. The title and the
 * line below it sit on the section's own background, flush with the picture's left edge: no card colour, no inner
 * padding, no hover effect (as the product categories, categories.css).
 * - tablets and desktops: tiles, the picture above the text and the chevron at the right end of the title's first
 *   line (its stroke on the picture's right edge). The picture is 4:5 as the article pictures (posts.css; the two
 *   blocks meet on the same pages), 1:1 on tablets held sideways (900-1024px), 4:3 with two per row on desktops (a
 *   4:5 picture in a 630px column would be almost 800px high). On tablets an odd number of image cards (ab-lc--odd, render.php) is one column of rows with a
 *   120 x 90 picture instead, so no card is left alone on the last row.
 * - phones: rows, a 96px square picture on the section's left edge (as the article and product category rows; 72px
 *   below 381px), the title and the line, a chevron at the right.
 * Product pictures (the block style "Tuotekuvat", class is-style-products, inc/block-styles.php; the hub's product
 * category groups): the picture whole on a tint tile (white on light sections, components/base.css) as in the
 * product categories: contained with some air, its white background multiplied into the tile (the tile is the card's
 * ::before, the img has no wrapper), 4:3 tiles and square ones in the rows; exactly three cards are three tiles
 * across on tablets. Photos (the default) fill their frame; they are drawn wider than a tall frame, and their sizes
 * (link-card/render.php) are the width they are drawn at, so the browser picks a sharp enough file.
 * "text": rows with a chevron (1 column on phones, 2 on tablets, the block's columns on desktops), on the tint (white
 * on light sections: a white row on a white section was invisible and its text looked indented).
 * A group title (h3, titleLevel 3) sits closer to its cards than to the group above it.
 * The title link is stretched over the whole card (::after), so a card is one tap target and one tab stop, and the
 * focus ring goes around the card.
 */

/* ------------------------------------------------------------ in-page jump targets */

/* (a jump card's target stops 88px from the top: the theme's scroll padding + scroll margin, style.css) */
@media (prefers-reduced-motion: no-preference) {
	html:has(.ab-lc--jump) {
		scroll-behavior: smooth;
	}
}

/* ------------------------------------------------------------ grid */

.ab-lc__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* phones: picture rows without a card around them need a little more air between them */
.ab-lc--image .ab-lc__grid {
	gap: 20px;
}

/* tiles use the grid gap (32 / 48px), rows stay closer together */
@media (min-width: 769px) {
	.ab-lc__grid,
	.ab-lc--image .ab-lc__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--ab-gap, 24px);
	}

	.ab-lc--text .ab-lc__grid {
		gap: 20px var(--ab-gap, 32px);
	}
}

@media (min-width: 1025px) {
	.ab-lc__grid,
	.ab-lc--image .ab-lc__grid {
		grid-template-columns: repeat(var(--ab-cols, 2), minmax(0, 1fr));
	}

	.ab-lc--text .ab-lc__grid {
		gap: 24px var(--ab-gap, 48px);
	}
}

/* ------------------------------------------------------------ card (text rows; the base of the image cards) */

.ab-lc__card {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: 12px;
	box-sizing: border-box;
	min-height: 64px;
	margin: 0;
	padding: 14px 14px 14px 18px;
	border-radius: var(--ab-radius, 0px);
	background: var(--ab-tint, #eaf8f9);
	color: var(--wp--preset--color--body, #282828);
}

.ab-lc__body {
	min-width: 0;
}

/* item name, 16 / 17 / 18px (double class: stronger than the theme's heading sizes and margins) */
.ab-lc .ab-lc__title {
	margin: 0;
	color: var(--ab-heading, #012b55);
	font-size: var(--ab-item-size, 17px);
	font-weight: 700;
}

/* (the theme sets the h2 line height with :root:root :is(h2, …)) */
:root:root .ab-lc .ab-lc__title {
	line-height: 1.3;
}

.ab-lc .ab-lc__link {
	color: inherit;
	text-decoration: none;
}

/* the link covers the whole card; no hover effect on the cards (2026-09-25), the keyboard focus ring stays */
.ab-lc .ab-lc__link::after {
	content: "";
	position: absolute;
	inset: -1px;
	z-index: 1;
	border-radius: var(--ab-radius, 0px);
}

/* the focus ring goes around the card (the card's own outline: its overflow does not clip it) */
.ab-lc .ab-lc__link:focus {
	outline: none;
}

.ab-lc__card:has(.ab-lc__link:focus-visible) {
	outline: 3px solid var(--ab-navy, #002b56);
	outline-offset: 3px;
}

@supports not selector(:has(*)) {
	.ab-lc .ab-lc__link:focus-visible::after {
		outline: 3px solid var(--ab-navy, #002b56);
		outline-offset: 3px;
	}
}

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

/* chevron: a plain navy stroke, no circle (the chevron in a tint circle is the accordion's) */
.ab-lc__chev {
	display: grid;
	place-items: center;
	flex: none;
	width: 24px;
	height: 32px;
	background: none;
	color: var(--ab-navy, #002b56);
}

.ab-lc__chev svg {
	display: block;
	width: 18px;
	height: 18px;
}

/* a jump card (an #anchor of this page): a plain arrow down */
.ab-lc .ab-lc__card--jump .ab-lc__chev svg {
	width: 20px;
	height: 20px;
}

/* a group title one level down (titleLevel 3, render.php): the size of an h3, 18 / 19 / 21px */
.ab-lc .ab-head h3.ab-title {
	font-size: 18px;
	line-height: 1.3;
}

@media (min-width: 769px) {
	.ab-lc .ab-head h3.ab-title {
		font-size: 19px;
	}
}

@media (min-width: 1025px) {
	.ab-lc .ab-head h3.ab-title {
		font-size: 21px;
	}
}

/* ... and half the head gap below it (12 / 16 / 24px): with the section's top padding above it (24 / 32 / 48px) the
   title reads as the label of its own cards, not as the end of the group above (the hub's "Kaikki talousjätevedet
   yhdessä" and "Pesuvedet erikseen") */
.ab-lc .ab-head:has(> h3.ab-title) {
	margin-bottom: calc(var(--ab-head-gap, 24px) / 2);
}

/* ------------------------------------------------------------ image cards: phones (rows) */

/* no card surface: the picture is the card's one colour, the text is on the section's background */
.ab-lc--image .ab-lc__card {
	grid-template-columns: 96px minmax(0, 1fr) 18px;
	column-gap: 14px;
	padding: 0;
	background: none;
}

.ab-lc .ab-lc__img {
	display: block;
	grid-column: 1;
	grid-row: 1;
	box-sizing: border-box;
	width: 96px;
	max-width: none;
	height: 96px;
	margin: 0;
	border-radius: 0;
	object-fit: cover;
}

.ab-lc .ab-lc__img--empty {
	background: var(--ab-tint, #eaf8f9);
}

.ab-lc--image .ab-lc__body {
	grid-column: 2;
	grid-row: 1;
}

/* the chevron's stroke ends on the card's right edge (the 18px box has 6px of air at the right) */
.ab-lc--image .ab-lc__chev {
	grid-column: 3;
	grid-row: 1;
	justify-self: end;
	width: 18px;
	height: 24px;
	margin-right: -6px;
}

@media (max-width: 380px) {
	.ab-lc--image .ab-lc__card {
		grid-template-columns: 72px minmax(0, 1fr) 18px;
	}

	.ab-lc .ab-lc__img {
		width: 72px;
		height: 72px;
	}
}

@media (max-width: 374px) {
	.ab-lc--image .ab-lc__title {
		font-size: 16px;
	}
}

/* ------------------------------------------------------------ image cards: tablets and desktops (tiles) */

@media (min-width: 769px) {
	.ab-lc--image .ab-lc__card {
		grid-template-columns: minmax(0, 1fr) 18px;
		grid-template-rows: auto 1fr;
		align-items: start;
		gap: 0 12px;
		min-height: 0;
	}

	.ab-lc--image .ab-lc__img {
		--ab-lc-ratio: 0.8;
		grid-column: 1 / -1;
		width: 100%;
		height: auto;
		aspect-ratio: var(--ab-lc-ratio);
	}

	.ab-lc--image .ab-lc__body {
		grid-column: 1;
		grid-row: 2;
		padding-top: 16px;
	}

	/* on the title's first line (the title's line box is 1.3 x the item size) */
	.ab-lc--image .ab-lc__chev {
		grid-column: 2;
		grid-row: 2;
		height: calc(var(--ab-item-size, 17px) * 1.3);
		margin-top: 16px;
	}
}

/* tablets held sideways (900-1024px): two per row 1:1 (a 4:5 picture was 580px high on a 768px high screen), as the
   article pictures (posts.css) */
@media (min-width: 900px) and (max-width: 1024px) {
	.ab-lc--image .ab-lc__img {
		--ab-lc-ratio: 1;
	}
}

/* desktops: two per row 4:3 (--ab-cols is the grid's inline style, render.php and the editor) */
@media (min-width: 1025px) {
	.ab-lc--image .ab-lc__grid:is([style*="--ab-cols:2"], [style*="--ab-cols: 2"]) .ab-lc__img {
		--ab-lc-ratio: 1.3333;
	}

	.ab-lc .ab-lc__text {
		font-size: 16px;
		line-height: 1.5;
	}
}

/* tablets, an odd number of image cards: 2 columns would leave the last card alone on its row, so the cards are one
   column of rows with a 120 x 90 picture (three tiles across left photo titles about 190px). Not three product
   cards: they are three tiles across (below). */
@media (min-width: 769px) and (max-width: 1024px) {
	.ab-lc--image.ab-lc--odd:not(.is-style-products:has(.ab-lc__card:nth-child(3):last-child)) .ab-lc__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 20px;
	}

	.ab-lc--image.ab-lc--odd:not(.is-style-products:has(.ab-lc__card:nth-child(3):last-child)) .ab-lc__card {
		grid-template-columns: 120px minmax(0, 1fr) 18px;
		grid-template-rows: auto;
		align-items: center;
		column-gap: 20px;
	}

	.ab-lc--image.ab-lc--odd:not(.is-style-products:has(.ab-lc__card:nth-child(3):last-child)) .ab-lc__img {
		grid-column: 1;
		width: 120px;
		height: 90px;
		aspect-ratio: auto;
	}

	.ab-lc--image.ab-lc--odd:not(.is-style-products:has(.ab-lc__card:nth-child(3):last-child)) .ab-lc__body {
		grid-column: 2;
		grid-row: 1;
		padding: 0;
	}

	.ab-lc--image.ab-lc--odd:not(.is-style-products:has(.ab-lc__card:nth-child(3):last-child)) .ab-lc__chev {
		grid-column: 3;
		grid-row: 1;
		height: 24px;
		margin-top: 0;
	}

	.is-style-products.ab-lc--image .ab-lc__grid:has(> .ab-lc__card:nth-child(3):last-child) {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	/* text rows: two side by side as usual, the last one of an odd number runs across (one 750px column of
	   one-line rows left a wide empty band) */
	.ab-lc--text.ab-lc--odd .ab-lc__grid > .ab-lc__card:last-child {
		grid-column: 1 / -1;
	}
}

@media (min-width: 1025px) {
	.ab-lc--text .ab-lc__card {
		min-height: 80px;
		padding: 18px 18px 18px 24px;
	}
}

@media (min-width: 769px) and (max-width: 1024px) {
	.ab-lc--text .ab-lc__card {
		padding: 16px 16px 16px 20px;
	}
}

/* ------------------------------------------------------------ product pictures (is-style-products) */

/* the tint tile behind the picture, in the picture's grid cell and of its size */
.is-style-products.ab-lc--image .ab-lc__card::before {
	content: "";
	grid-column: 1;
	grid-row: 1;
	align-self: center;
	background: var(--ab-tint, #eaf8f9);
}

.is-style-products.ab-lc--image .ab-lc__img {
	object-fit: contain;
	object-position: 50% 50%;
	mix-blend-mode: multiply; /* white picture backgrounds take the tile's colour */
}

/* phones: the tile is the row's 96px square (72px below 381px), as the product categories' rows */
@media (max-width: 768px) {
	.is-style-products.ab-lc--image .ab-lc__card::before {
		width: 96px;
		height: 96px;
	}

	.is-style-products.ab-lc--image .ab-lc__img {
		padding: 6px;
	}
}

@media (max-width: 380px) {
	.is-style-products.ab-lc--image .ab-lc__card::before {
		width: 72px;
		height: 72px;
	}
}

@media (min-width: 769px) {
	.is-style-products.ab-lc--image .ab-lc__card::before {
		grid-column: 1 / -1;
		align-self: stretch;
		width: auto;
		height: auto;
	}

	.is-style-products.ab-lc--image .ab-lc__grid .ab-lc__img {
		aspect-ratio: 4 / 3;
		padding: 7% 10%;
	}
}

@media (min-width: 769px) and (max-width: 1024px) {
	.is-style-products.ab-lc--image.ab-lc--odd:not(:has(.ab-lc__card:nth-child(3):last-child)) .ab-lc__card::before {
		grid-column: 1;
		align-self: center;
		width: 120px;
		height: 90px;
	}

	.is-style-products.ab-lc--image.ab-lc--odd:not(:has(.ab-lc__card:nth-child(3):last-child)) .ab-lc__img {
		padding: 6px 10px;
	}
}

/* ------------------------------------------------------------ on navy */

.is-dark.ab-lc--text .ab-lc__card {
	background: rgba(255, 255, 255, 0.06);
}

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

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

.is-dark.ab-lc .ab-lc__text {
	color: rgba(255, 255, 255, 0.85);
}

.is-dark .ab-lc__chev {
	background: none;
	color: var(--ab-accent, #30cbd3);
}

.is-dark.ab-lc .ab-lc__img--empty {
	background: rgba(255, 255, 255, 0.12);
}

.is-dark .ab-lc__card:has(.ab-lc__link:focus-visible) {
	outline-color: var(--ab-accent, #30cbd3);
}

.is-dark.ab-lc .ab-lc__link:focus-visible::after {
	outline-color: var(--ab-accent, #30cbd3);
}

/* ------------------------------------------------------------ editor */

/* a card that links to the page being edited is not shown on that page */
.ab-lc__card.is-hidden-here {
	opacity: 0.55;
	border-style: dashed;
}

.ab-lc .ab-lc__pick {
	padding: 0;
	border: 1px dashed currentColor;
	color: var(--ab-navy, #002b56);
	font: inherit;
	font-size: 13px;
	cursor: pointer;
}

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

.ab-lc__grid > .block-list-appender {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 64px;
	border: 1px dashed currentColor;
	border-radius: var(--ab-radius, 0px);
	opacity: 0.6;
}