/* =========================================================
   THE PACKAGE PICKER
   =========================================================
   Dense on purpose. This block is a price list, not a set of
   argument cards: whoever reaches it has already decided WHAT
   they want and is choosing HOW MUCH.

   THE TILES ARE LINKS, NOT RADIO BUTTONS. A radio group would
   need a separate submit step, and every step between "I want
   this one" and "I clicked" costs orders.

   FIVE PER ROW, NOT auto-fill.
   The first version used repeat(auto-fill, minmax(8.5rem, 1fr)),
   which fitted seven tiny tiles on a wide screen and left three
   stranded on a second row. Seven is not a number anyone reads
   as a group, and the tiles were too small to feel clickable.
   Five gives two even rows for the ten-package family and lets
   each tile be big enough to matter.

   The row is flex, not grid, for one reason: a family with four
   packages leaves an orphan slot in a five-column grid, and grid
   cannot centre a partial last row. Flex can.
   ========================================================= */

.ca-paket {
	--ca-paket-gap: var(--ca-rum-4);

	display: grid;
	gap: var(--ca-rum-8);
	/* VIT PANEL MED VARM KANT, inte en gra platta.
	   Den tonade versionen sag livlos ut bredvid startsidan, som bar
	   sin energi med farg och bild. Panelen ar nu vit sa att rutorna
	   far en mjuk tonad botten i stallet, och hela blocket vilar pa
	   sektionens varma yta. */
	background: var(--ca-white);
	border: 1px solid var(--ca-line);
	border-radius: var(--ca-radie-stor);
	padding: var(--ca-rum-8) var(--ca-rum-6) var(--ca-rum-7);
	box-shadow: var(--ca-skugga);
	text-align: center;
}

.ca-paket__rubrik { margin-block-end: var(--ca-rum-6); }

.ca-paket__rubrik h2 {
	margin: 0 0 var(--ca-rum-3);
	font-size: var(--ca-text-xl);
	max-width: none;
}

/* Skillnaden mellan kvaliteterna, i en mening.
   Kategorin saljer bada sida vid sida utan att nagonsin saga vad som
   skiljer dem, sa koparen valjer pa pris. Att saga det ar den
   billigaste tilliten pa hela sidan. */
/* Punkterna pa EN rad, avgransade med prickar.
   Referensen staplar dem lodratt, fyra rader per kvalitet, vilket
   trycker ner priserna. Pa en rad sager de samma sak pa en femtedel
   av hojden. Bryts raden pa smal skarm faller punkterna om sig
   sjalva, och separatorn foljer med. */
/* SPECIFICITETEN AR HOJD, precis som pa .ca-paket__rutnat nedan.
   .entry-content ul i komponenter.css satter padding-inline-start:
   1.1rem och vinner over en enkel klass. Raden hamnade darfor 20 px
   for langt at hoger. Exakt samma fel som prisrutorna hade, och jag
   lagade bara den ena. */
.ca-paket .ca-paket__punkter {
	list-style: none;
	margin: 0 auto;
	padding: 0;
	padding-inline-start: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: baseline;
	gap: .35rem var(--ca-rum-3);
	max-width: 74ch;
	font-size: var(--ca-text-sm);
	color: var(--ca-ink-dampad);
	line-height: 1.5;
}

.ca-paket__punkter li {
	display: flex;
	align-items: baseline;
	gap: var(--ca-rum-3);
	margin: 0;
}

/* PRICKEN RITAS, DEN SKRIVS INTE.
   Forsta versionen anvande content med en teckenescape. Tva saker
   gick fel: escapen blev en oktal sekvens pa vagen in i filen och
   gav ett kontrolltecken plus en tvaa, och aven ratt skriven ar den
   beroende av att typsnittet har glyfen.

   En rund fyrapixlars ruta kan inte sakna glyf, foljer varumarkes-
   fargen, och laser inte upp nagonting for en skarmlasare. */
.ca-paket__punkter li + li::before {
	content: "";
	flex: none;
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: var(--ca-brand);
	align-self: center;
}

/* SPECIFICITETEN AR HOJD OCH padding-inline-start AR EXPLICIT.
   .entry-content ul i komponenter.css satter padding-inline-start:
   1.1rem, alltsa 20 px, med hogre specificitet an en enkel klass.
   Resultatet var att raden lag 20 px for langt at hoger inuti sin
   behallare: uppmatt vanster 20 px, hoger 0. Det sag ut som att
   justify-content: center inte fungerade, men slacken fanns inte,
   den lag i paddingen. */
.ca-paket .ca-paket__rutnat {
	list-style: none;
	margin: 0;
	padding: 0;
	padding-inline-start: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--ca-paket-gap);
}

