/* =========================================================================
 * Skylor — content blocks (the `sp-*` contract)
 * -------------------------------------------------------------------------
 * Styles the HTML that arrives pre-built from skyPIM (or any ingest). Skylor
 * never emits these class names, it only styles them — they are a public API
 * and content already in customer databases depends on them.
 *
 * Ported from the SP Fusion theme (fusion-20: tokens.css + blocks.css), the
 * stylesheet written for exactly this markup. Rules of the house:
 *   · mobile first, every media query is min-width
 *   · every design value comes from a --spf-* token; a customer theme layer
 *     (the host's blockstyle.css) overrides tokens, not selectors
 *   · no !important
 *
 * Layout model: `.spf-entry-content` (Skylor's <main>) is full width.
 * Full-bleed bands (`.sp-breaker`, `.sp-hero`) span it edge to edge; every
 * other block sizes itself with `--spf-content-width` — container width
 * minus the page gutter taken as margin — so a block's background stops at
 * the content edge and the same rule works at any nesting depth.
 *
 * Colour: the CMS puts `style="color:…"` on `.sp-text-container`, so colour
 * is only ever set on that element (or the block root); headings, intro and
 * body text inherit. Setting colour on a descendant would beat the editor's
 * inline choice.
 *
 * Contents:
 *   0. Design tokens
 *   1. Content shell and vertical rhythm
 *   2. Text primitives
 *   3. Links and buttons
 *   4. Media primitives
 *   5. Breaker
 *   6. Hero
 *   7. Text + Foto
 *   8. Pure text / article
 *   9. Single quote
 *  10. Divider
 *  11. Text block before a multi
 *  12. Repeaters and the sp-col-N ladder
 *  13. Staff cards
 *  14. Image-as-background cards
 *  15. Slideshow
 *  16. FAQ
 *  17. Filter + search
 *  18. Contact block
 *  19. Additions seen in skyPIM deliveries
 * ========================================================================= */


/* =========================================================================
 * 0. DESIGN TOKENS
 * =========================================================================
 * Everything here has a real value: no rule below may assume a variable
 * exists without a default. A customer layer re-declares tokens on :root
 * (or on a wrapper element to retune one section).
 */

:root {
	/* --- Brand / palette ------------------------------------------------ */
	--spf-color-bg: #ffffff;
	--spf-color-canvas: var(--spf-color-bg);
	--spf-color-text: #111111;
	--spf-color-text-invert: #ffffff;
	--spf-color-muted: #6b7280;
	--spf-color-primary: #1a56db;
	--spf-color-primary-contrast: #ffffff;
	--spf-color-border: #e5e7eb;

	/* Accent tracks primary unless a customer sets it explicitly. */
	--spf-color-accent: var(--spf-color-primary);

	/* --- Surfaces: the palette editors pick block backgrounds from ------- */
	--spf-color-surface-1: #f9fafb;
	--spf-color-surface-2: #f3f4f6;
	--spf-color-surface-3: #e5e7eb;

	/* --- Icons: currentColor by default, recolorable per context --------- */
	--spf-icon-color: currentColor;
	--spf-icon-size: 1.5rem;

	/* --- Typography: one base size and one ratio drive every step ------- */
	--spf-font-body: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--spf-font-heading: var(--spf-font-body);
	--spf-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

	--spf-font-size-base: 1rem;
	--spf-type-scale: 1.2;
	--spf-font-heading-weight: 700;
	--spf-heading-tracking: -0.015em;

	--spf-line-height: 1.6;
	--spf-line-height-tight: 1.35;
	--spf-line-height-heading: 1.15;

	/* Modular steps, up and down from the base. */
	--spf-font-size-xs: calc(var(--spf-font-size-sm) / var(--spf-type-scale));
	--spf-font-size-sm: calc(var(--spf-font-size-base) / var(--spf-type-scale));
	--spf-font-size-md: var(--spf-font-size-base);
	--spf-font-size-lg: calc(var(--spf-font-size-base) * var(--spf-type-scale));
	--spf-font-size-xl: calc(var(--spf-font-size-lg) * var(--spf-type-scale));
	--spf-font-size-2xl: calc(var(--spf-font-size-xl) * var(--spf-type-scale));
	--spf-font-size-3xl: calc(var(--spf-font-size-2xl) * var(--spf-type-scale));
	--spf-font-size-4xl: calc(var(--spf-font-size-3xl) * var(--spf-type-scale));

	/* Headings clamp between two steps of the scale — no per-breakpoint
	 * font-size tokens anywhere else. */
	--spf-font-size-h1: clamp(var(--spf-font-size-2xl), calc(1.25rem + 2.5vw), var(--spf-font-size-4xl));
	--spf-font-size-h2: clamp(var(--spf-font-size-xl), calc(1.1rem + 1.8vw), var(--spf-font-size-3xl));
	--spf-font-size-h3: clamp(var(--spf-font-size-lg), calc(1rem + 1vw), var(--spf-font-size-2xl));
	--spf-font-size-h4: var(--spf-font-size-lg);
	--spf-font-size-h5: var(--spf-font-size-md);
	--spf-font-size-h6: var(--spf-font-size-sm);
	--spf-font-size-intro: clamp(var(--spf-font-size-md), calc(0.95rem + 0.5vw), var(--spf-font-size-lg));

	/* Reading measures in ch, so they scale with the element's own size. */
	--spf-measure: 68ch;
	--spf-measure-narrow: 58ch;
	--spf-measure-heading: 24ch;

	/* --- Spacing: every step times one density knob ---------------------- */
	--spf-space-scale: 1;
	--spf-space-1: calc(0.25rem * var(--spf-space-scale));
	--spf-space-2: calc(0.5rem * var(--spf-space-scale));
	--spf-space-3: calc(0.75rem * var(--spf-space-scale));
	--spf-space-4: calc(1rem * var(--spf-space-scale));
	--spf-space-5: calc(1.25rem * var(--spf-space-scale));
	--spf-space-6: calc(1.5rem * var(--spf-space-scale));
	--spf-space-8: calc(2rem * var(--spf-space-scale));
	--spf-space-10: calc(2.5rem * var(--spf-space-scale));
	--spf-space-12: calc(3rem * var(--spf-space-scale));
	--spf-space-16: calc(4rem * var(--spf-space-scale));

	/* --- Layout ---------------------------------------------------------- */
	--spf-page-max: 100%;
	--spf-container-max: 1200px;
	--spf-container-pad: var(--spf-space-4);

	/* The one line every content block uses to size itself. */
	--spf-content-width: min(100% - 2 * var(--spf-container-pad), var(--spf-container-max));

	/* --- Radius ----------------------------------------------------------- */
	--spf-radius-sm: 0.25rem;
	--spf-radius: 0.5rem;
	--spf-radius-lg: 1rem;
	--spf-radius-pill: 999px;
	--spf-radius-button: var(--spf-radius);
	--spf-radius-image: var(--spf-radius);

	/* --- Elevation -------------------------------------------------------- */
	--spf-shadow-1: 0 1px 2px rgb(0 0 0 / 0.06), 0 1px 3px rgb(0 0 0 / 0.1);
	--spf-shadow-2: 0 10px 30px -12px rgb(0 0 0 / 0.35);

	/* --- Content blocks: rhythm and proportions -------------------------- */
	--spf-block-gap: var(--spf-space-12);    /* vertical rhythm between blocks */
	--spf-breaker-pad: var(--spf-space-12);  /* inner padding of a full-bleed band */
	--spf-loop-gap: var(--spf-space-6);      /* grid gap inside repeaters */

	--spf-hero-height: clamp(22rem, 62vh, 40rem);
	--spf-hero-height-small: clamp(15rem, 42vh, 26rem);
	--spf-hero-height-big: clamp(28rem, 80vh, 48rem);
	/* Weighted to the bottom, but never fully transparent — hero text is
	 * vertically centred, so it needs contrast in the middle of the frame too. */
	--spf-hero-overlay: linear-gradient(to top, rgb(0 0 0 / 0.7), rgb(0 0 0 / 0.4) 55%, rgb(0 0 0 / 0.25));

	--spf-quote-max: 52rem;               /* a quote reads badly at full container width */
	--spf-readmore-collapse: 11rem;       /* visible body-text height while collapsed */
	--spf-contact-max: 37.5rem;           /* contact block cap on desktop */

	/* Image crops. Blocks switch the active one via sp-square / sp-wide /
	 * sp-tall, so the aspect lives in one place per block. */
	--spf-image-aspect: 4 / 3;
	--spf-image-aspect-wide: 16 / 9;
	--spf-image-aspect-square: 1 / 1;
	--spf-image-aspect-tall: 3 / 4;

	--spf-avatar-size: 7rem;              /* quote portrait, mobile */
	--spf-divider-logo-height: 2.5rem;

	--spf-button-pad-block: var(--spf-space-3);
	--spf-button-pad-inline: var(--spf-space-6);

	/* --- Motion ------------------------------------------------------------ */
	--spf-transition: 200ms ease;
}

