/**
 * Design Sprint 5 — Conversion & Trust Architecture.
 *
 * The gap this closes is not a styling one. The theme's trust badges,
 * testimonials, statistics and contact actions were all well built — and
 * almost all of them rendered on the homepage and nowhere else. A visitor
 * arriving on a service page, a city page or the contact page from search
 * (which is most visitors) was asked to call before being given a single
 * reason to, and the site's WhatsApp number was reachable from exactly one
 * page unless a `header-cta` nav menu happened to be assigned.
 *
 * So this module is layout and rhythm for components that already exist,
 * plus the few new surfaces the conversion journey was missing:
 *
 *   §1  CTA Group        — the canonical action row, one per page section
 *   §2  Trust Row        — the existing trust badges, on internal pages
 *   §3  Rating Summary   — the aggregate of ratings already on the page
 *   §4  Service Comparison — "which service is right for us?"
 *   §5  Trust Process    — screening steps, on the shared timeline
 *   §6  Privacy Note     — the reassurance beside an enquiry form
 *   §7  Sticky bar       — WhatsApp, and getting out of the keyboard's way
 *
 * It **redesigns nothing.** No colour, type, spacing, radius, shadow or
 * card treatment from Sprints 1–4 is altered; `hero-premium.css`,
 * `sections-premium.css`, `pages-premium.css`, `internal-premium.css` and
 * `motion.css` are not edited. Trust Badge, Testimonial Card, Process Step,
 * Section Heading and the `.btn` system are reused exactly as they are —
 * this file only gives them somewhere to sit.
 *
 * Design-system rules, unchanged from Sprints 2–4:
 *   - No hardcoded colour, spacing, radius, shadow or type value. Tokens,
 *     or `color-mix()` from tokens with a `@supports` fallback.
 *   - Motion consumes the `--motion-*` tokens; `transform` and `opacity`
 *     only, so nothing here can contribute to CLS.
 *   - Mobile-first. Every media query is `min-width`.
 *   - No JavaScript. The form-aware sticky bar is `:has()`, not a listener.
 */

/* ==================================================================
   1. CTA Group — the canonical conversion action row
   ------------------------------------------------------------------
   One primary, the rest outline. The wrap-and-stretch behaviour below
   is what stops a three-action row from overflowing a 360px screen
   without needing a breakpoint for every combination.
   ================================================================== */

.cta-group {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
	margin-block-start: var(--space-6);
}

.cta-group--center {
	justify-content: center;
}

.cta-group__action {
	/* Grow to fill a row, but never below a tappable width. Two actions
	   share a row at 30rem; three stack cleanly at 360px. */
	flex: 1 1 12rem;
	min-block-size: 3rem;
	justify-content: center;
	border-radius: var(--radius-lg);
}

/* WhatsApp is the one place the theme uses a brand-recognition colour
   rather than its own palette — the token exists for exactly this, and a
   green affordance is recognised faster than a teal one. Applied to the
   outline variant only, so it never competes with the page's primary
   action.

   The green is carried by the **border and the glyph, never the label**.
   `--color-whatsapp-dark` (#1da851) measures 3.1:1 against white: fine for
   a border or an icon, which WCAG 1.4.11 holds to 3:1 as non-text UI, and
   a clear failure for 1rem semibold text, which needs 4.5:1. The label
   therefore stays in the accessible ink colour and the button is still
   unmistakably the WhatsApp one. */
.btn--outline.cta-group__action--whatsapp {
	border-color: var(--color-whatsapp-dark);
	color: var(--color-primary-700);
}

.cta-group__action--whatsapp svg,
.sticky-cta__whatsapp svg {
	color: var(--color-whatsapp-dark);
}

@media (hover: hover) and (pointer: fine) {
	.btn--outline.cta-group__action--whatsapp:hover {
		border-color: var(--color-whatsapp-dark);
		background-color: color-mix(in srgb, var(--color-whatsapp) 12%, transparent);
	}
}

