/* ---------------------------------------------------------------------------
   About 2026 — page-specific
   ---------------------------------------------------------------------------
   Depends on rb26-core.css. Everything here is new in v2 (2026-08-24): the
   hero stats bar, the Global Presence map card, award captions, and the
   Leadership/Board "cat box" links. v1's "other brands" logo wall is gone —
   dropped along with the section that used it.
   --------------------------------------------------------------------------- */

/* Hero spacing / paragraph width (2026-08-24 feedback) -------------------- */
#rb26-about .rb26-pagehead-lead {
	margin-top: 32px;
	max-width: 78ch;
}
#rb26-about .rb26-section-head {
	max-width: 900px;
}

/* "Investor relations" hero CTA uses the shared .rb26-btn--white component
   (rb26-core.css) directly in its markup as of 2026-08-24 — see that file's
   "Colour variants" section. No page-specific override needed here anymore. */

/* Hero stats bar --------------------------------------------------------
   Was a standalone .rb26-stats section in v1 (light background, boxed
   cards) — now inside the dark gradient hero itself, so it needs its own
   light-on-dark treatment rather than the light-section .rb26-stat card. */
.rb26-statsbar {
	margin-top: 48px;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	background: rgba(255, 255, 255, 0.06);
	border-top: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: var(--rb-radius);
	overflow: hidden;
}
.rb26-statsbar-cell {
	padding: 24px 26px;
	border-right: 1px solid rgba(255, 255, 255, 0.14);
}
.rb26-statsbar-cell:last-child {
	border-right: none;
}
.rb26-statsbar-figure {
	display: block;
	font-size: clamp(24px, 2.6vw, 30px);
	font-weight: 800;
	letter-spacing: -0.02em;
	color: var(--rb-white);
	font-variant-numeric: tabular-nums;
}
.rb26-statsbar-label {
	display: block;
	margin-top: 4px;
	font-size: 13px;
	color: rgba(255, 255, 255, 0.82);
}
/* These labels come from inc/rb26-stats.php's shared lowercase defaults
   ("countries served", etc.) — capitalized here to match the sentence-case
   labels used in the Global Presence reason-row just below on this same
   page, without touching the shared defaults Careers also reads from. */
.rb26-statsbar-label::first-letter {
	text-transform: uppercase;
}

/* Global Presence map card ------------------------------------------------
   Was a server-rendered images/world-map.svg with JS-drawn region pins and
   its own text legend (see git history before 2026-08-28); replaced per
   that day's edit request with a supplied static photo that already has a
   legend baked into the image itself, so the card is now just a padded
   frame around a photo. */
.rb26-mapcard {
	background: var(--rb-grad-3);
	border-radius: var(--rb-radius);
	padding: 36px 36px 28px;
	color: var(--rb-white);
	margin-top: 32px;
}
.rb26-mapcard-photo {
	width: 100%;
	overflow: hidden;
	border-radius: 8px;
}
.rb26-mapcard-photo img {
	display: block;
	width: 100%;
	height: auto;
}

/* How It Started (2026-08-28) — Dave Ritchie's photo alongside the origin
   story. New, self-contained component: no existing photo+text layout on
   this page fit a single portrait photo (.rb26-splits is full-bleed photo
   tiles built for the homepage carousel; .rb26-catbox is an icon, not a
   photo). ------------------------------------------------------------- */
.rb26-origin {
	display: grid;
	grid-template-columns: minmax(240px, 340px) 1fr;
	gap: 48px;
	align-items: center;
}
.rb26-origin-media img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--rb-radius);
	box-shadow: var(--rb-shadow);
}
.rb26-origin-body h2 {
	margin-top: 8px;
}
.rb26-origin-body p {
	margin-top: 16px;
	font-size: 17px;
	line-height: 1.6;
	color: var(--rb-body);
}
@media (max-width: 780px) {
	.rb26-origin {
		grid-template-columns: 1fr;
	}
	.rb26-origin-media {
		max-width: 300px;
		margin: 0 auto;
	}
}

/* Our Brands — one row of 4, matched logo sizing, no bullet (2026-08-24
   feedback). The shared .rb26-brands grid (auto-fit/minmax(280px)) was
   wrapping these 4 cards onto 2 rows at common widths — same root cause as
   the equivalent homepage fix. */
