/**
 * HOS shared components: stat, testimonial, person.
 * Rendered by [hos_stat] / [hos_testimonial] / [hos_person]. Design-system
 * tokens only (var(--ds-*)); the DS runtime emits these site-wide (Mode A).
 */

/* ---- Stat ---- */
.hos-stat { display: flex; flex-direction: column; gap: var(--ds-space-xs); }
.hos-stat__value {
	font-family: var(--ds-font-heading);
	font-weight: var(--ds-weight-bold);
	font-size: var(--ds-text-stat);
	line-height: var(--ds-line-flat);
	color: var(--ds-color-red-dark);
	font-variant-numeric: tabular-nums;
}
.hos-stat__label {
	font-size: var(--ds-text-sm);
	line-height: var(--ds-line-snug);
	color: var(--ds-color-body);
}

/* ---- Testimonial (rotate-on-load, cache-safe) ---- */
.hos-quote-rotator { display: block; height: 100%; }
.hos-quote-rotator > [data-hos-quote] { display: none; }
.hos-quote-rotator > [data-hos-quote]:first-child { display: flex; }
.hos-quote-rotator.is-ready > [data-hos-quote] { display: none; }
.hos-quote-rotator.is-ready > [data-hos-quote].is-active { display: flex; }

.hos-quote {
	margin: 0;
	flex-direction: column;
	justify-content: center;
	height: 100%;
	border-radius: var(--ds-radius-lg);
}
.hos-quote--card {
	background: var(--ds-color-blue-tint);
	border: 1px solid var(--ds-color-blue-tint-deep);
	padding: var(--ds-space-panel);
	gap: var(--ds-space-md);
}
.hos-quote--impact {
	background: var(--ds-color-white);
	padding: clamp(20px, 3vw, 28px);
	gap: var(--ds-space-sm);
}
.hos-quote__text {
	margin: 0;
	font-family: var(--ds-font-body);
	font-weight: var(--ds-weight-regular);
	font-size: var(--ds-text-quote);
	line-height: var(--ds-line-lead);
	color: var(--ds-color-heading);
}
.hos-quote--impact .hos-quote__text {
	font-size: var(--ds-text-quote-sm);
	line-height: var(--ds-line-snug);
}
.hos-quote__by {
	font-size: var(--ds-text-xs);
	line-height: var(--ds-line-lead);
	color: var(--ds-color-body);
}

/* ---- Person card ---- */
.hos-person { display: flex; flex-direction: column; gap: var(--ds-space-sm); }
.hos-person__photo {
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	object-position: center top;
	border-radius: var(--ds-radius-lg);
	display: block;
}
.hos-person__ph {
	width: 100%;
	aspect-ratio: 4 / 5;
	border-radius: var(--ds-radius-lg);
	border: 2px dashed var(--ds-color-border-hover);
	background: var(--ds-color-white);
	color: var(--ds-color-border-hover);
	display: flex;
	align-items: center;
	justify-content: center;
}
.hos-person__meta { display: flex; flex-direction: column; gap: var(--ds-space-2xs); }
.hos-person__name {
	font-family: var(--ds-font-heading);
	font-weight: var(--ds-weight-semibold);
	font-size: var(--ds-text-intro);
	line-height: var(--ds-line-tight);
	color: var(--ds-color-heading);
}
.hos-person__role {
	font-size: var(--ds-text-xs);
	line-height: var(--ds-line-lead);
	color: var(--ds-color-body);
}

/* ---- Newsletter panel ([hos_newsletter]) ---- */
.hos-newsletter { background: var(--ds-color-blue-tint); border: 1px solid var(--ds-color-blue-tint-deep); border-radius: var(--ds-radius-lg); padding: var(--ds-space-panel); display: flex; flex-wrap: wrap; gap: var(--ds-space-xl); align-items: center; justify-content: space-between; }
.hos-newsletter__text { flex: 1 1 340px; display: flex; flex-direction: column; gap: var(--ds-space-xs); }
.hos-newsletter__text h2 { margin: 0; font-family: var(--ds-font-heading); font-weight: var(--ds-weight-bold); font-size: var(--ds-text-h3); line-height: var(--ds-line-tight); color: var(--ds-color-heading); }
.hos-newsletter__text p { margin: 0; font-size: var(--ds-text-sm); line-height: var(--ds-line-snug); color: var(--ds-color-body); max-width: 52ch; }
.hos-newsletter__btn { flex: none; display: inline-flex; align-items: center; min-height: 56px; padding: 16px 32px; border-radius: var(--ds-radius-pill); background: var(--ds-color-red-dark); color: var(--ds-color-white); font-family: var(--ds-font-heading); font-weight: var(--ds-weight-semibold); font-size: var(--ds-text-base); text-decoration: none; }
.hos-newsletter__btn:hover { background: var(--ds-color-red-hover); color: var(--ds-color-white); }

/* ---- Page-content anchor components ----
   The design system styles every page-content link (.fl-ds-page a /
   .fl-ds-block a, specificity 0,1,1) with the body-link colour and a 2px
   underline. Button- and card-style anchors must opt out. These overrides
   beat that base rule (0,2,1) without touching genuine text links, and
   restore each button's own text colour (which the base rule had forced to
   red). Site chrome is unaffected because it sits outside .fl-ds-page. */
.fl-ds-page a.hp-card, .fl-ds-block a.hp-card, .fl-ds-page a.hp-svc, .fl-ds-block a.hp-svc, .fl-ds-page a.hp-post, .fl-ds-block a.hp-post { color: inherit; text-decoration: none; }
.fl-ds-page a.hp-hero__btn, .fl-ds-block a.hp-hero__btn, .fl-ds-page a.hp-services__pro-btn, .fl-ds-block a.hp-services__pro-btn, .fl-ds-page a.hp-help__btn, .fl-ds-block a.hp-help__btn, .fl-ds-page a.hos-newsletter__btn, .fl-ds-block a.hos-newsletter__btn { text-decoration: none; }
.fl-ds-page a.hp-hero__btn--white, .fl-ds-block a.hp-hero__btn--white { color: var(--ds-color-red-dark); }
.fl-ds-page a.hp-hero__btn--white:hover, .fl-ds-block a.hp-hero__btn--white:hover, .fl-ds-page a.hp-hero__btn--peach, .fl-ds-block a.hp-hero__btn--peach, .fl-ds-page a.hp-hero__btn--peach:hover, .fl-ds-block a.hp-hero__btn--peach:hover { color: var(--ds-color-red-hover); }
.fl-ds-page a.hp-services__pro-btn, .fl-ds-block a.hp-services__pro-btn, .fl-ds-page a.hp-services__pro-btn:hover, .fl-ds-block a.hp-services__pro-btn:hover, .fl-ds-page a.hos-newsletter__btn, .fl-ds-block a.hos-newsletter__btn, .fl-ds-page a.hos-newsletter__btn:hover, .fl-ds-block a.hos-newsletter__btn:hover, .fl-ds-page a.hp-help__btn--outline, .fl-ds-block a.hp-help__btn--outline, .fl-ds-page a.hp-help__btn--outline:hover, .fl-ds-block a.hp-help__btn--outline:hover { color: var(--ds-color-white); }
.fl-ds-page a.hp-help__btn--white, .fl-ds-block a.hp-help__btn--white, .fl-ds-page a.hp-help__btn--white:hover, .fl-ds-block a.hp-help__btn--white:hover { color: var(--ds-color-blue-dark); }