/**
 * TPG HTML Thumbnails — Shared Styles
 *
 * Base container, typography, badges, patterns, and all four layout variants
 * for the CoP-coloured HTML thumbnails. Loaded on both archive and single
 * course pages so the same thumbnail system works everywhere.
 *
 * Context modifiers:
 *   .tpg-html-thumb--hero  — fills the single-course hero wrapper
 *   .tpg-html-thumb--card  — fills the related-course card image area
 *
 * @package TPG Addons for LifterLMS
 * @since   2.18.0
 */

/* ==========================================================================
   HTML Thumbnails — Container & Shared Styles
   ========================================================================== */

.tpg-html-thumb {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    container-type: inline-size;
    container-name: thumb;
    border-radius: 0;
}

/* Title: Lora Bold, white, text-shadow for contrast on gradients */
.tpg-html-thumb .t-title {
    font-family: var(--tpg-font-heading, 'Lora', Georgia, serif);
    font-weight: 700;
    color: #fff;
    line-height: 1.22;
    text-shadow: 0 0.2cqi 0.6cqi rgba(0, 0, 0, 0.2);
}

/* Subtitle: Source Sans 3, translucent white */
.tpg-html-thumb .t-sub {
    font-family: var(--tpg-font-body, 'Source Sans 3', 'Source Sans Pro', sans-serif);
    font-size: clamp(9px, 2.8cqi, 24px);
    color: rgba(255, 255, 255, 0.75);
    margin-top: clamp(4px, 1.2cqi, 16px);
    line-height: 1.4;
}

/* Badge base */
.tpg-html-thumb .t-badge {
    display: inline-block;
    font-family: var(--tpg-font-body, 'Source Sans 3', 'Source Sans Pro', sans-serif);
    font-size: clamp(7px, 2.2cqi, 18px);
    font-weight: 600;
    padding: clamp(2px, 0.7cqi, 8px) clamp(6px, 2cqi, 20px);
    border-radius: clamp(2px, 0.6cqi, 5px);
    letter-spacing: clamp(0.3px, 0.15cqi, 1px);
    text-transform: uppercase;
    color: #fff;
}

/* Badge: solid background variant */
.tpg-html-thumb .t-badge-solid {
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* Badge: frosted glass variant */
.tpg-html-thumb .t-badge-frost {
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.25);
}

/* Logo */
.tpg-html-thumb .tpg-logo {
    height: clamp(14px, 4.5cqi, 44px);
    object-fit: contain;
    opacity: 0.9;
    display: inline-block;
    vertical-align: middle;
}

/* Accent bar (top) */
.tpg-html-thumb .t-accent-bar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: clamp(3px, 1cqi, 8px);
    z-index: 5;
}

/* Featured image background layer (z-index 0, behind all overlays).
   Only rendered when the course has a featured image. The gradient and
   scrim layers sit above, creating a branded photo-through effect. */
.tpg-html-thumb .t-photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    pointer-events: none;
}

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

/* ==========================================================================
   Pattern Overlays — Colour-Family Geometric Textures
   Uses ::after pseudo-element so the pattern sits above the inline
   gradient background without specificity conflicts.
   Blue  → diagonal stripes
   Green → dot field
   Purple → square grid
   Warm  → crosshatch
   ========================================================================== */

.tpg-html-thumb .t-pattern--blue::after,
.tpg-html-thumb .t-pattern--green::after,
.tpg-html-thumb .t-pattern--purple::after,
.tpg-html-thumb .t-pattern--warm::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}

.tpg-html-thumb .t-pattern--blue::after {
    background-image:
        radial-gradient(circle at 85% 25%, rgba(255,255,255,0.08) 0%, transparent 50%),
        radial-gradient(circle at 15% 80%, rgba(255,255,255,0.05) 0%, transparent 40%),
        repeating-linear-gradient(45deg, transparent, transparent 28px, rgba(255,255,255,0.03) 28px, rgba(255,255,255,0.03) 30px);
}

.tpg-html-thumb .t-pattern--green::after {
    background-image:
        radial-gradient(circle at 20% 35%, rgba(255,255,255,0.07) 0%, transparent 14%),
        radial-gradient(circle at 75% 20%, rgba(255,255,255,0.05) 0%, transparent 10%),
        radial-gradient(circle at 50% 75%, rgba(255,255,255,0.06) 0%, transparent 12%),
        radial-gradient(circle at 90% 60%, rgba(255,255,255,0.04) 0%, transparent 8%),
        radial-gradient(circle at 35% 90%, rgba(255,255,255,0.05) 0%, transparent 11%);
}

.tpg-html-thumb .t-pattern--purple::after {
    background-image:
        radial-gradient(circle at 80% 30%, rgba(255,255,255,0.07) 0%, transparent 45%),
        radial-gradient(circle at 20% 70%, rgba(255,255,255,0.05) 0%, transparent 35%),
        repeating-linear-gradient(0deg, transparent, transparent 34px, rgba(255,255,255,0.025) 34px, rgba(255,255,255,0.025) 36px),
        repeating-linear-gradient(90deg, transparent, transparent 34px, rgba(255,255,255,0.025) 34px, rgba(255,255,255,0.025) 36px);
}

.tpg-html-thumb .t-pattern--warm::after {
    background-image:
        radial-gradient(circle at 75% 25%, rgba(255,255,255,0.07) 0%, transparent 45%),
        radial-gradient(circle at 25% 75%, rgba(255,255,255,0.05) 0%, transparent 35%),
        repeating-linear-gradient(60deg, transparent, transparent 16px, rgba(255,255,255,0.03) 16px, rgba(255,255,255,0.03) 18px),
        repeating-linear-gradient(-60deg, transparent, transparent 16px, rgba(255,255,255,0.02) 16px, rgba(255,255,255,0.02) 18px);
}

