/* ============================================================
   VIMAB Tjänstelista — frontend.css
   Två varianter: dark schematic + light editorial.
   Flexbox-baserad layout: bara de celler som ska visas emit:as
   från PHP, så raden anpassar sig automatiskt.
   Per-instans-overrides sätts via includes/frontend.css.php.
   ============================================================ */

.vimab-tjanstelista {
	/* Defaults — överskrivs av frontend.css.php och variant-modifiers */
	--vt-accent: #FDC600;
	--vt-bg: transparent;
	--vt-text: inherit;

	--vt-mono: "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;
	--vt-line: rgba(255, 255, 255, 0.15);
	--vt-text-muted: rgba(255, 255, 255, 0.6);
	--vt-meta: rgba(255, 255, 255, 0.5);

	/* Hover-relaterade variabler. --vt-hover-bg har default per variant.
	   --vt-hover-text och --vt-hover-accent har INGA defaults med flit —
	   när de inte är satta blir var() invalid och color-property:n droppas,
	   så att kaskadens ursprungsfärg behålls. Sätts av frontend.css.php
	   när användaren angett en hover-färg. */
	--vt-hover-bg: rgba(253, 198, 0, 0.06);
	--vt-slide-distance: 6px;

	/* Övergångar — mjuk easing på 400ms som default.
	   Bytbar via "Hover-mjukhet"-fältet i modul-settings. */
	--vt-transition-duration: 400ms;
	--vt-transition-easing: cubic-bezier(0.22, 0.61, 0.36, 1);
	--vt-transition: var(--vt-transition-duration) var(--vt-transition-easing);

	/* Padding på raderna. */
	--vt-row-pad-x: 16px;
	--vt-row-pad-y: 28px;

	background: var(--vt-bg);
	color: var(--vt-text);
	width: 100%;
	box-sizing: border-box;
}

.vimab-tjanstelista * {
	box-sizing: border-box;
}


/* ============================================================
   SEKTIONSRUBRIK (valfri)
   ============================================================ */

.vimab-tjanstelista__header {
	margin-bottom: 3rem;
}

.vimab-tjanstelista__bar {
	display: grid;
	grid-template-columns: 80px 1fr auto;
	gap: 1.5rem;
	padding: 0 var(--vt-row-pad-x) 0.75rem;
	border-bottom: 1px solid rgba(253, 198, 0, 0.5);
	margin-bottom: 2rem;
	font-family: var(--vt-mono);
	font-size: 0.72rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	align-items: center;
}

.vimab-tjanstelista__heading,
.vimab-tjanstelista__lead {
	padding-left: var(--vt-row-pad-x);
	padding-right: var(--vt-row-pad-x);
}

.vimab-tjanstelista__bar-num {
	color: var(--vt-accent);
}

.vimab-tjanstelista__bar-title {
	font-size: 1.05rem;
	letter-spacing: 0.05em;
	font-weight: 500;
}

.vimab-tjanstelista__bar-meta {
	color: var(--vt-meta);
	text-align: right;
}

.vimab-tjanstelista__heading {
	font-size: clamp(2rem, 4.2vw, 3.4rem);
	font-weight: 300;
	line-height: 1.05;
	letter-spacing: -0.02em;
	margin: 0 0 1.5rem 0;
	max-width: 22ch;
}

.vimab-tjanstelista__heading em {
	font-style: normal;
	color: var(--vt-accent);
	font-weight: 600;
}

.vimab-tjanstelista__lead {
	font-size: 1.05rem;
	line-height: 1.6;
	max-width: 60ch;
	margin: 0 0 1.5rem 0;
}


/* ============================================================
   ITEM-LISTA — flexbox, varje cell-typ har egen flex-vikt
   ============================================================ */

