/*
 Cards
========================================================================== */
.block-cards .f-carousel.has-dots {
  margin-bottom: 0 !important;
}
@media (480px <= width <= 1280px) {
  .block-cards
    .has-dots
    .f-carousel__viewport:has(.f-carousel__slide.is-selected:first-child) {
    mask-image: linear-gradient(to left, transparent 0%, black 10%) !important;
  }
  .block-cards
    .has-dots
    .f-carousel__viewport:has(
      .f-carousel__slide + .f-carousel__slide.is-selected
    ) {
    mask-image: linear-gradient(
      to right,
      transparent 0%,
      black 10%,
      black 50%,
      black 90%,
      transparent 100%
    );
  }
  .block-cards
    .has-dots
    .f-carousel__viewport:has(.f-carousel__slide.is-selected:last-child) {
    mask-image: linear-gradient(to right, transparent 0%, black 10%);
  }
}
.block-cards .no-carousel {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(0.625rem, -0.125rem + 0.025 * 100vw, 1.875rem);
  justify-content: center;
}
.block-cards .no-carousel .f-carousel__slide {
  margin: 0;
  max-width: 380px;
  width: calc(
    (100% - 0 * clamp(0.625rem, -0.125rem + 0.025 * 100vw, 1.875rem)) / 1
  );
}
@media screen and (min-width: 576px) {
  .block-cards .no-carousel .f-carousel__slide {
    width: calc(
      (100% - 1 * clamp(0.625rem, -0.125rem + 0.025 * 100vw, 1.875rem)) / 2
    );
    max-width: 100%;
  }
}
@media screen and (min-width: 992px) {
  .block-cards .no-carousel .f-carousel__slide {
    width: calc(
      (100% - 2 * clamp(0.625rem, -0.125rem + 0.025 * 100vw, 1.875rem)) / 3
    );
  }
}
@media screen and (min-width: 1280px) {
  .block-cards .no-carousel .f-carousel__slide {
    width: calc(
      (100% - 3 * clamp(0.625rem, -0.125rem + 0.025 * 100vw, 1.875rem)) / 4
    );
  }
}
.block-cards .f-carousel__dots {
  position: relative;
  bottom: unset;
}
.block-cards .f-carousel__dots button {
  align-items: self-end;
}
.block-cards .f-carousel > .block-list-appender {
  flex-shrink: 0;
  width: 100%;
  align-self: center;
  max-width: 100%;
  border: 1px solid rgba(119, 119, 119, 0.2);
  margin: 0;
  padding: 10px;
  display: flex;
  position: sticky;
  top: calc(100% - 10px);
  right: calc(50% - 90px);
  gap: 0 10px;
  justify-content: center;
  align-items: center;
  background-color: white;
  border-radius: 6px;
}
.block-cards .f-carousel > .block-list-appender::before {
  content: "Add Card Item";
  font-size: 14px;
}
.block-cards .f-carousel > .block-list-appender button {
  background: var(--primary-button-bg);
  color: var(--primary-button-text);
}
.block-cards .f-carousel > .block-list-appender button:hover {
  background: var(--primary-button-hover);
}
.block-cards .f-carousel:not(.no-carousel) > .block-list-appender {
  width: 180px;
  height: 80px;
}

