/* ---------------------------------------------------------------------------
   Careers 2026 — page-specific
   ---------------------------------------------------------------------------
   Depends on rb26-core.css. Three components the other pages do not use:
   pull quotes, the regional benefits columns, and the facts grid.
   --------------------------------------------------------------------------- */

/* Pull quotes ----------------------------------------------------------- */
.rb26-quotes {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: 22px;
	margin-bottom: 8px;
}
.rb26-quote {
	background: var(--rb-white);
	border: 1px solid var(--rb-hairline);
	border-radius: var(--rb-radius);
	padding: 34px 32px;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 20px;
}
/* Oversized opening quote mark, set in the accent rather than the text colour
   so it reads as a mark and not as a stray character. */
.rb26-quote blockquote {
	position: relative;
	margin: 0;
	padding-top: 26px;
	font-size: 17px;
	line-height: 1.66;
	color: var(--rb-body);
}
.rb26-quote blockquote::before {
	content: "\201C";
	position: absolute;
	top: -14px;
	left: -4px;
	font-size: 64px;
	line-height: 1;
	color: var(--rb-light-blue);
	font-weight: 700;
}
.rb26-quote figcaption {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin-top: auto;
}
.rb26-quote figcaption strong {
	font-size: 16px;
	font-weight: 700;
	color: var(--rb-ink);
}
.rb26-quote figcaption span {
	font-size: 14px;
	color: var(--rb-body);
}

/* Benefits -------------------------------------------------------------- */
.rb26-benefits {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 22px;
}
.rb26-benefit {
	background: var(--rb-white);
	border: 1px solid var(--rb-hairline);
	border-radius: var(--rb-radius);
	padding: 30px 28px;
}
/* Region name gets a rule under it — these are three parallel lists and the
   heading is the only thing distinguishing them. */
.rb26-benefit h3 {
	font-size: 20px;
	font-weight: 800;
	color: var(--rb-ink);
	padding-bottom: 14px;
	margin-bottom: 18px;
	border-bottom: 2px solid var(--rb-medium-blue);
}
.rb26-benefit ul {
	display: flex;
	flex-direction: column;
	gap: 11px;
}
.rb26-benefit li {
	position: relative;
	padding-left: 18px;
	font-size: 15.5px;
	line-height: 1.55;
}
.rb26-benefit li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 9px;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--rb-medium-blue);
}

/* Facts ----------------------------------------------------------------- */
.rb26-facts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: 20px;
}
.rb26-fact {
	background: var(--rb-white);
	border: 1px solid var(--rb-hairline);
	border-radius: var(--rb-radius);
	padding: 28px 26px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
/* Icon above each fact's figure (rb26_careers_fact_icon() in
   template-careers.php) — added per edit request 2026-09-03; these cards
   previously had no icon in the markup at all. */
.rb26-fact-icon {
	display: block;
	width: 28px;
	height: 28px;
	color: var(--rb-medium-blue);
	margin-bottom: 4px;
}
.rb26-fact-icon svg {
	width: 100%;
	height: 100%;
}
.rb26-fact p {
	font-size: 15px;
	line-height: 1.55;
	margin-top: 4px;
}
.rb26-fact .rb26-stat-label {
	font-size: 16px;
	color: var(--rb-ink);
	font-weight: 700;
}