/**
 * Our Model — docs/sections/OUR-MODEL.md.
 * Copy, lists, tiles and the CTA live in Elementor (client list: GO Dot List; diagram: GO Hub
 * Diagram; tiles: Icon List). Shared from go-base.css: gradient header, scroll-linked H2,
 * buttons. Breakpoints: 1200 px (diagram, decided), 1000 px main, 640 px secondary.
 */

.e-con.go-model {
	--padding-top: 0px;
	--padding-right: 0px;
	--padding-bottom: 0px;
	--padding-left: 0px;
	--gap: 0px;
	--row-gap: 0px;
	--column-gap: 0px;
	overflow-x: clip;
}

/* ---------- A. Header: shared .go-head (go-base.css) ---------- */

.e-con.go-model__head {
	--go-head-h2: 20em;
	--go-head-lead: 44em;
}

/* ---------- Rows B and C: 1 px gaps on a line-coloured background draw the grid lines ---------- */

.e-con.go-model__row {
	--padding-top: 0px;
	--padding-right: 0px;
	--padding-bottom: 0px;
	--padding-left: 0px;
	background: var(--go-line);
}

/* ---------- Cards (Lime client card, Lavender infrastructure card): colour from shared .go-surface ---------- */

.e-con.go-model-card {
	--padding-top: clamp(28px, 3.4vw, 48px);
	--padding-bottom: clamp(28px, 3.4vw, 48px);
	--padding-left: var(--go-pad-x);
	--padding-right: var(--go-pad-x);
	overflow: clip;
}

.e-con.go-model-card--lime {
	--gap: clamp(32px, 4vw, 56px);
	--row-gap: clamp(32px, 4vw, 56px);
}

.e-con.go-model-card--lavender {
	--gap: 28px;
	--row-gap: 28px;
}

.e-con.go-model-card__group {
	--padding-top: 0px;
	--padding-right: 0px;
	--padding-bottom: 0px;
	--padding-left: 0px;
	--gap: 20px;
	--row-gap: 20px;
}

.elementor-widget.go-model-card__label .elementor-heading-title {
	margin: 0;
	color: var(--go-ink-hover);
	font-family: var(--go-font-mono);
	font-size: 13px;
	font-weight: 400;
	line-height: 1.3;
}

.go-model-card__title .elementor-heading-title {
	max-width: 9em;
	text-wrap: balance;
}

/* Tag pill ("Owned by you", "Provided by us"), pinned to the bottom of its card. */
.e-con > .elementor-widget.go-tag {
	align-self: flex-start;
	margin-top: auto;
}

.elementor-widget.go-tag .elementor-heading-title {
	display: inline-block;
	margin: 0;
	padding: 6px 11px;
	border-radius: 999px;
	background: var(--go-white);
	color: var(--go-ink);
	font-family: var(--go-font-mono);
	font-size: 12px;
	font-weight: 400;
	line-height: 1.3;
}

/* Client list (GO Dot List) */

.go-dotlist {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
	list-style: none;
}

.go-dotlist__item {
	display: flex;
	align-items: center;
	gap: 16px;
	margin: 0 -12px;
	padding: 11px 12px;
	border-radius: 10px;
	color: var(--go-ink);
	font-family: var(--go-font-sans);
	font-size: clamp(16px, 1.4vw, 18px);
	line-height: 1.3;
	cursor: default;
	transition: background-color .25s ease;
}

.go-dotlist__item:hover {
	background: rgba(17, 17, 17, .07);
}

/* On the Lime card, Lime items invert (Ink tile, Lime pixels) so they stay visible. */
.go-model-card--lime .go-dot--lime {
	--go-dot-bg: var(--go-ink);
	--go-dot-px: var(--go-lime);
}

/* ---------- Hub diagram (GO Hub Diagram, ≥ 1200 px only) ---------- */

.go-hub {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: clamp(20px, 2.4vw, 32px);
	box-sizing: border-box;
	height: 100%;
	min-height: clamp(380px, 44vw, 620px);
	padding: clamp(56px, 6vw, 80px) clamp(16px, 3vw, 40px) clamp(20px, 2.6vw, 32px);
	overflow: clip;
	isolation: isolate;
	background: #fbfbfa;
}

.go-hub::before {
	content: "";
	position: absolute;
	right: 5%;
	bottom: -30%;
	left: 5%;
	z-index: -1;
	height: 70%;
	background: radial-gradient(50% 50% at 50% 50%, rgba(160, 226, 207, .45) 0%, rgba(160, 226, 207, 0) 70%);
}

.go-hub .go-hub__label {
	position: absolute;
	top: clamp(20px, 2.6vw, 32px);
	left: var(--go-pad-x);
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	color: var(--go-text-2);
	font-family: var(--go-font-mono);
	font-size: 13px;
	line-height: 1.3;
}

.go-hub__tile {
	display: block;
	flex: none;
}

