/**
 * Shared components (front + editor): section heading, link button,
 * category tag, dot-matrix world map.
 */

/* ---------- Eyebrow — Figma Label/Eyebrow ---------- */

.eyebrow {
	margin: 0;
	color: var(--text-accent);
	font-family: var(--font-body);
	font-size: var(--eyebrow-size);
	font-weight: var(--eyebrow-weight);
	line-height: var(--eyebrow-line);
	letter-spacing: var(--eyebrow-tracking);
	text-transform: uppercase;
}

/* Small red text on black backgrounds: red/300 for AA contrast */
:is(.site-footer, .mobile-menu__contact, .section-heading--dark) .eyebrow,
.section-heading--dark .section-heading__eyebrow {
	color: var(--text-accent-inverse);
}

/* ---------- Section heading — Figma 8-65 ---------- */

.section-heading {
	display: flex;
	gap: var(--space-48);
	align-items: flex-start;
	color: var(--text-primary);
}

.section-heading--dark {
	color: var(--text-inverse);
}

/* Mobile: "01 — Eyebrow" kicker + 44px title (Figma 13-2) */
.section-heading__index {
	display: none;
}

.section-heading__main {
	display: flex;
	flex-direction: column;
	gap: 20px;
	align-items: flex-start;
}

.section-heading__title {
	margin: 0;
	font-family: var(--font-heading);
	font-size: 44px;
	font-weight: var(--h1-weight);
	line-height: 1;
	text-transform: uppercase;
}

@media (min-width: 768px) {

	/* Figma component padding (instances: 32px top/bottom/right) */
	.section-heading {
		padding-block: var(--space-32);
		padding-right: var(--space-32);
	}

	.section-heading__index {
		display: flex;
		flex-direction: column;
		gap: var(--space-16);
		align-items: center;
	}

	.section-heading__number {
		font-family: var(--font-heading);
		font-size: var(--number-section-size);
		font-weight: var(--number-section-weight);
		line-height: var(--number-section-line);
		opacity: 0.25;
	}

	.section-heading__rule {
		width: 2px;
		height: 64px;
		background: var(--bg-accent);
	}

	.section-heading__eyebrow {
		color: var(--text-accent);
		font-size: var(--eyebrow-size);
		font-weight: var(--eyebrow-weight);
		line-height: var(--eyebrow-line);
		letter-spacing: var(--eyebrow-tracking);
		text-transform: uppercase;
		white-space: nowrap;
		writing-mode: vertical-rl;
		transform: rotate(180deg);
	}

	/* The kicker duplicates the index: kept for screen readers only */
	.section-heading__kicker {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}

	.section-heading__title {
		font-size: var(--h1-size);
		line-height: var(--h1-line);
		white-space: nowrap;
	}

	.section-heading__title::after {
		content: "";
		display: block;
		width: 40px;
		height: 3px;
		margin-top: 20px;
		background: currentcolor;
	}
}

/* ---------- Link button — Figma Button / Link ---------- */

.link-button {
	display: inline-flex;
	gap: var(--space-12);
	align-items: center;
	padding-bottom: 6px;
	border-bottom: 1.5px solid var(--border-strong);
	color: var(--text-primary);
	font-size: var(--button-size);
	font-weight: var(--button-weight);
	line-height: var(--button-line);
	letter-spacing: var(--button-tracking);
	text-decoration: none;
	text-transform: uppercase;
	white-space: nowrap;
	transition:
		gap var(--duration-fast) var(--ease-out),
		color var(--duration-fast) var(--ease-out),
		border-color var(--duration-fast) var(--ease-out);
}

.link-button:hover,
.link-button:focus-visible {
	gap: 20px;
	border-color: var(--text-accent);
	color: var(--text-accent);
}

/* ---------- Tag on image — Figma Tag / On image ---------- */

