/* ===========================================================================
   Process mapping page, design canvas "Rådgivning – Prosesskartlegging"
   (2026-10-07)
   ===========================================================================
   Loaded only on pages whose content uses the `cq-pk-` sections (see
   inc/page-prosesskartlegging.php). Values follow the canvas and the
   Certain QMS Web Design System: white hero with breadcrumb, intro split
   with photo, mist service cards, two package cards with prices, two
   training cards with hour tables, a peach "start small" band, the contact
   section with the Pipedrive form and the "other areas" tiles.

   Spacing comes from flex/grid `gap`, so block margins inside these sections
   are reset; the `!important` on that reset outranks the theme's
   `.cq-main h2 + p`-style margin rules without restating each one. */

.cq-main {
	--cq-pk-gutter: var(--wp--style--root--padding-left, clamp(24px, 5.56vw, 80px));
	--cq-pk-section: clamp(64px, 8vw, 112px);
	--cq-pk-peach: #fff3eb;
	--cq-pk-clay: #b34e1a;
	--cq-pk-muted: #3f4947;
	--cq-pk-text: #232323;
}

.wp-block-post-content > .cq-pk-s {
	margin-block: 0 !important;
}

.cq-main .cq-pk-s :where(h1, h2, h3, h4, p, ul, ol, li, figure, table, .wp-block-buttons, .wp-block-group) {
	margin: 0 !important;
}

.cq-main .cq-pk-s {
	font-family: "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;
	scroll-margin-top: 80px;
}

.cq-main .cq-pk-wrap {
	box-sizing: border-box;
	margin-inline: auto !important;
	/* 1200px of content, like the header and footer (contentSize). */
	max-width: calc(1200px + 2 * var(--cq-pk-gutter));
	padding-inline: var(--cq-pk-gutter);
}

.cq-main .cq-pk-s:not(.cq-pk-hero) > .cq-pk-wrap {
	padding-block: var(--cq-pk-section);
}

/* --- Type ---------------------------------------------------------------- */
/* Heading sizes carry `!important`: below 782px the theme sets every h1/h2/h3
   to 1.75/1.375/1.25rem !important, far under the design system's minimums
   (34/28/22px). */

.cq-main .cq-pk-head {
	display: flex;
	flex-direction: column;
	gap: 16px;
	max-width: 720px;
}

.cq-main .cq-pk-eyebrow {
	color: var(--cq-navy);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.08em;
	line-height: 1.2;
	text-transform: uppercase;
}

.cq-main .cq-pk-h1 {
	color: var(--cq-ink);
	font-size: clamp(34px, 4.4vw, 56px) !important;
	font-weight: 500;
	letter-spacing: -0.022em;
	line-height: 1.08;
	text-wrap: balance;
}

.cq-main .cq-pk-h2 {
	color: var(--cq-ink);
	font-size: clamp(28px, 3.2vw, 40px) !important;
	font-weight: 500;
	letter-spacing: -0.016em;
	line-height: 1.15;
	text-wrap: balance;
}

.cq-main .cq-pk-h3 {
	color: var(--cq-ink);
	font-size: clamp(22px, 2.2vw, 28px) !important;
	font-weight: 500;
	letter-spacing: -0.012em;
	line-height: 1.2;
}

.cq-main .cq-pk-lead,
.cq-main .cq-pk-hero__lead {
	color: var(--cq-pk-muted);
	font-size: 18px;
	line-height: 1.6;
}

.cq-main .cq-pk-text {
	color: var(--cq-pk-text);
	font-size: 17px;
	line-height: 1.65;
}

.cq-main .cq-pk-note {
	color: var(--cq-pk-text);
	font-size: 16px;
	line-height: 1.6;
}

.cq-main .cq-pk-note a {
	color: var(--cq-blue);
	text-underline-offset: 3px;
}

.cq-main .cq-pk-note a:hover {
	color: var(--cq-navy);
}

/* --- Buttons ------------------------------------------------------------- */
/* `!important` here: the theme's catch-all button rule chains six :not()s,
   which outranks any reasonable page-scoped selector. */

