/* Careers, the redesigned page (19 September 2026). One-URL chrome: the cards are the shared
   .gn-icard, the hero is the shared product hero, the jobs strip is the shared .gn-jobs-panel and
   the A-Team quotes are the homepage's .gn-testimonials. The hiring steps are the About Us
   timeline, copied here by script with five columns; when a third page needs it, promote it to
   style.css (STYLE-NOTES §306). When this page takes over /careers/, rename this file to careers.css. */

/* ---- Hero graphic: a 3 by 3 board of leadership faces (Ed, 21 September). Eight spin and change on hover; the middle is always "You?" ---- */
.gn-team-grid {
	position: relative;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 5%;
	/* A percentage row-gap resolves against an indefinite height as zero when
	   the box is sized, then against the result when the rows are laid out, so the
	   circles overflowed 46px out of the bottom of their own box and the board sat
	   low. aspect-ratio makes the block size definite and the 5% resolves once. */
	aspect-ratio: 1;
	width: 100%;
	max-width: 520px;
	margin: 0 auto;
	perspective: 900px;
}

.gn-team-tile {
	position: relative;
	display: block;
	aspect-ratio: 1;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: none;
	cursor: pointer;
}

.gn-team-face {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	overflow: hidden;
	background: var(--hue);
	box-shadow: 0 10px 26px rgb(from var(--genasys-space-blue) r g b / 0.35);
}

.gn-team-face img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}


.gn-team-tile:focus-visible {
	outline: 3px solid var(--wp--preset--color--white);
	outline-offset: 4px;
}

.gn-team-you {
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: default;
	background: var(--wp--preset--color--white);
	box-shadow: 0 10px 26px rgb(from var(--genasys-space-blue) r g b / 0.35);
	font-family: var(--wp--preset--font-family--heading);
	font-size: clamp(22px, 4vw, 34px);
	font-weight: 700;
	color: var(--wp--preset--color--primary);
}

.gn-team-note {
	position: absolute;
	inset: 50% 0 auto 0;
	translate: 0 -50%;
	z-index: 3;
	margin: 0 6%;
	padding: 22px 26px;
	border-radius: 24px;
	background: var(--wp--preset--color--white);
	box-shadow: 0 18px 44px rgb(from var(--genasys-space-blue) r g b / 0.5);
	text-align: center;
	font-family: var(--wp--preset--font-family--heading);
	font-size: clamp(20px, 3.4vw, 28px);
	font-weight: 700;
	line-height: 1.2;
	color: var(--wp--preset--color--primary);
}

.gn-team-note[hidden] { display: none; }

/* ---- Open roles: the point of the page, so it is big and on its own tinted band, straight after the A-Team quotes ---- */
.gn-cr-roles {
	/* Plain white (Ed, 21 September); its old blue moved to How we hire beneath it. */
	background: none;
}

.gn-cr-roles .gn-cr-head { margin-bottom: 36px; }

.gn-cr-roles .gn-cr-head h2 {
	font-size: 52px;
	line-height: 1.05;
}

.gn-cr-count {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 40px auto 0 !important;
	padding: 9px 20px;
	border-radius: 999px;
	background: var(--wp--preset--color--white);
	box-shadow: 0 4px 16px var(--shadow-mid);
	font-size: 17px !important;
	font-weight: 700;
	color: var(--wp--preset--color--ink);
}

.gn-cr-count::before {
	content: "";
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--wp--preset--color--cta);
}

.gn-cr-roles .gn-cr-head { display: flex; flex-direction: column; align-items: center; }

.gn-cr-roles .gn-jobs-panel {
	max-width: 1140px;
	margin: 0 auto;
	padding: 4px 64px 0;
	background: none;
	border-radius: 0;
}

/* Three cards across, exactly, with the arrows in the gutters either side. */
.gn-cr-roles .gn-jobs-panel .wp-block-post {
	flex: 0 0 calc((100% - 56px) / 3);
	/* The strip scrolls sideways, so it clips its own shadows. Room for a downward shadow below the
	   cards, and a shadow that falls mostly downward, so nothing is cut at the sides. */
	box-shadow: 0 22px 30px -16px var(--shadow-mid), 0 4px 10px -4px var(--shadow-soft);
}

