/* Image models reuse the video card's cover, heading, price and action layout. */
.pricing-card-family-row:has(> .pricing-model-card.is-image-model) {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 198px), 1fr));
  grid-auto-rows: 1fr;
  max-width: none;
  gap: 12px;
}

.pricing-model-card.is-image-model {
  min-height: 330px;
  border-color: color-mix(in srgb, var(--semi-color-primary) 22%, var(--semi-color-border)) !important;
  background: linear-gradient(180deg, color-mix(in srgb, var(--semi-color-primary) 5%, transparent), transparent 48%), var(--pricing-pro-surface) !important;
}

.pricing-model-card.is-image-model .pricing-card-cover {
  aspect-ratio: 16 / 6.5;
}

.pricing-card-cover.is-image-cover::after {
  z-index: 1;
  height: 62%;
  background: linear-gradient(to bottom, transparent, rgba(2, 5, 12, 0.78));
}

.is-image-model .pricing-card-type-label.is-image {
  color: rgba(255, 255, 255, 0.94);
}

.is-image-model .pricing-card-cover-actions .semi-checkbox {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  min-height: 28px;
  padding: 4px;
  border-radius: 6px;
  background: rgba(7, 11, 19, 0.64);
}

.pricing-card-body.is-image {
  padding: 9px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--semi-color-primary) 5%, transparent), transparent 44%);
}

.pricing-card-body.is-image .pricing-card-description {
  margin-top: 7px;
  min-height: 44px;
  padding: 6px 8px;
  border-left: 3px solid color-mix(in srgb, var(--semi-color-primary) 66%, white);
  border-radius: 0 10px 10px 0;
  background: color-mix(in srgb, var(--semi-color-primary) 7%, var(--semi-color-fill-0));
}

.pricing-card-body.is-image .pricing-card-description p {
  color: var(--semi-color-text-1) !important;
  font-size: 11.5px;
  line-height: 16px;
  -webkit-line-clamp: 2 !important;
}

.pricing-card-image-detail-title {
  display: block;
  width: 100%;
  min-height: 38px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-align: left;
  cursor: pointer;
}

.pricing-card-image-detail-title:focus-visible {
  outline: 2px solid var(--semi-color-primary);
  outline-offset: 2px;
  border-radius: 4px;
}

.pricing-card-body.is-image .pricing-card-price {
  margin-top: 8px;
}

.pricing-card-body.is-image .pricing-card-price-list {
  min-height: 42px;
  padding: 7px 9px;
  border-color: color-mix(in srgb, var(--semi-color-primary) 34%, var(--semi-color-border));
  border-radius: 11px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--semi-color-primary) 12%, transparent), transparent 62%), var(--semi-color-fill-0);
}

.pricing-card-body.is-image .pricing-card-price-label {
  padding-bottom: 2px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
}

.pricing-card-body.is-image .pricing-card-price-value {
  color: var(--semi-color-primary);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 17px;
  font-weight: 760;
  letter-spacing: -0.025em;
  line-height: 20px;
}

.pricing-card-body.is-image .pricing-card-price-unit {
  padding-bottom: 1px;
  font-size: 10px;
}

.pricing-card-body.is-image .pricing-card-resolution-prices {
  flex-wrap: wrap;
}

.pricing-card-body.is-image .pricing-card-experience-actions {
  margin-top: auto;
  gap: 6px;
  padding-top: 8px;
  grid-template-columns: 36px minmax(0, 1fr);
}

.pricing-card-body.is-image .pricing-card-experience-actions .semi-button {
  height: 36px;
}

.pricing-card-body.is-image .pricing-card-copy-button {
  width: 36px;
  min-width: 36px !important;
}

@media (max-width: 767px) {
  .pricing-card-family-row:has(> .pricing-model-card.is-image-model) {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }

  .pricing-model-card.is-image-model {
    min-height: 0;
  }

  .pricing-card-body.is-image {
    padding: 14px;
  }

  .pricing-card-body.is-image .pricing-card-description {
    min-height: 44px;
  }

  .pricing-card-image-detail-title {
    min-height: 44px;
  }

  .is-image-model .pricing-card-cover-actions .semi-checkbox {
    min-width: 44px;
    min-height: 44px;
  }

  .pricing-card-body.is-image .pricing-card-experience-actions {
    grid-template-columns: 44px minmax(0, 1fr);
  }

  .pricing-card-body.is-image .pricing-card-experience-actions .semi-button {
    height: 44px;
  }

  .pricing-card-body.is-image .pricing-card-copy-button {
    width: 44px;
    min-width: 44px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .is-image-model .pricing-card-availability-core,
  .is-image-model .pricing-card-availability::before,
  .is-image-model .pricing-card-availability::after {
    animation: none !important;
  }
}