/* ============================================================
	 * AUTO 8-8 WEB 2.0 — DESIGN TOKENS
	 *
	 * Endrer du noe her, endres det på TVERS av alle Web 2.0-snippets.
	 * Ikke skriv harde px-verdier i nye snippets — bruk variablene.
	 * ============================================================ */
	:root {
		/* ===== SPACING-STIGE (8px-rytme + tre utvalgte aksenter) ===== */
		--ab8-s-1:  4px;
		--ab8-s-2:  8px;
		--ab8-s-3: 12px;
		--ab8-s-4: 16px;
		--ab8-s-5: 20px;
		--ab8-s-6: 24px;
		--ab8-s-7: 32px;
		--ab8-s-8: 40px;
		--ab8-s-9: 48px;
		--ab8-s-10: 64px;
		--ab8-s-11: 96px;

		/* ===== NAVNGITTE PADDING-ALIASER (Web 2.0 padding-system, JA 2026-05-26) =====
		   Tekst: 96/40/20 (utenfor container)
		   Boks:  48/20/10 (innenfor F5F5F3-tile)
		   Full:  0       (full-bleed media)
		   Bruktes som padding-left/right på seksjons-wrappers og som inner-padding
		   i tile-bokser. */
		--ab8-pad-tekst:        96px;  /* desktop */
		--ab8-pad-tekst-tablet: 40px;
		--ab8-pad-tekst-mobil:  20px;

		--ab8-pad-boks:        48px;  /* desktop */
		--ab8-pad-boks-tablet: 20px;
		--ab8-pad-boks-mobil:  10px;

		/* ===== SEKSJONS-RYTME (top/bottom mellom seksjoner) ===== */
		--ab8-seksjon-gap:        64px;  /* desktop */
		--ab8-seksjon-gap-tablet: 48px;
		--ab8-seksjon-gap-mobil:  32px;

		/* ===== KOMPONENT-RYTME (innen en seksjon) ===== */
		--ab8-tekst-gap:    24px;  /* mellom h2 og brødtekst */
		--ab8-element-gap:  16px;  /* mellom info-rader i en liste */
		--ab8-inline-gap:    8px;  /* mellom ikon og tekst i en rad */

		/* ===== GRID (12-spalter, fast gutter, container) ===== */
		--ab8-grid-cols:   12;
		--ab8-grid-gutter:        24px;
		--ab8-grid-gutter-tablet: 16px;
		--ab8-grid-gutter-mobil:  12px;
		--ab8-container-max: 1920px;

		/* ===== TYPE-SKALA (7 størrelser, JA 2026-05-26) =====
		   Hierarki via farge + posisjon — IKKE flere størrelser.
		   Mega er kun for Polestar-stil display-numeraler (årstall, KPI, månedspris).
		   Ikke bruk mega på brødtekst eller knapper. */
		--ab8-fs-mini:    11px;
		--ab8-fs-liten:   13px;
		--ab8-fs-body:    14px;
		--ab8-fs-medium:  17px;
		--ab8-fs-stor:    20px;
		--ab8-fs-h2:      24px;
		--ab8-fs-h1:      32px;
		/* Ett stort tall, ikke tre. JA 19.08: «Endres til én. Samme som på
		   denne siden: /guider/» — der tittelen står på 52,5, som allerede er
		   toppen av skalaen vår. Da trenger vi ikke et eget mega-trinn i det
		   hele tatt; tokenet peker bare på det største vi har. */
		/* Menyen er absolutt-plassert og tar ikke plass i flyten. Første seksjon
		   på en side uten helbredt hero må derfor selv klarere den: 52 px meny
		   + 36 px luft. Målt 19.08 — sidene som så riktige ut lå på nettopp 36. */
		--ab8-topp-klaring-mobil: 88px;
		--ab8-fs-mega:    52.5px;  /* display only — månedspris, hero-numeral */
		--ab8-fs-sdl:     25px; /* SDL-headline-spec (1.875 × 14 baseline) — Web 2.0 lock JA 2026-06-11 */

		/* ===== NEUE HAAS 3-NIVÅ-SKALA (JA 2026-07-03, Figma desktop) =====
		   Endelig type-hierarki for Neue Haas Grotesk Text Pro.
		   Nye komponenter skal bruke disse — ikke fs-body/fs-medium/fs-h1 osv.
		   Migrering av eksisterende komponenter skjer gradvis. */
		--ab8-fs-13:      13px;      /* body */
		--ab8-lh-fs-13:   15px;      /* line-height for body */
		--ab8-ls-fs-13:   -0.02em;   /* letter-spacing = -2% i Figma */

		--ab8-fs-25:      25px;      /* display */
		--ab8-lh-fs-25:   27px;      /* line-height for display */
		--ab8-ls-fs-25:   -0.05em;   /* letter-spacing = -5% i Figma */

		--ab8-fs-10:      10px;      /* finprint / legal */
		--ab8-lh-fs-10:   12px;      /* line-height for finprint */
		--ab8-ls-fs-10:   -0.01em;   /* letter-spacing = -1% i Figma */
		/* Mega (større enn 25px) parkert til JA definerer i Figma. */

		/* ===== LINE-HEIGHT ===== */
		--ab8-lh-tett:    1.2;   /* display, h1/h2/h3 */
		--ab8-lh-cluster: 1.35;  /* tight label-value pair (Wästberg "CONE M / SUSPENDED") */
		--ab8-lh-normal:  1.45;
		--ab8-lh-luft:    1.6;   /* lange brødtekst-blokker */

		/* ===== CLUSTER-DISIPLIN (JA 2026-06-01) =====
		   Cluster = en label-value-bunt (eks. "Kilometerstand / 34 700 km")
		   som leses som ÉN visuell enhet.
		   - Innenfor cluster: gap = 0, line-height = --ab8-lh-cluster
		   - Cluster → cluster: var(--ab8-cluster-block-gap)
		   - Cluster → seksjon: --ab8-seksjon-gap (64/48/32) */
		--ab8-cluster-gap:       0;
		--ab8-cluster-block-gap: var(--ab8-s-6);

		/* ===== FARGER (matcher branding.md, JA 2026-05-22) ===== */
		--ab8-bg-default:    #FFFFFF;
		--ab8-bg-tone:       #F5F5F3; /* Auto-bakgrunn — Polestar-kompatibel */
		--ab8-kull:          #1C1C1C;
		--ab8-kull-soft:     rgba(0,0,0,.6);
		--ab8-kull-svak:     rgba(0,0,0,.4);
		--ab8-line:          rgba(0,0,0,.1);
		--ab8-autoblaa:      #0096D6; /* CTA primary */
		--ab8-autokorall:    #EB6555; /* accent */

		/* ===== RADIUS ===== */
		--ab8-radius-pill:   999px;
		--ab8-radius-tile:   0;     /* Polestar-firkant default */
		--ab8-radius-soft:   8px;   /* unntak for f.eks. kart-wrap */

		/* ===== FONT-FAMILY (JA 2026-07-03: Neue Haas Grotesk Text Pro, Adobe Fonts aam7lae) =====
		   Inter Tight utgår i sin helhet. Satoshi og Space Grotesk (tema-defaults) skal
		   ikke være i bruk noe sted — overstyres global av tema-baserte snippet-overrides. */
		--ab8-font-sans: "neue-haas-grotesk-text", "Helvetica Neue", Arial, sans-serif;

		/* ===== MOTION ===== */
		--ab8-ease-out:   cubic-bezier(.16, 1, .3, 1);
		--ab8-dur-fast:   .15s;
		--ab8-dur-normal: .25s;
		--ab8-dur-slow:   .6s;
	}

	@media (max-width: 1024px) {
		:root {
			--ab8-pad-tekst:    var(--ab8-pad-tekst-tablet);
			--ab8-pad-boks:     var(--ab8-pad-boks-tablet);
			--ab8-seksjon-gap:  var(--ab8-seksjon-gap-tablet);
			--ab8-grid-gutter:  var(--ab8-grid-gutter-tablet);
			/* /guider/ står på 52,5 også på mobil, og et tall brekker ikke. */
			--ab8-fs-mega:      52.5px;
		}
	}
	@media (max-width: 600px) {
		:root {
			--ab8-pad-tekst:    var(--ab8-pad-tekst-mobil);
			--ab8-pad-boks:     var(--ab8-pad-boks-mobil);
			--ab8-seksjon-gap:  var(--ab8-seksjon-gap-mobil);
			--ab8-grid-gutter:  var(--ab8-grid-gutter-mobil);
			--ab8-fs-mega:      52.5px;
		}
	}

	/* ============================================================
	 * GRID-UTILITIES (12-spalter)
	 *
	 * Bruk:
	 *   <div class="ab8-container"><div class="ab8-grid">…12 grid-items…</div></div>
	 *
	 * Eller "snap til X kolonner":
	 *   <div class="ab8-grid"><div class="ab8-col-6">…</div><div class="ab8-col-6">…</div></div>
	 *
	 * ============================================================ */
	.ab8-container {
		max-width: var(--ab8-container-max);
		margin: 0 auto;
		padding-left: var(--ab8-pad-tekst);
		padding-right: var(--ab8-pad-tekst);
		box-sizing: border-box;
	}
	.ab8-grid {
		display: grid;
		grid-template-columns: repeat(var(--ab8-grid-cols), 1fr);
		gap: var(--ab8-grid-gutter);
	}
	.ab8-col-1  { grid-column: span 1; }
	.ab8-col-2  { grid-column: span 2; }
	.ab8-col-3  { grid-column: span 3; }
	.ab8-col-4  { grid-column: span 4; }
	.ab8-col-5  { grid-column: span 5; }
	.ab8-col-6  { grid-column: span 6; }
	.ab8-col-7  { grid-column: span 7; }
	.ab8-col-8  { grid-column: span 8; }
	.ab8-col-9  { grid-column: span 9; }
	.ab8-col-10 { grid-column: span 10; }
	.ab8-col-11 { grid-column: span 11; }
	.ab8-col-12 { grid-column: span 12; }

	@media (max-width: 1024px) {
		/* Tablet: alle ab8-col-X kollapser til halvering (3+9 → 6+6, 4+8 → 12, osv).
		   For nå holder vi det enkelt: 1-6 forblir, 7-12 blir 12. Snippets kan
		   overstyre via egne media queries der det trengs. */
		.ab8-col-7, .ab8-col-8, .ab8-col-9, .ab8-col-10, .ab8-col-11 { grid-column: span 12; }
	}
	@media (max-width: 600px) {
		/* Mobil: alle kolonner full bredde. Override per komponent ved behov. */
		.ab8-col-2, .ab8-col-3, .ab8-col-4, .ab8-col-5, .ab8-col-6 { grid-column: span 12; }
	}

	/* ============================================================
	 * SEKSJON-TYPER (JA 2026-06-01) — modulær rytme à la Polestar/Haglöfs.
	 *
	 * Regel: ikke to seksjoner på rad skal dele samme type.
	 * Variasjonen i bakgrunn/padding lager flyten — ikke linjer.
	 * ============================================================ */
	.ab8-section--flat-white {
		background: var(--ab8-bg-default);
		padding-top: var(--ab8-seksjon-gap);
		padding-bottom: var(--ab8-seksjon-gap);
	}
	.ab8-section--flat-tone {
		background: var(--ab8-bg-tone);
		padding-top: var(--ab8-seksjon-gap);
		padding-bottom: var(--ab8-seksjon-gap);
	}
	/* Dark-variant: Kull-bakgrunn, hvit tekst. Sparsom bruk — punktuering. */
	.ab8-section--kull {
		background: var(--ab8-kull);
		color: #FFFFFF;
		padding-top: var(--ab8-seksjon-gap);
		padding-bottom: var(--ab8-seksjon-gap);
	}
	.ab8-section--kull h1,
	.ab8-section--kull h2,
	.ab8-section--kull h3,
	.ab8-section--kull p,
	.ab8-section--kull a { color: #FFFFFF; }
	/* Blå-tonet variant: bløt blå-til-grå bakgrunn. Brukes for tillit/trust-seksjoner. */
	.ab8-section--blaa-tone {
		background: #F0F5F9;
		padding-top: var(--ab8-seksjon-gap);
		padding-bottom: var(--ab8-seksjon-gap);
	}
	/* Korall-accent: kraftig korall-bakgrunn for max 1 seksjon per side (punktuering). */
	.ab8-section--korall {
		background: var(--ab8-autokorall);
		color: #FFFFFF;
		padding-top: var(--ab8-seksjon-gap);
		padding-bottom: var(--ab8-seksjon-gap);
	}
	.ab8-section--korall h1,
	.ab8-section--korall h2,
	.ab8-section--korall h3,
	.ab8-section--korall p,
	.ab8-section--korall a { color: #FFFFFF; }

	/* Autogrønn — RESERVERT for bærekraft/samfunnsansvar-temaer (JA 2026-06-01).
	   Ikke bruk på bil-flater. Kommer senere i Web 2.0. F5F5F3-skrift, ikke ren hvit. */
	.ab8-section--gronn {
		background: #004F46;
		color: var(--ab8-bg-tone);
		padding-top: var(--ab8-seksjon-gap);
		padding-bottom: var(--ab8-seksjon-gap);
	}
	.ab8-section--gronn h1,
	.ab8-section--gronn h2,
	.ab8-section--gronn h3,
	.ab8-section--gronn p,
	.ab8-section--gronn a { color: var(--ab8-bg-tone); }
	.ab8-section--full-bleed {
		padding-top: 0;
		padding-bottom: 0;
	}
	/* Tile-grid: cells share thin 1px internal lines, ingen ytre border.
	   Polestar 2/3/4/5-rutenettet. Bruk på multi-celle-blokker. */
	.ab8-section--tile-grid {
		display: grid;
		gap: 0;
		border-top: 1px solid var(--ab8-line);
		border-bottom: 1px solid var(--ab8-line);
	}
	.ab8-section--tile-grid > * {
		padding: var(--ab8-s-9);
		border-right: 1px solid var(--ab8-line);
	}
	.ab8-section--tile-grid > *:last-child { border-right: 0; }
	.ab8-section--tile-grid--2 { grid-template-columns: repeat(2, 1fr); }
	.ab8-section--tile-grid--3 { grid-template-columns: repeat(3, 1fr); }
	.ab8-section--tile-grid--4 { grid-template-columns: repeat(4, 1fr); }
	@media (max-width: 1024px) {
		.ab8-section--tile-grid--3,
		.ab8-section--tile-grid--4 { grid-template-columns: repeat(2, 1fr); }
		.ab8-section--tile-grid > * { padding: var(--ab8-s-7); }
	}
	@media (max-width: 600px) {
		.ab8-section--tile-grid--2,
		.ab8-section--tile-grid--3,
		.ab8-section--tile-grid--4 { grid-template-columns: 1fr; }
		.ab8-section--tile-grid > * { border-right: 0; border-bottom: 1px solid var(--ab8-line); }
		.ab8-section--tile-grid > *:last-child { border-bottom: 0; }
	}

	/* ============================================================
	 * BILDE-PLACEHOLDER (JA 2026-06-01) — tydelige bokser så det er åpenbart
	 * at "her skal det inn et bilde". Bruker Autokorall-outline + label.
	 *
	 * Bytte til ekte bilde:
	 *   <div class="ab8-img ab8-img--atmos">
	 *     <img src="..." alt="...">  ← legg inn img, så skjules placeholder-styling
	 *   </div>
	 *
	 * Aspect-ratios per type:
	 *   detail   = 1:1 (square close-up — knapp, søm, ratt-detalj)
	 *   atmos    = 16:9 (landskap — fjellvei, kyst, skog)
	 *   heritage = 4:5 portrait (historisk-foto med sepia-filter)
	 *   material = 4:3 (tekstur, dekkmønster, materialer)
	 * ============================================================ */
	.ab8-img {
		position: relative;
		display: block;
		width: 100%;
		background: var(--ab8-bg-tone);
		overflow: hidden;
	}
	.ab8-img--detail   { aspect-ratio: 1 / 1; }
	.ab8-img--atmos    { aspect-ratio: 16 / 9; }
	.ab8-img--heritage { aspect-ratio: 4 / 5; filter: sepia(.4) contrast(.95); }
	.ab8-img--material { aspect-ratio: 4 / 3; }

	/* Placeholder-styling — vises bare når .ab8-img IKKE har et img-barn. */
	.ab8-img:not(:has(img))::before {
		content: '';
		position: absolute;
		inset: var(--ab8-s-3);
		border: 2px dashed var(--ab8-autokorall);
		pointer-events: none;
	}
	.ab8-img:not(:has(img))::after {
		content: 'BILDET KOMMER';
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		font-size: var(--ab8-fs-mini);
		font-weight: 400;
		letter-spacing: .08em;
		text-transform: uppercase;
		color: var(--ab8-autokorall);
		text-align: center;
		padding: var(--ab8-s-2) var(--ab8-s-4);
		background: var(--ab8-bg-default);
		white-space: nowrap;
	}
	.ab8-img[data-label]:not(:has(img))::after { content: attr(data-label); }

	/* Når img er inni, dekker den hele bildeflaten. */
	.ab8-img img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		display: block;
	}

	/* ============================================================
	 * CLUSTER-UTILITY — label-value-bunt som leses som én visuell enhet.
	 *
	 * Bruk:
	 *   <div class="ab8-cluster">
	 *     <div class="ab8-cluster__label">Kilometerstand</div>
	 *     <div class="ab8-cluster__value">34 700 km</div>
	 *   </div>
	 *
	 * Cluster-til-cluster gap kontrolleres av forelder via
	 * var(--ab8-cluster-block-gap).
	 * ============================================================ */
	.ab8-cluster {
		display: flex;
		flex-direction: column;
		gap: var(--ab8-cluster-gap);
		margin: 0;
	}
	.ab8-cluster__label {
		margin: 0;
		font-size: var(--ab8-fs-body);
		line-height: var(--ab8-lh-cluster);
		color: var(--ab8-kull-soft);
	}
	.ab8-cluster__value {
		margin: 0;
		font-size: var(--ab8-fs-medium);
		line-height: var(--ab8-lh-cluster);
		color: var(--ab8-kull);
	}