/* ============================================================
   AL HOMES - HOMEPAGE
   assets/css/al-homepage.css
   v3.12

   Auto-loaded by inc/al-page-templates.php whenever
   page-templates/al_homepage.php is the active template.
   Filename is the contract: al_homepage.php -> al-homepage.css.

   NO font stacks and NO hex values are declared in this file.
   Everything comes from inc/al-design-tokens.php via var().

   Tokens are --alh-*, NOT --al-*. navigation.css owns the --al-*
   namespace and prints later in the cascade, so anything named --al-
   here would be silently overridden.

   Type scale is the Figma inspect, not the Tailwind export:
     H1        Sofia Pro    40 / 400 / normal
     hero sub  Afacad Flux  24 / 300 / normal
     H2        Sofia Pro    40 / 400
     card H3   Afacad Flux  20 / 500
     body      Afacad Flux  18 / 300
     eyebrow   Afacad Flux  16 / 400 uppercase

   Section 5 (testimonials) is intentionally absent. That shortcode
   owns its own full-width design. Do not add rules for it here.
   ============================================================ */

.al-home {
	font-family: var(--alh-font-body);
	color: var(--alh-dark-text);
}

.al-home *,
.al-home *::before,
.al-home *::after { box-sizing: border-box; }

.al-home img { max-width: 100%; }

.alh-wrap {
	width: 100%;
	max-width: 1200px;
	margin-inline: auto;
}

/* ---------- shared button ---------- */
.al-home .alh-btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 10px 25px;
	/* 0.5px, not 1px: the Figma px export specifies a half-pixel rule, and
	   the transparent border on the filled variant has to match it or the
	   two buttons sitting side by side end up 1px apart in height. */
	border: 0.5px solid transparent;
	border-radius: 5px;
	font-family: var(--alh-font-body);
	font-size: 18px;
	font-weight: 400;
	line-height: normal;
	text-transform: capitalize;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .2s, color .2s, border-color .2s;
}
.alh-btn svg { flex: none; }

