/**
 * Vehicle donation landing page — /donate/cars/
 *
 * Page-scoped, enqueued by inc/vehicle-donation.php behind an is_page() guard,
 * after motion.css so it can overrule anything in the global cascade.
 *
 * WHY A SEPARATE STYLESHEET AND NOT sections.css
 *
 * Every rule here is bound to one page's composition. sections.css is shared
 * vocabulary — the giving band, the ways list, the panels — and a landing page
 * built to mirror a partner's marketing page is the opposite of shared: it has
 * a gold band, an illustration that bleeds off one edge, and a testimonial trio
 * that appear nowhere else on this site. awardees.css set the precedent.
 *
 * THE PALETTE IS OURS, THE LAYOUT IS THEIRS
 *
 * careasy.org's own band is a saturated marketing yellow (#FDC82F) with an
 * orange truck and a blue car. Dropped in unchanged it reads as a different
 * website wearing our header. So the band is gold tinted down to a desert sand
 * (--bb-veh-band-*, derived from --wp--preset--color--gold), and the artwork
 * was recoloured to match — see assets/images/README.md for how, and for why
 * the file is a theme asset rather than a hotlink to their server.
 */

/* -------------------------------------------------------------------------
 * Tokens. Declared once on the page root so the band, the rules and the
 * illustration's ground shadow cannot drift apart.
 * ------------------------------------------------------------------------- */

.bb-veh {
	--bb-veh-band-top: #F2E4B4;
	--bb-veh-band-bottom: #E7D391;
	--bb-veh-band-edge: #D9C07A;
	--bb-veh-measure: 44rem;
	--bb-veh-gutter: clamp( 1.25rem, 5vw, 3.5rem );
}

/* =========================================================================
 * THE HERO — the BASIC ask, before a single word about CARS.
 *
 * The visitor arriving here has been sent by BASIC, not by a vehicle-donation
 * search, so the page opens on the cause and not on the mechanism. The 70%
 * figure is the whole argument and is set as a display number rather than
 * buried in the paragraph.
 * ========================================================================= */

.bb-veh-hero {
	position: relative;
	padding: clamp( 2.5rem, 6vw, 4.5rem ) var(--bb-veh-gutter) clamp( 2rem, 5vw, 3.5rem );
	overflow: hidden;
	background: var(--wp--preset--color--base-alt);
}

.bb-veh-hero__inner {
	position: relative;
	z-index: 1;
	max-width: 62rem;
	margin-inline: auto;
}

.bb-veh-hero__title {
	max-width: 20ch;
	margin: 0.35rem 0 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp( 2rem, 5.4vw, 3.25rem );
	font-weight: 700;
	line-height: 1.08;
	color: var(--wp--preset--color--forest);
}

.bb-veh-hero__title em {
	font-style: italic;
	color: var(--wp--preset--color--terracotta-text);
}

.bb-veh-hero__lead {
	max-width: var(--bb-veh-measure);
	margin: 1.1rem 0 0;
	font-size: clamp( 1.05rem, 1.6vw, 1.25rem );
	line-height: 1.55;
}

.bb-veh-hero__text {
	max-width: var(--bb-veh-measure);
	margin: 0.9rem 0 0;
	line-height: 1.65;
}

/* The 70% claim, given the weight of a pull quote because it is the reason to
   choose this route over selling the car and writing a cheque. */
.bb-veh-share {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.25rem 1rem;
	max-width: var(--bb-veh-measure);
	margin: 1.6rem 0 0;
	padding: 1.1rem 1.35rem;
	border-radius: 12px;
	border-inline-start: 4px solid var(--wp--preset--color--terracotta);
	background: var(--wp--preset--color--base);
}

.bb-veh-share__figure {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp( 2.5rem, 6vw, 3.5rem );
	font-weight: 700;
	line-height: 1;
	color: var(--wp--preset--color--terracotta-text);
}

.bb-veh-share__text {
	flex: 1 1 14rem;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.5;
}

