/**
 * Homepage 2026 — styles specific to template-homepage.php.
 *
 * Loaded after rb26-core.css (see nimva_child_enqueue_rb26_assets()). Anything
 * reusable across pages belongs in rb26-core.css instead — this file is only
 * for the sections unique to the homepage rebuild.
 */

/* Photo hero -------------------------------------------------------------
   .rb26-hero is otherwise homepage-only already, but this is still a
   modifier (not a rewrite of the base rule) so the plain gradient hero stays
   available if a future homepage revision drops the photo again. */
.rb26-hero.rb26-hero--photo::before,
.rb26-hero.rb26-hero--photo::after {
	display: none;
}
/* Shorter than the base .rb26-hero padding (132px 0 124px): the photo is
   very wide/short (1400x517) relative to a text-heavy hero, so object-fit:
   cover was scaling it up a lot to fill the height, cropping roughly the
   outer 20% off each side. A shorter hero needs less scale-up, so more of
   the photo's width stays visible without introducing letterboxing.
   Min-width-scoped: .rb26-hero.rb26-hero--photo (two classes) outranks the
   plain .rb26-hero the 980px/620px breakpoints below use, so left unscoped
   this would have silently overridden their padding too — the crop problem
   this fixes is a wide-viewport-only side-effect of the image's own aspect
   ratio, and those breakpoints' existing values are untouched. */
@media (min-width: 981px) {
	.rb26-hero.rb26-hero--photo {
		padding: 76px 0 68px;
	}
}
.rb26-hero-bg {
	position: absolute;
	/* Was -12%/-12%. The parallax in rb26-homepage.js only ever shifts the
	   image downward (never up), so the top edge is the only one that can
	   expose a gap as the page scrolls; the bottom buffer never needs to
	   cover more than layout rounding. -8% still comfortably exceeds the
	   worst-case shift while the hero's top edge is still in the viewport
	   (roughly 0.35 x the hero's distance from the page top), while cutting
	   the buffer meaningfully — and less oversize height means less scale-up
	   for cover to fill it, which is most of what widened the visible crop. */
	top: -8%;
	left: 0;
	right: 0;
	bottom: -8%;
	z-index: -2;
	will-change: transform;
}
.rb26-hero-bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
/* Was its own darker, higher-opacity two-stop navy gradient (rgba(11,31,58,.9)
   -> rgba(6,88,150,.8)) - noticeably darker and less vibrant than every brand
   page's photo hero, which uses this same three-stop token gradient at one
   flat 0.82 opacity (.rb26-pagehead--photo .rb26-pagehead-bg::after in
   rb26-core.css). Matching that here brings the homepage in line with the
   rest of the site instead of it being the one darker outlier. */
.rb26-hero-scrim {
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(135deg, var(--rb-grad-1) 0%, var(--rb-grad-2) 45%, var(--rb-grad-3) 100%);
	opacity: 0.82;
}
/* The hero's "View all brands", the mid-page "Our Brands" one, and the
   closing "Explore our brands" all used to be styled here by hand (three
   near-duplicate blocks, one of which only differed by accident). As of
   2026-08-24 all three use shared colour-variant components directly in
   their markup instead — rb26-btn--white for the first two, rb26-btn--blue
   for the closing one — defined once in rb26-core.css's "Colour variants"
   section. No page-specific override needed here anymore. */

/* Brand ticker -------------------------------------------------------------
   Replaces the static wrapped row of logos with an auto-scrolling strip. The
   knockout-to-white treatment and the rationale for it are unchanged from the
   row this replaces — see the comment on .rb26-hero-strip img in
   rb26-core.css. */
.rb26-ticker {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	-webkit-mask-image: linear-gradient(to right, transparent, black 6%, black 94%, transparent);
	mask-image: linear-gradient(to right, transparent, black 6%, black 94%, transparent);
}
.rb26-ticker-track {
	display: flex;
	align-items: center;
	gap: 44px;
	width: max-content;
	animation: rb26-ticker-scroll 70s linear infinite;
}
.rb26-ticker:hover .rb26-ticker-track {
	animation-play-state: paused;
}
.rb26-ticker-track img {
	height: 24px;
	width: auto;
	max-width: 130px;
	object-fit: contain;
	flex-shrink: 0;
	/* Full opacity, not dimmed — per edit request 2026-08-21 ("make logos all
	   white"), so nothing in the strip reads as murky/grey at a glance. */
	opacity: 1;
	filter: brightness(0) invert(1);
}
/* Allied Equipment Sales renders here via 'ticker_image' (attachment 9360),
   a purpose-built variant with the icon's opaque dark background made
   transparent — see the comment on that array entry in
   template-homepage.php. It goes through the same brightness(0)/invert(1)
   knockout as every other logo now.
   It (~2.68:1) and BigIron Auctions (~1.14:1, near-square) are also much
   taller-proportioned than the ~4.7:1 ratio most other logos use. Constrained
   to the same 24px height as everything else, object-fit:contain shrinks
   their effective WIDTH far more than its neighbours, so they end up looking
   noticeably smaller. Taller, not wider, fixes it without distorting the
   artwork — the ticker's flex row is align-items:center with no fixed
   height, so a taller neighbour doesn't break the layout. Per edit request
   2026-08-21. */
