srcdev-nuxt-components 9.5.7 → 9.6.1

package/app/components/03.organisms/services/service-summary/tests/__snapshots__/ServiceSummary.spec.ts.snap

@@ -3,13 +3,13 @@
 exports[`ServiceSummary > renders correct HTML structure 1`] = `
 "<div class="service-summary">
   <div class="service-summary__grid">
-    <div class="service-summary__image-wrapper"><img data-nuxt-img="" srcset="/_ipx/_/images/test.jpg 1x, /_ipx/_/images/test.jpg 2x" alt="Test Service" loading="eager" fetchpriority="high" class="service-summary__image" src="/_ipx/_/images/test.jpg"></div>
+    <div class="service-summary__image-wrapper"><img width="1080" height="1080" data-nuxt-img="" srcset="/_ipx/s_1080x1080/images/test.jpg 1x, /_ipx/s_2160x2160/images/test.jpg 2x" alt="Test Service" loading="eager" fetchpriority="high" class="service-summary__image" src="/_ipx/s_1080x1080/images/test.jpg"></div>
     <div class="service-summary__info-wrapper service-summary__info-wrapper--align-center">
       <div class="eyebrow-text large">A subtitle</div>
       <h2 id="v-0-0" class="hero-text mb-20 title axis-horizontal">
         <!--v-if--><span class="text-block-0 normal">Test Service</span>
       </h2>
-      <div class="service-summary__pills"><span class="display-pill md neutral"><!--v-if--><span class="display-pill-label">60 mins</span></span><span class="display-pill md neutral"><!--v-if--><span class="display-pill-label">From £50</span></span></div>
+      <div class="service-summary__pills"><span class="display-pill" data-size="md" data-variant="neutral"><!--v-if--><span class="display-pill-label">60 mins</span></span><span class="display-pill" data-size="md" data-variant="neutral"><!--v-if--><span class="display-pill-label">From £50</span></span></div>
       <p class="page-body-normal">What this service is</p>
     </div>
   </div>

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

@@ -4,7 +4,7 @@
 
 Every token below is consumed directly at its point of use (`var(--services-card-gap, 1rem)`,
 etc.). The only private token is `--_scrim-colour`, which resolves
-`--image-wrapper-details-scrim-colour` once so the scrim and the text colour read the same value. Set the token globally in
+`--services-card-image-details-scrim-colour` once so the scrim and the text colour read the same value. Set the token globally in
 a theme file, scoped to a page wrapper, or per-instance via `styleClassPassthrough` — no
 `:deep()` needed, component styles are unscoped.
 
@@ -16,15 +16,16 @@ i.e. `is-clickable` is on the root — since these all default to `transparent`/
 
 | Token | Default | Controls |
 |---|---|---|
-| `--services-card-border-radius` | `0` | Root corner radius — also clips `.image-wrapper` (root has `overflow: hidden`), so set `--image-wrapper-border-radius` to match if you want the image's own corners rounded consistently with a rounded root |
+| `--services-card-border-radius` | `0` | Root corner radius — also clips `.services-card-image-wrapper` (root has `overflow: hidden`), so set `--services-card-image-border-radius` to match if you want the image's own corners rounded consistently with a rounded root |
 | `--services-card-border-width` | `1px` | Border thickness |
 | `--services-card-border-colour` | `transparent` | Resting (non-hover) border colour |
 | `--services-card-border-colour-hover` | resting border colour | Border colour on `:hover`/`:focus-visible` — defaults to whatever `--services-card-border-colour` resolves to, so setting only the resting colour keeps the border visible on hover instead of it vanishing |
 | `--services-card-outline-width` | `2px` | Outline thickness |
 | `--services-card-outline-colour` | `transparent` | Resting (non-hover) outline colour |
-| `--services-card-outline-colour-hover` | `transparent` | Outline colour on `:hover`/`:focus-visible` |
+| `--services-card-outline-colour-hover` | resting outline colour | Outline colour on `:hover`/`:focus-visible` |
+| `--services-card-outline-colour-focus` | hover outline colour, else `var(--theme-ring, currentColor)` | Keyboard focus ring colour. Never transparent by default, so the whole-card link always shows focus |
 | `--services-card-outline-offset` | `0px` | Resting outline offset |
-| `--services-card-outline-offset-hover` | `0px` | Outline offset on `:hover`/`:focus-visible` — e.g. set to a larger value than the resting offset for an outline that grows outward on hover |
+| `--services-card-outline-offset-hover` | resting outline offset | Outline offset on `:hover`/`:focus-visible` — e.g. set to a larger value than the resting offset for an outline that grows outward on hover |
 | `--services-card-background-color-hover` | resting background colour | Background on `:hover`/`:focus-visible` |
 | `--services-card-transform-hover` | `none` | Transform on `:hover`/`:focus-visible`, e.g. `translateY(-0.4rem)` for a lift. Transitions with the other states; skipped under `prefers-reduced-motion: reduce` |
 
@@ -43,61 +44,97 @@ i.e. `is-clickable` is on the root — since these all default to `transparent`/
 |---|---|---|
 | `--services-card-gap` | `1rem` | Gap between the image row and the details row |
 | `--services-card-background-color` | `transparent` | Card background |
-| `--services-card-padding-block` | none | Padding on the card root (block axis) |
+| `--services-card-padding-block` | `0` | Padding on the card root (block axis) |
 | `--services-card-padding-inline` | `0` | Padding on the card root (inline axis). Leave at `0` for a flush image, and pad `--details-wrapper-padding-*` instead |
-| `--image-wrapper-aspect-ratio` | `3/4` | Image aspect ratio |
-| `--image-wrapper-border-radius` | `8px` | Image corner radius |
-| `--image-wrapper-padding-block` | `0 0` | Padding inside the image wrapper (block axis) |
-| `--image-wrapper-padding-inline` | `0 0` | Padding inside the image wrapper (inline axis) |
-| `--image-wrapper-border-image-zoom-transform` | `scale(1.05)` | Transform applied to the image while the pointer is over the image. Set `none` to turn the zoom off (not `scale(0)`, which hides the image). Turning it off suits a whole-card link with its own hover effect (`--services-card-transform-hover`, border/background hover tokens): otherwise moving from the card body onto the image starts a second, separate effect |
-| `--details-wrapper-grid-gap` | `1rem` | Gap between eyebrow/title/description/footer |
-| `--details-wrapper-padding-block` | `0` | Padding inside the details wrapper (block axis) |
-| `--details-wrapper-padding-inline` | `0` | Padding inside the details wrapper (inline axis) |
-| `--eyebrow-text-padding-block` | `0.8rem 0` | Padding above/below the eyebrow |
-| `--hero-text-padding-block` | `2rem 1rem` | Padding above/below the title |
-| `--description-padding-block` | `0 0` | Padding on the description text |
-| `--description-text-colour` | `var(--colour-text-secondary)` | Description paragraph colour |
-| `--description-line-height` | `1.4` | Description line height |
-| `--description-font-weight` | `inherit` | Description font weight |
-| `--description-line-clamp` | `100` | Number of lines the description clamps to — default is effectively unclamped; set e.g. `3` to clamp |
-| `--meta-padding-block` | `1.6rem 0` | Padding above/below the meta row's divider line |
-| `--meta-border-colour` | `var(--theme-border)` | Meta row's top divider colour |
-| `--meta-text-colour` | `inherit` | Duration/price text colour |
-| `--meta-duration-text-colour` | meta text colour | Duration colour only |
-| `--meta-price-text-colour` | meta text colour | Price colour only, e.g. brighter than the duration |
-| `--meta-duration-font-weight` | `500` | Duration font weight |
-| `--meta-price-font-weight` | `700` | Price font weight |
-| `--meta-letter-spacing` | `inherit` | Letter-spacing on the meta row |
-| `--meta-font-size` | `1.4rem` | Duration/price text size |
-| `--meta-text-transform` | `uppercase` | Text transform on the duration/price meta row |
-| `--footer-padding-block` | `0` | Padding on the `.footer` wrapper (meta row + actions slot) |
-| `--footer-wrapper-grid-gap` | `1rem` | Gap between the meta row and the actions slot inside `.footer` |
+| `--services-card-image-aspect-ratio` | `3/4` | Image aspect ratio |
+| `--services-card-image-border-radius` | `8px` | Image corner radius |
+| `--services-card-image-padding-block` | `0 0` | Padding inside the image wrapper (block axis) |
+| `--services-card-image-padding-inline` | `0 0` | Padding inside the image wrapper (inline axis) |
+| `--services-card-image-zoom-transform` | `scale(1.05)` | Transform applied to the image while the pointer is over the image. Set `none` to turn the zoom off (not `scale(0)`, which hides the image). Turning it off suits a whole-card link with its own hover effect (`--services-card-transform-hover`, border/background hover tokens): otherwise moving from the card body onto the image starts a second, separate effect |
+| `--services-card-details-gap` | `1rem` | Gap between eyebrow/title/description/footer |
+| `--services-card-details-padding-block` | `0` | Padding inside the details wrapper (block axis) |
+| `--services-card-details-padding-inline` | `0` | Padding inside the details wrapper (inline axis) |
+| `--services-card-eyebrow-padding-block` | `0.8rem 0` | Padding above/below the eyebrow |
+| `--services-card-title-padding-block` | `2rem 1rem` | Padding above/below the title |
+| `--services-card-description-padding-block` | `0 0` | Padding on the description text |
+| `--services-card-description-text-colour` | `inherit` | Description paragraph colour |
+| `--services-card-description-line-height` | `1.4` | Description line height |
+| `--services-card-description-font-weight` | `inherit` | Description font weight |
+| `--services-card-description-line-clamp` | `none` | Max lines of the description, with an ellipsis on the last. `1` is single-line ellipsis, `none` shows everything |
+| `--services-card-meta-padding-block` | `1.6rem 0` | Padding above/below the meta row's divider line |
+| `--services-card-meta-border-colour` | `var(--theme-border)` | Meta row's top divider colour |
+| `--services-card-meta-text-colour` | `inherit` | Duration/price text colour |
+| `--services-card-meta-duration-text-colour` | meta text colour | Duration colour only |
+| `--services-card-meta-price-text-colour` | meta text colour | Price colour only, e.g. brighter than the duration |
+| `--services-card-meta-duration-font-weight` | `500` | Duration font weight |
+| `--services-card-meta-price-font-weight` | `700` | Price font weight |
+| `--services-card-meta-letter-spacing` | `inherit` | Letter-spacing on the meta row |
+| `--services-card-meta-font-size` | `1.4rem` | Duration/price text size |
+| `--services-card-meta-text-transform` | `uppercase` | Text transform on the duration/price meta row |
+| `--services-card-meta-gap` | `1rem` | Gap between the duration and price (and between rows when long values wrap) |
+| `--services-card-footer-padding-block` | `0` | Padding on the `.services-card-footer` wrapper (meta row + actions slot) |
+| `--services-card-footer-gap` | `1rem` | Gap between the meta row and the actions slot inside `.services-card-footer` |
 
 ### Titles over the image (`titlesWithinImageWrapper`)
 
 | Token | Default | Controls |
 |---|---|---|
-| `--image-wrapper-details-scrim-colour` | `#000` | Colour of the gradient scrim behind the title/eyebrow. Use an opaque colour: the default scrim fades it with `color-mix()`, and the text colour is derived from it |
-| `--image-wrapper-details-scrim` | `linear-gradient(to top, <scrim colour at 75%>, transparent 70%)` | The whole scrim `background` value — replace it for a different shape or direction, or set `none` to remove it |
-| `--image-wrapper-details-text-colour` | `contrast-color(<scrim colour>)`, `#fff` without support | Title/eyebrow text colour. Where `contrast-color()` is supported it picks black or white against the scrim colour, so a light scrim gets dark text automatically |
-| `--image-wrapper-details-eyebrow-text-colour` | `inherit` | Eyebrow colour. The eyebrow's gradient fill is turned off over the image so it can't clash with the photo |
-| `--image-wrapper-details-gap` | `0.5rem` | Gap between eyebrow and title |
-| `--image-wrapper-details-eyebrow-text-padding-block` / `-inline` | `0` / `2.2rem` | Eyebrow padding |
-| `--image-wrapper-details-hero-text-padding-block` / `-inline` | `1.2rem 2.2rem` / `2.2rem` | Title padding |
+| `--services-card-image-details-scrim-colour` | `#000` | Colour of the gradient scrim behind the title/eyebrow. Use an opaque colour: the default scrim fades it with `color-mix()`, and the text colour is derived from it |
+| `--services-card-image-details-scrim` | `linear-gradient(to top, <scrim colour at 75%>, transparent 70%)` | The whole scrim `background` value — replace it for a different shape or direction, or set `none` to remove it |
+| `--services-card-image-details-text-colour` | `contrast-color(<scrim colour>)`, `#fff` without support | Title/eyebrow text colour. Where `contrast-color()` is supported it picks black or white against the scrim colour, so a light scrim gets dark text automatically |
+| `--services-card-image-details-eyebrow-colour` | `inherit` | Eyebrow colour. The eyebrow's gradient fill is turned off over the image so it can't clash with the photo |
+| `--services-card-image-details-gap` | `0.5rem` | Gap between eyebrow and title |
+| `--services-card-image-details-eyebrow-padding-block` / `-inline` | `0` / `2.2rem` | Eyebrow padding |
+| `--services-card-image-details-title-padding-block` / `-inline` | `1.2rem 2.2rem` / `2.2rem` | Title padding |
 
