/* Public-page bundle styles:
 *   - Rotating bundle image component (also defined in pro-marketplace-bundle.css
 *     for the dashboard so it works without depending on this smaller stylesheet).
 *   - Bundle indicator glyph that sits to the left of the bundle title.
 *
 * Used by the EstateBrowse public sale listing marketplace items section
 * (app/Views/partials/sale_listing_marketplace_items_section.php).
 *
 * Rotating activation: any element with [data-mp-bundle-rotating]; frames are
 * either pre-rendered .pro-mp-bundle-rotating__frame children or built by JS
 * from a data-mp-bundle-frames JSON URL list. See public/js/bundle-rotating.js. */
.pro-mp-bundle-rotating {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  background: #f3f4f6;
  border-radius: var(--r-md, 12px);
  overflow: hidden;
  isolation: isolate;
}
.pro-mp-bundle-rotating--card {
  aspect-ratio: auto;
  height: 100%;
  border-radius: 0;
}
.pro-mp-bundle-rotating__frame {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-color: #f3f4f6;
  opacity: 0;
  transform: scale(1.02);
  transition: opacity 600ms ease, transform 1200ms ease;
}
.pro-mp-bundle-rotating__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0; /* image is decorative; backgroundImage handles display */
}
.pro-mp-bundle-rotating__frame.is-active {
  opacity: 1;
  transform: scale(1);
}
.pro-mp-bundle-rotating__frame--placeholder {
  background:
    repeating-linear-gradient(135deg,
      color-mix(in srgb, var(--brand, #1d4ed8) 6%, transparent) 0 8px,
      transparent 8px 16px);
}

/* EstateBrowse public sale listing: size the rotating bundle media to match
   the surrounding non-bundle .sale-mp-card__media--isolated cards so the grid
   stays even. The rotating component itself uses .pro-mp-bundle-rotating--card
   to drop its internal aspect-ratio and fill the parent. */
.sale-mp-card__media--bundle {
  aspect-ratio: 4 / 3;
  position: relative;
  width: 100%;
  overflow: hidden;
  box-sizing: border-box;
  background: linear-gradient(165deg,
    var(--n-50, #f8fafc) 0%,
    var(--n-100, #f1f5f9) 55%,
    var(--n-150, #e8edf3) 100%);
}
@media (max-width: 560px) {
  .sale-mp-card__media--bundle {
    aspect-ratio: auto;
    height: clamp(8.75rem, 46vw, 11.25rem);
    min-height: 8.25rem;
    max-height: 11.5rem;
  }
}

/* Bundle indicator glyph (shared with the EstateScale dashboard). Brand-blue
   with a soft glow + gentle pulse so it reads as the "bundle" marker without
   competing with the title. Top-align so when the title wraps, the glyph
   stays at the first line instead of centering in the full block height. */
.sale-mp-card__title--bundle {
  display: inline-flex;
  align-items: flex-start;
  gap: 0.4rem;
}
.sale-mp-card__title--bundle .pro-mp-badge--bundle-glyph {
  flex: 0 0 auto;
}
.sale-mp-card__title-text {
  min-width: 0;
}
.pro-mp-badge--bundle-glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  color: var(--brand, #1d4ed8);
  filter: drop-shadow(0 0 4px color-mix(in srgb, var(--brand, #1d4ed8) 55%, transparent));
  animation: proMpBundleBadgeGlow 2.6s ease-in-out infinite;
  line-height: 1;
}
.pro-mp-badge--bundle-glyph svg {
  display: block;
  width: 1.125rem;
  height: 1.125rem;
}
@keyframes proMpBundleBadgeGlow {
  0%, 100% {
    filter: drop-shadow(0 0 3px color-mix(in srgb, var(--brand, #1d4ed8) 45%, transparent));
  }
  50% {
    filter: drop-shadow(0 0 7px color-mix(in srgb, var(--brand, #1d4ed8) 80%, transparent));
  }
}
/* Green variant for AI-detected sets/collections (auto_generated_kind ===
 * 'ai_collection_set' from SalePhotoMarketplaceSync). Same shape + cadence
 * as the blue default; only the color/glow change so shoppers + companies
 * can tell manual bundles (blue) from AI auto-set bundles (green). */
.pro-mp-badge--bundle-glyph--ai-set {
  color: var(--green, #059669);
  filter: drop-shadow(0 0 4px color-mix(in srgb, var(--green, #059669) 55%, transparent));
  animation-name: proMpBundleBadgeGlowAiSet;
}
@keyframes proMpBundleBadgeGlowAiSet {
  0%, 100% {
    filter: drop-shadow(0 0 3px color-mix(in srgb, var(--green, #059669) 45%, transparent));
  }
  50% {
    filter: drop-shadow(0 0 7px color-mix(in srgb, var(--green, #059669) 80%, transparent));
  }
}
@media (prefers-reduced-motion: reduce) {
  .pro-mp-badge--bundle-glyph {
    animation: none;
  }
}