/* ===========================================================================
   hero-styles.css — hero treatments and page-scoped fixes
   Hansen Trucking Custom Theme by Up At Last

   Third of the four stylesheets; see the top of style.css for the full order.
   kit-design.css — the ~36.7 KB site design, exported from what used to be
   Elementor's Site Settings > Custom CSS — loads AFTER this file, so anything
   here that has to beat it wins on specificity, not on order.

   Each page ALSO carries its own copy of the .htx rules in a <style> block
   inside its own markup, and that block sits in the body — after this file.
   So page-scoped overrides here need one extra level of specificity, which is
   what the .page-id-NNN prefixes below are for.

   Page IDs used here:
     Split hero:  1884 /fleet/  1888 /services/flatbed/  1890 /gallery/
                  1942 /services/grain/   1946 /services/oversize/
                  1949 /services/dump/    1952 /services/ag/
     Framed card: 937 /careers/           946 /contact-us/
     Blended:     927 /about-us/
     Raw HTML in the theme's own chrome: 3 /privacy-policy/
   =========================================================================== */


/* ---------------------------------------------------------------------------
   1. Hero photos were stopping short of the right edge — 15 Sep 2026

   .htx .hero-photo sets `aspect-ratio: 16/7` together with `max-height: NNvh`.
   When the height cap bites, the browser transfers that cap back through the
   aspect ratio into a *width* cap, so the photo gets narrower instead of
   shorter. The shorter the browser window, the bigger the gap on the right:
   in a 1440px window a 64vh cap gave a 1317px hero at 900px tall and only
   1024px at 700px tall.

   A min-width beats that transferred max-width, so the hero stays full-bleed
   and the cap does what it was meant to do — limit height only. object-fit:
   cover on the <img> already handles the crop.

   Still applies to every page NOT using a treatment in section 2 below.
   --------------------------------------------------------------------------- */
.htx .hero-photo {
	min-width: 100%;
}


/* ---------------------------------------------------------------------------
   2. Hero treatments — 15 Sep 2026

   The client wants to keep using their own photographs, and several of them are
   small. The old hero cropped every photo to 16:7 and stretched it across the
   full width, which threw away half the frame and then enlarged what was left.

   These treatments let each photo be shown closer to its real size. They are
   pure CSS — the page markup is untouched, so editing the copy in the HTML
   widget still works exactly as before.

   The markup they work against, on every page:

       div.hero-photo
         img
         div.ov            (absolute, full-bleed, carries the gradient)
           div.wh          (the copy: .khero, h1, p.sub, .cta, .kot)

   To add a page to the split treatment, add its .page-id-NNN to the :is()
   lists below. Nothing else needs changing.
   --------------------------------------------------------------------------- */


/* --- Option A: split hero --------------------------------------------------
   Copy on a solid panel, photo in its own column keeping a natural crop. The
   photo is shown at roughly half width, so most of these originals end up
   being downscaled rather than enlarged.

   /fleet/ (2048px) 0.68x · /gallery/ (2048px) 0.68x · /services/flatbed/
   (1599px) 0.87x · /careers/ (463px) 2.99x — see the note further down.     */

:is(.page-id-1884, .page-id-1890, .page-id-1888, .page-id-1942, .page-id-1946, .page-id-1949, .page-id-1952) .htx .hero-photo {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 1fr;
	aspect-ratio: auto;
	max-height: none;
	min-height: min(72vh, 620px);
	background: var(--chassis);
}

:is(.page-id-1884, .page-id-1890, .page-id-1888, .page-id-1942, .page-id-1946, .page-id-1949, .page-id-1952) .htx .hero-photo > img {
	grid-area: 1 / 2 / 2 / 3;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Soften the seam between the panel and the photo. */
:is(.page-id-1884, .page-id-1890, .page-id-1888, .page-id-1942, .page-id-1946, .page-id-1949, .page-id-1952) .htx .hero-photo::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	right: 0;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(90deg, var(--chassis) 0%, rgba(14, 18, 22, 0) 26%);
}

/* .ov stops being a full-bleed overlay and becomes the left column. */
:is(.page-id-1884, .page-id-1890, .page-id-1888, .page-id-1942, .page-id-1946, .page-id-1949, .page-id-1952) .htx .hero-photo .ov {
	position: relative;
	inset: auto;
	z-index: 2;
	grid-area: 1 / 1 / 2 / 2;
	background: none;
	display: flex;
	align-items: center;
}

/* Left edge of the copy lines up with the 1200px content column used by the
   rest of the page, instead of centering inside it. */
:is(.page-id-1884, .page-id-1890, .page-id-1888, .page-id-1942, .page-id-1946, .page-id-1949, .page-id-1952) .htx .hero-photo .ov .wh {
	max-width: none;
	margin: 0;
	padding: 64px 48px 64px max(32px, calc((100vw - 1200px) / 2));
}

