/**
 * PromXAI Theme 2.0.21 candidate — unified protected PRO teaser owner.
 *
 * Goal: one medium protection feel everywhere.
 * The preview should be clearly protected, but never too light on Home and
 * never too dark on Favorites or the PRO gate. We keep one visual formula and
 * compensate only slightly for compact cards versus wider previews.
 */

:root {
  /* Teaser balance: reveal silhouette, palette and broad composition while
     keeping typography, texture and fine product detail intentionally soft. */
  --px-pro-preview-brightness: .94;
  --px-pro-preview-saturation: .97;
  --px-pro-preview-contrast: .985;
  --px-pro-preview-scale: 1.025;
  --px-pro-preview-blur: 2.05px;
  --px-pro-preview-blur-compact: var(--px-pro-preview-blur);
  --px-pro-preview-blur-wide: var(--px-pro-preview-blur);
  --px-pro-preview-veil: linear-gradient(180deg, rgba(12,25,45,.008), rgba(12,25,45,.035));
}

/* Shared protected media geometry. The selector is intentionally component-
   based rather than route-based so Home, category/archive, Favorites, related
   designs, PRO gates and Library all receive the exact same teaser strength. */
.px-phone-home-card.is-locked .px-phone-home-card__image,
.px-prompt-card.is-locked .px-prompt-card__image,
.px-prompt-card.is-locked .px-prompt-card__link > img,
.px-related-mini.is-locked > img,
body.promxai-favorites-modern-page .px-fav-card.is-locked .px-fav-card__image,
.px-how-v2 .px-how-selected.is-locked > .px-protected-image img,
.px-pro-v2__gate-preview > img,
.px-pro-gate-card__preview > img,
.px-library-modern-card.is-pro-locked .px-library-modern-card__image,
.px-create-picker__card.is-locked figure img {
  filter:
    blur(var(--px-pro-preview-blur-wide))
    saturate(var(--px-pro-preview-saturation))
    brightness(var(--px-pro-preview-brightness))
    contrast(var(--px-pro-preview-contrast)) !important;
  transform: scale(var(--px-pro-preview-scale)) !important;
  transform-origin: center center !important;
  transition: none !important;
}

/* Home/library prompt cards also carry a soft ambient background image; dim it
   so the protected state feels the same as Favorites and the PRO gate. */
.px-prompt-card.is-locked .px-prompt-card__ambient,
.px-related-mini.is-locked .px-prompt-card__ambient {
  opacity: .54 !important;
  filter: blur(14px) saturate(.94) brightness(.84) !important;
}

/* Compact phone previews need a slightly smaller physical radius to read the
   same as larger laptop/desktop cards. */
@media (max-width: 760px) {
  .px-phone-home-card.is-locked .px-phone-home-card__image,
  .px-prompt-card.is-locked .px-prompt-card__image,
  body.single-promxai_prompt .px-related-grid-section .px-related-mini.is-locked > img,
  body.promxai-favorites-modern-page .px-fav-card.is-locked .px-fav-card__image,
  .px-pro-v2__gate-preview > img,
  .px-pro-gate-card__preview > img,
  .px-library-modern-card.is-pro-locked .px-library-modern-card__image,
  .px-create-picker__card.is-locked figure img {
    filter:
      blur(var(--px-pro-preview-blur-compact))
      saturate(var(--px-pro-preview-saturation))
      brightness(var(--px-pro-preview-brightness))
      contrast(var(--px-pro-preview-contrast)) !important;
  }
}

/* Hover/focus must never reveal or alter a protected image. */
.px-prompt-card.is-locked:hover .px-prompt-card__link > .px-prompt-card__image,
.px-prompt-card.is-locked:focus-within .px-prompt-card__link > .px-prompt-card__image,
.px-prompt-card.is-locked:hover .px-prompt-card__link > img,
.px-prompt-card.is-locked:focus-within .px-prompt-card__link > img,
.px-related-mini.is-locked:hover > img,
.px-related-mini.is-locked:focus-visible > img,
.px-fav-card.is-locked:hover .px-fav-card__image,
.px-fav-card.is-locked:focus-within .px-fav-card__image {
  transform: scale(var(--px-pro-preview-scale)) !important;
}

/* One and only one protection veil everywhere. */
body.home .px-phone-home-card.is-locked .px-phone-home-card__link::after,
.px-prompt-card.is-locked .px-prompt-card__link::after,
.px-related-mini.is-locked::before,
body.promxai-favorites-modern-page .px-fav-card.is-locked .px-fav-card__media::after,
.px-how-v2 .px-how-selected.is-locked > .px-protected-image::after,
.px-pro-v2__gate-preview::after,
.px-pro-gate-card__preview::after,
.px-library-modern-card.is-pro-locked .px-library-modern-card__media::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 2 !important;
  border-radius: inherit !important;
  background: var(--px-pro-preview-veil) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  pointer-events: none !important;
}

/* Keep the lock/badge above the unified veil. */
:is(.px-phone-home-card__lock,.px-card-lock,.px-fav-card__lock,.px-pro-v2__gate-lock,.px-pro-gate-card__lock) {
  z-index: 6 !important;
}
.px-pro-badge {
  z-index: 40 !important;
}

/* Theme mode must not alter the protected preview strength. */
html[data-theme="light"] body.home .px-phone-home-card.is-locked .px-phone-home-card__link::after,
html[data-theme="dark"] body.home .px-phone-home-card.is-locked .px-phone-home-card__link::after,
html[data-theme="light"] .px-prompt-card.is-locked .px-prompt-card__link::after,
html[data-theme="dark"] .px-prompt-card.is-locked .px-prompt-card__link::after,
html[data-theme="light"] body.promxai-favorites-modern-page .px-fav-card.is-locked .px-fav-card__media::after,
html[data-theme="dark"] body.promxai-favorites-modern-page .px-fav-card.is-locked .px-fav-card__media::after,
html[data-theme="light"] .px-pro-v2__gate-preview::after,
html[data-theme="dark"] .px-pro-v2__gate-preview::after,
html[data-theme="light"] .px-pro-gate-card__preview::after,
html[data-theme="dark"] .px-pro-gate-card__preview::after,
.px-library-modern-card.is-pro-locked .px-library-modern-card__media::before {
  background: var(--px-pro-preview-veil) !important;
}

/* -------------------------------------------------------------------------
   Related designs: desktop/laptop preserve each image's original ratio.
   ------------------------------------------------------------------------- */
@media (min-width: 761px) {
  body.single-promxai_prompt .px-related-grid-section .px-related-strip {
    display: block !important;
    width: 100% !important;
    padding: 0 !important;
    columns: 2 !important;
    column-gap: 10px !important;
    overflow: visible !important;
  }

  body.single-promxai_prompt .px-related-grid-section .px-related-mini {
    position: relative !important;
    display: inline-block !important;
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    aspect-ratio: auto !important;
    margin: 0 0 10px !important;
    overflow: hidden !important;
    break-inside: avoid !important;
    page-break-inside: avoid !important;
    vertical-align: top !important;
    line-height: 0 !important;
  }

  body.single-promxai_prompt .px-related-grid-section .px-related-mini > img {
    position: relative !important;
    inset: auto !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    object-fit: contain !important;
    object-position: center center !important;
  }
}