srcdev-nuxt-components 9.3.11 → 9.3.12

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

@@ -0,0 +1,116 @@
+# ServiceSummary — Consumer Styling Guide
+
+## Public token API
+
+All `--service-summary-*` tokens are the stable override surface. Set them globally in a
+theme file, scoped to a page wrapper, or per-instance via `styleClassPassthrough`.
+
+### Layout & sizing
+
+| Token | Default | Controls |
+|---|---|---|
+| `--service-summary-grid-gap` | `2rem` | Gap between image and content columns below the 768px container breakpoint |
+| `--service-summary-grid-gap-desktop` | `3rem` | Gap between columns at the 768px container breakpoint and above |
+| `--service-summary-height-mobile` | `auto` | Height of the whole `.service-summary` row below the 768px container breakpoint. `auto` (the default) lets the row size to its content — the image sizes itself via `--service-summary-image-aspect-ratio` and the text column sizes to its own content. Set a fixed length to force both columns to share a common row height instead (the image then crops via `object-fit: cover` to fill it, and `alignment` positions the text within the leftover space) |
+| `--service-summary-height-tablet` | `auto` (falls back to `--service-summary-height-mobile`) | Row height from the 768px container breakpoint |
+| `--service-summary-height-desktop` | `auto` (falls back to `--service-summary-height-tablet`, then `-mobile`) | Row height from the 1024px container breakpoint |
+| `--service-summary-image-aspect-ratio` | `1 / 1` | Aspect ratio of `.service-summary__image-wrapper` when its height isn't otherwise forced by a `--service-summary-height-*` override (i.e. the default, row-height-auto case) — has no visible effect once a row height override makes both dimensions definite |
+| `--service-summary-image-padding-block-mobile` | `0` | Padding-block (top/bottom) inset around the image, inside `.service-summary__image-wrapper`, below the 768px container breakpoint — creates a visible frame/border effect since the image itself sizes to the wrapper's content box, not the padding box |
+| `--service-summary-image-padding-block-tablet` | `0` (falls back to `-mobile`) | Padding-block from the 768px container breakpoint |
+| `--service-summary-image-padding-block-desktop` | `0` (falls back to `-tablet`, then `-mobile`) | Padding-block from the 1024px container breakpoint |
+| `--service-summary-image-padding-inline-mobile` | `0` | Padding-inline (left/right) inset around the image below the 768px container breakpoint |
+| `--service-summary-image-padding-inline-tablet` | `0` (falls back to `-mobile`) | Padding-inline from the 768px container breakpoint |
+| `--service-summary-image-padding-inline-desktop` | `0` (falls back to `-tablet`, then `-mobile`) | Padding-inline from the 1024px container breakpoint |
+| `--service-summary-image-border-radius` | `0.8rem` | Corner rounding on the service image |
+| `--service-summary-pills-gap` | `0.8rem` | Gap between the duration and price pills |
+| `--service-summary-pills-margin-block-end` | `2rem` | Space below the pill row |
+
+All breakpoints above (row height, image padding, and the two-column grid switch) are
+**container queries** against `.service-summary`'s own inline size (`container-name:
+service-summary`), not the viewport — this keeps the layout responsive to the space
+`ServiceSummary` actually has, which matters when it sits next to a persistent side nav that a
+viewport-based `@media` query can't see.
+
+Below the 768px breakpoint the grid is a single stacked column (image above text), so a
+`--service-summary-height-mobile` override sets a height for the *whole stack*, not just the
+image — usually left `auto` on mobile and only set from `--service-summary-height-tablet` up,
+where the layout is genuinely two columns side by side.
+
+### Pill colours
+
+The duration/price pills are `DisplayPill` instances — `ServiceSummary` maps its own tokens onto
+`DisplayPill`'s `--theme-pill-*` custom properties scoped to `.service-summary__pills`:
+
+| Token | Default | Controls |
+|---|---|---|
+| `--service-summary-pill-bg` | `transparent` | Background of the price/duration pills |
+| `--service-summary-pill-colour` | `currentColor` | Text colour of the pills |
+| `--service-summary-pill-border-colour` | `currentColor` | Border colour of the pills |
+
+For anything not covered by these (e.g. pill size, font weight), target `--theme-pill-*` directly
+under `.service-summary__pills` — see [display-pill.md](../../../../../.claude/skills/components/display-pill.md).
+
+---
+
+## Global theming — recommended approach
+
+Create `assets/styles/setup/07.components/service-summary.css` in the consuming app and
+set tokens on `:root`. This applies to every `ServiceSummary` across the site.
+
+```css
+/* assets/styles/setup/07.components/service-summary.css */
+:root {
+  --service-summary-grid-gap: 2.4rem;
+  --service-summary-grid-gap-desktop: 4rem;
+  --service-summary-image-border-radius: 1.2rem;
+}
+```
+
+---
+
+## Page-scoped overrides
+
+Override tokens for a specific section by scoping them under the page or layout wrapper.
+No `:deep()` is required (component styles are unscoped).
+
+```css
+/* In the consuming page's unscoped <style> block */
+.our-services-page {
+  .service-summary {
+    --service-summary-pill-border-colour: var(--brand-accent);
+  }
+}
+```
+
+---
+
+## Per-instance overrides via styleClassPassthrough
+
+Use sparingly — prefer global or page-scoped CSS. When a single instance needs a distinct
+visual style, pass a modifier class:
+
+```vue
+<ServiceSummary :style-class-passthrough="['highlight-service']" :service-data="service" />
+```
+
+```css
+.service-summary.highlight-service {
+  --service-summary-image-border-radius: 2rem;
+}
+```
+
+---
+
+## Notes
+
+- `--service-summary-grid-gap-desktop` only applies at `768px` and above — the breakpoint
+  itself is not a token, since changing it would affect the grid's `minmax()` column sizing
+  too, not just spacing. The same 768px/1024px breakpoints are shared with the row-height
+  tokens above.
+- The row-height tokens live on `.service-summary` itself (the whole row), not on
+  `.service-summary__image-wrapper` — `.service-summary__grid` and
+  `.service-summary__image-wrapper` both inherit it via `height: 100%`, so overriding the row
+  height also gives `alignment` real leftover space to position the text column within.
+- `ServiceSummary` is summary-only — it has no "full mode". For a complete single-service page
+  (process, ideal-for list, FAQs, booking CTA), use
+  [ServiceDetail](../../../../../.claude/skills/components/service-detail.md) instead.

package/app/components/03.organisms/services/service-summary/ServiceSummary.vue

@@ -0,0 +1,183 @@
+<template>
+  <component :is="tag" class="service-summary" :class="[elementClasses]" :aria-labelledby="ariaLabelledby">
+    <div class="service-summary__grid" :class="{ 'service-summary__grid--reverse': reverse }">
+      <div class="service-summary__image-wrapper">
+        <NuxtImg
+          :src="serviceData.image"
+          :alt="serviceData.title"
+          :loading="imageLoading"
+          :fetchpriority="imageFetchPriority"
+          class="service-summary__image"
+        />
+      </div>
+      <div class="service-summary__info-wrapper" :class="infoWrapperClasses">
+        <EyebrowText font-size="large" :text-content="serviceData.subtitle" />
+        <HeroText
+          :id="headingId"
+          :tag="headerTag"
+          font-size="title"
+          :text-content="[{ text: serviceData.title, styleClass: 'normal' }]"
+          :style-class-passthrough="['mb-20']"
+        />
+
+        <div class="service-summary__pills">
+          <DisplayPill :label="serviceData.duration" size="md" variant="neutral" />
+          <DisplayPill :label="`From ${serviceData.price}`" size="md" variant="neutral" />
+        </div>
+
+        <p class="page-body-normal">{{ serviceData.whatIsIt }}</p>
+
+        <slot name="summary-link" :service-data="serviceData"></slot>
+      </div>
+    </div>
+  </component>
+</template>
+
+<script setup lang="ts">
+import type { Service } from "~/types/types.services";
+
+interface Props {
+  tag?: "div" | "section" | "article" | "main";
+  headerTag?: "h1" | "h2" | "h3";
+  index?: number;
+  serviceData: Service;
+  alignment?: "start" | "center" | "end";
+  reverse?: boolean;
+  styleClassPassthrough?: string | string[];
+}
+const props = withDefaults(defineProps<Props>(), {
+  tag: "div",
+  headerTag: "h2",
+  index: 0,
+  alignment: "center",
+  reverse: false,
+  styleClassPassthrough: () => [],
+});
+
+const { headingId, ariaLabelledby } = useAriaLabelledById(() => props.tag);
+
+const infoWrapperClasses = computed(() => ({
+  [`service-summary__info-wrapper--align-${props.alignment}`]: true,
+}));
+
+// Computed to return loading="lazy" if index is greater than 1, so that the first two summaries prioritise image loading, but if there are more than 2 summaries, the rest will lazy load their images to improve performance.
+const imageLoading = computed(() => (props.index !== undefined && props.index > 1 ? "lazy" : "eager"));
+
+// Only the first image (LCP candidate) gets fetchpriority="high" to reduce resource load delay.
+const imageFetchPriority = computed(() => (props.index === 0 ? "high" : "auto"));
+
+const { elementClasses, resetElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
+
+watch(
+  () => props.styleClassPassthrough,
+  () => {
+    resetElementClasses(props.styleClassPassthrough);
+  }
+);
+</script>
+
+<style lang="css">
+@layer components {
+  .service-summary {
+    container-type: inline-size;
+    container-name: service-summary;
+    height: var(--service-summary-height-mobile, auto);
+
+    @container service-summary (width >= 768px) {
+      height: var(--service-summary-height-tablet, var(--service-summary-height-mobile, auto));
+    }
+
+    @container service-summary (width >= 1024px) {
+      height: var(
+        --service-summary-height-desktop,
+        var(--service-summary-height-tablet, var(--service-summary-height-mobile, auto))
+      );
+    }
+
+    .service-summary__grid {
+      --_grid-gap: var(--service-summary-grid-gap, 2rem);
+
+      display: grid;
+      grid-template-columns: 1fr;
+      gap: var(--_grid-gap);
+      height: 100%;
+
+      @container service-summary (width >= 768px) {
+        --_grid-gap: var(--service-summary-grid-gap-desktop, 3rem);
+
+        grid-template-columns: repeat(auto-fit, minmax(246px, 1fr));
+
+        &.service-summary__grid--reverse {
+          .service-summary__image-wrapper {
+            /* The order: 2 on .service-summary__image-wrapper pushes it after the content div, since by default both children have order: 0 and source order wins — so the content div naturally sits first. */
+            order: 2;
+          }
+        }
+      }
+
+      .service-summary__info-wrapper {
+        display: grid;
+
+        &.service-summary__info-wrapper--align-start {
+          align-content: start;
+        }
+        &.service-summary__info-wrapper--align-center {
+          align-content: center;
+        }
+        &.service-summary__info-wrapper--align-end {
+          align-content: end;
+        }
+      }
+
+      .service-summary__image-wrapper {
+        height: 100%;
+        aspect-ratio: var(--service-summary-image-aspect-ratio, 1 / 1);
+        padding-block: var(--service-summary-image-padding-block-mobile, 0);
+        padding-inline: var(--service-summary-image-padding-inline-mobile, 0);
+        border-radius: var(--service-summary-image-border-radius, 0.8rem);
+        overflow: hidden;
+
+        @container service-summary (width >= 768px) {
+          padding-block: var(
+            --service-summary-image-padding-block-tablet,
+            var(--service-summary-image-padding-block-mobile, 0)
+          );
+          padding-inline: var(
+            --service-summary-image-padding-inline-tablet,
+            var(--service-summary-image-padding-inline-mobile, 0)
+          );
+        }
+
+        @container service-summary (width >= 1024px) {
+          padding-block: var(
+            --service-summary-image-padding-block-desktop,
+            var(--service-summary-image-padding-block-tablet, var(--service-summary-image-padding-block-mobile, 0))
+          );
+          padding-inline: var(
+            --service-summary-image-padding-inline-desktop,
+            var(--service-summary-image-padding-inline-tablet, var(--service-summary-image-padding-inline-mobile, 0))
+          );
+        }
+
+        .service-summary__image {
+          display: block;
+          width: 100%;
+          height: 100%;
+          object-fit: cover;
+        }
+      }
+
+      .service-summary__pills {
+        display: flex;
+        flex-wrap: wrap;
+        gap: var(--service-summary-pills-gap, 0.8rem);
+        margin-block-end: var(--service-summary-pills-margin-block-end, 2rem);
+
+        --theme-pill-bg: var(--service-summary-pill-bg, transparent);
+        --theme-pill-color: var(--service-summary-pill-colour, currentColor);
+        --theme-pill-border-color: var(--service-summary-pill-border-colour, currentColor);
+      }
+    }
+  }
+}
+</style>

package/app/components/03.organisms/services/{services-section/stories/ServicesSection.stories.ts → service-summary/stories/ServiceSummary.stories.ts}

@@ -1,15 +1,14 @@
-import ServicesSection from "../ServicesSection.vue";
+import ServiceSummary from "../ServiceSummary.vue";
 import PageRow from "../../../../01.atoms/page-row/PageRow.vue";
 import TextBlock from "../../../../01.atoms/text-block/TextBlock.vue";
 import EyebrowText from "../../../../01.atoms/text-blocks/eyebrow-text/EyebrowText.vue";
 import HeroText from "../../../../01.atoms/text-blocks/hero-text/HeroText.vue";
-import InputButtonCore from "../../../../05.forms/input-button/InputButtonCore.vue";
 import type { Meta, StoryObj } from "@nuxtjs/storybook";
 import type { Service } from "~/types/types.services";
 
-const meta: Meta<typeof ServicesSection> = {
-  title: "Organisms/Services/Services Section",
-  component: ServicesSection,
+const meta: Meta<typeof ServiceSummary> = {
+  title: "Organisms/Services/Service Summary",
+  component: ServiceSummary,
   argTypes: {
     tag: {
       control: { type: "select" },
@@ -21,51 +20,15 @@ const meta: Meta<typeof ServicesSection> = {
       options: ["h1", "h2", "h3"],
       description: "Heading element used for the service title",
     },
-    isSummary: {
-      control: { type: "boolean" },
-      description: "Summary mode — compact view with summary-link slot",
-    },
-    summaryAlignment: {
+    alignment: {
       control: { type: "select" },
       options: ["start", "center", "end"],
-      description: "Vertical alignment of the info column in summary mode",
+      description: "Vertical alignment of the info column relative to the image",
     },
     reverse: {
       control: { type: "boolean" },
       description: "Swap image and content columns",
     },
-    durationIcon: {
-      control: { type: "text" },
-      description: "Icon name for the duration row (any Iconify icon)",
-    },
-    priceIcon: {
-      control: { type: "text" },
-      description: "Icon name for the price row (any Iconify icon)",
-    },
-    processHeading: {
-      control: { type: "text" },
-      description: "Heading text for the process section",
-    },
-    idealForHeading: {
-      control: { type: "text" },
-      description: "Heading text for the ideal-for section",
-    },
-    maintenanceHeading: {
-      control: { type: "text" },
-      description: "Heading text for the maintenance/aftercare section",
-    },
-    faqsHeading: {
-      control: { type: "text" },
-      description: "Heading text for the FAQs section",
-    },
-    ctaHeading: {
-      control: { type: "text" },
-      description: "Heading text inside the default CTA glass panel — ignored if the cta-panel slot is used",
-    },
-    ctaBody: {
-      control: { type: "text" },
-      description: "Body text inside the default CTA glass panel — ignored if the cta-panel slot is used",
-    },
     styleClassPassthrough: {
       control: "object",
       description: "Additional CSS classes applied to the root element",
@@ -74,25 +37,22 @@ const meta: Meta<typeof ServicesSection> = {
   args: {
     tag: "section",
     headerTag: "h2",
-    isSummary: false,
-    summaryAlignment: "center",
+    alignment: "center",
     reverse: false,
-    durationIcon: "mdi:clock-time-four-outline",
-    priceIcon: "mdi:currency-gbp",
     styleClassPassthrough: [],
   },
   parameters: {
     docs: {
       description: {
         component:
-          "Renders a single service as a two-column section: image on one side, detailed content on the other. Two modes: summary (compact, with navigation slot) and full (complete content with CTA slot). Icon names for the price/duration row are configurable via `durationIcon` and `priceIcon` props. Section headings and the CTA panel copy are configurable via props (`processHeading`, `idealForHeading`, `maintenanceHeading`, `faqsHeading`, `ctaHeading`, `ctaBody`); the whole CTA panel can be replaced with the `cta-panel` scoped slot.",
+          "Renders a single service as a compact two-column preview: image on one side, eyebrow/title/price-duration pills/summary text on the other, with a summary-link slot for navigating to the full ServiceDetail page. Superseded ServicesSection's old full mode — a ServiceDetail page is the correct place for process/ideal-for/FAQ/CTA content now.",
       },
     },
   },
 };
 
 export default meta;
-type Story = StoryObj<typeof ServicesSection>;
+type Story = StoryObj<typeof ServiceSummary>;
 
 // ─── Fixtures ─────────────────────────────────────────────────────────────────
 
@@ -153,136 +113,138 @@ const sampleService: Service = {
 
 // ─── Stories ──────────────────────────────────────────────────────────────────
 
-export const FullMode: Story = {
-  name: "Full Mode",
-  args: {
-    ctaHeading: "Ready to book your appointment?",
-    ctaBody: "Mobile service across Bath — I come to you.",
-  },
+export const Default: Story = {
+  name: "Default",
   render: (args) => ({
-    components: { ServicesSection, InputButtonCore },
+    components: { ServiceSummary },
     setup() {
       return { args, sampleService };
     },
     template: `
