srcdev-nuxt-components 9.3.10 → 9.3.12

package/.claude/skills/component-aria-landmark.md

@@ -31,9 +31,9 @@ correctly** — always check the console (or run an accessibility audit) after a
 
 This bug class previously shipped to production undetected: eight sections across one site had
 `aria-labelledby` pointing at ids that were never applied to anything, only surfaced by a WAVE
-audit. Two components (`ServicesSection`, `AutoGrid`) were also found to be *structurally* broken
+audit. Two components (`ServiceSummary` (formerly ServicesSection), `AutoGrid`) were also found to be *structurally* broken
 — they set `aria-labelledby` from `tag` alone without ever exposing `headingId` anywhere a
-consumer could bind it, so it was impossible to satisfy correctly. `ServicesSection` now binds
+consumer could bind it, so it was impossible to satisfy correctly. `ServiceSummary` now binds
 `headingId` to its own internal title heading; `AutoGrid` has no heading concept at all, so it no
 longer sets `aria-labelledby` under any circumstance (pass `aria-label` directly if needed).
 
@@ -87,7 +87,7 @@ must bind it to their own heading):
 Self-bound (the component renders its own heading and binds `headingId` internally — no consumer
 action needed):
 
-- `ServicesSection` (03.organisms) — binds it to its own title `HeroText`
+- `ServiceSummary` (03.organisms) — binds it to its own title `HeroText`
 - `LayoutGridByCols` / `LayoutGridByWidth` (01.atoms) — render their own visually-hidden `<p>` from the `label` prop
 
 Not using this pattern:

package/.claude/skills/components/auto-grid.md

@@ -95,7 +95,7 @@ Override `grid-template-columns` directly — there is no single token for this:
 
 `AutoGrid` has no heading concept of its own — its slots are arbitrary named items, not a
 header + body — so it does **not** auto-generate `aria-labelledby` the way `PageRow` or