.tag {
	display: inline-block;
	padding: 7px 14px;
	border-radius: var(--radius-full);
	background: var(--bg-accent);
	color: var(--text-inverse);
	font-size: var(--eyebrow-size);
	font-weight: var(--eyebrow-weight);
	line-height: var(--eyebrow-line);
	letter-spacing: var(--eyebrow-tracking);
	text-transform: uppercase;
	white-space: nowrap;
}

/* ---------- Pixel world map (World page + teaser) — Brand assets,
   proposition A (46-3): square pixels, bright red square pins ---------- */

.world-map {
	width: 100%;
	height: auto;
	overflow: visible;
}

/* Small squares filled and stroked in the same colour: the round stroke join
   rounds their corners (stroke width set per map in the SVG). */
.world-map__land {
	fill: var(--icon-inverse);
	stroke: var(--icon-inverse);
	stroke-linejoin: round;
	opacity: 0.38; /* Figma: white at 38% */
}

.world-map--detailed .world-map__land {
	opacity: 0.42; /* finer dots: a touch brighter to keep the same presence */
}

.world-map__halo {
	fill: var(--accent-bright);
	opacity: 0.22;
}

.world-map__dot {
	fill: var(--accent-bright);
}

/* ---------- CTA band — Figma 38-1163 / 32-1440, black version with
   an origami shape (Brand assets, proposition C 46-1339) — blocks + World
   page ---------- */

.cta-band {
	position: relative;
	overflow: hidden;
	border-bottom: 1px solid rgb(255 255 255 / 12%); /* before the black footer */
	background: var(--bg-inverse);
	color: var(--text-inverse);
}

.cta-band__inner {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: var(--space-24);
	align-items: flex-start;
	max-width: calc(var(--container) + 2 * var(--gutter));
	margin-inline: auto;
	padding: var(--space-48) var(--gutter);
}

.cta-band__text {
	display: flex;
	flex-direction: column;
	gap: var(--space-12);
}

.cta-band__title {
	display: flex;
	flex-direction: column;
	font-size: 40px;
	line-height: 1;
}

.cta-band__intro {
	margin: 0;
	font-size: var(--body-m-size);
	line-height: var(--body-m-line);
	opacity: 0.85;
}

.cta-band__actions {
	position: relative;
	z-index: 1;
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-16);
}

.cta-band .button:focus-visible {
	outline-color: var(--icon-inverse);
}

/* Origami shape — flush against the right edge of the viewport (Figma
   38-1163, 32-1440, 12-534): chevron and zigzag take the full band height,
   the ribbon sits in the bottom right corner. The shape lives outside the
   centred container, so it stays on the screen edge at any width.
   --cta-h: band height the shape is drawn for; --cta-ratio: shape
   width / height. The text only reserves room for the part of the shape
   that overlaps the container (wide screens need no reserve). */
.cta-band--has-shape {
	--cta-h: 150px;
	--cta-ratio: 0.757; /* chevron 318 × 420 */
	--cta-shape: calc(var(--cta-h) * var(--cta-ratio));
}

.cta-band--has-shape:has(.origami--zigzag) {
	--cta-ratio: 0.394; /* 165 × 420 */
}

/* Ribbon: fixed width, bottom right corner */
.cta-band--has-shape:has(.origami--ribbon) {
	--cta-shape: 180px;
}

.cta-band__shape {
	position: absolute;
	right: 0;
	bottom: 0;
	z-index: 0;
	display: flex;
	align-items: flex-end;
	justify-content: flex-end;
	height: var(--cta-h);
	line-height: 0;
	pointer-events: none;
}

.cta-band__shape .origami {
	display: block;
	width: auto;
	height: 100%;
}

.cta-band__shape:has(.origami--ribbon) {
	height: auto;
}

.cta-band__shape .origami--ribbon {
	width: var(--cta-shape);
	height: auto;
}

/* Mobile: shape in the bottom right corner, below the buttons */
.cta-band--has-shape .cta-band__inner {
	padding-bottom: calc(var(--cta-h) + var(--space-16));
}