/* Bigger gutters and looser bands once there is room for them. Token-level
 * overrides only — no component ever needs to know this happened. */
@media (min-width: 768px) {
	:root {
		--spf-container-pad: var(--spf-space-6);
		--spf-block-gap: var(--spf-space-16);
		--spf-breaker-pad: var(--spf-space-16);
		--spf-avatar-size: 12rem;
		--spf-divider-logo-height: 3rem;
	}
}

/* Optional dark-mode token overrides, opt-in via data-theme="dark". */
:root[data-theme="dark"] {
	--spf-color-bg: #0b0b0c;
	--spf-color-text: #f3f4f6;
	--spf-color-text-invert: #0b0b0c;
	--spf-color-muted: #9ca3af;
	--spf-color-border: #27272a;
	--spf-color-surface-1: #141416;
	--spf-color-surface-2: #1c1c1f;
	--spf-color-surface-3: #27272a;
}

/* A single reusable container helper — the one layout opinion we ship. */
.spf-container {
	width: 100%;
	max-width: var(--spf-container-max);
	margin-inline: auto;
	padding-inline: var(--spf-container-pad);
}


/* =========================================================================
 * 1. CONTENT SHELL AND VERTICAL RHYTHM
 * =========================================================================
 * Rhythm is margin-based rather than flex `gap`, deliberately: the CMS
 * sometimes wraps blocks in an anonymous <div>, and adjacent-margin
 * collapsing keeps the spacing correct through those wrappers.
 */

.spf-entry-content {
	font-family: var(--spf-font-body);
	font-size: var(--spf-font-size-base);
	line-height: var(--spf-line-height);
	color: var(--spf-color-text);
}

/* Blocks that sit in the page flow at content width. Zero specificity so a
 * theme layer — or a more specific block rule below — overrides it freely. */
:where(
	.sp-pure-text,
	.sp-text-foto,
	.sp-single-quote,
	.sp-divider,
	.sp-hero-contenttext,
	.sp-textblock-before-multi,
	.sp-repeater,
	.sp-slideshow,
	.sp-filter-content-container
) {
	width: var(--spf-content-width);
	margin-inline: auto;
}

/* Block rhythm. Full-bleed bands are excluded — they carry padding instead. */
:where(
	.sp-pure-text,
	.sp-text-foto,
	.sp-single-quote,
	.sp-divider,
	.sp-textblock-before-multi,
	.sp-repeater,
	.sp-multi-slideshow-wrapper,
	.sp-filter-content-container
) {
	margin-block: var(--spf-block-gap);
}

/* A lead-in text block binds to the multi that follows it: half rhythm
 * between them so they read as one section. */
:where(.sp-textblock-before-multi) {
	margin-block-end: var(--spf-space-8);
}

.sp-textblock-before-multi + .sp-repeater,
.sp-textblock-before-multi + .sp-slideshow,
.sp-textblock-before-multi + .sp-filter-content-container {
	margin-block-start: var(--spf-space-8);
}

/* Inside a slideshow wrapper the wrapper owns the outer rhythm. */
.sp-multi-slideshow-wrapper > * {
	margin-block: 0;
}

.sp-hero-contenttext {
	margin-block: var(--spf-space-8) var(--spf-block-gap);
}

/* Bands own their rhythm: the padding is the band, so blocks inside carry no
 * vertical margins of their own. (The CMS scatters <style> debris between
 * blocks, so first/last-child alone would not be enough.) */
.sp-breaker :where(
	.sp-pure-text,
	.sp-text-foto,
	.sp-single-quote,
	.sp-divider,
	.sp-hero-contenttext,
	.sp-textblock-before-multi,
	.sp-multi-block-wrapper,
	.sp-repeater,
	.sp-multi-slideshow-wrapper,
	.sp-filter-content-container
) {
	margin-block: 0;
}

/* A lead-in inside a band keeps its half-rhythm to the multi it introduces. */
.sp-breaker :where(.sp-textblock-before-multi) {
	margin-block-end: var(--spf-space-8);
}

/* Two blocks sharing one band still need separating. The general sibling
 * match steps over the interleaved <style> debris. */
.sp-breaker :where(.sp-pure-text, .sp-text-foto, .sp-single-quote, .sp-divider, .sp-repeater, .sp-multi-slideshow-wrapper, .sp-filter-content-container)
	~ :where(.sp-pure-text, .sp-text-foto, .sp-single-quote, .sp-divider, .sp-repeater, .sp-multi-slideshow-wrapper, .sp-filter-content-container) {
	margin-block-start: var(--spf-space-8);
}

/* Preview-only wrapper from skyPIM's inline editor. Neutralised so it never
 * affects layout. */
.sp_preview_item_edit {
	display: contents;
}


/* =========================================================================
 * 2. TEXT PRIMITIVES
 * ========================================================================= */

/* --- The text box: one spacing system for every block -------------------- */
.sp-text-box > * {
	margin-block-start: var(--spf-space-3);
}

.sp-text-box > .sp-main-header {
	margin-block-start: var(--spf-space-1);
}

.sp-text-box > .sp-content-text {
	margin-block-start: var(--spf-space-4);
}

.sp-text-box > .sp-linkbox {
	margin-block-start: var(--spf-space-6);
}

