/**
 * TPG Addons for WooCommerce — HTML Thumbnail Overrides
 *
 * WooCommerce-specific styles for HTML thumbnails in checkout flow contexts.
 * The base `.tpg-html-thumb` styles come from the LifterLMS addon's
 * `html-thumbnails.css` — this file adds protective overrides and the
 * compact variant used on the order confirmation page.
 *
 * Depends on: html-thumbnails.css (LifterLMS addon)
 *
 * @package TPG_Addons_WooCommerce
 * @since   3.11.0
 */


/* ==========================================================================
   1. RECOMMENDATION CARDS — FULL HTML THUMBNAIL (Context 2)
   ==========================================================================
   The `.tpg-rec-card__image-link` container already provides
   `aspect-ratio: 16/9` and `overflow: hidden`. The HTML thumbnail
   must fill this container without fighting its own aspect-ratio.
   ========================================================================== */

.tpg-rec-card__image-link .tpg-html-thumb {
    aspect-ratio: auto;
    width: 100%;
    height: 100%;
    border-radius: 0;
}

/* Prevent the recommendation card hover zoom from affecting HTML thumb internals */
.tpg-rec-card:hover .tpg-html-thumb img.t-photo {
    transform: none;
}

/* Ensure the photo layer stays contained within the card */
.tpg-rec-card__image-link .tpg-html-thumb .t-photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

/* Container query context for fluid typography inside rec cards */
.tpg-rec-card__image-link .tpg-html-thumb {
    container-type: inline-size;
}


/* ==========================================================================
   2. ORDER CONFIRMATION — COMPACT VARIANT (Context 4)
   ==========================================================================
   Small branded gradient + pattern + logo at 116×69px.
   No title text — would be illegible at this size.
   ========================================================================== */

.tpg-html-thumb--compact {
    position: relative;
    width: 116px;
    height: 69px;
    overflow: hidden;
    border-radius: var(--tpg-radius-sm, 6px);
    flex-shrink: 0;
}

.tpg-html-thumb--compact .t-pattern {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}

.tpg-html-thumb--compact .t-logo-wrap {
    position: absolute;
    bottom: 6px;
    right: 8px;
    z-index: 3;
}

.tpg-html-thumb--compact .tpg-logo {
    height: 12px;
    width: auto;
    display: block;
}


/* ==========================================================================
   3. CART LINE ITEMS — MINI HTML THUMBNAIL (Context 1)
   ==========================================================================
   JS injects a `.tpg-html-thumb--mini` inside the cart image cell.
   Gradient + pattern + CoP badge + TPG logo. No title text — the
   course name is already displayed beside the thumbnail.
   ========================================================================== */

/* Fill the WC Blocks image cell */
.wc-block-cart-item__image .tpg-html-thumb--mini,
.wc-block-components-product-image .tpg-html-thumb--mini,
.product-thumbnail .tpg-html-thumb--mini {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: var(--tpg-radius-sm, 6px);
    container-type: inline-size;
}

/* Override the base 16:9 aspect-ratio from html-thumbnails.css */
.tpg-html-thumb--mini {
    aspect-ratio: 1 / 1 !important;
}

/* Pattern overlay — uniform tint */
.tpg-html-thumb--mini .t-pattern {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}

/* Badge: small, top-left */
.tpg-html-thumb--mini .t-badge {
    position: absolute;
    top: clamp(3px, 6cqi, 8px);
    left: clamp(3px, 6cqi, 8px);
    z-index: 3;
    font-size: clamp(5px, 10cqi, 9px);
    padding: clamp(1px, 2cqi, 3px) clamp(3px, 5cqi, 6px);
    border-radius: 2px;
    letter-spacing: 0.3px;
    line-height: 1.3;
    max-width: 80%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Logo: bottom-right */
.tpg-html-thumb--mini .t-logo-wrap {
    position: absolute;
    bottom: clamp(3px, 5cqi, 8px);
    right: clamp(3px, 5cqi, 8px);
    z-index: 3;
}

.tpg-html-thumb--mini .tpg-logo {
    height: clamp(8px, 14cqi, 16px);
    width: auto;
    display: block;
    opacity: 0.85;
}

/* Hide the original WC placeholder/product image when mini thumb is present.
   IMPORTANT: Only target images outside the mini thumb — not .t-photo inside it. */
.tpg-mini-thumb-applied > a img,
.tpg-mini-thumb-applied > img:not(.tpg-logo):not(.t-photo) {
    display: none !important;
}

/* Also target the WC Blocks link wrapper inside the image cell */
.tpg-mini-thumb-applied > a {
    display: none !important;
}

/* Protect the photo layer inside mini thumbs from WC cart image rules */
.tpg-html-thumb--mini .t-photo {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    z-index: 0 !important;
    border-radius: 0 !important;
    transition: none !important;
}


/* ==========================================================================
   3b. COMPACT THUMBNAIL — PHOTO LAYER (Confirmation Page — Context 5)
   ==========================================================================
   The compact thumb now supports an optional photo behind the gradient.
   Photo layer uses the same absolute-fill approach as mini.
   ========================================================================== */

.tpg-html-thumb--compact .t-photo {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    z-index: 0 !important;
    border-radius: 0 !important;
}

/* ==========================================================================
   3c. CHECKOUT SIDEBAR — MICRO HTML THUMBNAIL (Context 2)
   ==========================================================================
   JS injects a `.tpg-html-thumb--micro` inside the checkout order
   summary image cell. Photo + gradient tint + logo only — no badge
   (too small to read at ~70×60px).
   ========================================================================== */

/* Fill the checkout sidebar image cell */
.wc-block-components-order-summary-item__image .tpg-html-thumb--micro {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: var(--tpg-radius-sm, 6px);
    container-type: inline-size;
}

/* Override base aspect-ratio — checkout cell is already sized by the grid */
.tpg-html-thumb--micro {
    aspect-ratio: auto !important;
}

/* Photo layer */
.tpg-html-thumb--micro .t-photo {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    z-index: 0 !important;
    border-radius: 0 !important;
    transition: none !important;
}

/* Pattern overlay */
.tpg-html-thumb--micro .t-pattern {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}

/* Logo: bottom-right */
.tpg-html-thumb--micro .t-logo-wrap {
    position: absolute;
    bottom: clamp(2px, 5cqi, 6px);
    right: clamp(2px, 5cqi, 6px);
    z-index: 3;
}

.tpg-html-thumb--micro .tpg-logo {
    height: clamp(6px, 12cqi, 12px);
    width: auto;
    display: block;
    opacity: 0.85;
}

/* Hide original image when micro thumb is applied */
.tpg-micro-thumb-applied > a img,
.tpg-micro-thumb-applied > img:not(.tpg-logo):not(.t-photo) {
    display: none !important;
}

.tpg-micro-thumb-applied > a {
    display: none !important;
}

/* Keep the WC Blocks quantity badge visible above the micro thumb */
.tpg-micro-thumb-applied .wc-block-components-order-summary-item__quantity {
    position: relative;
    z-index: 5;
}


/* ==========================================================================
   4. RESPONSIVE ADJUSTMENTS
   ========================================================================== */

/* B1-B2 (< 600px): Slightly smaller compact thumbnails */
@media (max-width: 599px) {
    .tpg-html-thumb--compact {
        width: 80px;
        height: 48px;
    }

    .tpg-html-thumb--compact .tpg-logo {
        height: 10px;
    }

    .tpg-html-thumb--compact .t-logo-wrap {
        bottom: 4px;
        right: 6px;
    }
}