/** --------------------------------------------------
*
*   BASE / FUNCTIONS
*   clamped
*
*   Clamps an output value between a min & max value
*   and interpolates the "preferred" value based on the
*   slope between the breakpoints at which the min/max
*   value should be used as the cut-off.
*
*   -------------------------------------------------- */
/** --------------------------------------------------
*
*   BASE / FUNCTIONS
*   rem
*
*   Converts a pixel value to rems.
*
*   -------------------------------------------------- */
/** --------------------------------------------------
*   #rem
*  -------------------------------------------------- */
/** --------------------------------------------------
*
*   BASE / FUNCTIONS
*   rnd
*
*   Built-in Sass math:round (and ceil/floor) functions
*   result in whole numbers only.
*
*   -------------------------------------------------- */
/** --------------------------------------------------
*   #rnd
*  -------------------------------------------------- */
/** --------------------------------------------------
*   #clamped
*  -------------------------------------------------- */
/** --------------------------------------------------
*
*   BASE / FUNCTIONS
*   iff
*
*   Syntactic sugar around Sass' built-in `if` function that
*   does not require you to pass a value for `$if-false`.
*
*   -------------------------------------------------- */
/** --------------------------------------------------
*   #iff
*  -------------------------------------------------- */
/** --------------------------------------------------
*
*   BASE / FUNCTIONS
*   implode
*
*   Variant of PHP array implode to convert list items into a string
*
*   -------------------------------------------------- */
/** --------------------------------------------------
*   #implode
*  -------------------------------------------------- */
/** --------------------------------------------------
*
*   BASE / FUNCTIONS
*   internal media query helpers to help convert & interpret MQ's
*
*   TABLE OF CONTENTS
*   mq
*   interpret-features
*   breakpoint-lookup
*   media-concatenate
*   convert units
*
*  -------------------------------------------------- */
/** --------------------------------------------------
*
*   BASE / FUNCTIONS
*   strip-unit
*
*   Strips the unit of input and returns just the numerical value.
*
*   -------------------------------------------------- */
/** --------------------------------------------------
*   #strip-unit
*  -------------------------------------------------- */
/** --------------------------------------------------
*   #mq [internal function]
*   -------------------------------------------------- */
/** --------------------------------------------------
*   #interpret-features [internal function]
*   -------------------------------------------------- */
/** --------------------------------------------------
*   #breakpoint-lookup
*   -------------------------------------------------- */
/** --------------------------------------------------
*   #media-concatenate
*   -------------------------------------------------- */
/** --------------------------------------------------
*   #convert units
*   -------------------------------------------------- */
/** --------------------------------------------------
*
*   BASE / FUNCTIONS
*   space
*
*   Returns the min or max value for a given key on
*   the size scale. Defaults to min (mobile first).
*
*   -------------------------------------------------- */
/** --------------------------------------------------
*
*   BASE / FUNCTIONS
*   token
*
*   Checks the design token maps for a given entry
*   and returns the result.
*
*   -------------------------------------------------- */
/** --------------------------------------------------
*
*   COLOR DESIGN TOKENS
*   These should never be used directly for styling.
*   Use abstractions in /variables/colors or components instead.
*
*   TABLE OF CONTENTS
*   color tokens
*
*   -------------------------------------------------- */
/** --------------------------------------------------
*
*   SIZE SCALE DESIGN TOKENS
*   These represent the mobile & desktop device size scale
*   from the Figma file as a min/max value per scale entry.
*   We cannot simply override the properties at a certain
*   breakpoint as this clashes with the component (container)
*   implementation.
*   By adding these tokens, we can at least maintain the naming
*   and values from the Figma file for easier reference without
*   having to resort to manually entering unrelated spacing units
*   all throughout the project.
*
*   TABLE OF CONTENTS
*   size scale tokens
*
*   -------------------------------------------------- */
/** --------------------------------------------------
*
*   TYPOGRAPHY DESIGN TOKENS
*   These should never be used directly for styling.
*   Use abstractions in /variables/font-styles instead.
*
*   TABLE OF CONTENTS
*   typographic tokens
*
*   -------------------------------------------------- */
/** --------------------------------------------------
*   #token
*   -------------------------------------------------- */
/** --------------------------------------------------
*   #space
*  -------------------------------------------------- */
/** --------------------------------------------------
*
*   VARIABLES
*   breakpoints
*
*   INFO
*   breakpoint configuration:
*   - $mq-breakpoints is a list of breakpoints which
*     can be entered in px (recommended), em or rem.
*     Output will always be in em units.
*     Order of the breakpoints in the list does not matter.
*   - $mq-presets is an (optional) list of frequent combos
*
*   SDC
*   Try to minimise the use of breakpoints inside SDC component
*   styles. Container Queries are preferred so the components
*   can adjust themselves without needing awareness of their context.
*   (For instance: on a page with sidebar vs full width)
*
*   TABLE OF CONTENTS
*   custom breakpoints
*   frequently used presets
*
*   -------------------------------------------------- */
/** --------------------------------------------------
*   #custom breakpoints
*   -------------------------------------------------- */
/** --------------------------------------------------
*   #frequently used presets
*   -------------------------------------------------- */
/** --------------------------------------------------
*
*   BASE / UTILS
*   queries
*
*   INFO
*   Media query mixins to be called directly or with
*   predefined keys configured in [variables/breakpoints]
*   +
*   basic container query mixin (inline-size, width > x)
*   sharing the same breakpoints and conversion logic as our
*   media query mixin
*
*   TABLE OF CONTENTS
*   fallback defaults
*   mq
*   mqset
*   cq
*
*  -------------------------------------------------- */
/** --------------------------------------------------
*   #fallback defaults
*   -------------------------------------------------- */
/** --------------------------------------------------
*   #mq
*   -------------------------------------------------- */
/** --------------------------------------------------
*   #mqset
*   -------------------------------------------------- */
/** --------------------------------------------------
*   #cq
*   -------------------------------------------------- */
/** --------------------------------------------------
*
*   BASE / UTILS
*   create button variants
*
*   INFO
*   Mixin to generate all button variant & style combos.
*
*   TABLE OF CONTENTS
*   create-button-variants
*
*   -------------------------------------------------- */
/** --------------------------------------------------
*   #create-button-variants
*   -------------------------------------------------- */
/** --------------------------------------------------
*
*   BASE / UTILS
*   tokens to custom property
*
*   INFO
*   Mixin to include all typographic related rules
*   based on a given token. Includes fluid type scale.
*
*   TABLE OF CONTENTS
*   tokens-to-custom-property
*
*   -------------------------------------------------- */
/** --------------------------------------------------
*   #tokens-to-custom-property
*   -------------------------------------------------- */
/** --------------------------------------------------
*
*   BASE / UTILS
*   typography
*
*   INFO
*   Mixin to include all typographic related rules
*   based on a given token. Includes fluid type scale.
*
*   TABLE OF CONTENTS
*   font-styles
*
*   -------------------------------------------------- */
/** --------------------------------------------------
*   #font
*   -------------------------------------------------- */
/** --------------------------------------------------
*
*   BASE / UTILS
*   visually hidden
*
*   TABLE OF CONTENTS
*   visually hidden
*   visually hidden - focusable
*
*  -------------------------------------------------- */
/** --------------------------------------------------
*  #visually hidden
*  -------------------------------------------------- */
/** --------------------------------------------------
*  #visually hidden - focusable
*  -------------------------------------------------- */
.sdc--type-gallery .content {
  --gallery-padding-block: 1.25rem;
  --gallery-subtitle-space: 0.25rem;
  --gallery-text-space: 0.25rem;
  --galler-actions-space: 1.25rem;
  --gallery-block-start: 2.5rem;
  --gallery-block-end: 4rem;
  --sdc-base-width: 100%;
  --control-btn-width: 3rem;
  --control-btn-height: 3rem;
}