/* Last, so whatever leads the box starts flush. */
.sp-text-box > :first-child {
	margin-block-start: 0;
}

/* --- Headings ------------------------------------------------------------ */
.sp-pre-header {
	font-family: var(--spf-font-heading);
	font-size: var(--spf-font-size-h6);
	font-weight: 600;
	line-height: var(--spf-line-height-tight);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	/* Dim the inherited colour rather than replacing it, so the editor's
	 * inline text colour still shows through. */
	opacity: 0.75;
}

.sp-main-header {
	font-family: var(--spf-font-heading);
	font-size: var(--spf-font-size-h2);
	font-weight: var(--spf-font-heading-weight);
	line-height: var(--spf-line-height-heading);
	letter-spacing: var(--spf-heading-tracking);
	text-wrap: balance;
	max-width: var(--spf-measure-heading);
}

h1.sp-main-header {
	font-size: var(--spf-font-size-h1);
}

h3.sp-main-header {
	font-size: var(--spf-font-size-h3);
}

h4.sp-main-header {
	font-size: var(--spf-font-size-h4);
}

.sp-intro {
	font-size: var(--spf-font-size-intro);
	line-height: var(--spf-line-height-tight);
	max-width: var(--spf-measure);
}

/* --- Rich text ----------------------------------------------------------- */
.sp-content-text {
	display: flow-root; /* keep child margins from escaping the box */
	max-width: var(--spf-measure);
}

.sp-content-text p,
.sp-content-text ul,
.sp-content-text ol,
.sp-content-text dl,
.sp-content-text pre,
.sp-content-text table,
.sp-content-text figure,
.sp-content-text blockquote {
	margin-block: var(--spf-space-4);
}

.sp-content-text h1,
.sp-content-text h2,
.sp-content-text h3,
.sp-content-text h4,
.sp-content-text h5,
.sp-content-text h6 {
	font-family: var(--spf-font-heading);
	font-weight: var(--spf-font-heading-weight);
	line-height: var(--spf-line-height-heading);
	letter-spacing: var(--spf-heading-tracking);
	text-wrap: balance;
	margin-block: var(--spf-space-8) var(--spf-space-3);
}

.sp-content-text h1 { font-size: var(--spf-font-size-h2); }
.sp-content-text h2 { font-size: var(--spf-font-size-h3); }
.sp-content-text h3 { font-size: var(--spf-font-size-h4); }
.sp-content-text h4,
.sp-content-text h5,
.sp-content-text h6 { font-size: var(--spf-font-size-h5); }

/* The reset strips list markers globally; rich text opts back in. */
.sp-content-text ul,
.sp-content-text ol {
	padding-inline-start: var(--spf-space-6);
}

.sp-content-text ul { list-style: disc; }
.sp-content-text ol { list-style: decimal; }
.sp-content-text li + li { margin-block-start: var(--spf-space-2); }

.sp-content-text blockquote {
	padding-inline-start: var(--spf-space-4);
	border-inline-start: 2px solid var(--spf-color-border);
	font-style: italic;
}

.sp-content-text img {
	border-radius: var(--spf-radius-image);
}

.sp-content-text table {
	width: 100%;
	font-size: var(--spf-font-size-sm);
}

.sp-content-text th,
.sp-content-text td {
	padding: var(--spf-space-2) var(--spf-space-3);
	border-block-end: 1px solid var(--spf-color-border);
	text-align: start;
}

.sp-content-text th {
	font-weight: 600;
}

/* Flush at both ends — including through the preview edit wrapper. */
.sp-content-text > :first-child,
.sp-content-text .sp_preview_item_edit > :first-child {
	margin-block-start: 0;
}

.sp-content-text > :last-child,
.sp-content-text .sp_preview_item_edit > :last-child {
	margin-block-end: 0;
}


/* =========================================================================
 * 3. LINKS AND BUTTONS
 * =========================================================================
 *   sp-buttonlink-1  outline, inherits colour — safe on photos and bands
 *   sp-buttonlink-2  primary, filled
 *   sp-buttonlink-3  surface-2
 *   sp-buttonlink-4  surface-3
 */

.sp-content-text a {
	color: var(--spf-color-primary);
	text-decoration: underline;
	text-underline-offset: 0.15em;
	text-decoration-thickness: from-font;
	transition: color var(--spf-transition);
}

.sp-content-text a:hover {
	color: var(--spf-color-accent);
}

.sp-linkbox {
	display: flex;
	flex-wrap: wrap;
	gap: var(--spf-space-3);
}

.sp-linkitem {
	display: inline-flex;
}

.sp-buttonlink-1,
.sp-buttonlink-2,
.sp-buttonlink-3,
.sp-buttonlink-4 {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--spf-space-2);
	padding: var(--spf-button-pad-block) var(--spf-button-pad-inline);
	border: 1px solid transparent;
	border-radius: var(--spf-radius-button);
	font-family: var(--spf-font-heading);
	font-size: var(--spf-font-size-sm);
	font-weight: 600;
	line-height: var(--spf-line-height-tight);
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--spf-transition), border-color var(--spf-transition), color var(--spf-transition);
}

/* Outline, inheriting the surrounding text colour — legible over a hero photo
 * or a coloured band without knowing what is behind it. */
.sp-buttonlink-1 {
	border-color: color-mix(in srgb, currentColor 45%, transparent);
	color: inherit;
}

.sp-buttonlink-1:hover {
	border-color: currentColor;
	background-color: color-mix(in srgb, currentColor 10%, transparent);
}

.sp-buttonlink-2 {
	background-color: var(--spf-color-primary);
	border-color: var(--spf-color-primary);
	color: var(--spf-color-primary-contrast);
}

.sp-buttonlink-2:hover {
	background-color: var(--spf-color-accent);
	border-color: var(--spf-color-accent);
}

.sp-buttonlink-3 {
	background-color: var(--spf-color-surface-2);
	border-color: var(--spf-color-surface-2);
	color: var(--spf-color-text);
}

.sp-buttonlink-3:hover {
	background-color: var(--spf-color-surface-3);
	border-color: var(--spf-color-surface-3);
}

.sp-buttonlink-4 {
	background-color: var(--spf-color-surface-3);
	border-color: var(--spf-color-surface-3);
	color: var(--spf-color-text);
}

.sp-buttonlink-4:hover {
	background-color: color-mix(in srgb, var(--spf-color-surface-3) 85%, var(--spf-color-text));
	border-color: color-mix(in srgb, var(--spf-color-surface-3) 85%, var(--spf-color-text));
}

.sp-buttonlink-1:focus-visible,
.sp-buttonlink-2:focus-visible,
.sp-buttonlink-3:focus-visible,
.sp-buttonlink-4:focus-visible,
.sp-content-text a:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}


/* =========================================================================
 * 4. MEDIA PRIMITIVES
 * =========================================================================
 * `.sp-image-container` is a single-cell grid so `.sp-image-content`
 * stretches whenever the container has a definite height (a hero, or a
 * column in the text+foto grid) and falls back to its aspect ratio when it
 * does not.
 */

.sp-image-container {
	display: grid;
	overflow: hidden;
}

