/* ============================================================
   Jamtab Cards — Standard Visual Component
   ------------------------------------------------------------
   One stylesheet. Two card types (song, video). Three sizes
   (sm, md, lg). Used on Home, Library, Creator Channel,
   Search Results, and any future page.

   Container is the page's responsibility. The card just
   renders itself.
   ============================================================ */


/* =====================
   Base Card
   ===================== */
.jt-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background-color: #121212;
    border-radius: 12px;
    border: 8px solid transparent;            /* hover-friendly thick border */
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
    text-align: left;
}

    .jt-card:hover {
        border-color: rgba(128, 128, 128, 0.3);
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.7);
        transform: translateY(-2px);
    }


/* =====================
   Card Link (the click target)
   ===================== */
.jt-card-link {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: #fff;
    width: 100%;
    height: 100%;
}

    .jt-card-link:hover,
    .jt-card-link:visited,
    .jt-card-link:active {
        text-decoration: none;
        color: #fff;
    }


/* =====================
   Card Art (image)
   ===================== */
.jt-card-art-wrapper {
    width: 100%;
    background-color: #0a0a0a;
    border-radius: 6px;
    overflow: hidden;
}

.jt-card-art {
    width: 100%;
    aspect-ratio: 1 / 1;                       /* default: square (songs) */
    object-fit: cover;
    display: block;
    transition: opacity 0.2s ease;
}

.jt-card-art-video {
    aspect-ratio: 16 / 9;                      /* video override */
}

.jt-card:hover .jt-card-art {
    opacity: 0.92;
}


/* =====================
   Text Content
   ===================== */
.jt-card-text {
    padding: 10px 4px 4px 4px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    overflow: hidden;
}

