/*
 * Bold Industrial — logged-out homepage design system (0.44.0)
 *
 * Scoped to the logged-out front page (enqueued in functions.php on
 * is_front_page() && ! is_user_logged_in()), so none of this touches the
 * logged-in welcome hero (.intro without .hero-marketing) or other pages.
 *
 * Tokens reused from theme.json: --wp--preset--color--brand-primary (#0a48a8),
 * --blue-700 (#172e73), --red (#970100). Fluid type via clamp().
 */

:root {
	--erpc-home-ink:    #14181f;            /* near-black headline ink   */
	--erpc-home-body:   #36414e;            /* slate body copy (darker than muted) */
	--erpc-home-muted:  #51606f;            /* muted body / trust text   */
	--erpc-home-red:    var(--wp--preset--color--red, #970100);
	--erpc-home-red-hover: #7a0100;         /* darkened --erpc-home-red for CTA hover */
	--erpc-home-tint:   #f3f6fb;            /* tinted band background     */
	--erpc-home-line:   #e2e8f1;            /* hairline / card border     */
	--erpc-home-pad-y:  clamp(3rem, 6vw, 6rem);
}

/* ── Hero — Bold Industrial ─────────────────────────────────────────── */

.intro.hero-marketing {
	position: relative;
	padding: 0;
	/* Track the art's own wide/short ratio (~3.6:1) instead of forcing a
	   tall box — over-tall containers cover-upscaled the 436px-tall source
	   into a blur. Cap height so the source barely scales. */
	min-height: clamp(320px, 28vw, 440px);
	display: flex;
	align-items: center;
	/* VERY light, narrow left fade — just enough to seat the headline on
	   the art's own white tread zone; the technician on the right stays
	   fully crisp and un-hazed. */
	background-image:
		linear-gradient(90deg, rgba(255,255,255,0.78) 0%, rgba(255,255,255,0.32) 22%, rgba(255,255,255,0) 42%),
		var(--hero-bg, none);
	background-repeat: no-repeat, no-repeat;
	background-position: left center, right center;
	background-size: cover, cover;
	overflow: hidden;
}

/* No photo set → flat tinted panel so the hero still reads as designed. */
.intro.hero-marketing:not(.has-bg) {
	background-image: linear-gradient(120deg, var(--surface-base, #ffffff) 0%, var(--erpc-home-tint) 100%);
}

/* Optional background video sits behind the content; the --hero-bg image is
   the poster/fallback. Right-anchored to match the banner art framing. */
.intro.hero-marketing .hero-bg-video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: right center;
	z-index: 0;
}
.intro.hero-marketing.has-video .container { position: relative; z-index: 1; }
/* Same light left-scrim over the video so the dark headline stays legible. */
.intro.hero-marketing.has-video::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background: linear-gradient(90deg, rgba(255,255,255,0.82) 0%, rgba(255,255,255,0.35) 22%, rgba(255,255,255,0) 44%);
}
@media (prefers-reduced-motion: reduce) {
	/* Honor reduced-motion: drop the video, keep the poster image (--hero-bg). */
	.intro.hero-marketing .hero-bg-video { display: none; }
}

.intro.hero-marketing .container { width: 100%; }

.intro.hero-marketing .row {
	flex-direction: row;
	padding: clamp(2rem, 5vw, 4.5rem) clamp(1.25rem, 4vw, 3rem);
}

.intro.hero-marketing .user-info {
	/* Keep the copy in the left ~half so the headline never runs over the
	   technician. */
	max-width: min(52%, 560px);
	display: flex;
	flex-direction: column;
	gap: 1.1rem;
}

/* Eyebrow with the red kicker bar (CSS pseudo-element, no markup). */
.hero-eyebrow {
	position: relative;
	margin: 0;
	padding-left: 3.25rem;
	font-size: var(--wp--preset--font-size--sm, 0.875rem);
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--brand-primary, #0a48a8);
}
.hero-eyebrow::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.55em;
	width: 2.5rem;
	height: 3px;
	background: var(--erpc-home-red);
	border-radius: 2px;
}