.sp-image-content {
	position: relative;
	overflow: hidden;
	aspect-ratio: var(--spf-image-aspect);
	border-radius: var(--spf-radius-image);
}

.sp-image-content > img,
.sp-image-content > video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Aspect switches. Set on the block root; the image reads the variable. */
.sp-wide { --spf-image-aspect: var(--spf-image-aspect-wide); }
.sp-square { --spf-image-aspect: var(--spf-image-aspect-square); }
.sp-tall { --spf-image-aspect: var(--spf-image-aspect-tall); }

/* Show the whole image instead of cropping it — logos, packshots, diagrams. */
.sp-contain .sp-image-content {
	aspect-ratio: auto;
}

.sp-contain .sp-image-content > img {
	position: static;
	height: auto;
	object-fit: contain;
}

/* Hover zoom, opt-in from the CMS. */
.sp-effect-image .sp-image-content > img {
	transition: transform 600ms ease;
}

.sp-effect-image .sp-image-content:hover > img {
	transform: scale(1.05);
}

/* Video hero/background: same cover treatment as an image. */
.sp-video-content {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Click layer for the lightbox: inert-looking until the popup script binds. */
.sp-video-popup-container {
	position: absolute;
	inset: 0;
}

.sp-video-popup[data-iframe-url] {
	position: absolute;
	inset: 0;
	cursor: pointer;
}


/* =========================================================================
 * 5. BREAKER — full-bleed coloured band
 * ========================================================================= */

.sp-breaker {
	padding-block: var(--spf-breaker-pad);
}

/* "Reduce padding top/bottom" in the CMS — halve it, so two bands of the
 * same colour can be stacked and read as one section. */
.sp-breaker-nopadding-top {
	padding-block-start: calc(var(--spf-breaker-pad) / 2);
}

.sp-breaker-nopadding-bottom {
	padding-block-end: calc(var(--spf-breaker-pad) / 2);
}


/* =========================================================================
 * 6. HERO
 * =========================================================================
 * Image and text share one grid cell instead of being absolutely positioned,
 * so the hero grows if the text needs more room on a narrow phone.
 */

.sp-hero {
	display: grid;
	min-height: var(--spf-hero-height);
	isolation: isolate;
}

.sp-hero-small {
	min-height: var(--spf-hero-height-small);
}

.sp-hero-big {
	min-height: var(--spf-hero-height-big);
}

.sp-hero > .sp-image-container,
.sp-hero > .sp-text-container {
	grid-area: 1 / 1;
}

.sp-hero > .sp-image-container {
	z-index: 0;
	height: 100%;
}

.sp-hero .sp-image-content {
	aspect-ratio: auto;
	height: 100%;
	border-radius: 0;
}

.sp-hero > .sp-text-container {
	z-index: 1;
	display: flex;
	align-items: center;
	padding-block: var(--spf-space-10);
}

/* Scrim + inverted text, but only when there is actually a photo behind
 * the words. A text-only hero keeps the page's own colours. */
.sp-hero:has(.sp-image-container) > .sp-text-container {
	background: var(--spf-hero-overlay);
	color: var(--spf-color-text-invert);
}

.sp-hero .sp-text-box {
	width: var(--spf-content-width);
	margin-inline: auto;
}

.sp-hero .sp-intro {
	max-width: var(--spf-measure-narrow);
}

/* Body copy that the CMS emits as a sibling *after* the hero. */
.sp-hero-contenttext .sp-content-text {
	max-width: var(--spf-measure);
}


/* =========================================================================
 * 7. TEXT + FOTO
 * =========================================================================
 * Three independent switches from the CMS, resolved into two variables:
 *   sp-tf-padding    → the card is padded, the image is inset from its edge
 *   sp-no-tf-padding → the image runs to the card edge (default)
 *   sp-bgcolor / sp-border-* → the text needs inset padding of its own
 * When the card itself is padded, that padding *is* the text inset.
 */

.sp-text-foto {
	--tf-card-pad: 0px;
	--tf-text-pad: 0px;
	--tf-gap: var(--spf-space-4);

	padding: var(--tf-card-pad);
	border-radius: var(--spf-radius-lg);
	overflow: hidden;
}

.sp-text-foto.sp-tf-padding {
	--tf-card-pad: var(--spf-space-4);
	--tf-gap: var(--spf-space-6);
}

.sp-text-foto.sp-bgcolor:not(.sp-tf-padding),
.sp-text-foto.sp-border:not(.sp-tf-padding),
.sp-text-foto.sp-border-1:not(.sp-tf-padding),
.sp-text-foto.sp-border-2:not(.sp-tf-padding),
.sp-text-foto.sp-border-3:not(.sp-tf-padding) {
	--tf-text-pad: var(--spf-space-5);
	--tf-gap: 0px;
}

.sp-text-foto.sp-border,
.sp-text-foto.sp-border-1 {
	border: 1px solid var(--spf-color-border);
}

.sp-text-foto.sp-border-2 {
	border: 2px solid var(--spf-color-border);
}

.sp-text-foto.sp-border-3 {
	border: 1px solid var(--spf-color-text);
}

.sp-text-foto > .sp-text-container {
	padding-inline: var(--tf-text-pad);
	padding-block: var(--spf-space-5);
}

/* Image flush against a card edge should not round its own corners. */
.sp-text-foto:not(.sp-tf-padding) .sp-image-content {
	border-radius: 0;
}

/* Image before text on the phone, opt-in from the CMS. */
.sp-text-foto.mobile-img-top > .sp-image-container {
	order: -1;
}

@media (min-width: 768px) {
	.sp-text-foto {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--tf-gap);
		align-items: stretch;
	}

	/* No photo delivered: the text takes the whole row instead of half. */
	.sp-text-foto:not(:has(.sp-image-container)) {
		grid-template-columns: minmax(0, 1fr);
	}

	.sp-text-foto.sp-tf-padding {
		--tf-card-pad: var(--spf-space-6);
	}

	.sp-text-foto.sp-bgcolor:not(.sp-tf-padding),
	.sp-text-foto.sp-border:not(.sp-tf-padding),
	.sp-text-foto.sp-border-1:not(.sp-tf-padding),
	.sp-text-foto.sp-border-2:not(.sp-tf-padding),
	.sp-text-foto.sp-border-3:not(.sp-tf-padding) {
		--tf-text-pad: var(--spf-space-8);
	}

	/* Fill the column when the text is the taller of the two. */
	.sp-text-foto > .sp-image-container,
	.sp-text-foto .sp-image-content {
		height: 100%;
	}

	/* Text is centred against the image, whatever the image height. */
	.sp-text-foto > .sp-text-container {
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding-block: var(--spf-space-6);
	}

	/* Flip: text to the right column. */
	.sp-text-foto.sp-flipright > .sp-text-container { order: 2; }
	.sp-text-foto.sp-flipright > .sp-image-container { order: 1; }
	.sp-text-foto.mobile-img-top > .sp-image-container { order: 0; }
	.sp-text-foto.sp-flipright.mobile-img-top > .sp-image-container { order: 1; }

	/* Nothing between the columns to separate them — give the text a gutter. */
	.sp-text-foto:not(.sp-tf-padding, .sp-bgcolor, .sp-border, .sp-border-1, .sp-border-2, .sp-border-3) {
		gap: var(--spf-space-10);
	}
}


