/*
 * TJ Theme — Property Editorial (vibe SKIN only)
 *
 * Pattern LAYOUTS live in tj-patterns.css (always loaded).
 * This file is conditionally loaded; if it's missing, patterns still render
 * with their full layout intact — they just inherit the active vibe's skin
 * defaults instead of Property Editorial's signature treatment.
 *
 * Five signature moves:
 *   1. Thin Outfit display (weight 300) with bold gold emphasis words
 *   2. Gold accent on eyebrows + section labels (Outfit serif slot)
 *   3. Frosted-glass sticky nav (Apple-meets-premium-property opener)
 *   4. Dark charcoal process strip styling (text/border tints)
 *   5. Square ink buttons that swap to gold on hover
 *
 * Convention: every rule in this file is scoped under
 * `body.tj-vibe-property-editorial`. If you find yourself wanting to write
 * an unscoped rule, it belongs in tj-patterns.css instead.
 */

/* ─────────────────────────────────────────────────────────────────
 * Body baseline — DM Sans for body
 * ───────────────────────────────────────────────────────────────── */

body.tj-vibe-property-editorial {
	font-family: var(--wp--preset--font-family--sans);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	color: var(--wp--preset--color--ink);
}

/* ─────────────────────────────────────────────────────────────────
 * Display rhythm — thin Outfit + bold accent words
 * The signature editorial move. Other vibes keep their own h1/h2 weights;
 * this is uniquely Property Editorial.
 * ───────────────────────────────────────────────────────────────── */

body.tj-vibe-property-editorial h1.wp-block-heading,
body.tj-vibe-property-editorial h1.tj-display,
body.tj-vibe-property-editorial h1.tj-text-balance {
	font-family: var(--wp--preset--font-family--serif);
	font-size: clamp(48px, 7vw, 96px) !important;
	font-weight: 300;
	line-height: 1.05;
	letter-spacing: -0.025em;
	text-wrap: pretty !important;
	word-break: keep-all;
	color: var(--wp--preset--color--ink);
	max-width: 1100px;
}

body.tj-vibe-property-editorial h2.wp-block-heading,
body.tj-vibe-property-editorial h2.tj-display,
body.tj-vibe-property-editorial h2.tj-text-balance {
	font-family: var(--wp--preset--font-family--serif);
	font-size: clamp(36px, 4.5vw, 56px) !important;
	font-weight: 300;
	line-height: 1.15;
	letter-spacing: -0.02em;
	text-wrap: pretty !important;
	color: var(--wp--preset--color--ink);
	max-width: 720px;
}

body.tj-vibe-property-editorial h3.wp-block-heading {
	font-family: var(--wp--preset--font-family--serif);
	font-size: clamp(20px, 2.2vw, 26px) !important;
	font-weight: 600;
	letter-spacing: -0.015em;
	color: var(--wp--preset--color--ink);
}

body.tj-vibe-property-editorial p.has-lg-font-size {
	font-size: clamp(18px, 1.5vw, 22px) !important;
	line-height: 1.6;
	color: var(--wp--preset--color--mute);
	max-width: 620px;
}

/* Heading emphasis is bold INK (V2 revision) — headings never go gold.
   Gold emphasis belongs to statement/quote paragraph copy only. */
body.tj-vibe-property-editorial h1 strong,
body.tj-vibe-property-editorial h2 strong,
body.tj-vibe-property-editorial h3 strong,
body.tj-vibe-property-editorial h1 em,
body.tj-vibe-property-editorial h2 em,
body.tj-vibe-property-editorial h3 em {
	font-style: normal;
	font-weight: 700;
	color: inherit;
}

/* Statement-band / pull-quote emphasis — the gold moment (V2 keeps it) */
body.tj-vibe-property-editorial p.tj-display strong,
body.tj-vibe-property-editorial p.tj-display em {
	font-style: normal;
	font-weight: 600;
	color: var(--wp--preset--color--accent-bright);
}

body.tj-vibe-property-editorial p.tj-display em {
	font-style: italic;
}

body.tj-vibe-property-editorial p em {
	font-style: italic;
	color: var(--wp--preset--color--ink);
}

