/*
 * core/paragraph.
 *
 * The demo's small typographic components — eyebrows, labels, ledes, stats,
 * chips, pills — are paragraph styles so authors reach for one block and pick
 * a look.
 */

.is-style-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	margin: 0;
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: var(--wp--custom--letter-spacing--eyebrow);
	text-transform: uppercase;
	color: var(--wp--preset--color--steel);
}

/*
 * An eyebrow is inline-flex so it hugs its text, but core's constrained layout
 * places children by giving them the content width and `margin-inline: auto`,
 * and auto margins do nothing to an inline-level box. Left alone, a section's
 * eyebrow therefore sits against the page edge while the heading below it sits
 * in the column. As a direct child of that layout it becomes a block instead,
 * filling the column and keeping its text on the left of it.
 */
.is-layout-constrained > .is-style-eyebrow {
	display: flex;
	justify-content: flex-start;
}

.is-style-section-dark .is-style-eyebrow,
.is-style-section-navy .is-style-eyebrow,
.is-style-section-navy-panel .is-style-eyebrow,
.is-style-info-card .is-style-eyebrow,
.wp-block-cover .is-style-eyebrow,
.ckk-intent .is-style-eyebrow {
	color: var(--wp--preset--color--steel-light);
}

.is-style-label {
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: var(--wp--custom--letter-spacing--label);
	text-transform: uppercase;
	color: var(--wp--preset--color--steel);
}

.is-style-lede {
	font-size: var(--wp--preset--font-size--lede);
	color: var(--wp--preset--color--gray-text);
	max-width: var(--wp--custom--measure--lede);
}

.wp-block-cover .is-style-lede {
	color: rgba(255, 255, 255, 0.82);
	max-width: var(--wp--custom--measure--hero-sub);
}

.is-style-note {
	font-size: 0.90625rem;
	line-height: 1.6;
	color: var(--wp--preset--color--gray-text);
	max-width: var(--wp--custom--measure--note);
}

.is-style-card .is-style-note {
	flex: 1;
	max-width: none;
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.5;
}

.is-style-section-dark .is-style-note,
.is-style-section-navy .is-style-note,
.is-style-section-navy-panel .is-style-note,
.is-style-info-card .is-style-note,
.wp-block-cover .is-style-note {
	color: var(--wp--custom--on-dark--text);
}

.is-style-section-dark p,
.is-style-section-navy-panel p,
.is-style-info-card p {
	color: var(--wp--custom--on-dark--text);
}

/* Stats: the count-up module animates the first numeric text node. */
.is-style-stat-number {
	font-family: var(--wp--preset--font-family--serif);
	font-size: var(--wp--preset--font-size--stat);
	font-weight: 600;
	line-height: 1;
	letter-spacing: var(--wp--custom--letter-spacing--stat);
	color: var(--wp--preset--color--navy);
}

.is-style-section-navy .is-style-stat-number,
.is-style-section-dark .is-style-stat-number {
	color: #fff;
}

.is-style-stat-number em {
	color: var(--wp--preset--color--steel);
}

.is-style-section-navy .is-style-stat-number em,
.is-style-section-dark .is-style-stat-number em {
	color: var(--wp--preset--color--steel-light);
}

/*
 * `.wp-block-paragraph` is on the selector only to outrank core's layout rule,
 * which zeroes the block margins of every child of a flow container. Without
 * the gap the serif numerals' descenders run into the label.
 */
.is-style-stat-label.wp-block-paragraph,
.is-style-stat-label {
	margin-top: 18px;
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: var(--wp--custom--letter-spacing--label);
	text-transform: uppercase;
	color: var(--wp--preset--color--gray);
}

.is-style-section-navy .is-style-stat-label,
.is-style-section-dark .is-style-stat-label {
	color: var(--wp--custom--on-dark--text);
	max-width: 22ch;
	margin-inline: auto;
}

/* Chips: the bindings source emits `<span class="ckk-chip">` runs. */
.is-style-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
}

.ckk-chip {
	display: inline-block;
	padding: 5px 10px;
	border-radius: var(--wp--custom--radius--chip);
	background: var(--wp--preset--color--bg-2);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	color: var(--wp--preset--color--navy);
	white-space: nowrap;
}

.ckk-chip.is-muted {
	background: transparent;
	border: 1px solid var(--wp--preset--color--line);
	font-weight: 500;
	color: var(--wp--preset--color--gray-text);
}

/* Pills: static by default, pinned to the corner inside card media. */
.is-style-pill,
.is-style-pill-avail {
	display: inline-block;
	padding: 6px 12px;
	border-radius: var(--wp--custom--radius--pill);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	line-height: 1.3;
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
}

.is-style-pill {
	background: rgba(255, 255, 255, 0.92);
	color: var(--wp--preset--color--navy);
}

.is-style-pill-avail {
	background: var(--wp--preset--color--steel);
	color: #fff;
}

.is-style-card-media .is-style-pill,
.is-style-card-media .is-style-pill-avail {
	position: absolute;
	top: 16px;
	left: 16px;
	z-index: 3;
	margin: 0;
}

/* Roman numerals on the why grid. */
.is-style-numeral {
	font-family: var(--wp--preset--font-family--serif);
	font-style: italic;
	font-size: 1.0625rem;
	font-weight: 500;
	color: var(--wp--preset--color--steel-light);
}

