/* Seksjonene fotografen har lagt til selv på forsiden (0.63.0, #80). Elementene er vanlige
   Bricks-elementer med klasser; all stil ligger her og bruker bare designvariablene.
   Lastes bare på forsiden, og bare når den har en synlig egen seksjon. */
.vapr-seksjon { padding-top: var(--space-2xl, 4rem); padding-bottom: var(--space-2xl, 4rem); }
.vapr-seksjon .vapr-seksjon__inner { display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; gap: var(--space-l, 2rem); }
.vapr-seksjon--bilde-venstre .vapr-seksjon__inner { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--space-2xl, 4rem); }
.vapr-seksjon--bilde-hoyre .vapr-seksjon__inner { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--space-2xl, 4rem); }
.vapr-seksjon--uten-tekst .vapr-seksjon__inner { grid-template-columns: minmax(0, 1fr); }

/* Bildet. Bricks skriver <img> alene; står det i en <figure>, fyller bildet den. */
.vapr-seksjon .vapr-seksjon__bilde { display: block; width: 100%; height: auto; margin: 0; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-card, 0); overflow: hidden; }
.vapr-seksjon .vapr-seksjon__bilde img { display: block; width: 100%; height: 100%; object-fit: cover; }
.vapr-seksjon--bilde-over .vapr-seksjon__bilde, .vapr-seksjon--bilde-under .vapr-seksjon__bilde { aspect-ratio: 16 / 9; }

/* Teksten. */
.vapr-seksjon .vapr-seksjon__innhold { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-s, 1rem); width: 100%; max-width: 34em; }
.vapr-seksjon--bilde-over .vapr-seksjon__innhold, .vapr-seksjon--bilde-under .vapr-seksjon__innhold, .vapr-seksjon--bilde-ingen .vapr-seksjon__innhold { max-width: 44em; margin-left: auto; margin-right: auto; }
.vapr-seksjon .vapr-seksjon__tittel { margin: 0; font-size: var(--text-xl, 2rem); line-height: 1.15; }
.vapr-seksjon .vapr-seksjon__tekst { font-size: var(--text-s, 1rem); line-height: 1.7; color: var(--color-text-muted, inherit); }
.vapr-seksjon .vapr-seksjon__tekst p { margin: 0 0 0.8em; }
.vapr-seksjon .vapr-seksjon__tekst > :last-child { margin-bottom: 0; }
.vapr-seksjon .vapr-seksjon__tekst ul, .vapr-seksjon .vapr-seksjon__tekst ol { margin: 0 0 0.8em; padding-left: 1.3em; }
.vapr-seksjon .vapr-seksjon__tekst a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.vapr-seksjon .vapr-seksjon__innhold .bricks-button { margin-top: var(--space-xs, 0.5rem); }