.vimab-tjanstelista__items {
	display: block;
	/* <ul> sedan 1.3.4 — nollställ listmarkörer och webbläsarens indrag. */
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Raden är <li> > <a|div>. <li> bär ingen egen stil, men vm-reveal-child
   landar här i stället för på länken. */
.vimab-tjanstelista__items > li {
	display: block;
}

.vimab-tjanstelista__item {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	padding: var(--vt-row-pad-y) var(--vt-row-pad-x);
	text-decoration: none;
	color: inherit;
	transition:
		background var(--vt-transition),
		transform var(--vt-transition),
		color var(--vt-transition);
}

a.vimab-tjanstelista__item {
	cursor: pointer;
}

/* Cell-vikter — fasta för num/desc/meta/image/arrow, flexibel för title.
   min-width: 0 är nödvändigt för att titeln ska kunna krympa vid behov. */
.vimab-tjanstelista__num {
	flex: 0 0 70px;
	font-family: var(--vt-mono);
	color: var(--vt-accent);
	font-size: 0.78rem;
	letter-spacing: 0.12em;
	white-space: nowrap;
}

.vimab-tjanstelista__title {
	flex: 0 0 280px;
	min-width: 0;
	font-size: 1.4rem;
	font-weight: 500;
	line-height: 1.2;
}

.vimab-tjanstelista__desc {
	/* flex-basis 0, inte auto. Med auto blir basstorleken textens naturliga
	   bredd, och när summan av alla basstorlekar överskrider raden krymper
	   flexbox samtliga celler proportionellt — även titeln, som då spillde över
	   i beskrivningen. Med 0 växer beskrivningen bara med det som blir över, och
	   titeln behåller sin bredd. Det håller också kolumnerna i linje mellan
	   rader med olika långa rubriker. */
	flex: 1 1 0;
	min-width: 0;
	font-size: 0.95rem;
	line-height: 1.5;
	color: inherit;
}

.vimab-tjanstelista__meta {
	flex: 0 0 100px;
	font-family: var(--vt-mono);
	font-size: 0.7rem;
	color: var(--vt-accent);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	white-space: nowrap;
}

.vimab-tjanstelista__image {
	flex: 0 0 120px;
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: rgba(0, 0, 0, 0.05);
	/* Lätt rundade hörn. overflow: hidden ovan klipper bilden till radien. */
	border-radius: var(--vt-image-radius, 6px);
}

.vimab-tjanstelista__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.vimab-tjanstelista__image--empty {
	background: transparent;
}

/* En meta-cell utan innehåll reserverar annars 100px i varje rad. Bilden
   behåller sin bredd även tom, eftersom den håller kolumnerna i linje mellan
   rader där bara vissa har bild. */
.vimab-tjanstelista__meta:empty {
	display: none;
}

.vimab-tjanstelista__arrow {
	flex: 0 0 50px;
	display: inline-flex;
	align-items: center;
	justify-content: flex-end;
	color: var(--vt-accent);
	transition:
		transform var(--vt-transition),
		color var(--vt-transition);
}

.vimab-tjanstelista__arrow svg {
	width: 26px;
	height: auto;
	display: block;
}


/* ============================================================
   VARIANT: MÖRK SCHEMATIC
   Bakgrund: #08334d. Streckade rader. Bredare desc-kolumn.
   ============================================================ */

.vimab-tjanstelista--style-dark {
	--vt-bg: #08334d;
	--vt-text: #ffffff;
	--vt-line: rgba(255, 255, 255, 0.15);
	--vt-text-muted: rgba(255, 255, 255, 0.6);
	--vt-meta: rgba(255, 255, 255, 0.5);
	--vt-hover-bg: rgba(253, 198, 0, 0.06);
}

.vimab-tjanstelista--style-dark .vimab-tjanstelista__num {
	flex-basis: 80px;
}

.vimab-tjanstelista--style-dark .vimab-tjanstelista__arrow {
	flex-basis: 60px;
}

.vimab-tjanstelista--style-dark .vimab-tjanstelista__item {
	border-bottom: 1px dashed var(--vt-line);
}

.vimab-tjanstelista--style-dark .vimab-tjanstelista__items > li:first-child > .vimab-tjanstelista__item {
	border-top: 1px dashed var(--vt-line);
}


/* ============================================================
   VARIANT: LJUS EDITORIAL
   Bakgrund: vit. Solid grå rader. Versaler funkar bra.
   ============================================================ */

.vimab-tjanstelista--style-light {
	--vt-bg: #ffffff;
	--vt-text: #073555;
	--vt-line: rgba(7, 53, 85, 0.10);
	--vt-text-muted: rgba(7, 53, 85, 0.6);
	--vt-meta: rgba(7, 53, 85, 0.5);
	--vt-hover-bg: rgba(7, 53, 85, 0.03);
}

.vimab-tjanstelista--style-light .vimab-tjanstelista__bar {
	border-bottom-color: rgba(7, 53, 85, 0.15);
}

.vimab-tjanstelista--style-light .vimab-tjanstelista__item {
	border-bottom: 1px solid var(--vt-line);
}

.vimab-tjanstelista--style-light .vimab-tjanstelista__items > li:first-child > .vimab-tjanstelista__item {
	border-top: 1px solid var(--vt-line);
}

.vimab-tjanstelista--style-light .vimab-tjanstelista__title {
	color: #073555;
	font-weight: 700;
	letter-spacing: 0.01em;
}

.vimab-tjanstelista--style-light .vimab-tjanstelista__meta {
	color: rgba(7, 53, 85, 0.6);
}



/* ============================================================
   HOVER — gemensamma effekter, styrda av modifier-klass på roten
   ============================================================ */

/* Bara länkar reagerar (div utan länk har ingen hover).
   Hover-text- och hover-accent-färgerna emit:as från frontend.css.php
   bara om användaren angett ett värde — annars behålls originalfärgerna. */
a.vimab-tjanstelista__item:hover {
	background: var(--vt-hover-bg);
}

/* Mjuk transition på alla färgskiften. */
.vimab-tjanstelista__title,
.vimab-tjanstelista__desc,
.vimab-tjanstelista__num,
.vimab-tjanstelista__meta {
	transition: color var(--vt-transition);
}

/* Effekt: arrow-slide (default) — endast pilen rör sig */
.vimab-tjanstelista--hover-arrow-slide a.vimab-tjanstelista__item:hover .vimab-tjanstelista__arrow {
	transform: translateX(var(--vt-slide-distance));
}

/* Effekt: row-slide — hela raden glider åt höger + pilen */
.vimab-tjanstelista--hover-row-slide a.vimab-tjanstelista__item:hover {
	transform: translateX(calc(var(--vt-slide-distance) / 2));
}

.vimab-tjanstelista--hover-row-slide a.vimab-tjanstelista__item:hover .vimab-tjanstelista__arrow {
	transform: translateX(var(--vt-slide-distance));
}

/* Effekt: bg-only och none — ingen rörelse, bara bg-byte (eller inget) */
.vimab-tjanstelista--hover-none a.vimab-tjanstelista__item:hover {
	background: transparent;
}


/* ============================================================
   NUMRERINGSFORMAT — typografisk justering
   ============================================================ */

.vimab-tjanstelista--num-slash .vimab-tjanstelista__num {
	font-size: 0.72rem;
	letter-spacing: 0.15em;
}


/* ============================================================
   TITLE CASE
   ============================================================ */

.vimab-tjanstelista--titlecase-upper .vimab-tjanstelista__title {
	text-transform: uppercase;
	letter-spacing: 0.03em;
}


/* ============================================================
   RESPONSIV
   Tablet: tightare cell-bredder
   Mobil: dölj allt utom num + title + arrow
   ============================================================ */

@media (max-width: 1100px) {

	.vimab-tjanstelista__item {
		gap: 1rem;
	}

	/* !important krävs: frontend.css.php skriver titelbredden som
	   ".fl-node-{id} .vimab-tjanstelista__title" (specificitet 0-2-0), och en
	   media query höjer inte specificiteten. Utan detta vinner per-instans-
	   bredden och regeln nedan får ingen effekt alls — vilket klämde
	   beskrivningen till ~17 tecken per rad på surfplatta.
	   flex: 0 1 betyder att titeln får krympa men aldrig växa.

	   min-width: min-content sätter golvet vid längsta ordets bredd. Basregeln
	   har min-width: 0, och utan detta krympte cellen under textens bredd —
	   "Verkstadsservice" är ett enda ord som inte kan brytas, så det spillde
	   över i beskrivningskolumnen i stället. */
	.vimab-tjanstelista .vimab-tjanstelista__title {
		flex: 0 1 200px !important;
		min-width: min-content !important;
	}

	.vimab-tjanstelista__meta {
		flex-basis: 90px;
	}

	.vimab-tjanstelista__image {
		flex-basis: 100px;
	}
}

@media (max-width: 800px) {

	.vimab-tjanstelista {
		/* Minska radens horisontella padding på mobil för att maximera
		   utrymme. Sätts via CSS-variabel så att items + bar följer med. */
		--vt-row-pad-x: 12px;
		--vt-row-pad-y: 18px;
	}

	.vimab-tjanstelista__bar {
		grid-template-columns: auto 1fr;
		gap: 0.75rem;
	}

	.vimab-tjanstelista__bar-meta {
		grid-column: 1 / -1;
		text-align: left;
	}

	.vimab-tjanstelista__item {
		gap: 0.75rem;
	}

	.vimab-tjanstelista__desc,
	.vimab-tjanstelista__meta,
	.vimab-tjanstelista__image {
		display: none;
	}

	/* !important behövs här eftersom frontend.css.php skriver en
	   per-instans flex-basis på titeln med högre prioritet i kaskaden. */
	.vimab-tjanstelista .vimab-tjanstelista__num {
		flex: 0 0 auto !important;
		min-width: 30px;
	}

	.vimab-tjanstelista .vimab-tjanstelista__title {
		flex: 1 1 auto !important;
		min-width: 0;
		font-size: 1.15rem;
		word-break: break-word;
	}

	.vimab-tjanstelista .vimab-tjanstelista__arrow {
		flex: 0 0 28px !important;
	}

	.vimab-tjanstelista__arrow svg {
		width: 20px;
	}
}

/* Mycket smala skärmar (≤ 360px) — tighta ihop ytterligare */
@media (max-width: 360px) {

	.vimab-tjanstelista {
		--vt-row-pad-x: 8px;
	}

	.vimab-tjanstelista__item {
		gap: 0.5rem;
	}

	.vimab-tjanstelista .vimab-tjanstelista__title {
		font-size: 1rem;
	}

	.vimab-tjanstelista .vimab-tjanstelista__arrow {
		flex: 0 0 22px !important;
	}

	.vimab-tjanstelista__arrow svg {
		width: 16px;
	}
}


/* ============================================================
   EMPTY-STATE (bara synligt för redaktörer)
   ============================================================ */

.vimab-tjanstelista__empty {
	padding: 2rem;
	text-align: center;
	border: 1px dashed currentColor;
	opacity: 0.6;
	font-style: italic;
}


/* ============================================================
   REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {

	.vimab-tjanstelista__item,
	.vimab-tjanstelista__arrow {
		transition: none;
	}

	a.vimab-tjanstelista__item:hover {
		padding-left: 0 !important;
	}

	a.vimab-tjanstelista__item:hover .vimab-tjanstelista__arrow {
		transform: none;
	}
}