/**
 * TPG Addons for WooCommerce — Course Recommendation Cards
 *
 * Styles for the "You may be interested in…" section on the basket page.
 * Values derived from Aarya's Version 5 Figma exports (B5 Basket).
 *
 * Depends on: variables.css (design tokens)
 *
 * @package TPG_Addons_WooCommerce
 * @since   3.3.0
 */


/* ==========================================================================
   1. SECTION LAYOUT
   ==========================================================================
   The section heading and grid sit below the cart table,
   within the left (products) column of the basket layout.
   Grid and mobile overrides are already in basket.css for the
   .tpg-recommendations-section and .tpg-recommendations-grid
   selectors — those handle column span and padding.
   This file only styles the CARDS within the grid.
   ========================================================================== */


/* ==========================================================================
   2. CARD CONTAINER
   ========================================================================== */

.tpg-rec-card {
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border: solid 1px #ededed;
    transition: box-shadow var(--tpg-transition-base, 200ms ease);
}

.tpg-rec-card:hover {
    box-shadow: var(--tpg-shadow-md, 0 4px 6px rgba(0, 0, 0, 0.1));
}


/* ==========================================================================
   3. THUMBNAIL
   ========================================================================== */

.tpg-rec-card__image-link {
    display: block;
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--tpg-light-gray, #F0F4F7);
}

.tpg-rec-card__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--tpg-transition-slow, 300ms ease);
}

.tpg-rec-card:hover .tpg-rec-card__image {
    transform: scale(1.03);
}

.tpg-rec-card__image-placeholder {
    width: 100%;
    height: 100%;
    background: var(--tpg-light-gray, #F0F4F7);
}

/* Coming Soon — thumbnail pill overlay (@since 3.16.0) */
.tpg-rec-card__coming-soon-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.7);
    color: #FFFFFF;
    font-family: var(--tpg-font-body);
    font-weight: 600;
    font-size: 16px;
    line-height: 1;
    padding: 10px 24px;
    border-radius: 6px;
    z-index: 2;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    pointer-events: none;
}


/* ==========================================================================
   4. CARD BODY
   ========================================================================== */

.tpg-rec-card__body {
    display: flex;
    flex-direction: column;
    padding: 25px;
}


/* ==========================================================================
   5. CATEGORY + BESTSELLER ROW
   ========================================================================== */

.tpg-rec-card__meta-top {
    display: flex;
    align-items: center;
    gap: var(--tpg-spacing-sm, 8px);
    flex-wrap: wrap;
    margin-bottom: 10px;
}

