/* GetnDrive Visual Rebrand — Regional Cars Master Template Hero. v0.2.10.17
 *
 * Enqueued by getndrive_visual_rebrand_enqueue_assets() ONLY when the request renders a
 * Cars Hero (getndrive_visual_rebrand_cars_hero_payload(): a route Regional Routing
 * configures and no search state in the query), after the main Rebrand stylesheet.
 * Kept out of getndrive-visual-rebrand-pass.css on purpose: no other route downloads
 * these rules, and the main stylesheet (whose SHA-256 the Homepage evidence gates
 * bind) stays byte-identical.
 */

/* =====================================================================
   Regional Cars Master Template Hero — v0.2.10.9 (ADR-201), compact and
   rail-aligned since v0.2.10.11, first screen rebuilt in v0.2.10.17
   (ADR-209).
   Scope: only the `.gnd-cars-hero` section the output buffer places on a
   destination Cars route that Regional Routing configures (Bangkok, Koh
   Samui, Phuket and Pattaya Cars, EN/RU) when the URL carries no search
   state. Nothing here targets the search rail, its fields, `data-sch-*`,
   the catalog, cards, Motorbikes, the Homepage or any other route; the one
   rule outside the section only adds `scroll-margin-top` to the existing
   `#rental-request` owner when a Hero precedes it, so an in-page jump lands
   below the sticky header.

   WHAT 0.2.10.17 CHANGES

   1. The Hero copy column now carries the catalog's own two explanatory
      paragraphs, directly after the H1 (moved verbatim from the standalone
      white band that used to sit between the Hero and the search form; that
      band is gone, so the form follows the Hero directly). The Hero
      therefore has to be able to grow: from 768px the band's `height` is
      now a `min-height`, so it keeps exactly its previous size whenever the
      copy fits and grows only when the copy needs it, instead of clipping
      or spilling over the car.
   2. No Hero action. The real search form sits directly below; a second
      "Find cars" button above it was a duplicate step, not a choice. The
      action markup is gone (PHP), so its rules are gone too.
   3. Phones (<= 767px) get an explicit split: the photograph is its own
      band and ALL Hero text sits under it on the solid navy the section
      already paints. Two paragraphs cannot fit over the portrait crop's
      top scrim without landing on the car, so below the photo the text is
      white on `--gnd-navy` (about 14:1) and covers 0% of the vehicle. The
      paragraphs keep the SAME three-line clamp the shipped stylesheet
      already applies to them below 768px, so the visitor reads exactly
      what the standalone band showed and the search form still lands
      within reach of the first screen. Every width from 768px up shows
      both paragraphs in full.

   Rail alignment (0.2.10.11, retargeted 0.2.10.16): from 768px the section
   breaks out to the viewport exactly like the rental group
   (`.sch-rental-hero`: 100vw and `calc(50% - 50vw)` margins, main
   stylesheet v0.2.7.0 public shell). Its inner column is the centred
   public CONTENT token `--gnd-public-content` (<= 1180px) instead of the
   extra-wide `--gnd-public-wide` search/catalog rail (<= 2000px). The
   regional information section below the catalog takes the same token, so
   the Hero copy, the section headings and the reading column all start on
   one rail.

   The box is sized here, never by the image: the section has an explicit
   band per breakpoint and the <picture> fills it with `object-fit: cover`,
   so the LCP image cannot shift layout. Crops keep every configured car in
   frame: the landscape asset (>=768px) holds the cars between 39% and 85%
   of its height and the band shows a window positioned at 74%; the
   portrait asset (<=767px) holds them between 54.5% and 84% and the phone
   photo band is 62vw tall with its window positioned at 82%, which keeps
   100% of every configured car inside the band from 360px to 767px. No glass, chips, counters,
   text gradients or carousel; no animation at all.
   ===================================================================== */
