/*
 * Homepage block overrides.
 *
 * Layered on top of the section CSS chain by functions.php ->
 * spartan_traxx_enqueue_assets() (front page only). Targets the
 * Gutenberg block nodes emitted by the `spartan-traxx/home-hibu-clone`
 * block pattern (inc/block-patterns.php).
 *
 * Section order in the pattern (2026-07 Hibu 1:1 rewrite):
 *   .tx-home-hero              -> wp:cover (Section 1)
 *   .tx-home-services__row     -> wp:media-text (Sections 2 + 3)
 *   .tx-home-member-callout    -> wp:group with two columns (Section 4)
 *   .tx-home-video-reviews     -> wp:group with wp:video + reviews (Section 5)
 *
 * Legacy `.credentials-band` and `.tx-badges` rules are kept intact
 * at the bottom because the standalone `credentials-band` and
 * `safety` patterns still ship for pages that inserted them (e.g.
 * Safety, About). Removing them here would regress those pages.
 */

/* -----------------------------------------------------------------
 * Section 1: Hero cover
 * ----------------------------------------------------------------- */

.wp-block-cover.tx-home-hero {
	min-height: 520px;
	color: var(--on-plum, #fff);
}

.wp-block-cover.tx-home-hero .tx-home-hero__title {
	font-family: var(--font-display, "Oswald", sans-serif);
	font-weight: 500;
	font-size: clamp(2rem, 4vw + 1rem, 3rem);
	line-height: 1.05;
	letter-spacing: 0.02em;
	color: inherit;
	margin: 0;
	text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}

.wp-block-cover.tx-home-hero .tx-home-hero__subtitle {
	font-family: var(--font-body, "Titillium Web", sans-serif);
	font-weight: 400;
	font-size: clamp(1rem, 1.2vw + 0.75rem, 1.35rem);
	line-height: 1.35;
	color: inherit;
	margin: 0.75rem 0 0;
	text-shadow: 0 1px 6px rgba(0, 0, 0, 0.35);
}

/* -----------------------------------------------------------------
 * Sections 2 + 3: Service teaser rows (media-text)
 *
 * Alternate image position between rows. Buttons use the
 * `is-style-btn-gold` block-class hook so both CTAs render as the
 * same gold-outline pill the Hibu source used.
 * ----------------------------------------------------------------- */

.wp-block-media-text.tx-home-services__row {
	margin-block: clamp(2rem, 4vw, 4rem);
	gap: clamp(1.5rem, 3vw, 3rem);
	align-items: center;
}

.wp-block-media-text.tx-home-services__row .tx-home-services__title {
	font-family: var(--font-display, "Oswald", sans-serif);
	font-weight: 500;
	font-size: clamp(1.5rem, 2vw + 0.5rem, 2.125rem);
	color: var(--slate-blue-2, #3A434A);
	margin: 0 0 0.85rem;
	letter-spacing: 0.01em;
}

.wp-block-media-text.tx-home-services__row .wp-block-media-text__content > p {
	font-size: 1rem;
	line-height: var(--lh-body, 1.55);
	color: var(--text-muted, #464646);
	margin: 0 0 1.25rem;
}

.wp-block-media-text.tx-home-services__row figure.wp-block-media-text__media img {
	width: 100%;
	height: auto;
	object-fit: cover;
	display: block;
	border-radius: var(--r-sm, 2px);
}

/* Block button styles (`is-style-btn-gold`, `-gold-ghost`,
   `-outline`, and the legacy `-slate` shim) moved to base.css in the
   2026 rebrand so every page renders wp:button identically. */

/* -----------------------------------------------------------------
 * Section 4: Member callout (slate band)
 *
 * Full-bleed --surface-dark band with two columns. Listed in the
 * base.css "Dark-surface CTA scope" so --accent resolves to
 * --gold-soft here (4.69:1 on slate):
 *   LEFT  .tx-home-member-callout__col--members   member list
 *   RIGHT .tx-home-member-callout__col--pitch     50+ years pitch
 * ----------------------------------------------------------------- */

.wp-block-group.tx-home-member-callout {
	background: var(--surface-dark, #49555C);
	color: var(--on-plum, #fff);
	padding-block: clamp(2.5rem, 5vw, 4.5rem);
	padding-inline: var(--gutter, 1.5rem);
	margin-block: clamp(2.5rem, 5vw, 4.5rem) 0;
}

.wp-block-group.tx-home-member-callout .tx-home-member-callout__inner {
	max-width: var(--max-w, 1200px);
	margin-inline: auto;
	gap: clamp(1.5rem, 3vw, 3.5rem);
	align-items: center;
}

.wp-block-group.tx-home-member-callout .tx-home-member-callout__eyebrow {
	font-family: var(--font-display, "Oswald", sans-serif);
	font-weight: 600;
	font-size: clamp(1.15rem, 1.6vw + 0.5rem, 1.5rem);
	letter-spacing: 0.02em;
	color: var(--accent, #E8C85A);
	margin: 0 0 0.75rem;
}

.wp-block-group.tx-home-member-callout .tx-home-member-callout__list {
	list-style: none;
	margin: 0;
	padding: 0;
	color: var(--on-plum, #fff);
	line-height: 1.55;
}

.wp-block-group.tx-home-member-callout .tx-home-member-callout__list li {
	padding: 4px 0 4px 24px;
	position: relative;
}

.wp-block-group.tx-home-member-callout .tx-home-member-callout__list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 12px;
	width: 12px;
	height: 2px;
	background: var(--accent, #E8C85A);
}

.wp-block-group.tx-home-member-callout .tx-home-member-callout__pitch {
	font-family: var(--font-display, "Oswald", sans-serif);
	font-weight: 400;
	font-size: clamp(1.25rem, 1.6vw + 0.5rem, 1.75rem);
	line-height: 1.35;
	color: var(--on-plum, #fff);
	margin: 0;
}

.wp-block-group.tx-home-member-callout .tx-home-member-callout__pitch a {
	color: var(--accent, #E8C85A);
	font-weight: 700;
	text-decoration: none;
	border-bottom: 1px solid transparent;
}
.wp-block-group.tx-home-member-callout .tx-home-member-callout__pitch a:hover,
.wp-block-group.tx-home-member-callout .tx-home-member-callout__pitch a:focus-visible {
	border-bottom-color: var(--accent, #E8C85A);
}

/* -----------------------------------------------------------------
 * Section 5: Video + Reviews row
 *
 * Two columns on desktop:
 *   LEFT   welcome MP4 (wp:video)
 *   RIGHT  [spartan_home_reviews] shortcode column
 * ----------------------------------------------------------------- */

.wp-block-group.tx-home-video-reviews {
	padding-block: clamp(2.5rem, 5vw, 4.5rem);
}

.wp-block-group.tx-home-video-reviews .tx-home-video-reviews__inner {
	gap: clamp(1.5rem, 3vw, 3rem);
	align-items: start;
}

.wp-block-group.tx-home-video-reviews .tx-home-video-reviews__col--video {
	min-width: 0;
}

.wp-block-video.tx-home-video-reviews__video {
	margin: 0;
	background: var(--slate-blue-2, #3A434A);
	border-radius: var(--r-sm, 2px);
	overflow: hidden;
}

.wp-block-video.tx-home-video-reviews__video video {
	width: 100%;
	height: auto;
	display: block;
	aspect-ratio: 16 / 9;
	background: #000;
}

/* Empty video src (media not yet imported) collapses so the column
   doesn't paint a huge black rectangle. */
.wp-block-video.tx-home-video-reviews__video video[src=""] {
	display: none;
}

/* -----------------------------------------------------------------
 * Happy Customer Reviews ([spartan_home_reviews] shortcode markup)
 * Styled site-wide in sections/reviews.css because the same
 * shortcode renders on the Reviews page, not just the front page.
 * ----------------------------------------------------------------- */

/* -----------------------------------------------------------------
 * Credentials band ("Why Spartan Agency") is styled site-wide in
 * sections/credentials-band.css because the same pattern renders on
 * Management Services / About, not just the front page.
 *
 * Legacy: tx-badges retained because the `safety` block pattern
 * still ships for pages that inserted it.
 * ----------------------------------------------------------------- */

.wp-block-group.tx-badges {
	padding-block: clamp(1.5rem, 3vw, 3rem);
	align-items: center;
}

.wp-block-group.tx-badges figure.wp-block-image img {
	max-height: 90px;
	width: auto;
	object-fit: contain;
	display: block;
}

/* -----------------------------------------------------------------
 * Responsive
 * ----------------------------------------------------------------- */

@media (max-width: 899px) {
	.wp-block-group.tx-home-member-callout .tx-home-member-callout__inner,
	.wp-block-group.tx-home-video-reviews .tx-home-video-reviews__inner {
		flex-direction: column;
	}

	.wp-block-media-text.tx-home-services__row {
		grid-template-columns: 1fr !important;
	}
}


/* =================================================================
 * 2026 Home Ledger pattern
 *
 * Selectors target the block nodes emitted by the
 * `spartan-traxx/home-ledger` pattern (inc/block-patterns.php):
 *
 *   .tx-home-ledger__hero        -> full-bleed hero (office wash + H1)
 *   .tx-home-ledger__showcase    -> offset live listings (plugin showcase)
 *   .tx-home-ledger__audiences   -> numbered audience ledger
 *   .tx-home-ledger__reviews     -> reviews teaser
 *
 * The `credentials-band` pattern between the audience ledger and
 * the reviews teaser is styled by sections/credentials-band.css
 * (site-wide) — no extra work needed here.
 * ================================================================= */

/* -- Full-bleed hero ----------------------------------------------
   Two full-bleed `cover` layers blended into one picture:

     ::before  B&W Sumner storefront sketch (--office-hero), edge to
               edge underneath, under a light wash.
     ::after   colour house photo (--home-hero, Media Library
               `Spartan-Homepage.webp`), covering the left ~70% and
               fading out across the middle via mask-image so the
               sketch takes over on the right. It also carries the
               white text wash, heaviest behind the copy.

   Both layers are oversized 14% top and bottom; parallax.js writes
   `--tx-parallax` on the group and the layers translate by it at
   different rates (house 1x, sketch 0.7x) for a little depth. Copy
   stays charcoal on the wash, so contrast behaves like the old
   sketch-only hero. */
/* One content rail for the homepage: hero copy, ledger rows, and the
   showcase gutter (listings-layout.css hardcodes the same 1180px). */
.site-main--front {
	--home-rail: 1180px;
}

.wp-block-group.tx-home-ledger__hero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background-color: var(--surface-content);
	padding: clamp(3rem, 8vw, 6.5rem) var(--gutter);
	color: var(--text);
}

.wp-block-group.tx-home-ledger__hero::before,
.wp-block-group.tx-home-ledger__hero::after {
	content: "";
	position: absolute;
	top: -14%;
	bottom: -14%;
	background-size: cover;
	background-repeat: no-repeat;
	will-change: transform;
	pointer-events: none;
}

/* Sketch starts at 30% so its left third (blank brick) is dropped and
   the "Spartan Agency" sign lands around 50–72% of the hero, clear of
   most of the crossfade. Top-anchored so the sign isn't cropped; the
   10% bleed matches its 0.7x parallax rate. */
.wp-block-group.tx-home-ledger__hero::before {
	z-index: -2;
	top: -10%;
	bottom: -10%;
	left: 30%;
	right: 0;
	background-image:
		linear-gradient(90deg, rgba(255, 255, 255, 0.50) 0%, rgba(255, 255, 255, 0.36) 50%, rgba(255, 255, 255, 0.16) 100%),
		var(--office-hero);
	background-position: center, 0% 0%;
	transform: translate3d(0, calc(var(--tx-parallax, 0px) * 0.7), 0);
}

/* House layer overhangs the left edge so the house itself centres
   near 26% of the hero (under the copy) rather than in the seam. The
   mask holds it solid to ~45% of the hero and fades it out by ~64%. */
.wp-block-group.tx-home-ledger__hero::after {
	z-index: -1;
	left: -12%;
	right: 36%;
	background-image:
		linear-gradient(90deg, rgba(255, 255, 255, 0.90) 0%, rgba(255, 255, 255, 0.84) 40%, rgba(255, 255, 255, 0.55) 72%, rgba(255, 255, 255, 0.25) 100%),
		var(--home-hero, var(--office-hero));
	background-position: center, 50% 60%;
	-webkit-mask-image: linear-gradient(90deg, #000 0%, #000 75%, transparent 100%);
	mask-image: linear-gradient(90deg, #000 0%, #000 75%, transparent 100%);
	transform: translate3d(0, var(--tx-parallax, 0px), 0);
}

/* Copy sits on the same 1180px rail as the "Now leasing" band below
   instead of WordPress's centred 760px content box. The constrained
   layout pins horizontal margins with !important, so the overrides
   need the extra class for specificity. */
.wp-block-group.tx-home-ledger__hero > .tx-home-ledger__hero-copy {
	max-width: var(--home-rail, 1180px);
}

.wp-block-group.tx-home-ledger__hero-copy > * {
	margin-left: 0 !important;
	margin-right: 0 !important;
}

.tx-home-ledger__hero-copy .tx-home-ledger__hero-title {
	max-width: 24ch;
}

.tx-home-ledger__hero-copy .tx-home-ledger__hero-title {
	font-family: var(--font-display);
	font-size: clamp(2.25rem, 5.5vw, 4rem);
	line-height: 1.05;
	letter-spacing: -0.01em;
	margin: 0.5rem 0 1rem;
	color: var(--charcoal-2);
}

.tx-home-ledger__hero-copy .tx-home-ledger__hero-deck {
	font-size: clamp(1.05rem, 1.6vw, 1.2rem);
	line-height: 1.55;
	color: var(--text);
	max-width: 46ch;
	margin: 0 0 1.75rem;
}

.tx-home-ledger__hero-copy .tx-eyebrow {
	color: var(--charcoal-2);
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	font-size: 0.75rem;
	margin: 0;
}

/* Hero CTA row — first button gold-fill, second button outlined so
   the two options read as primary + secondary without either one
   looking muted. The `.is-style-btn-gold` / `.is-style-btn-outline`
   block styles themselves live in base.css so every page (Current
   Tenant, Application Requirements, etc.) renders them identically. */
.wp-block-buttons.tx-home-ledger__hero-cta {
	display: flex;
	gap: var(--s-3);
	flex-wrap: wrap;
}

/* -- Offset showcase band (not a boxed card) ---------------------- */
.wp-block-group.tx-home-ledger__showcase {
	background: var(--surface-dark);
	color: var(--on-charcoal);
	padding: clamp(3rem, 8vw, 6.5rem) 0;
	overflow: hidden;
}

.wp-block-group.tx-home-ledger__showcase .tx-home-listings {
	margin: 0;
}

.wp-block-group.tx-home-ledger__showcase .tx-home-listings__cta {
	text-align: left;
	margin: var(--s-5) 0 0;
}

.tx-home-listings {
	display: flex;
	flex-direction: column;
	gap: var(--s-3);
}

.tx-home-listings__list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: var(--s-3);
}

.tx-home-listings__item {
	margin: 0;
}

.tx-home-listings__link {
	display: grid;
	grid-template-columns: 90px 1fr;
	gap: var(--s-3);
	align-items: center;
	padding: var(--s-2);
	background: var(--surface-content);
	border: 1px solid var(--rule-soft, rgba(0, 0, 0, 0.08));
	border-radius: var(--r-sm);
	color: var(--text);
	text-decoration: none;
	transition: transform 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
}

.tx-home-listings__link:hover,
.tx-home-listings__link:focus-visible {
	border-color: var(--brand-primary);
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
	outline: none;
}

.tx-home-listings__thumb {
	display: block;
	width: 90px;
	height: 68px;
	background-color: var(--slate-tint, #d9d9db);
	background-size: cover;
	background-position: center;
	border-radius: var(--r-sm);
}

.tx-home-listings__body {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.tx-home-listings__title {
	font-family: var(--font-display);
	font-size: 0.95rem;
	line-height: 1.25;
	color: var(--charcoal-2);
	font-weight: 600;
	overflow-wrap: anywhere;
}

.tx-home-listings__meta {
	display: flex;
	gap: var(--s-2);
	font-size: 0.8125rem;
	color: var(--ink-muted, #4A4A4E);
	flex-wrap: wrap;
}

.tx-home-listings__rent {
	color: var(--link);
	font-weight: 700;
}

.tx-home-listings__cta {
	text-align: center;
	margin: var(--s-2) 0 0;
}

.tx-home-listings__empty {
	font-size: 0.9375rem;
	line-height: 1.5;
	color: var(--ink-muted);
	margin: 0 0 var(--s-3);
}

/* -- Audience ledger --------------------------------------------- */
.wp-block-group.tx-home-ledger__audiences {
	padding: clamp(3rem, 6vw, 5rem) var(--gutter);
	background: var(--surface-page);
}

.tx-home-ledger__audiences-title {
	font-family: var(--font-display);
	font-size: clamp(1.5rem, 3vw, 2.25rem);
	color: var(--charcoal-2);
	margin: 0 0 clamp(2rem, 4vw, 3rem);
	letter-spacing: -0.005em;
}

.wp-block-group.tx-home-ledger__row {
	max-width: var(--home-rail, 1180px);
	margin: 0 auto;
	padding: clamp(1.5rem, 3vw, 2.5rem) 0;
	display: grid;
	grid-template-columns: 120px 1fr;
	grid-template-areas:
		"number title"
		"number copy"
		"number cta";
	gap: 0.25rem var(--s-4);
	border-top: 1px solid var(--rule-soft);
}

/* The row is a constrained-layout group, so WordPress gives every
   child `margin-inline: auto !important` + a 760px max-width. Inside
   a grid cell that centres the title / copy / CTA in the middle of the
   row instead of against the number column. Pin them to the start. */
.wp-block-group.tx-home-ledger__row > * {
	margin-left: 0 !important;
	margin-right: 0 !important;
	justify-self: start;
}

.wp-block-group.tx-home-ledger__row:last-child {
	border-bottom: 1px solid var(--rule-soft);
}

.tx-home-ledger__row-number {
	grid-area: number;
	font-family: var(--font-display);
	font-size: clamp(2.75rem, 5vw, 4rem);
	line-height: 1;
	/* Accent TEXT on a light surface: slate-2 (8.46:1 on bone). Logo
	   gold is only 2.05:1 on bone — below even the 3:1 large-text bar. */
	color: var(--accent-text);
	font-weight: 700;
	margin: 0;
}

.tx-home-ledger__row-title {
	grid-area: title;
	font-family: var(--font-display);
	font-size: clamp(1.25rem, 2.5vw, 1.75rem);
	color: var(--charcoal-2);
	margin: 0;
}

.tx-home-ledger__row-copy {
	grid-area: copy;
	font-size: clamp(0.95rem, 1.3vw, 1.05rem);
	line-height: 1.55;
	color: var(--text);
	max-width: 62ch;
	margin: 0;
}

.tx-home-ledger__row-cta {
	grid-area: cta;
	margin: var(--s-2) 0 0;
	font-weight: 600;
}

.tx-home-ledger__row-cta a {
	color: var(--link);
	text-decoration: none;
	border-bottom: 1px solid currentColor;
	padding-bottom: 2px;
	transition: color 120ms ease;
}

.tx-home-ledger__row-cta a:hover,
.tx-home-ledger__row-cta a:focus-visible {
	color: var(--link-hover);
	outline: none;
}

/* -- Reviews teaser section -------------------------------------- */
.wp-block-group.tx-home-ledger__reviews {
	padding: clamp(3rem, 6vw, 5rem) var(--gutter);
	background: var(--surface-content);
}

.tx-home-ledger__reviews-title {
	font-family: var(--font-display);
	font-size: clamp(1.5rem, 3vw, 2.25rem);
	color: var(--charcoal-2);
	margin: 0 0 clamp(1.5rem, 3vw, 2rem);
	letter-spacing: -0.005em;
}

/* -- Responsive: stack hero + shrink ledger rows ----------------- */
@media (max-width: 899px) {
	/* Stacked: house behind the copy up top, fading down into the
	   sketch, which holds the bottom of the slab. Same two layers,
	   masks and washes rotated to run top-to-bottom. */
	.wp-block-group.tx-home-ledger__hero::before {
		left: 0;
		background-image:
			linear-gradient(180deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0.30) 100%),
			var(--office-hero);
		background-position: center, 55% 70%;
	}

	.wp-block-group.tx-home-ledger__hero::after {
		left: 0;
		right: 0;
		bottom: 30%;
		background-image:
			linear-gradient(180deg, rgba(255, 255, 255, 0.90) 0%, rgba(255, 255, 255, 0.80) 45%, rgba(255, 255, 255, 0.45) 100%),
			var(--home-hero, var(--office-hero));
		background-position: center, 50% 55%;
		-webkit-mask-image: linear-gradient(180deg, #000 0%, #000 60%, transparent 100%);
		mask-image: linear-gradient(180deg, #000 0%, #000 60%, transparent 100%);
	}

	.wp-block-group.tx-home-ledger__row {
		grid-template-columns: 72px 1fr;
	}

	.tx-home-ledger__row-number {
		font-size: 2.5rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.wp-block-group.tx-home-ledger__hero::before,
	.wp-block-group.tx-home-ledger__hero::after {
		transform: none;
		will-change: auto;
	}
}