@supports not (color: color-mix(in srgb, red 50%, transparent)) {
	.btn--outline.cta-group__action--whatsapp:hover {
		background-color: var(--color-success-100);
	}
}

/* ---- On a dark panel ----------------------------------------------
   Three surfaces in this theme are a deep-teal gradient with inverse
   text: the Service CTA, the primary CTA Banner, and the homepage Final
   CTA panel. A CTA Group can land inside all three — Quick Contact
   Buttons falls back to one when no `header-cta` menu is assigned — and
   the default treatment would put a teal `.btn--primary` and a teal
   `.btn--outline` on a teal background. That is not a subtle contrast
   problem, it is an invisible button.

   These selectors are one step more specific than the WhatsApp rule
   above, so the brand-green treatment is correctly overridden here too:
   green on deep teal is no more readable than teal on teal. */
.service-cta .cta-group .btn--primary,
.cta-banner--primary .cta-group .btn--primary,
.home-final-cta .cta-group .btn--primary {
	background-color: var(--color-text-inverse);
	border-color: var(--color-text-inverse);
	color: var(--color-primary-700);
}

.service-cta .cta-group .btn--outline,
.cta-banner--primary .cta-group .btn--outline,
.home-final-cta .cta-group .btn--outline {
	border-color: color-mix(in srgb, var(--color-text-inverse) 45%, transparent);
	background-color: color-mix(in srgb, var(--color-text-inverse) 10%, transparent);
	color: var(--color-text-inverse);
}

/* The brand green measures worse against deep teal than it does against
   white, so on these panels the glyph rejoins the button's own ink. */
.service-cta .cta-group__action--whatsapp svg,
.cta-banner--primary .cta-group__action--whatsapp svg,
.home-final-cta .cta-group__action--whatsapp svg {
	color: inherit;
}

@media (hover: hover) and (pointer: fine) {
	.service-cta .cta-group .btn--primary:hover,
	.cta-banner--primary .cta-group .btn--primary:hover,
	.home-final-cta .cta-group .btn--primary:hover {
		background-color: var(--color-primary-50);
		border-color: var(--color-primary-50);
		color: var(--color-primary-700);
	}

	.service-cta .cta-group .btn--outline:hover,
	.cta-banner--primary .cta-group .btn--outline:hover,
	.home-final-cta .cta-group .btn--outline:hover {
		border-color: var(--color-text-inverse);
		background-color: color-mix(in srgb, var(--color-text-inverse) 20%, transparent);
		color: var(--color-text-inverse);
	}
}

@supports not (color: color-mix(in srgb, red 50%, transparent)) {
	.service-cta .cta-group .btn--outline,
	.cta-banner--primary .cta-group .btn--outline,
	.home-final-cta .cta-group .btn--outline {
		border-color: var(--color-text-inverse);
		background-color: transparent;
	}
}

/* ==================================================================
   2. Trust Row — the existing badges, on the pages that convert
   ------------------------------------------------------------------
   `patterns.css` owns the Trust Badge card itself; this is the strip it
   sits in. The compact variant tightens the card's padding for an
   internal page, where the badges support the content rather than being
   the content.
   ================================================================== */

.trust-row {
	margin-block: var(--space-12);
}

.trust-row__title {
	margin: 0 0 var(--space-6);
	font-family: var(--font-family-heading);
	font-size: var(--font-size-xl);
	font-weight: var(--font-weight-medium);
	letter-spacing: -0.01em;
}

.trust-row__grid {
	display: grid;
	gap: var(--space-4);
}

.trust-row--compact .trust-badge-card {
	padding: var(--space-4);
	block-size: 100%;
	border-radius: var(--premium-radius-sm);
	box-shadow: var(--premium-shadow-soft);
}

.trust-row--compact .trust-badge-card__title {
	font-size: var(--font-size-sm);
}