/* ─────────────────────────────────────────────────────────────────
 * Eyebrow — Outfit, gold, taller tracking
 * Overrides tj-patterns.css base eyebrow styling for this vibe.
 * ───────────────────────────────────────────────────────────────── */

body.tj-vibe-property-editorial .tj-eyebrow {
	font-family: var(--wp--preset--font-family--serif);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent-bright);
	margin-bottom: 30px;
}

/* ─────────────────────────────────────────────────────────────────
 * Frosted-glass sticky nav (Property Editorial signature)
 * ───────────────────────────────────────────────────────────────── */

body.tj-vibe-property-editorial > header,
body.tj-vibe-property-editorial .wp-site-blocks > header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: rgba(255, 255, 255, 0.92);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	border-bottom: 1px solid var(--wp--preset--color--rule);
	transition: padding 240ms ease, box-shadow 240ms ease;
}

body.tj-vibe-property-editorial header a:not(.wp-block-button__link) {
	position: relative;
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}

body.tj-vibe-property-editorial header a:not(.wp-block-button__link)::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: -4px;
	height: 1px;
	background: var(--wp--preset--color--accent-bright);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 220ms cubic-bezier(.22,.61,.36,1);
}

body.tj-vibe-property-editorial header a:not(.wp-block-button__link):hover::after,
body.tj-vibe-property-editorial header a:not(.wp-block-button__link):focus-visible::after {
	transform: scaleX(1);
}

/* ─────────────────────────────────────────────────────────────────
 * Buttons — square, uppercase, ink default, gold on hover
 * ───────────────────────────────────────────────────────────────── */

body.tj-vibe-property-editorial .wp-block-button__link,
body.tj-vibe-property-editorial .wp-element-button {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--bg);
	border-radius: 0;
	font-family: var(--wp--preset--font-family--serif);
	font-weight: 600;
	font-size: 13px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	padding: 18px 40px;
	border: 1px solid var(--wp--preset--color--primary);
	transition: background 220ms ease, color 220ms ease, border-color 220ms ease;
}

body.tj-vibe-property-editorial .wp-block-button__link:hover {
	background: var(--wp--preset--color--accent-bright);
	border-color: var(--wp--preset--color--accent-bright);
	color: var(--wp--preset--color--bg);
}

body.tj-vibe-property-editorial .wp-block-button.is-style-outline .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--mute);
	border: 0;
	padding: 18px 0;
	letter-spacing: 0.12em;
	font-weight: 500;
}

body.tj-vibe-property-editorial .wp-block-button.is-style-outline .wp-block-button__link:hover {
	background: transparent;
	color: var(--wp--preset--color--ink);
}

/* ─────────────────────────────────────────────────────────────────
 * Section padding — 160px breathing room for editorial sections
 * Other vibes use their own (typically tighter) spacing.
 * ───────────────────────────────────────────────────────────────── */

body.tj-vibe-property-editorial main > .wp-block-group:not(.tj-prop-hero):not(.tj-prop-dark-strip) {
	padding-top: clamp(100px, 12vw, 160px) !important;
	padding-bottom: clamp(100px, 12vw, 160px) !important;
}

/* ─────────────────────────────────────────────────────────────────
 * Testimonial quote heading — thin serif override
 * ───────────────────────────────────────────────────────────────── */

body.tj-vibe-property-editorial .tj-prop-quote h2 {
	font-weight: 300 !important;
	letter-spacing: -0.015em;
}

/* ─────────────────────────────────────────────────────────────────
 * Number / stat cards — Outfit font family for the numerals
 * (size + weight handled by tj-patterns.css)
 * ───────────────────────────────────────────────────────────────── */

body.tj-vibe-property-editorial .tj-prop-number,
body.tj-vibe-property-editorial .tj-prop-stat-num {
	font-family: var(--wp--preset--font-family--serif);
}

body.tj-vibe-property-editorial .tj-prop-stat-label {
	font-family: var(--wp--preset--font-family--serif);
}

body.tj-vibe-property-editorial .tj-prop-underline-form label,
body.tj-vibe-property-editorial .tj-prop-underline-form button[type="submit"] {
	font-family: var(--wp--preset--font-family--serif);
}

