/* ========================================
   RESET
======================================== */

*{
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    margin:0;

    background:
        radial-gradient(
            circle at 50% -20%,
            #18244a 0%,
            #080b18 45%,
            #020308 100%
        );

    color:white;

    font-family:
        Arial,
        Helvetica,
        sans-serif;
}


/* ========================================
   HEADER
======================================== */

.header{
    text-align:center;
    padding:65px 20px 35px;
}

.header .mini{
    color:#7095ff;
    font-size:11px;
    letter-spacing:4px;
    font-weight:bold;
}

.header h1{
    margin:12px 0;

    font-size:
        clamp(36px,6vw,72px);

    letter-spacing:-2px;

    background:
        linear-gradient(
            90deg,
            #ffffff,
            #8db1ff
        );

    -webkit-background-clip:text;
    background-clip:text;

    color:transparent;
}

.header p{
    max-width:680px;
    margin:auto;

    color:#8d99b2;

    line-height:1.7;

    font-size:15px;
}


/* ========================================
   FILTERS
======================================== */

.filters{
    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:9px;

    padding:
        10px
        20px
        35px;
}

.filter{
    border:
        1px solid
        rgba(255,255,255,.12);

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

    color:#aeb8ca;

    padding:
        10px 16px;

    border-radius:100px;

    cursor:pointer;

    transition:.25s;

    font-size:12px;
}

.filter:hover,
.filter.active{

    background:
        rgba(88,125,255,.18);

    border-color:
        rgba(100,145,255,.5);

    color:white;
}


/* ========================================
   GALLERY
======================================== */

.gallery{

    max-width:1250px;

    margin:auto;

    padding:
        0 20px
        70px;

    display:grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(290px,1fr)
        );

    gap:22px;
}


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

.card{

    position:relative;

    overflow:hidden;

    min-height:420px;

    border-radius:22px;

    background:
        rgba(9,13,27,.88);

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

    box-shadow:
        0 20px 60px
        rgba(0,0,0,.25);

    transition:
        transform .35s ease,
        border-color .35s ease,
        box-shadow .35s ease;
}

.card:hover{

    transform:
        translateY(-8px);

    border-color:
        rgba(110,150,255,.4);

    box-shadow:
        0 30px 80px
        rgba(20,60,150,.25);
}


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

.card-image{

    height:220px;

    position:relative;

    overflow:hidden;

    background:#050711;
}

.card-image img{

    width:100%;
    height:100%;

    object-fit:cover;

    display:block;

    transition:
        transform .6s ease;
}

.card:hover .card-image img{

    transform:
        scale(1.08);
}


.card-image::after{

    content:"";

    position:absolute;

    inset:0;

    background:
        linear-gradient(
            to bottom,
            transparent 45%,
            rgba(5,7,15,.9)
        );

    pointer-events:none;
}


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

.badge{

    position:absolute;

    top:14px;
    left:14px;

    z-index:2;

    padding:
        7px 10px;

    border-radius:8px;

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

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

    backdrop-filter:
        blur(10px);

    color:#c7d5ff;

    font-size:9px;

    letter-spacing:1.4px;

    text-transform:uppercase;
}


/* ========================================
   CONTENT
======================================== */

.card-content{

    padding:20px;
}

.card-content h2{

    margin:
        0 0 7px;

    font-size:23px;
}

.description{

    margin:
        0 0 18px;

    color:#8d99ad;

    line-height:1.6;

    font-size:13px;
}


/* ========================================
   SOURCE INFO
======================================== */

.source-box{

    padding:13px;

    border-radius:12px;

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

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

    margin-bottom:12px;
}

.source-row{

    display:flex;

    justify-content:space-between;

    gap:10px;

    margin-bottom:7px;

    font-size:11px;
}

.source-row:last-child{
    margin-bottom:0;
}

.source-label{

    color:#69758c;

    text-transform:uppercase;

    letter-spacing:.8px;
}

.source-value{

    color:#c5cede;

    text-align:right;
}


/* ========================================
   BUTTON
======================================== */

.source-button{

    display:block;

    text-align:center;

    padding:11px;

    border-radius:10px;

    background:
        rgba(79,120,255,.12);

    border:
        1px solid
        rgba(90,130,255,.25);

    color:#9ebcff;

    text-decoration:none;

    font-size:11px;

    font-weight:bold;

    letter-spacing:1px;

    transition:.25s;
}

.source-button:hover{

    background:
        rgba(79,120,255,.25);

    color:white;
}


/* ========================================
   FOOTER
======================================== */

.footer{

    text-align:center;

    padding:
        10px
        20px
        70px;

    color:#59657c;

    font-size:11px;

    line-height:1.7;
}

.footer strong{
    color:#8b9ac0;
}


/* ========================================
   NO RESULTS
======================================== */

.no-results{

    display:none;

    grid-column:
        1/-1;

    text-align:center;

    padding:60px;

    color:#68748b;
}


/* ========================================
   MOBILE
======================================== */

@media(max-width:600px){

    .header{
        padding:
            50px 15px 30px;
    }

    .gallery{
        padding:
            0 15px
            60px;
    }

    .card{
        min-height:auto;
    }

    .card-image{
        height:230px;
    }

}


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

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

    *,
    *::before,
    *::after{

        animation-duration:.01ms !important;

        animation-iteration-count:1 !important;

        scroll-behavior:auto !important;

        transition-duration:.01ms !important;
    }

}