.cq-main .cq-pk-s .wp-block-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.cq-main .cq-pk-s .wp-block-button > .wp-block-button__link {
	align-items: center;
	border: 1.5px solid transparent !important;
	border-radius: var(--cq-radius-sm) !important;
	box-shadow: none !important;
	box-sizing: border-box;
	display: inline-flex;
	font-family: inherit;
	font-size: 17px !important;
	font-weight: 500 !important;
	justify-content: center;
	letter-spacing: 0;
	line-height: 1.2 !important;
	min-height: 52px !important;
	padding: 15px 26px !important;
	text-decoration: none;
	transition: background-color 120ms var(--cq-ease), border-color 120ms var(--cq-ease), color 120ms var(--cq-ease);
}

.cq-main .cq-pk-s .wp-block-button > .wp-block-button__link:focus-visible {
	outline: 2px solid var(--cq-blue);
	outline-offset: 2px;
}

.cq-main .cq-pk-s .cq-pk-btn--primary > .wp-block-button__link {
	background-color: var(--cq-blue) !important;
	color: #ffffff !important;
}

.cq-main .cq-pk-s .cq-pk-btn--primary > .wp-block-button__link:hover {
	background-color: var(--cq-navy) !important;
	color: #ffffff !important;
}

.cq-main .cq-pk-s .cq-pk-btn--secondary > .wp-block-button__link {
	background-color: #ffffff !important;
	border: 1px solid var(--cq-border) !important;
	color: var(--cq-blue) !important;
}

.cq-main .cq-pk-s .cq-pk-btn--secondary > .wp-block-button__link:hover {
	background-color: var(--cq-mist) !important;
	border-color: var(--cq-sky) !important;
	color: var(--cq-blue) !important;
}

/* --- Icons --------------------------------------------------------------- */
/* Glyphs the shared `.cq-icon--*` set lacks. Same mask technique. */

.cq-main .cq-pk-s .cq-icon--lock {
	--cq-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='11' width='16' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 018 0v4'/%3E%3C/svg%3E");
}

.cq-main .cq-pk-checks {
	--cq-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
}

/* --- Hero ---------------------------------------------------------------- */

.cq-main .cq-pk-hero {
	background-color: #ffffff;
	border-bottom: 1px solid var(--cq-border);
}

.cq-main .cq-pk-hero > .cq-pk-wrap {
	display: flex;
	flex-direction: column;
	gap: var(--cq-crumb-gap);
	padding-block: var(--cq-crumb-top) 72px;
}

.cq-main .cq-pk-hero .cq-breadcrumb {
	margin: 0 !important;
}

.cq-main .cq-pk-hero__copy {
	display: flex;
	flex-direction: column;
	gap: 16px;
	max-width: 720px;
}

.cq-main .cq-pk-hero .wp-block-buttons {
	padding-top: 8px;
}

/* --- Intro --------------------------------------------------------------- */

.cq-main .cq-pk-intro {
	background-color: #ffffff;
}

.cq-main .cq-pk-intro__grid {
	align-items: center;
	column-gap: 32px;
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	row-gap: 40px;
}

.cq-main .cq-pk-intro__copy {
	display: flex;
	flex-direction: column;
	gap: 24px;
	grid-column: 1 / span 6;
}

.cq-main .cq-pk-intro__copy .cq-pk-h2 {
	max-width: 460px;
}

.cq-main .cq-pk-intro__media {
	grid-column: 8 / span 5;
}

.cq-main .cq-pk-intro__media img {
	aspect-ratio: 3 / 2;
	border: 1px solid var(--cq-border);
	border-radius: var(--cq-radius-lg);
	box-sizing: border-box;
	display: block;
	height: auto;
	object-fit: cover;
	object-position: 55% 35%;
	width: 100%;
}

/* --- Services ------------------------------------------------------------ */

.cq-main .cq-pk-services {
	background-color: var(--cq-mist);
}

.cq-main .cq-pk-services > .cq-pk-wrap {
	display: flex;
	flex-direction: column;
	gap: 40px;
}

