/*
 * TJ Theme — pattern structure (always loaded)
 *
 * Pattern LAYOUTS live here. Vibe SKINS live in `vibe-{slug}.css`.
 *
 * Why split:
 *   - Pattern layouts (flex, positioning, sizing) must always render — switching
 *     vibes should re-skin, never break the bones.
 *   - Vibe CSS gets conditionally loaded; if a layout rule sits in there, the
 *     layout dies the moment that vibe deactivates.
 *
 * Convention for new patterns:
 *   1. Layout / structure / spacing → THIS FILE, unscoped class selectors.
 *   2. Colour / font-weight / decoration → vibe-{slug}.css, scoped under
 *      body.tj-vibe-{slug} so the vibe can override safely.
 *
 * Colour vars used here reference --wp--preset--color--* which map to whatever
 * the active vibe's theme.json defines — so the same pattern auto-tints to
 * whichever palette is live. Patterns stay portable across all 16+ vibes.
 *
 * Convention namespace:
 *   `.tj-prop-*` originated with the Property Editorial pack (Kinetik), but
 *   the rules are universal — any vibe can render the hero-backdrop / dark-
 *   strip / underline-form layouts. The `prop` prefix is kept for historical
 *   continuity; treat them as TJ-pattern primitives, not Property-only.
 */

/* ═════════════════════════════════════════════════════════════════════════
 * Display + text primitives — universal, used across many patterns
 * ═════════════════════════════════════════════════════════════════════════ */

.tj-eyebrow {
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent, var(--wp--preset--color--primary));
	margin-bottom: 24px;
}

.tj-text-balance {
	text-wrap: balance;
}

/* ═════════════════════════════════════════════════════════════════════════
 * Hero — full-viewport with faded backdrop image
 *
 * Pattern markup:
 *   <section class="tj-prop-hero">
 *     <div class="tj-prop-hero-image"><img /></div>
 *     <div class="tj-prop-hero-content">…copy + CTAs…</div>
 *   </section>
 *
 * Works in any vibe. Vibe CSS can override the gradient overlay's stops or
 * disable the backdrop entirely if a vibe prefers a different opener.
 * ═════════════════════════════════════════════════════════════════════════ */

.tj-prop-hero {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: 100px 60px;
	position: relative;
	overflow: hidden;
}

.tj-prop-hero-image {
	position: absolute;
	top: 80px;
	right: 0;
	width: 50%;
	height: calc(100% - 80px);
	z-index: 1;
	pointer-events: none;
}

.tj-prop-hero-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.tj-prop-hero-image::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to right,
		var(--wp--preset--color--bg) 0%,
		color-mix(in srgb, var(--wp--preset--color--bg) 85%, transparent) 35%,
		transparent 70%
	);
}

.tj-prop-hero-content {
	position: relative;
	z-index: 2;
	max-width: 1400px;
	width: 100%;
	margin: 0 auto;
}

.tj-prop-hero-content > .tj-eyebrow {
	margin-bottom: 30px;
}

.tj-prop-hero-content h1 {
	margin-bottom: 40px;
	max-width: 1100px;
}

.tj-prop-hero-content p.has-lg-font-size {
	margin-bottom: 50px;
	max-width: 580px;
}

@media (max-width: 900px) {
	.tj-prop-hero {
		min-height: auto;
		padding: 60px 30px 80px;
	}
	.tj-prop-hero-image {
		display: none;
	}
}

/* ═════════════════════════════════════════════════════════════════════════
 * Service cards — oversized thin number above title (services-numbered)
 * ═════════════════════════════════════════════════════════════════════════ */

.tj-prop-number {
	font-size: clamp(56px, 6vw, 72px);
	font-weight: 200;
	color: var(--wp--preset--color--surface-2, var(--wp--preset--color--rule));
	line-height: 1;
	letter-spacing: -0.04em;
	transition: color 280ms cubic-bezier(.22,.61,.36,1);
	display: block;
	margin-bottom: 28px;
}

.tj-prop-number-card {
	cursor: default;
	transition: transform 280ms cubic-bezier(.22,.61,.36,1);
}

.tj-prop-number-card:hover .tj-prop-number {
	color: var(--wp--preset--color--accent, var(--wp--preset--color--primary));
}

.tj-prop-number-card:hover {
	transform: translateY(-4px);
}

/* ═════════════════════════════════════════════════════════════════════════
 * Stat numbers — editorial big-number treatment (cost-of-inaction, why-with-stats)
 * ═════════════════════════════════════════════════════════════════════════ */

.tj-prop-stat-num {
	font-size: clamp(64px, 8vw, 120px);
	font-weight: 200;
	color: var(--wp--preset--color--ink);
	line-height: 1;
	letter-spacing: -0.04em;
	margin-bottom: 20px;
}

.tj-prop-stat-label {
	font-size: 14px;
	font-weight: 500;
	color: var(--wp--preset--color--mute);
	letter-spacing: 0.11em;
	text-transform: uppercase;
	margin-top: 16px;
	max-width: 380px;
	line-height: 1.5;
}

