@riverbankcms/sdk 0.138.0 → 0.139.0

package/dist/server/theme-bridge.mjs

@@ -16654,7 +16654,8 @@ const containerResponsiveThemeCss = `/*
     [data-block='event-listing'],
     [data-block='event-spotlight'],
     [data-block='event-calendar'],
-    [data-block='event-combined']
+    [data-block='event-combined'],
+    .event-card--catalogue
   )
   .event-card-media {
   height: var(--rb-event-card-media-height, 16rem);
@@ -16667,7 +16668,8 @@ const containerResponsiveThemeCss = `/*
     [data-block='event-listing'],
     [data-block='event-spotlight'],
     [data-block='event-calendar'],
-    [data-block='event-combined']
+    [data-block='event-combined'],
+    .event-card--catalogue
   )
   .event-card-image {
   width: 100%;
@@ -16680,12 +16682,12 @@ const containerResponsiveThemeCss = `/*
 
 :where(.theme-scope)
   :where(
-    [data-block='event-listing'],
-    [data-block='event-spotlight'],
-    [data-block='event-calendar'],
-    [data-block='event-combined']
+    [data-block='event-listing'] .event-card:hover,
+    [data-block='event-spotlight'] .event-card:hover,
+    [data-block='event-calendar'] .event-card:hover,
+    [data-block='event-combined'] .event-card:hover,
+    .event-card--catalogue:hover
   )
-  .event-card:hover
   .event-card-image {
   transform: scale(var(--rb-event-card-image-hover-scale, 1.08));
 }
@@ -18629,16 +18631,6 @@ const containerResponsiveThemeCss = `/*
   gap: 0.5rem;
 }
 
-/* Empty day message */
-:where(.theme-scope)
-  :where([data-block='event-calendar'])
-  .event-agenda-day-empty {
-  font-size: 0.875rem;
-  opacity: var(--ec-empty-opacity);
-  margin: 0;
-  padding: 0.25rem 0;
-}
-
 /* -----------------------------------------------------------------------------
  * Agenda Event Card
  * Rich event card for agenda view
@@ -18722,7 +18714,6 @@ const containerResponsiveThemeCss = `/*
   gap: 0.75rem;
   flex-wrap: wrap;
   font-size: 0.75rem;
-  opacity: 0.7;
 }
 
 :where(.theme-scope)
@@ -18735,9 +18726,8 @@ const containerResponsiveThemeCss = `/*
 
 :where(.theme-scope)
   :where([data-block='event-calendar'])
-  .event-agenda-card-icon {
+.event-agenda-card-icon {
   flex-shrink: 0;
-  opacity: 0.7;
 }
 
 :where(.theme-scope)
@@ -18754,11 +18744,199 @@ const containerResponsiveThemeCss = `/*
 
 :where(.theme-scope)
   :where([data-block='event-calendar'])
-  .event-agenda-card-capacity--full {
-  color: rgb(var(--tb-error, 239 68 68));
+.event-agenda-card-capacity--full {
+  font-weight: 600;
+}
+
+/*
+ * Agenda rows
+ *
+ * The modal keeps the original button card above. Published agenda rows use
+ * an article so their title and booking action can be separate, accessible
+ * links without nesting anchors.
+ */
+:where(.theme-scope)
+  :where([data-block='event-calendar'])
+  .event-agenda-card--agenda {
+  display: grid;
+  grid-template-columns: 0.25rem minmax(4.5rem, auto) minmax(0, 1fr) auto;
+  align-items: center;
+  column-gap: 1rem;
+  padding: 1rem;
+}
+
+:where(.theme-scope)
+  :where([data-block='event-calendar'])
+  .event-agenda-card--agenda
+  .event-agenda-card-indicator {
+  grid-column: 1;
+  grid-row: 1;
+}
+
+:where(.theme-scope)
+  :where([data-block='event-calendar'])
+  .event-agenda-card--agenda
+  > .event-agenda-card-time {
+  grid-column: 2;
+  grid-row: 1;
+  font-size: 0.875rem;
+  font-weight: 700;
+  opacity: 1;
+}
+
+:where(.theme-scope)
+  :where([data-block='event-calendar'])
+  .event-agenda-card--agenda
+  .event-agenda-card-content {
+  grid-column: 3;
+  grid-row: 1;
+  display: block;
+}
+
+:where(.theme-scope)
+  :where([data-block='event-calendar'])
+  .event-agenda-card--agenda
+  .event-agenda-card-title {
+  margin: 0;
+  font-size: 0.9375rem;
+  font-weight: 600;
+  line-height: 1.3;
+}
+
+:where(.theme-scope)
+  :where([data-block='event-calendar'])
+  .event-agenda-card--agenda
+  .event-agenda-card-title
+  a {
+  color: inherit;
+  text-decoration: none;
+}
+
+:where(.theme-scope)
+  :where([data-block='event-calendar'])
+  .event-agenda-card--agenda
+  .event-agenda-card-title
+  a:hover {
+  text-decoration: underline;
+  text-underline-offset: 0.15em;
+}
+
+:where(.theme-scope)
+  :where([data-block='event-calendar'])
+  .event-agenda-card--agenda
+  .event-agenda-card-details {
+  align-items: baseline;
+  gap: 0.25rem 0.6rem;
+  margin-top: 0.2rem;
+  font-size: 0.75rem;
+  line-height: 1.35;
+}
+
+:where(.theme-scope)
+  :where([data-block='event-calendar'])
+  .event-agenda-card--agenda
+  .event-agenda-card-location {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+}
+
+:where(.theme-scope)
+  :where([data-block='event-calendar'])
+  .event-agenda-card--agenda
+  .event-agenda-card-action {
+  grid-column: 4;
+  grid-row: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 0.5rem;
+  min-width: max-content;
+}
+
+:where(.theme-scope)
+  :where([data-block='event-calendar'])
+  .event-agenda-card--agenda
+  .event-agenda-card-price {
+  font-size: 0.875rem;
+  font-weight: 700;
   opacity: 1;
 }
 