-`contrast-color()` only reads the scrim colour, not the photo. If you remove the scrim, set `--image-wrapper-details-text-colour` yourself to suit the images.
+`contrast-color()` only reads the scrim colour, not the photo. If you remove the scrim, set `--services-card-image-details-text-colour` yourself to suit the images.
 
 ```css
 /* assets/styles/setup/07.components/services-card.css */
 :root {
   --services-card-gap: 1.4rem;
-  --description-line-clamp: 3;
-  --meta-text-transform: none;
+  --services-card-description-line-clamp: 3;
+  --services-card-meta-text-transform: none;
 }
 ```
 
 ---
 
+## State hooks
+
+| Hook | When |
+|---|---|
+| `.services-card.is-clickable` | Whole-card link mode: `href` set and no `actions` slot (root renders as `<a>` or `NuxtLink`) |
+
+Inner classes: `.services-card-image-wrapper`, `.services-card-image`, `.services-card-image-details`
+(titles over the image), `.services-card-details`, `.services-card-description`, `.services-card-footer`,
+`.services-card-meta`, `.services-card-meta-duration`, `.services-card-meta-price`. The eyebrow and
+title are `EyebrowText` (`.eyebrow-text`) and `HeroText` (`.hero-text`), so their own tokens
+(`--eyebrow-text-*`, `--hero-text-*`) inherit down into the card.
+
+Empty `subtitle`, `title` or `shortDescription` render no element at all, and the image overlay is
+left out when both titles are empty.
+
+> Changed 2026-10-06: every inner class and card-specific token is now prefixed `services-card-`.
+> Old to new: `.image-wrapper` → `.services-card-image-wrapper`, `.image` → `.services-card-image`,
+> `.image-wrapper-details` → `.services-card-image-details`, `.details-wrapper` → `.services-card-details`,
+> `.description` / `.footer` / `.meta` / `.meta-duration` / `.meta-price` → `.services-card-*`;
+> `--image-wrapper-details-*` → `--services-card-image-details-*` (with `-eyebrow-text-colour` → `-eyebrow-colour`,
+> `-eyebrow-text-padding-*` → `-eyebrow-padding-*`, `-hero-text-padding-*` → `-title-padding-*`),
+> `--image-wrapper-border-image-zoom-transform` → `--services-card-image-zoom-transform`,
+> `--image-wrapper-*` → `--services-card-image-*`, `--details-wrapper-grid-gap` → `--services-card-details-gap`,
+> `--details-wrapper-padding-*` → `--services-card-details-padding-*`,
+> `--eyebrow-text-padding-block` → `--services-card-eyebrow-padding-block`,
+> `--hero-text-padding-block` → `--services-card-title-padding-block`, `--description-*` / `--meta-*` →
+> `--services-card-description-*` / `--services-card-meta-*`, `--footer-wrapper-grid-gap` →
+> `--services-card-footer-gap`, `--footer-padding-block` → `--services-card-footer-padding-block`.
+> Also: the description line clamp defaults to `none` (was `100`), the description colour defaults
+> to `inherit` (its old fallback, `--colour-text-secondary`, was never defined, so nothing changes
+> visually), the outline hover tokens fall back to the resting outline values, and keyboard focus now
+> shows a ring by default (`--services-card-outline-colour-focus`; it was transparent).
+
+---
+
 ## Text content — props/slots, not CSS
 
 Duration and price text come from `serviceData.duration`/`serviceData.price` by default, or