/* Oversized condensed uppercase headline (overrides the base .header-welcome). */
.intro.hero-marketing .header-welcome {
	margin: 0;
	font-size: clamp(2.3rem, 5vw, 4.5rem);
	font-weight: 800;
	line-height: 0.95;
	letter-spacing: -0.015em;
	text-transform: uppercase;
	color: var(--blue-700, #172e73);
}

.intro.hero-marketing .header-customer-info {
	margin: 0;
	max-width: 46ch;
	font-size: clamp(1rem, 1.6vw, 1.25rem);
	font-weight: 500;
	color: var(--erpc-home-muted);
}

/* CTAs — Join (solid red) + Login (outline), hover-fill + focus ring. */
.intro.hero-marketing .account-cta {
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: 0.5rem;
}
.intro.hero-marketing .account-cta .button {
	margin: 0;
	padding: 0.85rem 1.9rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	border-radius: var(--button-border-radius, 4px);
}
.intro.hero-marketing .btn-primary {
	background-color: var(--erpc-home-red);
	color: var(--text-inverse, #ffffff);
	border: 2px solid var(--erpc-home-red);
}
.intro.hero-marketing .btn-primary:hover {
	background-color: var(--erpc-home-red-hover);
	border-color: var(--erpc-home-red-hover);
}
.intro.hero-marketing .btn-outline {
	color: var(--blue-700, #172e73);
	border: 2px solid var(--blue-700, #172e73);
}
.intro.hero-marketing .btn-outline:hover,
.intro.hero-marketing .btn-outline:focus-visible {
	background-color: var(--blue-700, #172e73);
	color: var(--text-inverse, #ffffff);
}
.intro.hero-marketing .button:focus-visible {
	outline: 3px solid var(--wp--preset--color--brand-primary, #0a48a8);
	outline-offset: 3px;
}

/* Trust strip — dot-separated, muted. */
.hero-trust {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 1.4rem;
	margin: 0.75rem 0 0;
	padding: 0;
	list-style: none;
	font-size: var(--wp--preset--font-size--sm, 0.875rem);
	font-weight: 600;
	color: var(--erpc-home-muted);
}
.hero-trust li {
	position: relative;
	padding-left: 1.35rem;
}
.hero-trust li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--erpc-home-red);
}

/* ── Section rhythm + headings ──────────────────────────────────────── */

.erpc-home-section {
	padding-top: var(--erpc-home-pad-y);
	padding-bottom: var(--erpc-home-pad-y);
}
.erpc-home-section.erpc-home-brands,
.erpc-home-section.erpc-home-about { background: var(--erpc-home-tint); }

.erpc-section-heading {
	position: relative;
	margin: 0 0 1.5rem;
	padding-bottom: 0.65rem;
	font-size: clamp(1.6rem, 2.6vw, 2.2rem);
	font-weight: 800;
	letter-spacing: -0.01em;
	color: var(--erpc-home-ink);
}
.erpc-section-heading::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 3rem;
	height: 3px;
	background: var(--erpc-home-red);
	border-radius: 2px;
}

/* ── About + Industries ─────────────────────────────────────────────── */

.erpc-home-about__cols { gap: clamp(2rem, 5vw, 4rem); }
.erpc-home-about p {
	color: var(--erpc-home-body);
	line-height: 1.7;
	margin: 0 0 1rem;
}
.erpc-home-about__aside {
	background: var(--surface-base, #ffffff);
	border: 1px solid var(--erpc-home-line);
	border-radius: 14px;
	padding: clamp(1.5rem, 3vw, 2.25rem);
	box-shadow: 0 10px 30px rgba(20, 40, 80, 0.05);
	align-self: start;
}
.erpc-industries-list {
	margin: 0;
	padding: 0;
	list-style: none;
}
.erpc-industries-list li {
	position: relative;
	padding: 0.75rem 0 0.75rem 1.9rem;
	font-weight: 600;
	color: var(--blue-700, #172e73);
	border-bottom: 1px solid var(--erpc-home-line);
}
.erpc-industries-list li:last-child { border-bottom: 0; }
.erpc-industries-list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	width: 0.5rem;
	height: 0.5rem;
	border-right: 2px solid var(--erpc-home-red);
	border-bottom: 2px solid var(--erpc-home-red);
	transform: translateY(-50%) rotate(-45deg);
}

/* ── Brands band ────────────────────────────────────────────────────── */

.erpc-home-brands .erpc-brand-list__heading,
.erpc-home-brands erpc-brand-list { text-align: center; }
/* The brand-list custom element has no align support, so the constrained
   group's contentSize sizes it — make sure it fills + centers. The
   --erpc-brand-list-* custom props inherit across the shadow boundary to
   drive the grid: a FIXED 6-up grid (12 brands ÷ 6 = 2 even rows). 12
   also divides by 4/3/2, so rows stay even at every breakpoint below. */
.erpc-home-brands {
	text-align: center;
	--erpc-brand-list-grid-cols: repeat(6, 1fr);
	--erpc-brand-list-grid-gap: 1.25rem;
	--erpc-brand-list-logo-max: 68px;
	/* Inner breathing room so wide logos don't run to the card edge. */
	--erpc-brand-list-card-pad: 1.25rem;
}
.erpc-home-brands > erpc-brand-list { display: block; width: 100%; }

@media (max-width: 1000px) { .erpc-home-brands { --erpc-brand-list-grid-cols: repeat(4, 1fr); } }
@media (max-width: 700px)  { .erpc-home-brands { --erpc-brand-list-grid-cols: repeat(3, 1fr); } }
@media (max-width: 480px)  { .erpc-home-brands { --erpc-brand-list-grid-cols: repeat(2, 1fr); } }

/* ── Locations — breathing room before the footer ──────────────────── */

.erpc-locations-block { padding-bottom: var(--erpc-home-pad-y); }

/* ── Scroll-reveal (progressive; home.js adds .is-revealed) ──────────── */

.js-erpc-reveal {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity 0.6s ease, transform 0.6s ease;
	will-change: opacity, transform;
}
.js-erpc-reveal.is-revealed {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.js-erpc-reveal { opacity: 1; transform: none; transition: none; }
}

/* ── Responsive ─────────────────────────────────────────────────────── */

@media (max-width: 781px) {
	.intro.hero-marketing {
		min-height: 0;
		/* On narrow screens the wide banner can't show both text + tech,
		   so drop the photo to a top band and keep the text on a clean
		   light panel for legibility. */
		background-image: linear-gradient(120deg, var(--surface-base, #ffffff) 0%, var(--erpc-home-tint) 100%);
	}
	.intro.hero-marketing .user-info { max-width: none; }
	.erpc-home-about__aside { margin-top: 1.5rem; }
}