/* ─────────────────────────────────────────────────────────────────
 * Icons — accent gold by default in this vibe
 * ───────────────────────────────────────────────────────────────── */

body.tj-vibe-property-editorial .tj-icon {
	color: var(--wp--preset--color--accent-bright);
}

body.tj-vibe-property-editorial .wp-block-button .tj-icon {
	color: currentColor;
}

/* ─────────────────────────────────────────────────────────────────
 * V2 refresh (Kinetik client revision, 2026-07)
 * Navy is the action colour; stats read navy; footer went light.
 * ───────────────────────────────────────────────────────────────── */

/* Stat numerals — navy in this vibe (was ink) */
body.tj-vibe-property-editorial .tj-prop-stat-num {
	color: var(--wp--preset--color--primary);
}

/* Underline-form submit — navy default, gold hover (matches buttons) */
body.tj-vibe-property-editorial .tj-prop-underline-form button[type="submit"] {
	background: var(--wp--preset--color--primary);
}

body.tj-vibe-property-editorial .tj-prop-underline-form button[type="submit"]:hover {
	background: var(--wp--preset--color--accent-bright);
}

/* Light footer — footer-bg is now cool off-white, so re-ink the parts of
   footer patterns that assume a dark footer (site title painted `surface`). */
body.tj-vibe-property-editorial > footer .wp-block-site-title a,
body.tj-vibe-property-editorial .wp-site-blocks > footer .wp-block-site-title a {
	color: var(--wp--preset--color--ink) !important;
}

body.tj-vibe-property-editorial > footer,
body.tj-vibe-property-editorial .wp-site-blocks > footer {
	border-top: 1px solid var(--wp--preset--color--rule);
}

/* Tick list — Outfit for the row labels */
body.tj-vibe-property-editorial .tj-tick-list li {
	font-family: var(--wp--preset--font-family--serif);
}

/* Lead modal — thin Outfit heading at card scale (overrides the vibe's
   own h2 display clamp, which is !important) */
body.tj-vibe-property-editorial .tj-modal-card h2 {
	font-size: clamp(26px, 3.5vw, 34px) !important;
	font-weight: 300;
	letter-spacing: -0.02em;
	max-width: none;
}

/* Triptych header links — Outfit smallcaps like the V2 nav */
body.tj-vibe-property-editorial .tj-header-triptych .tj-primary-nav a {
	font-family: var(--wp--preset--font-family--serif);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--mute);
}

body.tj-vibe-property-editorial .tj-header-triptych .tj-primary-nav a:hover,
body.tj-vibe-property-editorial .tj-header-triptych .tj-primary-nav a:focus-visible {
	color: var(--wp--preset--color--primary);
	text-decoration: none;
}

@media (max-width: 781px) {
	body.tj-vibe-property-editorial .tj-header-triptych .tj-primary-nav a {
		font-size: 21px;
		letter-spacing: 0.02em;
		text-transform: none;
		color: var(--wp--preset--color--ink);
	}
}

/* Header CTA — compact padding at header scale (V2 nav-cta is 11px 30px,
   not the 18px 36px body-button scale) */
body.tj-vibe-property-editorial .tj-header-triptych .tj-primary-nav .wp-block-button__link {
	padding: 11px 30px;
}

/* Statement band / pull-quote paragraphs — thin Outfit display scale (V2).
   Without this they render at body face/weight. */
body.tj-vibe-property-editorial p.tj-display {
	font-family: var(--wp--preset--font-family--serif);
	font-weight: 300;
	font-size: clamp(28px, 3.5vw, 48px) !important;
	line-height: 1.35;
	letter-spacing: -0.5px;
	color: var(--wp--preset--color--ink);
}

body.tj-vibe-property-editorial p.tj-display--quote {
	font-size: clamp(24px, 3vw, 40px) !important;
	line-height: 1.4;
}

/* Scroll-shrink (V2 nav.scrolled) — nav.js toggles .tj-scrolled past 50px */
body.tj-vibe-property-editorial > header .tj-header-triptych,
body.tj-vibe-property-editorial .wp-site-blocks > header .tj-header-triptych {
	transition: padding 400ms ease;
}

