/*
 * avalon/text-image (blocks/text-image/render.php): the text's distance from the image, the section without an
 * image, products in the media column and the coloured image backgrounds.
 * The base grid (two columns, ratios, crops, the image background colours) is in blocks.css; the product card
 * itself in products.css.
 */

/* ------------------------------------------------------------ columns */

@media (min-width: 769px) {
	.ab-ti__grid {
		column-gap: 48px;
	}
}

@media (min-width: 1025px) {
	.ab-ti__grid {
		column-gap: 80px;
	}
}

@media (max-width: 768px) {
	/* text and image stacked */
	.ab-ti__grid {
		row-gap: 24px;
	}
}

/* ------------------------------------------------------------ the text's distance from the image: m 40px, l 80px */
/* (tablets 16 / 40px, none on phones and without an image) */

.ab-text-image {
	--ab-ti-inset: 0px;
}

@media (min-width: 769px) {
	.ab-ti--inset-m {
		--ab-ti-inset: 16px;
	}

	.ab-ti--inset-l {
		--ab-ti-inset: 40px;
	}
}

@media (min-width: 1025px) {
	.ab-ti--inset-m {
		--ab-ti-inset: 40px;
	}

	.ab-ti--inset-l {
		--ab-ti-inset: 80px;
	}
}

.ab-text-image.ab-ti--no-media {
	--ab-ti-inset: 0px;
}

.ab-ti--img-right .ab-ti__text {
	padding-right: var(--ab-ti-inset);
}

.ab-ti--img-left .ab-ti__text {
	padding-left: var(--ab-ti-inset);
}

/* ------------------------------------------------------------ no image: one text column */

.ab-ti--no-media .ab-ti__grid {
	display: block;
}

.ab-ti--no-media .ab-ti__text {
	max-width: var(--ab-text-width, 760px);
	padding-inline: 0;
}

/* ------------------------------------------------------------ coloured background behind the image */

.ab-ti__media--bg-accent,
.ab-ti__media--bg-light {
	padding: 32px 20px;
	border-radius: var(--ab-radius, 12px);
}

@media (min-width: 769px) {
	.ab-ti__media--bg-accent,
	.ab-ti__media--bg-light {
		padding: 56px 32px;
	}
}

/* ------------------------------------------------------------ products instead of the image */
/* In the product cards' language (products.css; the model: the product categories on /fi/tuotteet/): each product is
   its picture on a tile (the tint on white and navy sections, white on light ones) with the name, the note and the
   actions on the section's own background. No panel behind the products (2026-09-25: a tint panel with white cards
   and tint tiles on it was three colours; the tiles are now the only one). render.php counts the products: --n1 one,
   --n2 two, --n3 three or more.
   - phones: the product rows of products.css (the tile at the left), between the text's opening and the rest;
   - one product (tablets and desktop): a large 3:2 tile, the text below it;
   - two: side by side on 4:3 tiles, the note right below each name, the actions of both at the same bottom line,
     when the column has room for two of 190px; in a narrower column rows as for three;
   - three or more: rows, the tile at the left (96px square; 160px 4:3 in a column of 480px or more), the text beside
     it.
   The media column is a size container. In the editor the preview's own wrapper .ab-pcards--ti sits between the
   column and the products. */

/* phones: rows like the product cards */
.ab-text-image .ab-ti__media--products {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 24px;
}

.ab-text-image .ab-ti__media--products .ab-product {
	width: auto;
	max-width: none;
}

@media (max-width: 768px) {
	/* the text first, also when the products are on the left on wider screens */
	.ab-ti--products .ab-ti__media--products {
		order: 2;
	}

	/* ...but only its opening: the heading and the first paragraph (with a lead, the lead and the paragraph after it),
	   then the products, then the rest of the text. On a phone the products no longer wait below a screenful of text
	   (the reading order for screen readers and the keyboard stays the text's). */
	.ab-ti--products .ab-ti__grid {
		row-gap: 0;
	}

	.ab-ti--products .ab-ti__text {
		display: contents;
	}

	.ab-ti--products .ab-ti__text > * {
		order: 3;
	}

	.ab-ti--products .ab-ti__text > :first-child,
	.ab-ti--products .ab-ti__text > :first-child + p,
	.ab-ti--products .ab-ti__text > :first-child + p.is-style-lead + p {
		order: 1;
	}

	.ab-ti--products .ab-ti__media--products {
		margin: 24px 0 8px;
	}

	.ab-ti--products .ab-ti__grid:not(:has(> .ab-ti__text > :nth-child(3))) > .ab-ti__media--products {
		margin-bottom: 0;
	}
}

