/* curby-style-assets bundle: components fingerprint=2e25864d152d0c940fd423489b2649569fef6ff17d08927e86f75aa1c3e34642 */
/* @source project--aydin/ui-styles/80-components/comp-article.css */
@layer components {
  .comp-article {
    display: grid;
    grid-template-columns: subgrid;
    grid-column-start: 1;
    grid-column-end: -1;

    > * {
      grid-column-start: 2;
      grid-column-end: -2;
    }
  }
}

/* @source project--aydin/ui-styles/80-components/comp-button.css */
@layer components {
  .comp-button {
    --_background: var(--skin-accent-primary);
    --_background-hover: var(--skin-accent-primary-hover);
    --_foreground: var(--skin-accent-on-primary);
    --_foreground-hover: var(--skin-accent-on-primary-hover);
    --_weight: var(--semantic-text-role-ui-weight);
    --_border-width: var(--semantic-ui-border-thin);
    --_border: var(--skin-border-secondary);
    --_radius: var(--semantic-ui-radius-compact);
    --_padding-inline: var(--semantic-ui-padding-inline);
    --_padding-block: var(--semantic-ui-padding-block);
    --_icon-gap: var(--semantic-ui-gap-icon);
    --_icon-width: var(--semantic-icon-large);
    --_icon-height: var(--semantic-icon-large);
    --_font-size: var(--semantic-text-role-body-size);

    cursor: pointer;

    &.is-primary {
      --_border-width: 0;
    }

    &.is-download {
      --_border-width: 0;
    }

    &.is-link {
      --_background: var(--skin-background-secondary);
      --_foreground: var(--skin-interactive-primary);
      --_background-hover: var(--skin-background-primary);
      --_foreground-hover: var(--skin-interactive-primary-hover);
    }

    &.is-inline-submit {
      --_padding-inline: var(--semantic-ui-padding-inline-compact);
      --_padding-block: var(--semantic-ui-padding-block-compact);
      --_border-width: 0;
    }

    &.is-text-link {
      --_weight: var(--semantic-text-role-ui-weight);
      --_background: var(--skin-background-primary);
      --_foreground: var(--skin-interactive-primary);
      --_background-hover: var(--skin-background-primary);
      --_foreground-hover: var(--skin-interactive-primary-hover);
      --_padding-inline: 0;
      --_padding-block: 0;
      --_border-width: 0;
      --_icon-gap: var(--semantic-ui-gap-icon-compact);
    }

    &.is-anchor {
      --_border-width: 0;
      --_font-size: var(--semantic-text-role-smallish-size);
      --_padding-block: var(--semantic-ui-padding-block-compact);
      --_icon-width: var(--semantic-icon-normal);
      --_icon-height: var(--semantic-icon-normal);
    }

    display: inline-flex;
    align-items: center;
    gap: var(--_icon-gap);
    text-decoration: none;
    line-height: var(--raw-line-height-snug);
    font-size: var(--_font-size);
    transition:
      background-color var(--raw-motion-duration-slow)
        var(--raw-motion-easing-ease-in),
      color var(--raw-motion-duration-normal) var(--raw-motion-easing-ease-in);
    background-color: var(--_background);
    color: var(--_foreground);
    font-weight: var(--_weight);
    padding-inline: var(--_padding-inline);
    padding-block: var(--_padding-block);
    border-radius: var(--_radius);
    border: var(--_border-width) solid var(--_border);

    &:hover,
    &:focus-visible {
      background-color: var(--_background-hover);
      color: var(--_foreground-hover);
    }

    svg {
      width: var(--_icon-width);
      height: var(--_icon-height);
    }
  }
}

/* @source project--aydin/ui-styles/80-components/comp-checklist.css */
@layer components {
  .comp-checklist {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: var(--semantic-space-shell-inset-compact);

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

    li {
      display: flex;
      gap: var(--semantic-ui-gap-icon-relaxed);
      align-items: center;
      text-wrap: balance;
    }

    svg {
      width: var(--semantic-icon-larger);
      height: var(--semantic-icon-larger);
      color: var(--skin-accent-secondary);
      flex-shrink: 0;
    }
  }
}

/* @source project--aydin/ui-styles/80-components/comp-drawer-content.css */
@layer components {
  .comp-drawer-content {
    --_inset-block-start: calc(
      var(--raw-layout-shell-header-height) +
        var(--semantic-space-shell-inset) + var(--semantic-space-shell-inset)
    );
    inset-block-start: var(--_inset-block-start);
    position: sticky;
  }
}

