/* Home page marketing.
   Everything here scales with the viewport instead of stepping at breakpoints: each
   [data-font-size] name resolves to one clamp(), and section padding is fluid, so
   there is a single definition per rule and no ladder to keep in sync. Only the
   carousels, which depend on slick's own layout, still need a width query. */
.home_banner_container {position:relative;}
.home_banner_container[data-banner-picture="minghui"] .home_banner_background {background-image:url('../homepage_image/background/registration_banner_2048x1152.webp');background-position:35% 50%;transform:scaleX(-1);}
.home_banner_container[data-banner-picture="russel_road_portrait"] .home_banner_background {background-image:url('../homepage_image/background/russel_road_portrait.webp');}
.home_banner_container[data-banner-picture="rear_lamp_portrait"] .home_banner_background {background-image:url('../homepage_image/background/rear_lamp_portrait.webp');}
.home_banner_container[data-banner-picture="russel_road_bottom_up"] .home_banner_background {background-image:url('../homepage_image/background/russel_road_bottom_up.webp');}
.home_banner_container .home_banner_content_container {padding-top:clamp(1em,4vw,2.5em);padding-bottom:clamp(1em,4vw,2.5em);}
/* Every section shares this block: fluid vertical rhythm, and a max width so a line
   of copy never runs the full span of an ultrawide monitor. */