@@ -107,6 +144,26 @@ the tokens above. See the component skill doc for slot/prop usage examples.
 
 ---
 
+## Footer bottom-alignment (row-of-cards use)
+
+`.services-card-footer` (the meta row + `actions` slot, grouped together) gets `margin-block-start: auto`
+and the root uses `grid-template-rows: auto 1fr`, so when `ServicesCardGrid`'s default
+`align-items: stretch` makes a card taller than its own content (to match a taller sibling in
+the same row), the extra height goes to `.services-card-footer`'s top margin instead of leaving whitespace
+below the actions slot. This keeps the meta row and actions/button aligned across a row of
+cards regardless of each card's description length, without needing CSS subgrid.
+
+`.services-card`, `.services-card-image-wrapper`, `.services-card-details`, and `.services-card-footer` all set
+`min-inline-size: 0`. Without it, an unbreakable child — most commonly a long `actions` slot
+button label, since `InputButton`'s `.button-text` is `white-space: nowrap` with no
+ellipsis — forces its content's min-content width up through the flex/grid chain and widens
+that one card's grid column in `ServicesCardGrid` wider than its siblings. If a card/column
+ever looks wider than the rest with content cut off at the edge, check for a long unbreakable
+string in a slot before assuming it's an image sizing issue — the image is just riding along
+on the widened column, not the cause.
+
+---
+
 ## Local overrides
 
 Set the tokens above on an element you own (a page or section class, or a class added with
@@ -126,38 +183,22 @@ Use sparingly — prefer global or page-scoped CSS. When a single instance needs
 ```css
 .services-card.featured-service {
   --services-card-gap: 1.6rem;
-  --meta-border-colour: var(--color-accent);
+  --services-card-meta-border-colour: var(--color-accent);
 }
 ```
 
 ---
 
-## Footer bottom-alignment (row-of-cards use)
+## Class passthrough
 
-`.footer` (the meta row + `actions` slot, grouped together) gets `margin-block-start: auto`
-and the root uses `grid-template-rows: auto 1fr`, so when `ServicesCardGrid`'s default
-`align-items: stretch` makes a card taller than its own content (to match a taller sibling in
-the same row), the extra height goes to `.footer`'s top margin instead of leaving whitespace
-below the actions slot. This keeps the meta row and actions/button aligned across a row of
-cards regardless of each card's description length, without needing CSS subgrid.
-
-`.services-card`, `.image-wrapper`, `.details-wrapper`, and `.footer` all set
-`min-inline-size: 0`. Without it, an unbreakable child — most commonly a long `actions` slot
-button label, since `InputButton`'s `.button-text` is `white-space: nowrap` with no
-ellipsis — forces its content's min-content width up through the flex/grid chain and widens
-that one card's grid column in `ServicesCardGrid` wider than its siblings. If a card/column
-ever looks wider than the rest with content cut off at the edge, check for a long unbreakable
-string in a slot before assuming it's an image sizing issue — the image is just riding along
-on the widened column, not the cause.
+`style-class-passthrough` adds classes to the root `.services-card`. Reactive after mount.
 
 ---
 
 ## Notes
 
-- `--details-wrapper-grid-gap` (details-wrapper's own children) and `--footer-wrapper-grid-gap`
-  (the meta row ↔ actions slot gap inside `.footer`) are separate tokens — overriding one does
+- `--services-card-details-gap` (details-wrapper's own children) and `--services-card-footer-gap`
+  (the meta row ↔ actions slot gap inside `.services-card-footer`) are separate tokens — overriding one does
   not affect the other.
-- `.meta`'s internal gap (between the duration and price text) is a fixed `1rem`, not a token.
 - Root element tag, `href`/`external` (whole-card-clickable), `eyebrowConfig`, and `heroConfig`
   are props, not CSS — see the component skill doc.
-

package/app/components/03.organisms/services/services-card/ServicesCard.vue

@@ -5,18 +5,30 @@
     class="services-card"
     :class="[elementClasses, { 'is-clickable': isClickable() }]"
   >
-    <GridStack tag="div" :style-class-passthrough="['image-wrapper']">
+    <GridStack tag="div" :style-class-passthrough="['services-card-image-wrapper']">
       <template #layer-1>
-        <NuxtImg :src="serviceData.image" :alt="serviceData.title" loading="lazy" class="image" />
+        <NuxtImg
+          :src="serviceData.image"
+          :alt="serviceData.title"
+          width="640"
+          height="853"
+          loading="lazy"
+          class="services-card-image"
+        />
       </template>
       <template #layer-2>
-        <div v-if="props.titlesWithinImageWrapper" class="image-wrapper-details">
+        <div
+          v-if="props.titlesWithinImageWrapper && (serviceData.subtitle || serviceData.title)"
+          class="services-card-image-details"
+        >
           <EyebrowText
+            v-if="serviceData.subtitle"
             :font-size="eyebrowConfig.fontSize ?? 'medium'"
             :tag="eyebrowConfig.tag ?? 'div'"
             :text-content="serviceData.subtitle"
           />
           <HeroText
+            v-if="serviceData.title"
             :tag="heroConfig.tag ?? 'h2'"
             :font-size="heroConfig.fontSize ?? 'heading'"
             :text-content="[
@@ -30,15 +42,15 @@
       </template>
     </GridStack>
 
-    <div class="details-wrapper">
+    <div class="services-card-details">
       <EyebrowText
-        v-if="!props.titlesWithinImageWrapper"
+        v-if="!props.titlesWithinImageWrapper && serviceData.subtitle"
         :font-size="eyebrowConfig.fontSize ?? 'large'"
         :tag="eyebrowConfig.tag ?? 'div'"
         :text-content="serviceData.subtitle"
       />
       <HeroText
-        v-if="!props.titlesWithinImageWrapper"
+        v-if="!props.titlesWithinImageWrapper && serviceData.title"
         :tag="heroConfig.tag ?? 'h2'"
         :font-size="heroConfig.fontSize ?? 'heading'"
         :text-content="[
@@ -48,15 +60,15 @@
           },
         ]"
       />
-      <div class="description">
+      <div v-if="serviceData.shortDescription" class="services-card-description">
         {{ serviceData.shortDescription }}
       </div>
-      <div v-if="hasFooter()" class="footer">
-        <div v-if="hasMeta()" class="meta">
-          <div class="meta-duration">
+      <div v-if="hasFooter()" class="services-card-footer">
+        <div v-if="hasMeta()" class="services-card-meta">
+          <div class="services-card-meta-duration">
             <slot name="duration" :service-data="serviceData">{{ durationText }}</slot>
           </div>
-          <div class="meta-price">
+          <div class="services-card-meta-price">
             <slot name="price" :service-data="serviceData">{{ priceText }}</slot>
           </div>
         </div>
@@ -141,7 +153,7 @@ watch(
     min-inline-size: 0;
 
     background-color: var(--services-card-background-color, transparent);
-    padding-block: var(--services-card-padding-block,);
+    padding-block: var(--services-card-padding-block, 0);
     padding-inline: var(--services-card-padding-inline, 0);
     border-radius: var(--services-card-border-radius, 0);
     border: var(--services-card-border-width, 1px) solid var(--services-card-border-colour, transparent);
@@ -170,11 +182,18 @@ watch(
           var(--services-card-background-color, transparent)
         );
         border-color: var(--services-card-border-colour-hover, var(--services-card-border-colour, transparent));
-        outline-color: var(--services-card-outline-colour-hover, transparent);
-        outline-offset: var(--services-card-outline-offset-hover, 0px);
+        outline-color: var(--services-card-outline-colour-hover, var(--services-card-outline-colour, transparent));
+        outline-offset: var(--services-card-outline-offset-hover, var(--services-card-outline-offset, 0px));
         transform: var(--services-card-transform-hover, none);
       }
 
+      &:focus-visible {
+        outline-color: var(
+          --services-card-outline-colour-focus,
+          var(--services-card-outline-colour-hover, var(--theme-ring, currentColor))
+        );
+      }
+
       @media (prefers-reduced-motion: reduce) {
         &:hover,
         &:focus-visible {
@@ -183,16 +202,16 @@ watch(
       }
     }
 
-    .image-wrapper {
-      aspect-ratio: var(--image-wrapper-aspect-ratio, 3/4);
-      border-radius: var(--image-wrapper-border-radius, 8px);
+    .services-card-image-wrapper {
+      aspect-ratio: var(--services-card-image-aspect-ratio, 3/4);
+      border-radius: var(--services-card-image-border-radius, 8px);
       overflow: hidden;
       isolation: isolate;
       min-inline-size: 0;
-      padding-block: var(--image-wrapper-padding-block, 0 0);
-      padding-inline: var(--image-wrapper-padding-inline, 0 0);
+      padding-block: var(--services-card-image-padding-block, 0 0);
+      padding-inline: var(--services-card-image-padding-inline, 0 0);
 
-      .image {
+      .services-card-image {
         display: block;
         object-fit: cover;
         width: 100%;
@@ -200,107 +219,114 @@ watch(
         transition: transform 0.3s ease-in-out;
       }
 
-      &:hover .image {
-        transform: var(--image-wrapper-border-image-zoom-transform, scale(1.05));
+      &:hover .services-card-image {
+        transform: var(--services-card-image-zoom-transform, scale(1.05));
       }
 
-      .image-wrapper-details {
-        --_scrim-colour: var(--image-wrapper-details-scrim-colour, #000);
+      .services-card-image-details {
+        --_scrim-colour: var(--services-card-image-details-scrim-colour, #000);
 
         position: relative;
         z-index: 1;
         display: grid;
         grid-auto-flow: row;
         align-content: end;
-        gap: var(--image-wrapper-details-gap, 0.5rem);
+        gap: var(--services-card-image-details-gap, 0.5rem);
         height: 100%;
-        color: var(--image-wrapper-details-text-colour, #fff);
-        background: var(--image-wrapper-details-scrim, linear-gradient(to top, rgb(0 0 0 / 0.75), transparent 70%));
+        overflow-wrap: anywhere;
+        color: var(--services-card-image-details-text-colour, #fff);
+        background: var(--services-card-image-details-scrim, linear-gradient(to top, rgb(0 0 0 / 0.75), transparent 70%));
 
         @supports (color: color-mix(in oklab, red, transparent)) {
           background: var(
-            --image-wrapper-details-scrim,
+            --services-card-image-details-scrim,
             linear-gradient(to top, color-mix(in oklab, var(--_scrim-colour) 75%, transparent), transparent 70%)
           );
         }
 
         @supports (color: contrast-color(red)) {
-          color: var(--image-wrapper-details-text-colour, contrast-color(var(--_scrim-colour)));
+          color: var(--services-card-image-details-text-colour, contrast-color(var(--_scrim-colour)));
         }
 
         .eyebrow-text {
           --eyebrow-text-bg-img: none;
-          color: var(--image-wrapper-details-eyebrow-text-colour, inherit);
-          padding-block: var(--image-wrapper-details-eyebrow-text-padding-block, 0);
-          padding-inline: var(--image-wrapper-details-eyebrow-text-padding-inline, 2.2rem);
+          color: var(--services-card-image-details-eyebrow-colour, inherit);
+          padding-block: var(--services-card-image-details-eyebrow-padding-block, 0);
+          padding-inline: var(--services-card-image-details-eyebrow-padding-inline, 2.2rem);
         }
 
         .hero-text {
-          padding-block: var(--image-wrapper-details-hero-text-padding-block, 1.2rem 2.2rem);
-          padding-inline: var(--image-wrapper-details-hero-text-padding-inline, 2.2rem);
+          padding-block: var(--services-card-image-details-title-padding-block, 1.2rem 2.2rem);
+          padding-inline: var(--services-card-image-details-title-padding-inline, 2.2rem);
         }
       }
     }
 
-    .details-wrapper {
+    .services-card-details {
       display: flex;
       flex-direction: column;
-      gap: var(--details-wrapper-grid-gap, 1rem);
+      gap: var(--services-card-details-gap, 1rem);
       min-inline-size: 0;
+      overflow-wrap: anywhere;
 
-      padding-block: var(--details-wrapper-padding-block, 0);
-      padding-inline: var(--details-wrapper-padding-inline, 0);
+      padding-block: var(--services-card-details-padding-block, 0);
+      padding-inline: var(--services-card-details-padding-inline, 0);
 
       .eyebrow-text {
-        padding-block: var(--eyebrow-text-padding-block, 0.8rem 0);
+        padding-block: var(--services-card-eyebrow-padding-block, 0.8rem 0);
       }
 
       .hero-text {
-        padding-block: var(--hero-text-padding-block, 1.2rem 1rem);
+        padding-block: var(--services-card-title-padding-block, 1.2rem 1rem);
       }
 
-      .description {
-        color: var(--description-text-colour, var(--colour-text-secondary));
-        font-weight: var(--description-font-weight, inherit);
-        line-height: var(--description-line-height, 1.4);
-        padding-block: var(--description-padding-block, 0 0);
+      .services-card-description {
+        color: var(--services-card-description-text-colour, inherit);
+        font-weight: var(--services-card-description-font-weight, inherit);
+        line-height: var(--services-card-description-line-height, 1.4);
+        padding-block: var(--services-card-description-padding-block, 0 0);
 
         display: -webkit-box;
         -webkit-box-orient: vertical;
         overflow: hidden;
-        -webkit-line-clamp: var(--description-line-clamp, 100);
-        line-clamp: var(--description-line-clamp, 100);
-        text-overflow: ellipsis;
+        -webkit-line-clamp: var(--services-card-description-line-clamp, none);
+        line-clamp: var(--services-card-description-line-clamp, none);
       }
 
-      .footer {
+      .services-card-footer {
         display: flex;
         flex-direction: column;
-        gap: var(--footer-wrapper-grid-gap, 1rem);
+        gap: var(--services-card-footer-gap, 1rem);
         margin-block-start: auto;
         min-inline-size: 0;
-        padding-block: var(--footer-padding-block, 0);
+        padding-block: var(--services-card-footer-padding-block, 0);
 
-        .meta {
+        .services-card-meta {
           display: flex;
+          flex-wrap: wrap;
           align-items: center;
           justify-content: space-between;
-          gap: 1rem;
-          padding-block: var(--meta-padding-block, 1.6rem 0);
-          border-block-start: 1px solid var(--meta-border-colour, var(--theme-border));
-          color: var(--meta-text-colour, inherit);
-          font-size: var(--meta-font-size, 1.4rem);
-          letter-spacing: var(--meta-letter-spacing, inherit);
-          text-transform: var(--meta-text-transform, uppercase);
-
-          .meta-duration {
-            color: var(--meta-duration-text-colour, inherit);
-            font-weight: var(--meta-duration-font-weight, 500);
+          gap: var(--services-card-meta-gap, 1rem);
+          padding-block: var(--services-card-meta-padding-block, 1.6rem 0);
+          border-block-start: 1px solid var(--services-card-meta-border-colour, var(--theme-border));
+          color: var(--services-card-meta-text-colour, inherit);
+          font-size: var(--services-card-meta-font-size, 1.4rem);
+          letter-spacing: var(--services-card-meta-letter-spacing, inherit);
+          text-transform: var(--services-card-meta-text-transform, uppercase);
+
+          .services-card-meta-duration,
+          .services-card-meta-price {
+            min-inline-size: 0;
+          }
+
+          .services-card-meta-duration {
+            color: var(--services-card-meta-duration-text-colour, inherit);
+            font-weight: var(--services-card-meta-duration-font-weight, 500);
           }
 
-          .meta-price {
-            color: var(--meta-price-text-colour, inherit);
-            font-weight: var(--meta-price-font-weight, 700);
+          .services-card-meta-price {
+            color: var(--services-card-meta-price-text-colour, inherit);
+            font-weight: var(--services-card-meta-price-font-weight, 700);
           }
         }
       }