.trust-row--compact .trust-badge-card__description {
	font-size: var(--font-size-xs);
}

/* The reveal wrapper must not collapse the card's height, or a row of
   badges with uneven descriptions loses its shared baseline. */
.trust-row__grid > * {
	display: flex;
}

.trust-row__grid > * > * {
	inline-size: 100%;
}

/* ==================================================================
   3. Rating Summary — state the aggregate once, above the cards
   ================================================================== */

.rating-summary {
	display: flex;
	flex-direction: column;
	gap: var(--space-5);
	padding: var(--space-6);
	border: 1px solid var(--premium-ring);
	border-radius: var(--premium-radius);
	background-color: var(--premium-surface-soft);
	margin-block-end: var(--space-8);
}

.rating-summary--center {
	align-items: center;
	text-align: center;
}

.rating-summary__score {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--space-2) var(--space-3);
}

.rating-summary__stars {
	display: inline-flex;
	align-items: center;
	gap: var(--motion-distance-xs);
	margin: 0;
}

.rating-summary__star {
	display: inline-flex;
	color: var(--color-border-strong);
}

.rating-summary__star.is-filled {
	color: var(--color-accent-400);
}

.rating-summary__star svg {
	inline-size: 1.15rem;
	block-size: 1.15rem;
	/* A filled star reads as a rating; an outline reads as a shape. */
	fill: currentColor;
	stroke: currentColor;
}

.rating-summary__value {
	margin: 0;
	font-family: var(--font-family-heading);
	font-size: var(--font-size-xl);
	line-height: 1;
	color: var(--color-heading);
}

.rating-summary__value-max {
	font-family: var(--font-family-body);
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-regular);
	color: var(--color-text-muted);
}

.rating-summary__count {
	margin: 0;
	color: var(--color-text-muted);
	font-size: var(--font-size-sm);
}

.rating-summary__stats {
	display: grid;
	gap: var(--space-4);
	margin: 0;
	padding-block-start: var(--space-5);
	border-block-start: 1px solid var(--premium-ring);
	list-style: none;
}

.rating-summary__stat {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
}

.rating-summary__stat-value {
	font-family: var(--font-family-heading);
	font-size: var(--font-size-lg);
	font-weight: var(--font-weight-medium);
	color: var(--color-primary-700);
	font-variant-numeric: tabular-nums;
}

.rating-summary__stat-label {
	font-size: var(--font-size-xs);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-text-muted);
}

.rating-summary__platform {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	align-self: flex-start;
	color: var(--color-primary-600);
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-semibold);
	text-decoration: none;
}

.rating-summary--center .rating-summary__platform {
	align-self: center;
}

.rating-summary__platform:hover {
	color: var(--color-primary-700);
}



/* ==================================================================
   4. Service Comparison — "which service is right for us?"
   ------------------------------------------------------------------
   Built on the shared `.card` so a comparison card and a service card
   are recognisably the same object. Equal heights, bottom-pinned link,
   exactly like the Sprint 2 card system.
   ================================================================== */

.service-comparison {
	margin-block-start: var(--space-12);
}

.service-comparison__grid {
	display: grid;
	gap: var(--space-5);
	align-items: stretch;
}

.comparison-card {
	block-size: 100%;
	border-radius: var(--premium-radius);
}

.comparison-card__body {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	block-size: 100%;
}

.comparison-card--featured {
	border-color: var(--premium-ring-strong);
	box-shadow: var(--premium-shadow-lift);
}

.comparison-card__flag {
	align-self: flex-start;
	margin: 0;
	padding: var(--space-1) var(--space-3);
	border-radius: var(--radius-full);
	background-image: var(--gradient-primary);
	color: var(--color-text-inverse);
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-semibold);
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.comparison-card__title {
	margin: 0;
	font-family: var(--font-family-heading);
	font-size: var(--font-size-lg);
	font-weight: var(--font-weight-medium);
	line-height: var(--line-height-snug);
}



