/* ---------------------------------------------------------------------------
   ESG hub + pillar detail pages — page-specific
   ---------------------------------------------------------------------------
   Depends on rb26-core.css. Shared by template-esg.php (the /esg/ hub) and
   template-esg-pillar.php (the four "Learn more" detail pages) — both pull
   from the same four-pillar content, so their components live in one file
   rather than being duplicated across two.
   --------------------------------------------------------------------------- */

/* Topic jump-links in the pillar hero (photo background, white text) — same
   idea as the shared .rb26-anchornav, but that component is styled for a
   light section background; this is its dark/photo-hero equivalent. */
.rb26-esg-topicnav {
	display: flex;
	flex-wrap: wrap;
	gap: 28px;
	margin-top: 40px;
}
.rb26-esg-topicnav a {
	display: block;
	padding-top: 16px;
	border-top: 3px solid rgba(255, 255, 255, 0.4);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--rb-white);
	transition: border-color 0.3s var(--rb-ease);
}
.rb26-esg-topicnav a:hover,
.rb26-esg-topicnav a:first-child {
	/* Light blue per edit request 2026-09-01 (was var(--rb-orange)). */
	border-top-color: var(--rb-light-blue);
}

/* Flat dark band — the hub's "Our Commitment" intro and the closing
   report/investor CTA shared by every pillar page. Deliberately plain
   (var(--rb-ink), not the blue hero gradient) to match the source's neutral
   dark-grey treatment rather than reading as another hero. */
.rb26-section--dark {
	background: var(--rb-ink);
	color: var(--rb-white);
}
.rb26-section--dark .rb26-eyebrow {
	color: var(--rb-white);
	opacity: 0.7;
}
.rb26-section--dark .rb26-h2 {
	color: var(--rb-white);
}
.rb26-section--dark .rb26-section-head {
	text-align: center;
	max-width: 68ch;
	margin: 0 auto;
}
.rb26-section--dark .rb26-section-head p {
	font-size: 19px;
	color: rgba(255, 255, 255, 0.85);
}

/* "Our Commitment" intro, now this section's own header rather than a
   standalone section above it (per edit request 2026-09-03) — sized up
   from the shared .rb26-section-head p default (19px), which read as too
   small for what's effectively the pillars section's lead paragraph. */
#pillars .rb26-section-head p {
	font-size: 21px;
}

/* Hub — four pillar cards. */
.rb26-pillars {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
	margin-top: 8px;
}
.rb26-pillar {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--rb-hairline);
	border-radius: var(--rb-radius);
	overflow: hidden;
	background: var(--rb-white);
	transition: transform 0.3s var(--rb-ease), box-shadow 0.3s var(--rb-ease);
}
.rb26-pillar:hover {
	transform: translateY(-4px);
	box-shadow: var(--rb-shadow-lift);
}
.rb26-pillar-image {
	aspect-ratio: 4 / 3;
}
.rb26-pillar-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.rb26-pillar-body {
	padding: 22px 22px 26px;
	display: flex;
	flex-direction: column;
	flex: 1;
}
.rb26-pillar-eyebrow {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	/* Blue per edit request 2026-09-01 (was var(--rb-orange)) — matches the
	   shared .rb26-eyebrow's default color used everywhere else on the site. */
	color: var(--rb-medium-blue);
	margin-bottom: 10px;
}
.rb26-pillar-body h3 {
	font-size: 18px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--rb-ink);
	margin: 0 0 12px;
}
.rb26-pillar-body p {
	font-size: 14.5px;
	color: var(--rb-body);
	margin: 0 0 16px;
}
.rb26-pillar-body .rb26-ticks {
	margin-bottom: 20px;
}
.rb26-pillar-body .rb26-link {
	margin-top: auto;
	align-self: center;
}

