/*
 * PromXAI Theme 1.4.15.45 — prompt-card actions and full-artwork homepage masonry owner.
 * Scope: the homepage receives natural-ratio masonry; reused prompt routes keep their existing card controls.
 */

:where(body.home, body.page-template-front-page, body.post-type-archive-promxai_prompt, body.tax-promxai_category) .px-prompt-card .px-card-actions {
  grid-template-columns: 34px minmax(0, 1fr) !important;
  gap: 4px !important;
  min-height: 48px !important;
  padding: 5px !important;
  border-radius: 15px !important;
}

:where(body.home, body.page-template-front-page, body.post-type-archive-promxai_prompt, body.tax-promxai_category) .px-prompt-card .px-card-share,
:where(body.home, body.page-template-front-page, body.post-type-archive-promxai_prompt, body.tax-promxai_category) .px-prompt-card .px-card-view {
  height: 38px !important;
  min-height: 38px !important;
  border-radius: 11px !important;
}

:where(body.home, body.page-template-front-page, body.post-type-archive-promxai_prompt, body.tax-promxai_category) .px-prompt-card .px-card-share {
  width: 34px !important;
  min-width: 34px !important;
}

:where(body.home, body.page-template-front-page, body.post-type-archive-promxai_prompt, body.tax-promxai_category) .px-prompt-card .px-card-share .px-icon {
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  min-height: 16px !important;
}

:where(body.home, body.page-template-front-page, body.post-type-archive-promxai_prompt, body.tax-promxai_category) .px-prompt-card .px-card-view {
  min-width: 0 !important;
  padding-inline: 6px !important;
  gap: 4px !important;
  justify-content: center !important;
  overflow: hidden !important;
}

:where(body.home, body.page-template-front-page, body.post-type-archive-promxai_prompt, body.tax-promxai_category) .px-prompt-card .px-card-view__label {
  flex: 0 1 auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
  font-size: 10.5px !important;
  font-weight: 850 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  text-align: center !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: clip !important;
}

:where(body.home, body.page-template-front-page, body.post-type-archive-promxai_prompt, body.tax-promxai_category) .px-prompt-card .px-card-view__icon {
  flex: 0 0 20px !important;
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  border-radius: 999px !important;
}

:where(body.home, body.page-template-front-page, body.post-type-archive-promxai_prompt, body.tax-promxai_category) .px-prompt-card .px-card-view__icon .px-icon {
  width: 11px !important;
  height: 11px !important;
  min-width: 11px !important;
  min-height: 11px !important;
}

/* ==========================================================================
   PromXAI Theme 1.4.15.66 — ordered natural-ratio gallery owner

   Tablet / laptop / desktop:
   - 3 columns on tablet/iPad, 4 on laptop, 5 on wide desktop.
   - Chronology is sequence-first: Arabic starts at physical upper-right,
     English at upper-left, then continues across before the next sequence band.
   - Natural-ratio packing never reassigns a later card to another logical column.
   - Natural artwork ratios remain intact; no 9:16 crop is introduced.
   ========================================================================== */
