/* Atavio sidbyggare – frontend (inc/builder/).
   Byggarinnehållet ligger i .page-flex, så temats sidbyggartypografi (rubriker, faktalistor,
   steg, spalter) och blockrytmen i style.css gäller även här. Den här filen lägger bara till
   sektion, rad, kolumn och modulernas egen layout. */

/* Sektion */
.ab-section { position: relative; }
.ab-section__inner { display: flex; flex-direction: column; gap: clamp(2.4rem, 1.6rem + 2.5vw, 4.8rem); }
.ab-section--narrow > .ab-section__inner { max-width: 80rem; }
.ab-section--full { width: 100vw; margin-left: calc(50% - 50vw); }
.ab-section--full > .ab-section__inner { padding-inline: var(--site-gutter); }
.ab-section--bg-subtle { background: var(--surface-subtle); }
.ab-section--has-image {
	display: flex;
	align-items: flex-end;
	min-height: clamp(28rem, 40vw, 52rem);
	padding: clamp(3.2rem, 6vw, 8rem) clamp(2rem, 6vw, 8rem);
	background-position: center;
	background-size: cover;
	color: #fff;
}
.ab-section--has-image::before { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, .55), rgba(0, 0, 0, 0) 70%); }
.ab-section--has-image > .ab-section__inner { position: relative; width: 100%; }
.page-flex .ab-section--has-image :is(.flex-text, .flex-text h2, .flex-text h3, .flex-text a) { color: #fff !important; } /* !important: temats .wysiwyg-rubriker har !important-färg */
.ab-section--divider { padding-top: clamp(2.4rem, 2vw + 1.6rem, 3.2rem); border-top: 1px solid var(--line-subtle); }

/* Rad: 12 kolumner, staplas under 769px */
.ab-row {
	--ab-gap: clamp(4rem, 4.5vw, 6.4rem);
	display: grid;
	/* Mobil: en kolumn (12 kolumner med mellanrum blir bredare än skärmen) */
	grid-template-columns: minmax(0, 1fr);
	column-gap: var(--ab-gap);
	row-gap: clamp(2.4rem, 4vw, 4rem);
	align-items: start;
}
.ab-row--gap-small { --ab-gap: 2.4rem; }
.ab-row--gap-large { --ab-gap: clamp(4.8rem, 6vw, 9.6rem); }
.ab-row--align-middle { align-items: center; }
.ab-row--align-bottom { align-items: end; }

/* Kolumn: containern mäts för stegmönstret (numrerad lista i spalter när kolumnen är bred) */
.ab-col { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 2.4rem; min-width: 0; container-type: inline-size; }
@media (min-width: 769px) {
	.ab-row { grid-template-columns: repeat(12, minmax(0, 1fr)); }
	.ab-col-1 { grid-column: span 1; }
	.ab-col-2 { grid-column: span 2; }
	.ab-col-3 { grid-column: span 3; }
	.ab-col-4 { grid-column: span 4; }
	.ab-col-5 { grid-column: span 5; }
	.ab-col-6 { grid-column: span 6; }
	.ab-col-7 { grid-column: span 7; }
	.ab-col-8 { grid-column: span 8; }
	.ab-col-9 { grid-column: span 9; }
	.ab-col-10 { grid-column: span 10; }
	.ab-col-11 { grid-column: span 11; }
	.ab-col-12 { grid-column: span 12; }
}

/* Text: rubrikerna i en textmodul är sektionsrubriker; sidans första rubrik är sidrubriken */
.page-flex .ab-module--text .flex-text > h2:not(.d1, .d2, .h1, .h2, .h3, .h4, .h5, .h6, .page-eyebrow) {
	max-width: 32ch;
	margin: 3.2rem 0 1.6rem;
	font-size: clamp(2.4rem, 1.8rem + 1.1vw, 3.4rem);
	font-weight: 500;
	line-height: 1.15;
	letter-spacing: -.01em;
}
.page-flex .ab-module--text .flex-text > h2:first-child { margin-top: 0; }
.page-flex.ab-content > .ab-section:first-child .ab-module--text:first-child .flex-text > h2:first-child:not(.d1, .d2, .h1, .h2, .h3, .h4, .h5, .h6) { font-size: clamp(3rem, 2rem + 2vw, 4.8rem); line-height: 1.08; }
.page-flex .ab-module--text .flex-text > h1:not(.d1, .d2, .h1, .h2, .h3, .h4, .h5, .h6) {
	max-width: 28ch;
	margin: 0 0 2rem;
	font-size: clamp(3rem, 2rem + 2vw, 4.8rem);
	font-weight: 500;
	line-height: 1.08;
	letter-spacing: -.015em;
}
.page-flex .ab-module--text .flex-text--full > * { max-width: none; }

/* Rubrikstorlek oberoende av nivå: <h1 class="h5">, <h2 class="d1"> … (väljs i editorns
   stilmeny eller i Text-fliken). Nivån styr struktur och SEO, klassen bara utseendet. */
.page-flex .ab-module--text .flex-text :is(.d1, .d2, .h1, .h2, .h3, .h4, .h5, .h6) { max-width: 30ch; font-weight: 500; letter-spacing: -.01em; }
.page-flex .ab-module--text .flex-text .d1 { font-size: clamp(3.6rem, 2.2rem + 3.4vw, 6.4rem); line-height: 1.04; letter-spacing: -.02em; }
.page-flex .ab-module--text .flex-text .d2 { font-size: clamp(3.2rem, 2rem + 2.6vw, 5.2rem); line-height: 1.06; letter-spacing: -.02em; }
.page-flex .ab-module--text .flex-text .h1 { font-size: clamp(3rem, 2rem + 2vw, 4.8rem); line-height: 1.08; }
.page-flex .ab-module--text .flex-text .h2 { font-size: clamp(2.4rem, 1.8rem + 1.1vw, 3.4rem); line-height: 1.15; }
.page-flex .ab-module--text .flex-text .h3 { font-size: clamp(2rem, 1.7rem + .6vw, 2.4rem); line-height: 1.3; }
.page-flex .ab-module--text .flex-text .h4 { font-size: clamp(1.8rem, 1.6rem + .3vw, 2rem); line-height: 1.35; letter-spacing: 0; }
.page-flex .ab-module--text .flex-text .h5 { font-size: 1.6rem; line-height: 1.4; letter-spacing: 0; }
.page-flex .ab-module--text .flex-text .h6 { font-size: 1.4rem; line-height: 1.4; letter-spacing: .02em; text-transform: uppercase; }
/* !important: temats .wysiwyg-rubriker sätter färgen med !important */
.page-flex .ab-module--text .text-primary { color: #009758 !important; }
.page-flex .ab-module--text .text-muted { color: #6b7280 !important; }
.page-flex .ab-module--text .text-white { color: #fff !important; }
/* Liststil Faktarader: etikett och värde sida vid sida när kolumnen är bred */
@container (min-width: 60rem) {
	.page-flex .ab-module--text .flex-text--facts > ul > li { padding-left: 24rem; }
	.page-flex .ab-module--text .flex-text--facts > ul > li > strong:first-child { position: absolute; top: 1.2rem; left: 0; width: 22rem; }
}

/* Bild */
.ab-image { margin: 0; }
.ab-image img { display: block; width: 100%; height: auto; }
.ab-image:is(.ab-image--left, .ab-image--center, .ab-image--right) img { width: auto; max-width: 100%; }
.ab-image--center img { margin-inline: auto; }
.ab-image--right img { margin-left: auto; }
.ab-image figcaption { margin-top: .8rem; font-size: 1.4rem; color: #6b7280; }

/* Knappar */
.ab-buttons { display: flex; flex-wrap: wrap; align-items: center; gap: 1.2rem 2.4rem; }
.ab-buttons--center { justify-content: center; }
.ab-buttons--right { justify-content: flex-end; }
.ab-buttons--stacked { flex-direction: column; align-items: flex-start; }
.ab-buttons--stacked.ab-buttons--center { align-items: center; }
.ab-buttons--stacked.ab-buttons--right { align-items: flex-end; }
.page-flex .ab-buttons .flex-link { margin-top: 0; }

/* Formulär: samma fältstil som CTA-panelerna (style.css) */
.ab-module--gravity-form { min-width: 0; }

/* Kvadratisk bild (t.ex. personer): sätt CSS-klassen is-square på bildmodulen */
.ab-module--image.is-square img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; background: #f1f2f3; }

/* Hero: en vanlig sektion med en hero-klass (som hos Primetek): hero-small/-medium/-large
   styr höjden (utan storleksklass: liten, som undersidornas hero), hero-breadcrumbs ger
   brödsmulorna direkt ovanför. Som första sektion ritas den i sidans hero-plats, kant till
   kant. Bilden är sektionens bakgrundsbild. */
.page-flex.ab-hero { display: block; margin: 0; }
.main-backer:has(> .ab-hero) { padding-top: 0; }
.ab-section--hero {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: clamp(2.4rem, 4vw, 4.8rem) 0;
	background-color: var(--surface-subtle);
	background-position: center;
	background-size: cover;
}
.ab-section--hero { min-height: clamp(18rem, 4rem + 26vw, 40rem); }
.ab-section--hero.hero-medium { min-height: clamp(28rem, 45vh, 56rem); }
.ab-section--hero.hero-large { min-height: clamp(36rem, 70vh, 76rem); }
.ab-section--hero > .ab-hero__container { position: relative; z-index: 1; display: flex; flex: 1 1 auto; flex-direction: column; gap: 2.4rem; width: 100%; }
.ab-section--hero .ab-section__inner { margin-top: auto; }
/* Hero inne i innehållet (mallar utan hero-plats): ingen extra container-luft */
.container .ab-hero__container { max-width: none; padding-inline: 0; }

/* Bakgrundsfärg (färgväljaren) på sektion och rad: egen luft innanför ytan, och vit text
   när färgen är mörk (ab-is-dark räknas ut i PHP efter kontrasten). */
/* Samma sidoluft i alla sektioner (utom hero och hela skärmen), med eller utan färg, så att
   innehållet alltid ligger på samma kant och boxarna håller sig inom sidans marginaler.
   Färgade sektioner får dessutom luft upp och ned. */
.ab-content > .ab-section:not(.ab-section--hero, .ab-section--full) { padding-inline: clamp(2rem, 6vw, 8rem); }
.ab-section:is(.ab-has-bg, .ab-section--bg-subtle):not(.ab-section--hero) { padding-block: clamp(3.2rem, 6vw, 8rem); }
.ab-row.ab-has-bg { padding: clamp(2.4rem, 4vw, 4.8rem); }
.page-flex .ab-is-dark { color: #fff; }
.page-flex .ab-is-dark :is(.flex-text, .flex-text h1, .flex-text h2, .flex-text h3, .flex-text h4, .flex-text a, .flex-link) { color: #fff !important; } /* !important: temats .wysiwyg-rubriker har !important-färg */
.page-flex .ab-is-dark .ab-is-light :is(.flex-text, .flex-text h1, .flex-text h2, .flex-text h3, .flex-text h4, .flex-text a, .flex-link) { color: #35332f !important; } /* !important: se ovan; ljus rad i mörk sektion */
.ab-is-dark .cta-panel__btn--primary { border-color: #fff; background: #fff; color: #35332f; }
.ab-is-dark .cta-panel__btn--secondary { border-color: #fff; color: #fff; }
/* Bild utan text (som undersidornas hero): ingen mörk toning */
.ab-section--has-image:not(:has(.ab-module))::before { display: none; }


/* Personer: telefon som länk i samma stil som titeln */
.page-flex a.flex-person__tel { text-decoration: none; }
.page-flex a.flex-person__tel:hover { color: #35332f; }

/* Knappbredd: lika breda (som den bredaste) eller hela kolumnen */
.ab-buttons--w-equal.ab-buttons--inline { display: inline-grid; grid-auto-columns: 1fr; grid-auto-flow: column; }
.ab-buttons--w-equal.ab-buttons--stacked { display: inline-flex; align-items: stretch; }
.ab-buttons--w-full.ab-buttons--inline { display: grid; grid-auto-columns: 1fr; grid-auto-flow: column; }
.ab-buttons--w-full.ab-buttons--stacked { align-items: stretch; }
.ab-buttons:is(.ab-buttons--w-equal, .ab-buttons--w-full) > :is(.cta-panel__btn, .flex-link) { justify-content: center; text-align: center; }
/* Smalt: lika breda knappar staplas i stället för att tryckas ihop */
@media (max-width: 600px) {
	.ab-buttons--inline:is(.ab-buttons--w-equal, .ab-buttons--w-full) { display: flex; flex-direction: column; align-items: stretch; }
}

/* Listor i textmodulen som i editorn: punkt eller siffra utanför texten och indrag, så att
   radbrutna punkter linjerar under texten (temats grundstil har punkterna innanför). */
.page-flex .ab-module--text .flex-text:not(.flex-text--facts) ul,
.page-flex .ab-module--text .flex-text:not(.flex-text--steps) ol {
	margin: 0 0 1.6rem;
	padding-left: 1.4em;
	list-style-position: outside;
}
.page-flex .ab-module--text .flex-text:not(.flex-text--facts) ul { list-style-type: disc; }
.page-flex .ab-module--text .flex-text:not(.flex-text--steps) ol { list-style-type: decimal; }
.page-flex .ab-module--text .flex-text :is(ul, ol) :is(ul, ol) { margin: .6rem 0 0; }
.page-flex .ab-module--text .flex-text:not(.flex-text--facts, .flex-text--steps) li { padding-left: .2em; }

/* Textbredd "Hela kolumnen" gäller även rubrikerna (annars ca 32 tecken per rad) */
.page-flex .ab-module--text .flex-text.flex-text--full > :is(h1, h2, h3, h4, h5, h6, p, ul, ol, blockquote) { max-width: none; }

/* Sektionens Luft (Design): Mindre/Ingen minskar avståndet till sektionen ovanför. Den inre
   luften i färgade sektioner är densamma runt om, så proportionerna behålls. */
.page-flex.ab-content { --ab-section-gap: clamp(4rem, 1.6rem + 5vw, 8rem); gap: var(--ab-section-gap); }
.page-flex.ab-content > .ab-section--space-small:not(:first-child) { margin-top: calc(var(--ab-section-gap) * -.5); }
.page-flex.ab-content > .ab-section--space-none:not(:first-child) { margin-top: calc(var(--ab-section-gap) * -1); }

/* Liten sidrubrik (SEO-H1) ovanför budskapet: <h1 class="page-eyebrow">Om AWEX</h1>
   följt av budskapet som <h2>. Väljs i editorns stilmeny ("Liten sidrubrik"). */
.page-flex .ab-module--text .flex-text > h1.page-eyebrow {
	max-width: none;
	margin: 0 0 1.6rem;
	font-family: inherit;
	font-size: 1.6rem;
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: .02em;
}
.page-flex .ab-module--text .flex-text > h1.page-eyebrow + h2 { margin-top: 0; }

/* ── Rubriker och citat: fetare och större (2026-10-27) ──────────────────────
   Sektionsrubriker (h2) och sidrubrik (första h2 / h1) i vikt 600 och större
   storlek; storleksklasserna följer med. Citat (blockquote, även konverterade
   .flex-quote) i hela kolumnens bredd, fetare och större. */
.page-flex .ab-module--text .flex-text > h2:not(.d1, .d2, .h1, .h2, .h3, .h4, .h5, .h6, .page-eyebrow) {
	font-size: clamp(2.8rem, 2rem + 1.6vw, 4.2rem);
	font-weight: 600;
	line-height: 1.12;
}
.page-flex.ab-content > .ab-section:first-child .ab-module--text:first-child .flex-text > h2:first-child:not(.d1, .d2, .h1, .h2, .h3, .h4, .h5, .h6),
.page-flex .ab-module--text .flex-text > h1:not(.d1, .d2, .h1, .h2, .h3, .h4, .h5, .h6, .page-eyebrow) {
	font-size: clamp(3.4rem, 2.2rem + 2.6vw, 5.6rem);
	font-weight: 600;
	line-height: 1.05;
}
.page-flex .ab-module--text .flex-text :is(.d1, .d2, .h1, .h2, .h3, .h4) { font-weight: 600; }
.page-flex .ab-module--text .flex-text .h1 { font-size: clamp(3.4rem, 2.2rem + 2.6vw, 5.6rem); line-height: 1.05; }
.page-flex .ab-module--text .flex-text .h2 { font-size: clamp(2.8rem, 2rem + 1.6vw, 4.2rem); line-height: 1.12; }

.page-flex .ab-module--text .flex-text > blockquote {
	max-width: none;
	margin: 0;
	padding: 0;
	border: 0;
}
.page-flex .ab-module--text .flex-text > blockquote p,
.page-flex .ab-module--text .flex-text > blockquote .flex-quote__text {
	max-width: none;
	margin: 0 0 1.8rem;
	font-family: "Inter Tight", system-ui, sans-serif;
	font-size: clamp(3rem, 2rem + 2.4vw, 5.2rem);
	font-weight: 600;
	line-height: 1.08;
	letter-spacing: -.015em;
	color: #35332f;
}
.page-flex .ab-module--text .flex-text > blockquote cite {
	display: block;
	font-size: 1.5rem;
	font-style: normal;
	font-weight: 400;
	color: #6b7280;
}
/* "Hela kolumnen" ska gälla även rubriker med storleksklass (d1/d2/h1–h6); deras egen
   30ch-gräns vann tidigare över .flex-text--full så stora citat/budskap tog halva sidan. */
.page-flex .ab-module--text .flex-text.flex-text--full :is(.d1, .d2, .h1, .h2, .h3, .h4, .h5, .h6) { max-width: none; }
.page-flex .ab-module--text .flex-text .d1 { font-size: clamp(4rem, 2.4rem + 3.8vw, 7.2rem); }
.page-flex .ab-module--text .flex-text .d2 { font-size: clamp(3.4rem, 2.2rem + 2.8vw, 5.8rem); }

/* Textbredd Smal/Mellan/Bred: rubriker och brödtext får samma maxbredd så att
   högerkanten linjerar (i st. f. rubrikernas egna 28–32ch och textens 68ch).
   :is() med elementväljare ger samma specificitet som rubrikreglerna ovan; ordningen avgör. */
.page-flex .ab-module--text .flex-text.flex-text--narrow > :is(h1, h2, h3, h4, h5, h6, p, ul, ol, blockquote, div) { max-width: 56rem; }
.page-flex .ab-module--text .flex-text.flex-text--medium > :is(h1, h2, h3, h4, h5, h6, p, ul, ol, blockquote, div) { max-width: 72rem; }
.page-flex .ab-module--text .flex-text.flex-text--wide > :is(h1, h2, h3, h4, h5, h6, p, ul, ol, blockquote, div) { max-width: 96rem; }

/* Avstånd under rubriker (Text-modulens val): Normal 2.4rem (var 1.6–2rem), Tätt 1.2rem,
   Luftigt 4rem. Liten sidrubrik (page-eyebrow) behåller sitt eget avstånd. */
.page-flex .ab-module--text .flex-text > :is(h1, h2, h3, h4, h5, h6):not(.page-eyebrow) { margin-bottom: 2.4rem; }
.page-flex .ab-module--text .flex-text.flex-text--gap-compact > :is(h1, h2, h3, h4, h5, h6):not(.page-eyebrow) { margin-bottom: 1.2rem; }
.page-flex .ab-module--text .flex-text.flex-text--gap-airy > :is(h1, h2, h3, h4, h5, h6):not(.page-eyebrow) { margin-bottom: 4rem; }

/* Högre hero på undersidor (2026-10-28): standard (hero-small) ca 260px mobil → 600px
   desktop (var 180→400). Medium/large flyttas upp i samma proportion. Samma värde som
   temats gamla undersidehero (.hero-banner--subpage) så alla undersidor matchar. */
.ab-section--hero { min-height: clamp(26rem, 12rem + 30vw, 60rem); }
.ab-section--hero.hero-medium { min-height: clamp(32rem, 14rem + 36vw, 72rem); }
.ab-section--hero.hero-large { min-height: clamp(40rem, 70vh, 88rem); }

/* Undersidornas hero = startsidans hero (2026-10-28): samma höjd (76 % av skärmhöjden,
   500–880px) och samma bredd (högst 1980px, centrerad) som .hero-banner på startsidan.
   hero-large lite högre. Ersätter föregående höjdregel. */
.ab-section--hero,
.ab-section--hero.hero-small,
.ab-section--hero.hero-medium {
	min-height: clamp(50rem, 76vh, 88rem);
}
.ab-section--hero.hero-large { min-height: clamp(56rem, 90vh, 100rem); }
.ab-section--hero { max-width: 1980px; margin-inline: auto; }