/* ==========================================================================
   HTML Thumbnail Layouts
   ========================================================================== */

/* --- Short Course: left gradient scrim --- */
.tpg-html-thumb--short .t-scrim {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 58%;
    z-index: 2;
}

.tpg-html-thumb--short .t-content {
    position: absolute;
    left: clamp(16px, 5cqi, 56px);
    top: 18%;
    max-width: 48%;
    z-index: 2;
}

.tpg-html-thumb--short .t-title {
    font-size: clamp(16px, 5.2cqi, 52px);
}

.tpg-html-thumb--short .t-badge {
    position: absolute;
    top: clamp(10px, 3.2cqi, 28px);
    right: clamp(10px, 3.2cqi, 28px);
    z-index: 2;
}

.tpg-html-thumb--short .t-logo-wrap {
    position: absolute;
    right: clamp(12px, 3.5cqi, 32px);
    bottom: clamp(10px, 3.2cqi, 28px);
    z-index: 2;
}

/* --- Boot Camp: bottom gradient scrim --- */
.tpg-html-thumb--boot .t-scrim {
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    height: 68%;
    z-index: 2;
}

.tpg-html-thumb--boot .t-content {
    position: absolute;
    left: clamp(16px, 5cqi, 56px);
    bottom: 18%;
    max-width: 60%;
    z-index: 2;
}

.tpg-html-thumb--boot .t-title {
    font-size: clamp(15px, 4.8cqi, 48px);
}

.tpg-html-thumb--boot .t-badge {
    margin-top: clamp(6px, 2cqi, 18px);
}

.tpg-html-thumb--boot .t-logo-wrap {
    position: absolute;
    right: clamp(12px, 3.5cqi, 32px);
    bottom: clamp(10px, 3.2cqi, 28px);
    z-index: 2;
}

/* --- Certification: split panel --- */
.tpg-html-thumb--cert .t-panel-left {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 48%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(14px, 4.5cqi, 48px);
}

.tpg-html-thumb--cert .t-panel-right {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 52%;
}

.tpg-html-thumb--cert .t-divider {
    position: absolute;
    left: 48%;
    top: 0;
    width: clamp(2px, 0.6cqi, 5px);
    height: 100%;
    z-index: 5;
}

.tpg-html-thumb--cert .t-title {
    font-size: clamp(14px, 4.6cqi, 44px);
}

.tpg-html-thumb--cert .t-badge {
    position: absolute;
    top: clamp(10px, 3.2cqi, 28px);
    right: clamp(10px, 3.2cqi, 28px);
    z-index: 6;
}

.tpg-html-thumb--cert .t-logo-wrap {
    margin-top: auto;
    padding-top: clamp(6px, 2cqi, 18px);
    align-self: flex-end;
}

/* --- Apprenticeship: full-bleed gradient --- */
.tpg-html-thumb--appr .t-content {
    position: absolute;
    inset: 0;
    z-index: 2;
    padding: clamp(14px, 4.5cqi, 48px) clamp(18px, 5.5cqi, 64px);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.tpg-html-thumb--appr .t-badge {
    align-self: flex-start;
    margin-bottom: clamp(6px, 2cqi, 18px);
}

.tpg-html-thumb--appr .t-title {
    font-size: clamp(16px, 5.4cqi, 54px);
}

.tpg-html-thumb--appr .t-logo-wrap {
    position: absolute;
    right: clamp(12px, 3.5cqi, 32px);
    bottom: clamp(10px, 3.2cqi, 28px);
    z-index: 3;
}

/* ==========================================================================
   Context: Hero (single-course page)
   Force the HTML thumbnail to drive the hero dimensions via 16:9 ratio
   instead of inheriting the wrapper's fixed breakpoint heights.
   This keeps the scrim proportions identical to archive cards.
   ========================================================================== */

.tpg-html-thumb--hero {
    /* Keep 16:9 — do NOT override to auto.
       The wrapper height adapts to us, not the other way round. */
    aspect-ratio: 16 / 9;
    height: auto;
    width: 100%;
}

/* When the hero wrapper contains an HTML thumb, let the thumb's
   aspect-ratio drive the height instead of the fixed breakpoint heights. */
.tpg-hero-image-wrapper:has(.tpg-html-thumb--hero) {
    height: auto;
}

/* Video play button sits above the HTML thumbnail */
.tpg-hero-image-wrapper .tpg-html-thumb--hero ~ .tpg-play-button {
    z-index: 10;
}

/* ==========================================================================
   Context: Related-Course Card (single-course page)
   Card image area has fixed height per breakpoint. Override aspect-ratio.
   ========================================================================== */

.tpg-html-thumb--card {
    aspect-ratio: auto;
    height: 100%;
}

/* Prevent .tpg-card-image img rules from interfering with HTML-thumb internals.
   The single-course.css rule `.tpg-course-card .tpg-card-image img` applies
   height:100%!important and a hover transition to ALL images. Override for
   images inside an HTML thumbnail to preserve our positioning/sizing. */
.tpg-card-image .tpg-html-thumb .tpg-logo {
    height: clamp(14px, 4.5cqi, 44px) !important;
    transition: none !important;
}
.tpg-card-image .tpg-html-thumb .t-photo {
    transition: none !important;
}
.tpg-card-image:hover .tpg-html-thumb img {
    transform: none !important;
}