/* =========================================================================
 * 8. PURE TEXT / ARTICLE
 * ========================================================================= */

.sp-pure-text > .sp-text-container {
	max-width: var(--spf-measure);
	margin-inline: auto;
}

.sp-pure-text .sp-article-narrow {
	max-width: var(--spf-measure-narrow);
}

/* "Wide" gives up the reading measure and fills the container. */
.sp-pure-text .sp-article-wide {
	max-width: none;
}

.sp-pure-text .sp-article-wide .sp-content-text,
.sp-pure-text .sp-article-wide .sp-intro {
	max-width: none;
}

.sp-pure-text .sp-main-header {
	max-width: none;
}

/* Alignment modifiers from the content contract. */
.sp-pure-text.sp-right > .sp-text-container {
	margin-inline: auto 0;
}

.sp-pure-text.sp-center > .sp-text-container {
	text-align: center;
}

.sp-pure-text.sp-center .sp-main-header,
.sp-pure-text.sp-center .sp-intro,
.sp-pure-text.sp-center .sp-content-text {
	margin-inline: auto;
}

.sp-pure-text.sp-center .sp-linkbox {
	justify-content: center;
}

/* Padded/framed article card. */
.sp-pure-text.sp-bgcolor > .sp-text-container,
.sp-pure-text.sp-border > .sp-text-container,
.sp-pure-text.sp-border-1 > .sp-text-container {
	padding: var(--spf-space-6);
	border-radius: var(--spf-radius-lg);
}

.sp-pure-text.sp-border > .sp-text-container,
.sp-pure-text.sp-border-1 > .sp-text-container {
	border: 1px solid var(--spf-color-border);
}

/* Read-more. The collapse is driven by a script (spf-collapsible state
 * classes); without it the full text stays visible — the safe failure
 * mode. sp-readmore itself arrives from the CMS and is only styled. */
.spf-collapsible:not(.is-open) .sp-content-text {
	max-height: var(--spf-readmore-collapse);
	overflow: hidden;
	mask-image: linear-gradient(to bottom, black 55%, transparent);
}

.sp-readmore,
.sp-readless {
	display: flex;
	align-items: center;
	gap: var(--spf-space-2);
	width: fit-content;
	margin-block-start: var(--spf-space-6);
	margin-inline: auto;
	font-family: var(--spf-font-heading);
	font-size: var(--spf-font-size-sm);
	font-weight: 600;
	color: var(--spf-color-primary);
	cursor: pointer;
	transition: color var(--spf-transition);
}

.sp-readmore::after,
.sp-readless::after {
	content: "";
	width: 0.4em;
	height: 0.4em;
	border-inline-end: 2px solid currentColor;
	border-block-end: 2px solid currentColor;
	transform: translateY(-0.15em) rotate(45deg);
	transition: transform var(--spf-transition);
}

.sp-readless::after {
	transform: translateY(0.1em) rotate(-135deg);
}

.sp-readmore:hover,
.sp-readless:hover {
	color: var(--spf-color-accent);
}

.sp-readless {
	display: none;
}

.spf-collapsible.is-open .sp-readless {
	display: flex;
}

.spf-has-readless.is-open .sp-readmore {
	display: none;
}

.spf-collapsible.is-open .sp-readmore::after {
	transform: translateY(0.1em) rotate(-135deg);
}


/* =========================================================================
 * 9. SINGLE QUOTE
 * ========================================================================= */

.sp-single-quote {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--spf-space-6);
	text-align: center;
}

/* Portrait above the words on a phone, beside them from tablet up. */
.sp-single-quote > .sp-image-container {
	order: -1;
}

.sp-single-quote .sp-quote-header {
	font-family: var(--spf-font-heading);
	font-size: var(--spf-font-size-h6);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	opacity: 0.75;
}

.sp-single-quote .sp-quote-content {
	font-size: var(--spf-font-size-intro);
	line-height: var(--spf-line-height-tight);
	font-style: italic;
	text-wrap: pretty;
	max-width: var(--spf-measure-narrow);
}

/* Round portrait. The CMS class name is misspelt in the contract and must
 * stay that way. */
.sp-qoute-cirkel {
	flex: 0 0 auto;
	inline-size: var(--spf-avatar-size);
	block-size: var(--spf-avatar-size);
	border-radius: 50%;
}

.sp-qoute-cirkel .sp-image-content {
	aspect-ratio: var(--spf-image-aspect-square);
	height: 100%;
	border-radius: 50%;
}

@media (min-width: 768px) {
	.sp-single-quote {
		flex-direction: row;
		align-items: center;
		gap: var(--spf-space-10);
		max-width: var(--spf-quote-max);
		text-align: start;
	}

	.sp-single-quote > .sp-image-container {
		order: 0;
	}

	.sp-single-quote > .sp-text-container {
		flex: 1 1 auto;
	}

	.sp-single-quote .sp-quote-content {
		max-width: var(--spf-measure);
	}
}


/* =========================================================================
 * 10. DIVIDER — a rule across the page with a mark in the gap
 * ========================================================================= */

.sp-divider {
	display: flex;
	align-items: center;
	gap: var(--spf-space-6);
}

.sp-dividerline {
	flex: 1 1 auto;
	border-block-end: 1px solid var(--spf-color-border);
}

.sp-divider > .sp-image-container {
	flex: 0 0 auto;
	max-width: 40%;
}

.sp-divider .sp-image-content {
	aspect-ratio: auto;
	border-radius: 0;
}

.sp-divider .sp-image-content > img {
	position: static;
	width: auto;
	height: var(--spf-divider-logo-height);
	object-fit: contain;
}


/* =========================================================================
 * 11. TEXT BLOCK BEFORE A MULTI
 * ========================================================================= */

.sp-textblock-before-multi .sp-text-container {
	max-width: var(--spf-measure);
}

.sp-textblock-before-multi.sp-center .sp-text-container {
	margin-inline: auto;
	text-align: center;
}

.sp-textblock-before-multi.sp-center .sp-main-header,
.sp-textblock-before-multi.sp-center .sp-intro,
.sp-textblock-before-multi.sp-center .sp-content-text {
	margin-inline: auto;
}

.sp-textblock-before-multi.sp-center .sp-linkbox {
	justify-content: center;
}

.sp-textblock-before-multi.sp-right .sp-text-container {
	margin-inline: auto 0;
}


/* =========================================================================
 * 12. REPEATERS AND THE sp-col-N LADDER
 * =========================================================================
 * `sp-col-N` means N columns at desktop — a maximum, not a fixed value.
 * The ladder, mobile first: 1 → 2 (768) → 3 (1024) → N (1280). The class
 * only sets a custom property, so it works on the repeater itself and on
 * a wrapper around it.
 */

/* The default column count lives in the var() fallback, not on the
 * repeater itself: a declaration here would beat the value inherited from
 * a `sp-col-N` wrapper around the repeater (the CMS emits both shapes). */
