/*
 * Avalon Nordic section blocks (front end and editor).
 *
 * Three steps: phone <= 768px, tablet 769-1024px, desktop >= 1025px. Content 1310px wide (wide 1350px), the gutter
 * and all spacing come from the tokens below. Colours and fonts come from the theme (theme.json presets).
 * This file: tokens, the section frame, the head, the text flow, grids, buttons and the blocks without a component
 * file of their own (image cards, testimonials, product page). Everything else is in assets/css/components/*.css
 * (hero, text-image, products, product categories, product lists, people, contact, stats, posts, features,
 * accordion, tables, link cards, core block styles), which load after this file and the theme style.
 */

/* Tokens (phone / tablet / desktop):
   section padding xs 12/16/24, s 24/32/48, m 40/72/100, l 48/80/100, xl 56/96/120 (every section 100px above and
   below on desktop: the airy rhythm of 2026-09-25); gutter 20/32/40; grid and column gap 20/32/48; title to content
   24/32/48; text flow 16/18/20 (14/16/16 between paragraphs, 32/44/56 around components and above a new part's
   heading): generous white space inside the sections too. Surfaces: white, the light section colour
   (the palette's "light", a cool very light blue-grey), the tint for cards and icon circles (white on light sections,
   see components/base.css), hairline. Sharp corners everywhere (radius 0; only real circles stay round: portraits,
   icon and number circles) and minimal cards: no borders and no shadows on cards. */