body.tj-vibe-property-editorial > header.tj-scrolled,
body.tj-vibe-property-editorial .wp-site-blocks > header.tj-scrolled {
	box-shadow: 0 1px 30px rgba(1, 59, 107, 0.07);
}

body.tj-vibe-property-editorial header.tj-scrolled .tj-header-triptych {
	padding-top: 8px !important;
	padding-bottom: 8px !important;
}

/* ─────────────────────────────────────────────────────────────────
 * V2 section rhythm — exact client-file values, robust to the real
 * content structure (sections nest inside .wp-block-post-content on
 * deployed pages, which the older `main >` child selector missed).
 * ───────────────────────────────────────────────────────────────── */

body.tj-vibe-property-editorial .wp-block-post-content > section.wp-block-group,
body.tj-vibe-property-editorial .wp-block-post-content > .wp-block-group.alignfull {
	padding: 150px 60px !important;
}

body.tj-vibe-property-editorial .wp-block-post-content > section.tj-prop-hero,
body.tj-vibe-property-editorial .wp-block-post-content > .wp-block-group.tj-prop-hero {
	padding: 120px 60px 9vh !important;
}

body.tj-vibe-property-editorial .wp-block-post-content > section.tj-prop-dark-strip,
body.tj-vibe-property-editorial .wp-block-post-content > .wp-block-group.tj-prop-dark-strip {
	padding: 150px 60px !important;
}

/* Two-column splits (about / problem / why / contact): 110px gutter.
   About is 100px in the client file — close enough to unify at 110
   everywhere EXCEPT where the number-card grid needs 60px. */
body.tj-vibe-property-editorial .wp-block-post-content section .wp-block-columns {
	column-gap: 110px;
}

body.tj-vibe-property-editorial .wp-block-post-content section .wp-block-columns:has(.tj-prop-number-card) {
	column-gap: 60px;
	margin-top: 78px !important;
}

body.tj-vibe-property-editorial section.tj-prop-dark-strip .wp-block-columns,
body.tj-vibe-property-editorial .wp-block-post-content .tj-prop-dark-strip .wp-block-columns {
	column-gap: 40px !important;
	margin-top: 78px !important;
}

/* Nav bar — 11px 60px, compressing to 8px when scrolled */
body.tj-vibe-property-editorial .tj-header-triptych {
	padding: 11px 60px !important;
}

body.tj-vibe-property-editorial header.tj-scrolled .tj-header-triptych {
	padding: 8px 60px !important;
}

/* Footer band */
body.tj-vibe-property-editorial footer .has-footer-bg-background-color,
body.tj-vibe-property-editorial .wp-site-blocks > footer .wp-block-group.has-footer-bg-background-color {
	padding: 54px 60px !important;
}

/* Responsive rhythm per the client file */
@media (max-width: 1024px) {
	body.tj-vibe-property-editorial .wp-block-post-content > section.wp-block-group,
	body.tj-vibe-property-editorial .wp-block-post-content > .wp-block-group.alignfull,
	body.tj-vibe-property-editorial .wp-block-post-content > .tj-prop-dark-strip {
		padding: 100px 30px !important;
	}
	body.tj-vibe-property-editorial .wp-block-post-content section .wp-block-columns {
		column-gap: 56px;
	}
	body.tj-vibe-property-editorial .tj-header-triptych { padding: 10px 30px !important; }
}

@media (max-width: 768px) {
	body.tj-vibe-property-editorial .wp-block-post-content > section.wp-block-group,
	body.tj-vibe-property-editorial .wp-block-post-content > .wp-block-group.alignfull,
	body.tj-vibe-property-editorial .wp-block-post-content > .tj-prop-hero,
	body.tj-vibe-property-editorial .wp-block-post-content > .tj-prop-dark-strip {
		padding: 84px 22px !important;
	}
	body.tj-vibe-property-editorial .tj-header-triptych { padding: 12px 22px !important; }
}

/* Hero image geometry — exact V2: 45% width, left-fade at 58%, and the
   ±8% vertical bleed that gives the parallax room to drift. */
body.tj-vibe-property-editorial .tj-prop-hero-image {
	width: 45%;
}