.comparison-card__title a:hover {
	color: var(--color-primary-600);
}

.comparison-card__facts {
	display: grid;
	gap: var(--space-3);
	margin: 0;
}

.comparison-card__fact dt {
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-semibold);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--color-primary-600);
}

.comparison-card__fact dd {
	margin: var(--space-1) 0 0;
	color: var(--color-text);
	line-height: var(--line-height-relaxed);
}

.comparison-card__benefits {
	display: grid;
	gap: var(--space-2);
	margin: 0;
	padding: var(--space-4) 0 0;
	border-block-start: 1px solid var(--premium-ring);
	list-style: none;
	font-size: var(--font-size-sm);
}

.comparison-card__benefit {
	display: flex;
	align-items: flex-start;
	gap: var(--space-2);
	color: var(--color-text-muted);
}

.comparison-card__benefit-icon {
	display: inline-flex;
	flex: 0 0 auto;
	color: var(--color-success);
}



/* Pinned to the bottom, so a row of cards with uneven benefit lists still
   lines its links up. */
.comparison-card__link {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	margin-block-start: auto;
	padding-block-start: var(--space-2);
	color: var(--color-primary-600);
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-semibold);
	text-decoration: none;
}

.comparison-card__link:hover {
	color: var(--color-primary-700);
}

.comparison-card__link svg {
	inline-size: 1rem;
	block-size: 1rem;
	transition: transform var(--motion-t-instant);
}

@media (hover: hover) and (pointer: fine) {
	.comparison-card:hover .comparison-card__link svg {
		transform: translateX(var(--motion-distance-sm));
	}
}

/* ==================================================================
   5. Trust Process
   ------------------------------------------------------------------
   The component carries `how-it-works` as well as its own class, so the
   timeline rail (sections-premium.css) and the off-homepage step surface
   (internal-premium.css §8) both apply with no rule restated here. Only
   the icon medallion is new, and only because the screening steps are the
   first process data in the theme that carries an icon.
   ================================================================== */

.trust-process .process-step__icon {
	color: var(--color-primary-600);
}

/* ==================================================================
   6. Privacy Note — the reassurance beside an enquiry form
   ================================================================== */

.privacy-note {
	display: grid;
	gap: var(--space-2);
	margin-block-start: var(--space-5);
	padding: var(--space-4);
	border: 1px solid var(--premium-ring);
	border-radius: var(--premium-radius-sm);
	background-color: var(--premium-surface-soft);
}

.privacy-note__line {
	display: flex;
	align-items: flex-start;
	gap: var(--space-2);
	margin: 0;
	color: var(--color-text-muted);
	font-size: var(--font-size-sm);
	line-height: var(--line-height-relaxed);
}

.privacy-note__line--response {
	color: var(--color-text);
	font-weight: var(--font-weight-medium);
}

.privacy-note__icon {
	display: inline-flex;
	flex: 0 0 auto;
	margin-block-start: 0.15em;
	color: var(--color-primary-600);
}



.privacy-note__link {
	color: var(--color-primary-600);
	font-weight: var(--font-weight-medium);
}

/* ==================================================================
   7. Sticky conversion bar — three actions, and out of the way
   ------------------------------------------------------------------
   `internal-premium.css` §7 owns the bar's position, surface, safe-area
   inset and its retirement at 64rem. Everything here is about fitting a
   third action into a 360px row, and about the keyboard.
   ================================================================== */

.sticky-cta {
	transition: transform var(--motion-t-quick);
}

.sticky-cta__actions {
	/* Equal shares of the row, so three actions fit without a breakpoint
	   per combination. */
	flex: 1 1 auto;
	justify-content: flex-end;
}

.sticky-cta__actions .btn {
	flex: 0 1 auto;
	justify-content: center;
}

/* Below 30rem the label is dropped: with three actions there is no honest
   room for it, and the bar's `aria-label` already names the region for
   assistive technology, so nothing is lost but decoration. */