/* Bare i visningen i «Design»: en seksjon som ikke er fylt ut ennå. */
.vapr-seksjon .vapr-seksjon__tom { margin: 0; padding: var(--space-l, 2rem); border: 1px dashed var(--color-border, #ccc); border-radius: var(--radius-card, 0); color: var(--color-text-muted, inherit); font-size: var(--text-s, 1rem); text-align: center; }

@media (max-width: 767px) {
	.vapr-seksjon--bilde-venstre .vapr-seksjon__inner, .vapr-seksjon--bilde-hoyre .vapr-seksjon__inner { grid-template-columns: minmax(0, 1fr); gap: var(--space-l, 2rem); }
	.vapr-seksjon .vapr-seksjon__innhold { max-width: none; }
}

/* Plassering av overskriften, og av teksten og knappen – hver for seg. Venstre er standard. */
.vapr-seksjon--tittel-midt .vapr-seksjon__tittel { align-self: center; text-align: center; }
.vapr-seksjon--tittel-hoyre .vapr-seksjon__tittel { align-self: flex-end; text-align: right; }
.vapr-seksjon--tekst-midt .vapr-seksjon__tekst { align-self: center; text-align: center; }
.vapr-seksjon--tekst-hoyre .vapr-seksjon__tekst { align-self: flex-end; text-align: right; }
.vapr-seksjon--tekst-midt .vapr-seksjon__innhold .bricks-button { align-self: center; }
.vapr-seksjon--tekst-hoyre .vapr-seksjon__innhold .bricks-button { align-self: flex-end; }
.vapr-seksjon--tekst-midt .vapr-seksjon__tekst ul, .vapr-seksjon--tekst-midt .vapr-seksjon__tekst ol, .vapr-seksjon--tekst-hoyre .vapr-seksjon__tekst ul, .vapr-seksjon--tekst-hoyre .vapr-seksjon__tekst ol { display: inline-block; text-align: left; }

/* Overskriften over bildene og kolonnene (0.64.0). */
.vapr-seksjon .vapr-seksjon__hode { display: flex; flex-direction: column; width: 100%; }

/* Bilder fra butikken (0.64.0): kortene følger valgene for «Utvalgte bilder» (format, tittel og pris)
   gjennom de samme variablene. Antall i bredden på PC er seksjonens eget valg. */
.vapr-seksjon--butikkbilder .vapr-seksjon__inner, .vapr-seksjon--kolonner .vapr-seksjon__inner { align-items: start; }
.vapr-seksjon--butikkbilder .vapr-seksjon__inner > .bricks-button { justify-self: center; }
.vapr-seksjon .vapr-seksjon__kortene { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-l, 2rem) var(--space-m, 1.5rem); width: 100%; align-items: start; }
.vapr-seksjon .vapr-seksjon__kort { position: relative; min-width: 0; text-align: var(--home-card-align, left); }
.vapr-seksjon .vapr-seksjon__kort a { display: block; }
.vapr-seksjon .vapr-seksjon__kort img { display: block; width: 100%; height: auto; aspect-ratio: var(--home-image-ratio, 1 / 1); object-fit: cover; border-radius: var(--radius-card, 0); transition: opacity 0.3s ease; }
.vapr-seksjon .vapr-seksjon__kort figure { margin: 0; }
.vapr-seksjon .vapr-seksjon__kort a:hover img { opacity: 0.88; }
.vapr-seksjon .vapr-seksjon__korttittel { margin: var(--space-xs, 0.5rem) 0 0; font-family: var(--home-title-font, inherit); font-size: var(--home-title-size, var(--text-s, 1rem)); font-weight: var(--home-title-weight, 500); line-height: 1.3; text-transform: var(--home-title-transform, inherit); letter-spacing: var(--home-title-spacing, inherit); }
.vapr-seksjon .vapr-seksjon__korttittel a { color: var(--color-text, inherit); text-decoration: none; }
.vapr-seksjon .vapr-seksjon__korttittel a:hover { text-decoration: underline; text-underline-offset: 3px; }
.vapr-seksjon .vapr-seksjon__kort .vpm-kortpris { margin: 2px 0 0; font-size: var(--text-s, 1rem); line-height: 1.3; color: var(--color-text-muted, inherit); }
body.vapr-forside-uten-tittel .vapr-seksjon .vapr-seksjon__korttittel { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
body.vapr-forside-uten-tittel .vapr-seksjon .vapr-seksjon__kort .vpm-kortpris { margin-top: var(--space-xs, 0.5rem); }
@media (min-width: 768px) {
	.vapr-seksjon--butikkbilder .vapr-seksjon__kortene { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.vapr-seksjon--butikkbilder.vapr-seksjon--kol-2 .vapr-seksjon__kortene { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 992px) {
	.vapr-seksjon--butikkbilder.vapr-seksjon--kol-4 .vapr-seksjon__kortene { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Kolonner (0.64.0): to eller tre kolonner ved siden av hverandre på PC, under hverandre på mobil. */
.vapr-seksjon .vapr-seksjon__kolonner { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-l, 2rem); width: 100%; }
.vapr-seksjon .vapr-seksjon__kolonne { display: flex; flex-direction: column; gap: var(--space-xs, 0.5rem); min-width: 0; }
.vapr-seksjon .vapr-seksjon__kolonnetittel { margin: 0; font-size: var(--text-m, 1.25rem); line-height: 1.3; }
.vapr-seksjon--tekst-midt .vapr-seksjon__kolonnetittel { text-align: center; }
.vapr-seksjon--tekst-hoyre .vapr-seksjon__kolonnetittel { text-align: right; }
@media (min-width: 768px) {
	.vapr-seksjon--kolonner.vapr-seksjon--kol-2 .vapr-seksjon__kolonner { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xl, 3rem); }
	.vapr-seksjon--kolonner.vapr-seksjon--kol-3 .vapr-seksjon__kolonner { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-xl, 3rem); }
}

/* Bakgrunn per seksjon (0.65.0): lys, tonet eller mørk – på egne seksjoner og på malens seksjoner
   (pluginen legger klassen på toppseksjonen). To klasser, så valget går foran malens egen bakgrunn.
   Mørk bruker fargene i bunnen av siden og bytter tekstfargene innenfor seksjonen. */
.vapr-bakgrunn.vapr-bakgrunn--lys { background-color: var(--color-bg); }
.vapr-bakgrunn.vapr-bakgrunn--tonet { background-color: var(--color-surface); }
.vapr-bakgrunn.vapr-bakgrunn--mork {
	--color-text: var(--color-footer-text, #f2f1ec);
	--color-text-muted: var(--color-footer-muted, #b9c2bc);
	--color-border: color-mix(in srgb, var(--color-footer-text, #f2f1ec) 22%, transparent);
	--color-surface: var(--color-footer-bg-dark, var(--color-footer-bg, #1f2a26));
	--color-primary: var(--color-footer-text, #f2f1ec);
	--color-primary-dark: var(--color-footer-muted, #b9c2bc);
	--color-on-primary: var(--color-footer-bg, #1f2a26);
	background-color: var(--color-footer-bg, #1f2a26);
	color: var(--color-footer-text, #f2f1ec);
}
.vapr-bakgrunn.vapr-bakgrunn--mork :is(h1, h2, h3, h4, h5, h6) { color: var(--color-text); }
.vapr-bakgrunn.vapr-bakgrunn--mork a:not(.bricks-button) { color: inherit; }

/* Sitat (0.65.0). Anførselstegnene står i teksten. */
.vapr-seksjon--sitat .vapr-seksjon__innhold { max-width: 40em; margin-left: auto; margin-right: auto; gap: var(--space-s, 1rem); }
.vapr-seksjon .vapr-seksjon__sitat { margin: 0; font-family: var(--font-heading, inherit); font-size: var(--text-xl, 2rem); line-height: 1.3; color: var(--color-text, inherit); text-wrap: balance; }
.vapr-seksjon .vapr-seksjon__hvem { margin: 0; font-size: var(--text-s, 1rem); color: var(--color-text-muted, inherit); }
.vapr-seksjon--sitat.vapr-seksjon--tekst-midt .vapr-seksjon__innhold { align-items: center; text-align: center; }
.vapr-seksjon--sitat.vapr-seksjon--tekst-hoyre .vapr-seksjon__innhold { align-items: flex-end; text-align: right; }
@media (max-width: 767px) { .vapr-seksjon .vapr-seksjon__sitat { font-size: var(--text-l, 1.6rem); } }

/* Fremhevet bilde med historie (0.65.0): hele motivet, uten beskjæring. */
.vapr-seksjon--fremhevet.vapr-seksjon--bilde-venstre .vapr-seksjon__inner { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-2xl, 4rem); }
.vapr-seksjon--fremhevet.vapr-seksjon--bilde-hoyre .vapr-seksjon__inner { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-2xl, 4rem); }
.vapr-seksjon .vapr-seksjon__bilde--helt, .vapr-seksjon .vapr-seksjon__bilde--helt img { aspect-ratio: auto; height: auto; object-fit: contain; }
.vapr-seksjon .vapr-seksjon__bilde--helt a, .vapr-seksjon a .vapr-seksjon__bilde--helt { display: block; }
.vapr-seksjon .vapr-seksjon__pris { margin: 0; }
@media (max-width: 767px) {
	.vapr-seksjon--fremhevet.vapr-seksjon--bilde-venstre .vapr-seksjon__inner, .vapr-seksjon--fremhevet.vapr-seksjon--bilde-hoyre .vapr-seksjon__inner { grid-template-columns: minmax(0, 1fr); gap: var(--space-l, 2rem); }
	/* Bildet øverst på mobil (Bricks kan legge klassen på lenken rundt bildet – derfor «det som ikke er teksten»). */
	.vapr-seksjon--fremhevet.vapr-seksjon--bilde-hoyre .vapr-seksjon__inner > :not(.vapr-seksjon__innhold) { order: -1; }
}

/* Tre steg (0.65.0): nummer i ring, overskrift og tekst. Ved siden av hverandre på PC, under hverandre på mobil. */
.vapr-seksjon--tresteg .vapr-seksjon__inner { align-items: start; }
.vapr-seksjon--tresteg .vapr-seksjon__inner > .bricks-button { justify-self: center; }
.vapr-seksjon--tresteg.vapr-seksjon--tekst-venstre .vapr-seksjon__inner > .bricks-button { justify-self: start; }
.vapr-seksjon--tresteg.vapr-seksjon--tekst-hoyre .vapr-seksjon__inner > .bricks-button { justify-self: end; }
.vapr-seksjon .vapr-seksjon__stegene { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-l, 2rem); width: 100%; }
.vapr-seksjon .vapr-seksjon__steg { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-xs, 0.5rem); min-width: 0; }
.vapr-seksjon--tekst-midt .vapr-seksjon__steg { align-items: center; text-align: center; }
.vapr-seksjon--tekst-hoyre .vapr-seksjon__steg { align-items: flex-end; text-align: right; }
.vapr-seksjon .vapr-seksjon__nummer { display: grid; place-items: center; width: 2.6em; height: 2.6em; margin: 0 0 var(--space-2xs, 0.25rem); border: 1px solid currentColor; border-radius: 50%; font-family: var(--font-heading, inherit); font-size: var(--text-m, 1.25rem); line-height: 1; color: var(--color-text, inherit); }
@media (min-width: 768px) {
	.vapr-seksjon .vapr-seksjon__stegene--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xl, 3rem); }
	.vapr-seksjon .vapr-seksjon__stegene--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-xl, 3rem); }
}

/* Loddrett plassering (0.65.1): øverst eller midt på i høyden – på PC, der delene står ved siden av hverandre. */
.vapr-seksjon--tekstbilde.vapr-seksjon--loddrett-topp .vapr-seksjon__inner, .vapr-seksjon--fremhevet.vapr-seksjon--loddrett-topp .vapr-seksjon__inner { align-items: start; }
.vapr-seksjon--tekstbilde.vapr-seksjon--loddrett-midt .vapr-seksjon__inner, .vapr-seksjon--fremhevet.vapr-seksjon--loddrett-midt .vapr-seksjon__inner { align-items: center; }
.vapr-seksjon--kolonner.vapr-seksjon--loddrett-midt .vapr-seksjon__kolonner, .vapr-seksjon--tresteg.vapr-seksjon--loddrett-midt .vapr-seksjon__stegene { align-items: center; }
.vapr-seksjon--kolonner.vapr-seksjon--loddrett-topp .vapr-seksjon__kolonner, .vapr-seksjon--tresteg.vapr-seksjon--loddrett-topp .vapr-seksjon__stegene { align-items: start; }

/* Lister i kolonnene og stegene (0.65.1): punkter og numre også når teksten er midtstilt eller høyrestilt. */
.vapr-seksjon .vapr-seksjon__tekst ul { list-style: disc; }
.vapr-seksjon .vapr-seksjon__tekst ol { list-style: decimal; }
.vapr-seksjon .vapr-seksjon__tekst li { margin: 0 0 0.3em; }
.vapr-seksjon .vapr-seksjon__tekst strong { font-weight: 700; color: inherit; }

/* Kundebilder (0.72.0): ekte bilder fra kundene, med kort tekst og lenke til bildet i butikken.
   Mobil: to i bredden – med 3 bilder står det første over hele bredden. PC: 3 og 6 tre i bredden, 4 fire. */
.vapr-seksjon--kundebilder .vapr-seksjon__inner { align-items: start; }
.vapr-seksjon--kundebilder .vapr-seksjon__inner > .bricks-button { justify-self: center; }
.vapr-seksjon .vapr-seksjon__kundekortene { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-l, 2rem) var(--space-m, 1.5rem); width: 100%; align-items: start; }
.vapr-seksjon--kb-1 .vapr-seksjon__kundekortene { grid-template-columns: minmax(0, 1fr); max-width: 32rem; justify-self: center; }
.vapr-seksjon--kb-3 .vapr-seksjon__kundekort:first-child { grid-column: 1 / -1; }
.vapr-seksjon .vapr-seksjon__kundekort { display: flex; flex-direction: column; gap: var(--space-xs, 0.5rem); min-width: 0; margin: 0; }
.vapr-seksjon .vapr-seksjon__kundebilde, .vapr-seksjon .vapr-seksjon__kundekort img { display: block; width: 100%; height: auto; margin: 0; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius-card, 0); overflow: hidden; }
.vapr-seksjon .vapr-seksjon__kundebilde img { height: 100%; }
.vapr-seksjon--format-kvadrat .vapr-seksjon__kundebilde, .vapr-seksjon--format-kvadrat .vapr-seksjon__kundekort img { aspect-ratio: 1 / 1; }
.vapr-seksjon--format-liggende .vapr-seksjon__kundebilde, .vapr-seksjon--format-liggende .vapr-seksjon__kundekort img { aspect-ratio: 3 / 2; }
.vapr-seksjon .vapr-seksjon__kundetekst { margin: var(--space-xs, 0.5rem) 0 0; font-size: var(--text-s, 1rem); font-style: italic; line-height: 1.45; }
.vapr-seksjon .vapr-seksjon__kundelenke { font-size: var(--text-xs, 0.9rem); line-height: 1.4; }
.vapr-seksjon .vapr-seksjon__kundelenke p { margin: 0; }
.vapr-seksjon .vapr-seksjon__kundelenke a { display: inline-block; padding: 4px 0; color: var(--color-text, inherit); text-decoration: underline; text-underline-offset: 3px; }
@media (min-width: 768px) {
	.vapr-seksjon--kb-3 .vapr-seksjon__kundekortene, .vapr-seksjon--kb-5 .vapr-seksjon__kundekortene, .vapr-seksjon--kb-6 .vapr-seksjon__kundekortene { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.vapr-seksjon--kb-3 .vapr-seksjon__kundekort:first-child { grid-column: auto; }
	.vapr-seksjon--kb-3 .vapr-seksjon__kundekortene { max-width: 60rem; justify-self: center; }
}
@media (min-width: 992px) {
	.vapr-seksjon--kb-4 .vapr-seksjon__kundekortene { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Luften mellom seksjonene når rekkefølgen, en skjult seksjon eller bakgrunnen er endret (#84).
   Pluginen setter klassen på toppseksjonen: samme bakgrunn som seksjonen over = ingen luft over,
   ellers full luft over. Malen kan ha luft satt rett på seksjonen (Bricks skriver den med #brxe-id),
   så :is(#brx-content, body) gir regelen samme vekt som en ID – den gjelder også uten #brx-content. */
:is(#brx-content, body) .vapr-luft-tett { padding-top: 0; }
:is(#brx-content, body) .vapr-luft-full { padding-top: var(--space-2xl, 4rem); }