.gn-cr-roles .gn-jobs-panel .wp-block-post-template { padding: 16px 0 64px; margin: -16px 0 -40px; }
/* An absolutely positioned child's offset is measured from the panel's own edge, not inside
   its padding, so left:0/right:0 sat exactly on the panel's overflow-x:clip boundary and cut
   the shadow off. A small inset gives the shadow room to show. */
.gn-cr-roles .gn-jobs-arrow { width: 52px; height: 52px; top: calc(50% - 20px); }
.gn-cr-roles .gn-jobs-arrow--left { left: 14px; }
.gn-cr-roles .gn-jobs-arrow--right { right: 14px; }
.gn-cr-roles .gn-jobs-panel .wp-block-post-title { font-size: 21px; }

/* ---- A standalone blurb from the Chief of People, above the A-Team quotes ---- */
.gn-cr-blurb {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 40px;
	max-width: 1000px;
	/* 60px above (to the intro text) and 60px below (to the top of the first card, which sits 35px inside its row). */
	margin: 60px auto 25px;
	padding: 0 20px;
	text-align: left;
	color: var(--wp--preset--color--white);
}

.gn-cr-blurb img {
	flex: none;
	box-sizing: border-box;
	width: 190px;
	height: 190px;
	padding: 5px;
	border-radius: 50%;
	object-fit: cover;
	background: var(--wp--preset--color--white);
	border: 6px solid var(--wp--preset--color--cta-hover);
	box-shadow: 0 8px 24px var(--shadow-strong);
}

.gn-cr-blurb blockquote {
	margin: 0 0 18px;
	padding: 0;
	border: 0;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 20px;
	font-weight: 700;
	line-height: 1.35;
	color: var(--wp--preset--color--white);
}

.gn-cr-blurb blockquote::before { content: "\201C"; }
.gn-cr-blurb blockquote::after { content: "\201D"; }

@media (max-width: 700px) {
	.gn-cr-blurb { flex-direction: column; text-align: center; gap: 22px; }
	.gn-cr-blurb img { width: 150px; height: 150px; }
	.gn-cr-blurb blockquote { font-size: 18px; }
}

.gn-testimonials .gn-cr-blurb figcaption,
.gn-testimonials .gn-cr-blurb figcaption span {
	/* the theme mutes every figcaption; this one sits on the dark band */
	color: rgb(from var(--genasys-white) r g b / 0.85);
	font-size: 15px;
}

.gn-testimonials .gn-cr-blurb figcaption { display: block; text-align: left !important; }
@media (max-width: 700px) { .gn-cr-blurb figcaption { text-align: center; } }

.gn-cr-blurb figcaption strong {
	font-size: 17px;
	color: var(--wp--preset--color--white);
}

/* The homepage testimonials use black and white portraits, with the colour carried by the ring. Same here. */
.gn-testimonials .gn-testimonials-avatar img { filter: grayscale(1); }

/* Section headings are --gn-section-heading across the site; the shared testimonials heading is 32px, so match it here. */
.gn-testimonials .gn-testimonials-header h2 { font-size: var(--gn-section-heading); line-height: 1.1; }
.gn-testimonials .gn-testimonials-header .gn-testimonials-body { max-width: 760px; margin-left: auto; margin-right: auto; line-height: 1.6; }

/* The A-Team rows pause when the pointer is over them, so the pause button is dropped here (Ed, 21 September). */
.gn-testimonials .gn-testimonials-pause { display: none; }

/* ---- Values: copied from the About Us page by script, renamed gn-cr-. Promote to style.css when a third page wants them (STYLE-NOTES §312). ---- */
/* ---- Mission and values: words on the left, signs on the right ---- */
/* The same background as the homepage "Insurance software chosen by" section:
   white at the top fading to a Steel Blue tint by 70% down and holding it to the edge, so it still shows now that the dark awards band sits directly beneath it. */
.gn-cr-values {
	/* White (Ed, 21 September): no fill and no padding of its own, so the theme margin above and below is the same 115px of white either side. */
	background: none;
}






@media (max-width: 860px) {
	/* Touch has no hover, so the value signs stay open. */
}


@media (prefers-reduced-motion: reduce) {
}

.gn-cr-values-copy h2 { margin-bottom: 20px; }

/* What you get: on white (Ed). */
.gn-cr-benefits.gn-painted {
	padding-block: var(--gn-section-space);
	background: var(--wp--preset--color--white);
}