/* Leadership quote band — photo background, scrimmed like .rb26-pagehead. */
.rb26-esg-quote {
	position: relative;
	overflow: hidden;
	padding: 100px 0;
	color: var(--rb-white);
}
.rb26-esg-quote-bg {
	position: absolute;
	inset: 0;
	z-index: 0;
}
.rb26-esg-quote-bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.rb26-esg-quote-bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, rgba(4, 12, 26, 0.92) 0%, rgba(4, 12, 26, 0.8) 100%);
}
.rb26-esg-quote .rb26-shell {
	position: relative;
	z-index: 1;
}
.rb26-esg-quote blockquote {
	margin: 0 0 24px;
	font-size: clamp(22px, 2.6vw, 32px);
	font-weight: 700;
	line-height: 1.35;
	max-width: 78ch;
}
.rb26-esg-quote-label {
	/* Bare <span> inside a plain block div — margin-bottom was a no-op
	   without this, same bug as .rb26-esg-impact-label (fixed 2026-09-02).
	   Found via a full-theme audit for the same pattern. */
	display: block;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.7);
	margin-bottom: 36px;
}
.rb26-esg-quote-ctas {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
}

/* Pillar detail page — the three topic sections. Each has an optional image
   (sections 1 and 3) or is full-width copy alone (section 2, no image
   supplied in the source for any of the four pillars). --reverse puts the
   image on the right instead of the left.
   Briefly changed to a stacked layout (2026-09-01) to fix the same dead-
   space problem a side-by-side grid causes when the image and copy are very
   different heights; reverted the same day (2026-09-02) in favor of
   flowing long paragraphs into 2 sub-columns instead (.rb26-esg-body below)
   so the side-by-side layout could stay. */
.rb26-esg-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 56px;
	align-items: center;
}
/* The image column can carry extra content stacked below the photo itself
   (a section's optional 'image_footer' blocks, e.g. a callout or a short
   stat paragraph) — added 2026-09-02 to fill the empty space a short image
   otherwise leaves next to much taller copy. Rounding/clipping moved to
   the new .rb26-esg-row-image-photo wrapper so it only affects the photo,
   not whatever's stacked under it. */
.rb26-esg-row-image {
	display: flex;
	flex-direction: column;
	gap: 24px;
}
.rb26-esg-row-image-photo {
	border-radius: var(--rb-radius);
	overflow: hidden;
}
/* .rb26-esg-callout's own margin is meant to space it from surrounding
   copy-column text; here it's the only thing below the photo, so that
   margin would just add unwanted space on top of the flex gap above and
   dead space below it. */
.rb26-esg-row-image .rb26-esg-callout {
	margin: 0;
}
/* Same problem, same fix, for an 'impact' block used as image_footer (e.g.
   Circular Economy's "Impact stories") — .rb26-esg-impact-label's own
   36px top margin was stacking on top of the 24px flex gap above, per
   edit request 2026-09-02. Bottom margin (label-to-list spacing) is kept. */
.rb26-esg-row-image .rb26-esg-impact-label {
	margin-top: 0;
}
.rb26-esg-row-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.rb26-esg-row--reverse .rb26-esg-row-image {
	order: 2;
}
.rb26-esg-row--full {
	grid-template-columns: 1fr;
	max-width: 78ch;
}
/* A section's optional 'full_after' content — rendered as a sibling of
   .rb26-esg-row rather than inside it, so it spans the whole shell width
   across both grid columns instead of being confined to one. Added per
   edit request 2026-09-02 for Environmental Management's 10-item
   "Strategic Approach" callout, too much content for a half-width column
   next to its image. */
.rb26-esg-row-fullafter {
	margin-top: 28px;
}
/* Small heading above a 'stat_cards' block (rb26_esg_render_block()) —
   bold and a touch larger than body copy, but not the all-caps small-caps
   treatment .rb26-esg-impact-label uses, since this is a full descriptive
   sentence rather than a short label like "Impact story". */
.rb26-stat-cards-title {
	font-size: 16px;
	font-weight: 700;
	color: var(--rb-ink);
	margin: 0 0 16px;
}
/* "Our Strategic Approach" de-boxed per edit request 2026-09-02 — left
   aligned flush with the rest of the column's text instead of the
   shared .rb26-esg-callout's tinted, padded box. */
#climate-change .rb26-esg-row-copy .rb26-esg-callout {
	background: none;
	padding: 0;
	border-radius: 0;
}
/* 'feature_grid' (rb26_esg_render_block()) — a titled row of equal
   title+description cards, added per edit request 2026-09-02 for
   Climate Change's "Circular Connection" (previously a checkmark list
   boxed in a callout, confined to the half-width image column). White
   cards read cleanly against this section's tinted background. */
