/* ─── Read-More Content Expander (.hzo-readmore) ───────────────────────────
   W-092 · roadmap #14. Clamps a block of authored prose to a fade-masked
   N-line (or px/rem) preview with a "Read more / Show less" toggle, while the
   FULL text stays in the DOM — clipped ONLY via max-block-size + a gradient
   fade mask, NEVER display:none. Crawlers, AI answer engines, find-in-page,
   and AT read the complete copy; the visible page stays tight.

   FAIL-VISIBLE BY CONSTRUCTION: the clamp + the toggle are both gated on the
   JS-set .hzo-readmore--ready flag. No JS, a thrown init, or a stripped engine
   ⇒ the flag is absent ⇒ NO clamp (full prose shows) and the toggle stays
   hidden. The disclosure activates only once JS confirms it can drive it, so a
   miss can never leave a permanently-trapped-clamped block.

   The overflow is hidden with overflow + max-block-size + mask ONLY — never
   display:none / visibility:hidden — so the clipped copy remains in the a11y
   tree and the crawlable DOM. readmore.js force-expands on focusin / :target /
   hashchange so keyboard + AT never land on visually-clipped content.
   ─────────────────────────────────────────────────────────────────────── */

.hzo-readmore {
	--hzo-readmore-lines: 4;    /* line-count fallback for the collapsed height */
	--hzo-readmore-fade: 3em;   /* depth of the gradient fade mask               */
	position: relative;
}

/* The collapsible region: the FULL prose, always rendered + in flow. It only
   gains a clamp under the JS-ready flag (see below). */
.hzo-readmore__content {
	transition: max-block-size var(--dur-3) var(--ease-standard);
}

/* ── Armed (clamped) leg — ONLY under the JS-ready flag, ONLY while collapsed.
      readmore.js sets --hzo-readmore-max (resolved px, per-breakpoint) on init;
      the calc(lines * 1lh) is the belt for the ready-but-var-unset edge. The
      fade mask uses currentColor (opaque, alpha 1) fading to transparent, so it
      is background-independent — it fades the text itself, working on any
      section background (light, alt, or dark) rather than painting a page-color
      overlay that would break on a non-default background. ── */
.hzo-readmore--ready:not(.is-expanded) .hzo-readmore__content {
	max-block-size: var(--hzo-readmore-max, calc(var(--hzo-readmore-lines, 4) * 1lh));
	overflow: hidden;
	-webkit-mask-image: linear-gradient(to bottom, currentColor 0, currentColor calc(100% - var(--hzo-readmore-fade, 3em)), transparent 100%);
	        mask-image: linear-gradient(to bottom, currentColor 0, currentColor calc(100% - var(--hzo-readmore-fade, 3em)), transparent 100%);
}

/* Hard-cut variant (fade="false"): keep the clamp, drop the fade mask. */
.hzo-readmore--nofade.hzo-readmore--ready:not(.is-expanded) .hzo-readmore__content {
	-webkit-mask-image: none;
	        mask-image: none;
}

/* ── Actions row + toggle — hidden until the engine wires the disclosure, so
      no-JS shows full prose with NO orphaned button. ── */
.hzo-readmore__actions {
	display: none;
}
.hzo-readmore--ready .hzo-readmore__actions {
	display: flex;
	justify-content: flex-start;            /* align="start" — the default */
	margin-block-start: var(--space-md);
}
.hzo-readmore--align-center.hzo-readmore--ready .hzo-readmore__actions {
	justify-content: center;
}
.hzo-readmore--align-end.hzo-readmore--ready .hzo-readmore__actions {
	justify-content: flex-end;
}

/* Default pill button. Padding comes from tokens and yields a comfortable
   >=44px tap target (§11.2) without a hardcoded size. Focus ring defers to the
   global :focus-visible floor (base.css) — no hand-rolled ring width (§9.2). */
.hzo-readmore__toggle {
	display: inline-flex;
	align-items: center;
	gap: var(--space-sm);
	font: inherit;
	font-weight: var(--fw-semibold, 600);
	line-height: var(--lh-snug, 1.25);
	color: var(--brand-text);
	background: transparent;
	border: var(--border-1) solid currentColor;
	border-radius: var(--radius-pill);
	padding: var(--space-smd) var(--space-lg);
	cursor: pointer;
	transition: color var(--dur-2) var(--ease-standard),
	            background-color var(--dur-2) var(--ease-standard),
	            border-color var(--dur-2) var(--ease-standard);
}
.hzo-readmore__toggle:hover {
	color: var(--text-on-brand);
	background: var(--brand);
	border-color: var(--brand);
}
.hzo-readmore__toggle:active {
	background: var(--brand-hover-on-light);
	border-color: var(--brand-hover-on-light);
}

/* Link-style toggle (toggle-style="link"): an inline text button, still a real
   <button>. Keeps a tap-friendly block padding. */
.hzo-readmore--link .hzo-readmore__toggle {
	border: 0;
	border-radius: 0;
	background: transparent;
	padding: var(--space-sm) 0;
	text-decoration: underline;
	text-underline-offset: 0.15em;
}
.hzo-readmore--link .hzo-readmore__toggle:hover {
	color: var(--brand-hover-on-light);
	background: transparent;
}
.hzo-readmore--link .hzo-readmore__toggle:active {
	background: transparent;
}

/* Decorative caret — rotates when expanded. aria-hidden in the markup. */
.hzo-readmore__chevron {
	inline-size: 1em;
	block-size: 1em;
	flex: none;
	transition: transform var(--dur-2) var(--ease-standard);
}
.hzo-readmore.is-expanded .hzo-readmore__chevron {
	transform: rotate(180deg);
}

/* ═══ Fail-visible / environment branches ══════════════════════════════════ */

/* reduced-motion [PRESERVE-5]: kill the height + chevron transitions → instant
   expand/collapse. Content is never hidden; no ambient motion exists. */
@media (prefers-reduced-motion: reduce) {
	.hzo-readmore__content,
	.hzo-readmore__chevron,
	.hzo-readmore__toggle {
		transition: none !important;
	}
}

/* forced-colors [§12.2]: the gradient fade conveys nothing in High Contrast and
   an alpha mask can drop text — remove the mask (hard cut). State is carried by
   the toggle text + aria-expanded; the toggle uses system colors and the focus
   ring falls back to a system outline (base.css floor), not a box-shadow ring. */
@media (forced-colors: active) {
	.hzo-readmore--ready:not(.is-expanded) .hzo-readmore__content {
		-webkit-mask-image: none;
		        mask-image: none;
	}
	.hzo-readmore__toggle {
		border-color: currentColor;
	}
}

/* @media print [G13]: a printed service/estimate page must show the FULL copy.
   Force-expand — drop the clamp + mask, show everything, hide the toggle. */
@media print {
	.hzo-readmore__content {
		max-block-size: none !important;
		overflow: visible !important;
		-webkit-mask-image: none !important;
		        mask-image: none !important;
	}
	.hzo-readmore__actions {
		display: none !important;
	}
}