/**
 * ============================================================================
 * GudStories Framework
 * ============================================================================
 *
 * File
 * ----
 * gs-framework-cards.css
 *
 * Version
 * -------
 * 1.0.0
 *
 * Status
 * ------
 * OTT FRAMEWORK
 *
 * Purpose
 * -------
 * Universal Cinematic Card Engine.
 *
 * Used by:
 *
 * • Stories
 * • Universes
 * • Galaxies
 * • Search
 * • Recommendations
 * • Continue Journey
 * • My List
 * • Kids
 * • Trending
 *
 * ============================================================================
 */


/* ==========================================================================
   Base Card
   ========================================================================== */

.gs-card{

    position:relative;

    display:flex;

    flex-direction:column;

    overflow:hidden;

    border-radius:var(--gs-radius-lg);

    background:var(--gs-color-surface);

    transition:
        transform var(--gs-transition-fast),
        box-shadow var(--gs-transition-fast);

    cursor:pointer;

}


/* ==========================================================================
   Card Image
   ========================================================================== */

.gs-card-image{

    position:relative;

    width:100%;

    aspect-ratio:16/9;

    overflow:hidden;

}

.gs-card-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:
        transform .40s ease;

}


/* ==========================================================================
   Overlay
   ========================================================================== */

.gs-card-overlay{

    position:absolute;

    inset:0;

    display:flex;

    flex-direction:column;

    justify-content:flex-end;

    padding:var(--gs-space-4);

    background:

        linear-gradient(

            to top,

            rgba(0,0,0,.90),

            rgba(0,0,0,.05)

        );

}


/* ==========================================================================
   Content
   ========================================================================== */

.gs-card-content{

    padding:var(--gs-space-4);

}

.gs-card-title{

    font-size:var(--gs-font-size-md);

    font-weight:var(--gs-font-weight-bold);

    color:var(--gs-color-text);

    margin-bottom:var(--gs-space-2);

}

.gs-card-description{

    font-size:var(--gs-font-size-sm);

    color:var(--gs-color-text-muted);

    line-height:1.5;

}


/* ==========================================================================
   Badge
   ========================================================================== */

.gs-card-badge{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:4px 10px;

    border-radius:999px;

    background:var(--gs-color-primary);

    color:#ffffff;

    font-size:12px;

    font-weight:700;

}


/* ==========================================================================
   Meta
   ========================================================================== */

.gs-card-meta{

    display:flex;

    gap:var(--gs-space-3);

    margin-top:var(--gs-space-3);

    font-size:13px;

    color:var(--gs-color-text-muted);

}


/* ==========================================================================
   Actions
   ========================================================================== */

.gs-card-actions{

    display:flex;

    gap:var(--gs-space-2);

    margin-top:var(--gs-space-4);

}


/* ==========================================================================
   Hover
   ========================================================================== */

.gs-card:hover{

    transform:

        translateY(-6px)

        scale(1.03);

    box-shadow:var(--gs-shadow-lg);

}

.gs-card:hover img{

    transform:scale(1.08);

}


/* ==========================================================================
   Cinematic Expansion
   ========================================================================== */

.gs-card-expand{

    transition:

        transform .30s ease,

        box-shadow .30s ease;

}

.gs-card-expand:hover{

    transform:

        scale(1.08);

    z-index:20;

}


/* ==========================================================================
   Play Button
   ========================================================================== */

.gs-card-play{

    position:absolute;

    top:50%;

    left:50%;

    width:64px;

    height:64px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:rgba(0,0,0,.70);

    color:#ffffff;

    transform:

        translate(-50%,-50%)

        scale(.85);

    opacity:0;

    transition:

        all .25s ease;

}

.gs-card:hover .gs-card-play{

    opacity:1;

    transform:

        translate(-50%,-50%)

        scale(1);

}


/* ==========================================================================
   Progress Bar
   ========================================================================== */

.gs-card-progress{

    position:absolute;

    left:0;

    right:0;

    bottom:0;

    height:4px;

    background:rgba(255,255,255,.15);

}

.gs-card-progress-bar{

    height:100%;

    width:0;

    background:var(--gs-color-primary);

}


/* ==========================================================================
   Story
   ========================================================================== */

.gs-card-story{

    aspect-ratio:16/9;

}


/* ==========================================================================
   Universe
   ========================================================================== */

.gs-card-universe{

    aspect-ratio:16/9;

}


/* ==========================================================================
   Galaxy
   ========================================================================== */

.gs-card-galaxy{

    aspect-ratio:16/9;

}


/* ==========================================================================
   Audio
   ========================================================================== */

.gs-card-audio{

    aspect-ratio:1/1;

}


/* ==========================================================================
   Video
   ========================================================================== */

.gs-card-video{

    aspect-ratio:16/9;

}


/* ==========================================================================
   Search
   ========================================================================== */

.gs-card-search{

    display:flex;

    gap:var(--gs-space-4);

    align-items:center;

}


/* ==========================================================================
   Kids
   ========================================================================== */

.gs-card-kids{

    border:2px solid #FFD54F;

}


/* ==========================================================================
   Premium
   ========================================================================== */

.gs-card-premium{

    border:2px solid #FFC107;

}


/* ==========================================================================
   TV Focus
   ========================================================================== */

.tv-focusable.gs-card:focus-visible{

    outline:3px solid var(--gs-color-primary);

    outline-offset:4px;

}