/* Initials in a gradient disc when there is no headshot. */
.is-style-monogram {
	display: grid;
	place-items: center;
	width: 74px;
	height: 74px;

	/*
	 * The card is a flex column, so a monogram beside a long bio was shrunk to
	 * whatever height was left over and the 50% radius turned it into an
	 * ellipse. It is a fixed disc: it neither shrinks nor stretches.
	 */
	flex: none;
	align-self: start;
	min-height: 74px;
	margin-bottom: 8px;
	border-radius: var(--wp--custom--radius--avatar);
	background: var(--wp--preset--gradient--fall);
	font-family: var(--wp--preset--font-family--serif);
	font-size: 1.625rem;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.02em;
	color: #fff;
}

.is-style-monogram.is-large {
	width: 88px;
	height: 88px;
	margin-bottom: 12px;
	font-size: 1.875rem;
}

.is-style-signature {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-top: 24px;
	font-family: var(--wp--preset--font-family--serif);
	font-style: italic;
	font-size: 1.3125rem;
	font-weight: 500;
	color: var(--wp--preset--color--steel);
}

.is-style-signature::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--wp--preset--color--line);
}

/* Address line with a pin, under the property hero title. */
.is-style-address {
	display: flex;
	align-items: center;
	gap: 9px;
	margin-top: 12px;
	font-size: clamp(0.9375rem, 1.5vw, 1.125rem);
	color: rgba(255, 255, 255, 0.85);
}

.is-style-address::before {
	content: "";
	flex: none;
	width: 17px;
	height: 17px;
	opacity: 0.8;
	background: url(../../img/pin.svg) center / contain no-repeat;
}

.is-style-meta {
	font-size: 0.8125rem;
	color: var(--wp--preset--color--gray-text);
}

.is-style-meta strong {
	font-weight: 600;
	color: var(--wp--preset--color--navy);
}

.is-style-news-row .is-style-meta,
.ckk-article .is-style-meta {
	font-style: italic;
	font-size: 0.75rem;
	color: var(--wp--preset--color--gray);
}

.ckk-article .is-style-meta {
	font-size: 0.8125rem;
	margin: 8px 0 28px;
}

/*
 * The byline reads "by The Journal Record". The publication arrives on its own
 * from the ckk_source binding, which replaces the whole paragraph, so the word
 * is prepended here rather than stored with the data. :not(:empty) keeps it off
 * the three imported stories that carry no source.
 */
.is-style-news-row .is-style-meta:not(:empty)::before,
.ckk-article .is-style-meta:not(:empty)::before {
	content: "by ";
}

.is-style-disclaimer {
	margin-top: 44px;
	padding-top: 24px;
	border-top: 1px solid rgba(255, 255, 255, 0.13);
	font-size: var(--wp--preset--font-size--xs);
	line-height: 1.65;
	color: var(--wp--custom--on-dark--muted);
}

.is-style-footer-strong {
	padding: 5px 0;
	font-family: var(--wp--preset--font-family--serif);
	font-size: var(--wp--preset--font-size--md);
	color: #fff;
}

.is-style-inline-dots {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 26px;
	margin-top: 26px;
	font-size: 0.78125rem;
	font-weight: 500;
	letter-spacing: 0.04em;
	color: var(--wp--preset--color--gray);
}

.is-style-inline-dots > * {
	margin: 0;
}

/*
 * The separator the demo draws between claims: a 4px steel circle, not a typed
 * character, so it never lands at the start of a wrapped line.
 */
.is-style-inline-dots > * + *::before {
	content: "";
	display: inline-block;
	width: 4px;
	height: 4px;
	margin-right: 26px;
	border-radius: 50%;
	background: var(--wp--preset--color--steel);
	vertical-align: middle;
}

/*
 * The separator between chips. It exists so the chip line extracts as
 * "Power Center · 272,135 SF · 28.9 ac" rather than as one run-together word,
 * and is clipped out of the visual layer because the flex gap already separates
 * them there. Not `display: none`: that would take it out of the text too,
 * which is the whole point of it.
 */
.ckk-chip-sep {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/*
 * The line that ties a newsroom story and a property page to each other. It is
 * empty on the pages where there is no counterpart, and an empty paragraph here
 * would still take its margin, so it collapses.
 */
.is-style-related {
	margin-top: 28px;
	padding-top: 20px;
	border-top: 1px solid var(--wp--preset--color--line);
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--gray-text);
}

.is-style-related:empty {
	display: none;
}

.is-style-related a {
	font-weight: 600;
	color: var(--wp--preset--color--navy);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-color: var(--wp--preset--color--steel-faint);
}

.is-style-related a:hover {
	text-decoration-color: currentcolor;
}

/*
 * The investment disclosure. Smaller and quieter than body copy, but legible:
 * it is on the page because it has to be read, not to be hidden.
 */
.is-style-disclosure {
	max-width: var(--wp--custom--measure--prose);
	padding-top: 22px;
	border-top: 1px solid var(--wp--preset--color--line);
	font-size: var(--wp--preset--font-size--xs);
	line-height: 1.7;
	color: var(--wp--preset--color--gray);
}

/*
 * The one-sentence summary of a property, built from its own figures. It is
 * near the top of the page and reads as a lede, and it is deliberately one
 * self-contained block of text: every fact in it also appears further down, but
 * only here can it be quoted without being assembled first.
 *
 * It lives inside a flow group, not directly inside the constrained one: core
 * gives a constrained child both the content width and `margin-inline: auto`,
 * which would override the reading measure and then centre what was left.
 */
.ckk-fact-summary {
	max-width: var(--wp--custom--measure--prose);
	font-size: var(--wp--preset--font-size--lede);
	line-height: 1.6;
	color: var(--wp--preset--color--gray-text);
}

.ckk-fact-summary:empty {
	display: none;
}