/* Plain variant — sentence-case stat captions (the V2 "why" grid) */
.tj-prop-stat-label--plain {
	text-transform: none;
	letter-spacing: 0;
	color: var(--wp--preset--color--mute-soft, var(--wp--preset--color--mute));
}

/* ═════════════════════════════════════════════════════════════════════════
 * Dark strip — full-bleed dark section break (process-dark-strip)
 *
 * Uses surface-warm if defined (most vibes), falls back to ink. Vibes can
 * override the bg colour via body-scoped rule.
 * ═════════════════════════════════════════════════════════════════════════ */

.tj-prop-dark-strip {
	background: var(--wp--preset--color--surface-warm, var(--wp--preset--color--ink));
	color: var(--wp--preset--color--bg);
	padding-top: clamp(100px, 12vw, 160px) !important;
	padding-bottom: clamp(100px, 12vw, 160px) !important;
}

.tj-prop-dark-strip h1,
.tj-prop-dark-strip h2,
.tj-prop-dark-strip h3 {
	color: var(--wp--preset--color--bg);
}

.tj-prop-dark-strip .tj-eyebrow {
	color: var(--wp--preset--color--accent, var(--wp--preset--color--primary-light));
}

.tj-prop-dark-card {
	background: var(--wp--preset--color--surface-warm, var(--wp--preset--color--ink));
	border: 1px solid rgba(255, 255, 255, 0.10);
	padding: 48px 38px;
	transition: border-color 240ms ease, background 240ms ease, transform 240ms ease;
}

.tj-prop-dark-card:hover {
	border-color: var(--wp--preset--color--accent, var(--wp--preset--color--primary-light));
	background: color-mix(in srgb, var(--wp--preset--color--accent, var(--wp--preset--color--primary-light)) 5%, transparent);
	transform: translateY(-4px);
}

/* ═════════════════════════════════════════════════════════════════════════
 * Underline-input form (contact-split-underline)
 * ═════════════════════════════════════════════════════════════════════════ */

.tj-prop-underline-form input,
.tj-prop-underline-form textarea {
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--wp--preset--color--rule);
	padding: 14px 0;
	font-family: inherit;
	font-size: 16px;
	color: var(--wp--preset--color--ink);
	width: 100%;
	border-radius: 0;
	transition: border-color 200ms ease;
}

.tj-prop-underline-form input:focus,
.tj-prop-underline-form textarea:focus {
	outline: none;
	border-bottom-color: var(--wp--preset--color--accent, var(--wp--preset--color--primary));
}

.tj-prop-underline-form label {
	display: block;
	font-size: 11px;
	font-weight: 600;
	color: var(--wp--preset--color--mute);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	margin-bottom: 8px;
}

.tj-prop-underline-form .tj-prop-field {
	margin-bottom: 32px;
}

.tj-prop-underline-form button[type="submit"] {
	margin-top: 24px;
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--bg);
	font-weight: 600;
	font-size: 13px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	padding: 18px 36px;
	border: 0;
	cursor: pointer;
	transition: background 220ms ease;
}

.tj-prop-underline-form button[type="submit"]:hover {
	background: var(--wp--preset--color--accent, var(--wp--preset--color--primary));
}

.tj-prop-underline-form .tj-prop-form-note {
	margin-top: 16px;
	font-size: 13px;
	color: var(--wp--preset--color--mute);
}

/* ═════════════════════════════════════════════════════════════════════════
 * Testimonial quote — large centred quote with decorative glyph
 * ═════════════════════════════════════════════════════════════════════════ */

.tj-prop-quote {
	border: 0;
	padding: 0;
	margin: 0 auto;
	max-width: 940px;
}

.tj-prop-quote::before {
	content: '\201C';
	display: block;
	font-size: clamp(100px, 12vw, 180px);
	line-height: 0.6;
	color: var(--wp--preset--color--accent, var(--wp--preset--color--primary));
	text-align: center;
	margin-bottom: 30px;
	font-weight: 300;
}

/* ═════════════════════════════════════════════════════════════════════════
 * Tick list — hairline-ruled checklist rows (about-split-ticklist)
 *
 * Pattern markup:
 *   <ul class="tj-tick-list">
 *     <li><svg class="tj-icon tj-tick">…</svg>Label</li>
 *   </ul>
 * ═════════════════════════════════════════════════════════════════════════ */

.tj-tick-list {
	list-style: none;
	margin: 0 0 28px;
	padding: 0;
}

.tj-tick-list li {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px 0;
	border-top: 1px solid var(--wp--preset--color--rule);
	font-weight: 500;
	font-size: 18px;
	color: var(--wp--preset--color--ink);
	letter-spacing: -0.01em;
}

.tj-tick-list li:last-child {
	border-bottom: 1px solid var(--wp--preset--color--rule);
}

.tj-tick-list .tj-tick {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	color: var(--wp--preset--color--accent, var(--wp--preset--color--primary));
}

/* ═════════════════════════════════════════════════════════════════════════
 * Word-stat modifier — stat rows whose "number" is a word or range
 * ("Thousands", "Weeks → Months"). Same slot as .tj-prop-stat-num but sized
 * for words, per the Kinetik V2 revision.
 * ═════════════════════════════════════════════════════════════════════════ */