.rb26-esg-featuregrid-title {
	font-size: 22px;
	font-weight: 800;
	color: var(--rb-ink);
	margin: 0 0 10px;
}
.rb26-esg-featuregrid-lead {
	font-size: 16px;
	line-height: 1.6;
	color: var(--rb-body);
	max-width: 78ch;
	margin: 0 0 24px;
}
.rb26-esg-featuregrid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 22px;
}
.rb26-esg-featurecard {
	background: var(--rb-white);
	border: 1px solid var(--rb-hairline);
	border-radius: var(--rb-radius);
	padding: 24px 26px;
}
.rb26-esg-featurecard h4 {
	font-size: 16px;
	font-weight: 700;
	color: var(--rb-ink);
	margin: 0 0 8px;
	padding: 0;
}
.rb26-esg-featurecard p {
	font-size: 15px;
	line-height: 1.6;
	color: var(--rb-body);
	margin: 0;
}
.rb26-esg-row-copy .rb26-eyebrow {
	/* Blue per edit request 2026-09-01 (was var(--rb-orange)) — matches the
	   shared .rb26-eyebrow default used everywhere else on the site. */
	color: var(--rb-medium-blue);
}

/* Trusted Marketplace only, per edit request 2026-09-02: top-align the
   image with the section heading instead of centering it against the
   copy column's full height. */
.rb26-page--trust-and-security .rb26-esg-row,
.rb26-page--sustainability .rb26-esg-row,
.rb26-page--talent-and-people .rb26-esg-row {
	align-items: start;
}

/* Small image row — Empowered People's "ERN in Action" logos (no captions)
   and Thriving Communities' four focus-area photos (captioned). */
.rb26-esg-icongrid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
	gap: 16px;
	margin: 20px 0 26px;
}
/* Empowered People's 6 ERN logos, fixed at 3 across (2 rows) per edit
   request 2026-09-01 — scoped to this pillar only, not the shared
   auto-fit default Thriving Communities' 4 captioned photos still use.
   Gap trimmed 2026-09-02 once this grid moved into the narrower
   image_footer column — 16px read as too much air at that width. */
.rb26-page--talent-and-people .rb26-esg-icongrid {
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
}
/* Same-day follow-up: logos read too large filling the full cell width
   edge to edge. Capped smaller and given room around them via padding on
   the cell rather than shrinking the cell itself (which would just let the
   next logo crowd in closer).
   Padding trimmed further 2026-09-02, same reason as the grid gap above. */
.rb26-page--talent-and-people .rb26-esg-icon {
	padding: 10px;
}
.rb26-page--talent-and-people .rb26-esg-icon img {
	max-width: 110px;
}
.rb26-esg-icon {
	text-align: center;
}
.rb26-esg-icon img {
	width: 100%;
	height: auto;
	margin-bottom: 8px;
}
/* Thriving Communities' focus-area icons (inline SVG, see
   rb26_esg_focus_icon() in template-esg-pillar.php) — sized the same way
   the raster images they replaced were, but colour needs setting directly
   since stroke="currentColor" has nothing to inherit from .rb26-esg-icon. */
.rb26-esg-icon svg {
	width: 100%;
	height: auto;
	margin-bottom: 8px;
	color: #97a3b0;
}
/* Thriving Communities' Community Impact topic has no image (--full), so
   its row inherited the shared 78ch measure meant for a column of running
   text — too narrow for a 4-up icon grid. Widened per edit request
   2026-09-02 (80%, then 85%, then the full row same day), with the icons
   themselves capped so they don't grow to fill the extra width edge to
   edge. */
#community-impact .rb26-esg-row--full {
	max-width: none;
}
/* Trust & Security's Data Security & Privacy topic has no image (--full),
   so it inherits the shared 78ch measure meant for a column of running
   text — reading as roughly 60% of the shell width. Widened to 80% per
   edit request 2026-09-02, same fix as Community Impact above. */
#data-security .rb26-esg-row--full {
	max-width: 80%;
}
/* Empowered People's Talent & Development topic has no image (--full)
   either. Per edit request 2026-09-02, this one goes the full width like
   Community Impact, not a percentage cap like Data Security. */