/* @source project--aydin/ui-styles/80-components/comp-drawer-toggle.css */
@layer components {
  .comp-drawer-toggle {
    font-size: var(--raw-font-size-sm);
    button {
      display: inline-flex;
      align-items: center;
      gap: var(--semantic-ui-gap-icon);
      background-color: transparent;
      color: var(--skin-foreground-primary);
      border: none;
      cursor: pointer;

      &:hover {
        color: var(--skin-foreground-secondary);
      }
    }
  }
}

/* @source project--aydin/ui-styles/80-components/comp-drawer.css */
@layer components {
  .comp-drawer {
    z-index: var(--raw-z-index-drawer);
    @container layout (width < 64rem) {
    --_inset-block-start: var(--raw-layout-shell-header-height-slim);
      position: fixed;
      top: var(--_inset-block-start);
      left: 0;
      bottom: 0;
    }

    @container layout (width >= 64rem) {
      [data-layout-type="layout-1"] & {
        height: var(--raw-layout-shell-header-height);
        top: 0;
        position: sticky;
        display: grid;
        justify-content: end;
        align-items: center;
        padding-inline-end: var(--semantic-space-shell-inset-relaxed);
    }
  }
}

/* @source project--aydin/ui-styles/80-components/comp-errors.css */
@layer components {
  .comp-errors {
    padding-block: var(--semantic-space-shell-inset-compact);
    border-radius: var(--semantic-ui-radius-compact);
    margin-block-end: var(--semantic-space-vertical);
  }
}

/* @source project--aydin/ui-styles/80-components/comp-feature-card.css */
@layer components {
  .comp-feature-card {
    height: 100%;
    border-radius: var(--semantic-ui-radius-compact);
      padding: var(--semantic-space-shell-inset-compact);

    h2,
    h3 {
      color: var(--skin-foreground-primary);
      margin-block-end: var(--semantic-space-vertical-compact);
    }

    img {
      border-radius: var(--semantic-ui-radius-compact);
      margin-block-end: var(--semantic-space-vertical-compact);
    }

    figcaption {
      margin-block-start: var(--semantic-space-vertical-compact);
    }
  }
}

/* @source project--aydin/ui-styles/80-components/comp-footer.css */
@layer components {
  .comp-footer {
    > div {
      padding-inline: var(--semantic-space-shell-inset-relaxed);
      padding-block: var(--semantic-space-shell-inset);

      gap: var(--semantic-space-shell-inset);

      &:first-child {
        display: grid;
      }

      @container layout (width >= 40rem) {
        &:first-child {
          grid-template-columns: 1fr auto;
        }
      }

      &:last-child {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        background-color: var(--skin-background-secondary);
        align-items: center;
      }
    }

    .is-contact-wrapper,
    .is-contact-data {
      display: flex;
      flex-wrap: wrap;
      gap: var(--semantic-space-shell-inset);
    }

    .comp-logo {
      flex-shrink: 0;
    }

    a {
      border-radius: var(--semantic-ui-radius-compact);
      min-height: var(--semantic-ui-target);
      display: inline-block;
    }

    img {
      flex-shrink: 0;
      max-width: 80vw;
      height: auto;
    }

    ul {
      list-style: none;
      padding: 0;

      & + & {
        margin-block-start: var(--semantic-space-vertical);
      }
    }

    dl div {
      display: flex;
      gap: 1ch;
    }
  }
}

/* @source project--aydin/ui-styles/80-components/comp-form.css */
@layer components {
  .comp-form {
    display: grid;
    gap: var(--semantic-space-shell-inset-compact);

    .is-row {
      gap: var(--semantic-space-shell-inset-compact);
      display: grid;
      @container layout (width > 64rem) {
        grid-template-columns: 1fr 1fr;
      }
    }

    .is-col-full {
      grid-column-start: 1;
      grid-column-end: -1;
    }

    input:not([aria-hidden]),
    textarea {
      display: block;
      width: 100%;
      padding-block: var(--semantic-ui-padding-block);
      padding-inline: var(--semantic-ui-padding-inline);
      border: var(--semantic-ui-border-thin) solid var(--skin-border-secondary);
      border-radius: var(--semantic-ui-radius-compact);
      background-color: var(--skin-background-secondary);
      color: var(--skin-foreground-primary);
    }

    label {
      margin-block-end: var(--semantic-space-vertical-compressed);
      width: 100%;

      span {
        font-size: 0.75em;
      }
    }
  }
}

/* @source project--aydin/ui-styles/80-components/comp-header.css */
@layer components {
  .comp-header {
    padding-inline: var(--semantic-space-shell-inset-relaxed);
    padding-block: var(--semantic-space-shell-inset);
    z-index: var(--raw-z-index-header);
    position: sticky;
    inset-block-start: 0;
    height: var(--raw-layout-shell-header-height);

    @container layout (width < 64rem) {
      height: var(--raw-layout-shell-header-height-slim);
    }

    [data-layout-type="layout-1"] &,
    [data-layout-type="layout-2"] &,
    [data-layout-type="layout-3"] & {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
  }
}

/* @source project--aydin/ui-styles/80-components/comp-hero.css */
@layer components {
  .comp-hero {
    display: grid;
    grid-template-columns: subgrid;
    grid-column-start: 1;
    grid-column-end: -1;
    align-items: center;
    gap: 0;

    margin-block-end: var(--semantic-space-vertical-section-compact);

    @container layout (width >= 64rem) {
      margin-block-end: var(--semantic-space-vertical-section);
    }

    .comp-hero__image {
      grid-column-start: 1;
      grid-column-end: -1;

      img {
        width: 100%;
        height: auto;
      }

      @container layout (width >= 64rem) {
        margin-block: var(--semantic-space-vertical-compact);
        margin-inline-start: var(--semantic-space-vertical-compact);
        grid-row-start: 1;
        grid-column-start: 10;
        grid-column-end: -2;
        img {
          border-radius: var(--semantic-ui-radius-compact);
        }
      }

      @container layout (width >= 72rem) {
        padding: 0;
      }

      @container layout (width >= 120rem) {
        grid-column-end: -2;
      }
    }

    .comp-hero__content {
      /*  padding: var(--semantic-space-shell-inset); */
      grid-column-start: 1;
      grid-column-end: -1;
      padding-block: var(--semantic-space-shell-inset);
      padding-inline-start: var(--semantic-space-shell-inset-relaxed);
      padding-inline-end: var(--semantic-space-shell-inset);
      place-content: center;

      > * + * {
        margin-block-start: var(--semantic-space-vertical);
      }

      @container layout (width >= 64rem) {
        grid-row-start: 1;
        grid-column-end: 10;
      }

      h1 {
        max-width: 40ch;
        text-wrap: balance;
      }
    }
  }
}

/* @source project--aydin/ui-styles/80-components/comp-icon.css */
@layer components {
  .comp-icon {
    color: currentcolor;
  }
}

/* @source project--aydin/ui-styles/80-components/comp-legal.css */
@layer components {
  .comp-legal {
    font-size: 0.875em;
    padding-block: var(--semantic-space-shell-inset);
  }
}

/* @source project--aydin/ui-styles/80-components/comp-logo.css */
@layer components {
  .comp-logo {
    border-radius: var(--semantic-ui-radius-compact);
    @container layout (width < 64rem) {
      svg {
        height: 40px;
        width: 112px;
      }
    }
    color: var(--skin-foreground-primary);
    transition: color var(--raw-motion-duration-slow);
    &:is(a):hover {
      color: var(--skin-foreground-secondary);
    }

    svg {
      display: block;
      .is-text {
        color: currentColor;
      }
      .is-shape {
        color: var(--skin-accent-primary);
      }
    }
  }
}

/* @source project--aydin/ui-styles/80-components/comp-message.css */
@layer components {
  .comp-message {
    padding-block: var(--semantic-space-shell-inset-compact);
    padding-inline: var(--semantic-space-shell-inset-compact);
    border-radius: var(--semantic-ui-radius-compact);
    margin-block-end: var(--semantic-space-vertical);
  }
}

/* @source project--aydin/ui-styles/80-components/comp-navigation.css */
@layer components {
  .comp-navigation {
    padding: 0;
    font-family: var(--semantic-typography-heading-family);
    font-size: var(--raw-font-size-lg);

    ul {
      list-style: none;
      padding-block: var(--semantic-ui-padding-block-compact);
    }

    ul & ul {
      padding-inline-start: var(--semantic-nav-level-indent);
    }

    ul[data-nav-root] {
      padding: 0;
      li {
        position: relative;
      }
    }

    li {
      padding-block: var(--semantic-ui-padding-block-compact);
    }

    [data-layout-type="layout-1"] & {
      @container layout (width >= 64rem) {
        ul[data-nav-root] {
          display: flex;
          flex-wrap: wrap;
          align-items: center;
          gap: 1.5ch;
        }
      }
    }

    [data-nav-submenu-shell] {
      display: none;
    }

    ul[data-nav-submenu] {
      @container layout (width >= 64rem) {
        background: var(--skin-background-secondary);
        position: absolute;
        top: 100%;
        left: 0;
        padding: var(--semantic-nav-level-indent);
        width: max-content;
        min-width: 100%;
        margin-block-start: var(--semantic-space-vertical-compressed);
        border-radius: var(--semantic-ui-radius-compact);
      }
    }

    a,
    button {
      display: flex;
      align-items: center;
      border-radius: var(--semantic-ui-radius-compact);
      padding-block: var(--semantic-ui-padding-block-compact);
      padding-inline: var(--semantic-ui-padding-inline-compact);
      line-height: var(--semantic-nav-link-line-height);
      gap: var(--semantic-ui-gap-icon-compact);
      color: var(--skin-foreground-secondary);
      &:hover {
        color: var(--skin-foreground-primary);
      }
    }

    a {
      text-decoration: none;
      &[aria-current="page"] {
        background-color: var(--skin-accent-secondary);
        color: var(--skin-accent-on-secondary);
      }
    }

    .comp-icon {
      flex-shrink: 0;
    }

    button {
      background-color: transparent;
      border: none;
      font-weight: var(--raw-font-weight-regular);
      cursor: pointer;

      &[aria-expanded="true"] {
        svg {
          rotate: 90deg;
        }

        & ~ [data-nav-submenu-shell] {
          display: block;
        }
      }

      &[data-nav-ancestor="true"] span {
        font-weight: var(--raw-font-weight-semibold);
        color: var(--skin-accent-secondary);
      }
    }
  }
}

/* @source project--aydin/ui-styles/80-components/comp-responsive-image.css */
@layer components {
  .comp-responsive-image {
    &:is(figure) {
      position: relative;
      anchor-scope: all;

      picture {
        anchor-name: --picture-anchor;
        display: block;
      }

      figcaption {
        > small {
          position: absolute;
          position-anchor: --picture-anchor;
          position-area: bottom right;
          padding: var(--semantic-ui-padding-block-compact);
          background-color: var(--skin-foreground-secondary);
          opacity: 0.9;
          color: var(--skin-background-primary);
          transform: translateY(-100%);
          width: max-content;
          max-width: 15rem;
        }

        > svg {
          position: absolute;
          position-anchor: --picture-anchor;
          max-block-size: none;
          max-inline-size: none;
          width: var(--semantic-icon-large);
          height: var(--semantic-icon-large);
          padding: var(--semantic-ui-padding-block-compact);
          transform: translateY(-100%);
        }
      }
    }
  }
}

/* @source project--aydin/ui-styles/80-components/comp-searchfield.css */
@layer components {
  .comp-searchfield {
  }
}

/* @source project--aydin/ui-styles/80-components/comp-skiplink.css */
@layer components {
  .comp-skiplink {
    &:not(:focus):not(:focus-visible) {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip-path: inset(50%);
      white-space: nowrap;
      border: 0;
      text-decoration: none;
    }

    &:focus-visible,
    &:focus {
      border-radius: var(--semantic-ui-radius-compact);
      position: absolute;
      z-index: var(--raw-z-index-skiplink);
      top: var(--semantic-space-shell-inset);
      left: var(--semantic-space-shell-inset-relaxed);
      padding-block: var(--semantic-ui-padding-block);
      padding-inline: var(--semantic-ui-padding-inline);
      color: var(--skin-interactive-primary);
    }

    &:hover {
      color: var(--skin-interactive-primary-hover);
    }
  }
}

/* @source project--aydin/ui-styles/80-components/comp-teaser-card.css */
@layer components {
  .comp-teaser-card {
    border-radius: var(--semantic-ui-radius-compact);
    height: 100%;
    margin-block-start: var(--semantic-space-vertical-compact);

    img {
      transition:
        color var(--raw-motion-duration-smooth)
          var(--raw-motion-easing-ease-in-out),
        transform var(--raw-motion-duration-smooth)
          var(--raw-motion-easing-ease-out);
      width: 100%;
      height: auto;
    }

    a {
      border-radius: var(--semantic-ui-radius-compact);
      text-decoration: none;
      display: block;
      color: var(--skin-foreground-primary);

      &:hover,
      &:focus-visible {
        color: var(--skin-accent-primary-hover);
        img {
          transform: scale(1.1);
        }
      }

      > div {
        border-start-start-radius: var(--semantic-ui-radius-compact);
        border-start-end-radius: var(--semantic-ui-radius-compact);
        overflow: hidden;
      }
    }

    h2,
    h3 {
      padding-block: var(--semantic-space-shell-inset-compact);
      display: block;
    }

  }
}