/*
  Wojo Framework 4.0 — Cards
  Namespace prefix: .wf-card
  Requires: wf-layout.css, wf-colors.css

  Basic (no sub-components):
    <div class="wf-card">Any content</div>
*/
.wf-card {
   --_card-spacing: 1.5rem;
   --space-sm: 0.5rem;
   --space-md: 0.75rem;
   --space-lg: 2.5rem;
   --_card-padding: var(--_card-spacing);
   box-shadow: var(--wf-shadow-soft);
   display: block;
   position: relative;
   overflow: hidden;
   padding: var(--_card-padding);
   background-color: var(--wf-surface, #fff);
   border: 1px solid var(--wf-border, #d8dfec);
   border-radius: var(--wf-radius-surface, var(--wf-radius-5));
}
.wf-card.wf-stack {
   display: flex;
   flex-direction: column;
}
.wf-card.is-media {
   padding: 0;
}
.wf-card:has(> :is(.wf-card-header,
.wf-card-body,
.wf-card-footer,
.wf-card-media,
.wf-card-actions)) {
   --_card-padding: 0;
}
.wf-card-header,
.wf-card-body,
.wf-card-footer,
.wf-card-actions {
   padding: var(--_card-spacing);
}
.wf-card-media {
   flex-shrink: 0;
   overflow: hidden;
   position: relative;
}
.wf-card-media img,
.wf-card-media video {
   object-fit: cover;
   display: block;
   width: 100%;
}
.wf-card-media.wf-flex-1 {
   flex: 1 0 0;
   min-height: 10rem;
}
.wf-card-media.wf-flex-1.wf-card-media-xs {
   min-height: 6rem;
}
.wf-card-media.wf-flex-1.wf-card-media-sm {
   min-height: 10rem;
}
.wf-card-media.wf-flex-1.wf-card-media-md {
   min-height: 14rem;
}
.wf-card-media.wf-flex-1.wf-card-media-lg {
   min-height: 18rem;
}
.wf-card-media.wf-flex-1 img,
.wf-card-media.wf-flex-1 video {
   height: 100%;
}
.wf-card-media-xs {
   height: 6rem;
}
.wf-card-media-sm {
   height: 10rem;
}
.wf-card-media-md {
   height: 14rem;
}
.wf-card-media-lg {
   height: 18rem;
}
.wf-card-media-xs img,
.wf-card-media-sm img,
.wf-card-media-md img,
.wf-card-media-lg img,
.wf-card-media-sm video,
.wf-card-media-md video,
.wf-card-media-lg video {
   height: 100%;
}
.wf-card-header {
   border-block-end: 1px solid var(--wf-border, #d8dfec);
   display: flex;
   align-items: center;
   gap: .75rem;
   padding: var(--_card-spacing);
   font-size: 1rem;
   font-weight: 600;
}
.wf-card-header-actions {
   display: flex;
   align-items: center;
   gap: .5rem;
   flex-shrink: 0;
}
.wf-card-header-actions:dir(ltr) {
   margin-inline-start: auto;
}
.wf-card-header-actions:dir(rtl) {
   margin-inline-end: auto;
}
.wf-card-body {
   flex: auto;
   position:relative;
   padding: var(--_card-spacing);
}
.wf-card-footer {
   border-block-start: 1px solid var(--wf-border, #d8dfec);
   display: flex;
   align-items: center;
   gap: .75rem;
   padding: var(--_card-spacing);
   font-size: .875rem;
   color: var(--wf-text-muted, #5b6474);
}
.wf-card-footer-actions {
   display: flex;
   align-items: center;
   gap: .5rem;
   flex-shrink: 0;
}
.wf-card-dense,
.wf-card-dense > :is(.wf-card-header,
    .wf-card-body,
    .wf-card-footer,
    .wf-card-actions) {
   padding: var(--space-sm);
}
.wf-card-compact,
.wf-card-compact > :is(.wf-card-header,
    .wf-card-body,
    .wf-card-footer,
    .wf-card-actions) {
   padding: var(--space-md);
}
.wf-card-spacious,
.wf-card-spacious > :is(.wf-card-header,
    .wf-card-body,
    .wf-card-footer,
    .wf-card-actions) {
   padding: var(--space-lg);
}
.wf-card-footer-actions:dir(ltr) {
   margin-inline-start: auto;
}
.wf-card-footer-actions:dir(rtl) {
   margin-inline-end: auto;
}
.wf-card-filled {
   box-shadow: none;
   background-color: var(--wf-surface-subtle, #f5f7fb);
   border-color: transparent;
}
.wf-card-filled-outlined {
   background-color: var(--wf-surface-subtle, #f5f7fb);
}
.wf-card-plain {
   box-shadow: none;
   background-color: transparent;
   border-color: transparent;
}
.wf-card-plain-outlined {
   box-shadow: none;
   background-color: var(--wf-surface, #fff);
   border-color: var(--wf-border, #d8dfec);
}
.wf-card-borderless {
   border: transparent;
   box-shadow: none;
   overflow: visible;
}
.wf-card-borderless .wf-card-body {
   background-color: var(--wf-surface, #fff);
   border-radius: var(--wf-radius-surface, var(--wf-radius-5));
}
.wf-card-borderless::before {
   content: "";
   position: absolute;
   top: 1.75rem;
   left: 0.875rem;
   right: 1.125rem;
   bottom: -1.75rem;
   z-index: 0;
   border-radius: var(--wf-radius-surface, var(--wf-radius-5));
   background-color: var(--card-shadow-bg);
   filter: blur(var(--card-shadow-blur));
   pointer-events: none;
}
.wf-card-hoverable {
   transition: box-shadow .2s, transform .2s;
   cursor: pointer;
   color: inherit;
   text-decoration: none;
}
.wf-card-hoverable:hover {
   box-shadow: var(--wf-shadow-raised);
   transform: translateY(-2px);
}
.wf-card-horizontal {
   display: flex;
   flex-direction: row;
   align-items: stretch;
}
.wf-card-horizontal > .wf-card-media {
   display: flex;
   flex: 0 0 clamp(14rem, 36%, 24rem);
   align-self: stretch;
   min-width: 0;
}
.wf-card-horizontal > .wf-card-media img,
.wf-card-horizontal > .wf-card-media video {
   flex: 1 1 auto;
   width: 100%;
   max-width: none;
   height: 100%;
}
/* In horizontal cards, media size modifiers define a stable column width and minimum height. */
.wf-card-horizontal > .wf-card-media.wf-card-media-xs {
   flex-basis: 9rem;
   min-height: 6rem;
}
.wf-card-horizontal > .wf-card-media.wf-card-media-sm {
   flex-basis: 13.5rem;
   min-height: 10rem;
}
.wf-card-horizontal > .wf-card-media.wf-card-media-md {
   flex-basis: 18.5rem;
   min-height: 14rem;
}
.wf-card-horizontal > .wf-card-media.wf-card-media-lg {
   flex-basis: 24rem;
   min-height: 18rem;
}
.wf-card-horizontal > .wf-card-body {
   flex: 1;
}
.wf-card-actions {
   display: flex;
   justify-content: center;
   align-items: center;
   gap: .5rem;
   flex-shrink: 0;
   padding: var(--_card-spacing);
}
.wf-card-actions:dir(ltr) {
   border-inline-start: 1px solid var(--wf-border, #d8dfec);
}
.wf-card-actions:dir(rtl) {
   border-inline-end: 1px solid var(--wf-border, #d8dfec);
}
.wf-card-primary {
   --_c: var(--primary-color);
   --_c-bg: var(--primary-color-inverted);
   border-block-start: 3px solid var(--primary-color);
}
.wf-card-secondary {
   --_c: var(--secondary-color);
   --_c-bg: var(--secondary-color-inverted);
   border-block-start: 3px solid var(--secondary-color);
}
.wf-card-positive {
   --_c: var(--positive-color);
   --_c-bg: var(--positive-color-inverted);
   border-block-start: 3px solid var(--positive-color);
}
.wf-card-negative {
   --_c: var(--negative-color);
   --_c-bg: var(--negative-color-inverted);
   border-block-start: 3px solid var(--negative-color);
}
.wf-card-alert {
   --_c: var(--alert-color);
   --_c-bg: var(--alert-color-inverted);
   border-block-start: 3px solid var(--alert-color);
}
.wf-card-info {
   --_c: var(--info-color);
   --_c-bg: var(--info-color-inverted);
   border-block-start: 3px solid var(--info-color);
}
.wf-card-sage {
   --_c: var(--sage-color);
   --_c-bg: var(--sage-color-inverted);
   border-block-start: 3px solid var(--sage-color);
}
.wf-card-indigo {
   --_c: var(--indigo-color);
   --_c-bg: var(--indigo-color-inverted);
   border-block-start: 3px solid var(--indigo-color);
}
.wf-card-earth {
   --_c: var(--earth-color);
   --_c-bg: var(--earth-color-inverted);
   border-block-start: 3px solid var(--earth-color);
}
.wf-card-forest {
   --_c: var(--forest-color);
   --_c-bg: var(--forest-color-inverted);
   border-block-start: 3px solid var(--forest-color);
}
.wf-card-plum {
   --_c: var(--plum-color);
   --_c-bg: var(--plum-color-inverted);
   border-block-start: 3px solid var(--plum-color);
}
.wf-card-lavender {
   --_c: var(--lavender-color);
   --_c-bg: var(--lavender-color-inverted);
   border-block-start: 3px solid var(--lavender-color);
}
.wf-card-dusk {
   --_c: var(--dusk-color);
   --_c-bg: var(--dusk-color-inverted);
   border-block-start: 3px solid var(--dusk-color);
}
.wf-card-light {
   --_c: var(--light-color);
   --_c-bg: var(--light-color);
   border-block-start: 3px solid var(--grey-color-700, #9aabbd);
}
.wf-card-dark {
   --_c: var(--dark-color);
   --_c-bg: var(--grey-color-500, #eaecf0);
   border-block-start: 3px solid var(--dark-color);
}
.wf-card-filled.wf-card-primary {
   background-color: var(--primary-color-inverted);
}
.wf-card-filled.wf-card-secondary {
   background-color: var(--secondary-color-inverted);
}
.wf-card-filled.wf-card-positive {
   background-color: var(--positive-color-inverted);
}
.wf-card-filled.wf-card-negative {
   background-color: var(--negative-color-inverted);
}
.wf-card-filled.wf-card-alert {
   background-color: var(--alert-color-inverted);
}
.wf-card-filled.wf-card-info {
   background-color: var(--info-color-inverted);
}
.wf-card-filled.wf-card-sage {
   background-color: var(--sage-color-inverted);
}
.wf-card-filled.wf-card-indigo {
   background-color: var(--indigo-color-inverted);
}
.wf-card-filled.wf-card-earth {
   background-color: var(--earth-color-inverted);
}
.wf-card-filled.wf-card-forest {
   background-color: var(--forest-color-inverted);
}
.wf-card-filled.wf-card-plum {
   background-color: var(--plum-color-inverted);
}
.wf-card-filled.wf-card-lavender {
   background-color: var(--lavender-color-inverted);
}
.wf-card-filled.wf-card-dusk {
   background-color: var(--dusk-color-inverted);
}
.wf-card-filled.wf-card-light {
   background-color: var(--light-color);
}
.wf-card-filled.wf-card-dark {
   background-color: var(--grey-color-500, #eaecf0);
}
.wf-card-primary > .wf-card-header {
   background-color: var(--primary-color-inverted);
}
.wf-card-secondary > .wf-card-header {
   background-color: var(--secondary-color-inverted);
}
.wf-card-positive > .wf-card-header {
   background-color: var(--positive-color-inverted);
}
.wf-card-negative > .wf-card-header {
   background-color: var(--negative-color-inverted);
}
.wf-card-alert > .wf-card-header {
   background-color: var(--alert-color-inverted);
}
.wf-card-info > .wf-card-header {
   background-color: var(--info-color-inverted);
}
.wf-card-sage > .wf-card-header {
   background-color: var(--sage-color-inverted);
}
.wf-card-indigo > .wf-card-header {
   background-color: var(--indigo-color-inverted);
}
.wf-card-earth > .wf-card-header {
   background-color: var(--earth-color-inverted);
}
.wf-card-forest > .wf-card-header {
   background-color: var(--forest-color-inverted);
}
.wf-card-plum > .wf-card-header {
   background-color: var(--plum-color-inverted);
}
.wf-card-lavender > .wf-card-header {
   background-color: var(--lavender-color-inverted);
}
.wf-card-dusk > .wf-card-header {
   background-color: var(--dusk-color-inverted);
}
.wf-card-light > .wf-card-header {
   background-color: var(--light-color);
}
.wf-card-dark > .wf-card-header {
   background-color: var(--grey-color-500, #eaecf0);
}
/* Stack horizontal cards on mobile/touch widths; keep row layout from tablet up. */
@media (max-width: 61.999rem) {
   .wf-card-horizontal {
      flex-direction: column;
   }
   .wf-card-horizontal > .wf-card-media,
   .wf-card-horizontal > .wf-card-media.wf-card-media-sm,
   .wf-card-horizontal > .wf-card-media.wf-card-media-md,
   .wf-card-horizontal > .wf-card-media.wf-card-media-lg {
      flex-basis: auto;
      width: 100%;
   }
}