-`ServicesSection` do (an earlier version of this component did attempt to, and it produced a
+`ServiceSummary` do (an earlier version of this component did attempt to, and it produced a
 guaranteed broken ARIA reference, since there was never any way to bind a heading to it). If
 `tag="section"` needs an accessible name, pass `aria-label` directly:
 

package/.claude/skills/components/page-hero-highlights.md

@@ -61,7 +61,7 @@ Each slot accepts any content, but these library components are natural fits:
 | `#header`     | `HeroText`                        | Heading with accent text, icon, and configurable size — wires `headingId` for `aria-labelledby` |
 | `#highlights` | `ServicesCard` (×n)               | Portrait cards with image, title, description, and CTA slot                                     |
 | `#highlights` | `LayoutGridByCols` wrapping cards | When you want a responsive column grid rather than a single row of cards                        |
-| `#content`    | Any content component             | Below the straddle — safe to use `PageRow`, `ServicesSection`, etc.                             |
+| `#content`    | Any content component             | Below the straddle — safe to use `PageRow`, `ServiceSummary`, `ServiceDetail`, etc.                             |
 
 Example with `HeroText` in the header slot:
 

package/.claude/skills/components/service-detail.md

@@ -21,12 +21,11 @@ CTA banner are each their own `PageRow` too, with their own variant props (`body
 if a particular page wants a section to sit in a different track (e.g.
 `heroContentVariant="inset-content"` for a narrower hero text column).
 
-It is a different shape from [ServicesSection](services-section.md): `ServicesSection` renders
-image-beside-content (used both as a compact summary card in a list and, in full mode, as a
-same-page detail block); `ServiceDetail` is meant to *be* the whole page for one service —
-`headerTag` defaults to `"h1"` accordingly, and there is no summary/compact mode. There is no
-`isSummary` prop and no `v-if` gating of content — everything the component renders is always
-rendered.
+It is a different shape from [ServiceSummary](service-summary.md): `ServiceSummary` renders a
+compact image-beside-content preview for a listing page; `ServiceDetail` is meant to *be* the
+whole page for one service — `headerTag` defaults to `"h1"` accordingly, and there is no
+summary/compact mode. There is no `v-if` gating of content — everything the component renders is
+always rendered.
 
 ## Props
 
@@ -63,12 +62,12 @@ type** — neither is universal enough to belong on `~/types/types.services`. Th
 the whole "You may also like" block simply don't render when they're omitted.
 
 `imageLoading`/`imageFetchPriority` default to eager/high because a `ServiceDetail` page normally
-has exactly one hero image and it's always the LCP candidate — unlike `ServicesSection`, which is
+has exactly one hero image and it's always the LCP candidate — unlike `ServiceSummary`, which is
 often looped and needs the `index` prop to lazy-load everything past the first two instances.
 
 ### `headerTag` vs `subheadingTag`
 
-Unlike `ServicesSection` (one `headerTag` prop applied to every heading, title included),
+Unlike `ServiceSummary` (one `headerTag` prop applied to its single title heading),
 `ServiceDetail` splits these: `headerTag` controls only the hero `<h1>` title; `subheadingTag`
 controls every other heading (What Is It, Process, Ideal For, Aftercare, FAQs, final CTA heading).
 This keeps the page's heading hierarchy correct when `ServiceDetail` is the page's own `<h1>`.
@@ -101,7 +100,7 @@ Defaults to a plain, non-linked two-item trail built from `serviceData.category`
 | `final-cta` | `{ serviceData: Service }` | Button in the closing full-width CTA banner |
 
 All routing decisions (breadcrumb links, book-cta href, related-service links, final-cta href)
-are delegated to the consumer, matching `ServicesSection`'s slot-based routing pattern.
+are delegated to the consumer, matching `ServiceSummary`'s slot-based routing pattern.
 
 ## Usage
 
@@ -155,10 +154,10 @@ pattern, and `CONSUMER-STYLING.md` in the component's own folder for the full to
 - Component is auto-imported in Nuxt — no import needed.
 - The `Service` type is imported from `~/types/types.services`; `BreadcrumbItem` from
   `~/types/components/breadcrumb`.
-- No `isSummary` mode and no content gating — this component always renders everything it's
-  given. If you need a compact summary card for a services listing page, use
-  [ServicesSection](services-section.md) in summary mode or [ServicesCard](services-card.md)
-  instead, and reserve `ServiceDetail` for the individual `/services/[slug]` page.
+- No content gating — this component always renders everything it's given. If you need a compact
+  summary card for a services listing page, use [ServiceSummary](service-summary.md) (via
+  [ServiceSummaryGrid](service-summary-grid.md)) or [ServicesCard](services-card.md) instead, and
+  reserve `ServiceDetail` for the individual `/services/[slug]` page.
 - Uses [Breadcrumb](breadcrumb.md) internally for the hero banner breadcrumb.
 - The two-/three-column layout breakpoints (body columns, ideal-for grid, final CTA row) are
   `@container` queries against the component's own width, not the viewport.
@@ -177,5 +176,5 @@ pattern, and `CONSUMER-STYLING.md` in the component's own folder for the full to
   carry the full-bleed scrim while its child still lands in the configured column.
 - The section gets `aria-labelledby` automatically when `tag` is `"section"`, `"article"`, or
   `"aside"`, pointing at the id `ServiceDetail` binds to its own title `HeroText` internally —
-  same mechanism as `ServicesSection`. `tag="main"` renders a `<main>` element but is never
+  same mechanism as `ServiceSummary`. `tag="main"` renders a `<main>` element but is never
   auto-labelled.

package/.claude/skills/components/service-summary-grid.md

@@ -0,0 +1,141 @@
+# ServiceSummaryGrid Component
+
+## Overview
+
+`ServiceSummaryGrid` renders a vertical stack of [ServiceSummary](service-summary.md) components
+from a `Service[]` array. Column order can be alternated on every other summary via
+`useAlternateReverse`.
+
+All routing decisions are delegated to the consumer via the `summary-link` scoped slot — the grid
+forwards `serviceData` from each `ServiceSummary` iteration so the consumer can build hrefs and
+labels freely.
+
+This is the renamed successor to `ServicesSectionGrid`, following `ServicesSection`'s rename/
+strip to `ServiceSummary` — see [service-summary.md](service-summary.md) for why the old "full
+mode" content went away.
+
+## Props
+
+| Prop | Type | Default | Required |
+|------|------|---------|----------|
+| `servicesData` | `Service[]` | — | **yes** |
+| `tag` | `"div" \| "section" \| "main"` | `"div"` | no |
+| `useAlternateReverse` | `boolean` | `false` | no |
+| `alignment` | `"start" \| "center" \| "end"` | `"center"` | no |
+| `styleClassPassthrough` | `string \| string[]` | `[]` | no |
+
+### `useAlternateReverse`
+
+When `true`, odd-indexed summaries flip their image/content column order (`reverse` prop on each
+`ServiceSummary`), creating a visual zigzag layout. Commonly used on services landing pages with
+three or more services.
+
+### `alignment`
+
+Passed to every `ServiceSummary` as `alignment` — controls vertical alignment of the info column
+content within the grid cell.
+
+## Slots
+
+| Slot | Slot props | Purpose |
+|------|-----------|---------|
+| `summary-link` | `{ serviceData: Service }` | Navigation link below the `whatIsIt` text in each summary |
+
+The slot is forwarded from the inner `ServiceSummary` and receives the current iteration's
+`serviceData` as a scoped prop. It is optional — omitting it leaves that area empty.
+
+## CSS custom properties
+
+| Token | Default | Controls |
+|---|---|---|
+| `--service-summary-grid-row-gap` | `4rem` | Gap between stacked `ServiceSummary` rows |
+
+Each inner `ServiceSummary`'s own tokens (`--service-summary-*`) still apply — see
+`CONSUMER-STYLING.md` in the `service-summary` component folder for the full list.
+
+## Basic usage
+
+```vue
+<ServiceSummaryGrid
+  :services-data="servicesData ?? []"
+  :use-alternate-reverse="true"
+  tag="section"
+>
+  <template #summary-link="{ serviceData }">
+    <LinkText
+      :to="`/services/${serviceData.slug}`"
+      :link-text="`More about ${serviceData.title}`"
+      :style-class-passthrough="['mb-20']"
+    />
+  </template>
+</ServiceSummaryGrid>
+```
+
+## Consumer page boilerplate
+
+```vue
+<template>
+  <div>
+    <NuxtLayout name="default">
+      <template #layout-content>
+        <PageRow tag="div" variant="content" :style-class-passthrough="['mbe-20']">
+          <h1 class="page-heading-1">Our Services</h1>
+        </PageRow>
+
+        <PageRow tag="div" variant="content" :style-class-passthrough="['mbe-20']">
+          <ServiceSummaryGrid
+            :services-data="servicesData ?? []"
+            :use-alternate-reverse="true"
+            tag="section"
+          >
+            <template #summary-link="{ serviceData }">
+              <LinkText
+                :to="`/services/${serviceData.slug}`"
+                :link-text="`More about ${serviceData.title}`"
+                :style-class-passthrough="['mb-20']"
+              />
+            </template>
+          </ServiceSummaryGrid>
+        </PageRow>
+      </template>
+    </NuxtLayout>
+  </div>
+</template>
+
+<script setup lang="ts">
+definePageMeta({ layout: false });
+
+useHead({
+  title: "Services",
+  meta: [{ name: "description", content: "Browse our services" }],
+  bodyAttrs: { class: "page-services" },
+});
+
+const store = useServicesStore();
+const { servicesData } = storeToRefs(store);
+
+if (servicesData.value.length === 0) {
+  await store.fetchServicesData();
+}
+</script>
+
+<style lang="css">
+.page-services {
+  .service-summary-grid {
+    --service-summary-grid-row-gap: 6rem;
+  }
+}
+</style>
+```
+
+## Notes
+
+- Component is auto-imported in Nuxt — no import needed.
+- The `Service` type is imported from `~/types/types.services`.
+- Each `ServiceSummary` receives its array `index` for eager/lazy image loading decisions (first
+  two summaries load eagerly).
+- Pass `servicesData ?? []` as a safe fallback while data loads asynchronously.
+- If a single page needs a per-item entry animation (e.g. wrapping each item in `EntryAnimation`
+  for a scroll-in effect), render `ServiceSummary` directly in your own `v-for` loop instead of
+  using this grid wrapper — `ServiceSummaryGrid` has no slot for wrapping individual items.
+- See [service-summary.md](service-summary.md) for the full `ServiceSummary` prop and slot API.

package/.claude/skills/components/service-summary.md

@@ -0,0 +1,165 @@
+# ServiceSummary Component
+
+## Overview
+
+`ServiceSummary` renders a single service as a compact two-column preview: image on one side,
+eyebrow/title/price-duration pills/`whatIsIt` text on the other, with a `summary-link` slot for
+navigating to the full service page. All routing decisions are delegated to the consumer via the
+slot.
+
+This is a renamed, stripped-down successor to `ServicesSection` — `ServicesSection` used to have
+a second "full mode" (`isSummary: false`) with process/ideal-for/maintenance/FAQ/CTA content, but
+that content shape is now [ServiceDetail](service-detail.md)'s job (a dedicated full-page
+component). `ServiceSummary` only ever renders the compact preview; there is no `isSummary` prop
+because there is no other mode.
+
+Usually consumed via [ServiceSummaryGrid](service-summary-grid.md) rather than directly.
+
+## Props
+
+| Prop | Type | Default | Required |
+|------|------|---------|----------|
+| `serviceData` | `Service` | — | **yes** |
+| `tag` | `"div" \| "section" \| "article" \| "main"` | `"div"` | no |
+| `headerTag` | `"h1" \| "h2" \| "h3"` | `"h2"` | no |
+| `index` | `number` | `0` | no |
+| `alignment` | `"start" \| "center" \| "end"` | `"center"` | no |
+| `reverse` | `boolean` | `false` | no |
+| `styleClassPassthrough` | `string \| string[]` | `[]` | no |
+
+### `index` and image loading
+
+The `index` prop controls both eager/lazy loading and fetch priority. The first two summaries
+(`index` 0 and 1) load eagerly; all others load lazily. Only `index 0` gets `fetchpriority="high"`
+(LCP candidate). Pass the loop index when rendering a list.
+
+### `reverse`
+
+Flips the image to the right column and content to the left (CSS `order: 2` on the image
+wrapper).
+
+### `alignment`
+
+Vertical alignment of the info column's content within the grid cell — useful when the image is
+taller than the text content and you want the eyebrow/title/pills/link block anchored to the top,
+center, or bottom of that space rather than stretching.
+
+## Slots
+
+| Slot | Slot props | Purpose |
+|------|-----------|---------|
+| `summary-link` | `{ serviceData: Service }` | Navigation link below the `whatIsIt` text |
+
+## Duration/price pills
+
+Duration and price render as `DisplayPill` instances (`variant="neutral"`, `size="md"`) — the
+same pattern `ServiceDetail`'s hero uses — rather than the icon+text row the old `ServicesSection`
+had. There are no icon-customisation props (`durationIcon`/`priceIcon` are gone along with the
+icon row).
+
+## Row height and image aspect ratio
+
+By default `.service-summary` has no fixed height — the row sizes to its content: the image
+sizes itself via `--service-summary-image-aspect-ratio` (default `1 / 1`), and the text column
+sizes to its own content, independently. Set `--service-summary-height-mobile`/`-tablet`/
+`-desktop` (on `.service-summary` itself, via `styleClassPassthrough` or page-scoped CSS — there
+is no prop for this) to force a shared row height instead: both the image (which then crops via
+`object-fit: cover`, and the aspect-ratio token stops having any visible effect) and the text
+column (which then has real leftover space for `alignment` to position within) fill that height.
+See `CONSUMER-STYLING.md` for the full token list and the mobile-stacked-layout caveat.
+
+## Basic usage
+
+```vue
+<ServiceSummary :service-data="service" :index="i">
+  <template #summary-link="{ serviceData }">
+    <LinkText
+      :to="`/services/${serviceData.slug}`"
+      :link-text="`More about ${serviceData.title}`"
+      :style-class-passthrough="['mb-20']"
+    >
+      <template #right>
+        <Icon name="mdi:arrow-right" />
+      </template>
+    </LinkText>
+  </template>
+</ServiceSummary>
+```
+
+## Rendering a list
+
+Prefer [ServiceSummaryGrid](service-summary-grid.md) for this — it already handles alternating
+`reverse` and index-based image loading. Rendering the loop by hand looks like:
+
+```vue
+<ServiceSummary
+  v-for="(service, i) in services"
+  :key="service.slug"
+  :service-data="service"
+  :index="i"
+  :reverse="i % 2 !== 0"
+  tag="section"
+>
+  <template #summary-link="{ serviceData }">
+    <LinkText :to="`/services/${serviceData.slug}`" :link-text="`More about ${serviceData.title}`" />
+  </template>
+</ServiceSummary>
+```
+
+## Local style override scaffold
+
+When consuming this component, prefer the `--service-summary-*` CSS custom properties documented
+in `CONSUMER-STYLING.md` (in the component's own folder) over raw class overrides. For anything
+the tokens don't cover, scaffold a style block using `styleClassPassthrough`. Delete the block if
+unused.
+
+See [component-local-style-override.md](../component-local-style-override.md) for the general
+pattern.
+
+```vue
+<ServiceSummary :style-class-passthrough="['my-summary']" :service-data="service">
+  ...
+</ServiceSummary>
+
+<style>
+/* ─── ServiceSummary local overrides ──────────────────────────────
+   Colours, borders, geometry only — do not override behaviour.
+   Delete this block if no overrides are needed.
+   ─────────────────────────────────────────────────────────────────── */
+.service-summary {
+  &.my-summary {
+    --service-summary-image-border-radius: 1.2rem;
+    --service-summary-height-tablet: 32rem;
+    --service-summary-height-desktop: 40rem;
+    --service-summary-image-aspect-ratio: 1 / 1;
+    --service-summary-image-padding-block-mobile: 1.2rem;
+    --service-summary-image-padding-inline-mobile: 1.2rem;
+
+    /* Deeper overrides target the BEM element classes directly, e.g.: */
+    /* .service-summary__pills { } */
+  }
+}
+</style>
+```
+
+## Notes
+
+- Component is auto-imported in Nuxt — no import needed.
+- The `Service` type is imported from `~/types/types.services`.
+- Internal element classes are BEM-namespaced: `service-summary__grid`,
+  `service-summary__image-wrapper`, `service-summary__image`, `service-summary__info-wrapper`,
+  `service-summary__pills`.
+- The section gets `aria-labelledby` automatically when `tag` is `"section"`, `"article"`, or
+  `"aside"`, pointing at the id `ServiceSummary` binds to its own title `HeroText` internally — no
+  consumer action needed. (`tag="main"` renders a `<main>` element but is never auto-labelled; see
+  [component-aria-landmark.md](../component-aria-landmark.md).)
+- For a full single-service page (process, ideal-for, aftercare, FAQs, booking CTA, related
+  services), use [ServiceDetail](service-detail.md) instead — that's the component this one used
+  to duplicate in its old "full mode".
+- The two-column breakpoint, the row-height tokens (`--service-summary-height-*`), and the image
+  padding tokens (`--service-summary-image-padding-block-*`/`-inline-*`, each `-mobile`/`-tablet`/
+  `-desktop`) are all **`@container` queries** against `.service-summary`'s own inline size, not
+  `@media` viewport queries — this keeps the layout correct when the component sits next to a
+  persistent side nav that shrinks its available width without shrinking the viewport. See
+  `CONSUMER-STYLING.md` for the token defaults and fallback
+  chain.

package/.claude/skills/icon-sets.md

@@ -23,7 +23,7 @@ The layer's `modules/icon-sets.ts` runs at dev/build time and logs an info messa
 | `gravity-ui` | `@iconify-json/gravity-ui` | NavigationItems (burger/ellipsis overflow) |
 | `ic` | `@iconify-json/ic` | CarouselBasic, CarouselFlip, CarouselInfinite, SliderGallery, CanvasSwitcher |
 | `lucide` | `@iconify-json/lucide` | ColourFinder, TreatmentConsultant |
-| `material-symbols` | `@iconify-json/material-symbols` | ServicesSection, form components |
+| `material-symbols` | `@iconify-json/material-symbols` | form components |
 | `mdi` | `@iconify-json/mdi` | NavigationHorizontal, form components, ServicesCard |
 | `radix-icons` | `@iconify-json/radix-icons` | InputPasswordWithLabel, InputError, DisplayThemeSwitch |
 

package/.claude/skills/index.md

@@ -69,8 +69,8 @@ Each skill is a single markdown file named `<area>-<task>.md`.
     ├── page-hero-highlights.md — PageHeroHighlights template: hero + highlights strip grid, CSS custom property theming
     ├── services-card.md        — ServicesCard props (incl. eyebrowConfig/heroConfig), actions slot, CSS tokens, page boilerplate
     ├── services-card-grid.md        — ServicesCardGrid props, config pass-through, CSS tokens, full page boilerplate
-    ├── services-section-grid.md     — ServicesSectionGrid props, useAlternateReverse zigzag layout, page boilerplate
-    ├── services-section.md          — ServicesSection props (incl. heading/CTA copy), summary-link/cta/cta-panel slots, summary vs full mode
+    ├── service-summary-grid.md      — ServiceSummaryGrid props, useAlternateReverse zigzag layout, page boilerplate
+    ├── service-summary.md           — ServiceSummary props, summary-link slot, DisplayPill duration/price (renamed/stripped from ServicesSection — full mode is now ServiceDetail)
     ├── service-detail.md            — ServiceDetail: full service detail page (hero banner, sticky sidebar booking card + related services, closing CTA), headerTag vs subheadingTag split, book-cta/sidebar-note/related-service/final-cta slots
     ├── breadcrumb.md                — Breadcrumb: items (BreadcrumbItem[]) trail, link vs current-page text, CSS token API
     ├── contact-section.md      — ContactSection props (stepperIndicatorSize pass-through), 3-item info+form layout, slot API

package/.vscode/srcdev-component-service-summary.code-snippets

@@ -0,0 +1,67 @@
+{
+  "SRCDEV ServiceSummary": {
+    "description": "ServiceSummary — compact preview with summary-link slot",
+    "scope": "vue,html",
+    "body": [
+      "<ServiceSummary",
+      "  :service-data=\"$1service\"",
+      "  :index=\"$2index\"",
+      "  alignment=\"$3center\"",
+      ">",
+      "  <template #summary-link=\"{ serviceData }\">",
+      "    <NuxtLink :to=\"`/services/${serviceData.slug}`\">$4More about {{ serviceData.title }} →</NuxtLink>",
+      "  </template>",
+      "</ServiceSummary>"
+    ]
+  },
+  "SRCDEV ServiceSummary Reversed": {
+    "description": "ServiceSummary with image/content columns swapped",
+    "scope": "vue,html",
+    "body": [
+      "<ServiceSummary :service-data=\"$1service\" :reverse=\"$2true\">",
+      "  <template #summary-link=\"{ serviceData }\">",
+      "    <NuxtLink :to=\"`/services/${serviceData.slug}`\">$3More about {{ serviceData.title }} →</NuxtLink>",
+      "  </template>",
+      "</ServiceSummary>"
+    ]
+  },
+  "SRCDEV ServiceSummaryGrid": {
+    "description": "ServiceSummaryGrid — alternating zigzag listing from a Service[] array",
+    "scope": "vue,html",
+    "body": [
+      "<ServiceSummaryGrid",
+      "  :services-data=\"$1servicesData ?? []\"",
+      "  :use-alternate-reverse=\"$2true\"",
+      ">",
+      "  <template #summary-link=\"{ serviceData }\">",
+      "    <NuxtLink :to=\"`/services/${serviceData.slug}`\">$3More about {{ serviceData.title }} →</NuxtLink>",
+      "  </template>",
+      "</ServiceSummaryGrid>"
+    ]
+  },
+  "SRCDEV ServiceSummary CSS Override": {
+    "description": "CSS override scaffold for ServiceSummary — scope to a page or section class",
+    "scope": "css",
+    "body": [
+      ".$1my-page {",
+      "  .service-summary {",
+      "    --service-summary-grid-gap: ;",
+      "    --service-summary-grid-gap-desktop: ;",
+      "    --service-summary-image-border-radius: ;",
+      "    --service-summary-height-mobile: ;",
+      "    --service-summary-height-tablet: ;",
+      "    --service-summary-height-desktop: ;",
+      "    --service-summary-image-aspect-ratio: ;",
+      "    --service-summary-image-padding-block-mobile: ;",
+      "    --service-summary-image-padding-inline-mobile: ;",
+      "    --service-summary-pills-gap: ;",
+      "    --service-summary-pill-border-colour: ;",
+      "",
+      "    .service-summary__image-wrapper {}",
+      "    .service-summary__info-wrapper {}",
+      "    .service-summary__pills {}",
+      "  }",
+      "}"
+    ]
+  }
+}

package/app/components/03.organisms/services/service-detail/CONSUMER-STYLING.md

@@ -26,7 +26,7 @@ The closing full-width CTA banner is wrapped the same way via `finalCtaVariant`
 outer `PageRow` purely to constrain either section's width — pass `body-variant`/`final-cta-variant`
 directly. It's still fine (and necessary for a genuine full-bleed hero) to place `ServiceDetail`
 inside an outer, wider `PageRow` — see
-[services-section.md](../../../../../.claude/skills/components/services-section.md)-style nesting
+[service-summary.md](../../../../../.claude/skills/components/service-summary.md)-style nesting
 notes in [page-row.md](../../../../../.claude/skills/components/page-row.md) for how nested page-rows
 compose.
 
@@ -37,7 +37,7 @@ compose.
 | Token | Default | Controls |
 |---|---|---|
 | `--service-detail-hero-border-radius` | `0.8rem` | Corner rounding on the hero (clips the image/content layers — set to `0` for a true edge-to-edge bleed hero) |
-| `--service-detail-hero-content-align` | `end` | `align-content` of the content overlay grid — where the breadcrumb/title/pills sit within the hero's block axis (`end` = bottom-anchored) |
+| `--service-detail-hero-content-align` | `end` | `align-content` on `.service-detail__hero-content` (the breadcrumb/title/pills wrapper) — where that content sits within the hero's block axis (`end` = bottom-anchored) |
 | `--service-detail-hero-min-height-mobile` | `32rem` | Hero banner height below the `768px` container breakpoint. The hero image always fills this height (`object-fit`/`object-position` control cropping) |
 | `--service-detail-hero-min-height-tablet` | `36rem` | Hero banner height from the `768px` container breakpoint |
 | `--service-detail-hero-min-height-desktop` | `42rem` | Hero banner height from the `1024px` container breakpoint |
@@ -49,11 +49,10 @@ compose.
 | `--service-detail-hero-pill-bg` | `transparent` | Background of the price/duration pills (via `DisplayPill`'s `--theme-pill-bg`) |
 | `--service-detail-hero-pill-border-colour` | `currentColor` | Border colour of the price/duration pills |
 
-The hero image's crop behaviour also changes responsively (position only, not tokened as fit
-itself): below the `768px` container breakpoint it's `object-fit: cover` anchored with
+The hero image is always `object-fit: cover` (not tokened) — only its anchor point changes
+responsively: below the `768px` container breakpoint it's anchored with
 `--service-detail-hero-image-position-small` (default `bottom`); from `768px` up it switches to
-`object-fit: contain` anchored with `--service-detail-hero-image-position-medium` (default
-`center`) so the full photo stays visible once there's room for it, rather than continuing to crop.
+`--service-detail-hero-image-position-medium` (default `center`).
 
 For anything not covered by these (e.g. the `full`/`content` variant tracks themselves), target
 `--page-row-*` tokens under `.service-detail__hero-image-row`/`.service-detail__hero-overlay` — see
@@ -211,7 +210,7 @@ Section headings, sidebar labels, and CTA copy are **props**, not hardcoded stri
 
 - Routing is entirely delegated to the consumer via slots: `book-cta` (scoped `serviceData`),
   `final-cta` (scoped `serviceData`), and `related-service` (scoped `service`, `index`) — same
-  pattern as `ServicesSection`'s `cta`/`summary-link` slots. Only `sidebar-note` has no scoped
+  pattern as `ServiceSummary`'s `summary-link` slot. Only `sidebar-note` has no scoped
   data (it's plain content, e.g. patch-test wording).
 - `related-service`'s fallback content is a non-clickable thumbnail + title + price — pass the
   slot yourself to wrap it in a real link once you have a routing convention.
@@ -224,11 +223,11 @@ Section headings, sidebar labels, and CTA copy are **props**, not hardcoded stri
   `serviceData` — pass real `to` routes once your app's URL structure is known.
 - `headerTag` (default `"h1"`) controls only the hero title; `subheadingTag` (default `"h2"`)
   controls every other heading in the component (What Is It, Process, Ideal For, Aftercare, FAQs,
-  final CTA) — unlike `ServicesSection`, which uses one `headerTag` prop for all of them. This
+  final CTA) — unlike `ServiceSummary`, which uses one `headerTag` prop for its (single) title heading. This
   component is meant to be the whole page's `<h1>`, so its subheadings need their own level.
 - The FAQ question is a hardcoded `<h3>` — if you set `subheadingTag="h3"`, the FAQ questions will
   sit at the same level as their own section heading rather than one below it.
 - Two-/three-column breakpoints (900px body, 500px ideal-for grid, 700px final CTA) use
   `@container` queries against the component's own width, not the viewport — they are not tokens
   since resizing them would need corresponding `minmax()`/`grid-template-columns` changes too, not
-  just spacing (same rationale as `ServicesSection`'s `--services-section-grid-gap-desktop`).
+  just spacing (same rationale as `ServiceSummary`'s `--service-summary-grid-gap-desktop`).

package/app/components/03.organisms/services/service-detail/ServiceDetail.vue

@@ -294,7 +294,6 @@ watch(
         object-position: var(--service-detail-hero-image-position-small, bottom);
 
         @container (width >= 768px) {
-          object-fit: contain;
           object-position: var(--service-detail-hero-image-position-medium, center);
         }
       }
@@ -302,7 +301,6 @@ watch(
       .service-detail__hero-overlay {
         display: grid;
         height: 100%;
-        align-content: var(--service-detail-hero-content-align, end);
         padding-block: var(--service-detail-hero-padding, 3.2rem);
         background: var(
           --service-detail-hero-scrim,
@@ -310,6 +308,9 @@ watch(
         );
 
         .service-detail__hero-content {
+          display: grid;
+          align-content: var(--service-detail-hero-content-align, end);
+
           .service-detail__breadcrumb {
             --breadcrumb-colour: var(--service-detail-hero-text-colour, white);
             margin-block-end: var(--service-detail-breadcrumb-margin-block-end, 0.8rem);

package/app/components/03.organisms/services/service-detail/stories/ServiceDetail.stories.ts

@@ -82,7 +82,7 @@ const meta: Meta<typeof ServiceDetail> = {
     docs: {
       description: {
         component:
-          "Renders a full service detail page: a full-bleed hero banner (breadcrumb, eyebrow, title, price/duration pills over the service image), a two-column body (long-form content plus a sticky sidebar booking card and related-services list), and a closing full-width CTA banner. Routing (breadcrumb links, book-cta, related-service links, final-cta) is delegated to the consumer via slots, same pattern as ServicesSection.",
+          "Renders a full service detail page: a full-bleed hero banner (breadcrumb, eyebrow, title, price/duration pills over the service image), a two-column body (long-form content plus a sticky sidebar booking card and related-services list), and a closing full-width CTA banner. Routing (breadcrumb links, book-cta, related-service links, final-cta) is delegated to the consumer via slots, same pattern as ServiceSummary.",
       },
     },
   },
@@ -299,7 +299,7 @@ export const CustomRelatedServiceLink: Story = {
     docs: {
       description: {
         story:
-          "The related-service scoped slot replaces each related item's default (non-clickable) markup — use it to wrap the item in a real link, matching the pattern of ServicesSection's summary-link slot.",
+          "The related-service scoped slot replaces each related item's default (non-clickable) markup — use it to wrap the item in a real link, matching the pattern of ServiceSummary's summary-link slot.",
       },
     },
   },