.ca-paket__rutnat li {
	/* Fem i bredd: hela bredden minus fyra mellanrum, delat pa fem. */
	flex: 0 1 calc((100% - 4 * var(--ca-paket-gap)) / 5);
	min-width: 8.5rem;
}

.ca-paket__ruta {
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: .1rem;
	padding: var(--ca-rum-6) var(--ca-rum-4);
	border: 1px solid var(--ca-line);
	border-radius: var(--ca-radie);
	/* VIT RUTA PA TONAD PANEL, inte tvartom.
	   Forsta versionen hade vit panel och beige rutor, vilket gav noll
	   kontrast mellan behallare och innehall och sag platt ut. Nu ar
	   panelen ytan och rutorna ligger ovanpa den. */
	background: var(--ca-surface);
	color: var(--ca-ink);
	min-height: var(--ca-traffyta);
	text-align: center;
	transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.ca-paket__ruta:hover,
.ca-paket__ruta:focus-visible {
	border-color: var(--ca-brand);
	background: var(--ca-surface-2);
	box-shadow: 0 0 0 3px rgba(177, 72, 125, .14);
	transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
	.ca-paket__ruta { transition: none; }
	.ca-paket__ruta:hover,
	.ca-paket__ruta:focus-visible { transform: none; }
}

.ca-paket__antal {
	font-size: var(--ca-text-2xl);
	font-weight: 700;
	line-height: 1.05;
	font-variant-numeric: tabular-nums;
	letter-spacing: -.01em;
}

.ca-paket__enhet {
	font-size: var(--ca-text-xs);
	color: var(--ca-ink-dampad);
	letter-spacing: .02em;
}

.ca-paket__pris {
	margin-block-start: var(--ca-rum-4);
	padding-block-start: var(--ca-rum-3);
	border-block-start: 1px solid var(--ca-line);
	width: 100%;
	font-size: var(--ca-text-xl);
	font-weight: 700;
	color: var(--ca-brand);
	font-variant-numeric: tabular-nums;
}

.ca-paket__pris small {
	font-size: var(--ca-text-xs);
	font-weight: 400;
	color: var(--ca-ink-dampad);
}

/* Den arliga raden. Ligger INUTI koprutan med flit: en kopare som
   skannar efter haken hittar den direkt i stallet for att kanna att
   nagon gommer den. */
.ca-paket__not {
	margin: 0 auto;
	padding-block-start: var(--ca-rum-6);
	border-block-start: 1px solid var(--ca-line);
	max-width: 66ch;
	font-size: var(--ca-text-sm);
	color: var(--ca-ink-dampad);
	line-height: 1.55;
}

/* ---- Smalare skarmar ----
   Fem faller till tre, sedan tva. Aldrig en enda i bredd: en kolumn
   med prisrutor blir en lista som maste skrollas, och da forsvinner
   hela poangen med att kunna jamfora storlekar med ogat. */
@media (max-width: 62rem) {
	.ca-paket__rutnat li {
		flex-basis: calc((100% - 2 * var(--ca-paket-gap)) / 3);
	}
}

@media (max-width: 34rem) {
	.ca-paket {
		padding: var(--ca-rum-6) var(--ca-rum-4);
		--ca-paket-gap: var(--ca-rum-3);
	}

	.ca-paket__rutnat li {
		flex-basis: calc((100% - var(--ca-paket-gap)) / 2);
		min-width: 0;
	}

	.ca-paket__ruta { padding: var(--ca-rum-5) var(--ca-rum-3); }
	.ca-paket__antal { font-size: var(--ca-text-xl); }
}

/* Tailored, added above the honest line. Sits between the price grid
   and the caveat so the order reads: here are the sizes, here is the
   other way in, here is the catch. */
.ca-paket__skraddarsytt {
	margin-block: var(--ca-rum-5) var(--ca-rum-3);
	padding: var(--ca-rum-4) var(--ca-rum-5);
	background: var(--ca-surface);
	border-inline-start: 3px solid var(--ca-brand);
	color: var(--ca-ink);
}



/* =========================================================
   PROBLEM PACKAGES: [ca_byggen] and [ca_bygge]
   =========================================================
   Cards, not tiles. A package is read, not compared by eye: a
   name, one line on the situation, what is inside, the price.
   Built on the same tokens as .ca-k so the two kinds of card
   look like one family on the same page. Two columns at most,
   because the contents list wraps badly in three. */

.ca-byggen {
	display: grid;
	gap: var(--ca-rum-5);
	margin-block-start: var(--ca-rum-7);
	grid-template-columns: 1fr;
	text-align: start;
}

@media (min-width: 720px) { .ca-byggen { grid-template-columns: repeat(2, 1fr); } }

.ca-bygge {
	display: flex;
	flex-direction: column;
	gap: var(--ca-rum-3);
	padding: var(--ca-rum-6);
	background: var(--ca-white);
	border: 1px solid var(--ca-line);
	border-radius: var(--ca-radie-stor);
	box-shadow: var(--ca-skugga);
}

.ca-s--ton .ca-bygge { background: var(--ca-ground); }

/* SPECIFICITETEN AR HOJD, samma fel som .ca-paket__punkter ovan.
   Uppmatt 2026-09-13 med en enkel klass: listan fick 20 px indrag
   och 16 px marginal fran .entry-content ul, ingressen 26 px och
   priset 38 px marginal fran sektionens p-regler. Kortet sag ut
   att ha ett hal mellan ingressen och innehallet. */
.ca-byggen .ca-bygge__namn { margin: 0; font-size: var(--ca-text-lg); }

.ca-byggen .ca-bygge__ingress {
	margin: 0;
	color: var(--ca-ink-dampad);
	font-size: var(--ca-text-sm);
	line-height: 1.55;
}

.ca-byggen .ca-bygge__delar {
	margin: 0;
	padding: 0;
	padding-inline-start: 0;
	list-style: none;
	font-size: var(--ca-text-sm);
	color: var(--ca-ink);
}

.ca-byggen .ca-bygge__delar li {
	margin: 0;
	padding-block: var(--ca-rum-2);
	border-block-end: 1px solid var(--ca-line);
}

.ca-bygge__antal { color: var(--ca-ink-dampad); white-space: nowrap; }

.ca-byggen .ca-bygge__pris {
	margin: auto 0 0;
	padding-block-start: var(--ca-rum-3);
	font-size: var(--ca-text-xl);
	color: var(--ca-ink);
}

.ca-bygge__fore { color: var(--ca-ink-dampad); font-size: var(--ca-text-bas); }

.ca-bygge__lank {
	font-size: var(--ca-text-sm);
	font-weight: 600;
	color: var(--ca-brand-stark);
}

.ca-bygge__lank:hover { color: var(--ca-ink); }

/* The price table: the price is what the row is for, so it
   gets full ink and never wraps between amount and currency. */
.ca-pristabell td:nth-child(2) {
	color: var(--ca-ink);
	font-weight: 600;
	white-space: nowrap;
}

.ca-pristabell a { color: var(--ca-brand-stark); font-weight: 600; }

/* Two columns fit a phone, so the table does not need the 34rem
   minimum that makes wider tables scroll sideways. */
.ca-tabell.ca-pristabell { min-width: 0; }

.ca-pristabell .ca-pristabell__fraga {
	margin-inline-start: .4em;
	font-size: var(--ca-text-xs);
	font-weight: 400;
}

/* ---------------------------------------------------------
   Problemkorten, [ca_problemkort]. Kompakta och klickbara,
   tva i bredd ocksa pa mobil sa att fyra ryms i en skarm.
   --------------------------------------------------------- */
.ca-problemkort {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--ca-rum-3);
	margin-block-start: var(--ca-rum-6);
	text-align: start;
}