-      <ServicesSection v-bind="args" :service-data="sampleService">
-        <template #cta>
-          <InputButtonCore tag="a" href="/contact" button-text="Book now" variant="primary" />
+      <ServiceSummary v-bind="args" :service-data="sampleService">
+        <template #summary-link="{ serviceData }">
+          <a :href="'/services/' + serviceData.slug" style="color:inherit;">
+            More about {{ serviceData.title }} →
+          </a>
         </template>
-      </ServicesSection>
+      </ServiceSummary>
     `,
   }),
   parameters: {
     docs: {
       description: {
-        story:
-          "Full mode (isSummary: false) — renders all content including a six-step process, ideal-for list, FAQs, and the CTA panel, matching the real service detail page content shape.",
+        story: "Eyebrow, title, price/duration pills, whatIsIt summary, and the summary-link slot.",
       },
     },
   },
 };
 
-export const SummaryMode: Story = {
-  name: "Summary Mode",
+export const Reversed: Story = {
+  name: "Reversed Layout",
   args: {
-    isSummary: true,
+    reverse: true,
   },
   render: (args) => ({
-    components: { ServicesSection },
+    components: { ServiceSummary },
     setup() {
       return { args, sampleService };
     },
-    template: `
-      <ServicesSection v-bind="args" :service-data="sampleService">
-        <template #summary-link="{ serviceData }">
-          <a :href="'/services/' + serviceData.slug" style="color:inherit;">
-            More about {{ serviceData.title }} →
-          </a>
-        </template>
-      </ServicesSection>
-    `,
+    template: `<ServiceSummary v-bind="args" :service-data="sampleService" />`,
   }),
   parameters: {
     docs: {
       description: {
-        story: "Summary mode — compact view with eyebrow, title, price/duration, whatIsIt, and summary-link slot.",
+        story: "Image on the right, content on the left — use on alternating items in a list.",
       },
     },
   },
 };
 
-export const Reversed: Story = {
-  name: "Reversed Layout",
-  args: {
-    reverse: true,
-  },
+export const FixedRowHeight: Story = {
+  name: "Fixed Row Height",
   render: (args) => ({
-    components: { ServicesSection },
+    components: { ServiceSummary },
     setup() {
       return { args, sampleService };
     },
-    template: `<ServicesSection v-bind="args" :service-data="sampleService" />`,
+    template: `
+      <div style="--service-summary-height-mobile: 24rem; --service-summary-height-tablet: 28rem; --service-summary-height-desktop: 32rem;">
+        <ServiceSummary v-bind="args" :service-data="sampleService">
+          <template #summary-link="{ serviceData }">
+            <a :href="'/services/' + serviceData.slug" style="color:inherit;">
+              More about {{ serviceData.title }} →
+            </a>
+          </template>
+        </ServiceSummary>
+      </div>
+    `,
   }),
   parameters: {
     docs: {
       description: {
-        story: "Image on the right, content on the left — use on alternating items in a list.",
+        story:
+          "--service-summary-height-mobile/-tablet/-desktop set a fixed height for the whole row (both the image and the text column) per @container breakpoint, instead of the default auto — the image crops via object-fit: cover to fill it (--service-summary-image-aspect-ratio no longer has any visible effect once this is set), and the text column gets real leftover space for the alignment prop to position within. Useful for keeping every row in a list a consistent height regardless of each service's source photo dimensions.",
       },
     },
   },
 };
 
-export const CustomIcons: Story = {
-  name: "Custom Icons",
+export const CustomAspectRatio: Story = {
+  name: "Custom Aspect Ratio",
   args: {
-    durationIcon: "mdi:timer-outline",
-    priceIcon: "mdi:currency-eur",
+    alignment: "start",
   },
   render: (args) => ({
-    components: { ServicesSection },
+    components: { ServiceSummary },
     setup() {
       return { args, sampleService };
     },
-    template: `<ServicesSection v-bind="args" :service-data="sampleService" />`,
+    template: `
+      <div style="--service-summary-image-aspect-ratio: 3 / 4;">
+        <ServiceSummary v-bind="args" :service-data="sampleService">
+          <template #summary-link="{ serviceData }">
+            <a :href="'/services/' + serviceData.slug" style="color:inherit;">
+              More about {{ serviceData.title }} →
+            </a>
+          </template>
+        </ServiceSummary>
+      </div>
+    `,
   }),
   parameters: {
     docs: {
       description: {
         story:
-          "Custom icon names passed via durationIcon and priceIcon props — useful when the consuming app uses a different currency or wants a different clock style.",
+          "--service-summary-image-aspect-ratio (default 1 / 1, square) controls the image's own shape when the row height is left auto (the default) — here overridden to a taller 3 / 4 portrait crop. This token only has a visible effect while no --service-summary-height-* override forces a definite row height.",
       },
     },
   },
 };
 
-export const CustomTextAndCta: Story = {
-  name: "Custom Headings & CTA Copy",
-  args: {
-    processHeading: "How It Works",
-    idealForHeading: "Who Is This For",
-    maintenanceHeading: "Aftercare",
-    faqsHeading: "FAQs",
-    ctaHeading: "Ready to book your colour appointment?",
-    ctaBody: "Mobile service across Bath — I come to you.",
-  },
+export const FramedImage: Story = {
+  name: "Framed Image (padding)",
   render: (args) => ({
-    components: { ServicesSection, InputButtonCore },
+    components: { ServiceSummary },
     setup() {
       return { args, sampleService };
     },
     template: `