/* 80px headlines were sized for a full-width band; half the width needs less. */
:is(.page-id-1884, .page-id-1890, .page-id-1888, .page-id-1942, .page-id-1946, .page-id-1949, .page-id-1952) .htx .hero-photo h1 {
	font-size: clamp(32px, 3.4vw, 54px);
	max-width: 100%;
}

:is(.page-id-1884, .page-id-1890, .page-id-1888, .page-id-1942, .page-id-1946, .page-id-1949, .page-id-1952) .htx .hero-photo p.sub {
	max-width: 520px;
}

/* --- Option B: framed card — /careers/ (937) and /contact-us/ (946) ---------
   Both photos are small AND awkwardly shaped for a wide band: careers is
   463x526 portrait, contact-us is 922x921 square. Any layout that stretches
   them across a column still enlarges them.

   So they are not stretched at all. The photo is shown at a fixed 440px in a
   bordered card at its own natural aspect ratio — no crop, nothing hidden, and
   at a size the file can actually fill:

     /careers/    463px wide shown at 440  -> 1.9x on a retina screen (was 3.0x)
     /contact-us/ 922px wide shown at 440  -> 0.95x, genuinely sharp

   It also reads as a deliberate portrait rather than a stretched backdrop, and
   it will work with any photo the client sends, however small.             */

:is(.page-id-937, .page-id-946) .htx .hero-photo {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 56px;
	align-items: center;
	aspect-ratio: auto;
	max-height: none;
	min-height: 0;
	overflow: visible; /* let the card's shadow out */
	background: var(--chassis);
	padding: 64px max(32px, calc((100vw - 1200px) / 2));
}

:is(.page-id-937, .page-id-946) .htx .hero-photo > img {
	grid-area: 1 / 2 / 2 / 3;
	width: 440px;
	max-width: 100%;
	height: auto;
	align-self: center;
	border: 1px solid var(--hairline-2);
	border-radius: 12px;
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
	filter: saturate(0.97) contrast(1.05);
}

:is(.page-id-937, .page-id-946) .htx .hero-photo .ov {
	position: relative;
	inset: auto;
	grid-area: 1 / 1 / 2 / 2;
	background: none;
	display: flex;
	align-items: center;
}

:is(.page-id-937, .page-id-946) .htx .hero-photo .ov .wh {
	max-width: none;
	margin: 0;
	padding: 0;
}

/* Short amber rule above the kicker, the way the rest of the site marks a
   section start. */
:is(.page-id-937, .page-id-946) .htx .hero-photo .ov .wh::before {
	content: "";
	display: block;
	width: 56px;
	height: 3px;
	border-radius: 2px;
	background: var(--amber);
	margin: 0 0 22px;
}

:is(.page-id-937, .page-id-946) .htx .hero-photo h1 {
	font-size: clamp(32px, 3.4vw, 54px);
	max-width: 100%;
}

:is(.page-id-937, .page-id-946) .htx .hero-photo p.sub {
	max-width: 520px;
}

@media (max-width: 900px) {

	:is(.page-id-937, .page-id-946) .htx .hero-photo {
		grid-template-columns: 1fr;
		grid-template-rows: auto auto;
		gap: 32px;
		padding: 40px 22px 44px;
	}

	:is(.page-id-937, .page-id-946) .htx .hero-photo > img {
		grid-area: 1 / 1 / 2 / 2;
		width: 100%;
		max-width: 420px;
		justify-self: center;
	}

	:is(.page-id-937, .page-id-946) .htx .hero-photo .ov {
		grid-area: 2 / 1 / 3 / 2;
	}
}

/* Under 900px the columns stack: photo on top at a natural 4:3, copy below. */
@media (max-width: 900px) {

	:is(.page-id-1884, .page-id-1890, .page-id-1888, .page-id-1942, .page-id-1946, .page-id-1949, .page-id-1952) .htx .hero-photo {
		grid-template-columns: 1fr;
		grid-template-rows: auto auto;
		min-height: 0;
	}

	:is(.page-id-1884, .page-id-1890, .page-id-1888, .page-id-1942, .page-id-1946, .page-id-1949, .page-id-1952) .htx .hero-photo > img {
		grid-area: 1 / 1 / 2 / 2;
		aspect-ratio: 4 / 3;
		height: auto;
	}

	:is(.page-id-1884, .page-id-1890, .page-id-1888, .page-id-1942, .page-id-1946, .page-id-1949, .page-id-1952) .htx .hero-photo::after {
		display: none;
	}

	:is(.page-id-1884, .page-id-1890, .page-id-1888, .page-id-1942, .page-id-1946, .page-id-1949, .page-id-1952) .htx .hero-photo .ov {
		grid-area: 2 / 1 / 3 / 2;
	}

	:is(.page-id-1884, .page-id-1890, .page-id-1888, .page-id-1942, .page-id-1946, .page-id-1949, .page-id-1952) .htx .hero-photo .ov .wh {
		padding: 38px 22px 44px;
	}

}


