<\/title>\r\n <style>\r\n :root {\r\n color-scheme: light dark;\r\n --surface: color-mix(in srgb, Canvas 35%, transparent);\r\n --surface-strong: color-mix(in srgb, Canvas 94%, transparent);\r\n --border: color-mix(in srgb, currentColor 18%, transparent);\r\n --muted: color-mix(in srgb, currentColor 28%, transparent);\r\n --shadow: 0 10px 30px color-mix(in srgb, black 12%, transparent);\r\n --radius: 20px;\r\n --max-width: 1500px;\r\n }\r\n\r\n * {\r\n box-sizing: border-box;\r\n }\r\n\r\n html, body {\r\n margin: 0;\r\n padding: 0;\r\n background: transparent;\r\n color: CanvasText;\r\n font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif;\r\n line-height: 1;\r\n }\r\n\r\n body {\r\n min-height: 100vh;\r\n background-color: transparent;\r\n }\r\n\r\n a {\r\n color: inherit;\r\n text-decoration: none;\r\n }\r\n\r\n .page {\r\n width: min(calc(100% - rem), var(--max-width));\r\n margin: 0 auto;\r\n padding: rem 0 rem;\r\n }\r\n\r\n .hero {\r\n display: grid;\r\n gap: 1rem;\r\n margin-bottom: 1rem;\r\n padding: rem 0 0.5rem;\r\n }\r\n\r\n .eyebrow {\r\n font-size: 0.6rem;\r\n letter-spacing: 0.08em;\r\n text-transform: uppercase;\r\n color: var(--muted);\r\n margin: 0;\r\n }\r\n\r\n .hero h1 {\r\n margin: 0;\r\n font-size: clamp(1rem, 2vw, 2rem);\r\n line-height: 1.2;\r\n letter-spacing: -0.03em;\r\n }\r\n\r\n .hero p {\r\n margin: 0;\r\n max-width: 70ch;\r\n font-size: 0.4rem;\r\n color: var(--muted);\r\n }\r\n\r\n \r\n\r\n .blog-grid {\r\n display: grid;\r\n grid-template-columns: repeat(2, minmax(0, 1fr));\r\n gap: 1.2rem;\r\n align-items: stretch;\r\n }\r\n\r\n .post-card {\r\n background: color-mix(in srgb, Canvas 46%, transparent);\r\n border: 2px solid color-mix(in srgb, currentColor 10%, transparent);\r\n border-radius: 18px;\r\n box-shadow: 0 10px 24px color-mix(in srgb, black 15%, transparent);\r\n overflow: hidden;\r\n backdrop-filter: blur(10px);\r\n transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;\r\n display: flex;\r\n flex-direction: column;\r\n height: 100%;\r\n min-height: 200px;\r\n }\r\n\r\n .post-card:hover,\r\n .post-card:focus-within {\r\n transform: translateY(-2px);\r\n box-shadow: 0 16px 36px color-mix(in srgb, black 12%, transparent);\r\n border-color: color-mix(in srgb, currentColor 16%, transparent);\r\n }\r\n\r\n .post-image {\r\n display: none;\r\n }\r\n\r\n .post-body {\r\n padding: 1.2rem 1.2rem 1rem;\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: center;\r\n gap: 0.6rem;\r\n flex: 1;\r\n height: 100%;\r\n }\r\n\r\n .post-meta {\r\n display: flex;\r\n flex-wrap: wrap;\r\n gap: 0.2rem;\r\n font-size: 0.62rem;\r\n color: color-mix(in srgb, currentColor 55%, transparent);\r\n }\r\n\r\n .post-title {\r\n margin: 0;\r\n font-size: 0.6rem;\r\n line-height: 1.4;\r\n letter-spacing: -0.016em;\r\n display: -webkit-box;\r\n -webkit-line-clamp: 2;\r\n -webkit-box-orient: vertical;\r\n overflow: hidden;\r\n }\r\n\r\n .post-excerpt {\r\n margin: 0;\r\n color: color-mix(in srgb, currentColor 72%, transparent);\r\n font-size: 0.8rem;\r\n line-height: 1.4;\r\n display: -webkit-box;\r\n -webkit-line-clamp: 4;\r\n -webkit-box-orient: vertical;\r\n overflow: hidden;\r\n }\r\n\r\n .read-more {\r\n margin-top: auto;\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: flex-end;\r\n gap: 0.35rem;\r\n width: fit-content;\r\n padding: 0;\r\n border: 0;\r\n background: transparent;\r\n font-weight: 600;\r\n font-size: 1.25rem;\r\n color: color-mix(in srgb, LinkText 88%, currentColor 12%);\r\n transition: transform 180ms ease, opacity 180ms ease;\r\n }\r\n\r\n .read-more:hover,\r\n .read-more:focus-visible {\r\n transform: translateX(2px);\r\n opacity: 0.9;\r\n outline: none;\r\n }\r\n\r\n .arrow {\r\n font-size: 1.4rem;\r\n transition: transform 180ms ease;\r\n }\r\n\r\n .read-more:hover .arrow,\r\n .read-more:focus-visible .arrow {\r\n transform: translateX(2px);\r\n }\r\n\r\n .footer {\r\n display: none;\r\n }\r\n\r\n .visually-hidden {\r\n position: absolute;\r\n width: 1px;\r\n height: 1px;\r\n padding: 0;\r\n margin: -1px;\r\n overflow: hidden;\r\n clip: rect(0, 0, 0, 0);\r\n white-space: nowrap;\r\n border: 0;\r\n }\r\n\r\n @media (max-width: 640px) {\r\n .page {\r\n width: min(calc(100% - 1rem), var(--max-width));\r\n padding-top: 0.2rem;\r\n }\r\n\r\n .blog-grid {\r\n grid-template-columns: 1fr;\r\n gap: 1rem;\r\n }\r\n\r\n .post-card {\r\n min-height: 220px;\r\n }\r\n\r\n .post-body {\r\n padding: 1rem;\r\n }\r\n\r\n .post-title {\r\n font-size: 0.46rem;\r\n }\r\n\r\n .post-excerpt {\r\n font-size: 0.36rem;\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <main class=\"page\">\r\n <section class=\"hero\">\r\n <p class=\"eyebrow\"><\/p>\r\n <p>\r\n <h4>H\u00e4r ser ni en f\u00f6rhandsvisning p\u00e5 de senaste inl\u00e4ggen.<\/h4>\r\n <\/p>\r\n <\/section>\r\n\r\n <section id=\"blog-grid\" class=\"blog-grid\" aria-label=\"Blogginl\u00e4gg\">\r\n <article class=\"post-card\">\r\n <img decoding=\"async\"\r\n class=\"post-image\"\r\n src=\"https:\/\/images.unsplash.com\/photo-1499750310107-5fef28a66643?auto=format&fit=crop&w=1200&q=80\"\r\n alt=\"Anteckningsbok och kaffe p\u00e5 ett skrivbord\"\r\n \/>\r\n <div class=\"post-body\">\r\n <div class=\"post-meta\">\r\n <span>Exempel<\/span>\r\n <span>Visas tills riktiga inl\u00e4gg laddas<\/span>\r\n <\/div>\r\n <h4 class=\"post-title\">Exempelinl\u00e4gg<\/h4>\r\n <p class=\"post-excerpt\">\r\n Den h\u00e4r platsh\u00e5llaren byts automatiskt ut n\u00e4r bloggen lyckas h\u00e4mta de senaste inl\u00e4ggen fr\u00e5n din webbplats.\r\n <\/p>\r\n <a class=\"read-more\" href=\"#\">\r\n L\u00e4s vidare <span class=\"arrow\">\u2192<\/span>\r\n <\/a>\r\n <\/div>\r\n <\/article>\r\n <\/section>\r\n\r\n <p class=\"footer\">\r\n Tips: sidan provar automatiskt vanliga feed-adresser som <code>\/feed<\/code>, <code>\/rss.xml<\/code> och <code>\/feed.xml<\/code> p\u00e5 samma dom\u00e4n.\r\n F\u00f6r andra uppl\u00e4gg kan du ange en egen feed via <code>window.BLOG_FEED_URL<\/code> innan detta script k\u00f6rs.\r\n <\/p>\r\n <\/main>\r\n\r\n <script>\r\n (function () {\r\n const MAX_POSTS = 6;\r\n const gridEl = document.getElementById('blog-grid');\r\n\r\n function getApiBase() {\r\n if (typeof window.BLOG_API_BASE === 'string' && window.BLOG_API_BASE.trim()) {\r\n return window.BLOG_API_BASE.trim().replace(\/\\\/$\/, '');\r\n }\r\n return window.location.origin;\r\n }\r\n\r\n function getPostsEndpoint() {\r\n return (\r\n getApiBase() +\r\n '\/wp-json\/wp\/v2\/posts?per_page=' +\r\n MAX_POSTS +\r\n '&_embed=1&status=publish'\r\n );\r\n }\r\n\r\n function stripHtml(html) {\r\n const temp = document.createElement('div');\r\n temp.innerHTML = html || '';\r\n return (temp.textContent || temp.innerText || '').trim();\r\n }\r\n\r\n function truncate(text, maxLength) {\r\n if (!text) return '';\r\n return text.length > maxLength ? text.slice(0, maxLength).trimEnd() + '\u2026' : text;\r\n }\r\n\r\n function formatDate(dateString) {\r\n if (!dateString) return 'Utan datum';\r\n const date = new Date(dateString);\r\n if (Number.isNaN(date.getTime())) return 'Utan datum';\r\n return date.toLocaleDateString('sv-SE', {\r\n year: 'numeric',\r\n month: 'long',\r\n day: 'numeric'\r\n });\r\n }\r\n\r\n function escapeHtml(value) {\r\n return String(value ?? '')\r\n .replace(\/&\/g, '&')\r\n .replace(\/<\/g, '<')\r\n .replace(\/>\/g, '>')\r\n .replace(\/\"\/g, '"')\r\n .replace(\/'\/g, ''');\r\n }\r\n\r\n function normalizeWpPosts(posts) {\r\n return posts.map((post) => ({\r\n title: post?.title?.rendered || 'Utan titel',\r\n link: post?.link || '#',\r\n description: post?.excerpt?.rendered || post?.content?.rendered || '',\r\n pubDate: post?.date || '', }));\r\n }\r\n\r\n async function fetchLatestPosts() {\r\n const endpoint = getPostsEndpoint();\r\n const response = await fetch(endpoint, {\r\n headers: {\r\n Accept: 'application\/json'\r\n }\r\n });\r\n\r\n if (!response.ok) {\r\n throw new Error('HTTP ' + response.status + ' fr\u00e5n ' + endpoint);\r\n }\r\n\r\n const data = await response.json();\r\n\r\n if (!Array.isArray(data)) {\r\n throw new Error('Ogiltigt svar fr\u00e5n WordPress API');\r\n }\r\n\r\n const items = normalizeWpPosts(data).slice(0, MAX_POSTS);\r\n\r\n if (!items.length) {\r\n throw new Error('Inga publicerade inl\u00e4gg hittades');\r\n }\r\n\r\n return { items, sourceUrl: endpoint };\r\n }\r\n\r\n function createPostCard(post) {\r\n const article = document.createElement('article');\r\n article.className = 'post-card';\r\n\r\n const safeTitle = escapeHtml(post.title || 'Utan titel');\r\n const safeLink = post.link || '#';\r\n const safeExcerpt = escapeHtml(truncate(stripHtml(post.description), 140) || 'Ingen beskrivning tillg\u00e4nglig.');\r\n const safeDate = escapeHtml(formatDate(post.pubDate));\r\n\r\n article.innerHTML = `\r\n <div class=\"post-body\">\r\n <div class=\"post-meta\">\r\n <span>${safeDate}<\/span>\r\n <\/div>\r\n <h4 class=\"post-title\">${safeTitle}<\/h4>\r\n <p class=\"post-excerpt\">${safeExcerpt}<\/p>\r\n <a class=\"read-more\" href=\"${safeLink}\" target=\"_blank\" rel=\"noopener noreferrer\" aria-label=\"L\u00e4s vidare: ${safeTitle}\">\r\n L\u00e4s vidare <span class=\"arrow\">\u2192<\/span>\r\n <\/a>\r\n <\/div>\r\n `;\r\n\r\n return article;\r\n }\r\n\r\n function renderPosts(posts) {\r\n gridEl.innerHTML = '';\r\n posts.forEach((post) => {\r\n gridEl.appendChild(createPostCard(post));\r\n });\r\n }\r\n\r\n function renderError(message) {\r\n console.error('Kunde inte h\u00e4mta inl\u00e4gg:', message);\r\n }\r\n\r\n function runTests() {\r\n console.assert(\r\n normalizeWpPosts([{ title: { rendered: 'Titel' }, link: '\/inlagg', excerpt: { rendered: '<p>Text<\/p>' }, date: '2026-04-20' }])[0].title === 'Titel',\r\n 'normalizeWpPosts ska mappa WordPress-inl\u00e4gg korrekt'\r\n );\r\n }\r\n\r\n runTests();\r\n\r\n fetchLatestPosts()\r\n .then(({ items, sourceUrl }) => {\r\n renderPosts(items);\r\n console.log('Visar de senaste ' + items.length + ' inl\u00e4ggen fr\u00e5n WordPress API: ' + sourceUrl);\r\n })\r\n .catch((error) => {\r\n renderError(error.message);\r\n });\r\n })();\r\n<\/script>\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t<div class=\"elementor-column elementor-col-33 elementor-top-column elementor-element elementor-element-f3fb89d\" data-id=\"f3fb89d\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-02ef432 elementor-widget elementor-widget-sidebar\" data-id=\"02ef432\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"sidebar.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<aside id=\"block-12\" class=\"widget widget_block widget_search\"><form role=\"search\" method=\"get\" action=\"https:\/\/tankesmedjanbrodraskap.se\/startsida\/\" class=\"wp-block-search__button-outside wp-block-search__text-button wp-block-search\" ><label class=\"wp-block-search__label\" for=\"wp-block-search__input-1\" >S\u00f6k<\/label><div class=\"wp-block-search__inside-wrapper\" ><input class=\"wp-block-search__input\" id=\"wp-block-search__input-1\" placeholder=\"\" value=\"\" type=\"search\" name=\"s\" required \/><button aria-label=\"S\u00f6k\" class=\"wp-block-search__button wp-element-button\" type=\"submit\" >S\u00f6k<\/button><\/div><\/form><\/aside><aside id=\"block-13\" class=\"widget widget_block\">\n<div class=\"wp-block-group is-layout-flow wp-block-group-is-layout-flow\">\n<h2 class=\"wp-block-heading\">Senaste inl\u00e4ggen<\/h2>\n\n\n<ul class=\"wp-block-latest-posts__list wp-block-latest-posts\"><li><a class=\"wp-block-latest-posts__post-title\" href=\"https:\/\/tankesmedjanbrodraskap.se\/startsida\/sahar-far-det-inte-ga-till\/\">S\u00e5h\u00e4r f\u00e5r det inte g\u00e5 till!<\/a><\/li>\n<li><a class=\"wp-block-latest-posts__post-title\" href=\"https:\/\/tankesmedjanbrodraskap.se\/startsida\/nar-tankarna-tar-fart\/\">N\u00e4r tankarna tar fart!<\/a><\/li>\n<li><a class=\"wp-block-latest-posts__post-title\" href=\"https:\/\/tankesmedjanbrodraskap.se\/startsida\/vaga-oppna-dig\/\">V\u00e5ga \u00f6ppna dig!<\/a><\/li>\n<li><a class=\"wp-block-latest-posts__post-title\" href=\"https:\/\/tankesmedjanbrodraskap.se\/startsida\/begreppet-som-anvands-for-att-trycka-ner-snarare-an-ga-till-botten-med-problemet\/\">Begreppet som anv\u00e4nds f\u00f6r att trycka ner snarare \u00e4n g\u00e5 till botten med problemet.<\/a><\/li>\n<li><a class=\"wp-block-latest-posts__post-title\" href=\"https:\/\/tankesmedjanbrodraskap.se\/startsida\/nar-varden-sviker-och-orden-tar-slut\/\">N\u00e4r v\u00e5rden sviker och orden tar slut.<\/a><\/li>\n<\/ul><\/div>\n<\/aside><aside id=\"block-15\" class=\"widget widget_block\">\n<div class=\"wp-block-group is-layout-flow wp-block-group-is-layout-flow\">\n<h2 class=\"wp-block-heading\">Arkiv<\/h2>\n\n\n<ul class=\"wp-block-archives-list wp-block-archives\">\t<li><a href='https:\/\/tankesmedjanbrodraskap.se\/startsida\/2026\/04\/'>april 2026<\/a><\/li>\n<\/ul><\/div>\n<\/aside><aside id=\"block-16\" class=\"widget widget_block\">\n<div class=\"wp-block-group is-layout-flow wp-block-group-is-layout-flow\">\n<h2 class=\"wp-block-heading\">Kategorier<\/h2>\n\n\n<ul class=\"wp-block-categories-list wp-block-categories\">\t<li class=\"cat-item cat-item-16\"><a href=\"https:\/\/tankesmedjanbrodraskap.se\/startsida\/category\/begrepp\/\">N\u00e4r orden tappar sin vikt: Om begrepp som blev till vapen!<\/a>\n<\/li>\n\t<li class=\"cat-item cat-item-5\"><a href=\"https:\/\/tankesmedjanbrodraskap.se\/startsida\/category\/tunga-tankar\/\">Tunga tankar<\/a>\n<\/li>\n\t<li class=\"cat-item cat-item-1\"><a href=\"https:\/\/tankesmedjanbrodraskap.se\/startsida\/category\/uncategorized\/\">Uncategorized<\/a>\n<\/li>\n<\/ul><\/div>\n<\/aside>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>H\u00e4r ser ni en f\u00f6rhandsvisning p\u00e5 de senaste inl\u00e4ggen. Exempel Visas tills riktiga inl\u00e4gg laddas Exempelinl\u00e4gg Den h\u00e4r platsh\u00e5llaren byts automatiskt ut n\u00e4r bloggen lyckas h\u00e4mta de senaste inl\u00e4ggen fr\u00e5n din webbplats. L\u00e4s vidare \u2192 Tips: sidan provar automatiskt vanliga feed-adresser som \/feed, \/rss.xml och \/feed.xml p\u00e5 samma dom\u00e4n. F\u00f6r andra uppl\u00e4gg kan du ange […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"default","site-content-layout":"page-builder","ast-site-content-layout":"default","site-content-style":"unboxed","site-sidebar-style":"unboxed","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"enabled","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-2421","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/tankesmedjanbrodraskap.se\/startsida\/wp-json\/wp\/v2\/pages\/2421","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tankesmedjanbrodraskap.se\/startsida\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/tankesmedjanbrodraskap.se\/startsida\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/tankesmedjanbrodraskap.se\/startsida\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/tankesmedjanbrodraskap.se\/startsida\/wp-json\/wp\/v2\/comments?post=2421"}],"version-history":[{"count":253,"href":"https:\/\/tankesmedjanbrodraskap.se\/startsida\/wp-json\/wp\/v2\/pages\/2421\/revisions"}],"predecessor-version":[{"id":3458,"href":"https:\/\/tankesmedjanbrodraskap.se\/startsida\/wp-json\/wp\/v2\/pages\/2421\/revisions\/3458"}],"wp:attachment":[{"href":"https:\/\/tankesmedjanbrodraskap.se\/startsida\/wp-json\/wp\/v2\/media?parent=2421"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t\t\t

\n\t\t\t\t\t

\n\t\t\t

\n\t\t\t\t\t\t

\n\t\t\t\t

\n\t\t\t\t\t\t\t

\n\t\t\t

<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t

\n\t\t\t\t\t\t

\n\t\t\t\t\t

\n\t\t\t

\n\t\t\t\t\t\t

\n\t\t\t\t

\n\t\t\t\t\t\r\n\r\n\r\n \r\n \r\n <\/title>\r\n <style>\r\n :root {\r\n color-scheme: light dark;\r\n --surface: color-mix(in srgb, Canvas 35%, transparent);\r\n --surface-strong: color-mix(in srgb, Canvas 94%, transparent);\r\n --border: color-mix(in srgb, currentColor 18%, transparent);\r\n --muted: color-mix(in srgb, currentColor 28%, transparent);\r\n --shadow: 0 10px 30px color-mix(in srgb, black 12%, transparent);\r\n --radius: 20px;\r\n --max-width: 1500px;\r\n }\r\n\r\n * {\r\n box-sizing: border-box;\r\n }\r\n\r\n html, body {\r\n margin: 0;\r\n padding: 0;\r\n background: transparent;\r\n color: CanvasText;\r\n font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif;\r\n line-height: 1;\r\n }\r\n\r\n body {\r\n min-height: 100vh;\r\n background-color: transparent;\r\n }\r\n\r\n a {\r\n color: inherit;\r\n text-decoration: none;\r\n }\r\n\r\n .page {\r\n width: min(calc(100% - rem), var(--max-width));\r\n margin: 0 auto;\r\n padding: rem 0 rem;\r\n }\r\n\r\n .hero {\r\n display: grid;\r\n gap: 1rem;\r\n margin-bottom: 1rem;\r\n padding: rem 0 0.5rem;\r\n }\r\n\r\n .eyebrow {\r\n font-size: 0.6rem;\r\n letter-spacing: 0.08em;\r\n text-transform: uppercase;\r\n color: var(--muted);\r\n margin: 0;\r\n }\r\n\r\n .hero h1 {\r\n margin: 0;\r\n font-size: clamp(1rem, 2vw, 2rem);\r\n line-height: 1.2;\r\n letter-spacing: -0.03em;\r\n }\r\n\r\n .hero p {\r\n margin: 0;\r\n max-width: 70ch;\r\n font-size: 0.4rem;\r\n color: var(--muted);\r\n }\r\n\r\n \r\n\r\n .blog-grid {\r\n display: grid;\r\n grid-template-columns: repeat(2, minmax(0, 1fr));\r\n gap: 1.2rem;\r\n align-items: stretch;\r\n }\r\n\r\n .post-card {\r\n background: color-mix(in srgb, Canvas 46%, transparent);\r\n border: 2px solid color-mix(in srgb, currentColor 10%, transparent);\r\n border-radius: 18px;\r\n box-shadow: 0 10px 24px color-mix(in srgb, black 15%, transparent);\r\n overflow: hidden;\r\n backdrop-filter: blur(10px);\r\n transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;\r\n display: flex;\r\n flex-direction: column;\r\n height: 100%;\r\n min-height: 200px;\r\n }\r\n\r\n .post-card:hover,\r\n .post-card:focus-within {\r\n transform: translateY(-2px);\r\n box-shadow: 0 16px 36px color-mix(in srgb, black 12%, transparent);\r\n border-color: color-mix(in srgb, currentColor 16%, transparent);\r\n }\r\n\r\n .post-image {\r\n display: none;\r\n }\r\n\r\n .post-body {\r\n padding: 1.2rem 1.2rem 1rem;\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: center;\r\n gap: 0.6rem;\r\n flex: 1;\r\n height: 100%;\r\n }\r\n\r\n .post-meta {\r\n display: flex;\r\n flex-wrap: wrap;\r\n gap: 0.2rem;\r\n font-size: 0.62rem;\r\n color: color-mix(in srgb, currentColor 55%, transparent);\r\n }\r\n\r\n .post-title {\r\n margin: 0;\r\n font-size: 0.6rem;\r\n line-height: 1.4;\r\n letter-spacing: -0.016em;\r\n display: -webkit-box;\r\n -webkit-line-clamp: 2;\r\n -webkit-box-orient: vertical;\r\n overflow: hidden;\r\n }\r\n\r\n .post-excerpt {\r\n margin: 0;\r\n color: color-mix(in srgb, currentColor 72%, transparent);\r\n font-size: 0.8rem;\r\n line-height: 1.4;\r\n display: -webkit-box;\r\n -webkit-line-clamp: 4;\r\n -webkit-box-orient: vertical;\r\n overflow: hidden;\r\n }\r\n\r\n .read-more {\r\n margin-top: auto;\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: flex-end;\r\n gap: 0.35rem;\r\n width: fit-content;\r\n padding: 0;\r\n border: 0;\r\n background: transparent;\r\n font-weight: 600;\r\n font-size: 1.25rem;\r\n color: color-mix(in srgb, LinkText 88%, currentColor 12%);\r\n transition: transform 180ms ease, opacity 180ms ease;\r\n }\r\n\r\n .read-more:hover,\r\n .read-more:focus-visible {\r\n transform: translateX(2px);\r\n opacity: 0.9;\r\n outline: none;\r\n }\r\n\r\n .arrow {\r\n font-size: 1.4rem;\r\n transition: transform 180ms ease;\r\n }\r\n\r\n .read-more:hover .arrow,\r\n .read-more:focus-visible .arrow {\r\n transform: translateX(2px);\r\n }\r\n\r\n .footer {\r\n display: none;\r\n }\r\n\r\n .visually-hidden {\r\n position: absolute;\r\n width: 1px;\r\n height: 1px;\r\n padding: 0;\r\n margin: -1px;\r\n overflow: hidden;\r\n clip: rect(0, 0, 0, 0);\r\n white-space: nowrap;\r\n border: 0;\r\n }\r\n\r\n @media (max-width: 640px) {\r\n .page {\r\n width: min(calc(100% - 1rem), var(--max-width));\r\n padding-top: 0.2rem;\r\n }\r\n\r\n .blog-grid {\r\n grid-template-columns: 1fr;\r\n gap: 1rem;\r\n }\r\n\r\n .post-card {\r\n min-height: 220px;\r\n }\r\n\r\n .post-body {\r\n padding: 1rem;\r\n }\r\n\r\n .post-title {\r\n font-size: 0.46rem;\r\n }\r\n\r\n .post-excerpt {\r\n font-size: 0.36rem;\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <main class=\"page\">\r\n <section class=\"hero\">\r\n <p class=\"eyebrow\"><\/p>\r\n <p>\r\n <h4>H\u00e4r ser ni en f\u00f6rhandsvisning p\u00e5 de senaste inl\u00e4ggen.<\/h4>\r\n <\/p>\r\n <\/section>\r\n\r\n <section id=\"blog-grid\" class=\"blog-grid\" aria-label=\"Blogginl\u00e4gg\">\r\n <article class=\"post-card\">\r\n <img decoding=\"async\"\r\n class=\"post-image\"\r\n src=\"https:\/\/images.unsplash.com\/photo-1499750310107-5fef28a66643?auto=format&fit=crop&w=1200&q=80\"\r\n alt=\"Anteckningsbok och kaffe p\u00e5 ett skrivbord\"\r\n \/>\r\n <div class=\"post-body\">\r\n <div class=\"post-meta\">\r\n <span>Exempel<\/span>\r\n <span>Visas tills riktiga inl\u00e4gg laddas<\/span>\r\n <\/div>\r\n <h4 class=\"post-title\">Exempelinl\u00e4gg<\/h4>\r\n <p class=\"post-excerpt\">\r\n Den h\u00e4r platsh\u00e5llaren byts automatiskt ut n\u00e4r bloggen lyckas h\u00e4mta de senaste inl\u00e4ggen fr\u00e5n din webbplats.\r\n <\/p>\r\n <a class=\"read-more\" href=\"#\">\r\n L\u00e4s vidare <span class=\"arrow\">\u2192<\/span>\r\n <\/a>\r\n <\/div>\r\n <\/article>\r\n <\/section>\r\n\r\n <p class=\"footer\">\r\n Tips: sidan provar automatiskt vanliga feed-adresser som <code>\/feed<\/code>, <code>\/rss.xml<\/code> och <code>\/feed.xml<\/code> p\u00e5 samma dom\u00e4n.\r\n F\u00f6r andra uppl\u00e4gg kan du ange en egen feed via <code>window.BLOG_FEED_URL<\/code> innan detta script k\u00f6rs.\r\n <\/p>\r\n <\/main>\r\n\r\n <script>\r\n (function () {\r\n const MAX_POSTS = 6;\r\n const gridEl = document.getElementById('blog-grid');\r\n\r\n function getApiBase() {\r\n if (typeof window.BLOG_API_BASE === 'string' && window.BLOG_API_BASE.trim()) {\r\n return window.BLOG_API_BASE.trim().replace(\/\\\/$\/, '');\r\n }\r\n return window.location.origin;\r\n }\r\n\r\n function getPostsEndpoint() {\r\n return (\r\n getApiBase() +\r\n '\/wp-json\/wp\/v2\/posts?per_page=' +\r\n MAX_POSTS +\r\n '&_embed=1&status=publish'\r\n );\r\n }\r\n\r\n function stripHtml(html) {\r\n const temp = document.createElement('div');\r\n temp.innerHTML = html || '';\r\n return (temp.textContent || temp.innerText || '').trim();\r\n }\r\n\r\n function truncate(text, maxLength) {\r\n if (!text) return '';\r\n return text.length > maxLength ? text.slice(0, maxLength).trimEnd() + '\u2026' : text;\r\n }\r\n\r\n function formatDate(dateString) {\r\n if (!dateString) return 'Utan datum';\r\n const date = new Date(dateString);\r\n if (Number.isNaN(date.getTime())) return 'Utan datum';\r\n return date.toLocaleDateString('sv-SE', {\r\n year: 'numeric',\r\n month: 'long',\r\n day: 'numeric'\r\n });\r\n }\r\n\r\n function escapeHtml(value) {\r\n return String(value ?? '')\r\n .replace(\/&\/g, '&')\r\n .replace(\/<\/g, '<')\r\n .replace(\/>\/g, '>')\r\n .replace(\/\"\/g, '"')\r\n .replace(\/'\/g, ''');\r\n }\r\n\r\n function normalizeWpPosts(posts) {\r\n return posts.map((post) => ({\r\n title: post?.title?.rendered || 'Utan titel',\r\n link: post?.link || '#',\r\n description: post?.excerpt?.rendered || post?.content?.rendered || '',\r\n pubDate: post?.date || '', }));\r\n }\r\n\r\n async function fetchLatestPosts() {\r\n const endpoint = getPostsEndpoint();\r\n const response = await fetch(endpoint, {\r\n headers: {\r\n Accept: 'application\/json'\r\n }\r\n });\r\n\r\n if (!response.ok) {\r\n throw new Error('HTTP ' + response.status + ' fr\u00e5n ' + endpoint);\r\n }\r\n\r\n const data = await response.json();\r\n\r\n if (!Array.isArray(data)) {\r\n throw new Error('Ogiltigt svar fr\u00e5n WordPress API');\r\n }\r\n\r\n const items = normalizeWpPosts(data).slice(0, MAX_POSTS);\r\n\r\n if (!items.length) {\r\n throw new Error('Inga publicerade inl\u00e4gg hittades');\r\n }\r\n\r\n return { items, sourceUrl: endpoint };\r\n }\r\n\r\n function createPostCard(post) {\r\n const article = document.createElement('article');\r\n article.className = 'post-card';\r\n\r\n const safeTitle = escapeHtml(post.title || 'Utan titel');\r\n const safeLink = post.link || '#';\r\n const safeExcerpt = escapeHtml(truncate(stripHtml(post.description), 140) || 'Ingen beskrivning tillg\u00e4nglig.');\r\n const safeDate = escapeHtml(formatDate(post.pubDate));\r\n\r\n article.innerHTML = `\r\n <div class=\"post-body\">\r\n <div class=\"post-meta\">\r\n <span>${safeDate}<\/span>\r\n <\/div>\r\n <h4 class=\"post-title\">${safeTitle}<\/h4>\r\n <p class=\"post-excerpt\">${safeExcerpt}<\/p>\r\n <a class=\"read-more\" href=\"${safeLink}\" target=\"_blank\" rel=\"noopener noreferrer\" aria-label=\"L\u00e4s vidare: ${safeTitle}\">\r\n L\u00e4s vidare <span class=\"arrow\">\u2192<\/span>\r\n <\/a>\r\n <\/div>\r\n `;\r\n\r\n return article;\r\n }\r\n\r\n function renderPosts(posts) {\r\n gridEl.innerHTML = '';\r\n posts.forEach((post) => {\r\n gridEl.appendChild(createPostCard(post));\r\n });\r\n }\r\n\r\n function renderError(message) {\r\n console.error('Kunde inte h\u00e4mta inl\u00e4gg:', message);\r\n }\r\n\r\n function runTests() {\r\n console.assert(\r\n normalizeWpPosts([{ title: { rendered: 'Titel' }, link: '\/inlagg', excerpt: { rendered: '<p>Text<\/p>' }, date: '2026-04-20' }])[0].title === 'Titel',\r\n 'normalizeWpPosts ska mappa WordPress-inl\u00e4gg korrekt'\r\n );\r\n }\r\n\r\n runTests();\r\n\r\n fetchLatestPosts()\r\n .then(({ items, sourceUrl }) => {\r\n renderPosts(items);\r\n console.log('Visar de senaste ' + items.length + ' inl\u00e4ggen fr\u00e5n WordPress API: ' + sourceUrl);\r\n })\r\n .catch((error) => {\r\n renderError(error.message);\r\n });\r\n })();\r\n<\/script>\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t<div class=\"elementor-column elementor-col-33 elementor-top-column elementor-element elementor-element-f3fb89d\" data-id=\"f3fb89d\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-02ef432 elementor-widget elementor-widget-sidebar\" data-id=\"02ef432\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"sidebar.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<aside id=\"block-12\" class=\"widget widget_block widget_search\"><form role=\"search\" method=\"get\" action=\"https:\/\/tankesmedjanbrodraskap.se\/startsida\/\" class=\"wp-block-search__button-outside wp-block-search__text-button wp-block-search\" ><label class=\"wp-block-search__label\" for=\"wp-block-search__input-1\" >S\u00f6k<\/label><div class=\"wp-block-search__inside-wrapper\" ><input class=\"wp-block-search__input\" id=\"wp-block-search__input-1\" placeholder=\"\" value=\"\" type=\"search\" name=\"s\" required \/><button aria-label=\"S\u00f6k\" class=\"wp-block-search__button wp-element-button\" type=\"submit\" >S\u00f6k<\/button><\/div><\/form><\/aside><aside id=\"block-13\" class=\"widget widget_block\">\n<div class=\"wp-block-group is-layout-flow wp-block-group-is-layout-flow\">\n<h2 class=\"wp-block-heading\">Senaste inl\u00e4ggen<\/h2>\n\n\n<ul class=\"wp-block-latest-posts__list wp-block-latest-posts\"><li><a class=\"wp-block-latest-posts__post-title\" href=\"https:\/\/tankesmedjanbrodraskap.se\/startsida\/sahar-far-det-inte-ga-till\/\">S\u00e5h\u00e4r f\u00e5r det inte g\u00e5 till!<\/a><\/li>\n<li><a class=\"wp-block-latest-posts__post-title\" href=\"https:\/\/tankesmedjanbrodraskap.se\/startsida\/nar-tankarna-tar-fart\/\">N\u00e4r tankarna tar fart!<\/a><\/li>\n<li><a class=\"wp-block-latest-posts__post-title\" href=\"https:\/\/tankesmedjanbrodraskap.se\/startsida\/vaga-oppna-dig\/\">V\u00e5ga \u00f6ppna dig!<\/a><\/li>\n<li><a class=\"wp-block-latest-posts__post-title\" href=\"https:\/\/tankesmedjanbrodraskap.se\/startsida\/begreppet-som-anvands-for-att-trycka-ner-snarare-an-ga-till-botten-med-problemet\/\">Begreppet som anv\u00e4nds f\u00f6r att trycka ner snarare \u00e4n g\u00e5 till botten med problemet.<\/a><\/li>\n<li><a class=\"wp-block-latest-posts__post-title\" href=\"https:\/\/tankesmedjanbrodraskap.se\/startsida\/nar-varden-sviker-och-orden-tar-slut\/\">N\u00e4r v\u00e5rden sviker och orden tar slut.<\/a><\/li>\n<\/ul><\/div>\n<\/aside><aside id=\"block-15\" class=\"widget widget_block\">\n<div class=\"wp-block-group is-layout-flow wp-block-group-is-layout-flow\">\n<h2 class=\"wp-block-heading\">Arkiv<\/h2>\n\n\n<ul class=\"wp-block-archives-list wp-block-archives\">\t<li><a href='https:\/\/tankesmedjanbrodraskap.se\/startsida\/2026\/04\/'>april 2026<\/a><\/li>\n<\/ul><\/div>\n<\/aside><aside id=\"block-16\" class=\"widget widget_block\">\n<div class=\"wp-block-group is-layout-flow wp-block-group-is-layout-flow\">\n<h2 class=\"wp-block-heading\">Kategorier<\/h2>\n\n\n<ul class=\"wp-block-categories-list wp-block-categories\">\t<li class=\"cat-item cat-item-16\"><a href=\"https:\/\/tankesmedjanbrodraskap.se\/startsida\/category\/begrepp\/\">N\u00e4r orden tappar sin vikt: Om begrepp som blev till vapen!<\/a>\n<\/li>\n\t<li class=\"cat-item cat-item-5\"><a href=\"https:\/\/tankesmedjanbrodraskap.se\/startsida\/category\/tunga-tankar\/\">Tunga tankar<\/a>\n<\/li>\n\t<li class=\"cat-item cat-item-1\"><a href=\"https:\/\/tankesmedjanbrodraskap.se\/startsida\/category\/uncategorized\/\">Uncategorized<\/a>\n<\/li>\n<\/ul><\/div>\n<\/aside>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>H\u00e4r ser ni en f\u00f6rhandsvisning p\u00e5 de senaste inl\u00e4ggen. Exempel Visas tills riktiga inl\u00e4gg laddas Exempelinl\u00e4gg Den h\u00e4r platsh\u00e5llaren byts automatiskt ut n\u00e4r bloggen lyckas h\u00e4mta de senaste inl\u00e4ggen fr\u00e5n din webbplats. L\u00e4s vidare \u2192 Tips: sidan provar automatiskt vanliga feed-adresser som \/feed, \/rss.xml och \/feed.xml p\u00e5 samma dom\u00e4n. F\u00f6r andra uppl\u00e4gg kan du ange […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"default","site-content-layout":"page-builder","ast-site-content-layout":"default","site-content-style":"unboxed","site-sidebar-style":"unboxed","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"enabled","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-2421","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/tankesmedjanbrodraskap.se\/startsida\/wp-json\/wp\/v2\/pages\/2421","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tankesmedjanbrodraskap.se\/startsida\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/tankesmedjanbrodraskap.se\/startsida\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/tankesmedjanbrodraskap.se\/startsida\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/tankesmedjanbrodraskap.se\/startsida\/wp-json\/wp\/v2\/comments?post=2421"}],"version-history":[{"count":253,"href":"https:\/\/tankesmedjanbrodraskap.se\/startsida\/wp-json\/wp\/v2\/pages\/2421\/revisions"}],"predecessor-version":[{"id":3458,"href":"https:\/\/tankesmedjanbrodraskap.se\/startsida\/wp-json\/wp\/v2\/pages\/2421\/revisions\/3458"}],"wp:attachment":[{"href":"https:\/\/tankesmedjanbrodraskap.se\/startsida\/wp-json\/wp\/v2\/media?parent=2421"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}