@media (min-width: 761px) {
  body.home .px-prompt-grid,
  body.page-template-front-page .px-prompt-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 12px !important;
    align-items: start !important;
    width: 100% !important;
    min-height: 200px;
    direction: rtl;
  }

  html[data-ui-lang="en"] body.home .px-prompt-grid,
  html[data-ui-lang="en"] body.page-template-front-page .px-prompt-grid { direction: ltr; }

  html[data-ui-lang="ar"] body.home .px-prompt-grid > .px-prompt-card,
  html[data-ui-lang="ar"] body.page-template-front-page .px-prompt-grid > .px-prompt-card { direction: rtl; }
  html[data-ui-lang="en"] body.home .px-prompt-grid > .px-prompt-card,
  html[data-ui-lang="en"] body.page-template-front-page .px-prompt-grid > .px-prompt-card { direction: ltr; }

  body.home .px-prompt-grid.is-promxai-masonry,
  body.page-template-front-page .px-prompt-grid.is-promxai-masonry {
    position: relative !important;
    display: block !important;
    height: var(--px-masonry-height, auto);
  }

  body.home .px-prompt-grid.is-promxai-masonry > .px-prompt-card,
  body.page-template-front-page .px-prompt-grid.is-promxai-masonry > .px-prompt-card {
    position: absolute !important;
    top: var(--px-masonry-y, 0px) !important;
    left: var(--px-masonry-x, 0px) !important;
    transform: none !important;
    display: block !important;
    width: var(--px-masonry-card-width) !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: auto !important;
    margin: 0 !important;
    overflow: visible !important;
    content-visibility: visible !important;
    contain: none !important;
    contain-intrinsic-size: auto !important;
  }

  body.home .px-prompt-grid.is-promxai-masonry > .px-prompt-card[hidden],
  body.page-template-front-page .px-prompt-grid.is-promxai-masonry > .px-prompt-card[hidden] {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  body.home .px-prompt-card__link,
  body.page-template-front-page .px-prompt-card__link {
    position: relative !important;
    inset: auto !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
    line-height: 0 !important;
  }

  body.home .px-prompt-card__ambient,
  body.page-template-front-page .px-prompt-card__ambient { display: none !important; }

  body.home .px-prompt-card__link > .px-prompt-card__image,
  body.home .px-prompt-card__link > img.px-prompt-card__image,
  body.home .px-prompt-card img.px-prompt-card__image,
  body.page-template-front-page .px-prompt-card__link > .px-prompt-card__image,
  body.page-template-front-page .px-prompt-card__link > img.px-prompt-card__image,
  body.page-template-front-page .px-prompt-card img.px-prompt-card__image {
    position: relative !important;
    inset: auto !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    object-fit: contain !important;
    object-position: center center !important;
    transform: none !important;
  }

  body.home .px-prompt-card:hover .px-prompt-card__image,
  body.home .px-prompt-card:focus-within .px-prompt-card__image,
  body.page-template-front-page .px-prompt-card:hover .px-prompt-card__image,
  body.page-template-front-page .px-prompt-card:focus-within .px-prompt-card__image { transform: none !important; }

  body.home .px-prompt-grid > .px-empty-state,
  body.home .px-prompt-grid > [data-empty-state],
  body.page-template-front-page .px-prompt-grid > .px-empty-state,
  body.page-template-front-page .px-prompt-grid > [data-empty-state] {
    width: 100% !important;
    grid-column: 1 / -1 !important;
  }
}

@media (min-width: 1050px) {
  body.home .px-prompt-grid,
  body.page-template-front-page .px-prompt-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 14px !important;
  }
}

@media (min-width: 1050px) and (max-width: 1366px) and (pointer: coarse) {
  body.home .px-prompt-grid,
  body.page-template-front-page .px-prompt-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }
}

@media (min-width: 1600px) {
  body.home .px-prompt-grid,
  body.page-template-front-page .px-prompt-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 16px !important;
  }
}

/* Shared, fully readable prompt CTA; homepage masonry changes media geometry only. */
:where(body.home, body.page-template-front-page, body.post-type-archive-promxai_prompt, body.tax-promxai_category) .px-prompt-card .px-card-actions {
  grid-template-columns: 36px minmax(0, 1fr) !important;
  min-height: 50px !important;
  padding: 5px !important;
  gap: 5px !important;
}

:where(body.home, body.page-template-front-page, body.post-type-archive-promxai_prompt, body.tax-promxai_category) .px-prompt-card .px-card-view {
  min-height: 40px !important;
  height: 40px !important;
  padding-inline: 8px !important;
  gap: 6px !important;
  overflow: visible !important;
}

:where(body.home, body.page-template-front-page, body.post-type-archive-promxai_prompt, body.tax-promxai_category) .px-prompt-card .px-card-view__label {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  max-width: none !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: unset !important;
}

:where(body.home, body.page-template-front-page, body.post-type-archive-promxai_prompt, body.tax-promxai_category) .px-prompt-card .px-card-view__icon {
  flex-basis: 22px !important;
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
}

