/* Small additions on top of the Webflow stylesheet (webflow.css is the design site ch-wagtail.webflow.io CSS, unchanged). */

/* Scrolling image carousel (was an inline script on the Webflow site) */
@keyframes ch-scroll { 0% { transform: translateX(0) } 100% { transform: translateX(calc((340px + 24px) * var(--ch-carousel-count, 7) * -1)) } }
.ch-carousel-track { display: flex !important; gap: 24px !important; width: max-content !important; animation: ch-scroll 45s linear infinite !important; }
.ch-carousel-track:hover { animation-play-state: paused !important; }
.ch-carousel-wrapper { overflow: hidden !important; position: relative !important; width: 100% !important; }
.ch-carousel-img { width: 340px !important; height: 240px !important; object-fit: cover !important; flex-shrink: 0 !important; border-radius: 6px !important; }
@media (prefers-reduced-motion: reduce) { .ch-carousel-track { animation: none !important; } }

/* Wagtail rich text images/embeds inside news posts */
.ch-blog-body .richtext-image { max-width: 100%; height: auto; }
.ch-blog-body .richtext-image.left { float: left; margin: 0 20px 10px 0; }
.ch-blog-body .richtext-image.right { float: right; margin: 0 0 10px 20px; }

/* Team cards are clickable to open the bio */
.fs_modal-1_button { cursor: pointer; }

/* Wagtail adds width/height attributes to images; let the Webflow aspect-ratio rules decide the height, as on the live site. */
img { height: auto; }

/* Spacing tokens the nav uses (scoped so only the nav is affected). */
.ch-nav {
  --_scemantic-scale---nav-padding--top: 22px;
  --_scemantic-scale---nav-padding--bottom: 22px;
  --_scemantic-scale---type--h4: 1.25rem;
}

/* Region groups in the Find a hub panel (Wagtail groups hubs by region; Webflow can't). */
.ch-hubfinder-groups { display: flex; flex-direction: column; gap: 24px; }
.ch-hubfinder-group .ch-hubfinder-region { margin-bottom: 10px; }
.ch-hubfinder-namerow .ch-hubfinder-name { flex: 0 1 auto; }

/* Rich text inside facelift sections: Wagtail images and spacing between editor paragraphs */
.wg-split2 .richtext-image, .wg-narrow .richtext-image { max-width: 100%; height: auto; }
.wg-aside .wg-list + .wg-h3 { margin-top: 20px; }

/* Weekly programme: fewer than five days share the full width (the template sets --days) */
.wg-week { grid-template-columns: repeat(var(--days, 5), minmax(0, 1fr)); }

/* Listing pages (events, jobs, news): the list sits straight in the page's section, not in a box inside it */
.wg-eventlist .ch-section-mainwrapper, .wg-events-wrap .ch-section-mainwrapper,
.wg-jobs-wrap .ch-section-mainwrapper, .wg-newslist .ch-section-mainwrapper {
  background: none; border: 0; padding: 0; margin: 0;
}
.wg-eventlist .ch-section, .wg-events-wrap .ch-section, .wg-jobs-wrap .ch-section, .wg-newslist .ch-section {
  background: none; border: 0; padding: 0; margin: 0; max-width: none; box-shadow: none;
}
.wg-eventlist .ch-schedule, .wg-events-wrap .ch-schedule, .wg-jobs-wrap .ch-schedule { padding: 0; background: none; }

/* A disclaimer right after a listing belongs to it: no second band of padding between them */
section:has(.wg-jobs-wrap) + section:has(.wg-disc), section:has(.wg-events-wrap) + section:has(.wg-disc) { padding-top: 0; }

/* Team: fewer than four people share the full width on desktop (the template sets --cols) */
@media screen and (min-width: 992px) {
  .wg-team-grid { grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); }
}
/* Icons and photos the stylesheet sizes by height only: Wagtail adds a width to every image, which stretched them.
   Let the width follow the height (as on Webflow), and never distort. */
.image-3, .ch-crd-icon-img, .image-6 { width: auto; max-width: 100%; object-fit: contain; }