/* =========================================
   KERBAL SPACE PROGRAM ACTIVITY
   ========================================= */

.ksp-activity {
    width: 100%;
}


/* =========================================
   MASTER CELL
   ========================================= */

.ksp-master-cell {
    width: 100%;

    overflow: hidden;

    background:
        #29282e;

    border:
        1px solid var(--border);

    border-radius:
        10px;

    box-shadow:
        0 4px 16px
        rgba(0, 0, 0, 0.16);
}


/* =========================================
   HERO
   ========================================= */

.ksp-hero {
    width: 100%;
}


/* =========================================
   BANNER
   ========================================= */

.ksp-banner {
    position: relative;

    width: 100%;
    height: 320px;

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            #1d1c21,
            #302f36
        );
}


.ksp-banner-image {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
    object-position: center;
}


.ksp-banner-overlay {
    position: absolute;

    inset: 0;

    pointer-events: none;

    background:
        linear-gradient(
            to bottom,
            transparent 30%,
            rgba(26, 25, 30, 0.2) 58%,
            rgba(26, 25, 30, 0.86) 100%
        );
}


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

.ksp-hero-content {
    position: relative;

    display: flex;

    align-items: center;

    gap: 20px;

    padding:
        0 30px 28px;

    margin-top:
        -52px;

    border-bottom:
        1px solid var(--border);
}


/* =========================================
   ICON
   ========================================= */

.ksp-icon-wrapper {
    position: relative;

    width: 110px;
    height: 110px;

    flex-shrink: 0;

    overflow: hidden;

    display: flex;

    align-items: center;
    justify-content: center;

    background:
        #212026;

    border:
        5px solid #29282e;

    border-radius:
        18px;

    box-shadow:
        0 5px 16px
        rgba(0, 0, 0, 0.35);
}


.ksp-icon {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
}


.ksp-icon-fallback {
    position: absolute;

    inset: 0;

    display: none;

    align-items: center;
    justify-content: center;

    color:
        var(--accent-light);

    font-family:
        "Cascadia Code",
        "Fira Code",
        Consolas,
        monospace;

    font-size:
        1.2rem;

    font-weight:
        700;
}


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

.ksp-title-area {
    min-width: 0;

    padding-top:
        54px;
}


.ksp-title-area h2 {
    margin:
        3px 0 6px;

    color:
        var(--text-primary);

    font-size:
        clamp(
            1.7rem,
            3vw,
            2.3rem
        );

    font-weight:
        600;

    line-height:
        1.15;

    letter-spacing:
        -0.03em;
}


.ksp-title-area p {
    margin: 0;

    color:
        var(--text-secondary);

    font-size:
        0.88rem;

    line-height:
        1.55;
}


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

.ksp-master-content {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(230px, 300px);

    gap:
        16px;

    padding:
        24px;
}


/* =========================================
   INNER CELLS
   ========================================= */

.ksp-inner-cell {
    min-width: 0;

    background:
        #25242a;

    border:
        1px solid var(--border);

    border-radius:
        8px;
}


/* =========================================
   ABOUT
   ========================================= */

.ksp-about {
    padding:
        22px 24px;
}


.ksp-about h3 {
    margin:
        4px 0 18px;

    color:
        var(--text-primary);

    font-size:
        1.2rem;

    font-weight:
        600;

    letter-spacing:
        -0.02em;
}


.ksp-description p {
    max-width:
        820px;

    margin:
        0 0 16px;

    color:
        var(--text-secondary);

    font-size:
        0.87rem;

    line-height:
        1.75;
}


.ksp-description p:last-child {
    margin-bottom:
        0;
}


/* =========================================
   HOURS
   ========================================= */

.ksp-hours-card {
    display: flex;

    flex-direction: column;

    padding:
        24px;

    background:
        linear-gradient(
            145deg,
            rgba(123, 131, 235, 0.09),
            transparent 45%
        ),
        #25242a;
}


.ksp-hours-number {
    margin-top:
        25px;

    color:
        var(--text-primary);

    font-family:
        "Cascadia Code",
        "Fira Code",
        Consolas,
        monospace;

    font-size:
        clamp(
            2.8rem,
            7vw,
            4.25rem
        );

    font-weight:
        700;

    line-height:
        0.95;

    letter-spacing:
        -0.07em;
}


.ksp-hours-label {
    margin-top:
        8px;

    color:
        var(--accent-light);

    font-family:
        "Cascadia Code",
        "Fira Code",
        Consolas,
        monospace;

    font-size:
        0.68rem;

    font-weight:
        600;

    letter-spacing:
        0.15em;
}


.ksp-hours-card > p {
    margin:
        22px 0;

    color:
        var(--text-secondary);

    font-size:
        0.79rem;

    line-height:
        1.6;
}


/* =========================================
   HOURS TERMINAL
   ========================================= */

.ksp-hours-terminal {
    margin-top:
        auto;

    display: flex;

    justify-content:
        space-between;

    gap:
        10px;

    padding:
        10px 11px;

    color:
        var(--text-muted);

    background:
        #211f25;

    border:
        1px solid var(--border);

    border-radius:
        5px;

    font-family:
        "Cascadia Code",
        "Fira Code",
        Consolas,
        monospace;

    font-size:
        0.67rem;
}


.ksp-hours-terminal span:last-child {
    color:
        var(--accent-light);
}


/* =========================================
   RESPONSIVE
   ========================================= */

@media (max-width: 850px) {

    .ksp-master-content {
        grid-template-columns:
            1fr;
    }


    .ksp-hours-card {
        min-height:
            240px;
    }

}


@media (max-width: 650px) {

    .ksp-banner {
        height:
            220px;
    }


    .ksp-hero-content {
        align-items:
            flex-end;

        gap:
            14px;

        padding:
            0 18px 20px;

        margin-top:
            -38px;
    }


    .ksp-icon-wrapper {
        width:
            82px;

        height:
            82px;

        border-width:
            4px;

        border-radius:
            14px;
    }


    .ksp-title-area {
        padding-top:
            40px;
    }


    .ksp-title-area h2 {
        font-size:
            1.35rem;
    }


    .ksp-title-area p {
        font-size:
            0.76rem;
    }


    .ksp-master-content {
        padding:
            18px;
    }


    .ksp-about,
    .ksp-hours-card {
        padding:
            20px;
    }

}