.al-home .alh-btn--primary { background: var(--alh-primary); color: #fff; }
.al-home .alh-btn--primary:hover { background: var(--alh-primary-hover); color: #fff; }

/* Secondary button ("Schedule A Tour"). Same component as the Back button
   in the inquiry form: white fill, 0.5px Dark-Text rule, Dark-Text label;
   on hover it fills with Primary and the label flips to white.

   The Figma hover spec lists only border-radius, background and color. The
   border is carried over from the resting state, which would leave a dark
   outline sitting on a brown fill. Matching the inquiry form's Back button,
   the border moves to Primary too so the hover reads as one solid shape. */
.al-home .alh-btn--outline {
	background: #fff;
	border-color: var(--alh-dark-text);
	color: var(--alh-dark-text);
}
.al-home .alh-btn--outline:hover {
	background: var(--alh-primary);
	border-color: var(--alh-primary);
	color: #fff;
}

/* ============================================================
   1. HERO

   GEOMETRY IS THE FIGMA, EXACTLY:
     frame           1440 x 1024
     content block   left 270, top 213, width 900
                     (270 + 900 + 270 = 1440, so 900 centered)
     inner gaps      10 title -> subtitle, 48 copy -> buttons

   The content is TOP-ANCHORED at 213px, NOT vertically centered.
   That is what puts the copy in the sky above the rooflines. Using
   align-items:center drops it onto the houses and reads wrong.

   The 213px already accounts for the 96px transparent header sitting
   over the hero, so it leaves ~117px of clear air beneath the nav.
   ============================================================ */
.alh-hero {
	position: relative;
	min-height: 1024px;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	overflow: hidden;

	/* PLACEHOLDER, and it matters more than it looks.
	   This was #1a1613 — carried over from the old dark evening hero. The
	   revamp hero is a bright morning sky and the copy over it is
	   #2A2A2A, so for the few hundred ms before the image arrives you got
	   dark text on near-black. That is most of the "pangit" Paul saw.

	   A sky-toned gradient means the pre-image state already looks close
	   to the finished thing, so the fade below is a polish rather than a
	   cover-up — and if the image never loads at all, the section still
	   reads correctly instead of going dark.

	   Approximated from the render. Eyedropper Cover.jpg and tune if you
	   want it exact; nothing else depends on these three values. */
	background: linear-gradient(180deg, #AFCFE8 0%, #DCE9F3 55%, #EDE7DE 100%);
}

/* ---- image-gated fade-in ----
   Both the image and the copy start hidden and are revealed together by
   .is-ready, which al_homepage.php adds from the image's own onload.
   The copy is 120ms behind the image so it settles onto a sky that is
   already there rather than arriving with it.

   NOTHING here can trap the hero: the template has three separate paths
   to .is-ready (onload, onerror, a 2s ceiling) plus a <noscript> block
   that forces both to opacity 1. */
.alh-hero__bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
	opacity: 0;
	transition: opacity .5s ease;
}
.alh-hero.is-ready .alh-hero__bg { opacity: 1; }
.alh-hero__inner {
	position: relative;
	z-index: 1;
	width: 900px;
	max-width: calc(100% - 40px);
	/* Figma: content top edge at 213px on a 96px header = 117px of clear
	   air beneath the nav. navigation.css publishes the REAL header
	   height as --al-header-height (93px at the time of writing), so
	   derive from it and the gap stays right if that value ever moves. */
	padding-top: calc(var(--al-header-height, 93px) + 117px);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 48px;
	text-align: center;
	opacity: 0;
	transition: opacity .5s ease .12s;
}
.alh-hero.is-ready .alh-hero__inner { opacity: 1; }

/* Anyone who asked not to be animated gets it all at once, no fade. */
@media (prefers-reduced-motion: reduce) {
	.alh-hero__bg,
	.alh-hero__inner { transition: none; }
}
.alh-hero__copy {
	display: flex;
	flex-direction: column;
	gap: 10px;
	width: 100%;
}

.al-home .alh-hero__title {
	margin: 0;
	font-family: var(--alh-font-display);
	font-size: 40px;
	font-weight: 400;
	font-style: normal;
	line-height: normal;
	color: var(--alh-dark-text);
}
.al-home .alh-hero__sub {
	margin: 0;
	font-family: var(--alh-font-body);
	font-size: 24px;
	font-weight: 300;
	font-style: normal;
	line-height: normal;
	color: var(--alh-dark-text);
}
.alh-hero__actions { display: flex; align-items: center; gap: 20px; }

/* light-on-dark variant, unused while the hero is a bright sky */
.alh-hero--light .alh-hero__title,
.alh-hero--light .alh-hero__sub { color: #fff; }
.alh-hero--light .alh-btn--outline { background: transparent; border-color: #fff; color: #fff; }
.alh-hero--light .alh-btn--outline:hover { background: #fff; color: var(--alh-dark-text); }
.alh-hero--light::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background: linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,.45) 100%);
}

/* ============================================================
   2. VALUE PROPS
   ============================================================ */
.alh-values {
	background: var(--alh-100);
	padding: 48px 112px;
}
.al-home .alh-values__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
}
.al-home .alh-values__item {
	list-style: none;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 28px;
	padding: 0 28px;
	text-align: center;
}
.alh-values__item + .alh-values__item { border-left: 1px solid var(--alh-400); }
.alh-values__icon { color: var(--alh-600); line-height: 0; }
.al-home .alh-values__item p {
	margin: 0;
	font-family: var(--alh-font-body);
	font-size: 20px;
	font-weight: 400;
	line-height: 1.4;
	color: var(--alh-dark-text);
}

/* ============================================================
   3. ABOUT
   ============================================================ */
/* Figma inspect on this section: padding 60px 120px on a 1440 frame,
   which leaves exactly the 1200px content box .alh-wrap already caps at. */
.alh-about {
	background: #fff;
	padding: 60px 120px;
}
.al-home .alh-about__eyebrow {
	margin: 0 0 20px;
	font-family: var(--alh-font-body);
	font-size: 16px;
	font-weight: 400;
	text-transform: uppercase;
	color: var(--alh-dark-text);
}
/* Straight from the Figma px export: heading column 450px, row gap 60px,
   and 60px down to the cards. 450 + 60 + 690 = 1200. The Tailwind export's
   w-96 (384px) and my own screenshot measurements were both wrong. */
.alh-about__lead {
	display: grid;
	grid-template-columns: 450px 1fr;
	gap: 60px;
	margin-bottom: 60px;
}

/* Designed line break, and at 36px it is doing MORE work than it was at 40px,
   not less: line one measures ~408px and adding " by" only reaches ~441px,
   which still fits inside the 450px column. Left to the container the browser
   would happily wrap it as "...Built by / AL Homes." — the wrong break. The
   space before the <br> is load-bearing: when the break is hidden below the
   breakpoint the words must not run together. */
.al-home .alh-break { display: inline; }

/* The mirror of .alh-break: hidden by default, shown only on mobile.
   Used on the Featured Homes heading, which at 32px in the 342px mobile
   column breaks itself as "Featured homes & available / lots" — a 49px
   orphan. Same load-bearing space before the <br>: with the break hidden
   on desktop the line has to read as one sentence. */
.al-home .alh-break-mobile { display: none; }
/* 36px, confirmed by the Figma dev-mode inspect on this text layer.
   NOT 40px — that is the hero H1 only. Both showed as text-4xl in the
   Tailwind export, which cannot tell 36 and 40 apart. */
.al-home .alh-about__title {
	margin: 0;
	font-family: var(--alh-font-display);
	font-size: 36px;
	font-weight: 400;
	line-height: normal;
	color: var(--alh-dark-text);
}
.alh-about__body { display: flex; flex-direction: column; align-items: flex-start; gap: 30px; }
.al-home .alh-about__body p {
	margin: 0;
	font-family: var(--alh-font-body);
	font-size: 18px;
	font-weight: 300;
	line-height: 1.6;
	color: var(--alh-dark-text);
}

.alh-about__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.alh-card { display: flex; flex-direction: column; }
.alh-card img {
	width: 100%;
	height: 232px;
	object-fit: cover;
	display: block;
	margin-bottom: 30px;
}
.al-home .alh-card h3 {
	margin: 0 0 10px;
	font-family: var(--alh-font-body);
	font-size: 20px;
	font-weight: 500;
	line-height: 1.35;
	color: var(--alh-dark-text);
}
.al-home .alh-card p {
	margin: 0;
	font-family: var(--alh-font-body);
	font-size: 18px;
	font-weight: 300;
	line-height: 1.6;
	color: var(--alh-dark-text);
}

/* ============================================================
   4. FEATURED HOMES
   Only the header wrapper lives here. The cards belong to
   featured_homes_v5.
   ============================================================ */
.alh-featured { background: #fff; padding: 80px 112px; }

.al-featured-header { margin-bottom: 28px; }
.al-featured-header-inner {
	max-width: 1200px;
	margin-inline: auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 80px;
}
/* 36px by INFERENCE, not measurement. The About heading inspect proved
   text-4xl means 36px for a section H2 here, while the hero H1 inspect
   proved 40px for the H1. No px inspect has been taken of this heading or
   the CTA one yet. If either turns out to be 40px, change it back here. */
.al-home .al-featured-title {
	margin: 0 0 10px;
	font-family: var(--alh-font-display);
	font-size: 36px;
	font-weight: 400;
	line-height: normal;
	color: var(--alh-dark-text);
}
.al-home .al-featured-desc {
	margin: 0;
	font-family: var(--alh-font-body);
	font-size: 18px;
	font-weight: 300;
	line-height: 1.6;
	color: var(--alh-dark-text);
}
.al-home .al-btn-cta {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	text-decoration: none;
	color: var(--alh-primary);
	font-family: var(--alh-font-body);
	font-size: 18px;
	font-weight: 400;
	text-transform: capitalize;
	white-space: nowrap;
}
.al-btn-cta-icon {
	width: 36px;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--alh-primary);
	transition: background-color .2s;
}
.al-btn-cta:hover .al-btn-cta-icon { background: var(--alh-primary-hover); }

/* ============================================================
   5. TESTIMONIALS - none. Owned by the shortcode. Do not add.
   ============================================================ */

/* ============================================================
   6. CTA + INQUIRY
   The form is [elementor-template id="2875"] and carries its own
   Elementor styles. Only the heading block is ours.
   ============================================================ */
/* 120px horizontal, same as .alh-about, so the CTA content box is the
   same 1200px as every other section (1440 - 120 - 120). It was 80px,
   which quietly made this one section wider than the rest.
   Figma: 80px top and bottom, 60px from the heading block to the form. */
.alh-cta { background: #fff; padding: 80px 120px; }
.alh-cta__head { margin-bottom: 60px; }

/* ------------------------------------------------------------------
   THE ELEMENTOR WRAPPER AROUND [elementor-template id="2875"]
   ------------------------------------------------------------------
   Elementor wraps a saved template in its own container, and that
   container carries the padding it was given when the template was
   built. On the standalone inquiry page that padding IS the section
   spacing. Here it lands INSIDE a section that already sets its own
   80px/60px, so the two stack — that is the ~160px gap Lennard flagged,
   and the reason the form sat inset from the heading above it.

   Zeroed at the WRAPPER ONLY: `.elementor` and its direct children.
   Nothing inside #alh-inquiry-section is touched, so the form keeps all
   of its v35 styling — the two-column split, the stepper, the field
   spacing, the decorative panel. If the form ever needs its own outer
   padding back, delete the second rule and leave the first.

   Verify in DevTools: inspect the form, walk up to the first element
   with class `elementor`, and check Computed padding is 0 on all sides.
------------------------------------------------------------------ */
.alh-cta__form > .elementor {
	margin: 0 !important;
	padding: 0 !important;
}
.alh-cta__form > .elementor > .elementor-element,
.alh-cta__form > .elementor > .elementor-section,
.alh-cta__form > .elementor > .e-con {
	margin: 0 !important;
	padding: 0 !important;
}
/* 36px by inference — see the note on .al-featured-title. */
.al-home .alh-cta__head h2 {
	margin: 0 0 14px;
	font-family: var(--alh-font-display);
	font-size: 36px;
	font-weight: 400;
	line-height: normal;
	color: var(--alh-dark-text);
}
.al-home .alh-cta__head p {
	margin: 0;
	font-family: var(--alh-font-body);
	font-size: 18px;
	font-weight: 300;
	line-height: 1.6;
	color: var(--alh-dark-text);
}

/* ============================================================
   RESPONSIVE
   The hero top offset steps down with the header height. It is not
   proportional on purpose: percentage padding resolves against
   WIDTH, so it would drift badly on tall narrow screens.
   ============================================================ */
@media (max-width: 1200px) {
	.alh-values,
	.alh-about,
	.alh-featured,
	.alh-cta { padding-inline: 40px; }
	.al-featured-header-inner { gap: 40px; }
}

@media (max-width: 1024px) {
	.al-home .alh-break { display: none; }
	.alh-hero { min-height: 720px; }
	.alh-hero__inner { padding-top: calc(var(--al-header-height, 93px) + 57px); }
	.al-home .alh-values__grid { grid-template-columns: repeat(2, 1fr); row-gap: 40px; }
	.alh-values__item:nth-child(3) { border-left: 0; }
	.alh-about__lead { grid-template-columns: 1fr; gap: 28px; }
	.alh-about__cards { grid-template-columns: 1fr; }
}

/* ============================================================
   MOBILE — the 402px Figma frame, value for value.

   Content column is 342px, i.e. 402 - 30 - 30, so every section
   takes padding: 40px 30px and the hero copy is width 342 with a
   max-width that keeps the same 30px gutters on narrower phones.

   NOTE ON THE HERO OFFSET: the desktop rule derives the top offset
   from --al-header-height, but navigation.css sets the mobile header
   to 100px by writing `.al-header { height: 100px }` directly — it
   never updates the variable, which stays 93px. So the calc() is
   wrong down here and the Figma value is used literally instead.
   140px from the section top, on a 100px header = 40px of clear air.
   ============================================================ */
@media (max-width: 767px) {

	/* ---------- HERO ---------- */
	.alh-hero { min-height: 874px; }
	.alh-hero__inner {
		width: 342px;
		max-width: calc(100% - 60px);
		padding-top: 140px;   /* literal, see note above */
		gap: 50px;
	}
	.al-home .alh-hero__title { font-size: 36px; }
	.al-home .alh-hero__sub { font-size: 20px; }
	.alh-hero__actions {
		flex-direction: column;
		align-items: stretch;
		width: 100%;
		gap: 15px;
	}
	.alh-hero__actions .alh-btn { justify-content: center; }

	/* ---------- section shell ---------- */
	.alh-values,
	.alh-about,
	.alh-featured,
	.alh-cta { padding: 40px 30px; }

	/* ---------- VALUE PROPS ----------
	   The four items stack and the vertical rules become horizontal
	   ones between them. Figma puts 20px on each side of the rule, so
	   the 20px grid gap sits above it and 20px of padding below. */
	.al-home .alh-values__grid { grid-template-columns: 1fr; gap: 20px; }
	.al-home .alh-values__item { gap: 30px; padding: 0; }
	.alh-values__item + .alh-values__item {
		border-left: 0;
		border-top: 1px solid var(--alh-400);
		padding-top: 20px;
	}
	.al-home .alh-values__item p { font-size: 18px; }

	/* ---------- ABOUT ---------- */
	.alh-about__lead {
		grid-template-columns: 1fr;
		gap: 15px;
		margin-bottom: 40px;
	}
	.al-home .alh-about__title { font-size: 32px; }
	.alh-about__cards { grid-template-columns: 1fr; gap: 20px; }
	.alh-card img { height: 200px; }

	/* ---------- FEATURED HOMES ---------- */
	.al-home .alh-break-mobile { display: inline; }
	.al-featured-header-inner {
		flex-direction: column;
		align-items: flex-start;
		gap: 30px;
	}
	.al-home .al-featured-title { font-size: 32px; }

	/* ---------- CTA ---------- */
	.alh-cta__head { margin-bottom: 30px; }
	.al-home .alh-cta__head h2 { font-size: 32px; }
}