.sp-repeater {
	display: grid;
	grid-template-columns: repeat(var(--sp-cols, 1), minmax(0, 1fr));
	gap: var(--spf-loop-gap);
}

@media (min-width: 768px) {
	.sp-col-2, .sp-col-3, .sp-col-4, .sp-col-5, .sp-col-6, .sp-col-7, .sp-col-8 {
		--sp-cols: 2;
	}
}

@media (min-width: 1024px) {
	.sp-col-3, .sp-col-4, .sp-col-5, .sp-col-6, .sp-col-7, .sp-col-8 {
		--sp-cols: 3;
	}
}

@media (min-width: 1280px) {
	.sp-col-4 { --sp-cols: 4; }
	.sp-col-5 { --sp-cols: 5; }
	.sp-col-6 { --sp-cols: 6; }
	.sp-col-7 { --sp-cols: 7; }
	.sp-col-8 { --sp-cols: 8; }
}

/* The CMS wraps grid items in .sp-galleryitem — and sometimes an extra
 * watermark <section> around that. Single-cell grids all the way down keep
 * the card stretching to the row height through any wrapper depth. */
.sp-repeater > * {
	min-width: 0;
}

.sp-repeater :where(.sp-galleryitem, .sp-proof-wrapper) {
	display: grid;
}

/* --- The card ------------------------------------------------------------ */
.sp-repeater-item {
	position: relative;
	border-radius: var(--spf-radius);
	overflow: hidden;
}

.sp-repeater-item .sp-text-box {
	padding-block: var(--spf-space-3);
}

/* Framed/filled loops get inset text as well. */
.sp-border .sp-repeater-item,
.sp-border-1 .sp-repeater-item {
	border: 1px solid var(--spf-color-border);
}

.sp-border .sp-repeater-item .sp-text-box,
.sp-border-1 .sp-repeater-item .sp-text-box,
.sp-bgcolor .sp-repeater-item .sp-text-box {
	padding: var(--spf-space-4);
}

/* Card typography steps down from the page scale. */
.sp-repeater .sp-main-header {
	font-size: var(--spf-font-size-h4);
	max-width: none;
}

.sp-repeater .sp-pre-header {
	font-size: var(--spf-font-size-xs);
}

.sp-repeater .sp-intro {
	font-size: var(--spf-font-size-md);
}

/* Data payload the CMS ships with loop items — never rendered. */
.sp-loop-extrainfo {
	display: none;
}


/* =========================================================================
 * 13. STAFF CARDS
 * ========================================================================= */

.sp-staffcard-items .sp-staff-area {
	font-size: var(--spf-font-size-xs);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	opacity: 0.7;
}

.sp-staffcard-items .sp-staff-name {
	font-family: var(--spf-font-heading);
	font-size: var(--spf-font-size-lg);
	font-weight: 600;
	line-height: var(--spf-line-height-tight);
}

.sp-staffcard-items .sp-title {
	font-size: var(--spf-font-size-sm);
	color: var(--spf-color-muted);
	margin-block-end: var(--spf-space-2);
}

.sp-staffcard-items .sp-staff-info {
	font-size: var(--spf-font-size-sm);
	overflow-wrap: anywhere;
}

.sp-staffcard-items .sp-staff-info > span {
	font-weight: 600;
	margin-inline-end: var(--spf-space-1);
}

.sp-staffcard-items .sp-staff-info a {
	color: var(--spf-color-primary);
	transition: color var(--spf-transition);
}

.sp-staffcard-items .sp-staff-info a:hover {
	color: var(--spf-color-accent);
	text-decoration: underline;
}


/* =========================================================================
 * 14. IMAGE-AS-BACKGROUND CARDS — a mini-hero card
 * ========================================================================= */

.sp-repeater-item.sp-imageasbackground {
	display: grid;
	aspect-ratio: var(--spf-image-aspect);
	isolation: isolate;
}

.sp-imageasbackground > .sp-image-container,
.sp-imageasbackground > .sp-text-box {
	grid-area: 1 / 1;
}

.sp-imageasbackground > .sp-image-container {
	z-index: 0;
	height: 100%;
}

.sp-imageasbackground .sp-image-content {
	aspect-ratio: auto;
	height: 100%;
	border-radius: 0;
}

.sp-imageasbackground > .sp-text-box {
	z-index: 1;
	align-self: end;
	padding: var(--spf-space-10) var(--spf-space-5) var(--spf-space-5);
	color: var(--spf-color-text-invert);
	background: linear-gradient(to top, rgb(0 0 0 / 0.75), rgb(0 0 0 / 0.35) 65%, transparent);
}

.sp-imageasbackground .sp-main-header {
	font-size: var(--spf-font-size-h5);
}

.sp-imageasbackground .sp-pre-header {
	opacity: 0.85;
}

.sp-imageasbackground .sp-intro {
	font-size: var(--spf-font-size-sm);
}


/* =========================================================================
 * 15. SLIDESHOW
 * =========================================================================
 * Effects: sp-fade (stacked crossfade) or sp-slide (scroll-snap row).
 * Navigation: sp-dotsandarrows / sp-onlyarrows / sp-onlydots / sp-noslidenav.
 * Without a script the slide row still swipes natively and the fade stack
 * shows its first slide.
 */

.sp-slideshow {
	position: relative;
}

.sp-slideshow:has(.sp-hero) {
	width: 100%;
}

.sp-slideshowitems {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	overscroll-behavior-x: contain;
	scrollbar-width: none;
}

.sp-slideshowitems::-webkit-scrollbar {
	display: none;
}

.sp-slideshowitem {
	flex: 0 0 100%;
	width: 100%;
	min-width: 0;
	scroll-snap-align: start;
}

.sp-fade .sp-slideshowitems {
	display: grid;
	overflow: hidden;
}

.sp-fade .sp-slideshowitem {
	grid-area: 1 / 1;
	opacity: 0;
	pointer-events: none;
	transition: opacity 600ms ease;
}

.sp-fade .sp-slideshowitem.active,
.sp-fade .sp-slideshowitems:not(:has(.active)) > .sp-slideshowitem:first-child {
	opacity: 1;
	pointer-events: auto;
	z-index: 1;
}

.sp-slideshowdots {
	position: absolute;
	inset-inline: 0;
	bottom: var(--spf-space-4);
	display: flex;
	justify-content: center;
	gap: var(--spf-space-2);
	z-index: 5;
}

.sp-slideshowdot {
	width: 0.75rem;
	height: 0.75rem;
	border-radius: 50%;
	border: 1px solid currentColor;
	cursor: pointer;
	transition: background-color var(--spf-transition);
}

.sp-slideshowdot:hover {
	background: color-mix(in srgb, currentColor 40%, transparent);
}

.sp-slideshowdot.active {
	background: currentColor;
	cursor: default;
}

.sp-slideshowdarrowprev,
.sp-slideshowdarrownext {
	position: absolute;
	top: 50%;
	translate: 0 -50%;
	z-index: 5;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 50%;
	background: color-mix(in srgb, currentColor 12%, transparent);
	cursor: pointer;
	transition: background-color var(--spf-transition);
}