@container gallery (width > 48em) {
  .sdc--type-gallery .content {
    --gallery-padding-block: 5rem;
    --gallery-subtitle-space: 1rem;
    --gallery-text-space: 1.5rem;
    --gallery-actions-space: 0;
    --gallery-block-start: 3.5rem;
    --gallery-block-end: 6.5rem;
    --sdc-base-width: calc(50% - .75rem);
  }
}
@container gallery (width > 61.25em) {
  .sdc--type-gallery .content {
    --sdc-base-width: calc(33.33% - 1rem);
  }
}
.sdc--type-gallery {
  overflow: hidden;
}
.sdc--type-gallery .gallery-cq {
  container: gallery/inline-size;
}
.sdc--type-gallery .content {
  padding-block: var(--gallery-padding-block);
}
@container gallery (width > 48em) {
  .sdc--type-gallery .content {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: auto 1fr;
    grid-column-gap: 2.5rem;
  }
}
@container gallery (width > 48em) {
  .sdc--type-gallery .sdc--type-block-intro {
    grid-row: 1;
    grid-column: 1/-1;
  }
}
.sdc--type-gallery .gallery {
  padding-block-end: var(--gallery-block-end);
}
.sdc--type-gallery .gallery:first-child {
  margin-block-start: 0;
}
@container gallery (width > 48em) {
  .sdc--type-gallery .gallery {
    grid-row: 2;
    grid-column: span 12;
  }
}
.sdc--type-gallery .gallery ul.splide__list {
  display: flex !important;
  width: 100%;
}
.sdc--type-gallery .gallery li {
  overflow: visible;
  visibility: visible !important;
}
.sdc--type-gallery .gallery li img {
  width: 100%;
  border-radius: var(--radius-image);
}
.sdc--type-gallery .gallery li .sdc-ui-card {
  height: 100%;
}
.sdc--type-gallery .gallery.no-carousel {
  padding-block-end: 0;
}
.sdc--type-gallery .gallery.no-carousel ul.splide__list {
  gap: 1.5rem;
  display: flex !important;
  flex-flow: row wrap;
}
.sdc--type-gallery .gallery.no-carousel ul.splide__list .splide__slide {
  max-width: var(--sdc-base-width);
}
.sdc--type-gallery .gallery.no-carousel ul.splide__list > li {
  flex: 1 1 var(--sdc-base-width) !important;
  max-width: var(--sdc-base-width) !important;
  margin-right: 0 !important;
  visibility: visible;
}
.sdc--type-gallery .gallery.no-carousel .splide__pagination,
.sdc--type-gallery .gallery.no-carousel .splide__arrows {
  display: none !important;
}
.sdc--type-gallery .splide__track {
  width: 100% !important;
  overflow: visible;
}
.sdc--type-gallery .splide__arrows {
  display: none;
}
@container gallery (width > 48em) {
  .sdc--type-gallery .splide__arrows {
    display: flex;
    gap: 1rem;
    position: absolute;
    left: 0;
    bottom: 0;
  }
}
.sdc--type-gallery .splide__arrows button {
  position: static;
  opacity: 1;
  transform: translateY(0);
}
.sdc--type-gallery .splide__pagination {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sdc--type-gallery .splide__pagination__page {
  opacity: 1;
}
.sdc--type-gallery .splide__pagination li button {
  margin: 0;
  min-height: 0;
}
.sdc--type-gallery .splide__pagination li button.is-active {
  transform: scale(1);
}
@container gallery (width > 48em) {
  .sdc--type-gallery .splide__pagination {
    width: max-content;
    left: auto;
    bottom: 0.75rem;
  }
}
.sdc--type-gallery:has(.sdc-inner--action-bar:empty) .sdc--type-action-bar {
  display: none;
}
.sdc--type-gallery .splide__arrows button {
  width: var(--control-btn-width);
  height: var(--control-btn-height);
  border-radius: var(--radius-button, 32px);
  background: var(--color-fills-brand-accent1-base);
  transition: background 0.3s ease;
}
.sdc--type-gallery .splide__arrows button svg {
  display: none;
}
.sdc--type-gallery .splide__arrows button::before {
  content: "";
  width: var(--control-btn-width);
  height: var(--control-btn-height);
  display: block;
  background-color: var(--color-neutral-white);
  transition: background 0.3s ease;
}
.sdc--type-gallery .splide__arrows button:hover {
  background: var(--color-fills-brand-accent2-subtler);
}
.sdc--type-gallery .splide__arrows button:hover::before {
  background: var(--color-fills-brand-accent1-hover);
}
.sdc--type-gallery .splide__arrows button.splide__arrow--prev::before {
  mask-image: url("../../../img/theme/arrow-left.svg");
  mask-repeat: no-repeat;
  mask-size: 1.5rem 1.5rem;
  mask-position: center center;
}
.sdc--type-gallery .splide__arrows button.splide__arrow--next::before {
  mask-image: url("../../../img/theme/arrow-right.svg");
  mask-repeat: no-repeat;
  mask-size: 1.5rem 1.5rem;
  mask-position: center center;
}
.sdc--type-gallery .splide__arrows button[disabled] {
  background: var(--color-fills-neutral-disabled);
}
.sdc--type-gallery .splide__arrows button[disabled]::before {
  background-color: var(--color-neutral-12);
}
.sdc--type-gallery .splide__pagination {
  height: 1.5rem;
  gap: 0.5rem;
}
.sdc--type-gallery .splide__pagination li button {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 0.5rem;
  transition: width 0.25s ease, background 0.25s ease;
  background: var(--color-fills-neutral-subtle);
}
.sdc--type-gallery .splide__pagination li button.is-active {
  width: 1.5rem;
  background: var(--color-fills-brand-accent1-base);
}

/** --------------------------------------------------
*   # Numbered list cards theming -> available everywhere in this component
 -------------------------------------------------- */
.splide__list {
  counter-reset: numbered-cards;
}
.splide__list .splide__slide {
  counter-increment: numbered-cards;
}

.sdc--type-gallery .sdc-inner--action-bar {
  /* Init all the conversion and processing of input and config values */
  /* Use the media query strings from map above to output the CSS rules */
}
@media all and (min-width: 48em) {
  .sdc--type-gallery .sdc-inner--action-bar {
    justify-content: end;
  }
}

/** --------------------------------------------------
*   # downloadable images
 -------------------------------------------------- */
.sdc--type-gallery .splide__slide .downloadable-image {
  position: relative;
  display: block;
  border-radius: var(--radius-image);
}
.sdc--type-gallery .splide__slide .downloadable-image::before, .sdc--type-gallery .splide__slide .downloadable-image::after {
  content: "";
  position: absolute;
  inset: auto 1rem 1rem auto;
  width: 3rem;
  aspect-ratio: 1;
}
.sdc--type-gallery .splide__slide .downloadable-image::before {
  color: var(--color-fills-brand-accent1-base);
  background-color: var(--color-fills-brand-accent3-base);
  border-radius: var(--radius-button);
  transition: background-color 0.3s ease;
}
.sdc--type-gallery .splide__slide .downloadable-image::after {
  background-color: var(--color-fills-brand-accent1-base);
  mask-image: url("../../../img/theme/download.svg");
  mask-repeat: no-repeat;
  mask-size: 1.5rem 1.5rem;
  mask-position: center center;
  transition: background-color 0.3s ease;
}
.sdc--type-gallery .splide__slide .downloadable-image:focus {
  outline: 0.25rem solid var(--color-fills-brand-accent3-base);
  outline-offset: 0.25rem;
}
.sdc--type-gallery .splide__slide .downloadable-image:hover::before, .sdc--type-gallery .splide__slide .downloadable-image:focus::before {
  background-color: var(--color-fills-brand-accent1-hover);
}
.sdc--type-gallery .splide__slide .downloadable-image:hover::after, .sdc--type-gallery .splide__slide .downloadable-image:focus::after {
  background-color: var(--color-neutral-white);
}