.bb-veh-hero__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.9rem 1.5rem;
	margin-block-start: 1.6rem;
}

.bb-veh-hero__phone {
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.4;
}

.bb-veh-hero__phone strong {
	display: block;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--large);
	color: var(--wp--preset--color--forest);
}

/* A tel: link is still a link, and the global cascade colours it like one.
   Left alone it renders as underlined browser blue in the middle of a warm
   band — the one place on this page a stray default is unmissable. */
.bb-veh-hero__phone a {
	color: var(--wp--preset--color--terracotta-text);
	text-decoration: none;
}

.bb-veh-hero__phone a:hover,
.bb-veh-hero__phone a:focus {
	text-decoration: underline;
}

/* The naming callout.
 *
 * 855-500-RIDE is CARS's national line, shared by thousands of nonprofits. The
 * button and the QR code carry BASIC's own page and attribute themselves; a
 * phone call does not, so a caller who does not name BASIC can have their
 * vehicle credited to somebody else's cause. Nothing on careasy.org warns them,
 * which is why this is a callout on the page rather than a clause in a
 * paragraph — and why the printed flier carries the same words.
 */
.bb-veh-callout {
	max-width: var(--bb-veh-measure);
	margin: 1.4rem 0 0;
	padding: 1rem 1.25rem;
	border-radius: 12px;
	border-inline-start: 4px solid var(--wp--preset--color--terracotta);
	background: var(--wp--preset--color--base);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.6;
}

.bb-veh-callout__lead {
	display: block;
	margin-block-end: 0.2rem;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 700;
	color: var(--wp--preset--color--terracotta-text);
}

.bb-veh-callout q {
	quotes: "\201C" "\201D";
	font-weight: 600;
	color: var(--wp--preset--color--forest);
}

/* On the closing band the callout inverts: cream on forest would vanish. */
.bb-veh-close .bb-veh-callout {
	margin-inline: auto;
	text-align: start;
	background: rgb( 0 0 0 / 18% );
	border-inline-start-color: var(--wp--preset--color--terracotta-on-dark);
}

.bb-veh-close .bb-veh-callout__lead {
	color: var(--wp--preset--color--terracotta-on-dark);
}

.bb-veh-close .bb-veh-callout q {
	color: var(--wp--preset--color--base);
}

/* =========================================================================
 * THE GOLD BAND — careasy.org's "We Make Donating a Vehicle Easy!", in our
 * colours and with CARS named as the subject.
 *
 * The illustration is 1867×572, a wide strip. Below the two-column breakpoint
 * it sits under the prose at full width, where that ratio works in its favour.
 * ========================================================================= */

.bb-veh-easy {
	padding: clamp( 2.25rem, 5vw, 3.5rem ) var(--bb-veh-gutter);
	border-block: 1px solid var(--bb-veh-band-edge);
	background: linear-gradient( 180deg, var(--bb-veh-band-top), var(--bb-veh-band-bottom) );
	color: var(--wp--preset--color--contrast);
}

.bb-veh-easy__inner {
	display: grid;
	gap: clamp( 1.5rem, 4vw, 3rem );
	max-width: 68rem;
	margin-inline: auto;
}

@media ( min-width: 54em ) {

	.bb-veh-easy__inner {
		grid-template-columns: minmax( 0, 1fr ) minmax( 0, 1.05fr );
		align-items: center;
	}
}

.bb-veh-easy__title {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp( 1.65rem, 3.6vw, 2.4rem );
	font-weight: 700;
	line-height: 1.15;
	color: var(--wp--preset--color--forest-deep);
}

.bb-veh-easy__text {
	margin: 0.85rem 0 0;
	line-height: 1.65;
}

.bb-veh-easy__text:last-child {
	margin-block-end: 0;
}

/* The illustration is a CSS background on an empty, aria-hidden element rather
   than an <img> in the page body, for the same reason the careasy wordmark is:
   a theme asset referenced from page content would have to hardcode
   /wp-content/themes/basic-borrego/ into the database, where renaming the theme
   directory breaks it silently and no test can see it. Here the path is
   relative to this stylesheet and moves with the theme.

   aspect-ratio holds the artwork's own 1867:572 so nothing reflows when the SVG
   arrives. It is decorative: the paragraph beside it says the same thing. */