.cq-main .cq-pk-cards {
	display: grid;
	gap: 20px;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.cq-main .cq-pk-card {
	background-color: #ffffff;
	border-radius: var(--cq-radius-lg);
	box-shadow: 0 1px 2px rgba(6, 12, 49, .04);
	box-sizing: border-box;
	padding: 32px 28px 36px;
}

/* An odd number of services: the last card spans the row instead of leaving a gap. */
.cq-main .cq-pk-card:last-child:nth-child(odd) {
	grid-column: 1 / -1;
}

/* From 1024px up the body always shows, whatever the open state (the inline
   script also keeps every card open there). */
@media (min-width: 1024px) {
	.cq-main .cq-pk-card::details-content {
		content-visibility: visible;
		display: block;
	}
}

.cq-main .cq-pk-card__sum {
	border-bottom: 1px solid #ececec;
	cursor: default;
	display: block;
	list-style: none;
	padding-bottom: 16px;
}

.cq-main .cq-pk-card__sum::-webkit-details-marker {
	display: none;
}

.cq-main .cq-pk-card__sum::marker {
	content: "";
}

.cq-main .cq-pk-card__title {
	color: var(--cq-ink);
	font-size: 21px !important;
	font-weight: 500;
	letter-spacing: -0.01em;
	line-height: 1.3;
}

.cq-main .cq-pk-card__chev {
	display: none;
}

.cq-main .cq-pk-card__body {
	padding-top: 20px;
}

.cq-main .cq-pk-card__body p {
	color: var(--cq-pk-text);
	font-size: 16px;
	line-height: 1.7;
}

/* --- Packages and training ----------------------------------------------- */

.cq-main .cq-pk-packages {
	background-color: #ffffff;
}

.cq-main .cq-pk-training {
	background-color: #ffffff;
	border-top: 1px solid var(--cq-border);
}

.cq-main .cq-pk-packages > .cq-pk-wrap,
.cq-main .cq-pk-training > .cq-pk-wrap {
	display: flex;
	flex-direction: column;
	gap: 48px;
}

.cq-main .cq-pk-offers {
	align-items: stretch;
	display: grid;
	gap: 32px;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.cq-main .cq-pk-offer {
	background-color: #ffffff;
	border: 1px solid var(--cq-border);
	border-radius: var(--cq-radius-lg);
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: 24px;
	padding: clamp(28px, 2.8vw, 40px);
}

.cq-main .cq-pk-offer__head {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.cq-main .cq-pk-offer__head .cq-pk-text {
	font-size: 16px;
}

.cq-main .cq-pk-offer__intro {
	color: var(--cq-ink);
	font-size: 17px;
	font-weight: 500;
	line-height: 1.55;
}

.cq-main .cq-pk-price {
	border-block: 1px solid var(--cq-border);
	color: var(--cq-pk-muted);
	font-size: 17px;
	line-height: 1.5;
	padding-block: 20px;
}

.cq-main .cq-pk-price strong {
	color: var(--cq-ink);
	/* Scales down so "fra 40 000 til 60 000,-" stays on one line in the
	   two-column cards just above the tablet breakpoint. */
	font-size: clamp(24px, 2.3vw, 32px);
	font-variant-numeric: tabular-nums;
	font-weight: 500;
	letter-spacing: -0.016em;
	line-height: 1.15;
	white-space: nowrap;
}

.cq-main .cq-pk-price__cur {
	color: var(--cq-navy);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.08em;
	margin-right: 4px;
}

.cq-main .cq-pk-checks {
	display: flex;
	flex-direction: column;
	gap: 14px;
	list-style: none;
	padding: 0;
}

.cq-main .cq-pk-checks li {
	align-items: flex-start;
	color: var(--cq-pk-text);
	display: flex;
	font-size: 16px;
	gap: 12px;
	line-height: 1.5;
}

.cq-main .cq-pk-checks li::before {
	background-color: var(--cq-blue);
	content: "";
	flex: none;
	height: 20px;
	margin-top: 2px;
	-webkit-mask: var(--cq-icon) center / contain no-repeat;
	mask: var(--cq-icon) center / contain no-repeat;
	width: 20px;
}

.cq-main .cq-pk-notes {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

/* Hours table: hairline rows, right-aligned numbers, bold total. */
.cq-main .cq-pk-table {
	margin-top: auto !important;
	overflow-x: auto;
}

.cq-main .cq-pk-table table {
	border: 0;
	border-collapse: collapse;
	font-size: 15px;
	line-height: 1.45;
	width: 100%;
}

.cq-main .cq-pk-table th,
.cq-main .cq-pk-table td {
	border: 0;
	border-bottom: 1px solid var(--cq-border);
	color: var(--cq-pk-text);
	padding: 12px 16px 12px 0;
	text-align: left;
}

.cq-main .cq-pk-table thead th {
	color: var(--cq-navy);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.08em;
	padding-top: 0;
	padding-bottom: 10px;
	text-transform: uppercase;
}

.cq-main .cq-pk-table :is(th, td):last-child {
	font-variant-numeric: tabular-nums;
	padding-right: 0;
	text-align: right;
	width: 80px;
}

/* Core's table block draws 3px rules above tfoot and below thead. */
.cq-main .cq-pk-table thead,
.cq-main .cq-pk-table tfoot {
	border: 0;
}

.cq-main .cq-pk-table tfoot td {
	border-bottom: 0;
	color: var(--cq-ink);
	font-weight: 500;
	padding-top: 14px;
}

/* --- Start small band ---------------------------------------------------- */

.cq-main .cq-pk-start {
	background-color: var(--cq-pk-peach);
}

.cq-main .cq-pk-start__card {
	background-color: #ffffff;
	border-radius: 16px;
	box-shadow: 0 4px 8px rgba(6, 12, 49, .04), 0 20px 48px rgba(178, 77, 21, .10);
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	overflow: hidden;
}

.cq-main .cq-pk-start__media {
	grid-column: 1 / span 5;
	min-height: 460px;
}

.cq-main .cq-pk-start__media img {
	display: block;
	height: 100%;
	object-fit: cover;
	object-position: 62% 40%;
	width: 100%;
}

.cq-main .cq-pk-start__copy {
	align-items: flex-start;
	display: flex;
	flex-direction: column;
	gap: 20px;
	grid-column: 6 / span 7;
	justify-content: center;
	padding: 56px 64px;
}

.cq-main .cq-pk-start .wp-block-buttons {
	padding-top: 8px;
}

/* --- Contact ------------------------------------------------------------- */

.cq-main .cq-pk-contact {
	background-color: #ffffff;
}

.cq-main .cq-pk-contact__grid {
	align-items: center;
	column-gap: 32px;
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	row-gap: 40px;
}

.cq-main .cq-pk-contact__copy {
	display: flex;
	flex-direction: column;
	gap: 20px;
	grid-column: 1 / span 5;
}

.cq-main .cq-pk-contact__card {
	background-color: #ffffff;
	border: 1px solid var(--cq-border);
	border-radius: var(--cq-radius-lg);
	box-shadow: var(--cq-shadow-md, 0 2px 4px rgba(6, 12, 49, .06), 0 8px 20px rgba(6, 12, 49, .07));
	box-sizing: border-box;
	grid-column: 7 / span 6;
	padding: 40px;
}

/* --- Other areas --------------------------------------------------------- */

.cq-main .cq-pk-areas {
	background-color: #ffffff;
	border-top: 1px solid #f0f0f0;
}

.cq-main .cq-pk-areas > .cq-pk-wrap {
	display: flex;
	flex-direction: column;
	gap: 32px;
}

.cq-main .cq-pk-areas__title {
	font-size: clamp(26px, 4vw, 32px) !important;
}

.cq-main .cq-pk-areas__grid {
	display: grid;
	gap: 16px;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Icon tile (::before) with its glyph (::after) laid over it. */
.cq-main .cq-pk-area {
	align-items: center;
	background-color: #ffffff;
	border: 1px solid var(--cq-border);
	border-radius: var(--cq-radius-lg);
	box-sizing: border-box;
	color: var(--cq-ink);
	display: flex;
	font-size: 17px;
	font-weight: 500;
	gap: 16px;
	height: 100%;
	line-height: 1.3;
	padding: 20px 24px;
	position: relative;
}

.cq-main .cq-pk-area::before {
	background-color: var(--cq-pk-peach);
	border-radius: 8px;
	content: "";
	flex: none;
	height: 48px;
	width: 48px;
}

.cq-main .cq-pk-area::after {
	background-color: var(--cq-pk-clay);
	content: "";
	height: 24px;
	left: 36px;
	-webkit-mask: var(--cq-icon) center / contain no-repeat;
	mask: var(--cq-icon) center / contain no-repeat;
	pointer-events: none;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 24px;
}


/* --- Tablet and phone ---------------------------------------------------- */

@media (max-width: 1023.98px) {
	/* The service cards become an accordion, one per row (canvas "mobil";
	   from 1024px down, as on the AI consulting page). */
	.cq-main .cq-pk-cards {
		gap: 10px;
		grid-template-columns: minmax(0, 1fr);
	}

	.cq-main .cq-pk-card {
		border-radius: var(--cq-radius-md);
		padding: 0;
	}

	.cq-main .cq-pk-card__sum {
		align-items: center;
		border-bottom: 0;
		border-radius: var(--cq-radius-md);
		cursor: pointer;
		display: flex;
		gap: 12px;
		justify-content: space-between;
		min-height: 56px;
		padding: 18px 20px;
	}

	.cq-main .cq-pk-card__sum:focus-visible {
		outline: 2px solid var(--cq-blue);
		outline-offset: 2px;
	}

	/* `!important`: the theme sets phone h3s to 1.25rem !important. */
	.cq-main .cq-pk-card__title {
		font-size: 17px !important;
		line-height: 1.35;
	}

	.cq-main .cq-pk-card__chev {
		background-color: var(--cq-blue);
		display: block;
		flex: none;
		height: 20px;
		-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
		mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
		transition: transform 200ms var(--cq-ease);
		width: 20px;
	}

	.cq-main .cq-pk-card[open] .cq-pk-card__chev {
		transform: rotate(180deg);
	}

	.cq-main .cq-pk-card__body {
		border-top: 1px solid #ececec;
		margin: 0 20px !important;
		padding: 16px 0 20px;
	}

	.cq-main .cq-pk-card__body p {
		font-size: 15px;
		line-height: 1.65;
	}

	.cq-main .cq-pk-intro__copy,
	.cq-main .cq-pk-intro__media,
	.cq-main .cq-pk-contact__copy,
	.cq-main .cq-pk-contact__card {
		grid-column: 1 / -1;
	}

	.cq-main .cq-pk-offers {
		grid-template-columns: minmax(0, 1fr);
	}

	.cq-main .cq-pk-start__card {
		grid-template-columns: minmax(0, 1fr);
	}

	.cq-main .cq-pk-start__media,
	.cq-main .cq-pk-start__copy {
		grid-column: 1 / -1;
	}

	.cq-main .cq-pk-start__media {
		aspect-ratio: 16 / 10;
		min-height: 0;
	}

	.cq-main .cq-pk-price strong {
		font-size: 24px;
	}

	.cq-main .cq-pk-price {
		padding-block: 16px;
	}

	.cq-main .cq-pk-start__copy {
		padding: 40px;
	}

	.cq-main .cq-pk-areas__grid {
		gap: 12px;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* Other areas: compact rows, sized like the AI consulting page's. They
	   are plain labels, not links, until those pages are ready. */
	.cq-main .cq-pk-area {
		border-radius: var(--cq-radius-md);
		gap: 14px;
		line-height: 24px;
		min-height: 64px;
		padding: 12px 16px 12px 12px;
	}

	.cq-main .cq-pk-area::before {
		height: 40px;
		width: 40px;
	}

	/* Glyph centred on the 40px tile: 12px padding + (40 - 22) / 2. */
	.cq-main .cq-pk-area::after {
		height: 22px;
		left: 21px;
		width: 22px;
	}
}

@media (max-width: 599.98px) {
	.cq-main .cq-pk-hero > .cq-pk-wrap {
		padding-bottom: 56px;
	}

	.cq-main .cq-pk-areas__grid {
		gap: 8px;
		grid-template-columns: minmax(0, 1fr);
	}


	.cq-main .cq-pk-offer,
	.cq-main .cq-pk-contact__card {
		padding: 24px;
	}

	.cq-main .cq-pk-price strong {
		font-size: 20px;
	}

	.cq-main .cq-pk-start__media {
		aspect-ratio: 4 / 3;
	}

	.cq-main .cq-pk-start__copy {
		padding: 28px 24px;
	}

	.cq-main .cq-pk-s .wp-block-buttons,
	.cq-main .cq-pk-s .wp-block-button,
	.cq-main .cq-pk-s .wp-block-button > .wp-block-button__link {
		width: 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.cq-main .cq-pk-s *,
	.cq-main .cq-pk-s *::before,
	.cq-main .cq-pk-s *::after {
		transition: none !important;
	}
}