/*
 Card Item
========================================================================== */
.block-cards .f-carousel-card {
  position: relative;
  background: var(--color-background);
  width: 100%;
  padding: clamp(1.875rem, 1.5rem + 0.0125 * 100vw, 2.5rem);
  margin: 0 clamp(0.625rem, -0.125rem + 0.025 * 100vw, 1.875rem) 0 0;
  border-radius: clamp(0.625rem, 0.25rem + 0.0125 * 100vw, 1.25rem);
  box-shadow: inset 0 0 0 1px var(--color-border);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  container-type: inline-size;
}
@media screen and (min-width: 480px) {
  .block-cards .f-carousel-card {
    width: calc(
      (100% - 0.5 * clamp(0.625rem, -0.125rem + 0.025 * 100vw, 1.875rem)) / 1.5
    );
  }
}
@media screen and (min-width: 768px) {
  .block-cards .f-carousel-card {
    width: calc(
      (100% - 1 * clamp(0.625rem, -0.125rem + 0.025 * 100vw, 1.875rem)) / 2
    );
  }
}
@media screen and (min-width: 992px) {
  .block-cards .f-carousel-card {
    width: calc(
      (100% - 1.5 * clamp(0.625rem, -0.125rem + 0.025 * 100vw, 1.875rem)) / 2.5
    );
  }
}
@media screen and (min-width: 1280px) {
  .block-cards .f-carousel-card {
    width: calc(
      (100% - 2 * clamp(0.625rem, -0.125rem + 0.025 * 100vw, 1.875rem)) / 3
    );
  }
}
.block-cards .f-carousel-card figure {
  margin-inline: calc(clamp(1.875rem, 1.5rem + 0.0125 * 100vw, 2.5rem) * -1);
  aspect-ratio: 45/30;
  position: relative;
  overflow: hidden;
  width: calc(100% + clamp(1.875rem, 1.5rem + 0.0125 * 100vw, 2.5rem) * 2);
  order: 1;
  border-radius: clamp(0.625rem, 0.25rem + 0.0125 * 100vw, 1.25rem)
    clamp(0.625rem, 0.25rem + 0.0125 * 100vw, 1.25rem) 0 0;
  margin-top: calc(clamp(1.875rem, 1.5rem + 0.0125 * 100vw, 2.5rem) * -1);
  margin-bottom: 32px;
}
.block-cards .f-carousel-card figure img,
.block-cards .f-carousel-card figure picture {
  position: absolute;
  z-index: 0;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform-style: preserve-3d;
}
.block-cards .contain-image .f-carousel-card figure img,
.block-cards .contain-image .f-carousel-card figure picture {
  position: absolute;
  z-index: 0;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform-style: preserve-3d;
}
.block-cards .image-bottom .f-carousel-card figure {
  order: 4;
  border-radius: 0 0 var(--border-radius) var(--border-radius);
  margin-top: 32px;
  margin-bottom: calc(clamp(1.875rem, 1.5rem + 0.0125 * 100vw, 2.5rem) * -1);
}
.block-cards .image-bottom.contain-image .f-carousel-card figure {
  margin: 32px auto calc(clamp(1.875rem, 1.5rem + 0.0125 * 100vw, 2.5rem) * -1)
    auto;
}
.block-cards .contain-image .f-carousel-card figure {
  width: 100%;
  margin: 0 auto 32px auto;
  aspect-ratio: 4/3;
  border-radius: 0;
}
.block-cards .f-carousel-card .card-wrapper {
  order: 2;
  margin-bottom: 32px;
}
.block-cards .f-carousel-card .muted-heading {
  margin: 0;
  font-size: 0.8125rem;
}
.block-cards .f-carousel-card .card-title {
  font-size: clamp(1.25rem, 0.9861111111rem + 0.0148148148 * 100cqw, 1.375rem);
  margin: 20px 0 0 0;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.block-cards .f-carousel-card .card-blurb {
  font-size: 0.9375rem;
  margin-top: 10px;
  line-height: 1.6;
}
.block-cards .f-carousel-card .btn {
  width: 100%;
  margin-top: auto !important;
  order: 3;
}
.block-cards .f-carousel-card .btn:hover {
  background: var(--primary-button-hover) !important;
  color: var(--color-background);
  box-shadow: none;
}
.block-cards .image-bottom .f-carousel-card .btn {
  margin-top: auto !important;
}
.block-cards .center-content .f-carousel-card {
  align-items: center;
  text-align: center;
}

/*
 Backend
========================================================================== */
.wp-block-meta-cards .f-carousel:not(.no-carousel) {
  overflow-x: scroll;
  overflow-y: auto;
  display: flex;
  gap: 20px;
}
.wp-block-meta-cards .f-carousel:not(.no-carousel) .wp-block-meta-card-item {
  min-width: 360px;
  width: calc(33.333% - 14px);
}
.wp-block-meta-cards.is-selected
  .f-carousel:not(.no-carousel)
  .wp-block-meta-card-item {
  min-width: 360px;
  width: calc(30% - 12px);
}
.wp-block-meta-cards .wp-block-meta-card-item {
  min-width: 360px;
  width: 30%;
  flex-shrink: 0;
  display: flex;
  background: var(--color-background);
  border: 1px solid var(--color-border);
  border-radius: clamp(0.625rem, 0.25rem + 0.0125 * 100vw, 1.25rem);
}
.wp-block-meta-cards .wp-block-meta-card-item > div {
  display: flex;
  width: 100%;
}
.wp-block-meta-cards .wp-block-meta-card-item.is-selected {
  width: 360px;
  max-width: 300px !important;
}
.wp-block-meta-cards .wp-block-meta-card-item .f-carousel-card {
  width: 100% !important;
  box-shadow: none !important;
  margin: 0;
}