.cta-band--has-shape:has(.origami--ribbon) .cta-band__inner {
	padding-bottom: calc(var(--cta-shape) * 0.393 + var(--space-24));
}

@media (min-width: 768px) {

	.cta-band__inner {
		flex-direction: row;
		gap: var(--space-48);
		align-items: center;
		justify-content: space-between;
		padding-block: var(--space-64);
	}

	.cta-band__title {
		font-size: var(--h2-size);
	}

	.cta-band__intro {
		font-size: var(--body-l-size);
		line-height: var(--body-l-line);
	}

	.cta-band__actions {
		flex-shrink: 0;
	}

	/* From 768px: chevron and zigzag full height on the right */
	.cta-band--has-shape {
		--cta-h: 340px;
	}

	.cta-band--has-shape:has(.origami--ribbon) {
		--cta-shape: 320px;
	}

	.cta-band__shape {
		top: 0;
		height: auto;
	}

	.cta-band__shape:has(.origami--ribbon) {
		top: auto;
	}

	/* Stacked text and buttons, clear of the shape */
	.cta-band--has-shape .cta-band__inner {
		flex-direction: column;
		gap: var(--space-32);
		align-items: flex-start;
		justify-content: center;
		min-height: var(--cta-h);
		padding-right: max(var(--gutter), calc(var(--cta-shape) + var(--space-48) - max(0px, (100vw - var(--container) - 2 * var(--gutter)) / 2)));
		padding-bottom: var(--space-64);
	}

	.cta-band--has-shape:has(.origami--ribbon) .cta-band__inner {
		padding-bottom: calc(var(--cta-shape) * 0.393 + var(--space-24));
	}
}

@media (min-width: 1024px) {

	.cta-band__inner {
		padding-block: var(--space-96);
	}

	.cta-band__title {
		font-size: var(--h1-size);
	}

	.cta-band--large .cta-band__title {
		font-size: var(--display-l-size);
		line-height: var(--display-l-line);
		letter-spacing: var(--display-l-tracking);
	}

	/* Figma: 420px band, chevron 318 × 420, zigzag 165 × 420, ribbon 480 wide */
	.cta-band--has-shape {
		--cta-h: 420px;
	}

	.cta-band--has-shape:has(.origami--ribbon) {
		--cta-shape: 480px;
	}

	.cta-band--has-shape .cta-band__inner {
		padding-bottom: var(--space-96);
	}

	/* Ribbon: the text keeps the full width, the ribbon stays below it */
	.cta-band--has-shape:has(.origami--ribbon) .cta-band__inner {
		padding-right: var(--gutter);
		padding-bottom: calc(var(--cta-shape) * 0.393 + var(--space-24));
	}
}

/* Desktop — shapes as placed in the Figma mockups (decorations v2):
   zigzag turned 90° in the top right corner (World), ribbon in the top right
   corner (Careers); chevron unchanged (full height on the right). */
@media (min-width: 1024px) {

	.cta-band__shape:has(.origami--zigzag) {
		top: 0;
		right: 0;
		bottom: auto;
		width: 420px;
		height: 165px;
	}

	.cta-band__shape .origami--zigzag {
		position: absolute;
		top: 50%;
		left: 50%;
		width: 165px;
		height: 420px;
		transform: translate(-50%, -50%) rotate(90deg);
	}

	.cta-band__shape:has(.origami--ribbon) {
		top: 0;
		right: -40px;
		bottom: auto;
	}

	/* Both shapes now sit above the buttons: no side or bottom reserve */
	.cta-band--has-shape:has(.origami--zigzag) .cta-band__inner,
	.cta-band--has-shape:has(.origami--ribbon) .cta-band__inner {
		padding-right: var(--gutter);
		padding-bottom: var(--space-96);
	}
}

/* Title and buttons side by side once both fit next to the shape */
@media (min-width: 1400px) {

	.cta-band--has-shape .cta-band__inner {
		flex-direction: row;
		gap: var(--space-32);
		align-items: center;
		justify-content: space-between;
	}
}