/* ===========================================================================
   Single article, design canvas "QMS - Ressurser - Artikler", artboard
   "Artikkel" (2026-10-07)
   ===========================================================================
   Loaded on single posts only (inc/single-article.php). The canvas values are
   kept as authored; the design-system tokens they use are defined on `.at`,
   because the theme itself only carries the --cq-* subset.

   The second half flattens the converted post bodies: the converter wrapped
   every section in a full-width band with inline padding, colours and type
   (18px/600 ink paragraphs). Inside the reading column those inline values
   are overridden, white bands disappear and tinted bands become soft panels. */

.at {
	--font-sans: "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;
	--web-surface-default: #ffffff;
	--web-surface-sunken: #f5f5f5;
	--web-surface-accent: #eef3ff;
	--web-surface-warm: #fff3eb;
	--web-text-heading: #060c31;
	--web-text-primary: #232323;
	--web-text-secondary: #3f4947;
	--web-text-tertiary: #727272;
	--web-text-link: #1f3bf4;
	--web-text-link-hover: #283ab0;
	--web-text-eyebrow: #283ab0;
	--web-text-on-accent: #ffffff;
	--web-border-subtle: #e0e0e0;
	--web-border-strong: #727272;
	--web-border-accent: #1f3bf4;
	--web-accent: #1f3bf4;
	--web-accent-hover: #283ab0;
	--web-accent-active: #001c3a;
	--web-focus-ring: #1f3bf4;
	--radius-sm: 8px;
	--radius-md: 12px;
	--radius-lg: 14px;
	--radius-xl: 16px;
	--radius-pill: 999px;
	--web-shadow-sm: 0 1px 2px rgba(6, 12, 49, .06), 0 1px 1px rgba(6, 12, 49, .04);
}

.cq-article {
	padding: 0 !important;
}

.cq-article .cq-article-slot {
	margin: 0;
}

.at{container-type:inline-size;font-family:var(--font-sans)}
.at *,.at *::before,.at *::after{box-sizing:border-box}
.at__wrap{--g:var(--wp--style--root--padding-left,clamp(24px,5.56vw,80px));max-width:calc(1200px + 2 * var(--g));margin:0 auto;padding-inline:var(--g)}

/* Head */
.at-head{padding:var(--cq-crumb-top) 0 40px;display:flex;flex-direction:column;gap:24px}
.at-head>nav:first-child{margin-bottom:calc(var(--cq-crumb-gap) - 24px)}
.at-crumbs{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:8px;font:400 14px/1.45 var(--font-sans);color:var(--web-text-tertiary)}
.at-crumbs a{color:var(--web-text-link);text-decoration:underline;text-underline-offset:3px}
.at-crumbs a:hover{color:var(--web-text-link-hover)}
.at-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin:0}
.at-tag{display:inline-flex;align-items:center;min-height:28px;padding:0 12px;border-radius:var(--radius-pill);background:var(--web-surface-accent);font:500 13px/1 var(--font-sans);color:var(--web-text-eyebrow)}
.at-date{font:400 15px/1.4 var(--font-sans);color:var(--web-text-secondary)}
.at-title{margin:0;max-width:880px;font:500 clamp(32px,4.4cqi,52px)/1.12 var(--font-sans);letter-spacing:-.022em;color:var(--web-text-heading);text-wrap:balance}
.at-lead{margin:0;max-width:760px;font:400 clamp(18px,1.6cqi,21px)/1.55 var(--font-sans);color:var(--web-text-secondary)}

/* Featured image: framed, never bled */
.at-hero{margin:0;border:1px solid var(--web-border-subtle);border-radius:var(--radius-xl);overflow:hidden;background:var(--web-surface-sunken)}
.at-hero figure{margin:0}
.at-hero img{display:block;width:100%!important;height:auto!important;aspect-ratio:16/8;object-fit:cover}
.at-hero__cap{margin:12px 0 0;font:400 15px/1.5 var(--font-sans);color:var(--web-text-secondary)}

