/*
 * Otsikko ja teksti -rivit (avalon/rows + avalon/row, blocks/rows and blocks/row): the title on the left, the text
 * on the right, a hairline between the rows. It replaced the accordion of long texts ("1. Suunnittelu" … on
 * /fi/kiinteistonomistajat/, 2026-09-25): everything is visible, nothing to open.
 * Phones: the title above its text. Tablets and desktop: two columns, the title a third of the width (48 / 80px
 * apart, as text + image). Airy rows: 32 / 44 / 56px above and below each row (--ab-flow-c), the first and the
 * last row without the outer half. No cards, no backgrounds, no borders but the hairline; works on white, light and
 * navy sections.
 * Titles: h3 below a section title (19 / 21 / 24px bold), h2 without one (the section title's size; its short
 * text reads as the lead). The right column has the text rhythm of the sections (.ab-flow); a long list (10 items
 * or more) runs in two columns on desktop.
 */

.ab-rows {
	--ab-rows-line: var(--ab-line, #e3e8ee);
}

/* the hairline gets a little navy on the light section, so it does not melt into it (as the accordion rows) */
.ab-rows.ab-bg-light {
	--ab-rows-line: rgba(0, 43, 86, 0.14);
}

.ab-rows.is-dark {
	--ab-rows-line: rgba(255, 255, 255, 0.2);
}

/* ------------------------------------------------------------ rows */

.ab-rows__row {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	row-gap: 16px;
	padding-block: var(--ab-flow-c, 32px);
}

.ab-rows__row + .ab-rows__row {
	border-top: 1px solid var(--ab-rows-line);
}

.ab-rows__row:first-child {
	padding-top: 0;
}

.ab-rows__row:last-child {
	padding-bottom: 0;
}

.ab-rows__row[id] {
	scroll-margin-top: 16px;
}

@media (min-width: 769px) {
	.ab-rows__row:not(.ab-rows__row--no-body) {
		grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
		column-gap: 48px;
		align-items: start;
	}
}

@media (min-width: 1025px) {
	.ab-rows__row:not(.ab-rows__row--no-body) {
		column-gap: 80px;
	}
}

/* ------------------------------------------------------------ left column: title + short text */

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

.ab-rows__title.ab-rows__title {
	margin: 0;
	color: var(--ab-heading, #012b55);
	font-size: 19px;
	font-weight: 700;
	line-height: 1.3;
}

.ab-rows__row--h2 .ab-rows__title.ab-rows__title {
	font-size: var(--wp--preset--font-size--x-large, 34px);
	line-height: 1.15;
}

/* below an h3 the text is a short description in the text colour and at the size of the text on the right (16 /
   16 / 17px, line height 1.6: one text size in the row, not a 1px bigger one beside it) */
.ab-rows__text {
	max-width: 36em;
	margin: 10px 0 0;
	color: inherit;
	font-size: inherit;
	font-weight: 400;
	line-height: inherit;
}

/* below an h2 the text is the section's lead */
.ab-rows__row--h2 .ab-rows__text {
	margin-top: var(--ab-flow-p, 14px);
	color: var(--ab-heading, #012b55);
	font-size: var(--ab-lead-size, 17px);
	line-height: 1.45;
}

/* a row without a title: its text alone on the left (a lead beside the details, e.g. right below the hero) */
.ab-rows__head > .ab-rows__text:first-child {
	margin-top: 0;
}

.ab-rows__text a {
	color: inherit;
	text-decoration: underline;
	text-decoration-thickness: var(--ab-underline, 2px);
	text-underline-offset: 0.15em;
}

@media (min-width: 769px) {
	.ab-rows__title.ab-rows__title {
		font-size: 21px;
	}
}

@media (min-width: 1025px) {
	.ab-rows__title.ab-rows__title {
		font-size: 24px;
		line-height: 1.25;
	}
}

/* ------------------------------------------------------------ right column: the text */

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

/* the first line of the text starts level with the title */
.ab-rows__body > :first-child {
	margin-top: 0;
}

/* a form's consent placeholder (Leadoo, "Jätä tarjouspyyntö"): the tint card without the consent plugin's grey 1px
   frame (no borders on cards) */
.ab-rows .kncc-iframe-placeholder.kncc-iframe-placeholder:not(.kncc-iframe-placeholder--has-thumb) {
	border: 0;
}

/* a long list (10 items or more: documents, what a service includes) in two columns on desktop, read down the first
   column, then the second; the items keep together */
@media (min-width: 1025px) {
	.ab-rows__body > :is(ul, ol):has(> li:nth-child(10)) {
		max-width: none;
		columns: 2;
		column-gap: var(--ab-gap, 48px);
	}

	.ab-rows__body > :is(ul, ol):has(> li:nth-child(10)) > li {
		margin-top: 0;
		padding-bottom: 0.55em;
		break-inside: avoid;
	}
}