.rb26-ticker-track a[data-brand="allied-equipment-sales"] img {
	height: 34px;
}
.rb26-ticker-track a[data-brand="bigiron-auctions"] img {
	height: 46px;
}
/* SmartEquip's mark (icon + wordmark, ~3.6:1) reads larger than its
   neighbours at the shared 24px height — per edit request 2026-08-27. */
.rb26-ticker-track a[data-brand="smartequip"] img {
	height: 18px;
}
@keyframes rb26-ticker-scroll {
	from {
		transform: translateX(0);
	}
	to {
		/* The track renders the brand list twice back-to-back, so -50% is
		   exactly one full set — the loop point is invisible. */
		transform: translateX(-50%);
	}
}
@media (prefers-reduced-motion: reduce) {
	.rb26-ticker-track {
		animation: none;
	}
}

/* About RB Global — card carousel --------------------------------------
   The individual card look (.rb26-split / .rb26-split-body) is reused as-is
   from rb26-core.css; only the sliding-window behaviour is new. */
.rb26-splits-carousel {
	overflow: hidden;
}
.rb26-splits-track {
	display: flex;
	gap: 24px;
	transition: transform 0.7s var(--rb-ease);
}
.rb26-splits-track .rb26-split {
	flex: 0 0 calc((100% - 48px) / 3);
	min-height: 320px;
	/* Signature corner treatment for this carousel only, per edit request
	   2026-08-21 — everywhere else .rb26-split keeps its plain var(--rb-radius)
	   corners. */
	border-top-right-radius: 100px;
}
.rb26-splits-dots {
	display: flex;
	justify-content: center;
	gap: 10px;
	margin-top: 24px;
}
.rb26-dot {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--rb-hairline);
	border: none;
	padding: 0;
	cursor: pointer;
	transition: background 0.2s ease, transform 0.2s ease;
}
.rb26-dot.is-active {
	background: var(--rb-dark-blue);
	transform: scale(1.2);
}

/* Our Brands — dark variant ----------------------------------------------
   Same .rb26-brands grid markup as the light sections elsewhere; this just
   inverts the section background/text, matching the mockup. */
.rb26-section--navy {
	background: var(--rb-grad-3);
	color: var(--rb-white);
}
/* The shared .rb26-brands grid (auto-fit, minmax(280px,1fr)) wraps these 4
   cards onto 2 rows on common viewport widths, since 4x280px+gaps exceeds
   the available shell width. Forced to one row here — per edit request
   2026-08-21 — with narrower breakpoints of its own rather than inheriting
   rb26-core.css's responsive behaviour. */