.sp-slideshowdarrowprev { inset-inline-start: var(--spf-space-4); }
.sp-slideshowdarrownext { inset-inline-end: var(--spf-space-4); }

.sp-slideshowdarrowprev:hover,
.sp-slideshowdarrownext:hover {
	background: color-mix(in srgb, currentColor 24%, transparent);
}

.sp-slideshowdarrowprev::before,
.sp-slideshowdarrownext::before {
	content: "";
	width: 0.6rem;
	height: 0.6rem;
	border-inline-end: 2px solid currentColor;
	border-block-end: 2px solid currentColor;
}

.sp-slideshowdarrowprev::before {
	transform: rotate(135deg);
	margin-inline-start: 0.2rem;
}

.sp-slideshowdarrownext::before {
	transform: rotate(-45deg);
	margin-inline-end: 0.2rem;
}

/* Hero slides carry a dark scrim, so the chrome flips to inverted. */
.sp-slideshow:has(.sp-hero) .sp-slideshowdots,
.sp-slideshow:has(.sp-hero) .sp-slideshowdarrowprev,
.sp-slideshow:has(.sp-hero) .sp-slideshowdarrownext {
	color: var(--spf-color-text-invert);
}

.sp-onlyarrows .sp-slideshowdots,
.sp-noslidenav .sp-slideshowdots,
.sp-onlydots .sp-slideshowdarrowprev,
.sp-onlydots .sp-slideshowdarrownext,
.sp-noslidenav .sp-slideshowdarrowprev,
.sp-noslidenav .sp-slideshowdarrownext {
	display: none;
}

.sp-slideshowitem.sp-quoteblock {
	display: flex;
	justify-content: center;
	padding-block: var(--spf-space-8);
	text-align: center;
}

.sp-quoteblock .sp-text-box {
	max-width: var(--spf-measure-narrow);
}

.sp-quoteblock .sp-main-header,
.sp-quoteblock .sp-intro,
.sp-quoteblock .sp-content-text {
	margin-inline: auto;
}

.sp-quoteblock .sp-linkbox {
	justify-content: center;
}

.sp-slideshow:has(.sp-quoteblock) {
	padding-inline: var(--spf-space-12);
	padding-block-end: var(--spf-space-10);
}


/* =========================================================================
 * 16. FAQ — answers only hide once a script has tagged the box (spf-faq)
 * ========================================================================= */

.sp-faq-question-box {
	border: 1px solid var(--spf-color-border);
	border-radius: var(--spf-radius);
	padding: var(--spf-space-4) var(--spf-space-5);
}

.sp-repeater:has(.sp-faq-question-box) {
	gap: var(--spf-space-3);
}

.sp-faq-question {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--spf-space-4);
	font-weight: 600;
	cursor: pointer;
}

.sp-faq-question::after {
	content: "";
	flex: none;
	width: 0.5em;
	height: 0.5em;
	border-inline-end: 2px solid currentColor;
	border-block-end: 2px solid currentColor;
	transform: translateY(-0.1em) rotate(45deg);
	transition: transform var(--spf-transition);
}

.spf-faq .sp-faq-answer:not(.open) {
	display: none;
}

.sp-faq-answer {
	margin-block-start: var(--spf-space-3);
	max-width: var(--spf-measure);
}

.sp-faq-question-box:has(.sp-faq-answer.open) .sp-faq-question::after {
	transform: translateY(0.1em) rotate(225deg);
}


/* =========================================================================
 * 17. FILTER + SEARCH — shell styling only
 * ========================================================================= */

.sp-items-search-container,
.sp_product-seach-container {
	position: relative;
	margin-block-end: var(--spf-space-6);
}

.sp-items-search-input {
	width: 100%;
	padding: var(--spf-space-3) var(--spf-space-4);
	padding-inline-start: var(--spf-space-10);
	border: 1px solid var(--spf-color-border);
	border-radius: var(--spf-radius-button);
	background: var(--spf-color-bg);
	color: var(--spf-color-text);
	transition: border-color var(--spf-transition);
}

.sp-items-search-input:hover {
	border-color: var(--spf-color-muted);
}

.sp-items-search-input:focus-visible {
	outline: 2px solid var(--spf-color-primary);
	outline-offset: -1px;
	border-color: var(--spf-color-primary);
}

svg.sp-ico-magnifier {
	position: absolute;
	inset-inline-start: var(--spf-space-4);
	top: 50%;
	translate: 0 -50%;
	width: 1.125rem;
	height: 1.125rem;
	color: var(--spf-color-muted);
	pointer-events: none;
}


/* =========================================================================
 * 18. CONTACT BLOCK (teams, tabbed staff list, contact-form slot)
 * =========================================================================
 * Tab filtering is script behaviour (spf-contact tag); without it everyone
 * stays visible and reachable.
 */

.sp-repeater:has(.sp-contact-main-section) {
	display: block;
}

.sp-contact-box {
	display: grid;
	gap: var(--spf-space-8);
}

.sp-contact-box > * {
	min-width: 0;
}

@media (min-width: 1024px) {
	.sp-contact-box {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		align-items: start;
	}
}

.sp-teammembers-container {
	position: relative;
}

.sp-team-tabs {
	display: flex;
	gap: var(--spf-space-1);
	overflow-x: auto;
	scrollbar-width: none;
	border-block-end: 1px solid var(--spf-color-border);
}

.sp-team-tabs::-webkit-scrollbar {
	display: none;
}

.sp-team-tab {
	flex: none;
	padding: var(--spf-space-2) var(--spf-space-4);
	border-block-end: 2px solid transparent;
	margin-block-end: -1px;
	font-size: var(--spf-font-size-sm);
	font-weight: 500;
	color: var(--spf-color-muted);
	white-space: nowrap;
	cursor: pointer;
	transition: color var(--spf-transition), border-color var(--spf-transition);
}

.sp-team-tab:hover {
	color: var(--spf-color-text);
}

.sp-team-tab.active {
	color: var(--spf-color-primary);
	border-color: var(--spf-color-primary);
	font-weight: 600;
	cursor: default;
}

.spf-tabs-overflow .sp-team-tabs {
	mask-image: linear-gradient(to right, transparent, black 2.5rem, black calc(100% - 2.5rem), transparent);
}

.spf-tabs-overflow.spf-tabs-at-start .sp-team-tabs {
	mask-image: linear-gradient(to right, black, black calc(100% - 2.5rem), transparent);
}

.spf-tabs-overflow.spf-tabs-at-end .sp-team-tabs {
	mask-image: linear-gradient(to right, transparent, black 2.5rem, black);
}

.team-tabs-scroll-button,
.team-members-scroll-up-button,
.team-members-scroll-down-button {
	display: none;
}

.sp-teams-main-block {
	display: flex;
	gap: var(--spf-space-3);
	margin-block-start: var(--spf-space-4);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	overscroll-behavior-x: contain;
	scrollbar-width: none;
	padding-block-end: var(--spf-space-1);
}

.sp-teams-main-block::-webkit-scrollbar {
	display: none;
}

.sp-teams-main-block > .sp-staff-block {
	flex: 0 0 min(85%, 24rem);
	scroll-snap-align: start;
}