@media (min-width: 769px) {
	.ab-text-image .ab-ti__media--products {
		container: ab-ti-media / inline-size;
		align-self: start;
	}

	/* (the editor's wrapper: one column, whatever the product grid says) */
	.ab-text-image .ab-ti__media--products .ab-pcards {
		grid-template-columns: minmax(0, 1fr);
		gap: 24px;
	}

	/* one product: the large tile, the text below it 20px in from the tile's edge (as in the product grid) */
	.ab-text-image .ab-ti__media--n1 .ab-product {
		grid-template-columns: minmax(0, 1fr);
		align-items: stretch;
		gap: 0;
	}

	.ab-text-image .ab-ti__media--n1 .ab-product__media {
		aspect-ratio: 3 / 2;
	}

	.ab-text-image .ab-ti__media--n1 .ab-product .ab-product__img {
		padding: 8% 12%;
	}

	/* no picture: the logo tile lower (a 3:2 navy block next to the text was too heavy) */
	.ab-text-image .ab-ti__media--n1 .ab-product__media--none {
		aspect-ratio: auto;
		height: 220px;
	}

	.ab-text-image .ab-ti__media--n1 .ab-product__body {
		padding: 16px 20px 0;
	}

	/* two products: the column (front end) or the editor's wrapper is the grid, two columns from 2 x 190px + 24px =
	   404px (the width of the container query below). As in the product grid and the model: the tiles side by side,
	   each name with its note right below it, "Katso tuote" and the button at the bottom, so both products end at
	   the same line (the two stretch to the row's height). A short name leaves no hole above its note. */
	.ab-text-image .ab-ti__media--n2:has(> .ab-product),
	.ab-text-image .ab-ti__media--n2 .ab-pcards {
		grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
		gap: 24px;
	}

	.ab-text-image .ab-ti__media--n2 .ab-product {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: auto 1fr;
		align-items: stretch;
		gap: 0;
	}

	.ab-text-image .ab-ti__media--n2 .ab-product__media {
		aspect-ratio: 4 / 3;
	}

	.ab-text-image .ab-ti__media--n2 .ab-product .ab-product__img {
		padding: 7% 10%;
	}

	.ab-text-image .ab-ti__media--n2 .ab-product__body {
		padding: 16px 20px 0;
	}

	.ab-text-image .ab-ti__media--n2 .ab-product__foot {
		margin-top: auto;
		padding-top: 12px;
	}
}

@media (min-width: 1025px) {
	/* the model's note size (the names are at the item size, 18px) */
	.ab-text-image .ab-ti__media--products .ab-product__note {
		font-size: 15px;
	}
}

/* two products in a column narrower than 404px (tablets, a narrow desktop column): rows as for three */
@container ab-ti-media (max-width: 403.98px) {
	.ab-text-image .ab-ti__media--n2 .ab-product {
		grid-template-columns: 96px minmax(0, 1fr);
		grid-template-rows: none;
		align-items: center;
		gap: 16px;
	}

	.ab-text-image .ab-ti__media--n2 .ab-product__media {
		aspect-ratio: 1;
	}

	.ab-text-image .ab-ti__media--n2 .ab-product .ab-product__img {
		padding: 8%;
	}

	.ab-text-image .ab-ti__media--n2 .ab-product__body {
		padding: 0;
	}

	.ab-text-image .ab-ti__media--n2 .ab-product__foot {
		margin-top: 10px;
		padding-top: 0;
	}
}

/* three or more in a column of 480px or more (desktop): a 160px 4:3 tile */
@container ab-ti-media (min-width: 480px) {
	.ab-text-image .ab-ti__media--n3 .ab-product {
		grid-template-columns: 160px minmax(0, 1fr);
		gap: 24px;
	}

	.ab-text-image .ab-ti__media--n3 .ab-product__media {
		aspect-ratio: 4 / 3;
	}

	.ab-text-image .ab-ti__media--n3 .ab-product .ab-product__img {
		padding: 7% 10%;
	}
}