/* --- /gallery/ (1890): tighter crop ----------------------------------------
   flat_hills.jpg is a wide 1600x1200 landscape with the tractor at the right of
   the frame and a lot of empty foreground. Centered in a half-width column it
   clipped the cab and led with dirt. Shifting right keeps the whole truck, and
   so the cab is not clipped.

   No zoom here on purpose: the image is a grid item, and .hero-photo only clips
   at its own edges — so a transform: scale() would bleed left across the copy
   panel, which has no background of its own in the split layout. */
.page-id-1890 .htx .hero-photo > img {
	object-position: 88% center;
}

@media (max-width: 900px) {

	.page-id-1890 .htx .hero-photo > img {
		object-position: 72% center;
	}
}


/* --- /services/ag/ (1952): tighter crop ------------------------------------
   field_2.jpg is 1500x2000 portrait. Centered, the column showed a lot of empty
   sky above the truck and bare grass below it. Pulling the focal point up puts
   the tractor and hopper in the middle of the frame. */
.page-id-1952 .htx .hero-photo > img {
	object-position: center 36%;
}


/* ---------------------------------------------------------------------------
   3. Rescued from Elementor Pro's per-widget Custom CSS — 15 Sep 2026

   Every page carried a block of per-widget Custom CSS, which is an Elementor
   PRO feature. It stopped applying the moment Pro was switched off — silently.

   Most of it was `.htx .hero-photo{width:100% !important}`, which is why the
   heroes suddenly stopped filling the width: the fix had been living in a Pro
   feature all along. Section 1 above replaces it properly.

   Three pages had rules that did something else, and those are ported here. The
   dead originals are still sitting in each page's widget settings; they do
   nothing and can be deleted whenever the HTML widget is next opened.
   --------------------------------------------------------------------------- */

/* Home: on a phone the hero copy sits directly over the photo, so it needs a
   heavier vertical scrim and a text shadow to stay readable. */
@media (max-width: 820px) {

	.page-id-1625 .htx .hero-photo > img {
		filter: saturate(0.9) contrast(1.08) brightness(0.8);
	}

	.page-id-1625 .htx .hero-photo .ov {
		background: linear-gradient(180deg, rgba(14, 18, 22, 0.85) 0%, rgba(14, 18, 22, 0.6) 32%, rgba(14, 18, 22, 0.25) 60%, rgba(14, 18, 22, 0.75) 100%);
	}

	.page-id-1625 .htx .hero-photo h1,
	.page-id-1625 .htx .hero-photo p.sub {
		text-shadow: 0 2px 10px rgba(0, 0, 0, 0.7), 0 1px 2px rgba(0, 0, 0, 0.9);
	}
}

/* Careers: the two-up pay/benefits grid has to collapse on small phones.
   !important is needed because the grid is set by an inline style. */
@media (max-width: 640px) {

	.page-id-937 .htx div[style*="grid-template-columns:1fr 1fr;gap:16px"] {
		grid-template-columns: 1fr !important;
	}
}

/* Fleet: the "We've been at this a minute" 1.2fr/1fr block stacks on tablet,
   and the heritage badge gets centered at a sane size. */
@media (max-width: 820px) {

	.page-id-1884 .htx section.blk .wr[style*="1.2fr"] {
		grid-template-columns: 1fr !important;
		gap: 24px !important;
	}

	.page-id-1884 .htx section.blk .wr[style*="1.2fr"] > div:last-child {
		max-width: 300px;
		margin: 24px auto 0;
	}
}


/* --- Option C: blended backdrop — /about-us/ (927) -------------------------
   Stays full-bleed and cinematic, but the photo is desaturated into the brand
   dark and covered with a gradient and a film grain, so it reads as texture
   rather than a photograph you are meant to inspect. A 960px original stops
   mattering.                                                                  */

.page-id-927 .htx .hero-photo > img {
	filter: grayscale(1) contrast(1.18) brightness(0.52);
}

.page-id-927 .htx .hero-photo::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	opacity: 0.14;
	mix-blend-mode: overlay;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E");
}

.page-id-927 .htx .hero-photo .ov {
	z-index: 2;
	background:
		linear-gradient(90deg, var(--chassis) 0%, rgba(14, 18, 22, 0.94) 30%, rgba(14, 18, 22, 0.6) 68%, rgba(14, 18, 22, 0.8) 100%),
		radial-gradient(110% 80% at 78% 42%, rgba(227, 169, 74, 0.18), transparent 62%);
}

@media (max-width: 820px) {

	.page-id-927 .htx .hero-photo .ov {
		background:
			linear-gradient(0deg, var(--chassis) 0%, rgba(14, 18, 22, 0.9) 45%, rgba(14, 18, 22, 0.55) 100%),
			radial-gradient(120% 70% at 50% 30%, rgba(227, 169, 74, 0.16), transparent 65%);
	}
}