/* ============================================================
   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;
}


/* =====================
   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-lg {
        width: 160px;
        flex: 0 0 160px;
    }

    .jt-card.card-md {
        width: 140px;
        flex: 0 0 140px;
    }

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

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





/* =====================
   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;
    }
}



/* =====================
   Two-column behavior in home rails
   ---------------------
   Applies on tablets and phones — overrides the fixed-width
   .card-md/.card-lg/.card-sm rules from the earlier media query
   so cards always fit exactly 2 across at any narrow viewport.
   ===================== */

/* Change @media (max-width: 900px) → @media (max-width: 1024px) */
@media (max-width: 1024px) {
    .rail-track > .jt-card.card-sm,
    .rail-track > .jt-card.card-md,
    .rail-track > .jt-card.card-lg {
        width: calc(50% - 5px);
        min-width: 0;
    }
}



/* =====================
   Pin meta row (views) to the bottom of the card
   when used inside a home rail track.
   ===================== */
.rail-track > .jt-card .jt-card-link {
    flex: 1;
    min-height: 0;
}

.rail-track > .jt-card .jt-card-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.rail-track > .jt-card .jt-card-meta {
    margin-top: auto;
}