.bb-veh-easy__art {
	display: block;
	width: 100%;
	aspect-ratio: 1867 / 572;
	background-image: url( "../images/careasy-tow-truck.svg" );
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

/* =========================================================================
 * WHAT YOU GET — the four facts a donor actually weighs, as a plain grid.
 * ========================================================================= */

.bb-veh-facts {
	padding: clamp( 2.5rem, 5vw, 3.75rem ) var(--bb-veh-gutter);
	background: var(--wp--preset--color--base);
}

.bb-veh-facts__inner {
	max-width: 68rem;
	margin-inline: auto;
}

.bb-veh-section-title {
	margin: 0 0 0.5rem;
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp( 1.5rem, 3.2vw, 2.1rem );
	font-weight: 700;
	line-height: 1.2;
	color: var(--wp--preset--color--forest);
}

.bb-veh-section-lead {
	max-width: var(--bb-veh-measure);
	margin: 0 0 1.75rem;
	line-height: 1.6;
}

.bb-veh-facts__list {
	display: grid;
	gap: 1rem;
	margin: 0;
	padding: 0;
	list-style: none;
	grid-template-columns: repeat( auto-fit, minmax( 15rem, 1fr ) );
}

.bb-veh-fact {
	padding: 1.15rem 1.25rem;
	border: 1px solid var(--wp--preset--color--base-alt);
	border-radius: 12px;
	background: var(--wp--preset--color--base-alt);
}

.bb-veh-fact__title {
	margin: 0 0 0.35rem;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 600;
	line-height: 1.25;
	color: var(--wp--preset--color--forest);
}

.bb-veh-fact__text {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.6;
}

/* =========================================================================
 * TESTIMONIALS — three, and NOT ours.
 *
 * These are CARS donors who gave to other causes. The section says so in its
 * own standfirst rather than in a footnote, because a reader who takes them for
 * BASIC donors has been misled by the layout, and no amount of small print
 * further down undoes a first impression.
 * ========================================================================= */

.bb-veh-quotes {
	padding: clamp( 2.5rem, 5vw, 3.75rem ) var(--bb-veh-gutter);
	background: var(--wp--preset--color--base-alt);
}

.bb-veh-quotes__inner {
	max-width: 68rem;
	margin-inline: auto;
}

.bb-veh-quotes__list {
	display: grid;
	gap: 1.15rem;
	margin: 0;
	padding: 0;
	list-style: none;
	grid-template-columns: repeat( auto-fit, minmax( 17rem, 1fr ) );
}

.bb-veh-quote {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 1.4rem 1.5rem;
	border-radius: 12px;
	background: var(--wp--preset--color--base);
	box-shadow: 0 1px 2px rgb( 42 42 36 / 6% );
}

/* The opening mark is decorative and must not be read out or selected: the
   quotation itself already carries <blockquote> semantics. */
.bb-veh-quote::before {
	content: "\201C";
	display: block;
	margin-block-end: -0.35rem;
	font-family: var(--wp--preset--font-family--display);
	font-size: 2.75rem;
	line-height: 1;
	color: var(--wp--preset--color--terracotta);
	user-select: none;
}

.bb-veh-quote__text {
	flex: 1 1 auto;
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.65;
}

.bb-veh-quote__by {
	margin-block-start: 0.9rem;
	font-size: var(--wp--preset--font-size--x-small);
	font-style: normal;
	line-height: 1.45;
	color: var(--wp--preset--color--forest);
}

.bb-veh-quote__by strong {
	font-weight: 600;
}

.bb-veh-quote__cause {
	display: block;
	color: var(--wp--preset--color--contrast);
	opacity: 0.75;
}

/* =========================================================================
 * PARTNERS — names, not logos. See inc/vehicle-donation.php for why.
 * ========================================================================= */

.bb-veh-partners {
	padding: clamp( 2.5rem, 5vw, 3.75rem ) var(--bb-veh-gutter);
	background: var(--wp--preset--color--base);
}

.bb-veh-partners__inner {
	max-width: 68rem;
	margin-inline: auto;
}

.bb-veh-partners__list {
	display: grid;
	gap: 0.5rem 1.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
	grid-template-columns: repeat( auto-fit, minmax( 14rem, 1fr ) );
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.5;
}

.bb-veh-partners__list li {
	padding-inline-start: 0.9rem;
	border-inline-start: 2px solid var(--wp--preset--color--sage);
}

.bb-veh-partners__note {
	max-width: var(--bb-veh-measure);
	margin: 1.5rem 0 0;
	font-size: var(--wp--preset--font-size--x-small);
	line-height: 1.6;
}

/* =========================================================================
 * CLOSING CALL TO ACTION, and the way back to /donate/.
 * ========================================================================= */

.bb-veh-close {
	padding: clamp( 2.5rem, 5vw, 4rem ) var(--bb-veh-gutter);
	background: var(--wp--preset--color--forest);
	color: var(--wp--preset--color--base);
}

.bb-veh-close__inner {
	max-width: 46rem;
	margin-inline: auto;
	text-align: center;
}

.bb-veh-close__title {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp( 1.6rem, 3.4vw, 2.25rem );
	font-weight: 700;
	line-height: 1.2;
	color: var(--wp--preset--color--base);
}

.bb-veh-close__text {
	margin: 0.85rem 0 0;
	line-height: 1.65;
}

.bb-veh-close__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 0.9rem 1.5rem;
	margin-block-start: 1.5rem;
}