/* ==========================================================================
   PromXAI Theme 1.4.15.45 — final homepage artwork visibility owner

   The homepage must use the uncropped display rendition supplied by PHP and
   let each card follow that file's real aspect ratio. This final owner also
   neutralizes older fixed-frame and video-card rules that could crop wide or
   Instagram-ratio uploads after the masonry conversion.
   ========================================================================== */
@media (min-width: 1050px) {
  :where(body.home, body.page-template-front-page) .px-prompt-grid > .px-prompt-card,
  :where(body.home, body.page-template-front-page) .px-prompt-card[data-prompt-type="video"] {
    position: relative !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    overflow: visible !important;
    background: transparent !important;
  }

  :where(body.home, body.page-template-front-page) .px-prompt-card__link,
  :where(body.home, body.page-template-front-page) .px-prompt-card[data-prompt-type="video"] .px-prompt-card__link {
    position: relative !important;
    display: block !important;
    inset: auto !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    overflow: hidden !important;
    border-radius: inherit !important;
    background: transparent !important;
  }

  :where(body.home, body.page-template-front-page) .px-prompt-card__link::before {
    display: none !important;
    content: none !important;
  }

  :where(body.home, body.page-template-front-page) .px-prompt-card__image,
  :where(body.home, body.page-template-front-page) .px-prompt-card[data-prompt-type="video"] .px-prompt-card__image {
    position: relative !important;
    display: block !important;
    inset: auto !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    object-fit: contain !important;
    object-position: center !important;
    transform: none !important;
    clip-path: none !important;
  }
}


/* 1.4.15.146 — masonry coordinates are layout, not motion.
   Cards now jump directly to their final columns on refresh/filter changes,
   instead of animating from the physical origin or a previous column. */
@media (min-width: 761px) {
  body.home .px-prompt-grid.is-promxai-masonry > .px-prompt-card,
  body.page-template-front-page .px-prompt-grid.is-promxai-masonry > .px-prompt-card {
    transition-property: border-color, box-shadow, background-color !important;
    transition-duration: .18s !important;
    transition-timing-function: ease !important;
  }
  body.home .px-prompt-grid.is-promxai-masonry.is-promxai-masonry-layouting > .px-prompt-card,
  body.page-template-front-page .px-prompt-grid.is-promxai-masonry.is-promxai-masonry-layouting > .px-prompt-card {
    transition: none !important;
  }
}


/* ========================================================================
   PromXAI Theme 2.0.0-RC8 — light homepage depth polish.
   Home only: cool off-white canvas + quiet floating cards. No geometry/motion.
   ======================================================================== */
html[data-theme="light"] body.home,
html[data-theme="light"] body.page-template-front-page {
  background:
    radial-gradient(circle at 10% 2%, rgba(92, 126, 205, .050), transparent 28rem),
    radial-gradient(circle at 92% 4%, rgba(139, 107, 219, .036), transparent 30rem),
    linear-gradient(180deg, #f7f9fc 0%, #f2f5fa 50%, #eef2f8 100%) !important;
}

@media (min-width: 761px) {
  html[data-theme="light"] :where(body.home, body.page-template-front-page) .px-prompt-grid > .px-prompt-card {
    border: 1px solid rgba(82, 101, 139, .14) !important;
    background: rgba(255, 255, 255, .92) !important;
    box-shadow:
      0 11px 26px rgba(54, 69, 103, .13),
      0 2px 7px rgba(54, 69, 103, .055),
      inset 0 1px 0 rgba(255,255,255,.92) !important;
  }

  html[data-theme="light"] :where(body.home, body.page-template-front-page) .px-prompt-grid > .px-prompt-card:hover,
  html[data-theme="light"] :where(body.home, body.page-template-front-page) .px-prompt-grid > .px-prompt-card:focus-within {
    border-color: rgba(92, 106, 164, .19) !important;
    box-shadow:
      0 15px 34px rgba(54, 69, 103, .155),
      0 3px 9px rgba(54, 69, 103, .065),
      inset 0 1px 0 rgba(255,255,255,.96) !important;
  }
}


/* RC67: Home identity badge geometry moved to the final shared owner
 * pro-preview-consistency.css so Home and phone cannot drift. */