srcdev-nuxt-components 9.3.11 → 9.3.13

package/.claude/skills/components/services-section-grid.md

@@ -1,130 +0,0 @@
-# ServicesSectionGrid Component
-
-## Overview
-
-`ServicesSectionGrid` renders a vertical stack of `ServicesSection` components (in summary mode) from a `Service[]` array. Each section includes a hardcoded `summary-link` (navigates to the service detail page) and a `cta` button. Column order can be alternated on every other section via `useAlternateReverse`.
-
-All routing and CTA decisions are delegated to the consumer via scoped slots — the grid forwards `serviceData` from each `ServicesSection` iteration so the consumer can build hrefs, labels, and choose components freely.
-
-## Props
-
-| Prop                    | Type                           | Default     | Required |
-| ----------------------- | ------------------------------ | ----------- | -------- |
-| `servicesData`          | `Service[]`                    | —           | **yes**  |
-| `tag`                   | `"div" \| "section" \| "main"` | `"div"`     | no       |
-| `useAlternateReverse`   | `boolean`                      | `false`     | no       |
-| `summaryAlignment`      | `"start" \| "center" \| "end"` | `"center"`  | no       |
-| `styleClassPassthrough` | `string \| string[]`           | `[]`        | no       |
-
-### `useAlternateReverse`
-
-When `true`, odd-indexed sections flip their image/content column order (`reverse` prop on each `ServicesSection`), creating a visual zigzag layout. Commonly used on services landing pages with three or more services.
-
-### `summaryAlignment`
-
-Passed to every `ServicesSection` as `summaryAlignment` — 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 section |
-
-The slot is forwarded from the inner `ServicesSection` and receives the current iteration's `serviceData` as a scoped prop. It is optional — omitting it leaves that area empty.
-
-> **Note**: `ServicesSectionGrid` always renders sections in summary mode (`isSummary: true`), so only `summary-link` is available. The `cta` slot (which lives inside a full-mode `GlassPanel`) is not reachable from this component.
-
-## Basic usage
-
-```vue
-<ServicesSectionGrid
-  :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>
-</ServicesSectionGrid>
-```
-
-## Alternate reverse (zigzag) layout
-
-```vue
-<ServicesSectionGrid
-  :services-data="servicesData ?? []"
-  :use-alternate-reverse="true"
-  tag="section"
->
-  <!-- slots as above -->
-</ServicesSectionGrid>
-```
-
-## 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']">
-          <ServicesSectionGrid
-            :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>
-          </ServicesSectionGrid>
-        </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 {
-  .services-grid {
-    gap: 6rem;
-  }
-}
-</style>
-```
-
-## Notes
-
-- Component is auto-imported in Nuxt — no import needed.
-- The `Service` type is imported from `~/types/types.services`.
-- Each `ServicesSection` receives its array `index` for eager/lazy image loading decisions (first two sections load eagerly).
-- Pass `servicesData ?? []` as a safe fallback while data loads asynchronously.
-- See [services-section.md](./services-section.md) for the full `ServicesSection` prop and slot API.

package/.claude/skills/components/services-section.md

@@ -1,211 +0,0 @@
-# ServicesSection Component
-
-## Overview
-
-`ServicesSection` renders a single service as a full two-column section: image on one side, detailed content on the other. It has two modes controlled by the `isSummary` prop:
-
-- **Summary mode** (`isSummary: true`) — compact view: eyebrow, title, price/duration, `whatIsIt` text, and a `summary-link` slot for a navigational link.
-- **Full mode** (`isSummary: false`, default) — complete view: all summary content plus long description, hero heading, process stepper, ideal-for stepper, aftercare, FAQs, and a `GlassPanel` with a `cta` slot for a booking/contact button.
-
-All routing and CTA decisions are delegated to the consumer via slots.
-
-## 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 |
-| `isSummary` | `boolean` | `false` | no |
-| `summaryAlignment` | `"start" \| "center" \| "end"` | `"center"` | no |
-| `reverse` | `boolean` | `false` | no |
-| `durationIcon` | `string` | `"mdi:clock-time-four-outline"` | no |
-| `priceIcon` | `string` | `"mdi:currency-gbp"` | no |
-| `processHeading` | `string` | `"The Process"` | no |
-| `idealForHeading` | `string` | `"Ideal For"` | no |
-| `maintenanceHeading` | `string` | `"Aftercare & Maintenance"` | no |
-| `faqsHeading` | `string` | `"Frequently Asked Questions"` | no |
-| `ctaHeading` | `string` | `"Ready to book your appointment?"` | no |
-| `ctaBody` | `string` | `"Get in touch to book your appointment."` | no |
-| `styleClassPassthrough` | `string \| string[]` | `[]` | no |
-
-### Heading and CTA copy props
-
-All section subheadings and the default CTA panel's heading/body are props, not hardcoded
-text — override them with wording specific to the consuming business:
-
-```vue
-<ServicesSection
-  :service-data="service"
-  process-heading="How It Works"
-  cta-heading="Ready to book your colour appointment?"
-  cta-body="Mobile service across Bath — I come to you."
-/>
-```
-
-Name the actual service in `ctaHeading` (rather than a generic phrase) if every service page
-shares one CTA wrapper — a single hardcoded heading applied to every service previously caused
-a real bug in production, where a "Colour" service page's CTA read "Ready to book your
-**highlights** appointment?" regardless of which service was being viewed.
-
-### Icon customisation
-
-The two icons in the price/duration row default to `mdi:clock-time-four-outline` and `mdi:currency-gbp`. Override them for a different currency or icon style:
-
-```vue
-<ServicesSection
-  :service-data="service"
-  duration-icon="mdi:timer-outline"
-  price-icon="mdi:currency-eur"
-/>
-```
-
-Any [Iconify](https://icon-sets.iconify.design/) icon name is accepted. See `.claude/skills/icon-sets.md` for the icon packages available in this layer.
-
-### `index` and image loading
-
-The `index` prop controls both eager/lazy loading and fetch priority. The first two sections (`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 of sections.
-
-### `reverse`
-
-Flips the image to the right column and content to the left (CSS `order: 2` on the image wrapper).
-
-## Slots
-
-| Slot | Slot props | Rendered when | Purpose |
-|------|-----------|---------------|---------|
-| `summary-link` | `{ serviceData: Service }` | `isSummary` is `true` | Navigation link below the `whatIsIt` text in summary mode |
-| `cta` | `{ serviceData: Service }` | `isSummary` is `false` | CTA button/link inside the closing `GlassPanel` in full mode |
-| `cta-panel` | `{ serviceData: Service, ctaHeading: string, ctaBody: string }` | `isSummary` is `false` | Replaces the entire default `GlassPanel` CTA block — use when a consumer needs a different component or layout, not just different copy |
-
-All three slots receive `serviceData` as a scoped prop. `cta-panel`'s default content *is*
-the `GlassPanel` + `ctaHeading`/`ctaBody` + `cta` slot combination described above — providing
-`cta-panel` replaces that whole block, so the `ctaHeading`/`ctaBody` props and `cta` slot are
-only useful if the `cta-panel` slot fallback (or the consumer's own override) still renders them.
-
-## Summary mode usage
-
-```vue
-<ServicesSection :service-data="service" :is-summary="true" :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>
-</ServicesSection>
-```
-
-## Full mode usage
-
-```vue
-<ServicesSection :service-data="service">
-  <template #cta>
-    <InputButtonCore
-      variant="secondary"
-      button-text="Get in touch"
-      href="/contact"
-      :style-class-passthrough="['mbs-24']"
-    >
-      <template #right>
-        <Icon name="mdi:arrow-right" class="icon" />
-      </template>
-    </InputButtonCore>
-  </template>
-</ServicesSection>
-```
-
-## Multiple CTAs in full mode
-
-```vue
-<ServicesSection :service-data="service">
-  <template #cta="{ serviceData }">
-    <InputButtonCore variant="primary" button-text="Book now" href="/book" />
-    <InputButtonCore variant="secondary" button-text="Get in touch" href="/contact" />
-  </template>
-</ServicesSection>
-```
-
-## Replacing the whole CTA panel (slot override)
-
-Use `cta-panel` instead of `ctaHeading`/`ctaBody` when the CTA needs a different component
-entirely — not just different text inside `GlassPanel`:
-
-```vue
-<ServicesSection :service-data="service">
-  <template #cta-panel="{ serviceData, ctaHeading, ctaBody }">
-    <MyPromoBanner :heading="ctaHeading" :body="ctaBody">
-      <template #cta><InputButtonCore button-text="Enquire Now" href="/contact" /></template>
-    </MyPromoBanner>
-  </template>
-</ServicesSection>
-```
-
-## Rendering a list (summary mode)
-
-```vue
-<ServicesSection
-  v-for="(service, i) in services"
-  :key="service.slug"
-  :service-data="service"
-  :index="i"
-  :is-summary="true"
-  :reverse="i % 2 !== 0"
-  tag="section"
->
-  <template #summary-link="{ serviceData }">
-    <LinkText :to="`/services/${serviceData.slug}`" :link-text="`More about ${serviceData.title}`" />
-  </template>
-</ServicesSection>
-```
-
-## Local style override scaffold
-
-When consuming this component, prefer the `--services-section-*` 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
-<ServicesSection :style-class-passthrough="['my-section']" :service-data="service">
-  ...
-</ServicesSection>
-
-<style>
-/* ─── ServicesSection local overrides ──────────────────────────────
-   Colours, borders, geometry only — do not override behaviour.
-   Delete this block if no overrides are needed.
-   ─────────────────────────────────────────────────────────────────── */
-.services-section {
-  &.my-section {
-    --services-section-image-border-radius: 1.2rem;
-
-    /* Deeper overrides target the BEM element classes directly, e.g.: */
-    /* .services-section__faq { } */
-  }
-}
-</style>
-```
-
-## Notes
-
-- Component is auto-imported in Nuxt — no import needed.
-- The `Service` type is imported from `~/types/types.services`.
-- `summary-link` slot is guarded by `v-if="isSummary"` — it will not render in full mode even if provided.
-- `cta` and `cta-panel` slots live inside `v-if="!isSummary"` — neither renders in summary mode.
-- Internal element classes are BEM-namespaced: `services-section__image-wrapper`,
-  `services-section__info-wrapper`, `services-section__price-duration`,
-  `services-section__decorator`, `services-section__faq`, `services-section__faq-answer`,
-  `services-section__glass-panel`. If a consuming app has CSS overrides referencing older
-  unprefixed names (`.image-wrapper`, `.price-duration`, `.services-faq`, etc. — from before
-  this component's classnames were namespaced), those selectors need updating to match.
-- The section gets `aria-labelledby` automatically when `tag` is `"section"`, `"article"`, or `"aside"`, pointing at the id ServicesSection 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).)
-- `summaryAlignment` only has effect when `isSummary` is `true` — it aligns the info-wrapper content vertically within the grid cell.

package/.vscode/srcdev-component-services-section.code-snippets

@@ -1,84 +0,0 @@
-{
-  "SRCDEV ServicesSection Full Mode": {
-    "description": "ServicesSection full mode — complete content with CTA",
-    "scope": "vue,html",
-    "body": [
-      "<ServicesSection",
-      "  :service-data=\"$1service\"",
-      "  :index=\"$2index\"",
-      ">",
-      "  <template #cta>",
-      "    <button type=\"button\">$3Book Now</button>",
-      "  </template>",
-      "</ServicesSection>"
-    ]
-  },
-  "SRCDEV ServicesSection Summary Mode": {
-    "description": "ServicesSection summary mode — compact card with summary-link slot",
-    "scope": "vue,html",
-    "body": [
-      "<ServicesSection",
-      "  :service-data=\"$1service\"",
-      "  is-summary",
-      "  summary-alignment=\"$2center\"",
-      ">",
-      "  <template #summary-link=\"{ serviceData }\">",
-      "    <NuxtLink :to=\"`/services/${serviceData.slug}`\">$3More about {{ serviceData.title }} →</NuxtLink>",
-      "  </template>",
-      "</ServicesSection>"
-    ]
-  },
-  "SRCDEV ServicesSection Custom Headings And Cta": {
-    "description": "ServicesSection with custom section headings and CTA copy props",
-    "scope": "vue,html",
-    "body": [
-      "<ServicesSection",
-      "  :service-data=\"$1service\"",
-      "  process-heading=\"$2How It Works\"",
-      "  ideal-for-heading=\"$3Who Is This For\"",
-      "  maintenance-heading=\"$4Aftercare\"",
-      "  faqs-heading=\"$5FAQs\"",
-      "  cta-heading=\"$6Ready to book?\"",
-      "  cta-body=\"$7Get in touch to book your appointment.\"",
-      ">",
-      "  <template #cta>",
-      "    <button type=\"button\">$8Book Now</button>",
-      "  </template>",
-      "</ServicesSection>"
-    ]
-  },
-  "SRCDEV ServicesSection Custom Cta Panel Slot": {
-    "description": "ServicesSection with the cta-panel slot fully replacing the default GlassPanel",
-    "scope": "vue,html",
-    "body": [
-      "<ServicesSection :service-data=\"$1service\">",
-      "  <template #cta-panel=\"{ serviceData, ctaHeading, ctaBody }\">",
-      "    $2",
-      "  </template>",
-      "</ServicesSection>"
-    ]
-  },
-  "SRCDEV ServicesSection CSS Override": {
-    "description": "CSS override scaffold for ServicesSection — scope to a page or section class",
-    "scope": "css",
-    "body": [
-      ".$1my-page {",
-      "  .services-section {",
-      "    --services-section-grid-gap: ;",
-      "    --services-section-grid-gap-desktop: ;",
-      "    --services-section-image-border-radius: ;",
-      "    --services-section-price-duration-gap: ;",
-      "    --services-section-decorator-size: ;",
-      "    --services-section-faq-divider-color: ;",
-      "    --services-section-faq-answer-line-height: ;",
-      "",
-      "    .services-section__image-wrapper {}",
-      "    .services-section__info-wrapper {}",
-      "    .services-section__price-duration {}",
-      "    .services-section__faq {}",
-      "    .services-section__glass-panel {}",
-      "  }",
-      "}"
-    ]
-  }
-}

package/app/components/03.organisms/services/services-grids/tests/__snapshots__/ServicesSectionGrid.spec.ts.snap

@@ -1,87 +0,0 @@
-// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
-
-exports[`ServicesSectionGrid > renders correct HTML structure 1`] = `
-"<div class="services-grid">
-  <div class="services-section">
-    <div class="services-section__grid">
-      <div class="services-section__image-wrapper"><img data-nuxt-img="" srcset="/_ipx/_/images/locs-installation.jpg 1x, /_ipx/_/images/locs-installation.jpg 2x" alt="Locs Installation" loading="eager" fetchpriority="high" class="services-section__image" src="/_ipx/_/images/locs-installation.jpg"></div>
-      <div class="services-section__info-wrapper services-section__info-wrapper--summary services-section__info-wrapper--align-center">
-        <div class="eyebrow-text large">Subtitle for Locs Installation</div>
-        <h2 id="v-0-0-0" class="hero-text mb-20 title axis-horizontal">
-          <!--v-if--><span class="text-block-0 normal">Locs Installation</span>
-        </h2>
-        <div class="services-section__price-duration">
-          <div class="flex-row"><span class="iconify i-mdi:clock-time-four-outline services-section__decorator" aria-hidden="true"></span><span>60 mins</span></div>
-          <div class="flex-row"><span class="iconify i-mdi:currency-gbp services-section__decorator" aria-hidden="true"></span><span>£50</span></div>
-        </div>
-        <!--v-if-->
-        <!--v-if-->
-        <p class="page-body-normal">What this service is.</p>
-        <!--v-if-->
-        <!--v-if-->
-        <!--v-if-->
-        <!--v-if-->
-        <!--v-if-->
-        <!--v-if-->
-        <!--v-if-->
-        <!--v-if-->
-        <!--v-if-->
-      </div>
-    </div>
-  </div>
-  <div class="services-section">
-    <div class="services-section__grid">
-      <div class="services-section__image-wrapper"><img data-nuxt-img="" srcset="/_ipx/_/images/locs-retwist.jpg 1x, /_ipx/_/images/locs-retwist.jpg 2x" alt="Locs Retwist" loading="eager" fetchpriority="auto" class="services-section__image" src="/_ipx/_/images/locs-retwist.jpg"></div>
-      <div class="services-section__info-wrapper services-section__info-wrapper--summary services-section__info-wrapper--align-center">
-        <div class="eyebrow-text large">Subtitle for Locs Retwist</div>
-        <h2 id="v-0-0-1" class="hero-text mb-20 title axis-horizontal">
-          <!--v-if--><span class="text-block-0 normal">Locs Retwist</span>
-        </h2>
-        <div class="services-section__price-duration">
-          <div class="flex-row"><span class="iconify i-mdi:clock-time-four-outline services-section__decorator" aria-hidden="true"></span><span>60 mins</span></div>
-          <div class="flex-row"><span class="iconify i-mdi:currency-gbp services-section__decorator" aria-hidden="true"></span><span>£50</span></div>
-        </div>
-        <!--v-if-->
-        <!--v-if-->
-        <p class="page-body-normal">What this service is.</p>
-        <!--v-if-->
-        <!--v-if-->
-        <!--v-if-->
-        <!--v-if-->
-        <!--v-if-->
-        <!--v-if-->
-        <!--v-if-->
-        <!--v-if-->
-        <!--v-if-->
-      </div>
-    </div>
-  </div>
-  <div class="services-section">
-    <div class="services-section__grid">
-      <div class="services-section__image-wrapper"><img data-nuxt-img="" srcset="/_ipx/_/images/colour-treatment.jpg 1x, /_ipx/_/images/colour-treatment.jpg 2x" alt="Colour Treatment" loading="lazy" fetchpriority="auto" class="services-section__image" src="/_ipx/_/images/colour-treatment.jpg"></div>
-      <div class="services-section__info-wrapper services-section__info-wrapper--summary services-section__info-wrapper--align-center">
-        <div class="eyebrow-text large">Subtitle for Colour Treatment</div>
-        <h2 id="v-0-0-2" class="hero-text mb-20 title axis-horizontal">
-          <!--v-if--><span class="text-block-0 normal">Colour Treatment</span>
-        </h2>
-        <div class="services-section__price-duration">
-          <div class="flex-row"><span class="iconify i-mdi:clock-time-four-outline services-section__decorator" aria-hidden="true"></span><span>60 mins</span></div>
-          <div class="flex-row"><span class="iconify i-mdi:currency-gbp services-section__decorator" aria-hidden="true"></span><span>£50</span></div>
-        </div>
-        <!--v-if-->
-        <!--v-if-->
-        <p class="page-body-normal">What this service is.</p>
-        <!--v-if-->
-        <!--v-if-->
-        <!--v-if-->
-        <!--v-if-->
-        <!--v-if-->
-        <!--v-if-->
-        <!--v-if-->
-        <!--v-if-->
-        <!--v-if-->
-      </div>
-    </div>
-  </div>
-</div>"
-`;

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

@@ -1,149 +0,0 @@
-# ServicesSection — Consumer Styling Guide
-
-## Public token API
-
-All `--services-section-*` 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 |
-|---|---|---|
-| `--services-section-grid-gap` | `2rem` | Gap between image and content columns below the 768px breakpoint |
-| `--services-section-grid-gap-desktop` | `3rem` | Gap between columns at 768px and above |
-| `--services-section-image-border-radius` | `0.8rem` | Corner rounding on the service image |
-| `--services-section-price-duration-gap` | `3rem` | Gap between the duration and price rows |
-| `--services-section-price-duration-item-gap` | `0.8rem` | Gap between icon and text within a single row |
-| `--services-section-price-duration-margin-block-end` | `2rem` | Space below the price/duration row |
-| `--services-section-decorator-size` | `2rem` | Width/height of the duration and price icons |
-| `--services-section-faq-margin-block-end` | `2.4rem` | Space below the FAQ accordion |
-| `--services-section-faq-answer-line-height` | `1.6` | Line height of FAQ answer text |
-
-### Colours
-
-| Token | Default | Controls |
-|---|---|---|
-| `--services-section-faq-divider-color` | `currentColor` | Border colour between FAQ accordion items |
-| `--services-section-faq-divider-opacity` | `0.7` | Opacity of each FAQ accordion item's border |
-
----
-
-## Text content — props, not CSS
-
-Section headings and the default CTA panel copy are **props**, not hardcoded strings, so
-there is nothing to override in CSS for these:
-
-| Prop | Default |
-|---|---|
-| `processHeading` | `"The Process"` |
-| `idealForHeading` | `"Ideal For"` |
-| `maintenanceHeading` | `"Aftercare & Maintenance"` |
-| `faqsHeading` | `"Frequently Asked Questions"` |
-| `ctaHeading` | `"Ready to book your appointment?"` |
-| `ctaBody` | `"Get in touch to book your appointment."` |
-
-```vue
-<ServicesSection
-  :service-data="service"
-  cta-heading="Ready to book your locs consultation?"
-  cta-body="Mobile service across Bath — I come to you."
-/>
-```
-
-If the CTA needs a different component entirely (not just different text), replace it with
-the `cta-panel` scoped slot instead of styling around the default `GlassPanel`:
-
-```vue
-<ServicesSection :service-data="service">
-  <template #cta-panel="{ serviceData, ctaHeading, ctaBody }">
-    <MyCustomPanel :heading="ctaHeading" :body="ctaBody">
-      <template #cta><button>Enquire Now</button></template>
-    </MyCustomPanel>
-  </template>
-</ServicesSection>
-```
-
----
-
-## Global theming — recommended approach
-
-Create `assets/styles/setup/07.components/services-section.css` in the consuming app and
-set tokens on `:root`. This applies to every `ServicesSection` across the site.
-
-```css
-/* assets/styles/setup/07.components/services-section.css */
-:root {
-  --services-section-grid-gap: 2.4rem;
-  --services-section-grid-gap-desktop: 4rem;
-  --services-section-image-border-radius: 1.2rem;
-  --services-section-faq-divider-color: var(--brand-border);
-}
-```
-
----
-
-## 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 {
-  .services-section {
-    --services-section-decorator-size: 2.4rem;
-    --services-section-faq-answer-line-height: 1.8;
-  }
-}
-```
-
----
-
-## 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
-<ServicesSection :style-class-passthrough="['highlight-service']" :service-data="service" />
-```
-
-```css
-.services-section.highlight-service {
-  --services-section-image-border-radius: 2rem;
-  --services-section-faq-divider-color: var(--color-accent);
-}
-```
-
----
-
-## FAQ accordion styling
-
-The `AccordianCore` inside this component receives `services-section__faq` via
-`styleClassPassthrough`. To target the accordion's own internals (summary, icon rotation,
-content padding), style through that class rather than reaching into `AccordianCore`
-directly — see `.services-section__faq` in the component's own `<style>` block for the
-selectors already scoped this way (`.accordian-item.expanding-panel`,
-`.expanding-panel-summary`, `.services-section__faq-answer`).
-
-```css
-.services-section {
-  .services-section__faq {
-    .expanding-panel-details .expanding-panel-summary {
-      padding-block: 1.6rem;
-    }
-  }
-}
-```
-
----
-
-## Notes
-
-- `--services-section-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 CTA panel is rendered inside a default `<slot name="cta-panel">` — passing that slot
-  bypasses `GlassPanel` and all of its tokens (`--glass-panel-*`) entirely, along with the
-  `ctaHeading`/`ctaBody` props, which are handed to the slot for reuse rather than applied
-  automatically.