/* Body: contents list + reading column */
.at-body--solo{grid-template-columns:minmax(0,720px)!important}
.at-body{display:grid;grid-template-columns:240px minmax(0,720px);justify-content:space-between;gap:64px;padding:64px 0 clamp(64px,8cqi,96px)}
.at-toc{position:sticky;top:112px;align-self:start;display:flex;flex-direction:column;gap:12px}
.at-toc__label{margin:0;font:600 13px/1.2 var(--font-sans);letter-spacing:.08em;text-transform:uppercase;color:var(--web-text-eyebrow)}
.at-toc ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;border-left:1px solid var(--web-border-subtle)}
.at-toc ol a{display:block;padding:8px 0 8px 16px;margin-left:-1px;border-left:2px solid transparent;font:400 15px/1.4 var(--font-sans);color:var(--web-text-secondary);text-decoration:none;transition:color 120ms cubic-bezier(.2,0,0,1),border-color 120ms cubic-bezier(.2,0,0,1)}
.at-toc ol a:hover{color:var(--web-text-link)}
.at-toc ol a[aria-current="true"]{border-left-color:var(--web-accent);font-weight:500;color:var(--web-text-heading)}
.at-toc a:focus-visible{outline:2px solid var(--web-focus-ring);outline-offset:2px}
.at-toc .at-toc__back{padding:0;border:0;margin-left:0;display:inline-flex;align-items:center;gap:8px;min-height:44px;margin-top:12px;font:500 15px/1.3 var(--font-sans);color:var(--web-text-link);text-decoration:underline;text-underline-offset:3px}

/* Running text */
.at-prose{min-width:0;font:400 18px/1.7 var(--font-sans);color:var(--web-text-primary)}
.at-prose > *{margin:0 0 20px}
.at-prose > :last-child{margin-bottom:0}
.at-prose h2{margin:48px 0 16px;font:500 clamp(24px,2.4cqi,30px)/1.25 var(--font-sans);letter-spacing:-.012em;color:var(--web-text-heading);scroll-margin-top:112px}
.at-prose > h2:first-child{margin-top:0}
.at-prose h3{margin:32px 0 12px;font:500 21px/1.35 var(--font-sans);color:var(--web-text-heading)}
.at-prose ul,.at-prose ol{padding-left:24px}
.at-prose li{margin:0 0 8px;padding-left:4px}
.at-prose li::marker{color:var(--web-accent)}
.at-prose a{color:var(--web-text-link);text-decoration:underline;text-underline-offset:3px}
.at-prose a:hover{color:var(--web-text-link-hover)}
.at-prose strong{font-weight:500;color:var(--web-text-heading)}
.at-prose figure{margin:32px 0}
.at-prose figure img{display:block;max-width:100%;height:auto!important;border:1px solid var(--web-border-subtle);border-radius:var(--radius-lg)}

