/* ===========================================================================
   References page, design canvas "QMS - Referanser" (2026-10-07)
   ===========================================================================
   Loaded only on pages whose content uses the `cq-ref-` sections (see
   inc/page-referanser.php). Values follow the canvas and the Certain QMS
   Web Design System: breadcrumb and heading, a customer logo grid on an ink band, customer
   story cards with the stories' feature photos (Tampnet wide), three quotes on mist and an inset
   indigo "next step" card.

   Spacing comes from flex/grid `gap`, so block margins inside the sections
   are reset, as on the partnership page. */

.cq-main {
	/* Same gutter as the header/footer, so the column lines up with them. */
	--cq-ref-gutter: var(--wp--style--root--padding-left, clamp(24px, 5.56vw, 80px));
	--cq-ref-section: clamp(64px, 8vw, 112px);
	--cq-ref-muted: #3f4947;
	--cq-ref-indigo: #001c3a;
}

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

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

.cq-main .cq-ref-s {
	background-color: #ffffff;
	font-family: "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;
}

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

/* --- Shared headings ------------------------------------------------------ */

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

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

.cq-main .cq-ref-title {
	color: var(--cq-ink);
	font-size: clamp(26px, 2.6vw, 36px);
	font-weight: 500;
	letter-spacing: -0.018em;
	line-height: 1.18;
	text-wrap: balance;
}

.cq-main .cq-ref-text {
	color: var(--cq-ref-muted);
	font-size: 18px;
	line-height: 1.55;
	max-width: 68ch;
}

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

.cq-main .cq-ref-hero > .cq-ref-wrap {
	gap: var(--cq-crumb-gap);
	padding-block: var(--cq-crumb-top) 48px;
}

.cq-main .cq-ref-s .cq-breadcrumb ol {
	margin: 0;
}

.cq-main .cq-ref-hero__copy {
	display: flex;
	flex-direction: column;
	gap: 24px;
	max-width: 760px;
}

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

.cq-main .cq-ref-lead {
	color: var(--cq-ref-muted);
	font-size: 20px;
	line-height: 1.6;
	max-width: 68ch;
}

/* --- Customer logos --------------------------------------------------------- */
/* Ink band (Oda, 2026-10-07): sky eyebrow, white heading and lead, the logos on white tiles,
   since the logo files themselves have a white ground. */

.cq-main .cq-ref-logos {
	background-color: var(--cq-ink);
	color: #ffffff;
}

.cq-main .cq-ref-logos > .cq-ref-wrap {
	gap: 32px;
	padding-block: clamp(56px, 7vw, 96px);
}

.cq-main .cq-ref-logos .cq-ref-eyebrow {
	color: var(--cq-sky);
}

/* Heading and lead white on the dark band (Oda, 2026-10-07). */
.cq-main .cq-ref-logos .cq-ref-title,
.cq-main .cq-ref-logos .cq-ref-text {
	color: #ffffff;
}

/* Ten logos: two columns on phones, five from 600px. */
.cq-main .cq-ref-logogrid {
	display: grid;
	gap: 12px;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	list-style: none;
	padding: 0;
}

.cq-main .cq-ref-logo {
	align-items: center;
	background-color: #ffffff;
	border-radius: var(--cq-radius-md, 12px);
	box-sizing: border-box;
	display: flex;
	height: 112px;
	justify-content: center;
	padding: 20px 24px;
}

.cq-main .cq-ref-logo img {
	display: block;
	height: auto;
	max-height: 56px;
	max-width: 100%;
	object-fit: contain;
	width: auto;
}

.cq-main .cq-ref-more {
	justify-content: flex-start;
}

.cq-main .cq-ref-btn--pill > .wp-block-button__link {
	align-items: center;
	background-color: transparent !important;
	border: 1px solid var(--cq-sky) !important;
	border-radius: var(--cq-radius-pill, 999px) !important;
	color: #ffffff !important;
	display: inline-flex;
	gap: 8px;
	min-height: 48px;
	padding: 0 24px !important;
}

.cq-main .cq-ref-btn--pill > .wp-block-button__link::after {
	background-color: currentColor;
	content: "";
	height: 20px;
	-webkit-mask: var(--cq-ref-arrow) center / contain no-repeat;
	mask: var(--cq-ref-arrow) center / contain no-repeat;
	width: 20px;
}

.cq-main .cq-ref-btn--pill > .wp-block-button__link:hover {
	background-color: rgba(188, 207, 252, .16) !important;
	color: #ffffff !important;
}

.cq-main .cq-ref-btn--pill > .wp-block-button__link:focus-visible {
	outline: 2px solid var(--cq-sky);
	outline-offset: 2px;
}

/* --- Customer stories ------------------------------------------------------- */

.cq-main .cq-ref-storygrid {
	display: grid;
	gap: 24px;
	grid-template-columns: minmax(0, 1fr);
}