.go-hub__stage {
	position: relative;
	width: 100%;
	max-width: 880px;
	aspect-ratio: 1000 / 800;
	container-type: inline-size;
}

.go-hub__glow,
.go-hub__orbit,
.go-hub__ring,
.go-hub__links {
	position: absolute;
	pointer-events: none;
}

.go-hub__glow {
	inset: 12% 14% 0;
	background: radial-gradient(50% 50% at 50% 50%, rgba(160, 226, 207, .55) 0%, rgba(160, 226, 207, 0) 72%);
}

.go-hub__orbit {
	top: 6.25%;
	left: 15%;
	box-sizing: border-box;
	width: 70%;
	height: 87.5%;
	border: 1px dashed #c9c9c5;
	border-radius: 50%;
}

.go-hub__ring {
	top: 38.75%;
	left: 41%;
	box-sizing: border-box;
	width: 18%;
	height: 22.5%;
	border: 1px solid #e2e2de;
	border-radius: 50%;
	background: rgba(255, 255, 255, .4);
}

.go-hub__links {
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: visible;
}

.go-hub__link {
	stroke: #cfcfcb;
	stroke-width: 1;
	transition: stroke .25s ease, stroke-width .25s ease;
}

.go-hub__link.is-hot {
	stroke: var(--go-ink);
	stroke-width: 1.4;
}

/* Hub: go tile in a white frame, gently pulsing (--pulse from go-motion.js). */
.go-hub__hub {
	position: absolute;
	top: 50%;
	left: 50%;
	display: grid;
	place-items: center;
	box-sizing: border-box;
	width: 9%;
	aspect-ratio: 1;
	border: 1px solid var(--go-line);
	border-radius: 3.4cqw;
	background: var(--go-white);
	box-shadow: 0 20px 40px -20px rgba(17, 17, 17, .35);
	translate: -50% -50%;
	scale: var(--pulse, 1);
}

.go-hub__hub-tile {
	display: block;
	width: 72%;
	height: 72%;
	border-radius: 2.4cqw;
}

/* Client nodes: positioned by left/top (PHP); --bob from go-motion.js. */
.go-hub__node {
	position: absolute;
	z-index: 2;
	display: flex;
	align-items: center;
	gap: 1cqw;
	padding: 1.3cqw 2cqw 1.3cqw 1.3cqw;
	border: 1px solid var(--go-ink);
	border-radius: 2cqw;
	background: var(--go-ink);
	box-shadow: 0 14px 30px -16px rgba(17, 17, 17, .55);
	transform: translate(-50%, calc(-50% + var(--bob, 0) * .5cqw));
	transition: border-color .25s ease, scale .25s ease;
}

.go-hub__node.is-hot {
	border-color: var(--go-lime);
	scale: 1.05;
}

/* 3.3cqw tile with two .95cqw Ink pixels on the diagonal (same proportions as .go-dot). */
.go-hub__icon {
	--go-dot-bg: var(--go-mint);
	flex: none;
	width: 3.3cqw;
	height: 3.3cqw;
	border-radius: .85cqw;
	background:
		linear-gradient(var(--go-ink) 0 0) .575cqw .575cqw / .95cqw .95cqw no-repeat,
		linear-gradient(var(--go-ink) 0 0) 1.775cqw 1.775cqw / .95cqw .95cqw no-repeat,
		var(--go-dot-bg);
}

.go-hub__icon--lavender {
	--go-dot-bg: var(--go-lavender);
}

.go-hub__icon--lime {
	--go-dot-bg: var(--go-lime);
}

.go-hub__icon--ink {
	--go-dot-bg: var(--go-white);
}

.go-hub__node-label {
	color: var(--go-white);
	font-family: var(--go-font-sans);
	font-size: 1.65cqw;
	font-weight: 500;
	line-height: 1.15;
	white-space: nowrap;
}

/* Infrastructure items ride the orbit (radius 35cqw); --c/--s = cos/sin of the angle. */
.go-hub__infra {
	--go-infra: var(--go-mint);
	--go-infra-tint: #effaf6;
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 1;
	width: 0;
	height: 0;
	transform: translate(calc(var(--c, 0) * 35cqw), calc(var(--s, -1) * 35cqw));
}

.go-hub__infra--lavender {
	--go-infra: var(--go-lavender);
	--go-infra-tint: #f3f2fd;
}

.go-hub__infra--lime {
	--go-infra: var(--go-lime);
	--go-infra-tint: #f8ffdb;
}

.go-hub__sq {
	position: absolute;
	width: 1.1cqw;
	height: 1.1cqw;
	background: var(--go-infra);
	box-shadow: 0 0 0 1px var(--go-ink);
	translate: -50% -50%;
}

