/*! tailwindcss v4.1.13 | MIT License | https://tailwindcss.com */
@layer properties;
.storybook-component--card {
  max-width: var(--hg-container-md, 28rem);
  padding: calc(var(--hg-spacing, 4px) * 4);
}
.storybook-component--card:has(.card.is-landscape) {
  max-width: var(--hg-container-2xl, 42rem);
}
@layer components {
  .card {
    background-color: var(--hgc-card-bg);
    &:hover, &:focus {
      --hgc-card-bg: var(--hgc-card-bg-hover);
    }
    &.is-framed {
      --hgc-card-bg: var(--hgc-card-framed-bg);
      &:hover, &:focus {
        --hgc-card-bg: var(--hgc-card-framed-bg-hover);
      }
    }
    &.is-featured {
      --hgc-card-bg: var(--hgc-card-featured-bg);
      &:hover, &:focus {
        --hgc-card-bg: var(--hgc-card-featured-bg-hover);
      }
    }
    .views-row & {
      height: 100%;
    }
    &.is-framed, &.is-featured {
      --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
      --tw-shadow-color: var(--hgc-card-shadow-color);
      &:hover, &:focus {
        --tw-shadow-color: var(--hgc-card-shadow-color-hover);
      }
    }
  }
  .card .card--media {
    aspect-ratio: var(--hg-aspect-video, 16 / 9);
  }
  .card.is-stacked .card--media {
    aspect-ratio: var(--hg-aspect-video, 16 / 9);
    overflow: hidden;
  }
  .card.is-landscape .card--media {
    aspect-ratio: var(--hg-aspect-video, 16 / 9);
    overflow: hidden;
    @media (width >= 48rem) {
      aspect-ratio: auto;
    }
    @media (width >= 48rem) {
      flex: 0 1 50%;
    }
  }
  .card.is-landscape .card--content {
    @media (width >= 48rem) {
      flex: 0 1 50%;
    }
    @media (width >= 48rem) {
      padding-block: calc(var(--hg-spacing, 4px) * 4);
    }
  }
  .card--content .heading {
    --tw-font-weight: var(--hg-font-weight-semibold, 600);
    font-weight: var(--hg-font-weight-semibold, 600);
  }
  .card--content p {
    font-size: var(--hg-text-lg, 1.125rem);
    line-height: var(--tw-leading, var(--hg-text-lg--line-height, 1.5));
    --tw-font-weight: var(--hgc-font-weight-p);
    font-weight: var(--hgc-font-weight-p);
    @media (width >= 80rem) {
      font-size: var(--hg-text-xl, 1.25rem);
      line-height: var(--tw-leading, var(--hg-text-xl--line-height, 1.5));
    }
  }
  .card:not(:has(.badge)) .heading a {
    &::after {
      content: var(--tw-content);
      position: absolute;
    }
    &::after {
      content: var(--tw-content);
      inset: calc(var(--hg-spacing, 4px) * 0);
    }
    &::after {
      --tw-content: '';
      content: var(--tw-content);
    }
  }
}
@property --tw-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-inset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-inset-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-inset-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-ring-color {
  syntax: "*";
  inherits: false;
}
@property --tw-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-inset-ring-color {
  syntax: "*";
  inherits: false;
}
@property --tw-inset-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-ring-inset {
  syntax: "*";
  inherits: false;
}
@property --tw-ring-offset-width {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}
@property --tw-ring-offset-color {
  syntax: "*";
  inherits: false;
  initial-value: #fff;
}
@property --tw-ring-offset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-font-weight {
  syntax: "*";
  inherits: false;
}
@property --tw-content {
  syntax: "*";
  initial-value: "";
  inherits: false;
}
@layer properties {
  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
    *, ::before, ::after, ::backdrop {
      --tw-shadow: 0 0 #0000;
      --tw-shadow-color: initial;
      --tw-shadow-alpha: 100%;
      --tw-inset-shadow: 0 0 #0000;
      --tw-inset-shadow-color: initial;
      --tw-inset-shadow-alpha: 100%;
      --tw-ring-color: initial;
      --tw-ring-shadow: 0 0 #0000;
      --tw-inset-ring-color: initial;
      --tw-inset-ring-shadow: 0 0 #0000;
      --tw-ring-inset: initial;
      --tw-ring-offset-width: 0px;
      --tw-ring-offset-color: #fff;
      --tw-ring-offset-shadow: 0 0 #0000;
      --tw-font-weight: initial;
      --tw-content: "";
    }
  }
}