.tj-prop-stat-num--word {
	font-size: clamp(40px, 5vw, 68px);
	font-weight: 300;
	letter-spacing: -0.03em;
	line-height: 1.05;
	margin-bottom: 16px;
}

/* ═════════════════════════════════════════════════════════════════════════
 * Triptych header — brand left, logo mark centre, links right
 * (header-property-triptych). Collapses to brand + hamburger on mobile;
 * the centre mark hides. Needs `.tj-has-nav-toggle` for the overlay menu.
 * ═════════════════════════════════════════════════════════════════════════ */

.tj-header-triptych {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 24px;
}

.tj-header-triptych .tj-header-brand { justify-self: start; }
.tj-header-triptych .tj-header-mark  { justify-self: center; }
.tj-header-triptych .tj-primary-nav  { justify-self: end; }

.tj-header-triptych .tj-header-brand img,
.tj-header-triptych .tj-header-mark img {
	display: block;
	width: auto;
}

.tj-header-triptych .tj-header-brand img { height: 34px; }
.tj-header-triptych .tj-header-mark img  { height: 38px; }

@media (max-width: 781px) {
	.tj-header-triptych {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.tj-header-triptych .tj-header-mark { display: none; }
	.tj-header-triptych .tj-header-brand { position: relative; z-index: 1600; }
	.tj-header-triptych .tj-header-brand img { height: 26px; }
}

/* ═════════════════════════════════════════════════════════════════════════
 * Lead modal — deferred lead-capture dialog (lead-modal pattern)
 *
 * Hidden by default; assets/js/lead-modal.js (behind the `lead_modal`
 * feature flag) opens it once per visitor session on time/scroll intent.
 * Without the flag or JS the markup stays inert and invisible.
 * ═════════════════════════════════════════════════════════════════════════ */

.tj-modal-overlay {
	position: fixed;
	inset: 0;
	z-index: 2000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	background: color-mix(in srgb, var(--wp--preset--color--ink) 55%, transparent);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	opacity: 0;
	visibility: hidden;
	transition: opacity 500ms cubic-bezier(.22, 1, .36, 1), visibility 0s linear 500ms;
}

.tj-modal-overlay.is-open {
	opacity: 1;
	visibility: visible;
	transition: opacity 500ms cubic-bezier(.22, 1, .36, 1);
}

.tj-modal-card {
	position: relative;
	background: var(--wp--preset--color--bg);
	width: 100%;
	max-width: 520px;
	padding: 56px 52px;
	border-radius: 4px;
	box-shadow: 0 40px 120px color-mix(in srgb, var(--wp--preset--color--ink) 32%, transparent);
	max-height: 90vh;
	overflow-y: auto;
	transform: translateY(30px) scale(0.97);
	opacity: 0;
	transition: transform 600ms cubic-bezier(.22, 1, .36, 1), opacity 600ms cubic-bezier(.22, 1, .36, 1);
}

.tj-modal-overlay.is-open .tj-modal-card {
	transform: none;
	opacity: 1;
}

.tj-modal-close {
	position: absolute;
	top: 16px;
	right: 16px;
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: 0;
	cursor: pointer;
	color: var(--wp--preset--color--mute-soft);
	transition: color 300ms ease;
}

.tj-modal-close:hover {
	color: var(--wp--preset--color--primary);
}

.tj-modal-card .tj-eyebrow {
	margin-bottom: 16px;
}

.tj-modal-card h2 {
	font-size: clamp(26px, 3.5vw, 34px);
	line-height: 1.15;
	margin-bottom: 14px;
}

.tj-modal-card .tj-modal-sub {
	font-size: 15px;
	line-height: 1.6;
	color: var(--wp--preset--color--mute);
	margin-bottom: 32px;
}

@media (max-width: 768px) {
	.tj-modal-card {
		padding: 46px 26px;
	}
}

/* Honeypot row (TJ Forms contract) — visually removed, still in the DOM
   for bots to trip over. Not display:none, which some bots skip. */
.tj-hp-field {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ═════════════════════════════════════════════════════════════════════════
 * Header family — split-nav / cta-only / phone-premium
 * (header-split-nav, header-cta-only, header-phone-premium)
 * ═════════════════════════════════════════════════════════════════════════ */

.tj-header-split {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 40px;
}

.tj-header-split .tj-primary-nav--left  { justify-self: end; }
.tj-header-split .tj-primary-nav--right { justify-self: start; }
.tj-header-split .tj-header-mark-link   { display: flex; align-items: center; }

.tj-header-cta-only,
.tj-header-phone-premium {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}

.tj-header-tel {
	font-weight: 600;
	white-space: nowrap;
}

@media (max-width: 781px) {
	.tj-header-split {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	/* On mobile the centred mark becomes the left brand; both navs merge
	   into the overlay (each keeps its own list — acceptable stacking). */
	.tj-header-split .tj-header-mark-link { position: relative; z-index: 1600; }

	.tj-header-phone-premium .tj-header-brand { position: relative; z-index: 1600; }
}