/* Callout: the old coloured bands become one soft panel inside the column */
.at-note{margin:32px 0;padding:28px 32px;border-radius:var(--radius-lg);background:var(--web-surface-accent)}
.at-note--warm{background:var(--web-surface-warm,#fff3eb)}
.at-note > *{margin:0 0 12px}
.at-note > :last-child{margin-bottom:0}
.at-note h2,.at-note h3{margin:0 0 8px;font:500 21px/1.35 var(--font-sans);color:var(--web-text-heading)}
.at-note p{font-size:17px;line-height:1.6;color:var(--web-text-primary)}

/* In-article call to action (the "Book demo" bands) */
.at-cta{margin:48px 0 0;padding:32px;display:flex;flex-direction:column;gap:16px;border:1px solid var(--web-border-subtle);border-radius:var(--radius-lg);background:var(--web-surface-default)}
.at-cta h2{margin:0;font:500 24px/1.3 var(--font-sans);color:var(--web-text-heading)}
.at-cta p{margin:0;font-size:17px;line-height:1.6;color:var(--web-text-secondary)}
.at-btns{display:flex;flex-wrap:wrap;gap:12px}
.at-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 24px;border-radius:var(--radius-sm);border:1px solid var(--web-accent);background:var(--web-accent);font:500 16px/1 var(--font-sans);color:var(--web-text-on-accent);text-decoration:none;transition:background-color 120ms cubic-bezier(.2,0,0,1)}
.at-btn:hover{background:var(--web-accent-hover);border-color:var(--web-accent-hover);color:var(--web-text-on-accent)}
.at-btn--ghost{background:transparent;color:var(--web-text-link)}
.at-btn--ghost:hover{background:var(--web-surface-accent);border-color:var(--web-accent);color:var(--web-text-link-hover)}
.at-btn:focus-visible{outline:2px solid var(--web-focus-ring);outline-offset:2px}

/* Related articles */
.at-rel{background:var(--web-surface-sunken);border-top:1px solid var(--web-border-subtle)}
.at-rel__in{padding:clamp(64px,8cqi,96px) 0;display:flex;flex-direction:column;gap:32px}
.at-rel__head{display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:16px 32px}
.at-rel__title{margin:0;font:500 clamp(28px,3.2cqi,40px)/1.15 var(--font-sans);letter-spacing:-.016em;color:var(--web-text-heading)}
.at-rel__all{display:inline-flex;align-items:center;gap:8px;min-height:44px;font:500 16px/1.3 var(--font-sans);color:var(--web-text-link);text-decoration:underline;text-underline-offset:3px}
.at-cards{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.at-card{display:flex;flex-direction:column;height:100%;background:var(--web-surface-default);border:1px solid var(--web-border-subtle);border-radius:var(--radius-lg);overflow:hidden;text-decoration:none;color:inherit;transition:border-color 120ms cubic-bezier(.2,0,0,1),box-shadow 120ms cubic-bezier(.2,0,0,1)}
.at-card:hover{border-color:var(--web-border-accent);box-shadow:var(--web-shadow-sm)}
.at-card:focus-visible{outline:2px solid var(--web-focus-ring);outline-offset:2px}
.at-card__img{display:block;width:100%;height:auto!important;aspect-ratio:3/2;object-fit:cover;background:var(--web-surface-accent)}
.at-card__body{display:flex;flex-direction:column;gap:10px;padding:24px}
.at-card__kind{font:600 13px/1.2 var(--font-sans);letter-spacing:.08em;text-transform:uppercase;color:var(--web-text-eyebrow)}
.at-card__title{font:500 19px/1.35 var(--font-sans);color:var(--web-text-heading)}
.at-card:hover .at-card__title{color:var(--web-text-link)}
.at-card__desc{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;font:400 15px/1.55 var(--font-sans);color:var(--web-text-secondary)}
.at-card__more{display:inline-flex;align-items:center;gap:6px;margin-top:auto;padding-top:6px;font:500 15px/1.3 var(--font-sans);color:var(--web-text-link)}

/* Tablet: contents list folds into a disclosure above the text */
@container (max-width:1023px){
  .at-body{grid-template-columns:minmax(0,1fr);gap:32px;padding-top:40px}
  .at-toc{position:static;padding:16px 20px;border:1px solid var(--web-border-subtle);border-radius:var(--radius-lg)}
  .at-toc .at-toc__back{display:none}
  /* Related articles as a compact list: small thumbnail beside the text */
  .at-rel__in{padding-block:56px;gap:24px}
  .at-cards{grid-template-columns:minmax(0,1fr);gap:12px}
  .at-card{flex-direction:row;align-items:flex-start;gap:20px;padding:16px}
  .at-card__img{flex:none;width:160px;aspect-ratio:4/3;border-radius:var(--radius-md)}
  .at-card__body{gap:6px;padding:0;min-width:0}
  .at-card__title{font-size:18px}
  .at-card__desc{-webkit-line-clamp:2}
  .at-card__more{padding-top:2px}
}
@container (max-width:599px){
  .at-head{padding:var(--cq-crumb-top) 0 32px;gap:20px}
  .at-head>nav:first-child{margin-bottom:calc(var(--cq-crumb-gap) - 20px)}
  .at-hero{border-radius:var(--radius-lg)}
  .at-hero img{aspect-ratio:3/2}
  .at-prose{font-size:17px}
  .at-note,.at-cta{padding:24px 20px}
  .at-rel__in{padding-block:48px}
  .at-rel__title{font-size:26px}
  .at-card{gap:14px;padding:14px}
  .at-card__img{width:88px;aspect-ratio:1}
  .at-card__kind{font-size:12px}
  .at-card__title{font-size:16px;line-height:1.35}
  .at-card__desc{font-size:14px}
  .at-card__more{display:none}
  .at-btns > *{width:100%}
}
@media (prefers-reduced-motion:reduce){.at-toc a,.at-card,.at-btn{transition:none}}

/* --- Converted bodies inside the reading column ----------------------------- */

.at-prose :where(.cq-section, .cq-row, .wp-block-group) {
	background: none;
	margin: 0 !important;
	max-width: none !important;
	padding: 0 !important;
}

.at-prose > .cq-section + .cq-section {
	margin-top: 40px !important;
}

.at-prose :where(.cq-row, .wp-block-group) > * + * {
	margin-top: 20px;
}

.at-prose :where(.cq-row, .wp-block-group) > h2 + *,
.at-prose :where(.cq-row, .wp-block-group) > h3 + * {
	margin-top: 0;
}

.at-prose .cq-section > .cq-row > h2:first-child {
	margin-top: 0;
}

.at-prose :is(p, li, td, th) {
	color: var(--web-text-primary) !important;
	font-size: inherit !important;
	font-weight: 400 !important;
	line-height: 1.7 !important;
	text-align: left !important;
}

.at-prose :is(h2, h3, h4) {
	color: var(--web-text-heading) !important;
	text-align: left !important;
}

.at-prose h4 {
	margin: 24px 0 8px;
	font: 500 18px/1.4 var(--font-sans);
}

/* Space around subheadings, for every heading wherever the converter nested
   it (straight after text, first in its own group, after a list or image).
   WordPress' layout rules zero heading margins, so they are set explicitly.
   The groups around them have no padding, so a heading's top margin carries
   through to the gap above its group; only at the top of a padded panel is
   it removed. */
.at-prose h2 {
	margin-top: 40px !important;
}

.at-prose :is(h3, h4) {
	margin-top: 32px !important;
}

.at-prose :is(h2, h3, h4) {
	margin-bottom: 12px !important;
}

.at-prose :is(.cq-row, .wp-block-group, .wp-block-column) > :is(h2, h3, h4) + * {
	margin-top: 0 !important;
}

/* A subheading straight under its heading still needs a little air. */
.at-prose :is(.cq-row, .wp-block-group, .wp-block-column) > h2 + :is(h3, h4),
.at-prose :is(.cq-row, .wp-block-group, .wp-block-column) > h3 + h4 {
	margin-top: 20px !important;
}

.at-prose > :first-child :is(h2, h3, h4):first-child,
.at-prose :is(.cq-section.has-background:not([style*="#ffffff"]), .cq-row.has-background, .wp-block-group.has-background:not(.cq-section)) > :is(h2, h3, h4):first-child,
.at-prose :is(.cq-section.has-background:not([style*="#ffffff"]), .cq-row.has-background, .wp-block-group.has-background:not(.cq-section)) > :first-child > :is(h2, h3, h4):first-child {
	margin-top: 0 !important;
}

/* White bands are the page itself. */
.at-prose .cq-section[style*="#ffffff"],
.at-prose .cq-section[style*="#fff;"] {
	background: none !important;
}

/* Tinted bands, and the rounded boxes nested in white bands, become panels. */
.at-prose .cq-section.has-background:not([style*="#ffffff"]),
.at-prose .cq-row.has-background,
.at-prose .wp-block-group.has-background:not(.cq-section) {
	border-radius: var(--radius-lg) !important;
	padding: 28px 32px !important;
}

.at-prose .cq-section.has-background:not([style*="#ffffff"]) {
	margin-block: 40px !important;
}

.at-prose [style*="#eef3ff"] {
	background: var(--web-surface-accent) !important;
}

.at-prose [style*="#fff3eb"] {
	background: var(--web-surface-warm) !important;
}

.at-prose :is([style*="#eff9e1"], [style*="#fff3d6"], [style*="#f5f5f5"]) {
	background: var(--web-surface-sunken) !important;
}

.at-prose :is(.cq-section.has-background:not([style*="#ffffff"]), .cq-row.has-background, .wp-block-group.has-background:not(.cq-section)) :is(h2, h3) {
	font-size: 22px !important;
	line-height: 1.35 !important;
}

.at-prose :is(.cq-section.has-background:not([style*="#ffffff"]), .cq-row.has-background, .wp-block-group.has-background:not(.cq-section)) :is(p, li) {
	font-size: 17px !important;
	line-height: 1.6 !important;
}

/* Buttons: primary and outline, left-aligned with the text. */
.at-prose .wp-block-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: flex-start !important;
}

.at-prose .wp-block-button__link {
	align-items: center;
	background: var(--web-accent) !important;
	border: 1px solid var(--web-accent) !important;
	border-radius: var(--radius-sm) !important;
	color: var(--web-text-on-accent) !important;
	display: inline-flex;
	font: 500 16px/1 var(--font-sans) !important;
	justify-content: center;
	min-height: 48px;
	padding: 0 24px !important;
	text-decoration: none !important;
	transition: background-color 120ms cubic-bezier(.2, 0, 0, 1);
}

.at-prose .wp-block-button__link:hover {
	background: var(--web-accent-hover) !important;
	border-color: var(--web-accent-hover) !important;
}

.at-prose .is-style-outline .wp-block-button__link {
	background: transparent !important;
	color: var(--web-text-link) !important;
}

.at-prose .is-style-outline .wp-block-button__link:hover {
	background: var(--web-surface-accent) !important;
	color: var(--web-text-link-hover) !important;
}

.at-prose .wp-block-button__link:focus-visible {
	outline: 2px solid var(--web-focus-ring);
	outline-offset: 2px;
}

/* Images and tables in the text. */
.at-prose .wp-block-image {
	margin-block: 32px !important;
}

.at-prose .wp-block-image img {
	border: 1px solid var(--web-border-subtle);
	border-radius: var(--radius-lg);
	width: auto !important;
}

.at-prose .wp-block-table {
	margin-block: 32px !important;
	overflow-x: auto;
}

.at-prose table {
	border-collapse: collapse;
	font-size: 16px;
	width: 100%;
}

.at-prose :is(td, th) {
	border: 0 !important;
	border-bottom: 1px solid var(--web-border-subtle) !important;
	font-size: 16px !important;
	padding: 12px 16px 12px 0;
	vertical-align: top;
}

.at-prose th {
	color: var(--web-text-heading) !important;
	font-weight: 500 !important;
}

@media (max-width: 599px) {
	.at-prose .cq-section.has-background:not([style*="#ffffff"]),
	.at-prose .cq-row.has-background,
	.at-prose .wp-block-group.has-background:not(.cq-section) {
		padding: 24px 20px !important;
	}

	.at-prose .wp-block-buttons > * {
		width: 100%;
	}

	.at-prose .wp-block-button__link {
		width: 100%;
	}
}

/* An embed whose oEmbed did not resolve is just its URL: drop the empty 16:9 box. */
.at-prose .wp-block-embed:not(:has(iframe)) .wp-block-embed__wrapper::before {
	display: none;
}

.at-prose .wp-block-embed iframe {
	border-radius: var(--radius-lg);
}

/* Author box: photo beside name, role and bio, as one hairline card. */
.at-prose .author-box {
	align-items: start;
	background: var(--web-surface-default) !important;
	border: 1px solid var(--web-border-subtle) !important;
	border-radius: var(--radius-lg) !important;
	display: grid !important;
	gap: 2px 24px !important;
	grid-template-columns: 96px minmax(0, 1fr);
	margin-block: 40px 0 !important;
	padding: 24px !important;
}

.at-prose .author-box > * {
	grid-column: 2;
	margin: 0 !important;
}

.at-prose .author-box > .wp-block-image {
	grid-column: 1;
	grid-row: 1 / span 3;
	margin: 0 !important;
}

.at-prose .author-box img {
	aspect-ratio: 1;
	border: 0;
	border-radius: 50%;
	height: 96px !important;
	object-fit: cover;
	object-position: top;
	width: 96px !important;
}

.at-prose .author-box h4 {
	font: 500 18px/1.35 var(--font-sans) !important;
}

.at-prose .author-box p {
	font-size: 15px !important;
	line-height: 1.6 !important;
}

.at-prose .author-box p strong {
	color: var(--web-text-secondary);
	font-weight: 400;
}

.at-prose .author-box > p:last-child {
	margin-top: 10px !important;
}

@media (max-width: 599px) {
	.at-prose .author-box {
		grid-template-columns: 64px minmax(0, 1fr);
		column-gap: 16px !important;
	}

	.at-prose .author-box img {
		height: 64px !important;
		width: 64px !important;
	}

	.at-prose .author-box > p:last-child {
		grid-column: 1 / -1;
	}
}