-      <ServicesSection v-bind="args" :service-data="sampleService">
-        <template #cta>
-          <InputButtonCore tag="a" href="/contact" button-text="Book now" variant="primary" />
-        </template>
-      </ServicesSection>
+      <div style="--service-summary-image-padding-block-mobile: 1.6rem; --service-summary-image-padding-inline-mobile: 1.6rem; background: #1a1a1a;">
+        <ServiceSummary v-bind="args" :service-data="sampleService">
+          <template #summary-link="{ serviceData }">
+            <a :href="'/services/' + serviceData.slug" style="color:inherit;">
+              More about {{ serviceData.title }} →
+            </a>
+          </template>
+        </ServiceSummary>
+      </div>
     `,
   }),
   parameters: {
     docs: {
       description: {
         story:
-          "Section headings and CTA panel copy overridden via props — useful for wording specific to the consuming business rather than the library defaults. Note the heading names the actual service, avoiding the old bug where every service page said 'highlights appointment' regardless of which service it was.",
+          "--service-summary-image-padding-block-*/-inline-* insets the image within .service-summary__image-wrapper instead of letting it fill edge-to-edge — the wrapper's own background shows through as a frame. Combine with a background colour set on the wrapper (via styleClassPassthrough) for a card-like look.",
       },
     },
   },
@@ -290,12 +252,8 @@ export const CustomTextAndCta: Story = {
 
 export const RealisticPageContext: Story = {
   name: "Realistic Page Context",
-  args: {
-    ctaHeading: "Ready to book your appointment?",
-    ctaBody: "Mobile service across Bath — I come to you.",
-  },
   render: (args) => ({
-    components: { ServicesSection, PageRow, TextBlock, EyebrowText, HeroText, InputButtonCore },
+    components: { ServiceSummary, PageRow, TextBlock, EyebrowText, HeroText },
     setup() {
       return { args, sampleService };
     },
@@ -319,11 +277,13 @@ export const RealisticPageContext: Story = {
         </PageRow>
 
         <PageRow tag="div" variant="content" :style-class-passthrough="['mbe-20']">
-          <ServicesSection v-bind="args" :service-data="sampleService">
-            <template #cta>
-              <InputButtonCore tag="a" href="/contact" button-text="Book now" variant="primary" />
+          <ServiceSummary v-bind="args" :service-data="sampleService">
+            <template #summary-link="{ serviceData }">
+              <a :href="'/services/' + serviceData.slug" style="color:inherit;">
+                More about {{ serviceData.title }} →
+              </a>
             </template>
-          </ServicesSection>
+          </ServiceSummary>
         </PageRow>
       </div>
     `,