#talent-development .rb26-esg-row--full {
	max-width: none;
}
/* Thriving Communities only has 2 topics (unlike every other pillar's 3),
   so the shared .rb26-section padding (104px top+bottom) left an unusually
   large 208px gap between them. Tightened per edit request 2026-09-02 —
   both sides of that one boundary, but not Community Impact's own bottom
   padding, so the gap before the closing dark CTA below it is untouched. */
#economic-opportunity {
	padding-bottom: 56px;
}
#community-impact {
	padding-top: 56px;
}
/* Empowered People's three topics each carry the shared .rb26-section
   104px top+bottom padding, reading as too much space between them per
   edit request 2026-09-02. Follow-up same day: only the *following*
   section's padding-top had been trimmed, leaving the *preceding*
   section's own untouched 104px bottom padding still visible as dead
   space (most obvious on tinted Talent & Development, where it read as
   part of that section's own box rather than the gap to the next one) —
   now trimmed on both sides of each of the 2 boundaries. Health & Safety's
   own bottom padding is left alone, same reasoning as Community Impact
   above (gap before the closing dark CTA). */
#dei-belonging {
	padding-bottom: 56px;
}
#talent-development {
	padding-top: 56px;
	padding-bottom: 56px;
}
#health-safety {
	padding-top: 56px;
}
/* Trusted Marketplace's three topics, same tightening as every other
   pillar per edit request 2026-09-02. Governance's own bottom padding is
   left alone (gap before the closing dark CTA). */
#customer-experience {
	padding-bottom: 56px;
}
#data-security {
	padding-top: 56px;
	padding-bottom: 56px;
}
#governance {
	padding-top: 56px;
}
/* Sustainable Future's Environmental Management lost its image (moved to
   Climate Change, see template-esg-pillar.php) per edit request
   2026-09-02, so it's now a --full row too — widened to match its
   already-full-width 'full_after' callout below, rather than leaving the
   heading/lead narrower than the callout underneath them. */
#environmental-management .rb26-esg-row--full {
	max-width: none;
}
#community-impact .rb26-esg-icon img,
#community-impact .rb26-esg-icon svg {
	max-width: 64px;
}
/* A little more room under these two topic headings than the shared
   .rb26-h3 default gives every pillar page, per edit request 2026-09-02. */
#economic-opportunity .rb26-h3,
#community-impact .rb26-h3,
#customer-experience .rb26-h3 {
	margin-bottom: 24px;
}
/* A bit more room after Customer Experience's lead sentence, before the
   bullet list, per edit request 2026-09-02. */
#customer-experience .rb26-esg-lead {
	margin-bottom: 32px;
}
.rb26-esg-icon span {
	display: block;
	font-size: 13px;
	font-weight: 700;
	color: var(--rb-ink);
}

/* The lead sentence under each topic heading. Source set this off with an
   orange left rule throughout every pillar page; removed per edit request
   2026-09-01, along with the padding-left it existed to justify. */
.rb26-esg-lead {
	font-size: 17px;
	line-height: 1.6;
	color: var(--rb-body);
	/* !important per edit request 2026-09-02 — reported with no visible
	   gap below this element despite the rule above being correct and
	   nothing in this file overriding it. The parent theme's dynamic
	   customizer CSS (nimva/css/additional_styles.php, inlined in <head>
	   after this stylesheet) is the documented culprit for this class of
	   bug elsewhere in this file's own docblock (heading colors); forcing
	   it here rather than continuing to hunt for the exact competing
	   rule blind, without page access to inspect computed styles. */
	margin: 18px 0 22px !important;
}
.rb26-section--dark .rb26-esg-lead,
.rb26-esg-row--on-dark .rb26-esg-lead {
	color: rgba(255, 255, 255, 0.88);
}

.rb26-esg-body p {
	margin: 0 0 16px !important;
	color: var(--rb-body);
	line-height: 1.65;
}
.rb26-esg-body .rb26-ticks {
	margin: 0 0 20px;
}
/* More room between Governance's own paragraphs specifically, per edit
   request 2026-09-02 — the default 16px (.rb26-esg-body p above) read as
   too tight for this section's back-to-back paragraphs. */
#governance .rb26-esg-body p {
	margin-bottom: 24px;
}

