/*==================================================
    IndiaRadio 2026
    File : cards.css
==================================================*/


/*==================================================
GRID SYSTEM
==================================================*/

.station-grid{

    display:grid;

    grid-template-columns:repeat(3,minmax(0,1fr));

    gap:16px;

    align-items:start;

    width:100%;

}


/*======================================
TABLET
======================================*/

@media(min-width:768px){

    .station-grid{

        grid-template-columns:repeat(4,minmax(0,1fr));

        gap:18px;

    }

}


/*======================================
LAPTOP
======================================*/

@media(min-width:1024px){

    .station-grid{

        grid-template-columns:repeat(5,minmax(0,1fr));

        gap:20px;

    }

}


/*======================================
DESKTOP
======================================*/

@media(min-width:1400px){

    .station-grid{

        grid-template-columns:repeat(6,minmax(0,1fr));

        gap:22px;

    }

}


/*==================================================
CARD
==================================================*/

.station-card{

    position:relative;

    display:flex;

    flex-direction:column;

    overflow:hidden;

    background:linear-gradient(
        180deg,
        var(--surface),
        var(--surface-2)
    );

    border:1px solid rgba(255,255,255,.06);

    border-radius:8px;

    box-shadow:
        0 8px 20px rgba(0,0,0,.22);

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        border-color .25s ease,
        background .25s ease;

    text-decoration:none;

    color:inherit;

    isolation:isolate;

}


/*====================================*/

.station-card::before{

    content:"";

    position:absolute;

    inset:0;

    background:

    linear-gradient(
        135deg,
        rgba(124,58,237,.10),
        transparent 55%
    );

    opacity:0;

    transition:opacity .25s ease;

    pointer-events:none;

}


/*====================================*/

.station-card:hover{

    transform:translateY(-5px);

    border-color:rgba(124,58,237,.45);

    box-shadow:
        0 18px 38px rgba(0,0,0,.35);

}


.station-card:hover::before{

    opacity:1;

}


/*====================================*/

.station-card:active{

    transform:scale(.985);

}


/*====================================*/

.station-card:focus-visible{

    outline:2px solid var(--primary);

    outline-offset:3px;

}


/*====================================*/

.station-card img{

    display:block;

}


/*==================================================
IMAGE
==================================================*/

.station-image{

    width:100%;

    aspect-ratio:1/1;

    object-fit:cover;

    display:block;

    background:#1b1f28;

    transition:
        transform .35s ease,
        filter .35s ease;

}


/*====================================*/

.station-card:hover .station-image{

    transform:scale(1.04);

    filter:brightness(1.04);

}


/*====================================*/

.station-image[src=""],
.station-image:not([src]){

    background:
        linear-gradient(
            135deg,
            #242933,
            #313846
        );

}


/*====================================*/

.station-image{

    image-rendering:auto;

}


/*==================================================
TITLE
==================================================*/

.station-title{

    display:flex;

    align-items:center;

    justify-content:center;

    text-align:center;

    min-height:58px;

    padding:14px 12px;

    font-size:14px;

    font-weight:600;

    line-height:1.45;

    color:var(--text);

    background:linear-gradient(
        180deg,
        rgba(255,255,255,.02),
        transparent
    );

    border-top:1px solid rgba(255,255,255,.04);

    overflow:hidden;

    transition:
        color .25s ease,
        background .25s ease;

}


/*======================================*/

.station-card:hover .station-title{

    color:#ffffff;

}


/*======================================*/

.station-title{

    display:-webkit-box;

    -webkit-box-orient:vertical;

    -webkit-line-clamp:2;

    text-overflow:ellipsis;

}


/*======================================*/

@media(max-width:480px){

    .station-title{

        min-height:54px;

        font-size:13px;

        padding:12px 10px;

    }

}


@media(min-width:1200px){

    .station-title{

        min-height:60px;

        font-size:15px;

    }

}


/*==================================================
ACCESSIBILITY
==================================================*/

.station-card:focus-visible{

    outline:2px solid var(--primary);

    outline-offset:3px;

}


/*==================================================
IMAGE PLACEHOLDER
==================================================*/

.station-image{

    background:#1b1f28;

}

.station-image[src=""],
.station-image:not([src]){

    background:
    linear-gradient(
        135deg,
        #232933,
        #313846
    );

}


/*==================================================
SKELETON
==================================================*/

.station-card.loading{

    pointer-events:none;

    user-select:none;

}

.station-card.loading .station-image,

.station-card.loading .station-title{

    background:
    linear-gradient(
        90deg,
        #242933 25%,
        #313846 37%,
        #242933 63%
    );

    background-size:400% 100%;

    animation:skeletonLoading 1.2s linear infinite;

    color:transparent;

}

@keyframes skeletonLoading{

    0%{

        background-position:100% 0;

    }

    100%{

        background-position:-100% 0;

    }

}


/*==================================================
BADGE
==================================================*/

.station-badge{

    position:absolute;

    top:10px;

    left:10px;

    z-index:2;

    padding:5px 10px;

    border-radius:999px;

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

    color:#fff;

    font-size:11px;

    font-weight:700;

    backdrop-filter:blur(8px);

}


/*==================================================
PERFORMANCE
==================================================*/

.station-card{

    will-change:transform;

}

.station-image{

    will-change:transform;

}


/*==============================
TABLET
==============================*/

@media (min-width:768px){

    .station-grid{

        grid-template-columns:repeat(4,minmax(0,1fr));

        gap:18px;

    }

    .station-title{

        font-size:15px;

        min-height:52px;

    }

}


/*==============================
LAPTOP
==============================*/

@media (min-width:1024px){

    .station-grid{

        grid-template-columns:repeat(5,minmax(0,1fr));

    }

}


/*==============================
DESKTOP
==============================*/

@media (min-width:1400px){

    .station-grid{

        grid-template-columns:repeat(6,minmax(0,1fr));

        gap:20px;

    }

    .station-title{

        font-size:15px;

        padding:14px;

    }

}


/*==============================
REDUCED MOTION
==============================*/

@media (prefers-reduced-motion:reduce){

    .station-card,
    .station-image{

        transition:none;

    }

}