.cq-main .cq-ref-story {
	background-color: #ffffff;
	position: relative;
	transition: border-color 120ms cubic-bezier(.2, 0, 0, 1), box-shadow 120ms cubic-bezier(.2, 0, 0, 1);
	border: 1px solid var(--cq-border);
	border-radius: var(--cq-radius-lg, 14px);
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.cq-main .cq-ref-story__media {
	aspect-ratio: 16 / 9;
	background-color: var(--cq-mist);
	/* Keeps every photo at 16:9 whatever its own size, so the cards line up. */
	min-height: 0;
	overflow: hidden;
}

.cq-main .cq-ref-story__media img {
	display: block;
	height: 100%;
	object-fit: cover;
	width: 100%;
}

.cq-main .cq-ref-story__body {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 32px;
}

.cq-main .cq-ref-story__kind {
	color: var(--cq-navy);
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0.08em;
	line-height: 1.2;
	text-transform: uppercase;
}

.cq-main .cq-ref-story__title {
	color: var(--cq-ink);
	font-size: clamp(22px, 2vw, 26px);
	font-weight: 500;
	letter-spacing: -0.012em;
	line-height: 1.25;
	text-wrap: balance;
}

.cq-main .cq-ref-story__text {
	color: var(--cq-ref-muted);
	font-size: 17px;
	line-height: 1.6;
}

/* The whole card opens the story: the link's ::after covers the card, so
   there is still only one link per card for keyboard and screen readers. */
.cq-main .cq-ref-story__link {
	align-items: center;
	color: var(--cq-blue);
	display: inline-flex;
	font-size: 16px;
	font-weight: 500;
	gap: 8px;
	margin-top: 4px;
	text-decoration: none;
}

.cq-main .cq-ref-story__link::before {
	background-color: currentColor;
	content: "";
	height: 20px;
	order: 1;
	-webkit-mask: var(--cq-ref-arrow) center / contain no-repeat;
	mask: var(--cq-ref-arrow) center / contain no-repeat;
	transition: transform 120ms cubic-bezier(.2, 0, 0, 1);
	width: 20px;
}

.cq-main .cq-ref-story__link::after {
	border-radius: inherit;
	content: "";
	inset: 0;
	position: absolute;
}

.cq-main .cq-ref-story:hover {
	border-color: var(--cq-blue);
	box-shadow: 0 2px 4px rgba(6, 12, 49, .06), 0 8px 20px rgba(6, 12, 49, .07);
}

.cq-main .cq-ref-story:hover .cq-ref-story__link {
	color: var(--cq-navy);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.cq-main .cq-ref-story:hover .cq-ref-story__link::before {
	transform: translateX(4px);
}

.cq-main .cq-ref-story:focus-within {
	outline: 2px solid var(--cq-blue);
	outline-offset: 2px;
}

.cq-main .cq-ref-story__link:focus-visible {
	outline: none;
}

/* --- Quotes ------------------------------------------------------------------ */

.cq-main .cq-ref-quotes {
	background-color: var(--cq-mist);
}

.cq-main .cq-ref-quotegrid {
	display: grid;
	gap: 24px;
	grid-template-columns: minmax(0, 1fr);
}

.cq-main .cq-ref-quote {
	background-color: #ffffff;
	border: 1px solid var(--cq-border);
	border-radius: var(--cq-radius-lg, 14px);
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: 24px;
	padding: 32px;
}

.cq-main .cq-ref-quote__mark,
.cq-main .cq-ref-quote__avatar {
	align-items: center;
	background-color: var(--cq-mist);
	color: var(--cq-blue);
	display: flex;
	flex-shrink: 0;
	height: 48px;
	justify-content: center;
	width: 48px;
}

.cq-main .cq-ref-quote__mark {
	border-radius: var(--cq-radius-md, 12px);
	--cq-icon: var(--cq-ref-icon-quote);
}

.cq-main .cq-ref-quote__avatar {
	border-radius: var(--cq-radius-pill, 999px);
	color: var(--cq-navy);
	--cq-icon: var(--cq-ref-icon-user);
}

.cq-main .cq-ref-quote__mark::before,
.cq-main .cq-ref-quote__avatar::before {
	background-color: currentColor;
	content: "";
	height: 24px;
	-webkit-mask: var(--cq-icon) center / contain no-repeat;
	mask: var(--cq-icon) center / contain no-repeat;
	width: 24px;
}

.cq-main .cq-ref-quote__text {
	border: 0;
	flex-grow: 1;
	padding: 0;
}

.cq-main .cq-ref-quote__text p {
	color: var(--cq-ink);
	font-size: 20px;
	font-style: normal;
	font-weight: 400;
	line-height: 1.5;
}

.cq-main .cq-ref-quote__by {
	align-items: center;
	border-top: 1px solid var(--cq-border);
	display: flex;
	gap: 14px;
	padding-top: 20px;
}

.cq-main .cq-ref-quote__who {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.cq-main .cq-ref-quote__name {
	color: var(--cq-ink);
	font-size: 16px;
	font-weight: 500;
}

.cq-main .cq-ref-quote__role {
	color: var(--cq-ref-muted);
	font-size: 14px;
	line-height: 1.4;
}

/* --- Next step: inset indigo card ------------------------------------------ */

.cq-main .cq-ref-cta__card {
	align-items: center;
	background-color: var(--cq-ref-indigo);
	border-radius: 16px;
	display: flex;
	flex-direction: column;
	gap: 32px;
	overflow: hidden;
	padding: clamp(40px, 5vw, 72px);
	position: relative;
	text-align: center;
}

/* Large check mark in the corner, as in the canvas. */
.cq-main .cq-ref-cta__card::before {
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f3bf4' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5L20 6.5'/%3E%3C/svg%3E") center / contain no-repeat;
	bottom: -150px;
	content: "";
	height: 420px;
	opacity: 0.35;
	pointer-events: none;
	position: absolute;
	right: -60px;
	width: 420px;
}

.cq-main .cq-ref-cta__copy {
	align-items: center;
	display: flex;
	flex-direction: column;
	gap: 16px;
	max-width: 640px;
	position: relative;
}

.cq-main .cq-ref-cta__eyebrow {
	color: var(--cq-sky);
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0.08em;
	line-height: 1.2;
	text-transform: uppercase;
}

.cq-main .cq-ref-cta__title {
	color: #ffffff;
	font-size: clamp(30px, 3.4vw, 44px);
	font-weight: 500;
	letter-spacing: -0.022em;
	line-height: 1.12;
	text-wrap: balance;
}

.cq-main .cq-ref-cta__lead {
	color: #ffffff;
	font-size: 18px;
	line-height: 1.55;
}

.cq-main .cq-ref-cta .wp-block-buttons {
	gap: 12px;
	justify-content: center;
	position: relative;
}

.cq-main .cq-ref-cta .wp-block-button__link {
	border-radius: var(--cq-radius-sm, 8px) !important;
	min-height: 56px;
}

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

.cq-main .cq-ref-cta .cq-ref-btn--primary > .wp-block-button__link:hover {
	background-color: var(--cq-navy) !important;
	border-color: var(--cq-navy) !important;
}

.cq-main .cq-ref-cta .cq-ref-btn--light > .wp-block-button__link {
	background-color: #ffffff !important;
	border-color: #ffffff !important;
	color: var(--cq-ink) !important;
}

.cq-main .cq-ref-cta .cq-ref-btn--light > .wp-block-button__link:hover {
	background-color: var(--cq-mist) !important;
}

.cq-main .cq-ref-cta .wp-block-button > .wp-block-button__link:focus-visible {
	outline: 2px solid var(--cq-sky);
	outline-offset: 2px;
}

/* --- Wider screens ------------------------------------------------------------ */

@media (min-width: 600px) {
	.cq-main .cq-ref-logogrid {
		gap: 16px;
		grid-template-columns: repeat(5, minmax(0, 1fr));
	}

	.cq-main .cq-ref-logo {
		padding: 16px;
	}

	.cq-main .cq-ref-storygrid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.cq-main .cq-ref-story--wide {
		grid-column: 1 / -1;
	}
}

@media (min-width: 1024px) {
	.cq-main .cq-ref-logo {
		height: 128px;
		padding: 24px 28px;
	}

	/* The wide story: photo left, text right. */
	.cq-main .cq-ref-story--wide {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.cq-main .cq-ref-story--wide .cq-ref-story__media {
		aspect-ratio: auto;
		min-height: 320px;
	}

	.cq-main .cq-ref-story--wide .cq-ref-story__body {
		justify-content: center;
		padding: 48px;
	}

	.cq-main .cq-ref-quotegrid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (prefers-reduced-motion: reduce) {
	.cq-main .cq-ref-story,
	.cq-main .cq-ref-story__link::before {
		transition: none;
	}
}

@media (prefers-reduced-motion: no-preference) {
	.cq-main .cq-ref-s .wp-block-button__link {
		transition: background-color 120ms cubic-bezier(.2, 0, 0, 1);
	}
}

/* --- Icons ------------------------------------------------------------------ */
/* Lucide-style, 1.5px stroke, as in the canvas. */

.cq-main .cq-ref-s {
	--cq-ref-arrow: 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='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E");
	--cq-ref-icon-quote: 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='M16 3a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2 1 1 0 0 1 1 1v1a2 2 0 0 1-2 2 1 1 0 0 0-1 1v2a1 1 0 0 0 1 1 6 6 0 0 0 6-6V5a2 2 0 0 0-2-2z'/%3E%3Cpath d='M5 3a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2 1 1 0 0 1 1 1v1a2 2 0 0 1-2 2 1 1 0 0 0-1 1v2a1 1 0 0 0 1 1 6 6 0 0 0 6-6V5a2 2 0 0 0-2-2z'/%3E%3C/svg%3E");
	--cq-ref-icon-user: 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='M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");
}