/* media vault thumbnail styling, adapted from the legacy site (public31.css).
   RULE: never crop. every thumbnail is shrunk to fit inside a 200x200 square keeping its
   ratio, and centred (horizontally + vertically) in that square placeholder. a photo set
   of more than one shows two fitted thumbnails stacked. these classes add the old-site
   treatments: gold hover glow, the notched info panel (count / play), and the price tag. */

/* the fixed 200x200 square placeholder + positioning context for the overlays */
.media-thumb-container {
    position: relative;
    width: 200px;
    height: 200px;
    border-radius: 0.75rem;
    background-color: rgb(21 23 31 / 30%);
    box-shadow: 0 0 4px 1px rgb(81 88 115);
}

/* OPT-IN fluid variant, for grids that must fit two cards per row on a narrow phone (the Media
   Vault). below the sm breakpoint the card gives up its fixed 200px and fills its grid cell,
   staying square via aspect-ratio; at sm and above it is the plain 200px card again.
   it only ever shrinks - never add a width above 200px, because the thumbnail FILES are generated
   to fit a 200x200 box (MediaThumbnail::THUMB_BOX), so anything larger just upscales and blurs.
   a modifier rather than a change to .media-thumb-container itself: that class is shared by ~19
   surfaces (chat bubbles, portal post cards, livestream cards, the pickers, admin), where a
   percentage width would resize things that are deliberately fixed. */
@media (max-width: 639px) {
    .media-thumb-fluid {
        width: 100%;
        max-width: 200px; /* never wider than the source thumbnail - see the note above */
        height: auto;
        aspect-ratio: 1 / 1;
    }
}

/* support chat inbox cards (includes/chat/inbox.php) go TWO-UP below the sm breakpoint, where each
   card is ~165px wide - narrower than the fixed 200px that trusted promo markup and a
   .media-thumb-container render at. inside a card preview let those shrink to fit, the same recipe
   as .media-thumb-fluid above, rather than being cut off by the card's overflow-hidden. max-width
   beats the element's own width declaration, so nothing here needs !important.
   scoped to .chat-card-html so it can never reach the conversation window, where 200px is
   deliberate. */
@media (max-width: 639px) {
    .chat-card-html > *,
    .chat-card-html img {
        max-width: 100%;
    }
    .chat-card-html .media-thumb-container {
        width: 100%;
        max-width: 200px; /* never wider than the source thumbnail - see the note above */
        height: auto;
        aspect-ratio: 1 / 1;
    }
}

/* the click target fills the square; the cover centres its content inside it */
.media-thumb-link {
    display: block;
    width: 100%;
    height: 100%;
}
.media-thumb-cover {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

/* a single thumbnail: fit inside the square keeping ratio (never cropped), rounded */
.media-thumb-img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    border-radius: 0.75rem;
}

/* gold glow on hover, only on a clickable (approved) card. an OPTED-IN parent - add
   .media-thumb-glow-parent to it - is used for card layouts where the whole card is the link (e.g.
   the Portal browse cards): hovering anywhere on the card glows BOTH the card itself and its
   thumbnail. the shadow is defined once here so every trigger can never drift apart.
   NB: no transition is declared on the parent - it keeps its own Tailwind `transition` utility,
   which already covers box-shadow at 150ms (matching the 0.15s below); declaring one here would
   override that and stop its border / background hover from animating. */
.media-thumb-glow {
    transition: box-shadow 0.15s ease;
}
.media-thumb-glow:hover,
.media-thumb-glow-parent:hover,
.media-thumb-glow-parent:hover .media-thumb-glow {
    box-shadow: 0 0 0 2px rgba(255, 209, 0, 0.75), 0 0 14px 3px rgba(255, 209, 0, 0.45);
}

/* info panel: dark, bottom-left, notched top-right + bottom-left corners */
.media-thumb-info {
    position: absolute;
    bottom: 6px;
    left: 6px;
    z-index: 10;
    background-color: rgba(14, 16, 24, 0.8); /* navy-dark/80 */
    border: 1px solid #ffd100; /* gold */
    padding: 3px 8px 4px 8px;
    border-radius: 0 10px 0 10px;
    line-height: normal;
    pointer-events: none;
}
.media-thumb-info .count {
    display: block;
    text-align: center;
    color: #ffd100;
    font-size: 30px;
    line-height: 30px;
    font-weight: 300;
}
.media-thumb-info .label {
    display: block;
    text-align: center;
    color: #ffd100;
    font-size: 11px;
    line-height: 11px;
    font-weight: 300;
}
.media-thumb-info .play-icon {
    display: block;
    color: #ffd100;
    padding: 6px 4px;
    line-height: 0;
}

/* small play badge over the static video thumbnail in a chat inbox preview (not the full card,
   which uses .media-thumb-info above). marks a preview thumbnail as a video, bottom-left. */
.chat-preview-thumb {
    position: relative;
}
.chat-preview-thumb .play-badge {
    position: absolute;
    bottom: 3px;
    left: 3px;
    color: #ffd100; /* gold */
    background-color: rgba(14, 16, 24, 0.8); /* navy-dark/80 */
    border-radius: 4px;
    padding: 2px;
    line-height: 0;
    pointer-events: none;
}
.chat-preview-thumb .play-badge svg {
    display: block;
    width: 32px;
    height: 32px;
}

/* price tag: dark, bottom-right, gold border + text */
.media-thumb-price {
    position: absolute;
    bottom: 6px;
    right: 6px;
    z-index: 10;
    border-radius: 5px;
    white-space: nowrap;
    pointer-events: none;
}

/* the status pill (Processing / Under Review / Rejected / ...) is a decorative overlay only -
   like the info panel and price tag above, it must not swallow clicks meant for the card's link
   (it sits centred over the cover). the live poller rewrites its class, so target the attribute. */
[data-status-pill] {
    pointer-events: none;
}

/* a photo set of more than one: two fitted thumbnails (never cropped) stacked in the
   square, one anchored top-left (behind), one bottom-right (front). */
.media-thumb-multi {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 0.75rem;
    overflow: hidden;
}
.media-thumb-multi img {
    position: absolute;
    max-width: 80%;
    max-height: 80%;
    width: auto;
    height: auto;
    border-radius: 0.5rem;
    box-shadow: 0 0 6px 3px rgba(15, 20, 27, 0.9);
}
.media-thumb-multi .multi-b {
    top: 6px;
    left: 6px;
}
.media-thumb-multi .multi-a {
    bottom: 6px;
    right: 6px;
}