/* Figma: Source Sans Pro 400, 18px, lh 100%, ls -0.03em, #8D8F90 */
.tpg-rec-card__category {
    font-family: var(--tpg-font-body);
    font-weight: 400;
    font-size: 18px;
    line-height: 1;
    letter-spacing: -0.03em;
    color: var(--tpg-category-text, #8D8F90);
}

/* Figma: bg #F88E4E, radius 102px, Source Sans Pro 400, 16px, lh 150%, white */
.tpg-rec-card__badge--bestseller {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 14px;
    background: var(--tpg-best-seller-bg, #F88E4E);
    border-radius: var(--tpg-radius-pill, 102px);
    font-family: var(--tpg-font-body);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    color: var(--tpg-white, #FFFFFF);
    white-space: nowrap;
}

/* Coming Soon badge — blue pill (@since 3.16.0) */
.tpg-rec-card__badge--coming-soon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 14px;
    background: #294196;
    border-radius: var(--tpg-radius-pill, 102px);
    font-family: var(--tpg-font-body);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    color: var(--tpg-white, #FFFFFF);
    white-space: nowrap;
}


/* ==========================================================================
   6. TITLE
   ========================================================================== */

/* Figma: Lora 700, 26px, lh 36px, ls 0.00096em, #000 */
.tpg-rec-card__title {
    font-family: var(--tpg-font-heading);
    font-weight: 700;
    font-size: 22px !important;
    line-height: 30px !important;
    margin-bottom: 5px !important;
    color: var(--tpg-black);
}

.tpg-rec-card__title-link {
    color: inherit;
    text-decoration: none;
}

.tpg-rec-card__title-link:hover {
    text-decoration: none;
    color: var(--tpg-color-accent);
}


/* ==========================================================================
   7. INSTRUCTOR
   ========================================================================== */

/* Figma: Source Sans Pro 400, 16px, lh 150%, #737373 */
.tpg-rec-card__instructor {
    margin-bottom: 0 !important;
    font-family: var(--tpg-font-body);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    color: #737373;
}


/* ==========================================================================
   8. RATING
   ========================================================================== */

.tpg-rec-card__rating {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

/* Figma: Source Sans Pro 600, 16px, lh 150%, #F88E4E */
.tpg-rec-card__rating-value {
    font-family: var(--tpg-font-body);
    font-weight: 600;
    font-size: 16px;
    line-height: 1.5;
    color: var(--tpg-star-rating, #F88E4E);
}

.tpg-rec-card__stars {
    display: inline-flex;
    align-items: center;
    gap: 0;
}

.tpg-rec-card__stars .tpg-star {
    flex-shrink: 0;
}

/* Figma: Source Sans Pro 400, 16px, lh 150%, uppercase, #6C6E6F */
.tpg-rec-card__rating-count {
    font-family: var(--tpg-font-body);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    text-transform: uppercase;
    color: #6C6E6F;
}


/* ==========================================================================
   9. METADATA TAGS (Duration, Difficulty)
   ========================================================================== */

.tpg-rec-card__tags {
    display: flex;
    align-items: center;
    gap: var(--tpg-spacing-sm, 8px);
    flex-wrap: wrap;
}

/* Figma: bg #F0F4F7, radius 102px, Source Sans Pro 400, 14px, lh 150%, #595A5B */
.tpg-rec-card__tag {
    display: inline-flex;
    align-items: center;
    padding: 2px 12px;
    background: var(--tpg-tag-bg, #F0F4F7);
    border-radius: var(--tpg-radius-pill, 102px);
    font-family: var(--tpg-font-body);
    font-weight: 400;
    font-size: 14px;
    line-height: 1.5;
    color: var(--tpg-tag-text, #595A5B);
    white-space: nowrap;
}


/* ==========================================================================
   10. PRICE
   ========================================================================== */

.tpg-rec-card__price {
    display: flex;
    align-items: baseline;
    gap: var(--tpg-spacing-xs, 4px);
    margin-top: 10px;
    margin-bottom: 10px;
}

/* Figma: Source Sans Pro 600, 18px, lh 150%, ls -0.01em, #333 */
.tpg-rec-card__price-current {
    font-family: var(--tpg-font-body);
    font-weight: 600;
    font-size: 18px;
    line-height: 1.5;
    letter-spacing: -0.01em;
    color: #333333;
}

.tpg-rec-card__price-current--free {
    color: var(--tpg-success, #01C0A6);
}

/* Figma: Source Sans Pro 400, 18px, lh 150%, ls -0.01em, #7C8083, strikethrough */
.tpg-rec-card__price-original {
    font-family: var(--tpg-font-body);
    font-weight: 400;
    font-size: 18px;
    line-height: 1.5;
    letter-spacing: -0.01em;
    color: #7C8083;
    text-decoration: line-through;
}


/* ==========================================================================
   11. FOOTER (CTA + WISHLIST)
   ========================================================================== */

.tpg-rec-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: var(--tpg-spacing-xs, 4px);
}

/* Figma: Source Sans Pro 600, 18px, lh 20px, ls 0.00096em, uppercase, #F88E4E */
.tpg-rec-card__cta {
    font-family: var(--tpg-font-body);
    font-weight: 600;
    font-size: 18px;
    line-height: 20px;
    letter-spacing: 0.00096em;
    text-transform: uppercase;
    color: var(--tpg-star-rating, #F88E4E);
    text-decoration: none;
    transition: color var(--tpg-transition-fast, 150ms ease);
}

.tpg-rec-card__cta:hover,
.tpg-rec-card__cta:focus-visible {
    color: var(--tpg-dark-orange, #F05A28);
}

/* Coming Soon CTA — grey non-interactive (@since 3.16.0) */
.tpg-rec-card__cta--coming-soon {
    color: #9AA2AB;
    cursor: default;
    pointer-events: none;
}

.tpg-rec-card__wishlist {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0.65;
    transition: opacity var(--tpg-transition-fast, 150ms ease);
}

.tpg-rec-card__wishlist:hover {
    opacity: 1;
}


/* ==========================================================================
   12. RESPONSIVE SCALING
   ========================================================================== */

/* B3-B4 (600-1023px): Slightly smaller title */
@media (min-width: 600px) and (max-width: 1023px) {
    .tpg-rec-card__title {
        font-size: 22px;
        line-height: 30px;
    }

    .tpg-rec-card__category {
        font-size: 16px;
    }

    .tpg-rec-card__badge--bestseller {
        font-size: 14px;
        padding: 3px 10px;
    }
}

/* B1-B2 (< 600px): Mobile compact layout */
@media (max-width: 599px) {
    .tpg-rec-card__title {
        font-size: 20px;
        line-height: 28px;
    }

    .tpg-rec-card__category {
        font-size: 15px;
    }

    .tpg-rec-card__badge--bestseller {
        font-size: 13px;
        padding: 2px 10px;
    }

    .tpg-rec-card__price-current,
    .tpg-rec-card__price-original {
        font-size: 16px;
    }

    .tpg-rec-card__cta {
        font-size: 16px;
    }
}

/* =========================================================================
   AJAX ADD-TO-CART STATES (v3.16.1)
   ========================================================================= */

/**
 * Loading state — shown while the AJAX request is in flight.
 * Reduced opacity + pointer-events:none prevents double-clicks.
 */
.tpg-rec-card__cta--loading {
    opacity: 0.5;
    pointer-events: none;
    cursor: wait;
}