.fs-block-card {
  --fs-gap: var(--fs-blocks-spacing-sm);
  --bg-color: transparent;
  --border-radius: 0px;
  --border-width: 0px;

  container-type: inline-size;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;

  &:where(.has-link) {

    * {
      pointer-events: none;
    }

    a:not(.fs-block-card__link),
    button {
      position: relative;
      z-index: 3;
      pointer-events: all;
    }
  }
}

.fs-block-card:where(.fs-background) {
  padding-inline: 0;
  padding-block: 0;

  .fs-block-card-content {
    padding-inline: var(--fs-background-padding-inline);
    padding-block: var(--fs-background-padding-block);
  }
}

.fs-block-card-image+.fs-block-card-content {
  padding-block-start: 0;
}

.fs-block-card-image.fs-block-image {
  width: 100%;
  border-top-left-radius: calc(var(--border-radius) - var(--border-width));
  border-top-right-radius: calc(var(--border-radius) - var(--border-width));
}

.fs-block-card-image__inner-blocks {
  position: absolute;
  inset: 0;
}

.fs-block-card-content {
  flex: 1;
  z-index: 1;
  position: relative;
  border-bottom-left-radius: calc(var(--border-radius) - var(--border-width));
  border-bottom-right-radius: calc(var(--border-radius) - var(--border-width));
}

.fs-block-card__link {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: all;
}

.fs-block-card:where(.is-style-overlay),
.fs-block-card:where(.is-style-shade) {
  --bg-color: transparent;

  display: grid;

  >* {
    grid-area: 1 / 1;
  }

  .fs-block-card-image .fs-block-image__media {
    height: 100%;
  }

  .fs-block-card-image .fs-block-image__img {
    width: 100%;
    min-height: 100%;
    object-fit: cover;
  }

  .fs-block-card-content {
    z-index: 1;
    align-self: end;
    padding: var(--fs-blocks-spacing-base);
    text-shadow: var(--wp--preset--shadow--natural);
  }
}

.fs-block-card:where(.is-style-overlay) {
  .fs-block-card-image::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.15);
    pointer-events: none;
  }
}

.fs-block-card:where(.is-style-shade) {
  .fs-block-card-image {
    position: relative;

    &::after {
      content: " ";
      position: absolute;
      inset: 0;
      border-radius: inherit;
      background: rgba(0, 0, 0, 0.2);
      background: linear-gradient(0deg, #323232 0, rgba(50, 50, 50, 0) 33%);
      opacity: 0.3;
      pointer-events: none;
      transition: opacity 0.3s;
      backface-visibility: hidden;
    }
  }
}

.fs-block-card:where(.is-style-badge) {
  --bg-color: transparent;

  display: grid;
  overflow: hidden;

  >* {
    grid-area: 1 / 1;
  }

  .fs-block-card-image {
    container-type: normal;
  }

  .fs-block-card-image .fs-block-image__media {
    height: 100%;
  }

  .fs-block-card-image .fs-block-image__img {
    width: 100%;
    min-height: 100%;
    object-fit: cover;
  }

  .fs-block-card-content {
    --border-radius: 0;

    position: relative;
    z-index: 1;
    align-self: end;
    margin-block: 15%;
    padding-inline: var(--fs-blocks-spacing-base);
    padding-block: var(--fs-blocks-spacing-sm);
    color: var(--fs-blocks-color-foreground);
    background: color-mix(in srgb, var(--fs-blocks-color-background) 95%, transparent);
    transition: background-color var(--fs-blocks-duration);
  }
}

.fs-block-card:where(.is-style-push) {
  .fs-block-card-content {
    width: 85%;
    margin-inline: auto;
    padding-inline: var(--fs-blocks-spacing-base);
    padding-block: var(--fs-blocks-spacing-sm);
    color: var(--fs-blocks-color-foreground);
    background: color-mix(in srgb, var(--fs-blocks-color-background) 95%, transparent);
    translate: 0 -15%;
    transition: translate var(--fs-blocks-duration);
  }

  &:hover .fs-block-card-content {
    translate: 0 -20%;
  }
}

.fs-block-card:where(.is-style-vertical) {
  --fs-gap: var(--fs-blocks-spacing-xl);
  /* Same as row */

  flex-direction: row;

  .fs-block-card-image {
    flex: 0 0 calc(50% - var(--fs-gap) / 2);
  }

  .fs-block-card-content {
    flex: 1;
    align-self: center;
  }
}

.fs-block-card.has-hover {
  --hover-opacity-from: 1;
  --hover-opacity-to: 1;
  --hover-scale-from: 1;
  --hover-scale-to: 1;
  --hover-translate-x-from: 0;
  --hover-translate-x-to: 0;
  --hover-translate-y-from: 0;
  --hover-translate-y-to: 0;
  --hover-blur-from: 0px;
  --hover-blur-to: 0px;

  .fs-block-card-content {
    transition-property: translate, opacity, scale, filter;
    transition-duration: var(--fs-blocks-duration);
    transform-origin: center;
    opacity: var(--hover-opacity-from);
    scale: var(--hover-scale-from);
    translate: var(--hover-translate-x-from) var(--hover-translate-y-from);
    filter: blur(var(--hover-blur-from));
  }

  &:hover {
    .fs-block-card-content {
      opacity: var(--hover-opacity-to);
      scale: var(--hover-scale-to);
      translate: var(--hover-translate-x-to) var(--hover-translate-y-to);
      filter: blur(var(--hover-blur-to));
    }
  }

  &.with-hover-fade-in {
    --hover-opacity-from: 0;
  }

  &.with-hover-slide-in {
    --hover-opacity-from: 0;
    --hover-translate-x-from: -1em;
  }

  &.with-hover-zoom-in {
    --hover-opacity-from: 0;
    --hover-scale-from: 0.9;
  }

  &.with-hover-zoom-out {
    --hover-opacity-from: 0;
    --hover-scale-from: 1.1;
  }

  &.with-hover-blur-in {
    --hover-opacity-from: 0;
    --hover-blur-from: 4px;
  }

  &.with-hover-bounce {
    --hover-translate-y-from: 1em;
    --hover-translate-y-to: 0;
  }
}