@media (min-width: 1024px) {
	.spf-contact .sp-teammembers-container {
		display: flex;
		flex-direction: column;
		max-height: var(--spf-contact-max);
	}

	.sp-teams-main-block {
		flex: 1 1 auto;
		min-height: 0;
		flex-direction: column;
		overflow-x: visible;
		overflow-y: auto;
		scroll-snap-type: none;
		scrollbar-width: thin;
		scrollbar-color: var(--spf-color-border) transparent;
		padding-block-end: 0;
		padding-inline-end: var(--spf-space-2);
	}

	.sp-teams-main-block > .sp-staff-block {
		flex: 0 0 auto;
	}
}

.spf-contact .sp-staff-block.hidden,
.spf-contact .sp-staff-block-contactform.hidden {
	display: none;
}

.sp-staff-block {
	display: flex;
	gap: var(--spf-space-3);
	border: 1px solid var(--spf-color-border);
	border-radius: var(--spf-radius);
	padding: var(--spf-space-3);
	background: var(--spf-color-bg);
	line-height: var(--spf-line-height-tight);
}

.sp-staff-block .sp-staff-maininfo {
	flex: 1 1 auto;
	min-width: 0;
	display: grid;
	grid-template-columns: 5rem minmax(0, 1fr);
	gap: var(--spf-space-3);
	align-items: start;
}

@media (min-width: 768px) {
	.sp-staff-block .sp-staff-maininfo {
		grid-template-columns: 7rem minmax(0, 1fr);
	}
}

.sp-staff-block .sp-image-container {
	align-self: start;
}

.sp-staff-block .sp-image-content {
	aspect-ratio: var(--spf-image-aspect-square);
	border-radius: var(--spf-radius-sm);
}

.sp-staffname {
	font-weight: 600;
}

.sp-stafftitle {
	font-size: var(--spf-font-size-xs);
	font-style: italic;
	color: var(--spf-color-muted);
}

.sp-staffarea {
	font-size: var(--spf-font-size-xs);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	opacity: 0.7;
}

.sp-staff-contactinfo {
	margin-block-start: var(--spf-space-1);
	font-size: var(--spf-font-size-xs);
}

.sp-staff-contactinfo > div,
.sp-staff-contactinfo > a {
	display: block;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.sp-staff-contactinfo a {
	color: var(--spf-color-primary);
	transition: color var(--spf-transition);
}

.sp-staff-contactinfo a:hover {
	color: var(--spf-color-accent);
	text-decoration: underline;
}

.sp-staff-socialmedia {
	flex: none;
	width: 1.5rem;
}

.sp-staff-socialmedia .sp-image-content {
	aspect-ratio: auto;
	border-radius: 0;
}

.sp-staff-socialmedia .sp-image-content > img {
	position: static;
	height: auto;
	object-fit: contain;
}

.sp-staff-block-contactform {
	border: 1px solid var(--spf-color-border);
	border-radius: var(--spf-radius-lg);
	padding: var(--spf-space-6);
}

.sp-staff-block-contactform:empty {
	display: none;
}


/* =========================================================================
 * 19. ADDITIONS SEEN IN skyPIM DELIVERIES
 * =========================================================================
 * Classes the Fusion theme did not cover but real deliveries carry. Kept
 * minimal: enough for the block to hold together, tokens all the way.
 */

/* A text block the CMS emits with only its modifier classes (sp-tf-padding
 * / sp-no-tf-padding, no sp-text-foto or sp-pure-text): same width and
 * rhythm as any other block in the flow. */
:where(.sp-tf-padding, .sp-no-tf-padding):not(.sp-text-foto, .sp-hero, .sp-breaker, .sp-repeater-item) {
	width: var(--spf-content-width);
	margin-inline: auto;
	margin-block: var(--spf-block-gap);
}

.sp-breaker :where(.sp-tf-padding, .sp-no-tf-padding):not(.sp-text-foto, .sp-repeater-item) {
	margin-block: 0;
}

/* Full-width wrapper the CMS emits around custom blocks. */
.sp-fullwidth-block {
	width: 100%;
	margin-inline: 0;
}

.sp-fullwidth-block.sp-nospacing {
	margin-block: 0;
}

/* Several blocks grouped by the CMS. */
.sp-multi-block-wrapper {
	display: flex;
	flex-direction: column;
	gap: var(--spf-space-8);
	margin-block: var(--spf-block-gap);
}

/* Legacy text-over-image variant of text+foto: same stack as the hero. */
.sp-text-foto.sp-text-over-image {
	display: grid;
	isolation: isolate;
}

.sp-text-foto.sp-text-over-image > .sp-image-container,
.sp-text-foto.sp-text-over-image > .sp-text-container {
	grid-area: 1 / 1;
}

.sp-text-foto.sp-text-over-image > .sp-image-container {
	z-index: 0;
	height: 100%;
}

.sp-text-foto.sp-text-over-image > .sp-text-container {
	z-index: 1;
	padding: var(--spf-space-8);
	background: var(--spf-hero-overlay);
	color: var(--spf-color-text-invert);
}

/* Page loops (cards linking to other pages): image on top, title, teaser. */
.sp-page-loop-item {
	display: flex;
	flex-direction: column;
	gap: var(--spf-space-3);
	border-radius: var(--spf-radius);
	overflow: hidden;
}

.sp-page-loop-image {
	overflow: hidden;
	border-radius: var(--spf-radius-image);
}

.sp-page-loop-image img {
	width: 100%;
	height: auto;
	aspect-ratio: var(--spf-image-aspect-wide);
	object-fit: cover;
}

.sp-loop-title {
	font-family: var(--spf-font-heading);
	font-size: var(--spf-font-size-h5);
	font-weight: var(--spf-font-heading-weight);
	line-height: var(--spf-line-height-tight);
}

.sp-loop-shortdescription {
	font-size: var(--spf-font-size-sm);
	color: var(--spf-color-muted);
}

/* Whole-card links inherit the card's colours. */
.sp-imagelink {
	display: block;
	color: inherit;
	text-decoration: none;
}

/* Cover crop opt-in from the CMS. */
.sp-cover .sp-image-content > img {
	object-fit: cover;
}

/* Info cards: framed, filled, padded. */
.sp-infocard-items .sp-repeater-item {
	border: 1px solid var(--spf-color-border);
	border-radius: var(--spf-radius-lg);
	padding: var(--spf-space-5);
	background: var(--spf-color-surface-1);
}

/* Logo walls: contained logos, never cropped. */
.sp-logocard-items .sp-repeater-item .sp-image-content {
	aspect-ratio: var(--spf-image-aspect-wide);
}

.sp-logocard-items .sp-repeater-item .sp-image-content > img {
	object-fit: contain;
	padding: var(--spf-space-4);
}

/* Fact icons: small icon beside a short statement. */
.sp-facticon-items .sp-repeater-item {
	display: flex;
	align-items: center;
	gap: var(--spf-space-3);
}

.sp-facticon-items .sp-repeater-item .sp-image-container {
	flex: 0 0 2rem;
}

.sp-facticon-items .sp-repeater-item .sp-main-header {
	font-size: var(--spf-font-size-h5);
}