/* Highlighted callout — the source's peach "governance program" boxes and
   equivalent asides on the other three pillars. Red left rule removed per
   edit request 2026-09-01; border-radius restored to all four corners now
   that there's no flush-left line for the flat corners to meet. */
.rb26-esg-callout {
	background: var(--rb-tint);
	border-radius: var(--rb-radius);
	padding: 24px 26px;
	margin: 22px 0;
}
.rb26-esg-callout h4 {
	font-size: 16px;
	font-weight: 700;
	/* Matches .rb26-pillar-body h3 above and every other bold heading of
	   this size on the site — this one had no explicit line-height, so a
	   multi-line title (e.g. "Our Customer Experience Governance Program
	   defines...") fell back to body copy's much looser 1.6, reading too
	   tall. Per edit request 2026-09-02. */
	line-height: 1.3;
	color: var(--rb-ink);
	margin: 0 0 12px;
	padding: 0;
}
.rb26-esg-callout .rb26-ticks {
	margin: 0;
}

/* "Impact story" / "Impact stories" aside — set off from the surrounding
   copy by its own small caps label, not a box (the source never boxes
   these, unlike the callouts above). */
.rb26-esg-impact-label {
	/* The actual bug behind two straight failed margin bumps below: this
	   renders as a bare <span>, and margin-top/bottom do nothing on an
	   inline element. block (or eyebrow's inline-block) is required for
	   the margin to have any effect at all — found 2026-09-02. */
	display: block;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	/* Blue per edit request 2026-09-01 (was var(--rb-orange)) — same small-caps
	   label treatment as the section eyebrows above, kept consistent. */
	color: var(--rb-medium-blue);
	/* Top bumped from 22px per edit request 2026-09-02 — read as running
	   straight on from whatever's above (a list with no bottom margin of
	   its own) instead of a clear paragraph break. Bottom bumped from
	   10px the same day, same reasoning but for the text right after the
	   label. */
	margin: 36px 0 16px;
}

/* Closing stat line(s) — bold, slightly larger than body copy, no box. */
.rb26-esg-stats p {
	font-weight: 700;
	color: var(--rb-ink);
	margin: 18px 0 0;
}
.rb26-section--dark .rb26-esg-stats p {
	color: var(--rb-white);
}

/* Closing CTA — heading on one side, two buttons on the other, shared by the
   hub and all four pillar pages. */
.rb26-esg-cta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 28px;
}
.rb26-esg-cta h2 {
	font-size: 24px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--rb-white);
	margin: 0;
	max-width: 46ch;
}
/* Every pillar page now centers the closing CTA's heading and buttons
   per edit requests 2026-09-02 (Trusted Marketplace, Thriving
   Communities, Empowered People, then Sustainable Future last), instead
   of the original shared left/right split. */
.rb26-page--community .rb26-esg-cta,
.rb26-page--talent-and-people .rb26-esg-cta,
.rb26-page--trust-and-security .rb26-esg-cta,
.rb26-page--sustainability .rb26-esg-cta {
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
}
.rb26-page--community .rb26-esg-cta h2,
.rb26-page--talent-and-people .rb26-esg-cta h2,
.rb26-page--trust-and-security .rb26-esg-cta h2,
.rb26-page--sustainability .rb26-esg-cta h2 {
	max-width: 100%;
}
.rb26-page--community .rb26-esg-cta-btns,
.rb26-page--talent-and-people .rb26-esg-cta-btns,
.rb26-page--trust-and-security .rb26-esg-cta-btns,
.rb26-page--sustainability .rb26-esg-cta-btns {
	justify-content: center;
}
.rb26-esg-cta-btns {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
}

@media (max-width: 900px) {
	.rb26-pillars {
		grid-template-columns: repeat(2, 1fr);
	}
	.rb26-page--talent-and-people .rb26-esg-icongrid {
		grid-template-columns: repeat(2, 1fr);
	}
	.rb26-esg-row {
		grid-template-columns: 1fr;
	}
	.rb26-esg-row--reverse .rb26-esg-row-image {
		order: 0;
	}
}
@media (max-width: 620px) {
	.rb26-pillars {
		grid-template-columns: 1fr;
	}
	.rb26-esg-cta {
		flex-direction: column;
		align-items: flex-start;
	}
	.rb26-esg-featuregrid {
		grid-template-columns: 1fr;
	}
}