/* =============================================================================
   Togger Video  — video-player.css
   ============================================================================= */

.tmp-video-player {
    --tmp-accent:      #e94c1f;
    --tmp-bg:         #fff;
    --tmp-text:        #032138;
    --tmp-header-bg:  #fff;
    --tmp-header-text: #032138;
    --tmp-radius:      3px;
    --tmp-ease:        0.2s ease;
}

/* =============================================================================
   Wrapper + inner shell
   ============================================================================= */

.tmp-video-player {
    position:      relative;
    border-radius: var(--tmp-radius);
    overflow:      hidden;
    background:    var(--tmp-bg);
    color:         var(--tmp-text);
    font-family:   inherit;
    font-size:     1rem;
    line-height:   1.4;
/*     box-shadow: 0 4px 16px rgba(0,0,0,0.25);
    transition: box-shadow 0.2s; */
}

.tmp-vinner {
    display:        flex;
    flex-direction: column;
}

/* =============================================================================
   Playlist header
   ============================================================================= */

.tmp-vheader {
    padding:    16px 20px 12px;
    background: var(--tmp-header-bg);
    color:      var(--tmp-header-text);
}

.tmp-vtitle {
    margin:      0 0 6px;
    color:       inherit;
}

.tmp-vdesc {
    margin:    0;
    opacity:   0.8;
    font-size: 0.9rem;
    color:     inherit;
}

/* =============================================================================
   Single mode — video area
   ============================================================================= */

.tmp-vvideo-wrap {
    background:  #000;
    line-height: 0;
}

.tmp-vvideo-wrap video {
    width:       100%;
    height:      auto;
    display:     block;
    max-height:  540px;
    object-fit:  contain;
    background:  #000;
}

.tmp-vvideo-wrap iframe.tmp-video-embed {
    display:      block;
    width:        100%;
    aspect-ratio: 16 / 9;
    border:       none;
    background:   #000;
    max-height:   540px;
}

.tmp-vno-source {
    padding:    40px 20px;
    text-align: center;
    opacity:    0.5;
    background: var(--tmp-bg);
    color:      var(--tmp-text);
}

.tmp-vfooter {
    padding:    16px 20px;
    background: var(--tmp-bg);
    color:      var(--tmp-text);
}

.tmp-vfooter .tmp-vtitle,
.tmp-vfooter .tmp-vdesc {
    color: var(--tmp-text);
}

/* =============================================================================
   Tracklist container
   ============================================================================= */

.tmp-vtracklist {
    list-style: none;
    margin:     0;
    padding:    0;
    background: var(--tmp-bg);
}

.tmp-vtracklist li {
    list-style: none;
    margin:     0;
    padding:    0;
    text-indent: 0;
}

.tmp-vtracklist li::before {
    content: none;
}

/* =============================================================================
   Track item — LIST view
   thumbnail left (fixed 120px) · title + description right
   ============================================================================= */

.tmp-vtrack {
    display:        flex;
    flex-direction: row;
    align-items:    stretch;
    cursor:         pointer;
    border-bottom:  1px solid rgba(255,255,255,0.08);
    transition:     background var(--tmp-ease);
    min-height:     72px;
    overflow:       hidden;
}

.tmp-vtrack:last-child {
    border-bottom: none;
}

.tmp-vtrack:hover {
    background: color-mix(in srgb, var(--tmp-accent) 12%, var(--tmp-bg));
}

.tmp-vtrack.is-active {
    background: color-mix(in srgb, var(--tmp-accent) 20%, var(--tmp-bg));
}

.tmp-vtrack:focus-visible {
    outline:        2px solid var(--tmp-accent);
    outline-offset: -2px;
}

/* Thumbnail — left */
.tmp-vtrack-art {
    position:    relative;
    flex-shrink: 0;
/*     width:       200px;
    min-width:   200px;
    max-width:   200px; */
    overflow:    hidden;
    background:  rgba(0,0,0,0.3);
    line-height: 0;
    align-self:  stretch;
    min-height: 100px;
    aspect-ratio: 16/9;
}