@media (min-width: 1100px) {
	.ca-s .ca-problemkort { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.ca-problem {
	display: flex;
	flex-direction: column;
	gap: var(--ca-rum-1);
	min-height: 100%;
	padding: var(--ca-rum-4);
	background: var(--ca-white);
	border: 1px solid var(--ca-line);
	border-radius: var(--ca-radie-stor);
	color: var(--ca-ink);
	text-decoration: none;
	transition: border-color .15s ease, transform .15s ease;
}

.ca-problem:hover,
.ca-problem:focus-visible {
	border-color: var(--ca-brand);
	color: var(--ca-ink);
}

.ca-problem:focus-visible { outline: 3px solid var(--ca-brand); outline-offset: 2px; }

.ca-problem__namn {
	font-weight: 700;
	line-height: 1.25;
}

.ca-problem__rad {
	font-size: var(--ca-text-xs);
	line-height: 1.45;
	color: var(--ca-ink-dampad);
}

.ca-problem__pris {
	margin-block-start: auto;
	padding-block-start: var(--ca-rum-2);
	font-size: var(--ca-text-sm);
	font-weight: 600;
	color: var(--ca-brand-stark);
}

.ca-problem__pris::after { content: " ›"; }

/* Ankarlankarna fran korten: lite luft ovanfor kortet. Headern ar inte
   fast, sa mer an sa behovs inte. */
.ca-bygge[id] { scroll-margin-block-start: var(--ca-rum-5); }

.ca-problemkort + p { margin-block-start: var(--ca-rum-5); }

/* ---------- Storleksvalet pa paketkorten ----------
   Ett lugnt segmentval, samma formsprak som samtalets kort. */
.ca-storlekar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	margin: 0;
}

.ca-storlekar__etikett {
	margin-inline-end: 4px;
	font-size: .8125rem;
	color: var(--ca-ink-dampad);
}

.ca-byggen .ca-storlekar__val {
	min-height: 32px;
	padding: 0 12px;
	border: 1px solid var(--ca-line);
	border-radius: 999px;
	background: transparent;
	box-shadow: none;
	color: var(--ca-ink);
	font: inherit;
	font-size: .8125rem;
	font-weight: 500;
	cursor: pointer;
}

.ca-byggen .ca-storlekar__val:hover { border-color: var(--ca-ink-dampad); background: var(--ca-white); color: var(--ca-ink); }

.ca-byggen .ca-storlekar__val[aria-pressed="true"] {
	border-color: var(--ca-ink);
	background: var(--ca-ink);
	color: var(--ca-white);
}

.ca-byggen .ca-storlekar__val:focus-visible { outline: 2px solid var(--ca-brand); outline-offset: 2px; }

.ca-bygge__variant {
	display: flex;
	flex-direction: column;
	gap: var(--ca-rum-3);
	flex: 1;
}

.ca-bygge__variant[hidden] { display: none; }

/* ---------- Korten sida vid sida, 2026-09-17 ----------
   Varje ursprung ar ett kort. Rutnatet fyller raden och bryts till
   en kolumn pa mobil. Se ca_sc_paket(). */
.ca-paket__kortrad {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	gap: var(--ca-rum-4);
	text-align: start;
}

.ca-paket__kortrad > .ca-paket__grupp {
	display: flex;
	flex-direction: column;
	gap: var(--ca-rum-3);
	padding: var(--ca-rum-5);
	border: 1px solid var(--ca-line);
	border-radius: 14px;
	background: var(--ca-ground);
}

.ca-paket__kortrad .ca-paket__rubrik { margin: 0; }
.ca-paket__kortrad .ca-paket__rubrik h2 { margin: 0 0 4px; font-size: var(--ca-text-lg); text-align: start; }
.ca-paket__kortrad .ca-paket__punkter { justify-content: flex-start; font-size: .8125rem; }
.ca-paket__kortrad .ca-paket__rutnat { justify-content: flex-start; }

.ca-paket__storlekar { display: flex; flex-wrap: wrap; gap: 6px; }

.ca-paket .ca-paket__storlek {
	min-height: 32px;
	padding: 0 14px;
	border: 1px solid var(--ca-line);
	border-radius: 999px;
	background: transparent;
	box-shadow: none;
	color: var(--ca-ink);
	font: inherit;
	font-size: .8125rem;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	cursor: pointer;
}

.ca-paket .ca-paket__storlek:hover { border-color: var(--ca-ink-dampad); background: var(--ca-white); color: var(--ca-ink); }
.ca-paket .ca-paket__storlek[aria-pressed="true"] { border-color: var(--ca-ink); background: var(--ca-ink); color: var(--ca-white); }
.ca-paket .ca-paket__storlek:focus-visible { outline: 2px solid var(--ca-brand); outline-offset: 2px; }

/* Rutan i ett kort med storleksval fyller kortets bredd och lyfter inte vid hover. */
.ca-paket__kortrad .ca-paket__ruta--val {
	height: auto;
	padding: var(--ca-rum-5) var(--ca-rum-4);
	background: var(--ca-white);
	border-radius: 12px;
}

.ca-paket__kortrad .ca-paket__ruta--val:hover,
.ca-paket__kortrad .ca-paket__ruta--val:focus-visible { transform: none; }

@media (max-width: 34rem) {
	.ca-paket__kortrad { grid-template-columns: 1fr; }
}

/* Skraddarsytt: rubrik och knapp, snabbkontakten under. 2026-09-17. */
.ca-paket .ca-paket__skraddarsytt {
	display: grid;
	margin-block: var(--ca-rum-5) var(--ca-rum-3);
	gap: var(--ca-rum-3);
	justify-items: center;
	padding: var(--ca-rum-6) var(--ca-rum-5);
	border: 0;
	border-radius: 16px;
	border-inline-start: 0;
	background: var(--ca-surface-2);
	text-align: center;
}

.ca-paket__skraddarsytt-text { display: grid; gap: 4px; max-width: 40rem; }
.ca-paket__skraddarsytt-text strong { font-size: var(--ca-text-lg); color: var(--ca-ink); }
.ca-paket__skraddarsytt-text span { color: var(--ca-ink-dampad); }
.ca-paket__skraddarsytt .ca-btn { border-radius: 999px; }
.ca-paket__skraddarsytt .ca-snabb { width: 100%; background: var(--ca-white); }