:root {
	--ab-gutter: 20px;
	--ab-pad-xs: 12px;
	--ab-pad-s: 24px;
	--ab-pad-m: 40px;
	--ab-pad-l: 48px;
	--ab-pad-xl: 56px;
	/* the contact band at the end of the pages and the footer: more air than the sections (2026-09-25) */
	--ab-pad-band: 64px;
	--ab-gap: 20px;
	--ab-head-gap: 24px;
	--ab-flow: 16px;
	--ab-flow-p: 14px;
	--ab-flow-c: 32px;
	--ab-lead-size: 17px;
	--ab-item-size: 16px;
	--ab-heading: var(--wp--preset--color--heading, #012b55);
	--ab-navy: var(--wp--preset--color--navy, #002b56);
	--ab-accent: var(--wp--preset--color--accent, #30cbd3);
	--ab-accent-hover: #28b5bd;
	--ab-body: var(--wp--preset--color--body, #282828);
	--ab-muted: #4a5563;
	--ab-tint: #eaf8f9;
	--ab-line: #e3e8ee;
	--ab-radius: 0px;
	--ab-radius-s: 0px;
	--ab-shadow: none;
	/* every underline (links in text, link lists, the menu's current item): 2px (2026-09-25) */
	--ab-underline: 2px;
	--ab-tap: 44px;
	--ab-btn-h: 48px;
	--ab-header-h: 72px;
	--ab-measure: 68ch;
	--ab-text-width: 760px;
}

@media (min-width: 769px) {
	:root {
		--ab-gutter: 32px;
		--ab-pad-xs: 16px;
		--ab-pad-s: 32px;
		--ab-pad-m: 72px;
		--ab-pad-l: 80px;
		--ab-pad-xl: 96px;
		--ab-pad-band: 112px;
		--ab-gap: 32px;
		--ab-head-gap: 32px;
		--ab-flow: 18px;
		--ab-flow-p: 16px;
		--ab-flow-c: 44px;
		--ab-lead-size: 18px;
		--ab-item-size: 17px;
		--ab-btn-h: 44px;
	}
}

@media (min-width: 1025px) {
	:root {
		--ab-gutter: 40px;
		--ab-pad-xs: 24px;
		--ab-pad-s: 48px;
		--ab-pad-m: 100px;
		--ab-pad-l: 100px;
		--ab-pad-xl: 120px;
		--ab-pad-band: 160px;
		--ab-gap: 48px;
		--ab-head-gap: 48px;
		--ab-flow: 20px;
		--ab-flow-c: 56px;
		--ab-lead-size: 20px;
		--ab-item-size: 18px;
	}
}

/* ------------------------------------------------------------ section frame */

.ab-section {
	position: relative;
	box-sizing: border-box;
}

/* sections follow each other without gaps */
.ab-section.alignfull {
	margin-top: 0;
	margin-bottom: 0;
}

.ab-container {
	position: relative;
	z-index: 1;
	box-sizing: border-box;
	width: 100%;
	max-width: calc(var(--wp--style--global--content-size, 1310px) + 2 * var(--ab-gutter));
	margin-inline: auto;
	padding-inline: var(--ab-gutter);
}

.ab-container--wide {
	max-width: calc(var(--wp--style--global--wide-size, 1350px) + 2 * var(--ab-gutter));
}

/* medium: the old theme's text column (classic pages, shop pages) */
.ab-container--medium {
	max-width: calc(1020px + 2 * var(--ab-gutter));
}

.ab-container--narrow {
	max-width: calc(910px + 2 * var(--ab-gutter));
}

/* an own maximum width: Beaver Builder's row width, of which 2 x 20px were the modules' margins */
.ab-container--max {
	max-width: calc(var(--ab-max) - 40px + 2 * var(--ab-gutter));
}

/* A narrower section (medium, narrow or an own maximum width) starts on the content container's left edge like every
   other section and text column (x = 65 at 1440px): centred in between them, the page's left edge zig-zagged. A
   section whose content is centred stays centred, and so does the article column under its centred title. */
@media (min-width: 769px) {
	.ab-sec:not(.an-article) > .ab-container:is(.ab-container--medium, .ab-container--narrow, .ab-container--max):not(:has(.has-text-align-center, .is-content-justification-center)) {
		margin-inline: max(0px, calc((100% - var(--wp--style--global--content-size, 1310px)) / 2 - var(--ab-gutter))) auto;
	}
}

.ab-pt-none { padding-top: 0; }
.ab-pt-xs { padding-top: var(--ab-pad-xs); }
.ab-pt-s { padding-top: var(--ab-pad-s); }
.ab-pt-m { padding-top: var(--ab-pad-m); }
.ab-pt-l { padding-top: var(--ab-pad-l); }
.ab-pt-xl { padding-top: var(--ab-pad-xl); }
.ab-pb-none { padding-bottom: 0; }
.ab-pb-xs { padding-bottom: var(--ab-pad-xs); }
.ab-pb-s { padding-bottom: var(--ab-pad-s); }
.ab-pb-m { padding-bottom: var(--ab-pad-m); }
.ab-pb-l { padding-bottom: var(--ab-pad-l); }
.ab-pb-xl { padding-bottom: var(--ab-pad-xl); }

/* (Until 2026-09-25 the second of two sections with the same background had a smaller top padding; now every
   section has its whole padding above and below.) */

/* one light surface: the light section is the palette's "light" (#f2f6f8, theme.json), and the components' tint cards
   and circles on it are white (the tint #eaf8f9 looked off on the old warm grey); the decision is written up in
   components/base.css */
.ab-bg-light {
	--ab-tint: #fff;
	background-color: var(--wp--preset--color--light, #f2f6f8);
}
.ab-bg-navy,
.ab-bg-image { background-color: var(--ab-navy); }

/* background image + darkening layer. The picture fills the section and never runs past it: the doubled class
   outweighs WooCommerce's ".woocommerce-page img { height: auto }" (on the category pages the band's photo was 960px
   high in a 385px section and showed below the footer), and the section clips it. */
.ab-bg-image {
	overflow: clip;
}

.ab-bg__img.ab-bg__img,
.ab-card__img.ab-card__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
	object-fit: cover;
}

.ab-bg__overlay,
.ab-card__overlay {
	position: absolute;
	inset: 0;
	background: var(--ab-navy);
	pointer-events: none;
}

.ab-card__overlay {
	background: #000;
}

/* text on dark sections (headings use --ab-heading, white boxes set it back) */
.is-dark {
	--ab-heading: #fff;
	color: #fff;
}

.is-dark :is(h1, h2, h3, h4, h5, h6),
.is-dark .ab-intro {
	color: #fff;
}

.is-dark a:where(:not(.wp-element-button)) {
	color: inherit;
}

/* ------------------------------------------------------------ section head */

/* title (+ intro) to the content: 20 / 24 / 32px; the head keeps a readable width */
.ab-head {
	max-width: var(--ab-text-width);
	margin-bottom: var(--ab-head-gap);
}

.ab-title {
	margin: 0;
	color: var(--ab-heading);
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 700;
	line-height: 1.15;
}

/* the intro reads as a lead paragraph (the same size as the paragraph style "Ingressi") */
.ab-intro {
	margin: 0;
	color: var(--ab-heading);
	font-size: var(--ab-lead-size);
	font-weight: 400;
	line-height: 1.45;
}

.ab-title + .ab-intro {
	margin-top: var(--ab-flow);
}

/* a link in an intro is a link in running text: underlined (it was the text colour without a line) */
.ab-intro a:where(:not(.wp-element-button, .ab-btn)) {
	color: inherit;
	text-decoration: underline;
	text-decoration-thickness: var(--ab-underline, 2px);
	text-underline-offset: 0.15em;
}

@media (max-width: 1024px) {
	.ab-title {
		line-height: 1.2;
	}
}

/* ------------------------------------------------------------ content rhythm inside sections */
/* (double class: stronger than the theme's element margins) */

.ab-flow.ab-flow > * {
	margin-block: 0;
}

/* 14 / 16 / 16px between blocks */
.ab-flow.ab-flow > * + * {
	margin-block-start: var(--ab-flow);
}

/* paragraphs and lists of one text 12px apart, also below a heading that was inside a Beaver Builder text module */
.ab-flow.ab-flow > p + p,
.ab-flow.ab-flow > p + :is(ul, ol),
.ab-flow.ab-flow > :is(ul, ol) + p,
.ab-flow.ab-flow > .an-text-heading + :is(p, ul, ol) {
	margin-block-start: var(--ab-flow-p);
}

/* components (columns, images, tables, groups, accordions, product cards ...) and separators get 24 / 28 / 32px around
   them */
.ab-flow.ab-flow > :is(.wp-block-columns, .wp-block-image, .wp-block-gallery, .wp-block-table, .wp-block-group, .wp-block-query, .wp-block-embed, .wp-block-details, .ab-pcards, .wp-block-separator) + *,
.ab-flow.ab-flow > * + :is(.wp-block-columns, .wp-block-image, .wp-block-gallery, .wp-block-table, .wp-block-group, .wp-block-query, .wp-block-embed, .wp-block-details, .ab-pcards, .wp-block-separator) {
	margin-block-start: var(--ab-flow-c);
}

/* a heading that follows text (not another heading: a title and its subtitle stay together) starts a new part of the
   section: 24 / 28 / 32px above it, as in the "Sivu otsikolla" pages (it had 14-16px, as close as the next
   paragraph) */
.ab-flow.ab-flow > :not(h1, h2, h3, h4, h5, h6) + :is(h2, h3, h4) {
	margin-block-start: var(--ab-flow-c);
}

/* buttons 32px below the text */
.ab-flow.ab-flow > * + .wp-block-buttons {
	margin-block-start: 32px;
}

/* a readable measure: running text at most 68 characters wide; centred text stays centred */
.ab-flow > :is(p, ul, ol) {
	max-width: var(--ab-measure);
}

.ab-flow > .has-text-align-center,
:is(.ab-hero--t-center, .ab-card) .ab-flow > :is(p, ul, ol) {
	margin-inline: auto;
}

/* a section with text only (headings, text, lists, buttons) keeps its headings to a 760px column too, left-aligned
   like the other sections */
.ab-sec > .ab-container--content:not(:has(> :not(h1, h2, h3, h4, h5, h6, p, ul, ol, .wp-block-buttons, .wp-block-separator, .wp-block-quote))) > :is(h1, h2, h3, h4, h5, h6) {
	max-width: var(--ab-text-width);
}

/* a picture that was inside a Beaver Builder text module: the text's own rhythm (10px above, the text right below) */
.ab-flow.ab-flow > * + .wp-block-image.an-inline-image {
	margin-block-start: 10px;
}

.ab-flow.ab-flow > .wp-block-image.an-inline-image + * {
	margin-block-start: 0;
}

/* aligned blocks (images): WordPress's own alignment rules only apply inside its layout containers */
.ab-flow > .aligncenter {
	margin-inline: auto;
}

.ab-flow > .alignleft {
	float: left;
	margin-inline-end: 2em;
}

.ab-flow > .alignright {
	float: right;
	margin-inline-start: 2em;
}

/* the consent plugin forces margin:0 !important on its placeholder */
.ab-flow.ab-flow > * + .kncc-iframe-placeholder {
	margin-top: var(--ab-flow) !important;
}

.ab-flow.ab-flow > :is(.wp-block-columns, .wp-block-group) + .kncc-iframe-placeholder {
	margin-top: var(--ab-flow-c) !important;
}

/* a section holding only a form (the consent placeholder, or the Leadoo form once accepted; its scripts stay) keeps at
   least s above and below it: with xs the card sat in a thin navy frame (/fi/, /sv/) */
.ab-sec:has(> .ab-container > :is(.av-consent-ph, script[data-kncc-category])):not(:has(> .ab-container > :is(h1, h2, h3, h4, h5, h6, p, ul, ol, figure, .wp-block-buttons, .wp-block-columns, .wp-block-group))).ab-pt-xs {
	padding-top: var(--ab-pad-s);
}

.ab-sec:has(> .ab-container > :is(.av-consent-ph, script[data-kncc-category])):not(:has(> .ab-container > :is(h1, h2, h3, h4, h5, h6, p, ul, ol, figure, .wp-block-buttons, .wp-block-columns, .wp-block-group))).ab-pb-xs {
	padding-bottom: var(--ab-pad-s);
}

/* (its look: the theme's style.css) */

/* ------------------------------------------------------------ grids */

.ab-grid {
	display: grid;
	grid-template-columns: repeat(var(--ab-cols, 3), minmax(0, 1fr));
	gap: var(--ab-gap);
}

/* ------------------------------------------------------------ buttons (theme button + variants) */

/* (the theme sets the button's height: at least 44px, 48px on phones) */
.ab-btn {
	display: inline-block;
	text-decoration: none;
}

.wp-element-button.ab-btn--outline {
	background-color: transparent;
	border-color: currentColor;
	color: inherit;
}

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

.wp-element-button.ab-btn--lg {
	padding: 18px 40px;
	font-weight: 700;
}

/* ------------------------------------------------------------ text + image */
/* (the gaps, the text's distance from the image, products and the image backgrounds: components/text-image.css) */

.ab-ti__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
}

.ab-ti--v-top .ab-ti__grid {
	align-items: start;
}

.ab-ti--img-right.ab-ti--60-40 .ab-ti__grid,
.ab-ti--img-left.ab-ti--40-60 .ab-ti__grid {
	grid-template-columns: 3fr 2fr;
}

.ab-ti--img-right.ab-ti--40-60 .ab-ti__grid,
.ab-ti--img-left.ab-ti--60-40 .ab-ti__grid {
	grid-template-columns: 2fr 3fr;
}

.ab-ti__figure {
	margin: 0;
}

.ab-ti__img {
	display: block;
	width: 100%;
	height: auto;
}

.ab-crop-square .ab-ti__img { aspect-ratio: 1; object-fit: cover; }
.ab-crop-landscape .ab-ti__img { aspect-ratio: 4 / 3; object-fit: cover; }

.ab-crop-cover {
	align-self: stretch;
}

.ab-crop-cover .ab-ti__figure,
.ab-crop-cover .ab-ti__img {
	height: 100%;
	object-fit: cover;
}

.ab-ti__media--bg-accent { background-color: var(--wp--preset--color--accent, #30cbd3); }
.ab-ti__media--bg-light { background-color: var(--wp--preset--color--light, #f2f6f8); }

/* ------------------------------------------------------------ image cards */

/* (e.g. the front page's audience tiles "Kiinteistönomistajat" / "Ammattiasiakkaat") in the content container like
   the other sections (the wide one ran 19px past the text on each side); from 769px each card has a picture's
   proportions instead of the old 700px: large 4:3 (about 485px at 1440px), medium 3:2, small 16:9, taller only
   when its text needs it; rounded like the other cards. On phones they run edge to edge (below). */
.ab-cards > .ab-container--wide {
	max-width: calc(var(--wp--style--global--content-size, 1310px) + 2 * var(--ab-gutter));
}

.ab-cards .ab-grid {
	gap: var(--ab-gap);
}

.ab-card {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	aspect-ratio: 4 / 3;
	padding: 48px 32px;
	overflow: hidden;
	border-radius: var(--ab-radius);
	background-color: var(--ab-navy);
	color: #fff;
	text-align: center;
}

.ab-cards--h-m .ab-card { aspect-ratio: 3 / 2; }
.ab-cards--h-s .ab-card { aspect-ratio: 16 / 9; }

.ab-card__content {
	position: relative;
	z-index: 1;
}

.ab-card__title {
	margin: 0 0 20px;
	color: #fff;
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 700;
	line-height: 1.1;
}

/* ------------------------------------------------------------ "Lataa lisää", page numbers (posts and product lists) */
/* (the posts block's cards, their columns and the space above these: components/posts.css) */

.ab-pagination {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
}

.ab-pagination .page-numbers {
	display: inline-block;
	min-width: 40px;
	padding: 8px 12px;
	border: 1px solid #e6e6e6;
	border-radius: 0;
	text-align: center;
	text-decoration: none;
}

.ab-pagination .page-numbers.current {
	background: var(--ab-navy);
	border-color: var(--ab-navy);
	color: #fff;
}

.ab-more {
	margin: 0;
	text-align: center;
}

/* ------------------------------------------------------------ testimonials */

/* The head like every other section's (left-aligned, the h2 size); the quotes are cards of the site's line and
   radius: 20px padding, the quote upright 16px, the stars and the person below a hairline. Three side by side from
   1025px; on tablets one quote per row, the person beside the quote (in three 230px columns the quotes ran 20
   characters a line and the names broke over three lines); on phones stacked. No hover lift: the cards are not
   links. */
.ab-testimonials .ab-grid {
	gap: var(--ab-gap);
}

.ab-testimonial {
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	height: 100%;
	margin: 0;
	padding: 20px;
	border-radius: var(--ab-radius);
	background: #fff;
	color: var(--ab-body);
}

.is-dark .ab-testimonial {
	--ab-heading: var(--wp--preset--color--heading, #012b55);
}

.ab-testimonial__rating {
	display: flex;
	gap: 2px;
	margin-bottom: 12px;
}

.ab-star {
	color: var(--ab-line);
	font-size: 18px;
	line-height: 1;
}

.ab-star.is-filled {
	color: #f2b01e;
}

.ab-testimonial__text {
	flex-grow: 1;
	margin: 0;
	padding: 0;
	border: 0;
	color: var(--ab-body);
	font-size: 16px;
	font-style: normal;
	line-height: 1.6;
}

.ab-testimonial__text p {
	margin: 0 0 12px;
}

.ab-testimonial__text p:last-child {
	margin-bottom: 0;
}

.ab-testimonial__author {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 16px;
	padding-top: 16px;
}

.ab-testimonial__photo {
	flex: 0 0 48px;
	width: 48px;
	height: 48px;
	overflow: hidden;
	border-radius: 50%;
	background: var(--ab-tint);
}

.ab-testimonial__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ab-testimonial__info {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.ab-testimonial__name {
	color: var(--ab-heading);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.35;
}

.ab-testimonial__meta {
	margin-top: 2px;
	color: var(--ab-muted);
	font-size: 14px;
	line-height: 1.4;
}

/* tablets: one quote per row, the stars and the person in a column on the left, the quote beside them */
@media (min-width: 769px) and (max-width: 1024px) {
	.ab-testimonials .ab-grid.ab-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.ab-testimonial {
		display: grid;
		grid-template-columns: 200px minmax(0, 1fr);
		grid-template-rows: auto 1fr;
		column-gap: 24px;
		padding: 24px;
	}

	.ab-testimonial__rating {
		grid-column: 1;
		grid-row: 1;
	}

	.ab-testimonial__author {
		grid-column: 1;
		grid-row: 2;
		align-self: start;
		margin-top: 0;
		padding-top: 0;
	}

	.ab-testimonial__text {
		grid-column: 2;
		grid-row: 1 / span 2;
	}
}

/* ------------------------------------------------------------ product page */

.ab-product-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
}

/* turquoise button: navy text (7.2:1; white on turquoise was 1.9:1) */
.wp-element-button.ab-btn--accent {
	border-color: var(--ab-accent);
	background-color: var(--ab-accent);
	color: var(--ab-navy);
}

.wp-element-button.ab-btn--accent:hover,
.wp-element-button.ab-btn--accent:focus {
	border-color: var(--ab-accent-hover);
	background-color: var(--ab-accent-hover);
	color: var(--ab-navy);
}

/* ------------------------------------------------------------ misc */

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	border: 0;
	white-space: nowrap;
}

/* ------------------------------------------------------------ small screens (Beaver Builder stacked at 768px) */

@media (max-width: 768px) {
	.ab-grid,
	.ab-ti__grid {
		grid-template-columns: 1fr !important;
	}

	/* image cards run edge to edge, stacked 10px apart, as high as their text and padding */
	.ab-card.ab-card {
		aspect-ratio: auto;
		padding: 100px 20px;
		border-radius: 0;
	}

	.ab-cards > .ab-container--wide {
		padding-inline: 0;
	}

	.ab-cards .ab-grid {
		gap: 10px;
	}
}