body.tj-vibe-property-editorial .tj-prop-hero-image::after {
	background: linear-gradient(to left, transparent 58%, var(--wp--preset--color--bg) 100%);
}

body.tj-vibe-property-editorial .tj-prop-hero-image img {
	position: absolute;
	top: -8%;
	left: 0;
	width: 100%;
	height: 116%;
	object-fit: cover;
}

/* Hero micro-rhythm + entrance — exact V2 values */
body.tj-vibe-property-editorial .tj-prop-hero-content > .tj-eyebrow { margin-bottom: 28px; }
body.tj-vibe-property-editorial .tj-prop-hero-content h1 { margin-bottom: 36px !important; }
body.tj-vibe-property-editorial .tj-prop-hero-content p.has-lg-font-size { font-size: 20px !important; margin-bottom: 46px; max-width: 620px; }
body.tj-vibe-property-editorial .tj-prop-hero .wp-block-buttons { gap: 20px !important; }

@keyframes tjPropFadeUp { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: translateY(0); } }
@keyframes tjPropFadeIn { from { opacity: 0; } to { opacity: 1; } }

body.tj-vibe-property-editorial.tj-feature-motion .tj-prop-hero-content > .tj-eyebrow { opacity: 0; animation: tjPropFadeUp 0.9s cubic-bezier(0.22,1,0.36,1) 0.3s forwards; }
body.tj-vibe-property-editorial.tj-feature-motion .tj-prop-hero-content h1 { opacity: 0; animation: tjPropFadeUp 0.9s cubic-bezier(0.22,1,0.36,1) 0.5s forwards; }
body.tj-vibe-property-editorial.tj-feature-motion .tj-prop-hero-content p.has-lg-font-size { opacity: 0; animation: tjPropFadeUp 0.9s cubic-bezier(0.22,1,0.36,1) 0.7s forwards; }
body.tj-vibe-property-editorial.tj-feature-motion .tj-prop-hero-content .wp-block-buttons { opacity: 0; animation: tjPropFadeUp 0.9s cubic-bezier(0.22,1,0.36,1) 0.9s forwards; }
body.tj-vibe-property-editorial.tj-feature-motion .tj-prop-hero-image { opacity: 0; animation: tjPropFadeIn 1.3s cubic-bezier(0.22,1,0.36,1) 0.2s forwards; }

/* Hero pages: the V2 nav FLOATS over the hero (position:fixed, out of
   flow) — sticky keeps the header in flow and shoves the 100vh hero
   down by the header height, which reads as "extreme top padding".
   Scoped with :has so interior pages keep the sticky behaviour. */
body.tj-vibe-property-editorial:has(.tj-prop-hero) > header,
body.tj-vibe-property-editorial:has(.tj-prop-hero) .wp-site-blocks > header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
}

body.tj-vibe-property-editorial.admin-bar:has(.tj-prop-hero) > header,
body.tj-vibe-property-editorial.admin-bar:has(.tj-prop-hero) .wp-site-blocks > header {
	top: 32px;
}

/* Left alignment — WP constrained layout centres max-width children;
   the client file left-aligns everything except the statement/quote.
   Kill the auto-centring except for explicitly centred text. */
body.tj-vibe-property-editorial .tj-prop-hero-content > *,
body.tj-vibe-property-editorial .wp-block-post-content section > h1:not(.has-text-align-center),
body.tj-vibe-property-editorial .wp-block-post-content section > h2:not(.has-text-align-center),
body.tj-vibe-property-editorial .wp-block-post-content section > h3:not(.has-text-align-center),
body.tj-vibe-property-editorial .wp-block-post-content section > p:not(.has-text-align-center),
body.tj-vibe-property-editorial .wp-block-post-content section > .wp-block-buttons,
body.tj-vibe-property-editorial .wp-block-post-content section > .wp-block-columns {
	margin-left: 0 !important;
	margin-right: auto !important;
}

/* Dark strip: headings must be WHITE on navy — the vibe h2/h3 ink rule
   outguns the pattern rule on specificity, so restate with weight. */