.jt-card-title {
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    margin: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.jt-card-sub {
    font-size: 12px;
    color: #b3b3b3;
    margin: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.jt-card-meta-line {
    font-size: 11px;
    color: #888;
    margin: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}


/* =====================
   Meta Row (views, etc.)
   ===================== */
.jt-card-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 6px;
    color: #888;
    font-size: 11px;
}

.jt-card-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

    .jt-card-meta-item .fa {
        font-size: 11px;
    }


/* =====================
   Favorite Button (heart)
   ===================== */
.jt-favorite-btn {
    position: absolute;
    top: 14px;
    right: 14px;
    background: rgba(0, 0, 0, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    border-radius: 20px;
    padding: 4px 10px;
    font-size: 14px;
    cursor: pointer;
    z-index: 10;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: background 0.2s ease, transform 0.1s ease;
}

    .jt-favorite-btn:hover {
        background: #0165b0;
    }

    .jt-favorite-btn.active {
        color: #ff4b6e;
    }

    .jt-favorite-btn.active .jt-favorite-icon {
        transform: scale(1.15);
    }

.jt-favorite-icon {
    transition: transform 0.15s ease;
    line-height: 1;
}

.jt-favorite-count {
    font-size: 12px;
    color: #fff;
    font-weight: 600;
}


/* =====================
   SIZE: Small (compact rails, dense grids)
   ===================== */
.jt-card.card-sm {
    width: 150px;
    flex: 0 0 150px;
}

    .jt-card.card-sm .jt-card-text {
        padding: 8px 2px 2px 2px;
    }

    .jt-card.card-sm .jt-card-title {
        font-size: 13px;
    }

    .jt-card.card-sm .jt-card-sub,
    .jt-card.card-sm .jt-card-meta-line {
        font-size: 11px;
    }


/* =====================
   SIZE: Medium (default — Home rails, Channel grid, Library video grid)
   ===================== */
.jt-card.card-md {
    width: 220px;
    flex: 0 0 220px;
    /*height:270px;*/
}


/* =====================
   SIZE: Large (search results, hero placements)
   ===================== */
.jt-card.card-lg {
    width: 280px;
    flex: 0 0 280px;
}

    .jt-card.card-lg .jt-card-title {
        font-size: 16px;
    }

    .jt-card.card-lg .jt-card-sub {
        font-size: 13px;
    }


/* =====================
   Responsive — mobile shrinks Medium / Large
   ===================== */
@media (max-width: 768px) {
    .jt-card.card-md,
    .jt-card.card-lg {
        width: 160px;
        flex: 0 0 160px;
    }

    .jt-card.card-sm {
        width: 130px;
        flex: 0 0 130px;
    }

    .jt-favorite-btn {
        top: 10px;
        right: 10px;
        padding: 3px 8px;
        font-size: 12px;
    }
}







/* ============================================================
   ADDITIONS to cards.css — horizontal song card variant
   ------------------------------------------------------------
   Append these to your existing wwwroot/css/cards.css.
   They add the .card-horizontal layout for song cards and
   tweak the text rules so titles/artists wrap onto a 2nd line
   instead of getting truncated.
   ============================================================ */


/* =====================
   Improved text wrapping
   ---------------------
   Old behavior: white-space: nowrap + ellipsis = text gets cut off.
   New behavior: allow up to 2 lines, then ellipsis if still overflowing.
   ===================== */

.jt-card-title,
.jt-card-sub {
    /* Override the old single-line ellipsis */
    white-space: normal;
    overflow: hidden;
    text-overflow: ellipsis;
    /* Multi-line clamp — limits to 2 lines max */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-clamp: 2;
    /* Slight tightening so two lines don't feel cramped */
    line-height: 1.3;
}

.jt-card-meta-line {
    /* Keep meta short — only 1 line */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


/* =====================
   Horizontal Card Layout
   ---------------------
   Used on Creator Channel song cards. Square album art on the
   left, text stacked on the right.
   ===================== */

.jt-card.card-horizontal {
    /* Override base: width is content-driven by the grid */
    width: auto;
    flex: 1 1 280px;
    min-width: 240px;
    max-width: 360px;
}

    .jt-card.card-horizontal .jt-card-link {
        /* Side-by-side: art on the left, text on the right */
        flex-direction: row;
        align-items: center;
        gap: 12px;
    }

    .jt-card.card-horizontal .jt-card-art-wrapper {
        flex: 0 0 80px; /* fixed art size; never shrinks */
        width: 80px;
        height: 80px;
        border-radius: 8px;
        overflow: hidden;
    }

    .jt-card.card-horizontal .jt-card-art {
        width: 100%;
        height: 100%;
        aspect-ratio: 1 / 1;
        object-fit: cover;
    }

    .jt-card.card-horizontal .jt-card-text {
        flex: 1 1 auto;
        min-width: 0; /* CRITICAL: lets text shrink + wrap inside flex parent */
        padding: 0;
    }

    /* Slightly smaller text on horizontal cards to maximize content fit */
    .jt-card.card-horizontal .jt-card-title {
        font-size: 14px;
        -webkit-line-clamp: 2;
        line-clamp: 2;
    }

    .jt-card.card-horizontal .jt-card-sub {
        font-size: 12px;
        -webkit-line-clamp: 1;
        line-clamp: 1;
        white-space: nowrap;
    }

    .jt-card.card-horizontal .jt-card-meta {
        margin-top: 4px;
    }


/* =====================
   Responsive — horizontal cards stay readable on mobile
   ===================== */
@media (max-width: 768px) {
    .jt-card.card-horizontal {
        flex: 1 1 100%;
        max-width: 100%;
    }

        .jt-card.card-horizontal .jt-card-art-wrapper {
            flex: 0 0 70px;
            width: 70px;
            height: 70px;
        }
}






/* =====================
   Card Grid Container
   ---------------------
   Wrappable flex container for any page that displays cards as
   a grid (Library video grid, Creator Channel song/video grids,
   search results).
   ===================== */

.card-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    padding: 20px;
    align-items: flex-start;
}

@media (max-width: 768px) {
    .card-grid {
        gap: 12px;
        padding: 12px;
        justify-content: center;
    }
}