/* bb-btn-primary is terracotta on cream; on the forest band it needs to invert
   or it disappears into the background it is meant to stand off. */
.bb-veh-close .bb-btn-primary {
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--forest-deep);
}

.bb-veh-close .bb-btn-primary:hover,
.bb-veh-close .bb-btn-primary:focus {
	background: var(--wp--preset--color--terracotta-on-dark);
	color: var(--wp--preset--color--forest-deep);
}

.bb-veh-close__back {
	color: var(--wp--preset--color--base);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--small);
}

/* The printed flier, offered quietly. Deliberately NOT a button: this is for
   the handful of people who will put a page on the market's noticeboard, not
   the donor who came here to give a car. Small, dimmed, underlined — findable
   by anyone reading the page to the end, invisible to everyone else. The PDF
   itself is a media-library attachment like every other document on this site,
   NOT a theme file: staff can see and replace it, and the link survives a theme
   change. It is generated by docs/marketing/flier.py and published with
   `npm run upload:media`. */
.bb-veh-close__flier {
	margin: 1.25rem 0 0;
	font-size: var(--wp--preset--font-size--x-small);
	line-height: 1.6;
	opacity: 0.8;
}

.bb-veh-close__flier-link {
	color: var(--wp--preset--color--base);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 0.18em;
}

.bb-veh-close__flier-link:hover,
.bb-veh-close__flier-link:focus {
	color: var(--wp--preset--color--terracotta-on-dark);
}

.bb-veh-close__legal {
	margin: 1.75rem 0 0;
	font-size: var(--wp--preset--font-size--x-small);
	line-height: 1.6;
	opacity: 0.85;
}

/* The partner mark, repeated at the foot so the hand-off is named at the point
   of the final click as well as the first. Sized against the dark band, where
   the wordmark's own blue needs the cream plate behind it to stay legible. */
.bb-veh-close__logo {
	display: inline-block;
	width: 7.5rem;
	aspect-ratio: 501 / 112;
	padding: 0.5rem 0.75rem;
	box-sizing: content-box;
	border-radius: 8px;
	background-color: var(--wp--preset--color--base);
	background-image: url( "../images/careasy-logo.svg" );
	background-repeat: no-repeat;
	background-position: center;
	background-size: 7.5rem auto;
}