@riverbankcms/sdk 0.129.1 → 0.130.2

package/dist/styles/index.css

@@ -537,6 +537,9 @@
       .rb-md-grid-cols-4 {
         grid-template-columns: repeat(4, minmax(0, 1fr));
       }
+      .rb-md-col-span-2 {
+        grid-column: span 2 / span 2;
+      }
     }
   }
   @media (min-width: 1024px) {
@@ -550,6 +553,9 @@
       .rb-lg-grid-cols-4 {
         grid-template-columns: repeat(4, minmax(0, 1fr));
       }
+      .rb-lg-grid-cols-5 {
+        grid-template-columns: repeat(5, minmax(0, 1fr));
+      }
       .rb-lg-w-3\/4 {
         width: 75%;
       }
@@ -565,6 +571,9 @@
       .rb-lg-col-span-4 {
         grid-column: span 4 / span 4;
       }
+      .rb-lg-col-span-5 {
+        grid-column: span 5 / span 5;
+      }
     }
   }
   @media (min-width: 1280px) {
@@ -2879,7 +2888,7 @@
     overflow-anchor: none;
   }
 
-  /* Base padding for horizontal variants (classic, transparent) */
+  /* Base padding for horizontal variants (classic) */
   :where(.theme-scope) .rb-header-layout {
     padding-top: 1rem;
     padding-bottom: 1rem;
@@ -3430,6 +3439,127 @@
   margin-inline: 0;
 }
 
