/* ---------------------------------------------------------------------------
   Solution pages 2026 — page-specific
   ---------------------------------------------------------------------------
   Depends on rb26-core.css. Dealer Solutions merges two previously separate
   pages onto one, so the job here is making that merge legible: each part is
   badged with the brand it belongs to, and sub-sections are visually nested
   under it rather than reading as a flat run of headings.
   --------------------------------------------------------------------------- */

/* Anchor nav, standalone variant (2026-09-01 edit request) — Dealer Solutions'
   jump nav (IAA/Ritchie Bros. chips) sits alone in its own .rb26-section--tight
   section, unlike template-brand.php's anchornav, which can follow a section
   head/facts/stats in the same section. The shared .rb26-anchornav's own
   margin-top/padding-top/border-top (rb26-core.css) are redundant on top of
   that section's own padding here, stacking into a large gap between the
   pagehead and the chips with a floating hairline partway through it. */
.rb26-anchornav--standalone {
	margin-top: 0;
	padding-top: 0;
	border-top: none;
}

/* This section's own bottom padding (56px, from --tight) stacked on top of
   the first part's banner-image top padding (.rb26-part--has-image, 40px)
   into a gap that read as too much dead space below the chips. Zeroed here
   rather than touching .rb26-part--has-image, which other parts also use for
   their own (unrelated) top spacing. */
.rb26-section--chipnav {
	padding-bottom: 0;
}

/* Brand badge above each part heading. Keyed to the brand it labels, using the
   one sanctioned application of the secondary palette (BRAND.md): orange for
   Ritchie Bros., red for IAA. Everything else stays in the primary blues. */
.rb26-partbadge {
	display: inline-block;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--rb-white);
	background: var(--rb-part-accent, var(--rb-dark-blue));
	padding: 7px 14px;
	border-radius: var(--rb-pill);
	margin-bottom: 18px;
}
.rb26-part--red {
	--rb-part-accent: var(--rb-red);
}
.rb26-part--orange {
	--rb-part-accent: var(--rb-orange);
}

/* Sub-sections inside a part. The left rule is what carries the nesting — it
   makes a long page read as "these belong to IAA" without repeating the brand
   name above every block. */
.rb26-subsection {
	margin-top: 52px;
	padding-left: 26px;
	border-left: 3px solid var(--rb-hairline);
}
.rb26-subsection:first-of-type {
	margin-top: 40px;
}
.rb26-subsection > .rb26-h3 {
	margin-bottom: 12px;
}
.rb26-subsection-lead {
	font-size: 17px;
	line-height: 1.62;
	max-width: 74ch;
	margin-bottom: 22px;
}
.rb26-subsection .rb26-linkgrid {
	margin-top: 24px;
	/* Fixed 2 columns rather than the shared component's auto-fit(290px) —
	   at this page's shell width that auto-fit put 3 cards on the first row
	   and stranded the 4th alone on a second row. 2x2 per edit request
	   2026-09-01, for every card grid on this page (Convenient services,
	   Sell to maximize speed, and Drive your business forward all use 4
	   cards) rather than just the one section it was first reported on. */
	grid-template-columns: repeat(2, 1fr);
}
/* "Learn more" pinned to the same baseline across a row regardless of how
   much body copy a card has above it — the shared .rb26-linkcard is plain
   block flow, so a shorter card's link previously sat higher than a longer
   card's next to it. */
.rb26-subsection .rb26-linkcard {
	display: flex;
	flex-direction: column;
}
.rb26-subsection .rb26-linkcard .rb26-link {
	margin-top: auto;
}

/* Channel lists — names with no body copy. Cards would be mostly whitespace,
   so these render as pills instead. */
.rb26-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 6px;
}
.rb26-pill {
	display: inline-flex;
	align-items: center;
	font-size: 15px;
	font-weight: 600;
	color: var(--rb-ink);
	background: var(--rb-white);
	border: 1px solid var(--rb-hairline);
	border-radius: var(--rb-pill);
	padding: 10px 18px;
}

@media (max-width: 620px) {
	.rb26-subsection {
		margin-top: 38px;
		padding-left: 16px;
	}
	.rb26-subsection-lead {
		font-size: 16px;
	}
	.rb26-pill {
		font-size: 14px;
		padding: 9px 15px;
	}
	.rb26-subsection .rb26-linkgrid {
		grid-template-columns: 1fr;
	}
}