/*
 * Artikkelit ja referenssit (avalon/posts) – articles and references; the product variant (.ab-posts--products)
 * is styled with the product cards.
 *
 * Wider screens: a grid of cards, the picture 4:5 (portrait, "Artikkelikuvat huomattavasti korkeammiksi",
 * 2026-09-25; it was 4:3) and the title below it, flush with the picture's left edge. The whole card is one link, with
 * no hover effect (as the link cards). Columns: the block's setting, "large" up to 1200px, "medium" on tablets (three
 * across when there are exactly three posts). Products on tablets are rows two side by side (products.css); an odd
 * number of them is one column of rows, so no row is left alone.
 * Two per row the picture is 1:1 on tablets held sideways (900-1024px) and 4:3 on desktops (a 4:5 picture in a
 * 630px column would be almost 800px high), as the link cards (link-cards.css).
 * Phones: rows – a 96px square picture on the section's left edge, the title (and note / "Lue lisää") beside it,
 * centred as one block, no card colour (the block's phone column setting does not apply).
 * Photos fill their frame; a wide graphic (ab-post__media--wide, render.php) is shown whole on the tint tile.
 */

.ab-posts:not(.ab-posts--products) .ab-grid {
	grid-auto-rows: auto;
	gap: 48px var(--ab-gap, 48px);
}

.ab-post {
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
	padding-bottom: 0;
}

/* the picture's frame: 4:5; the tint shows while a photo loads, and it is the tile of a wide graphic (below) */
.ab-post__media {
	position: relative;
	display: block;
	overflow: hidden;
	aspect-ratio: 4 / 5;
	border-radius: 0;
	background: var(--ab-tint, #eaf8f9);
}

/* A photo fills the frame. It is drawn wider than the frame (a 3:2 photo in a 4:5 frame about 1.9 times), and its
   sizes say so (render.php, without WordPress's "auto": avalon-blocks.php), so the browser picks a file sharp at the
   drawn width. (Two classes: WooCommerce's ".woocommerce-page img { height: auto }" must not win.) */
.ab-posts .ab-post__img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	max-width: none;
	height: 100%;
	margin: 0;
	aspect-ratio: auto;
	object-fit: cover;
}

/* A wide graphic (wider than 1.8:1 and of flat colours, render.php: a wordmark, a table, a banner with text) cropped
   to a tall frame showed a few letters or a corner of a table: it is shown whole on the tint tile, as the product
   category pictures (categories.css), with some air around it and white backgrounds multiplied into the tile. A wide
   photo fills its frame as the others. */
.ab-posts .ab-post__media--wide .ab-post__img {
	box-sizing: border-box;
	padding: 6%;
	object-fit: contain;
	mix-blend-mode: multiply;
}

.ab-post__title {
	margin: 16px 0 0;
	padding-inline: 0;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.35;
	overflow-wrap: normal;
	hyphens: auto;
}

.ab-post__title a {
	color: var(--ab-heading);
	text-decoration: none;
}

/* the title link covers the whole card */
.ab-post__title a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.ab-post__title a:focus-visible {
	outline: none;
}