/* ---- How we hire: the About Us timeline, five steps ---- */
.gn-cr-hire.gn-painted {
	padding-block: var(--gn-section-space) 0;   /* the gradient ends in white, so the bottom edge is unpainted: no padding there */
	background: linear-gradient(180deg, rgb(from var(--genasys-steel-blue) r g b / 0.3) 0%, rgb(from var(--genasys-steel-blue) r g b / 0.18) 45%, var(--wp--preset--color--white) 100%);
}
.gn-cr-hire .gn-cr-head { margin-bottom: 28px; }

.gn-cr-tl-panel .gn-cr-tl-list { align-self: center; margin: 0; padding: 22px 32px 22px 36px; }
@media (max-width: 860px) { .gn-cr-tl-panel .gn-cr-tl-list { padding-left: 22px; } }   /* text lines up with the step heading above it */
.gn-cr-tl-list li { margin: 0 !important; padding-left: 0; }   /* no dot here (hidden below), so no room kept for one */
.gn-cr-tl-list li::after { display: none !important; }
.gn-cr-tl-list li::before { display: none !important; }


/* The step colour modifiers live in style.css, with the rule that reads them. */

.gn-cr-tl-track { --tl-count: 5; }

/* One gradient for the whole line. Each blob's colour stays solid until 4px
   past the blob's real edge (measured from the artwork), then blends into the
   next blob's colour, arriving 4px before that blob's edge. Centres sit at
   10%, 30%, 50%, 70% and 90%. */
/* The line repeats, in order, the gn-hue-* class on each era in the page
   content (now purple, accent, cta-hover, cta, ink). A gradient cannot read its eras'
   colours, so change an era's class and change its stops here too.
   Checked in the browser 26 September 2026: they match. */
.gn-cr-tl-track::before {
	background: linear-gradient(90deg,
		var(--wp--preset--color--purple) 0,
		var(--wp--preset--color--purple) calc(10% + var(--tl-blob) * 0.4 + 4px),
		var(--wp--preset--color--accent) calc(30% - var(--tl-blob) * 0.41 - 4px),
		var(--wp--preset--color--accent) calc(30% + var(--tl-blob) * 0.4 + 4px),
		var(--wp--preset--color--cta-hover) calc(50% - var(--tl-blob) * 0.41 - 4px),
		var(--wp--preset--color--cta-hover) calc(50% + var(--tl-blob) * 0.4 + 4px),
		var(--wp--preset--color--cta) calc(70% - var(--tl-blob) * 0.41 - 4px),
		var(--wp--preset--color--cta) calc(70% + var(--tl-blob) * 0.4 + 4px),
		var(--wp--preset--color--ink) calc(90% - var(--tl-blob) * 0.41 - 4px),
		var(--wp--preset--color--ink) 100%);
}






@media (max-width: 860px) {
}

@media (prefers-reduced-motion: reduce) {
}

@media (max-width: 1024px) {
	.gn-cr-roles .gn-jobs-panel { padding: 4px 20px 0; }
	.gn-cr-roles .gn-jobs-panel .wp-block-post { flex-basis: min(340px, 82%); }
	.gn-cr-roles .gn-jobs-arrow { display: none; }
	.gn-cr-roles .gn-cr-head h2 { font-size: 40px; }
}

@media (max-width: 600px) {
	.gn-cr-roles .gn-cr-head h2 { font-size: 36px; }
}

/* §435 in STYLE-NOTES.md (repo root): phones show one role at a time, centred,
   with previous, pause and next in one row under it. */
@media (max-width: 600px) {
	.gn-cr-roles .gn-jobs-panel .wp-block-post { flex-basis: 100%; }
	.gn-cr-roles .gn-jobs-panel .wp-block-post-template { scroll-snap-type: x mandatory; }
	.gn-cr-roles .gn-jobs-panel .wp-block-post-template > li { scroll-snap-align: center; }
	.gn-cr-roles .gn-jobs-arrow {
		display: flex;
		top: auto;
		bottom: 0;
		width: 40px;
		height: 40px;
	}
	/* The script sets the left arrow's turn inline, with the old vertical centring. */
	.gn-cr-roles .gn-jobs-arrow--left { left: calc(50% - 76px); transform: rotate(180deg) !important; }
	.gn-cr-roles .gn-jobs-arrow--right { right: calc(50% - 76px); transform: none !important; }
	.gn-cr-roles .gn-jobs-arrow svg { width: 18px; height: 18px; }
	.gn-cr-roles .gn-jobs-arrow[disabled] { opacity: 0.35; pointer-events: none; }
}