body.getndrive-visual-rebrand .gnd-cars-hero {
	position: relative !important;
	isolation: isolate;
	display: flex !important;
	flex-direction: column !important;
	align-items: stretch !important;
	box-sizing: border-box !important;
	width: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
	overflow: hidden !important;
	border-radius: 8px !important;
	background: var(--gnd-navy, #0b1f3a) !important;
	color: #ffffff !important;
}

/* Phones: the photograph is its own band in normal flow, so no text can reach the car. */
body.getndrive-visual-rebrand .gnd-cars-hero__media {
	position: relative !important;
	display: block !important;
	flex: 0 0 auto !important;
	width: 100% !important;
	max-width: none !important;
	height: clamp(200px, 62vw, 420px) !important;
	margin: 0 !important;
}

body.getndrive-visual-rebrand .gnd-cars-hero__image {
	position: absolute !important;
	inset: 0 !important;
	display: block !important;
	width: 100% !important;
	max-width: none !important;
	height: 100% !important;
	margin: 0 !important;
	object-fit: cover !important;
	object-position: 50% 82% !important;
	border-radius: 0 !important;
	box-shadow: none !important;
}

/* A short fade into the navy copy panel below, so the photo and the panel read as one band.
   It is a seam, not a scrim: no Hero text sits on the photograph at this width. */
body.getndrive-visual-rebrand .gnd-cars-hero__media::after {
	content: "";
	position: absolute;
	inset: auto 0 0;
	height: 34%;
	background: linear-gradient(180deg, rgba(11, 31, 58, 0) 0%, rgba(11, 31, 58, 0.55) 62%, rgba(11, 31, 58, 1) 100%);
	pointer-events: none;
}

/* Copy column: the centred public CONTENT rail (0.2.10.16), not the extra-wide search/catalog
   rail. `--gnd-public-wide` caps at 2000px, so on a 1440px desktop the eyebrow and H1 started
   24px from the viewport edge while the header sat on a much more centred container. This token
   caps at 1180px and is the same rail the regional information below the catalog uses, so the
   Hero copy and the page's section headings read as one column. Phones are unchanged: every
   public column token resolves to `100vw - 2 * gutter` there. */
body.getndrive-visual-rebrand .gnd-cars-hero__inner {
	position: relative !important;
	z-index: 1 !important;
	box-sizing: border-box !important;
	width: var(--gnd-public-content, calc(100% - 32px)) !important;
	max-width: var(--gnd-public-content, calc(100% - 32px)) !important;
	margin: 0 auto !important;
	padding: clamp(16px, 4.4vw, 22px) 0 clamp(18px, 5vw, 24px) !important;
}

body.getndrive-visual-rebrand .gnd-cars-hero__copy {
	max-width: 34rem !important;
	min-width: 0 !important;
}

body.getndrive-visual-rebrand .gnd-cars-hero .gnd-cars-hero__eyebrow {
	margin: 0 0 8px !important;
	padding: 0 !important;
	color: var(--gnd-lime, #a8e063) !important;
	font-size: 0.875rem !important;
	font-weight: 700 !important;
	line-height: 1.3 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
}

body.getndrive-visual-rebrand .gnd-cars-hero h1.gnd-cars-hero__title {
	margin: 0 0 12px !important;
	padding: 0 !important;
	max-width: 100% !important;
	color: #ffffff !important;
	font-size: clamp(1.75rem, 7.4vw, 2.25rem) !important;
	font-weight: 800 !important;
	line-height: 1.1 !important;
	letter-spacing: 0 !important;
	text-wrap: balance;
	overflow-wrap: break-word !important;
	hyphens: manual !important;
	text-shadow: none !important;
}

/* The moved explanatory pair. Copy is Vehicles' own and byte-unchanged; only its box moved. */
body.getndrive-visual-rebrand .gnd-cars-hero .gnd-cars-hero__lead {
	margin: 0 !important;
	padding: 0 !important;
	min-width: 0 !important;
}

/* Phones keep exactly the reading length the standalone band had at this width: the shipped
   stylesheet already clamps these two paragraphs to three lines below 768px, so moving them into
   the Hero shows the same text and keeps the search form within reach of the first screen. The
   full copy stays in the HTML, unmodified, and every width from 768px up shows all of it. */
body.getndrive-visual-rebrand .gnd-cars-hero .gnd-cars-hero__lead > p {
	display: -webkit-box !important;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
	margin: 0 0 8px !important;
	padding: 0 !important;
	max-width: 100% !important;
	color: rgba(255, 255, 255, 0.92) !important;
	font-size: 0.8125rem !important;
	font-weight: 400 !important;
	line-height: 1.5 !important;
	text-align: left !important;
	text-shadow: none !important;
	overflow-wrap: anywhere !important;
}

body.getndrive-visual-rebrand .gnd-cars-hero .gnd-cars-hero__lead > p:last-child {
	margin-bottom: 0 !important;
	color: rgba(255, 255, 255, 0.82) !important;
}

body.getndrive-visual-rebrand .gnd-cars-hero ~ .sch-rental-hero #rental-request {
	scroll-margin-top: calc(var(--gnd-hdr-h, 88px) + 12px);
}

@media (min-width: 768px) {
	/*
	 * Desktop/tablet: the copy sits on the dark side of the landscape crop again. `min-height`,
	 * not `height` (0.2.10.17): the previous band is the floor, so nothing about the image or the
	 * crop changes while the copy fits, and a longer column (RU, or a narrow 768-1024 band) grows
	 * the section instead of spilling over the car.
	 */
	body.getndrive-visual-rebrand .gnd-cars-hero {
		display: flex !important;
		flex-direction: row !important;
		align-items: center !important;
		width: 100vw !important;
		min-height: clamp(300px, 27vw, 560px) !important;
		height: auto !important;
		margin-left: calc(50% - 50vw) !important;
		margin-right: calc(50% - 50vw) !important;
		border-radius: 0 !important;
	}

	body.getndrive-visual-rebrand .gnd-cars-hero__media {
		position: absolute !important;
		inset: 0 !important;
		height: 100% !important;
	}

	body.getndrive-visual-rebrand .gnd-cars-hero__image {
		object-position: 50% 74% !important;
	}

	/*
	 * The readable side. Held darker and further across than before 0.2.10.17, because the copy
	 * column is now taller and wider: the text half stays at or above 0.78 alpha and only then
	 * falls away, so the H1, the marker and both paragraphs keep a WCAG-safe contrast over any
	 * frame while the car half of the picture stays clear.
	 */
	body.getndrive-visual-rebrand .gnd-cars-hero__media::after {
		inset: 0 !important;
		height: auto !important;
		background: linear-gradient(90deg, rgba(11, 31, 58, 0.94) 0%, rgba(11, 31, 58, 0.9) 34%, rgba(11, 31, 58, 0.78) 48%, rgba(11, 31, 58, 0.34) 62%, rgba(11, 31, 58, 0) 76%) !important;
	}

	body.getndrive-visual-rebrand .gnd-cars-hero__inner {
		padding: clamp(26px, 2.6vw, 38px) 0 !important;
	}

	body.getndrive-visual-rebrand .gnd-cars-hero__copy {
		max-width: min(46%, 36rem) !important;
	}

	body.getndrive-visual-rebrand .gnd-cars-hero h1.gnd-cars-hero__title {
		/*
		 * The upper bound is the same 3rem as before; the lower bound is raised so the route H1
		 * stays on one line at wide desktop widths when it fits naturally, and the `balance`
		 * above still wraps it normally on tablet and phone instead of forcing overflow.
		 */
		font-size: clamp(2rem, 2.9vw, 3rem) !important;
		margin-bottom: 16px !important;
	}

	body.getndrive-visual-rebrand .gnd-cars-hero .gnd-cars-hero__lead > p {
		display: block !important;
		-webkit-line-clamp: none;
		overflow: visible;
		margin-bottom: 10px !important;
		font-size: clamp(0.875rem, 1.02vw, 1rem) !important;
		line-height: 1.6 !important;
	}
}
