@mixin root() { ... }@mixin root() { 
  // Initialize custom properties at root level
  --kib-article-card-active-background-color: #{ct.get(
      'article-card',
      'container',
      'active',
      'bg-color'
    )};
  --kib-article-card-hover-background-color: #{ct.get(
      'article-card',
      'container',
      'hover',
      'bg-color'
    )};
  --kib-article-card-pressed-background-color: #{ct.get(
      'article-card',
      'container',
      'pressed',
      'bg-color'
    )};
  --kib-article-card-focus-background-color: #{ct.get(
      'article-card',
      'container',
      'focus',
      'bg-color'
    )};
  --kib-article-card-background-color: var(--kib-article-card-active-background-color);
  --kib-article-card-border-color: #{ct.get('article-card', 'container', 'active', 'border-color')};
  --kib-article-card-border-width: #{ct.get('article-card', 'border-width', 'standard')};

  @include animation.apply('press', 'scale', 'subtle');

  position: relative;
  overflow: hidden;
  border: var(--kib-article-card-border-width) solid var(--kib-article-card-border-color);
  border-radius: #{ct.get('card', 'border-radius')};
  background-color: var(--kib-article-card-background-color);
  color: color.get('text', 'primary');

  // Remove tap highlight on mobile devices
  -webkit-tap-highlight-color: transparent;

  &--transparent {
    &:focus-within {
      box-shadow: none;
    }

    @media (hover: hover) and (pointer: fine) {
      &:hover {
        box-shadow: none;
      }
    }
  }

  // Show focus ring only when a child element receives keyboard focus
  /* stylelint-disable-next-line plugin/use-baseline -- Progressive enhancement: :has() selector is non-critical, gracefully ignored in unsupported browsers */
  &:focus-within:has(:focus-visible) {
    --kib-article-card-background-color: var(--kib-article-card-focus-background-color);
    --kib-article-card-border-color: #{ct.get('article-card', 'container', 'focus', 'border-color')};
    --kib-article-card-border-width: #{ct.get('article-card', 'border-width', 'focused')};

    @include elevation.apply('emphasis-primary');

    border-radius: #{ct.get('card', 'border-radius')};
    text-decoration: none;

    .kib-article-profile {
      &__title {
        text-decoration: underline;
      }
    }
  }

  // Override hover scaling for Article Card
  @media (hover: hover) and (pointer: fine) {
    &:hover:not(:active) {
      transform: none;
    }
  }

  // Modern browsers: Only apply hover when card has links
  @supports (selector(:has(*))) {
    @media (hover: hover) and (pointer: fine) {
      &:has(a):hover {
        --kib-article-card-background-color: var(--kib-article-card-hover-background-color);
        --kib-article-card-border-color: #{ct.get(
            'article-card',
            'container',
            'hover',
            'border-color'
          )};

        box-shadow: none;
        text-decoration: none;
        cursor: pointer;

        .kib-article-profile {
          &__title {
            text-decoration: underline;
          }
        }
      }
    }

    &:has(a:active) {
      --kib-article-card-background-color: var(--kib-article-card-pressed-background-color);
      --kib-article-card-border-color: #{ct.get(
          'article-card',
          'container',
          'pressed',
          'border-color'
        )};
    }

    &--transparent {
      &:has(a):focus-within {
        background-color: transparent;
        box-shadow: none;
      }

      @media (hover: hover) and (pointer: fine) {
        &:has(a):hover {
          background-color: transparent;
          box-shadow: none;
        }
      }
    }
  }
 }

@mixin size($type) { ... }@mixin size($type) { 
  @if $type == 'standard' {
    min-width: unit.rem(200px);
    max-width: unit.rem(400px);
  } @else if $type == 'landscape' {
    min-width: unit.rem(320px);
    max-width: unit.rem(400px);
  } @else if $type == 'landscape-condensed' {
    min-width: unit.rem(230px);
    max-width: unit.rem(350px);
  }
 }

@mixin variant($variant) { ... }@mixin variant($variant) { 
  @if $variant == 'primary' {
    --kib-article-card-active-background-color: #{ct.get(
        'article-card',
        'container',
        'active',
        'bg-color'
      )};
    --kib-article-card-hover-background-color: #{ct.get(
        'article-card',
        'container',
        'hover',
        'bg-color'
      )};
    --kib-article-card-pressed-background-color: #{ct.get(
        'article-card',
        'container',
        'pressed',
        'bg-color'
      )};
    --kib-article-card-focus-background-color: #{ct.get(
        'article-card',
        'container',
        'focus',
        'bg-color'
      )};
    --kib-article-card-background-color: var(--kib-article-card-active-background-color);
  } @else if $variant == 'tint' {
    --kib-article-card-active-background-color: #{ct.get(
        'article-card',
        'tint',
        'active',
        'bg-color'
      )};
    --kib-article-card-hover-background-color: #{ct.get(
        'article-card',
        'tint',
        'hover',
        'bg-color'
      )};
    --kib-article-card-pressed-background-color: #{ct.get(
        'article-card',
        'tint',
        'pressed',
        'bg-color'
      )};
    --kib-article-card-focus-background-color: #{ct.get(
        'article-card',
        'tint',
        'focus',
        'bg-color'
      )};
    --kib-article-card-background-color: var(--kib-article-card-active-background-color);
  } @else if $variant == 'transparent' {
    --kib-article-card-active-background-color: transparent;
    --kib-article-card-hover-background-color: transparent;
    --kib-article-card-pressed-background-color: transparent;
    --kib-article-card-focus-background-color: transparent;
    --kib-article-card-background-color: transparent;

    border-radius: 0;
  }
 }

@mixin landscape-layout() { ... }@mixin landscape-layout() { 
  display: flex;
  flex-direction: row-reverse;
  flex-wrap: nowrap;
  justify-content: space-between;
  padding: spacing.get('s2');
 }

@mixin landscape-transparent() { ... }@mixin landscape-transparent() { 
  flex-direction: row;
  justify-content: flex-start;
 }