/* ==========================================================================
   Elbilsguiden — tunt tillägg ovanpå Bootstrap 5.3 + autopower.css.
   Innehåller BARA guide-specifika komponenter. Ingen global reset,
   ingen egen typografi/body-styling. Återanvänder autopowers --mintgron.
   ========================================================================== */

/* ---- "För BMW-ägare"-ruta ---------------------------------------------
   Färgschema hämtat från sajtens .callout (autopower.css): mintgrön ram
   och 20 % mintgrön botten. Rundade hörn + ram behålls från originalet. */
.eg-bmw-box {
	border: 1px solid rgba(var(--mintgron-rgb), 1);
	border-left: 4px solid rgba(var(--mintgron-rgb), 1);
	background-color: rgba(var(--mintgron-rgb), .2);
	border-radius: .5rem;
	padding: 1rem 1.1rem;
	margin: 1.5rem 0;
}
.eg-bmw-tag {
	font-weight: 700;
	color: #01529E;   /* BMW-blå rubriktext behålls — bara ram/botten bytte färg */
	font-size: .85rem;
	letter-spacing: .03em;
}

/* ---- Källstämpel (liten grå text) ------------------------------------- */
.eg-src {
	font-size: .8rem;
	color: #6c757d;
}

/* ---- "Senast granskad"-stämpel ---------------------------------------- */
.eg-stamp {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	font-size: .8rem;
	color: #6c757d;
	border: 1px dashed #ced4da;
	border-radius: .5rem;
	padding: .25rem .6rem;
	margin: .4rem 0;
}
.eg-stamp b { color: #212529; font-weight: 600; }
.eg-review-pending { color: #b5751a; }   /* granskning väntar */
.eg-review-ok { color: #17936b; }        /* verifierat/positivt */

/* ---- Datatabell-nyans (ovanpå Bootstrap .table) ----------------------- */
.eg-datatable thead th {
	background-color: rgba(var(--mintgron-rgb), .35);
	text-transform: uppercase;
	font-size: .78rem;
	letter-spacing: .04em;
}

/* ---- Verktygs-platshållare (fas 2) ------------------------------------ */
.eg-tool-stub {
	border: 2px dashed rgba(var(--mintgron-rgb), .9);
	border-radius: .75rem;
	padding: 1.4rem;
	text-align: center;
	background-color: rgba(var(--mintgron-rgb), .1);
}
.eg-tool-icon { font-size: 1.8rem; }

/* ---- Avdelningsnummer på landningskort -------------------------------- */
.eg-num {
	font-size: .78rem;
	font-weight: 700;
	color: #01529E;
	letter-spacing: .08em;
}

/* ---- Kortbild (card-img-top) på landningssidan ------------------------ */
.eg-card-img {
	aspect-ratio: 3 / 1;
	object-fit: cover;
	object-position: center 40%;
	width: 100%;
	height: auto;
	border-top-left-radius: var(--bs-card-inner-border-radius, .5rem);
	border-top-right-radius: var(--bs-card-inner-border-radius, .5rem);
	background-color: rgba(1, 82, 158, .06);
}
/* ---- "Varför den här guiden är annorlunda" ---------------------------
   Medvetet INTE kort: ingen ram, ingen platta, ingen hover — blocket ska
   läsas som redaktionell text, inte som ännu en rad klickbara
   avdelningslänkar. Bilderna behålls, fritt liggande med rundade hörn. */
.eg-varfor img {
	border-radius: .5rem;
}
.eg-varfor h3 {
	color: #01529E;
}

/* Kort med bild: låt bilden sitta ovanpå, mjuk hover-lyft */
.card:hover .eg-card-img { filter: saturate(1.05) brightness(1.02); }
a.card { overflow: hidden; transition: transform .12s ease, box-shadow .12s ease; }
a.card:hover { transform: translateY(-2px); box-shadow: 0 .5rem 1rem rgba(0,0,0,.08); }
.eg-hero-avif { margin: 0 0 1.5rem; }
.eg-hero-avif img { width: 100%; aspect-ratio: 21/9; object-fit: cover; object-position: center 40%; display: block; }
.eg-hero-avif.eg-hero-nederkant img { object-position: center bottom; }

/* ---- Kapitelbild (högerställd, text flödar; egen rad i mobil) ---------- */
.eg-kapitelbild {
	float: right;
	width: min(340px, 42%);
	margin: .35rem 0 .8rem 1.25rem;
}
.eg-kapitelbild img {
	width: 100%;
	height: auto;
	aspect-ratio: 2 / 1;
	object-fit: cover;
	border-radius: .5rem;
	display: block;
}
main h2 { clear: both; }
@media (max-width: 767.98px) {
	.eg-kapitelbild {
		float: none;
		width: 100%;
		margin: .25rem 0 1rem;
	}
}

/* Stående kapitelbild — variation på enstaka kapitel (Janne 2026-07-28) */
.eg-kapitelbild.eg-kapitelbild-staende {
	width: min(260px, 36%);
}
.eg-kapitelbild-staende img {
	aspect-ratio: 2 / 3;
}
@media (max-width: 767px) {
	.eg-kapitelbild.eg-kapitelbild-staende {
		max-width: 340px;
		margin-left: auto;
		margin-right: auto;
	}
}

/* Kapitelbild i 3:2 — när motivet fyller hela rutan (Janne 2026-07-28) */
.eg-kapitelbild-32 img {
	aspect-ratio: 3 / 2;
}