/* curby-style-assets bundle: utils fingerprint=bd24c40522b25162c0f34f9cd77ba2be6ff074fdedec81680c2bb50508ad790f */
/* @source project--aydin/ui-styles/50-utils/util-accessibility.css */
@layer utils {
  .util-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  .util-not-visually-hidden {
    position: static;
    width: auto;
    height: auto;
    padding: 0;
    margin: 0;
    overflow: visible;
    clip: auto;
    white-space: normal;
  }
}

/* @source project--aydin/ui-styles/50-utils/util-grid.css */
@layer utils {
  .util-grid-3 {
    &:is(ul) {
      list-style: none;
      padding: 0;
    }
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--semantic-grid-gap);

    @container layout (width >= 48rem) {
      grid-template-columns: 1fr 1fr;
    }

    @container layout (width >= 64rem) {
      grid-template-columns: 1fr 1fr 1fr;
    }

    @container layout (width >= 96rem) {
      grid-template-columns: repeat(6, 1fr);
    }
  }

  .util-grid-1-2 {
    display: grid;
    gap: var(--semantic-grid-gap-relaxed);

    @container layout (width >= 54rem) {
      grid-template-columns: 1fr 2fr;
    }
  }

  .util-grid-2-1 {
    display: grid;
    gap: var(--semantic-grid-gap-relaxed);

    @container layout (width >= 54rem) {
      grid-template-columns: 2fr 1fr;
    }
  }

  .util-grid-2 {
    &:is(ul) {
      list-style: none;
      padding: 0;
    }
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--semantic-grid-gap);

    @container layout (width >= 48rem) {
      grid-template-columns: 1fr 1fr;
    }
  }

  .util-grid-4 {
    &:is(ul) {
      list-style: none;
      padding: 0;
    }
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--semantic-grid-gap);

    @container layout (width >= 48rem) {
      grid-template-columns: 1fr 1fr;
    }

    @container layout (width >= 64rem) {
      grid-template-columns: 1fr 1fr 1fr 1fr;
    }
  }
}

/* @source project--aydin/ui-styles/50-utils/util-kirbytext.css */
@layer utils {
  .util-kirbytext {
    > * + * {
      margin-block-start: var(--semantic-space-vertical);
    }
    ul {
      list-style: none;
      > * + * {
        margin-block-start: var(--semantic-space-vertical-compressed);
      }
    }
    li {
      display: flex;
      align-items: baseline;
      gap: var(--semantic-ui-gap-icon-compact);
    }
    ul > li::before {
      display: inline-block;
      width: 9px;
      height: 9px;
      margin-right: 6px;
      margin-left: 2px;
      content: "";
      /* needs to be brand color always */
      background-color: var(--raw-color-main-base);
      -webkit-clip-path: polygon(0 0, 100% 0, 6px 100%, 0% 100%);
      clip-path: polygon(0 0, 100% 0, 6px 100%, 0% 100%);
      transform: translateY(-0.1em);
      flex-shrink: 0;
    }
  }
}

/* @source project--aydin/ui-styles/50-utils/util-ratios.css */
/* Static aspect-ratio utilities for hardcoded ratio-* classes in markup.
 * Add a rule here when templates/snippets use a ratio class before runtime discovery.
 * Dynamic ratios from images are emitted to assets/generated/responsive-image-ratios.css. */

@layer utils {
  .ratio-16-9 {
    aspect-ratio: 16 / 9;
  }
}