+:where(.theme-scope)
+  :where([data-block='event-calendar'])
+  .event-agenda-card--agenda
+  .event-agenda-card-status {
+  font-size: 0.75rem;
+  font-weight: 600;
+  white-space: nowrap;
+}
+
+:where(.theme-scope)
+  :where([data-block='event-calendar'])
+  .event-agenda-card--agenda
+  .event-agenda-card-icon {
+  width: 0.875rem;
+  height: 0.875rem;
+}
+
+:where(.theme-scope)
+  :where([data-block='event-calendar'])
+  .event-agenda-empty {
+  margin: 0;
+  padding: 2rem 1rem;
+  text-align: center;
+  font-size: 0.875rem;
+  opacity: var(--ec-empty-opacity);
+}
+
+@container rb-site (max-width: 639px) {
+@scope ([data-rb-responsive-mode="container"]) to (:scope [data-rb-responsive-mode]) {
+:where(.theme-scope)
+    :where([data-block='event-calendar'])
+    .event-agenda-card--agenda {
+    grid-template-columns: minmax(4.25rem, auto) minmax(0, 1fr);
+    grid-template-areas:
+      'time content'
+      'action action';
+    align-items: start;
+    column-gap: 0.75rem;
+    row-gap: 0.65rem;
+  }
+
+  :where(.theme-scope)
+    :where([data-block='event-calendar'])
+    .event-agenda-card--agenda
+    .event-agenda-card-indicator {
+    display: none;
+  }
+
+  :where(.theme-scope)
+    :where([data-block='event-calendar'])
+    .event-agenda-card--agenda
+    > .event-agenda-card-time {
+    grid-area: time;
+  }
+
+  :where(.theme-scope)
+    :where([data-block='event-calendar'])
+    .event-agenda-card--agenda
+    .event-agenda-card-content {
+    grid-area: content;
+  }
+
+  :where(.theme-scope)
+    :where([data-block='event-calendar'])
+    .event-agenda-card--agenda
+    .event-agenda-card-action {
+    grid-area: action;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-end;
+  }
+}
+}
+
 /* -----------------------------------------------------------------------------
  * Week Timetable View
  * Time-grid layout for recurring class schedules
@@ -20484,8 +20662,9 @@ const containerResponsiveThemeCss = `/*
   border: 1px solid rgb(var(--tb-primary));
   border-radius: var(--rb-button-radius, 0.375rem);
   cursor: pointer;
-  transition: background-color var(--rb-block-transition, 150ms) ease,
-              color var(--rb-block-transition, 150ms) ease;
+  transition:
+    background-color var(--rb-block-transition, 150ms) ease,
+    color var(--rb-block-transition, 150ms) ease;
 }
 
 :where(.theme-scope) .event-reset-filters-btn:hover {
@@ -20513,6 +20692,63 @@ const containerResponsiveThemeCss = `/*
   text-underline-offset: 0.12em;
 }
 
+/* Catalogue cards can keep their media footprint when an event has no
+   resolved image. The date remains useful content and follows the site's
+   palette and typography tokens. */
+:where(.theme-scope) .event-card-date-fallback {
+  position: relative;
+  display: flex;
+  min-height: var(--rb-event-card-media-height, 16rem);
+  flex-direction: column;
+  justify-content: flex-end;
+  gap: 0.125rem;
+  overflow: hidden;
+  padding: 1.125rem;
+  border-bottom: 1px solid rgb(var(--tb-border, 229 231 235));
+  background: rgb(var(--tb-surfaceAlt, var(--tb-surface, 255 255 255)));
+  color: rgb(var(--tb-text, 17 24 39));
+}
+
+:where(.theme-scope) .event-card-date-fallback::before {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  background: radial-gradient(
+    120% 140% at 0% 0%,
+    color-mix(in srgb, rgb(var(--tb-primary, 0 0 0)) 11%, transparent),
+    transparent 62%
+  );
+  content: '';
+}
+
+:where(.theme-scope) .event-card-date-fallback-label,
+:where(.theme-scope) .event-card-date-fallback-value {
+  position: relative;
+}
+
+:where(.theme-scope) .event-card-date-fallback-label {
+  color: rgb(var(--tb-mutedText, var(--tb-muted, 107 114 128)));
+  font-size: 0.72rem;
+  font-weight: 700;
+  letter-spacing: 0.14em;
+  line-height: 1.2;
+  text-transform: uppercase;
+}
+
+:where(.theme-scope) .event-card-date-fallback-value {
+  color: rgb(var(--tb-primary, 0 0 0));
+  font-family: var(--font-heading, var(--font-body, inherit));
+  font-size: clamp(1.7rem, 1.35rem + 1.1vw, 2.35rem);
+  font-weight: 500;
+  letter-spacing: -0.025em;
+  line-height: 1.04;
+}
+
+:where(.theme-scope) .event-card-price {
+  color: rgb(var(--tb-text, 17 24 39));
+  font-weight: 600;
+}
+
 /* =============================================================================
  * Block: Carousel Navigation (Phase 3 client component migration)
  * =============================================================================
@@ -24375,6 +24611,38 @@ const containerResponsiveThemeCss = `/*
   box-shadow:
     0 0 0 2px rgb(var(--tb-surface)),
     0 0 0 4px rgba(var(--tb-primary), 0.3);
+}
+
+/* =============================================================================
+ * Block: Appointment Services
+ * ============================================================================= */
+
+:where(.theme-scope) :where([data-block="appointment-services"]) .appointment-services-row {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  column-gap: 1rem;
+  row-gap: 0.5rem;
+}
+
+:where(.theme-scope) :where([data-block="appointment-services"]) .appointment-services-row-main {
+  flex: 1 1 16rem;
+}
+
+:where(.theme-scope) :where([data-block="appointment-services"]) .appointment-services-row-price {
+  flex: 0 0 auto;
+}
+
+:where(.theme-scope) :where([data-block="appointment-services"]) .appointment-services-row-action {
+  flex: 1 0 100%;
+}
+
+@container rb-site (min-width: 768px) {
+@scope ([data-rb-responsive-mode="container"]) to (:scope [data-rb-responsive-mode]) {
+:where(.theme-scope) :where([data-block="appointment-services"]) .appointment-services-row-action {
+    flex: 0 0 auto;
+  }
+}
 }`;
 //#endregion
 //#region ../theme-core/src/ThemeScopeCore.tsx