#rb26-about .rb26-brands {
	grid-template-columns: repeat(4, 1fr);
}
/* Per-brand logo height. Base sizing matches the design mockup's own inline
   values (Ritchie Bros./Rouse 40px, IAA 30px); SmartEquip nudged up slightly
   from the mockup's 22px per 2026-08-24 feedback. */
#rb26-about .rb26-brand-logo[data-brand="ritchie-bros"] img {
	max-height: 40px;
}
#rb26-about .rb26-brand-logo[data-brand="iaa"] img {
	max-height: 30px;
}
#rb26-about .rb26-brand-logo[data-brand="rouse"] img {
	max-height: 40px;
}
#rb26-about .rb26-brand-logo[data-brand="smartequip"] img {
	max-height: 26px;
}
#rb26-about .rb26-brand-links a::before {
	content: none;
}

/* Remaining 13 brands below the 4 featured cards (2026-08-28 edit request) —
   same grid-tile component as the homepage's "All of our brands" section
   (.rb26-all-brands/.rb26-all-brands-tile in rb26-homepage.css), duplicated
   here since this page loads its own stylesheet, not the homepage's. */
#rb26-about .rb26-all-brands {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 16px;
	margin-top: 40px;
}
#rb26-about .rb26-all-brands-tile {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 76px;
	padding: 10px 14px;
}
#rb26-about .rb26-all-brands-tile img {
	height: 28px;
	width: auto;
	max-width: 140px;
	object-fit: contain;
	display: block;
}
/* Same aspect-ratio correction as the homepage ticker/grid — Allied and
   BigIron are much taller-proportioned than most logos and read noticeably
   smaller at the shared 28px height otherwise. */
#rb26-about .rb26-all-brands-tile[data-brand="allied-equipment-sales"] img {
	height: 40px;
}
#rb26-about .rb26-all-brands-tile[data-brand="bigiron-auctions"] img {
	height: 54px;
}
/* "View all brands" was white/light-blue-hover (rb26-btn--white) until
   2026-08-24; changed to rb26-btn--blue (dark blue, light blue on hover)
   directly in the markup per that day's request — both are shared
   components in rb26-core.css now, no page-specific override needed here. */

/* Leadership / Board of Directors — solid-colour link cards, new in v2. */
.rb26-catboxes {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 16px;
}
.rb26-catbox {
	display: block;
	background: var(--rb-dark-blue);
	border-radius: var(--rb-radius);
	padding: 28px 26px;
	color: var(--rb-white);
	transition: background-color 0.2s ease;
}
.rb26-catbox:hover {
	background: var(--rb-light-blue);
}
.rb26-catbox-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.18);
	color: var(--rb-white);
	margin-bottom: 16px;
}
.rb26-catbox h3 {
	margin: 0 0 8px;
	font-size: 22px;
	font-weight: 800;
	/* Explicit — see the heading-colour warning at the top of rb26-core.css. */
	color: var(--rb-white);
}
.rb26-catbox p {
	margin: 0;
	font-size: 15px;
	color: rgba(255, 255, 255, 0.86);
}

/* Get in touch — smaller headings and tighter internal spacing (2026-08-24
   feedback). The shared .rb26-h3 (clamp 22-28px) and .rb26-panel's own
   spacing (20px/16px bottom margins, sized for the longer copy elsewhere
   that uses this component) both read as too loose for these three short
   cards. */
#rb26-about #contact .rb26-h3 {
	font-size: 17px;
	margin-bottom: 12px;
}
#rb26-about #contact .rb26-panel {
	padding: 26px 28px;
}
#rb26-about #contact .rb26-panel address,
#rb26-about #contact .rb26-panel p {
	margin-bottom: 8px;
}
#rb26-about #contact .rb26-panel p:last-child,
#rb26-about #contact .rb26-panel address:last-child {
	margin-bottom: 0;
}

@media (max-width: 900px) {
	#rb26-about .rb26-brands {
		grid-template-columns: repeat(2, 1fr);
	}
	#rb26-about .rb26-all-brands {
		grid-template-columns: repeat(3, 1fr);
	}
}
@media (max-width: 620px) {
	.rb26-catboxes {
		grid-template-columns: 1fr;
	}
	#rb26-about .rb26-brands {
		grid-template-columns: 1fr;
	}
	#rb26-about .rb26-all-brands {
		grid-template-columns: repeat(2, 1fr);
	}
}