.blogg { float: none; width: 100%; padding: 40px 0 60px; }
#content.blogg { max-width: var(--page-width, 1170px); margin: 0 auto; }
.container-fluid > #content.blogg { padding-left: 15px; padding-right: 15px; }
#content.blogg p.blogg-datum { margin: 0; font-family: var(--primary-font); font-size: 13px; line-height: 1.4; opacity: 0.7; }

.blogg-lista .blogg-huvud { margin-bottom: 24px; }

.blogg-kategorier { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
#content .blogg-kategorier a { padding: 6px 14px; border: 1px solid currentColor; border-radius: 999px; font-family: var(--primary-font); font-size: 14px; text-decoration: none; opacity: 0.75; }
#content .blogg-kategorier a:hover, #content .blogg-kategorier a.aktiv { opacity: 1; background: var(--primary-color); border-color: var(--primary-color); color: var(--light-color, #fff); }

.blogg-rutnat { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 28px; }
#content .blogg-kort a { display: flex; flex-direction: column; height: 100%; color: inherit; text-decoration: none; border: 0; }
.blogg-bild { aspect-ratio: 3 / 2; overflow: hidden; border-radius: 6px; background: color-mix(in srgb, currentColor 6%, transparent); }
.blogg-bild img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.3s; }
.blogg-kort a:hover .blogg-bild img { transform: scale(1.03); }
.blogg-bild.blogg-logga { display: flex; align-items: center; justify-content: center; padding: 12%; background: var(--header-bkg, color-mix(in srgb, currentColor 6%, transparent)); }
.blogg-bild.blogg-logga img { width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; }
.blogg-kort a:hover .blogg-bild.blogg-logga img { transform: none; }
.blogg-text { padding-top: 14px; }
.blogg-kort.utan-bild .blogg-text { padding: 20px; border-radius: 6px; background: color-mix(in srgb, currentColor 6%, transparent); height: 100%; }
#content .blogg-kort h2 { margin: 6px 0 8px; font-family: var(--secondary-font); font-size: 22px; line-height: 1.25; }
#content .blogg-kort a:hover h2 { color: var(--primary-color); }
#content .blogg-kort p { margin: 0; line-height: 1.55; }

.blogg-sidor { margin-top: 40px; }
.blogg-sidor .nav-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
#content .blogg-sidor .page-numbers { min-width: 40px; font-family: var(--primary-font); font-size: 15px; padding: 8px 12px; border-radius: 6px; text-align: center; text-decoration: none; }
.blogg-sidor a.page-numbers:hover { background: color-mix(in srgb, currentColor 10%, transparent); }
#content .blogg-sidor .page-numbers.current { background: var(--primary-color); color: var(--light-color, #fff); }
.blogg-sidor .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

.blogg-inlagg article { max-width: 760px; margin: 0 auto; }
.blogg-inlagg .blogg-huvud h1 { margin: 6px 0 24px; }
.blogg-toppbild { margin-bottom: 28px; }
.blogg-toppbild img { width: 100%; height: auto; border-radius: 6px; }
.blogg-inlagg .entry-content img { max-width: 100%; height: auto; }

.blogg-bladdra { display: flex; justify-content: space-between; gap: 24px; margin-top: 48px; padding-top: 24px; border-top: 1px solid color-mix(in srgb, currentColor 15%, transparent); }
#content .blogg-bladdra a { display: flex; flex-direction: column; gap: 4px; max-width: 48%; text-decoration: none; font-family: var(--secondary-font); font-size: 18px; line-height: 1.3; }
#content .blogg-bladdra a:hover { color: var(--primary-color); }
.blogg-bladdra span { font-family: var(--primary-font); font-size: 13px; opacity: 0.7; }
.blogg-bladdra .nasta { margin-left: auto; text-align: right; }

.blogg-fler { margin-top: 48px; padding-top: 32px; border-top: 1px solid color-mix(in srgb, currentColor 15%, transparent); }
.blogg-fler-huvud { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-bottom: 20px; }
.blogg-fler-huvud h2 { margin: 0; }
.blogg-fler-huvud a { white-space: nowrap; font-family: var(--primary-font); font-size: 14px; }