+/* The panel paints its own opaque surface, so it also has to break the button
+ * colour contract it inherits. An enclosing section that sits on a brand band
+ * publishes `--rb-action-*` variables resolved against *that* band — on Anna's
+ * therapy page a ghost primary: transparent background, white label. Those
+ * variables inherit, so without this reset a Continue button inside the light
+ * form panel renders white-on-white and only appears on hover.
+ *
+ * Resetting to `initial` sends each button back to the generated fallback in
+ * its own rule (`var(--rb-action-…, rgb(var(--tb-primary)))`), which is the
+ * theme's standard button resolved against a normal surface — correct here,
+ * because this panel *is* a normal surface.
+ *
+ * Mirrors `contextualButtonSurfaceResetStyles()` in theme-core/buttons; the
+ * pairing is pinned by registration-surface-action-reset.test.ts. */
+:where(.theme-scope) :where([data-block="event-registration"], [data-block="course-registration"], [data-block="appointment-booking"]) .rb-reg-surface {
+  --rb-action-primary-base-background-color: initial;
+  --rb-action-primary-base-background-image: initial;
+  --rb-action-primary-base-color: initial;
+  --rb-action-primary-hover-background-color: initial;
+  --rb-action-primary-hover-background-image: initial;
+  --rb-action-primary-hover-color: initial;
+  --rb-action-primary-focus-background-color: initial;
+  --rb-action-primary-focus-background-image: initial;
+  --rb-action-primary-focus-color: initial;
+  --rb-action-primary-active-background-color: initial;
+  --rb-action-primary-active-background-image: initial;
+  --rb-action-primary-active-color: initial;
+  --rb-action-primary-disabled-background-color: initial;
+  --rb-action-primary-disabled-background-image: initial;
+  --rb-action-primary-disabled-color: initial;
+  --rb-action-primary-base-outline: initial;
+  --rb-action-primary-base-outline-offset: initial;
+  --rb-action-primary-focus-outline: initial;
+  --rb-action-primary-focus-outline-offset: initial;
+  --rb-action-primary-focus-box-shadow: initial;
+
+  --rb-action-secondary-base-background-color: initial;
+  --rb-action-secondary-base-background-image: initial;
+  --rb-action-secondary-base-color: initial;
+  --rb-action-secondary-hover-background-color: initial;
+  --rb-action-secondary-hover-background-image: initial;
+  --rb-action-secondary-hover-color: initial;
+  --rb-action-secondary-focus-background-color: initial;
+  --rb-action-secondary-focus-background-image: initial;
+  --rb-action-secondary-focus-color: initial;
+  --rb-action-secondary-active-background-color: initial;
+  --rb-action-secondary-active-background-image: initial;
+  --rb-action-secondary-active-color: initial;
+  --rb-action-secondary-disabled-background-color: initial;
+  --rb-action-secondary-disabled-background-image: initial;
+  --rb-action-secondary-disabled-color: initial;
+  --rb-action-secondary-base-outline: initial;
+  --rb-action-secondary-base-outline-offset: initial;
+  --rb-action-secondary-focus-outline: initial;
+  --rb-action-secondary-focus-outline-offset: initial;
+  --rb-action-secondary-focus-box-shadow: initial;
+
+  --rb-action-outline-base-background-color: initial;
+  --rb-action-outline-base-background-image: initial;
+  --rb-action-outline-base-color: initial;
+  --rb-action-outline-hover-background-color: initial;
+  --rb-action-outline-hover-background-image: initial;
+  --rb-action-outline-hover-color: initial;
+  --rb-action-outline-focus-background-color: initial;
+  --rb-action-outline-focus-background-image: initial;
+  --rb-action-outline-focus-color: initial;
+  --rb-action-outline-active-background-color: initial;
+  --rb-action-outline-active-background-image: initial;
+  --rb-action-outline-active-color: initial;
+  --rb-action-outline-disabled-background-color: initial;
+  --rb-action-outline-disabled-background-image: initial;
+  --rb-action-outline-disabled-color: initial;
+  --rb-action-outline-base-outline: initial;
+  --rb-action-outline-base-outline-offset: initial;
+  --rb-action-outline-focus-outline: initial;
+  --rb-action-outline-focus-outline-offset: initial;
+  --rb-action-outline-focus-box-shadow: initial;
+
+  --rb-action-ghost-base-background-color: initial;
+  --rb-action-ghost-base-background-image: initial;
+  --rb-action-ghost-base-color: initial;
+  --rb-action-ghost-hover-background-color: initial;
+  --rb-action-ghost-hover-background-image: initial;
+  --rb-action-ghost-hover-color: initial;
+  --rb-action-ghost-focus-background-color: initial;
+  --rb-action-ghost-focus-background-image: initial;
+  --rb-action-ghost-focus-color: initial;
+  --rb-action-ghost-active-background-color: initial;
+  --rb-action-ghost-active-background-image: initial;
+  --rb-action-ghost-active-color: initial;
+  --rb-action-ghost-disabled-background-color: initial;
+  --rb-action-ghost-disabled-background-image: initial;
+  --rb-action-ghost-disabled-color: initial;
+  --rb-action-ghost-base-outline: initial;
+  --rb-action-ghost-base-outline-offset: initial;
+  --rb-action-ghost-focus-outline: initial;
+  --rb-action-ghost-focus-outline-offset: initial;
+  --rb-action-ghost-focus-box-shadow: initial;
+
+  --rb-action-accent-base-background-color: initial;
+  --rb-action-accent-base-background-image: initial;
+  --rb-action-accent-base-color: initial;
+  --rb-action-accent-hover-background-color: initial;
+  --rb-action-accent-hover-background-image: initial;
+  --rb-action-accent-hover-color: initial;
+  --rb-action-accent-focus-background-color: initial;
+  --rb-action-accent-focus-background-image: initial;
+  --rb-action-accent-focus-color: initial;
+  --rb-action-accent-active-background-color: initial;
+  --rb-action-accent-active-background-image: initial;
+  --rb-action-accent-active-color: initial;
+  --rb-action-accent-disabled-background-color: initial;
+  --rb-action-accent-disabled-background-image: initial;
+  --rb-action-accent-disabled-color: initial;
+  --rb-action-accent-base-outline: initial;
+  --rb-action-accent-base-outline-offset: initial;
+  --rb-action-accent-focus-outline: initial;
+  --rb-action-accent-focus-outline-offset: initial;
+  --rb-action-accent-focus-box-shadow: initial;
+}
+
 /* Selectable option card */
 :where(.theme-scope) :where([data-block="event-registration"], [data-block="course-registration"], [data-block="appointment-booking"]) .rb-option-card {
   position: relative;
@@ -7974,7 +8104,8 @@
 :where(.theme-scope) .shop--register .shop__card-name,
 :where(.theme-scope) .shop--register .shop__card-price,
 :where(.theme-scope) .shop--register .shop__card-details,
-:where(.theme-scope) .shop--register .shop__cta {
+:where(.theme-scope) .shop--register .shop__cta,
+:where(.theme-scope) .shop--register .shop__purchase-unavailable {
   margin: 0;
 }
 
@@ -8010,7 +8141,8 @@
   font-size: 0.86rem;
 }
 
-:where(.theme-scope) .shop--register .shop__cta {
+:where(.theme-scope) .shop--register .shop__cta,
+:where(.theme-scope) .shop--register .shop__purchase-unavailable {
   grid-column: 4;
   grid-row: 1;
   align-self: center;
@@ -8041,7 +8173,8 @@
     grid-row: 2;
   }
 
-  :where(.theme-scope) .shop--register .shop__cta {
+  :where(.theme-scope) .shop--register .shop__cta,
+  :where(.theme-scope) .shop--register .shop__purchase-unavailable {
     grid-column: 1 / -1;
     grid-row: 3;
     justify-self: start;
@@ -8133,6 +8266,13 @@
   align-self: flex-start;
 }
 
+:where(.theme-scope) .shop__purchase-unavailable {
+  margin: auto 0 0;
+  color: var(--rb-surface-supporting-color, rgb(var(--tb-mutedText)));
+  font-size: 0.875rem;
+  line-height: 1.4;
+}
+
 /* Responsive grid */
 @media (max-width: 768px) {
   :where(.theme-scope) .shop__products--grid {
@@ -9068,13 +9208,6 @@
   border-radius: var(--rb-block-radius);
 }
 
-:where(.theme-scope) :where([data-block="testimonials"]) .rb-testimonial-card.rb-card-treatment-accent-quote {
-  border: 0;
-  border-left: 5px solid rgb(var(--tb-secondary));
-  border-radius: 0 calc(var(--rb-block-radius) * 3) 0 0;
-  color: rgb(var(--tb-primaryForeground));
-}
-
 :where(.theme-scope) :where([data-block="testimonials"]) .rb-testimonial-quote {
   display: var(--rb-testimonial-quote-display, block);
   font-family: var(--rb-testimonial-quote-font, inherit);
@@ -9085,54 +9218,6 @@
   color: var(--rb-testimonial-quote-color, rgb(var(--tb-primary)));
 }
 
-:where(.theme-scope) :where([data-block="testimonials"]) .rb-card-treatment-accent-quote .rb-testimonial-quote {
-  color: rgb(var(--tb-secondary));
-  font-size: calc(var(--rb-testimonial-quote-size) * 1.25);
-  opacity: 1;
-}
-
-/* Open editorial testimonial card: boxless, with a hairline rule before the
- * attribution, an accent ring on the avatar, and comfortable prose. The quote
- * mark itself is owned by the site-style quote treatment (see the
- * --rb-testimonial-quote-* vars), not by these rules.
- *
- * `editorial-open` is the current non-carded look; `editorial-serif-quote` is
- * retained for content saved before the decomposition. */
-:where(.theme-scope) :where([data-block="testimonials"]) .rb-testimonial-card.rb-card-treatment-editorial-open,
-:where(.theme-scope) :where([data-block="testimonials"]) .rb-testimonial-card.rb-card-treatment-editorial-serif-quote {
-  background: transparent;
-  border: 0;
-  border-radius: 0;
-  padding: 0.25rem clamp(0.5rem, 1.5vw, 1.5rem);
-}
-
-/* styledCard always renders an inner white rb-bg-surface fill layer; a boxless
- * card must clear it so the section band shows through (otherwise: white box). */
-:where(.theme-scope) :where([data-block="testimonials"]) .rb-card-treatment-editorial-open > .rb-bg-surface,
-:where(.theme-scope) :where([data-block="testimonials"]) .rb-card-treatment-editorial-serif-quote > .rb-bg-surface {
-  background: transparent;
-}
-
-:where(.theme-scope) :where([data-block="testimonials"]) .rb-card-treatment-editorial-open .rb-prose,
-:where(.theme-scope) :where([data-block="testimonials"]) .rb-card-treatment-editorial-serif-quote .rb-prose {
-  font-size: 1.0625rem;
-  line-height: 1.7;
-}
-
-:where(.theme-scope) :where([data-block="testimonials"]) .rb-card-treatment-editorial-open .rb-testimonial-attribution,
-:where(.theme-scope) :where([data-block="testimonials"]) .rb-card-treatment-editorial-serif-quote .rb-testimonial-attribution {
-  margin-top: 1.25rem;
-  padding-top: 1.25rem;
-  border-top: 1px solid rgba(var(--tb-border), 0.75);
-}
-
-:where(.theme-scope) :where([data-block="testimonials"]) .rb-card-treatment-editorial-open .rb-testimonial-avatar,
-:where(.theme-scope) :where([data-block="testimonials"]) .rb-card-treatment-editorial-serif-quote .rb-testimonial-avatar {
-  box-shadow:
-    0 0 0 2px rgb(var(--tb-surface)),
-    0 0 0 4px rgba(var(--tb-primary), 0.3);
-}
-
 
 /* Split grid: title column + cards. On desktop the title takes one quarter and
  * the cards fill the remaining three quarters (so title + 3 cards each read as
@@ -11586,282 +11671,6 @@
 }
 
 
-/* =============================================================================
- * Shared: Card treatments
- *
- * Visual treatments referenced from `_cardStyles.treatment` (see
- * cardStylesOverrideSchema). Class names are emitted by the boxStyles
- * transform in @riverbankcms/blocks.
- *
- * Also contains feature-card media/padding behaviour shared by all looks:
- * - card images bleed to the card edges (flush photo tops)
- * - card-level padding replaces the content stack's fallback padding so the
- *   two never stack up
- * ============================================================================= */
-
-/* --- Feature card media + padding behaviour (all looks) -------------------- */
-
-/*
- * When a look gives the card real padding (rb-container-pad-*), the image
- * bleeds to the card edges and the inner content stack drops its fallback
- * padding so insets don't double up.
- */
-:where(.theme-scope) .rb-feature-card[class*="rb-container-pad-"]:not(.rb-container-pad-none) > .rb-feature-card-media-frame {
-  width: calc(100% + 2 * var(--rb-card-pad, 0rem));
-  max-width: none;
-  margin: calc(-1 * var(--rb-card-pad, 0rem)) calc(-1 * var(--rb-card-pad, 0rem)) 0;
-}
-
-:where(.theme-scope) .rb-feature-card[class*="rb-container-pad-"]:not(.rb-container-pad-none) > .rb-feature-card-media-frame + .rb-feature-card-content {
-  margin-top: 1.4rem;
-}
-
-:where(.theme-scope) .rb-feature-card[class*="rb-container-pad-"]:not(.rb-container-pad-none) > .rb-feature-card-content {
-  padding: 0;
-}
-
-/* --- Soft panel ------------------------------------------------------------ */
-
-:where(.theme-scope) .rb-card-treatment-soft-panel {
-  transition: transform 250ms ease, box-shadow 250ms ease;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  :where(.theme-scope) .rb-card-treatment-soft-panel:hover {
-    transform: translateY(-3px);
-    box-shadow: 0 0.875rem 1.875rem rgba(var(--tb-shadow, 0 0 0), 0.1);
-  }
-}
-
-:where(.theme-scope) .rb-card-treatment-soft-panel .cta-row .button-ghost {
-  padding-inline: 0;
-}
-
-/* --- Editorial rule --------------------------------------------------------- */
-
-/*
- * Boxless open column: no background, no border box, a short brand rule
- * sitting on a full-width hairline at the top of the column.
- */
-:where(.theme-scope) .rb-card-treatment-editorial-rule {
-  margin-top: 1rem;
-  border-top: 1px solid
-    color-mix(in oklab, rgb(var(--tb-border, 229 231 235)), transparent 25%);
-}
-
-:where(.theme-scope) .rb-card-treatment-editorial-rule > .rb-bg-surface {
-  background: transparent;
-}
-
-:where(.theme-scope) .rb-card-treatment-editorial-rule::before {
-  content: "";
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 2.75rem;
-  height: 2px;
-  background: rgb(var(--tb-primary, 0 0 0));
-}
-
-:where(.theme-scope) .rb-card-treatment-editorial-rule > .rb-feature-card-media-frame {
-  margin-top: 1.6rem;
-  border-radius: calc(var(--rb-block-radius, 0.75rem) * 0.5);
-}
-
-:where(.theme-scope) .rb-feature-card > .rb-bg-surface,
-:where(.theme-scope) .rb-feature-card > .rb-feature-card-media-frame {
-  border-start-start-radius: inherit;
-  border-start-end-radius: inherit;
-}
-
-/* --- Editorial diptych + pathways ----------------------------------------- */
-
-:where(.theme-scope) .rb-feature-cards-heading--editorial {
-  margin-inline: 0;
-  text-align: left;
-}
-
-:where(.theme-scope) .rb-feature-cards-eyebrow {
-  margin: 0;
-  color: rgb(var(--tb-accent));
-  font-size: 0.72rem;
-  font-weight: 600;
-  letter-spacing: 0.14em;
-  text-transform: uppercase;
-}
-
-:where(.theme-scope) .rb-feature-cards-grid--editorial-diptych {
-  grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
-  align-items: stretch;
-}
-
-:where(.theme-scope) .rb-feature-cards-grid--editorial-pathways {
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  align-items: start;
-}
-
-:where(.theme-scope) .rb-feature-cards-grid:is(
-  .rb-feature-cards-grid--editorial-diptych,
-  .rb-feature-cards-grid--editorial-pathways
-) .rb-feature-card {
-  border: 0;
-  box-shadow: none;
-  height: auto;
-  min-width: 0;
-}
-
-:where(.theme-scope) .rb-feature-cards-grid:is(
-  .rb-feature-cards-grid--editorial-diptych,
-  .rb-feature-cards-grid--editorial-pathways
-) .rb-feature-card[data-surface-role="open"] > .rb-bg-surface {
-  background: transparent;
-}
-
-:where(.theme-scope) .rb-feature-cards-grid:is(
-  .rb-feature-cards-grid--editorial-diptych,
-  .rb-feature-cards-grid--editorial-pathways
-) .rb-feature-card[data-surface-role="open"] > .rb-feature-card-content {
-  padding-inline: 0;
-}
-
-:where(.theme-scope) .rb-feature-cards-grid--editorial-pathways .rb-feature-card > .rb-bg-surface {
-  background: transparent;
-}
-
-:where(.theme-scope) .rb-feature-cards-grid--editorial-pathways .rb-feature-card > .rb-feature-card-content {
-  padding-inline: 0;
-}
-
-:where(.theme-scope) .rb-feature-cards-grid--editorial-diptych .rb-feature-card[data-surface-role="panel"] {
-  color: rgb(var(--tb-onPrimary));
-  --rb-surface-text-color: rgb(var(--tb-onPrimary));
-  --rb-surface-heading-color: rgb(var(--tb-onPrimary));
-  --rb-surface-link-color: rgb(var(--tb-onPrimary));
-  --rb-surface-supporting-color: color-mix(in oklab, rgb(var(--tb-onPrimary)), transparent 18%);
-}
-
-:where(.theme-scope) .rb-feature-cards-grid--editorial-diptych .rb-feature-card[data-surface-role="panel"] > .rb-bg-surface {
-  background: rgb(var(--tb-primary));
-  border-radius: inherit;
-}
-
-:where(.theme-scope) .rb-feature-cards-grid--editorial-diptych .rb-feature-card[data-surface-role="panel"] > .rb-feature-card-media-frame {
-  width: calc(100% - 2.5rem);
-  margin: 1.25rem 1.25rem 0;
-  border-radius: calc(var(--rb-block-radius, 0.75rem) * 0.55);
-}
-
-:where(.theme-scope) .rb-feature-cards-grid--editorial-pathways .rb-feature-card-content {
-  padding-top: 1.35rem;
-}
-
-@media (min-width: 768px) {
-  :where(.theme-scope) .rb-feature-cards-grid--editorial-diptych .rb-feature-card[data-surface-role="panel"] {
-    margin-top: clamp(2rem, 5vw, 4.5rem);
-  }
-
-  :where(.theme-scope) .rb-feature-cards-grid--editorial-pathways .rb-feature-card + .rb-feature-card {
-    border-left: 1px solid color-mix(in oklab, currentColor, transparent 82%);
-    padding-left: clamp(1.5rem, 4vw, 4rem);
-  }
-}
-
-@media (max-width: 767px) {
-  :where(.theme-scope) .rb-feature-cards-grid:is(
-    .rb-feature-cards-grid--editorial-diptych,
-    .rb-feature-cards-grid--editorial-pathways
-  ) {
-    grid-template-columns: minmax(0, 1fr);
-  }
-}
-
-:where(.theme-scope) .rb-card-treatment-editorial-rule > .rb-feature-card-content {
-  padding: 1.6rem 0 0.25rem;
-}
-
-:where(.theme-scope) .rb-card-treatment-editorial-rule .cta-row .button-ghost {
-  padding-inline: 0;
-}
-
-/* --- Colour-blocked --------------------------------------------------------- */
-
-/*
- * Bold, flat cards that each take a different palette colour by position,
- * cycled across the grid, with a staggered vertical offset on wider screens.
- * The background layer (`.rb-bg-surface`) is recoloured per card; the card's
- * text colour is set to the matching on-colour so content stays readable.
- */
-:where(.theme-scope) .rb-card-treatment-color-blocked {
-  box-shadow: none;
-}
-
-/* Per-card colour cycle. The `on*` colours are always derived by the palette
- * (expandPalette emits onSurface/onSecondary/onPrimary), so no fallback. */
-:where(.theme-scope) .rb-card-treatment-color-blocked:nth-child(3n + 1) > .rb-bg-surface {
-  background: rgb(var(--tb-surface));
-}
-:where(.theme-scope) .rb-card-treatment-color-blocked:nth-child(3n + 1) {
-  background: rgb(var(--tb-surface));
-  color: rgb(var(--tb-onSurface));
-  --rb-surface-text-color: rgb(var(--tb-onSurface));
-  --rb-surface-heading-color: rgb(var(--tb-onSurface));
-  --rb-surface-link-color: rgb(var(--tb-onSurface));
-  --rb-surface-supporting-color: rgb(var(--tb-onSurface));
-}
-
-:where(.theme-scope) .rb-card-treatment-color-blocked:nth-child(3n + 2) > .rb-bg-surface {
-  background: rgb(var(--tb-secondary));
-}
-:where(.theme-scope) .rb-card-treatment-color-blocked:nth-child(3n + 2) {
-  background: rgb(var(--tb-secondary));
-  color: rgb(var(--tb-onSecondary));
-  --rb-surface-text-color: rgb(var(--tb-onSecondary));
-  --rb-surface-heading-color: rgb(var(--tb-onSecondary));
-  --rb-surface-link-color: rgb(var(--tb-onSecondary));
-  --rb-surface-supporting-color: rgb(var(--tb-onSecondary));
-}
-
-:where(.theme-scope) .rb-card-treatment-color-blocked:nth-child(3n + 3) > .rb-bg-surface {
-  background: rgb(var(--tb-primary));
-}
-:where(.theme-scope) .rb-card-treatment-color-blocked:nth-child(3n + 3) {
-  background: rgb(var(--tb-primary));
-  color: rgb(var(--tb-onPrimary));
-  --rb-surface-text-color: rgb(var(--tb-onPrimary));
-  --rb-surface-heading-color: rgb(var(--tb-onPrimary));
-  --rb-surface-link-color: rgb(var(--tb-onPrimary));
-  --rb-surface-supporting-color: rgb(var(--tb-onPrimary));
-}
-
-/* Keep the intended visual hierarchy; the body color itself now resolves via
- * the nearest surface provider instead of requiring an inline override. */
-:where(.theme-scope) .rb-card-treatment-color-blocked .rb-feature-card-body {
-  opacity: 0.9;
-}
-
-/* The number marker defaults to the brand accent, which collides with the
- * primary-coloured card in the cycle. On colour-blocked cards use the card's
- * own on-colour (the palette guarantees it's legible on that background) and a
- * faint tint of it for the badge, so the number always contrasts. */
-:where(.theme-scope) .rb-card-treatment-color-blocked .rb-feature-card-number-zone {
-  color: inherit;
-  background-color: color-mix(in oklab, currentColor, transparent 88%);
-}
-
-/* Staggered offset: drop the middle column on wider screens. Scoped to a 3-up
- * grid (`.rb-grid-cols-3`) so 2-/4-column grids don't get a misaligned stagger;
- * the colour cycle still reads as a diagonal at any column count. */
-@media (min-width: 768px) {
-  :where(.theme-scope) .rb-grid-cols-3 .rb-card-treatment-color-blocked:nth-child(3n + 2) {
-    margin-top: 2.75rem;
-    /* Override the card's `h-full` so the grid's stretch shrinks the card by the
-     * margin (a genuinely shorter card) instead of keeping full height and
-     * overflowing the section, which clips the rounded bottom corners. */
-    height: auto;
-  }
-}
-
-
 :where(.theme-scope) [data-block="intro"][data-block-composition="portrait-bio"][data-block-variant="media-copy"] .rb-intro-media-wrap {
   max-width: min(100%, 24rem);
   margin-inline: auto;
@@ -12366,8 +12175,9 @@
   border-radius: var(--rb-block-radius, 0.75rem);
 }
 
-/* Framed programme: a close-set family of inset cards on a semantic depth
- * section. The itemSurface recipe supplies each complete surface provider. */
+/* Framed programme: a close-set family of cards on a semantic depth section.
+ * The Look asks for the `alternative` card role; the site style's card system
+ * supplies the surface. */
 :where(.theme-scope)
   [data-block="feature-cards"][data-block-composition="framed-programme"]
   .rb-feature-cards-grid {
@@ -12398,6 +12208,131 @@
   }
 }
 
+/* --- Feature card media + padding behaviour (all looks) -------------------- */
+
+:where(.theme-scope) .rb-feature-card[class*="rb-container-pad-"]:not(.rb-container-pad-none) > .rb-feature-card-media-frame {
+  width: calc(100% + 2 * var(--rb-card-pad, 0rem));
+  max-width: none;
+  margin: calc(-1 * var(--rb-card-pad, 0rem)) calc(-1 * var(--rb-card-pad, 0rem)) 0;
+}
+
+:where(.theme-scope) .rb-feature-card[class*="rb-container-pad-"]:not(.rb-container-pad-none) > .rb-feature-card-media-frame + .rb-feature-card-content {
+  margin-top: 1.4rem;
+}
+
+:where(.theme-scope) .rb-feature-card[class*="rb-container-pad-"]:not(.rb-container-pad-none) > .rb-feature-card-content {
+  padding: 0;
+}
+
+:where(.theme-scope) .rb-feature-card > .rb-bg-surface,
+:where(.theme-scope) .rb-feature-card > .rb-feature-card-media-frame {
+  border-start-start-radius: inherit;
+  border-start-end-radius: inherit;
+}
+
+/* --- Editorial diptych + pathways ----------------------------------------- */
+
+:where(.theme-scope) .rb-feature-cards-heading--editorial {
+  margin-inline: 0;
+  text-align: left;
+}
+
+:where(.theme-scope) .rb-feature-cards-eyebrow {
+  margin: 0;
+  color: rgb(var(--tb-accent));
+  font-size: 0.72rem;
+  font-weight: 600;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+}
+
+:where(.theme-scope) .rb-feature-cards-grid--editorial-diptych {
+  grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
+  align-items: stretch;
+}
+
+:where(.theme-scope) .rb-feature-cards-grid--editorial-pathways {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  align-items: start;
+}
+
+:where(.theme-scope) .rb-feature-cards-grid:is(
+  .rb-feature-cards-grid--editorial-diptych,
+  .rb-feature-cards-grid--editorial-pathways
+) .rb-feature-card {
+  border: 0;
+  box-shadow: none;
+  height: auto;
+  min-width: 0;
+}
+
+:where(.theme-scope) .rb-feature-cards-grid:is(
+  .rb-feature-cards-grid--editorial-diptych,
+  .rb-feature-cards-grid--editorial-pathways
+) .rb-feature-card[data-surface-role="open"] > .rb-bg-surface {
+  background: transparent;
+}
+
+:where(.theme-scope) .rb-feature-cards-grid:is(
+  .rb-feature-cards-grid--editorial-diptych,
+  .rb-feature-cards-grid--editorial-pathways
+) .rb-feature-card[data-surface-role="open"] > .rb-feature-card-content {
+  padding-inline: 0;
+}
+
+:where(.theme-scope) .rb-feature-cards-grid--editorial-pathways .rb-feature-card > .rb-bg-surface {
+  background: transparent;
+}
+
+:where(.theme-scope) .rb-feature-cards-grid--editorial-pathways .rb-feature-card > .rb-feature-card-content {
+  padding-inline: 0;
+}
+
+/* Diptych filled panel: a composition over the `alternative` role's surface.
+   The 18% supporting alpha is accepted CSS-side — see issue 1297 mapping-table. */
+:where(.theme-scope) .rb-feature-cards-grid--editorial-diptych .rb-feature-card[data-surface-role="panel"] {
+  color: rgb(var(--tb-onPrimary));
+  --rb-surface-text-color: rgb(var(--tb-onPrimary));
+  --rb-surface-heading-color: rgb(var(--tb-onPrimary));
+  --rb-surface-link-color: rgb(var(--tb-onPrimary));
+  --rb-surface-supporting-color: color-mix(in oklab, rgb(var(--tb-onPrimary)), transparent 18%);
+}
+
+:where(.theme-scope) .rb-feature-cards-grid--editorial-diptych .rb-feature-card[data-surface-role="panel"] > .rb-bg-surface {
+  background: rgb(var(--tb-primary));
+  border-radius: inherit;
+}
+
+:where(.theme-scope) .rb-feature-cards-grid--editorial-diptych .rb-feature-card[data-surface-role="panel"] > .rb-feature-card-media-frame {
+  width: calc(100% - 2.5rem);
+  margin: 1.25rem 1.25rem 0;
+  border-radius: calc(var(--rb-block-radius, 0.75rem) * 0.55);
+}
+
+:where(.theme-scope) .rb-feature-cards-grid--editorial-pathways .rb-feature-card-content {
+  padding-top: 1.35rem;
+}
+
+@media (min-width: 768px) {
+  :where(.theme-scope) .rb-feature-cards-grid--editorial-diptych .rb-feature-card[data-surface-role="panel"] {
+    margin-top: clamp(2rem, 5vw, 4.5rem);
+  }
+
+  :where(.theme-scope) .rb-feature-cards-grid--editorial-pathways .rb-feature-card + .rb-feature-card {
+    border-left: 1px solid color-mix(in oklab, currentColor, transparent 82%);
+    padding-left: clamp(1.5rem, 4vw, 4rem);
+  }
+}
+
+@media (max-width: 767px) {
+  :where(.theme-scope) .rb-feature-cards-grid:is(
+    .rb-feature-cards-grid--editorial-diptych,
+    .rb-feature-cards-grid--editorial-pathways
+  ) {
+    grid-template-columns: minmax(0, 1fr);
+  }
+}
+
 
 /* =============================================================================
  * Offerings Preview composition Looks promoted from the Fran André treatment
@@ -12793,4 +12728,49 @@
   }
 }
 
+/* Open-editorial testimonials composition, selected by a Look
+ * (`composition: { kind: 'testimonials', treatment: 'open-editorial' }`).
+ *
+ * Two jobs. First, *boxless*: `styledCard` always renders an opaque
+ * `.rb-bg-surface` fill layer, so a testimonial with no card role has to clear
+ * it or it paints a white box on the section band (the same shape
+ * feature-card-compositions.css uses for `[data-surface-role="open"]`).
+ * Second, the composition proper: a hairline before the attribution, an accent
+ * ring on the avatar, comfortable prose.
+ *
+ * What is *not* here: whether the testimonial sits in a card (the Look's
+ * `cardRole`), how that card looks (the site style's card system), or the quote
+ * mark (the site style's quote treatment, via the --rb-testimonial-quote-* vars
+ * in testimonials.css).
+ *
+ * The block attribute is deliberately outside `:where()` so these rules outrank
+ * the card's own utility classes, matching the Look-keyed rules above. */
+:where(.theme-scope) [data-block="testimonials"][data-block-composition="open-editorial"] .rb-testimonial-card {
+  background: transparent;
+  border: 0;
+  border-radius: 0;
+  padding: 0.25rem clamp(0.5rem, 1.5vw, 1.5rem);
+}
+
+:where(.theme-scope) [data-block="testimonials"][data-block-composition="open-editorial"] .rb-testimonial-card > .rb-bg-surface {
+  background: transparent;
+}
+
+:where(.theme-scope) [data-block="testimonials"][data-block-composition="open-editorial"] .rb-prose {
+  font-size: 1.0625rem;
+  line-height: 1.7;
+}
+
+:where(.theme-scope) [data-block="testimonials"][data-block-composition="open-editorial"] .rb-testimonial-attribution {
+  margin-top: 1.25rem;
+  padding-top: 1.25rem;
+  border-top: 1px solid rgba(var(--tb-border), 0.75);
+}
+
+:where(.theme-scope) [data-block="testimonials"][data-block-composition="open-editorial"] .rb-testimonial-avatar {
+  box-shadow:
+    0 0 0 2px rgb(var(--tb-surface)),
+    0 0 0 4px rgba(var(--tb-primary), 0.3);
+}
+