/* The pill is pushed outward along the radius so it never covers the ring. */
.go-hub__pill {
	position: absolute;
	top: calc(var(--s, -1) * 2.6cqw);
	left: calc(var(--c, 0) * 2.6cqw);
	padding: .6cqw 1.1cqw;
	border: 1px solid var(--go-infra);
	border-radius: 999px;
	background: var(--go-infra-tint);
	color: var(--go-ink);
	font-family: var(--go-font-mono);
	font-size: 1.1cqw;
	line-height: 1.2;
	white-space: nowrap;
	transform: translate(calc(-50% + var(--c, 0) * 50%), calc(-50% + var(--s, -1) * 50%));
}

.go-hub .go-hub__legend {
	display: flex;
	flex-wrap: wrap;
	align-self: flex-start;
	gap: 20px;
	margin: 0;
	color: var(--go-text-2);
	font-family: var(--go-font-mono);
	font-size: 12px;
	line-height: 1.3;
}

.go-hub__legend-item {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.go-hub__legend-item::before {
	content: "";
	box-sizing: border-box;
	width: 10px;
	height: 10px;
	border-radius: 3px;
	background: var(--go-ink);
}

.go-hub__legend-item--infra::before {
	border: 1px solid var(--go-lavender);
	background: #f3f2fd;
}

/* ---------- C. Tile grid (Elementor Icon List, no icons) ---------- */

.go-tiles .elementor-icon-list-items {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1px;
	height: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
	background: var(--go-line);
}

.go-tiles.elementor-widget .elementor-icon-list-items .elementor-icon-list-item {
	--go-tile: var(--go-mint);
	--go-tile-tint: #effaf6;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: space-between;
	gap: 20px;
	box-sizing: border-box;
	min-height: clamp(104px, 9vw, 124px);
	text-align: left;
	margin: 0;
	padding: 18px clamp(16px, 1.8vw, 24px);
	background: var(--go-white);
	cursor: default;
	transition: background-color .3s ease;
}

.go-tiles.elementor-widget .elementor-icon-list-items .elementor-icon-list-item:nth-child(3n + 2) {
	--go-tile: var(--go-lavender);
	--go-tile-tint: #f3f2fd;
}

.go-tiles.elementor-widget .elementor-icon-list-items .elementor-icon-list-item:nth-child(3n) {
	--go-tile: var(--go-lime);
	--go-tile-tint: #f8ffdb;
}

.go-tiles.elementor-widget .elementor-icon-list-items .elementor-icon-list-item:hover {
	background: var(--go-tile-tint);
}

/* Colour square; the 1 px margin keeps its outline from being clipped. */
.go-tiles .elementor-icon-list-item::before {
	content: "";
	flex: none;
	width: 10px;
	height: 10px;
	margin: 4px 0 0 1px;
	background: var(--go-tile);
	box-shadow: 0 0 0 1px var(--go-ink);
}

.go-tiles.elementor-widget .elementor-icon-list-items .elementor-icon-list-item::after {
	content: none;
}

.go-tiles.elementor-widget .elementor-icon-list-items .elementor-icon-list-item > .elementor-icon-list-text {
	padding: 0;
	color: var(--go-ink);
	font-family: var(--go-font-sans);
	font-size: clamp(15px, 1.2vw, 16px);
	font-weight: 500;
	line-height: 1.25;
	text-wrap: balance;
}

/* 12th cell: decorative go tile (a pseudo-element, so it is not a list item). */
.go-tiles .elementor-icon-list-items::after {
	content: "";
	min-height: clamp(104px, 9vw, 124px);
	background: #fafaf9 url("../icons/go-tile.svg") center / 40px 40px no-repeat;
}

/* ---------- D. CTA strip ---------- */

.e-con.go-model__cta {
	--padding-top: clamp(40px, 5vw, 64px);
	--padding-bottom: clamp(40px, 5vw, 64px);
	--padding-left: var(--go-pad-x);
	--padding-right: var(--go-pad-x);
	--gap: 24px;
	--row-gap: 24px;
}

.e-con > .elementor-widget.go-model__statement {
	flex: 1 1 420px;
}

.go-model__statement .elementor-heading-title {
	text-wrap: balance;
}

/* ---------- Below 1200 px: no diagram (legibility decision), client card spans the row ---------- */

@media (max-width: 1199.98px) {
	.e-con > .elementor-widget-go-hub {
		display: none;
	}

	/* Beats Elementor's `.elementor-{post} .elementor-element.elementor-element-{id}` columns rule. */
	.elementor .elementor-element.e-con.go-model__direction {
		--e-con-grid-template-columns: minmax(0, 1fr);
	}
}

/* ---------- Below 1000 px ---------- */

@media (max-width: 999.98px) {
	.go-tiles .elementor-icon-list-items {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* ---------- Below 640 px ---------- */

@media (max-width: 639.98px) {
	.go-tiles .elementor-icon-list-items {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.go-model__statement br {
		display: none;
	}
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
	.go-dotlist__item,
	.go-hub__link,
	.go-hub__node,
	.go-tiles.elementor-widget .elementor-icon-list-items .elementor-icon-list-item {
		transition: none;
	}
}