.ab-post__title a:focus-visible::after {
	outline: 3px solid var(--ab-navy, #002b56);
	outline-offset: 3px;
}

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

/* a card's own note (render.php "notes") */
.ab-post__note {
	margin: 6px 0 0;
	color: var(--ab-muted, #4a5563);
	font-size: 15px;
	line-height: 1.45;
}

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

/* "Lue lisää" leads to the same post: under the card link, so a tap anywhere on the card opens the post (render.php
   keeps it out of the tab order, like the picture: the title link is the card's one link) */
.ab-post__more {
	position: relative;
	z-index: 0;
	align-self: flex-start;
	margin-top: 8px;
	font-size: 15px;
	font-weight: 700;
	text-decoration: none;
}

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

/* "Lataa lisää", page numbers and the link to all posts below the grid */
.ab-posts .ab-grid + :is(.ab-more, .ab-pagination) {
	margin-top: 40px;
}

/* on navy the link to all posts is a white outline button (the theme's navy fill vanished on the navy band) */
.is-dark .ab-more > .wp-element-button.ab-btn,
.is-dark .ab-more > .wp-element-button.ab-btn:hover,
.is-dark .ab-more > .wp-element-button.ab-btn:focus {
	border: 2px solid #fff;
	background-color: transparent;
	color: #fff;
}

.is-dark .ab-more > .wp-element-button.ab-btn:hover {
	background-color: rgba(255, 255, 255, 0.12);
}

.ab-more:has(> .ab-load-more) {
	margin-bottom: 0;
}

.ab-more > .ab-load-more {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-height: 48px;
	padding: 12px 32px;
}

.ab-posts .ab-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-width: 44px;
	min-height: 44px;
	border-color: var(--ab-line, #e3e8ee);
}

/* ---------------------------------------------------------------- columns by screen size (products too) */

/* the product cards (6019): the grid of the block; the cards themselves and their phone rows are in products.css */
@media (min-width: 769px) {
	.ab-posts.ab-posts--products .ab-grid {
		grid-auto-rows: auto;
		gap: var(--ab-gap, 32px);
	}
}

@media (min-width: 1025px) and (max-width: 1200px) {
	.ab-posts .ab-grid {
		grid-template-columns: repeat(var(--ab-cols-l, var(--ab-cols, 3)), minmax(0, 1fr));
	}

	.ab-grid[style*="--ab-cols-l:2;"] .ab-post__media {
		aspect-ratio: 4 / 3;
	}
}

@media (min-width: 1201px) {
	.ab-grid[style*="--ab-cols:2;"] .ab-post__media {
		aspect-ratio: 4 / 3;
	}
}

@media (min-width: 769px) and (max-width: 1024px) {
	.ab-posts .ab-grid {
		grid-template-columns: repeat(var(--ab-cols-m, 2), minmax(0, 1fr));
	}

	/* exactly three posts: three across, not two and one alone on the next row ("Lataa lisää" adds more: 2 again);
	   not product rows (they need about 300px, products.css) */
	.ab-posts:not(.ab-posts--products) .ab-grid:has(> :nth-child(3):last-child) {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.ab-posts:not(.ab-posts--products) .ab-grid {
		gap: 40px var(--ab-gap, 32px);
	}

	/* product rows (two side by side in products.css, as they need about 300px each): an odd number is one column of
	   full-width rows, not two and one alone on the last row, e.g. the three packages of 6019 ("Lataa lisää" may make
	   the number even again: two side by side) */
	.ab-posts.ab-posts--products .ab-grid.ab-grid:has(> .ab-product:last-child:nth-child(odd)) {
		grid-template-columns: minmax(0, 1fr);
		gap: 12px;
	}

	.ab-post__title {
		font-size: 17px;
	}
}

/* tablets held sideways: two per row 1:1 (a 4:5 picture was 580px high on a 768px high screen), as the link cards */
@media (min-width: 900px) and (max-width: 1024px) {
	.ab-posts:not(.ab-posts--products) .ab-grid[style*="--ab-cols-m:2;"]:not(:has(> :nth-child(3):last-child)) .ab-post__media {
		aspect-ratio: 1;
	}
}

/* ---------------------------------------------------------------- phones: rows */

@media (max-width: 768px) {
	.ab-posts:not(.ab-posts--products) .ab-grid {
		grid-template-columns: minmax(0, 1fr) !important;
		gap: 20px;
	}

	/* no card colour: the picture is the row's one surface, the title is on the section's background. The picture
	   spans all rows; the empty 1fr rows above and below the text take the picture's extra height, so a short title
	   and its note or "Lue lisää" stay together, centred beside the picture (with the picture spanning only the text
	   rows, the extra height went into those rows and opened a gap under a one-line title). */
	.ab-post {
		display: grid;
		grid-template-columns: 96px minmax(0, 1fr);
		grid-template-rows: 1fr repeat(3, auto) 1fr;
		column-gap: 16px;
		align-items: center;
		align-content: center;
		box-sizing: border-box;
		min-height: 0;
		padding: 0;
		background: none;
	}

	.ab-post:not(:has(> .ab-post__media)) {
		grid-template-columns: minmax(0, 1fr);
	}

	.ab-post__media {
		grid-row: 1 / -1;
		grid-column: 1;
		width: 96px;
		aspect-ratio: 1;
	}

	.ab-post__title {
		grid-row: 2;
		grid-column: -2;
		margin: 0;
		font-size: 16px;
		line-height: 1.35;
	}

	.ab-post__note {
		grid-row: 3;
		grid-column: -2;
		margin-top: 2px;
		font-size: 14px;
		line-height: 1.4;
	}

	.ab-post__more {
		grid-row: 4;
		grid-column: -2;
		margin-top: 2px;
		font-size: 14px;
	}

	.ab-posts .ab-grid + :is(.ab-more, .ab-pagination) {
		margin-top: 24px;
	}
}