.home_banner_section {box-sizing:border-box;width:100%;max-width:78rem;margin:0 auto;padding:clamp(2.5em,7vw,4.5em) var(--gutter);display:flex;flex-direction:column;row-gap:clamp(1.5em,4vw,2.5em);color:#2b3236;}
.home_banner_animated_text {position:relative;}
.home_banner_text_picture_container {box-sizing:border-box;max-width:78rem;margin:0 auto;display:flex;justify-content:space-evenly;align-items:center;gap:1em 3em;padding:clamp(2.5em,7vw,4em) clamp(1.5em,5vw,6em);}
.home_banner_animated_text_alignment {display:flex;flex-direction:column;row-gap:clamp(1.25em,3vw,2.5em);}

/* Fluid type: 4.5em is the hero, 1.1em the smallest label. The minimum is the size a
   360px phone gets, the maximum the size a desktop gets, and the middle term carries
   it between them. */
.home_banner_vary_font_size[data-font-size="4.5em"] {font-size:clamp(2.2em,1.35em + 3vw,4.5em);}
.home_banner_vary_font_size[data-font-size="4em"] {font-size:clamp(2.05em,1.3em + 2.7vw,4em);}
.home_banner_vary_font_size[data-font-size="3.5em"] {font-size:clamp(1.9em,1.2em + 2.3vw,3.5em);}
.home_banner_vary_font_size[data-font-size="3em"] {font-size:clamp(1.75em,1.15em + 1.9vw,3em);}
.home_banner_vary_font_size[data-font-size="2.8em"] {font-size:clamp(1.6em,1.05em + 1.8vw,2.8em);}
.home_banner_vary_font_size[data-font-size="2em"] {font-size:clamp(1.3em,1em + 0.9vw,2em);}
.home_banner_vary_font_size[data-font-size="1.8em"] {font-size:clamp(1.2em,0.95em + 0.8vw,1.8em);}
.home_banner_vary_font_size[data-font-size="1.5em"] {font-size:clamp(1.1em,0.9em + 0.6vw,1.5em);}
.home_banner_vary_font_size[data-font-size="1.2em"] {font-size:clamp(1em,0.9em + 0.3vw,1.2em);}
.home_banner_vary_font_size[data-font-size="1.1em"] {font-size:clamp(1em,0.95em + 0.15vw,1.1em);}
.home_banner_container h2, .home_banner_container h3 {line-height:1.2;font-family:Helvetica,Arial,sans-serif;text-wrap:balance;}

/* Scrims over the photo sections: a gradient rather than a flat wash, so the section
   darkens where the words sit and the picture keeps its own contrast in between. */
.home_banner_scrim {position:absolute;inset:0;z-index:-1;}
.home_banner_scrim[data-scrim="dark"] {background:linear-gradient(to bottom,rgba(10,15,18,0.74) 0%,rgba(10,15,18,0.48) 45%,rgba(10,15,18,0.7) 100%);}
.home_banner_scrim[data-scrim="light"] {background:linear-gradient(to bottom,rgba(240,243,245,0.95) 0%,rgba(240,243,245,0.86) 50%,rgba(240,243,245,0.95) 100%);}
/* Words over a photo: one soft shadow for legibility, in place of the hard 2px offset. */
.home_banner_on_photo {color:#fdfdfd;text-shadow:0 1px 2px rgba(10,15,18,0.55),0 8px 24px rgba(10,15,18,0.4);}

.home_banner_heading {font-weight:700;text-align:center;margin:0;padding:0;}
.home_banner_lead {font-weight:700;text-align:center;margin:0 auto;padding:0;max-width:60ch;line-height:1.45;}
.home_banner_lead:not(.home_banner_on_photo) {color:#4f575d;}

.home_banner_lineafter_white::after, .home_banner_lineafter_black::after
{
	content:"";
	display:block;
	width:3.5em;
	height:3px;
	margin:0.85em auto 0 auto;
	border-radius:999px;
}
.home_banner_lineafter_black::after {background-image:linear-gradient(90deg,#0099cc,#22bbee);}
.home_banner_lineafter_white::after {background-image:linear-gradient(90deg,rgba(253,253,253,0.95),rgba(253,253,253,0.45));}

/* "How it works": three numbered cards that sit on one row while they fit and stack
   when they do not, so the step order still reads top to bottom on a phone. */
.home_steps {width:100%;max-width:64rem;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(15rem,100%),1fr));gap:clamp(1em,3vw,1.75em);align-items:stretch;}
.home_step {box-sizing:border-box;display:flex;flex-direction:column;align-items:center;row-gap:0.8em;padding:clamp(1.5em,4vw,2.25em) clamp(1.25em,3vw,1.75em);border-radius:18px;background-color:#fdfdfd;box-shadow:0 1px 4px rgba(0,0,0,0.08);text-align:center;}
.home_step_number {display:inline-flex;align-items:center;justify-content:center;width:2.6em;height:2.6em;border-radius:999px;background-image:linear-gradient(135deg,#0099cc,#22bbee);color:#fdfdfd;font-family:Helvetica,Arial,sans-serif;font-size:1.5em;font-weight:700;line-height:1;box-shadow:0 6px 16px rgba(0,153,204,0.3);}
.home_step_title {font-size:clamp(1.2em,1em + 0.5vw,1.55em);font-weight:700;line-height:1.25;color:#0099cc;}
.home_step_text {font-weight:700;line-height:1.45;color:#5d656b;}

/* Home carousels: our slick.css centres slides vertically (align-items:center); stretch them to the tallest instead so cards line up (selectors out-rank slick.css, which loads after this file) */
.home_banner_review .slick-track, .home_banner_location .slick-track {align-items:stretch;}
.home_banner_review .slick-track .slick-slide, .home_banner_location .slick-track .slick-slide {height:auto;flex-shrink:0;}
/* Review cards reuse .car_review_* from ui.css; side slides are dimmed so the edge-clipped peek reads as intentional */
.home_banner_review .slick-slide.car_review_card {display:flex;box-sizing:border-box;width:280px;max-width:calc(100vw - 10em);margin:0.5em 1.25em 1.5em;border-radius:18px;box-shadow:0 12px 32px rgba(10,15,18,0.28);opacity:0.62;transition:opacity 0.3s ease;}
.home_banner_review .slick-slide.car_review_card.slick-center {opacity:1;}
/* safety net only: home.php keeps the carousel to reviews that fit 7 lines at either width (~39 chars/line desktop, ~34 phone) */
.home_banner_review .car_review_text {display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:7;line-clamp:7;overflow:hidden;}

.home_car_card {box-sizing:border-box;min-width:0;width:300px;max-width:calc(100vw - 10em);margin:0.5em 2em 1.5em;padding:1.25em;border-radius:18px;background-color:#fdfdfd;box-shadow:0 1px 4px rgba(0,0,0,0.08);display:flex;flex-direction:column;row-gap:1em;}
.home_banner_car .slick-slide.home_car_card {display:flex;}
/* the photos are cut-outs on transparent backgrounds, so the tint behind them is what
   gives the car a surface to sit on */
.home_car_media {display:flex;justify-content:center;align-items:center;min-height:180px;padding:0.75em;border-radius:14px;background-image:linear-gradient(160deg,#f4f7f9,#e7edf0);}
.home_car_media img {display:block;width:100%;height:auto;}
.home_car_name {font-family:Newsreader,serif;font-size:clamp(1.5em,1.25em + 0.8vw,2em);line-height:1.2;text-align:center;color:#0099cc;font-weight:700;}
.home_car_price {font-size:1.1em;font-weight:700;text-align:center;color:#336600;line-height:1.3;}
.home_car_price .home_car_price_amount {font-size:2em;}
.home_car_btn {width:100%;box-sizing:border-box;font-size:1.05em;padding:0.8em 1.25em;border-radius:999px;display:inline-flex;justify-content:center;align-items:center;column-gap:0.5em;}

.home_location_card {box-sizing:border-box;min-width:0;width:300px;max-width:calc(100vw - 10em);margin:0.5em 2em 1.5em;border-radius:18px;overflow:hidden;background-color:#fdfdfd;box-shadow:0 1px 4px rgba(0,0,0,0.08);display:flex;flex-direction:column;}
.home_banner_location .slick-slide.home_location_card {display:flex;}
/* title sits on the photo: absolutely positioned, so a name that wraps costs the card no height */
.home_location_media {position:relative;}
.home_location_img {display:block;width:100%;aspect-ratio:16/9;object-fit:cover;background-color:#e6e6e6;}
.home_location_media::after {content:"";position:absolute;left:0;right:0;bottom:0;height:70%;background-image:linear-gradient(to bottom,rgba(10,15,18,0),rgba(10,15,18,0.78));}
.home_location_title {position:absolute;z-index:1;left:0;right:0;bottom:0;padding:0.6em 0.8em;display:flex;align-items:flex-end;justify-content:center;font-size:1.4em;font-weight:700;line-height:1.2;text-align:center;color:#fdfdfd;text-shadow:0 1px 3px rgba(10,15,18,0.6);}
.home_location_body {display:flex;flex-direction:column;row-gap:0.9em;padding:1.1em 1em;flex:1;}
/* free space splits above and below the content instead of pooling above the button */
.home_location_content {margin-top:auto;margin-bottom:auto;display:flex;flex-direction:column;row-gap:0.6em;}
.home_location_label {font-weight:700;text-align:center;color:#5d656b;}
.home_location_chips {display:flex;flex-wrap:wrap;justify-content:center;gap:0.4em;}
.home_location_chip {background-color:rgba(0,153,204,0.1);color:#0b6c8c;border-radius:999px;padding:0.35em 0.75em;font-size:0.85em;font-weight:700;line-height:1.3;}
.home_location_chip_more {flex-basis:100%;text-align:center;background-color:transparent;color:#8a9399;font-style:italic;font-weight:400;padding-top:0;}
/* the anchor is only a wrapper: it must not paint anything of its own, or a:hover's
   underline reappears on the label -- and on a phone that hover state sticks after
   the tap */
.home_location_link {display:block;text-decoration:none;}
.home_location_btn {display:inline-flex;justify-content:center;align-items:center;column-gap:0.5em;box-sizing:border-box;width:100%;font-size:1.05em;padding:0.8em 1em;border-radius:999px;font-family:Arial,sans-serif;text-align:center;line-height:1.3;}

.home_banner_cta_row {display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:1em;}
.home_banner_cta_btn {font-size:1.05em;padding:0.8em 1.5em;border-radius:999px;display:inline-flex;justify-content:center;align-items:center;column-gap:0.5em;}
.home_banner_cta_btn[data-size="large"] {font-size:clamp(1.05em,0.95em + 0.35vw,1.4em);padding:0.85em 1.75em;}

@media only screen and (max-width:900px)
{
	/* phone: one card per view, so track the current card's height instead of the tallest */
	.home_banner_review .slick-track, .home_banner_location .slick-track {align-items:flex-start;}
	.home_banner_text_picture_container {flex-wrap:wrap;}
	.home_banner_text_picture_container.home_banner_text_picture_container_reverse_wrap {flex-wrap:wrap-reverse;}
	.home_banner_container[data-banner-picture="minghui"] .home_banner_background {background-image:url('../homepage_image/background/registration_banner_975x1152.webp');background-position:50% 50%;}
}

/* The reveal-on-scroll animation is decorative: without it the copy simply starts
   where it ends up. jQuery writes opacity and top inline, so overriding it takes
   !important. */
@media (prefers-reduced-motion:reduce)
{
	.home_banner_animated_text {opacity:1 !important;top:0 !important;}
	.home_banner_review .slick-slide.car_review_card {transition:none;}
}