/* Placeholder icon (no poster image) */
.tmp-vtrack-art-placeholder {
    position:        absolute;
    inset:           0;
    display:         flex;
    align-items:     center;
    justify-content: center;
    opacity:         0.35;
    color:           var(--tmp-text);
    line-height:     0;
}

.tmp-vtrack-art img {
    position:   absolute;
    inset:      0;
    width:      100%;
    height:     100%;
    object-fit: cover;
    display:    block;
}

/* Play icon overlay on thumbnail */
.tmp-vtrack-play-overlay {
    position:        absolute;
    inset:           0;
    display:         flex;
    align-items:     center;
    justify-content: center;
    background:      rgba(0,0,0,0.28);
    color:           #fff;
    opacity:         0;
    transition:      opacity var(--tmp-ease);
}

.tmp-vtrack:hover .tmp-vtrack-play-overlay {
    opacity: 1;
}

/* Text — right */
.tmp-vtrack-body {
    flex:            1;
    min-width:       0;
    padding:         12px 16px;
    display:         flex;
    flex-direction:  column;
    justify-content: center;
    gap:             5px;
}
.tmp-vtrack-body {
    background: #efefef;
}
.tmp-vtrack-title {
    display:            block;
    color:              var(--tmp-text);
    overflow:           hidden;
    display:            -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.tmp-vtrack-desc {
    display:       block;
    font-size:     0.8rem;
    opacity:       0.65;
    color:         var(--tmp-text);
    overflow:      hidden;
    white-space:   nowrap;
    text-overflow: ellipsis;
}

/* =============================================================================
   GRID view
   ============================================================================= */

.tmp-vtracklist--cols-2 { --tmp-vcols: 2; }
.tmp-vtracklist--cols-3 { --tmp-vcols: 3; }
.tmp-vtracklist--cols-4 { --tmp-vcols: 4; }

.tmp-vtracklist--grid {
    display:               grid !important;
    grid-template-columns: repeat(var(--tmp-vcols, 3), 1fr) !important;
    gap:                   10px;
    background:            rgba(255,255,255,0.08);
    padding-bottom: 20px;
}

/* Override row styles for grid cells */
.tmp-vtracklist--grid .tmp-vtrack {
    display:        flex !important;
    flex-direction: column !important;
    align-items:    stretch !important;
    min-height:     0;
    border-bottom:  none;
    background:     var(--tmp-bg);
    box-shadow: 0 4px 16px rgba(0,0,0,0.25);
    transition: box-shadow 0.2s;
    padding: 10px;
}

/* Poster fills full width with 16:9 ratio */
.tmp-vtracklist--grid .tmp-vtrack-art {
    width:        100% !important;
    min-width:    0 !important;
    aspect-ratio: 16 / 9 !important;
    height:       auto;
}

/* Always show play overlay in grid (not just on hover) */
.tmp-vtracklist--grid .tmp-vtrack-play-overlay {
    opacity:    1;
    background: rgba(0,0,0,0.18);
}

.tmp-vtracklist--grid .tmp-vtrack:hover .tmp-vtrack-play-overlay {
    background: rgba(0,0,0,0.45);
}

.tmp-vtracklist--grid .tmp-vtrack-play-overlay svg {
    width:  40px;
    height: 40px;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,.6));
}

/* Text below thumbnail */
.tmp-vtracklist--grid .tmp-vtrack-body {
    padding: 10px 12px 14px;
}

.tmp-vtracklist--grid .tmp-vtrack-title {
    font-size:          0.85rem;
    white-space:        normal;
    -webkit-line-clamp: 2;
}

.tmp-vtracklist--grid .tmp-vtrack-desc {
    font-size:          0.78rem;
    white-space:        normal;
    overflow:           hidden;
    display:            -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-overflow:      unset;
}