@@ -332,37 +292,7 @@ export const RealisticPageContext: Story = {
     docs: {
       description: {
         story:
-          "Matches the real service detail page (app/pages/services/[slug].vue in the luxury-locs-by-natasha-nuxt3 project): a page hero (EyebrowText + HeroText inside PageRow/TextBlock) followed by ServicesSection with a real 'Book now' CTA button. Use this story to sanity-check layout and spacing changes against the actual consuming page rather than the bare component.",
-      },
-    },
-  },
-};
-
-export const CustomCtaPanel: Story = {
-  name: "Custom CTA Panel (slot override)",
-  render: (args) => ({
-    components: { ServicesSection },
-    setup() {
-      return { args, sampleService };
-    },
-    template: `
-      <ServicesSection v-bind="args" :service-data="sampleService">
-        <template #cta-panel="{ serviceData }">
-          <div style="padding:2.4rem;border:2px dashed #333;border-radius:1rem;text-align:center;">
-            <p style="margin:0 0 1.2rem;">Fully custom CTA block for {{ serviceData.title }} — not a GlassPanel at all.</p>
-            <button style="padding:1.2rem 2.4rem;background:#333;color:#fff;border:none;border-radius:0.4rem;cursor:pointer;">
-              Enquire Now
-            </button>
-          </div>
-        </template>
-      </ServicesSection>
-    `,
-  }),
-  parameters: {
-    docs: {
-      description: {
-        story:
-          "The cta-panel scoped slot replaces the default GlassPanel entirely — use when a consumer needs a different component or layout for the closing call-to-action, not just different copy.",
+          "Matches the real services listing page (app/pages/services/index.vue in the luxury-locs-by-natasha-nuxt3 project): a page hero (EyebrowText + HeroText inside PageRow/TextBlock) followed by a ServiceSummary. Use ServiceSummaryGrid for the full alternating listing — this story sanity-checks a single instance's layout in context.",
       },
     },
   },