body.tj-vibe-property-editorial .tj-prop-dark-strip h2.wp-block-heading,
body.tj-vibe-property-editorial .tj-prop-dark-strip h3.wp-block-heading,
body.tj-vibe-property-editorial .tj-prop-dark-strip h2 strong,
body.tj-vibe-property-editorial .tj-prop-dark-strip h3 strong {
	color: var(--wp--preset--color--bg) !important;
}

body.tj-vibe-property-editorial .tj-prop-dark-strip .tj-eyebrow {
	color: var(--wp--preset--color--accent-bright) !important;
}

/* Lead modal: kill stray chrome — no card border, clean close button,
   V2 input rhythm inside the card. */
body.tj-vibe-property-editorial .tj-modal-card { border: 0; }
body.tj-vibe-property-editorial .tj-modal-close { background: none !important; border: 0 !important; padding: 0; box-shadow: none; }
body.tj-vibe-property-editorial .tj-modal-card .tj-prop-field { margin-bottom: 24px; }
body.tj-vibe-property-editorial .tj-modal-card h2 { margin-left: 0 !important; }

/* Nav CTA — the triptych nav-link rule was greying the button text;
   buttons are exempt and stay white on navy. */
body.tj-vibe-property-editorial .tj-header-triptych .tj-primary-nav a.wp-block-button__link {
	color: var(--wp--preset--color--bg) !important;
}

/* Modal + contact form: V2 puts Name + Number side by side (form-row).
   Grid the underline form; first two fields share a row, rest span. */
body.tj-vibe-property-editorial .tj-prop-underline-form {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 30px;
}

body.tj-vibe-property-editorial .tj-prop-underline-form > * {
	grid-column: 1 / -1;
}

body.tj-vibe-property-editorial .tj-prop-underline-form > .tj-prop-field:nth-of-type(1),
body.tj-vibe-property-editorial .tj-prop-underline-form > .tj-prop-field:nth-of-type(2) {
	grid-column: auto;
}

@media (max-width: 600px) {
	body.tj-vibe-property-editorial .tj-prop-underline-form { grid-template-columns: 1fr; }
	body.tj-vibe-property-editorial .tj-prop-underline-form > .tj-prop-field { grid-column: 1 / -1; }
}

/* Modal eyebrow: no hairline dash inside the card (V2 has none there) */
body.tj-vibe-property-editorial .tj-modal-card .tj-eyebrow::after {
	display: none !important;
}

/* Mobile hero — V2 hides the image and centres; we keep the centring
   and paddings but let the skyline breathe behind the copy as a soft
   full-bleed backdrop instead of a blank white screen. */
@media (max-width: 768px) {
	body.tj-vibe-property-editorial .tj-prop-hero {
		justify-content: center;
		min-height: auto;
		padding: 124px 22px 76px !important;
	}

	body.tj-vibe-property-editorial .tj-prop-hero-image {
		display: block !important;
		width: 100%;
		top: 0;
		height: 100%;
		opacity: 0.22;
	}

	body.tj-vibe-property-editorial .tj-prop-hero-image::after {
		background: linear-gradient(to bottom, transparent 30%, var(--wp--preset--color--bg) 92%);
	}

	body.tj-vibe-property-editorial .tj-prop-hero-content h1 {
		font-size: clamp(38px, 10.5vw, 60px) !important;
		letter-spacing: -1px;
		margin-bottom: 28px !important;
	}

	body.tj-vibe-property-editorial .tj-prop-hero-content p.has-lg-font-size {
		font-size: 17px !important;
		margin-bottom: 36px;
	}
}

/* Mobile hero legibility: white where the words are, skyline revealed
   below the CTA — not a wash behind the copy. */
@media (max-width: 768px) {
	body.tj-vibe-property-editorial .tj-prop-hero-image {
		opacity: 0.85;
	}

	body.tj-vibe-property-editorial .tj-prop-hero-image::after {
		background: linear-gradient(
			to bottom,
			var(--wp--preset--color--bg) 0%,
			var(--wp--preset--color--bg) 42%,
			color-mix(in srgb, var(--wp--preset--color--bg) 55%, transparent) 62%,
			transparent 100%
		);
	}

	body.tj-vibe-property-editorial .tj-prop-hero {
		padding-bottom: 44vh !important;
	}
}