/* Responsive */
@media (max-width: 640px) {
    .tmp-vtracklist--grid {
        grid-template-columns: repeat(min(var(--tmp-vcols, 3), 2), 1fr);
    }
}

@media (max-width: 380px) {
    .tmp-vtracklist--grid {
        grid-template-columns: 1fr;
    }
}

/* =============================================================================
   Fullscreen lightbox
   ============================================================================= */

.tvp-lightbox {
    position:        fixed;
    inset:           0;
    z-index:         99999;
    display:         flex;
    align-items:     center;
    justify-content: center;
    padding:         16px;
    opacity:         0;
    pointer-events:  none;
    transition:      opacity 0.25s ease;
}

.tvp-lightbox.is-open {
    opacity:        1;
    pointer-events: all;
}

.tvp-lightbox-backdrop {
    position:   absolute;
    inset:      0;
    background: rgba(0,0,0,0.88);
    cursor:     pointer;
}

.tvp-lightbox-inner {
    position:      relative;
    z-index:       1;
    display:       flex;
    width:         100%;
    max-width:     1200px;
    max-height:    calc(100dvh - 32px);
    border-radius: 8px;
    overflow:      hidden;
    box-shadow:    0 24px 80px rgba(0,0,0,0.7);
    background:    var(--tmp-bg);
    color:         var(--tmp-text);
}

/* Left: video */
.tvp-lightbox-video {
    flex:            2;
    min-width:       0;
    background:      #000;
    display:         flex;
    align-items:     center;
    justify-content: center;
}

.tvp-lb-video,
.tvp-lb-embed {
    display:    block;
    width:      100%;
    background: #000;
    border:     none;
}

.tvp-lb-video  { max-height: calc(100dvh - 32px); object-fit: contain; }
.tvp-lb-embed  { aspect-ratio: 16 / 9; }

/* Right: sidebar */
.tvp-lightbox-sidebar {
    flex:            1;
    min-width:       240px;
    max-width:       360px;
    display:         flex;
    flex-direction:  column;
    padding:         20px;
    background:      #000;
    overflow-y:      auto;
    scrollbar-width: thin;
    color:           #fff
}

.tvp-lb-close {
    align-self:      flex-end;
    flex-shrink:     0;
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    width:           36px;
    height:          36px;
    border:          none;
    border-radius:   50%;
    background:      rgba(255,255,255,0.1);
    color:           #fff;
    cursor:          pointer;
    padding:         0;
    transition:      background var(--tmp-ease);
    margin-bottom:   16px;
}

.tvp-lb-close:hover       { background: rgba(255,255,255,0.2); }
.tvp-lb-close:focus-visible { outline: 2px solid var(--tmp-accent); outline-offset: 2px; }

.tvp-lb-title {
    margin:      0 0 10px;
    font-size:   1.15rem;
    font-weight: 700;
    line-height: 1.3;
    color:           #fff;
}

.tvp-lb-desc {
    margin:      0;
    font-size:   0.9rem;
    opacity:     0.8;
    line-height: 1.6;
    color:       #fff;
}

/* Responsive — stack vertically on mobile */
@media (max-width: 720px) {
    .tvp-lightbox        { padding: 0; align-items: flex-end; }
    .tvp-lightbox-inner  { flex-direction: column; max-width: 100%; max-height: 100dvh; border-radius: 12px 12px 0 0; }
    .tvp-lightbox-video  { flex: none; }
    .tvp-lightbox-sidebar {
        max-width:      100%;
        min-width:      0;
        flex:           none;
        flex-direction: row;
        align-items:    flex-start;
        padding:        14px;
        gap:            12px;
    }
    .tvp-lb-close  { order: 1; flex-shrink: 0; margin: 0; }
    .tvp-lb-meta   { order: 0; flex: 1; }
    .tvp-lb-title  { font-size: 1rem; margin-bottom: 4px; }
    .tvp-lb-desc   { font-size: 0.8rem; }
}

body.tvp-lightbox-open { overflow: hidden; }