.sticky-cta__label {
	display: none;
}

/* The Call and WhatsApp labels are visually hidden on small screens, not
   removed — clipped with the same technique as `.screen-reader-text`, so
   each button keeps a real accessible name rather than being an unlabelled
   icon. `display: none` here would have left two anonymous links. */
.sticky-cta__action-text {
	border: 0;
	clip-path: inset(50%);
	block-size: 1px;
	inline-size: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	white-space: nowrap;
}

/* Border and glyph only, for the contrast reason documented in §1. */
.sticky-cta__whatsapp {
	border-color: var(--color-whatsapp-dark);
	color: var(--color-primary-700);
}

/* Step out of the way while a field is focused. A fixed bar sitting over
   the on-screen keyboard on a 360px phone is the fastest way to lose a
   half-completed enquiry.

   `:has()` rather than a focus listener: no JavaScript, no scroll or
   focus bookkeeping, and it un-hides itself the moment focus leaves.
   Buttons and submits are excluded, so pressing "Send" does not make the
   bar jump. Browsers without `:has()` keep the bar visible, which is the
   pre-Sprint-5 behaviour — a missing enhancement, never a broken layout. */
body:has(
		input:not([type='button']):not([type='submit']):not([type='reset']):focus,
		textarea:focus,
		select:focus
	) .sticky-cta {
	transform: translateY(100%);
	pointer-events: none;
}

/* ==================================================================
   8. Breakpoints
   ================================================================== */

@media (min-width: 30rem) {
	.trust-row__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.rating-summary__stats {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.sticky-cta__label {
		display: block;
	}
}

@media (min-width: 48rem) {
	.service-comparison__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.rating-summary {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		gap: var(--space-6);
		padding: var(--space-8);
	}

	.rating-summary--center {
		justify-content: center;
	}

	.rating-summary__stats {
		flex: 1 1 20rem;
		padding-block-start: 0;
		border-block-start: 0;
		border-inline-start: 1px solid var(--premium-ring);
		padding-inline-start: var(--space-6);
	}

	/* Room for the labels again, so the bar reads as three named actions
	   rather than two glyphs and a button. */
	.sticky-cta__action-text {
		position: static;
		clip-path: none;
		block-size: auto;
		inline-size: auto;
		margin: 0;
		overflow: visible;
	}
}

@media (min-width: 64rem) {
	.trust-row__grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.service-comparison__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.cta-group__action {
		flex: 0 1 auto;
	}
}

/* ==================================================================
   9. Motion, contrast and print safeguards
   ================================================================== */

@media (prefers-reduced-motion: reduce) {
	.comparison-card:hover .comparison-card__link svg {
		transform: none;
	}

	/* The bar still gets out of the keyboard's way — it just does not
	   slide. Suppressing the hide entirely would trade an accessibility
	   preference for a usability failure. */
	.sticky-cta {
		transition: none;
	}
}

@media (forced-colors: active) {
	.rating-summary,
	.privacy-note,
	.comparison-card {
		border: 1px solid CanvasText;
	}

	.comparison-card__flag {
		background-image: none;
		background-color: Highlight;
		color: HighlightText;
		forced-color-adjust: none;
	}

	/* A filled star and an empty one must not become the same glyph. */
	.rating-summary__star svg {
		fill: Canvas;
		stroke: CanvasText;
	}

	.rating-summary__star.is-filled svg {
		fill: CanvasText;
		stroke: CanvasText;
	}

	.btn--outline.cta-group__action--whatsapp,
	.sticky-cta__whatsapp {
		border-color: CanvasText;
		color: LinkText;
	}
}

@media print {
	.cta-group,
	.sticky-cta,
	.privacy-note {
		display: none;
	}

	.rating-summary,
	.comparison-card {
		border: 1px solid var(--color-border-strong);
		background-image: none;
		box-shadow: none;
	}
}