/*! tailwindcss v4.1.10 | MIT License | https://tailwindcss.com */

.card {
  border: 0;
  display: flex;
  flex-direction: column;
  place-content: space-between;
  overflow: hidden;
  border-radius: var(--radius-xl, 0.75rem);
  &.card--has-content, &.card--has-tags, &.card--has-footer {
    .card__header {
      padding-bottom: calc(var(--spacing, 0.25rem) * 0) !important;
    }
  }
  &.card--has-tags, &.card--has-footer {
    .card__content {
      padding-bottom: calc(var(--spacing, 0.25rem) * 0) !important;
    }
  }
  &.card--has-footer {
    .card__tags {
      padding-bottom: calc(var(--spacing, 0.25rem) * 0) !important;
    }
  }
  &.card--has-header {
    .card__content, .card__tags, .card__footer, .card__media {
      padding-top: calc(var(--spacing, 0.25rem) * 2) !important;
    }
  }
  &.card--has-header.card--medium {
    .card__content, .card__tags, .card__footer, .card__media {
      padding-top: calc(var(--spacing, 0.25rem) * 4) !important;
    }
  }
  &.card--has-header.card--image-top {
    .card__media {
      padding-top: calc(var(--spacing, 0.25rem) * 0) !important;
    }
  }
  &.card--has-content {
    .card__tags, .card__footer {
      padding-top: calc(var(--spacing, 0.25rem) * 2) !important;
    }
  }
  &.card--has-content.card--medium {
    .card__tags, .card__footer {
      padding-top: calc(var(--spacing, 0.25rem) * 4) !important;
    }
  }
  &.card--has-tags {
    .card__footer {
      padding-top: calc(var(--spacing, 0.25rem) * 2) !important;
    }
  }
  &.card--has-tags.card--medium {
    .card__footer {
      padding-top: calc(var(--spacing, 0.25rem) * 4) !important;
    }
  }
}
.card.card--medium {
  border-radius: var(--radius-3xl, 1.5rem);
}
.card--horizontal {
  flex-direction: row;
}
.card__header, .card__content, .card__tags, .card__footer {
  padding: calc(var(--spacing, 0.25rem) * 4);
}
.card--medium {
  .card__header, .card__content, .card__tags, .card__footer {
    padding: calc(var(--spacing, 0.25rem) * 8);
  }
}
.card__header {
  display: flex;
  width: 100%;
}
.card--header_vertical_left, .card--header_vertical_center, .card--header_vertical_right {
  .card__header {
    flex-direction: column !important;
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing, 0.25rem) * 2) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing, 0.25rem) * 2) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
}
.card--medium.card--header_vertical_left, .card--medium.card--header_vertical_center, .card--medium.card--header_vertical_right {
  .card__header {
    flex-direction: column !important;
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing, 0.25rem) * 4) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing, 0.25rem) * 4) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
}
.card--header_vertical_left {
  .card__header {
    align-items: flex-start;
  }
}
.card--header_vertical_center {
  .card__header {
    align-items: center;
  }
}
.card--header_vertical_right {
  .card__header {
    align-items: flex-end;
  }
}
.card--header_horizontal_left, .card--header_horizontal_center, .card--header_horizontal_right {
  .card__header {
    flex-direction: row !important;
    align-items: center;
    :where(& > :not(:last-child)) {
      --tw-space-x-reverse: 0;
      margin-inline-start: calc(calc(var(--spacing, 0.25rem) * 2) * var(--tw-space-x-reverse));
      margin-inline-end: calc(calc(var(--spacing, 0.25rem) * 2) * calc(1 - var(--tw-space-x-reverse)));
    }
  }
}
.card--medium.card--header_horizontal_left, .card--medium.card--header_horizontal_center, .card--medium.card--header_horizontal_right {
  .card__header {
    flex-direction: row !important;
    align-items: center;
    :where(& > :not(:last-child)) {
      --tw-space-x-reverse: 0;
      margin-inline-start: calc(calc(var(--spacing, 0.25rem) * 4) * var(--tw-space-x-reverse));
      margin-inline-end: calc(calc(var(--spacing, 0.25rem) * 4) * calc(1 - var(--tw-space-x-reverse)));
    }
  }
}
.card--header_horizontal_left {
  .card__header {
    justify-content: flex-start;
  }
}
.card--header_horizontal_center {
  .card__header {
    justify-content: center;
  }
}
.card--header_horizontal_right {
  .card__header {
    justify-content: flex-end;
  }
}
.card--elevated {
  --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);
}
.card-medium.card--elevated {
  --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px 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);
}
.card--outlined {
  border-style: var(--tw-border-style) !important;
  border-width: 1px !important;
  border-color: var(--color-gray-200, oklch(92.8% 0.006 264.531));
  &:hover {
    @media (hover: hover) {
      border-color: var(--color-gray-900, oklch(21% 0.034 264.665));
    }
  }
}
.card--shadow {
  --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px 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);
  &.card--interactive {
    &:hover {
      @media (hover: hover) {
        --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px 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);
      }
    }
  }
}
.card--medium.card--shadow {
  --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);
  &.card--interactive {
    &:hover {
      @media (hover: hover) {
        --tw-shadow: 0 25px 50px -12px var(--tw-shadow-color, rgb(0 0 0 / 0.25));
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
      }
    }
  }
}
.card__title {
  font-size: var(--text-lg, 1.125rem);
  line-height: var(--tw-leading, var(--text-lg--line-height, calc(1.75 / 1.125)));
  --tw-leading: var(--leading-tight, 1.25);
  line-height: var(--leading-tight, 1.25);
  --tw-font-weight: var(--font-weight-semibold, 600);
  font-weight: var(--font-weight-semibold, 600);
}
.card__subtitle {
  font-size: var(--text-sm, 0.875rem);
  line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / 0.875)));
  color: var(--color-secondary-foreground, #4a5565);
}
.card__metadata {
  display: flex;
  align-items: center;
  font-size: var(--text-xs, 0.75rem);
  line-height: var(--tw-leading, var(--text-xs--line-height, calc(1 / 0.75)));
  --tw-leading: var(--leading-tight, 1.25);
  line-height: var(--leading-tight, 1.25);
  color: var(--color-secondary-foreground, #4a5565);
}
.card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--spacing, 0.25rem) * 1);
}
.card__tag {
  display: inline-block;
  border-radius: calc(infinity * 1px);
  background-color: var(--color-secondary, #e9e9e9);
  padding-inline: calc(var(--spacing, 0.25rem) * 2);
  padding-block: calc(var(--spacing, 0.25rem) * 0.5);
  font-size: var(--text-xs, 0.75rem);
  line-height: var(--tw-leading, var(--text-xs--line-height, calc(1 / 0.75)));
  color: var(--color-secondary-foreground, #4a5565);
}
.card__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: calc(var(--spacing, 0.25rem) * 1);
  padding-top: calc(var(--spacing, 0.25rem) * 1);
}
.card--medium.card__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: calc(var(--spacing, 0.25rem) * 2);
  padding-top: calc(var(--spacing, 0.25rem) * 2);
}
.card__action {
  display: inline-flex;
  height: calc(var(--spacing, 0.25rem) * 7);
  align-items: center;
  justify-content: center;
  gap: calc(var(--spacing, 0.25rem) * 1);
  border-radius: calc(infinity * 1px);
  padding-inline: calc(var(--spacing, 0.25rem) * 3);
  font-size: var(--text-xs, 0.75rem);
  line-height: var(--tw-leading, var(--text-xs--line-height, calc(1 / 0.75)));
  white-space: nowrap;
  --tw-ring-offset-color: var(--color-background, #ffffff);
  transition-property: all;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1)));
  transition-duration: var(--tw-duration, var(--default-transition-duration, 150ms));
  --tw-duration: 300ms;
  transition-duration: 300ms;
  &:hover {
    @media (hover: hover) {
      color: var(--color-accent, #262931);
    }
  }
  &:focus-visible {
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  &:focus-visible {
    --tw-ring-offset-width: 1px;
    --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  }
  &:focus-visible {
    --tw-outline-style: none;
    outline-style: none;
  }
  &:disabled {
    pointer-events: none;
  }
  &:disabled {
    opacity: 50%;
  }
}
.card--medium .card__action {
  height: calc(var(--spacing, 0.25rem) * 9);
  gap: calc(var(--spacing, 0.25rem) * 2);
  border-radius: calc(infinity * 1px);
  padding-inline: calc(var(--spacing, 0.25rem) * 4);
  font-size: var(--text-sm, 0.875rem);
  line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / 0.875)));
  --tw-font-weight: var(--font-weight-medium, 500);
  font-weight: var(--font-weight-medium, 500);
  &:focus-visible {
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  &:focus-visible {
    --tw-ring-offset-width: 2px;
    --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  }
}
.card__action--primary {
  background-color: var(--color-accent, #262931);
  color: var(--color-accent-foreground, #f4f4f4);
}
.card__action--primary:hover {
  background-color: color-mix(in srgb, #262931 80%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in oklab, var(--color-accent, #262931) 80%, transparent);
  }
  color: var(--color-accent-foreground, #f4f4f4);
}
.card__action--accent {
  background-color: var(--color-secondary, #e9e9e9);
  color: var(--color-secondary-foreground, #4a5565);
}
.card__action--accent:hover {
  background-color: color-mix(in srgb, #e9e9e9 80%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in oklab, var(--color-secondary, #e9e9e9) 80%, transparent);
  }
  color: var(--color-secondary-foreground, #4a5565);
}