.rb26-section--navy .rb26-brands {
	grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 900px) {
	.rb26-section--navy .rb26-brands {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (max-width: 560px) {
	.rb26-section--navy .rb26-brands {
		grid-template-columns: 1fr;
	}
}
/* Explicit, not stylistic — see the heading-colour warning at the top of
   rb26-core.css. Without these the parent theme's own h2/eyebrow colors win
   and paint near-black text on this dark background. */
.rb26-section--navy .rb26-h2 {
	color: var(--rb-white);
}
.rb26-section--navy .rb26-eyebrow {
	color: var(--rb-light-blue);
}
/* Cards stay white with full-colour logos (not knocked out) on this dark
   section, per edit request 2026-08-21 — only the section background and
   heading/copy colours are inverted, not the cards themselves. */
.rb26-section--navy .rb26-brand {
	background: var(--rb-white);
}
.rb26-section--navy .rb26-brand p {
	color: var(--rb-body);
}
/* No filter override needed on .rb26-brand-logo img — it already renders in
   full colour by default; the dark-section knockout from the previous pass
   is removed. */

/* SmartEquip's source image (media 9167) has zero padding baked into its
   canvas, unlike its neighbours at the time (IAA, Ritchie Bros., Rouse all
   had some), so at the shared 46px box height SmartEquip's wordmark
   rendered visibly larger. Sized down one step per edit request
   2026-09-01, rather than touching the shared .rb26-brand-logo height and
   affecting every other brand. */
.rb26-brand--smartequip .rb26-brand-logo img {
	max-height: 36px;
}

/* IAA and Rouse were swapped to their padding-cropped -grid.png variants
   the same day (see template-homepage.php) to left-justify them, which
   left Ritchie Bros. — still on its original, lightly-padded file —
   reading smaller than both. Sized up one step and swapped to its own
   -grid.png variant (2px padding, effectively flush) for the same reason. */
.rb26-brand--ritchie .rb26-brand-logo img {
	max-height: 56px;
}

/* Bullet dropped in front of "Learn more" per edit request 2026-08-21 — cards
   sit on white again, so the shared .rb26-brand-links a colour/bullet from
   rb26-core.css already reads fine and needs no dark-section override. */
.rb26-section--navy .rb26-brand-links a::before {
	display: none;
}

/* Stats + global map ------------------------------------------------------ */
.rb26-map {
	margin: 28px 0 34px;
	border-radius: var(--rb-radius);
	overflow: hidden;
}
.rb26-map img {
	display: block;
	width: 100%;
	height: auto;
}
.rb26-stats-row {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}
.rb26-stat-box {
	background: var(--rb-white);
	border: 1px solid var(--rb-hairline);
	border-radius: var(--rb-radius);
	padding: 28px 20px;
	text-align: center;
}
.rb26-stat-box .rb26-stat-figure {
	display: block;
	font-size: 44px;
	font-weight: 800;
	color: var(--rb-dark-blue);
	margin-bottom: 6px;
}
.rb26-stat-box .rb26-stat-label {
	font-size: 15px;
	font-weight: 600;
	color: var(--rb-body);
}

/* Flexible Selling / Global Reach cards (2026-08-28), directly below the
   stats row's note. Reuses the shared .rb26-linkgrid/.rb26-linkcard
   components (rb26-core.css) as-is; only the extra top margin is added. */
.rb26-stats-cards {
	margin-top: 40px;
}

/* All brands grid ---------------------------------------------------------- */
.rb26-all-brands {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 16px;
	margin-bottom: 36px;
}
.rb26-all-brands-tile {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 76px;
	padding: 10px 14px;
}
/* Only the linked tiles get an affordance — the rest render as plain
   <div>s and should not look interactive. There is no visible text in a
   tile, so the focus ring is the only thing a keyboard user has to go on;
   it gets an offset so it clears the logo rather than crowding it. */
a.rb26-all-brands-tile {
	transition: opacity 0.18s var(--rb-ease);
}
a.rb26-all-brands-tile:hover {
	opacity: 0.6;
}
a.rb26-all-brands-tile:focus-visible {
	outline: 2px solid var(--rb-medium-blue);
	outline-offset: 2px;
	border-radius: 4px;
}
.rb26-all-brands-tile img {
	height: 28px;
	width: auto;
	max-width: 140px;
	object-fit: contain;
	display: block;
}
/* Same aspect-ratio fix as the ticker (see the comment there) — BigIron and
   Allied would otherwise render noticeably smaller than their neighbours
   here too. */
.rb26-all-brands-tile[data-brand="allied-equipment-sales"] img {
	height: 40px;
}
.rb26-all-brands-tile[data-brand="bigiron-auctions"] img {
	height: 54px;
}

/* Centered per edit request 2026-09-01 — was left-aligned under the grid
   above (a plain block, no text-align of its own) rather than sitting under
   the grid's visual centre. */
.rb26-all-brands-cta {
	text-align: center;
}

@media (max-width: 900px) {
	.rb26-splits-track .rb26-split {
		flex: 0 0 calc((100% - 24px) / 2);
	}
	.rb26-stats-row {
		grid-template-columns: 1fr;
	}
	.rb26-all-brands {
		grid-template-columns: repeat(3, 1fr);
	}
}
@media (max-width: 620px) {
	.rb26-splits-track .rb26-split {
		flex: 0 0 100%;
	}
	.rb26-all-brands {
		grid-template-columns: repeat(2, 1fr);
	}
}