/* =========================================
   BLACKSMITHING & METALWORK ACTIVITY
   ========================================= */

.blacksmithing-activity {
    width: 100%;
}


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

.blacksmithing-shell {
    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
   ========================================= */

.blacksmithing-hero {
    width: 100%;
}


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

.blacksmithing-banner {
    position: relative;

    width: 100%;
    height: 320px;

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            #19181c,
            #302e34
        );
}


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

    display: block;

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


.blacksmithing-banner-overlay {
    position: absolute;

    inset: 0;

    pointer-events: none;

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


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

.blacksmithing-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
   ========================================= */

.blacksmithing-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);
}


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

    display: block;

    object-fit: cover;
}


.blacksmithing-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:
        0.9rem;

    font-weight:
        700;
}


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

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

    padding-top:
        54px;
}


.blacksmithing-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;
}


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

    color:
        var(--text-secondary);

    font-size:
        0.88rem;

    line-height:
        1.55;
}


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

.blacksmithing-content {
    min-width: 0;

    display: flex;

    flex-direction: column;

    gap: 18px;

    padding:
        24px;
}


/* =========================================
   SHARED LABEL
   ========================================= */

.blacksmithing-label {
    display: block;

    margin-bottom:
        7px;

    color:
        var(--text-muted);

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

    font-size:
        0.63rem;

    font-weight:
        600;

    text-transform:
        uppercase;

    letter-spacing:
        0.08em;
}


/* =========================================
   EXPERIENCE
   ========================================= */

.blacksmithing-experience {
    padding:
        20px;

    background:
        #25242a;

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

    border-radius:
        8px;
}


.blacksmithing-experience h3 {
    margin:
        0 0 15px;

    color:
        var(--text-primary);

    font-size:
        1.05rem;

    font-weight:
        600;
}


/* =========================================
   EXPERIENCE META
   ========================================= */

.blacksmithing-experience-meta {
    display: grid;

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

    gap:
        10px;
}


.blacksmithing-experience-meta > div {
    min-width: 0;

    padding:
        12px 14px;

    background:
        #212026;

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

    border-radius:
        6px;
}


.blacksmithing-experience-meta span {
    display: block;

    margin-bottom:
        4px;

    color:
        var(--text-muted);

    font-size:
        0.68rem;
}


.blacksmithing-experience-meta strong {
    color:
        var(--text-primary);

    font-size:
        0.8rem;

    font-weight:
        500;

    line-height:
        1.4;
}


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

.blacksmithing-about {
    padding:
        18px 20px;

    background:
        #25242a;

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

    border-radius:
        8px;
}


.blacksmithing-about p {
    margin:
        0 0 12px;

    color:
        var(--text-secondary);

    font-size:
        0.82rem;

    line-height:
        1.7;
}


.blacksmithing-about p:last-child {
    margin-bottom:
        0;
}


/* =========================================
   SKILLS
   ========================================= */

.blacksmithing-skills {
    padding:
        18px 20px;

    background:
        #25242a;

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

    border-radius:
        8px;
}


.blacksmithing-skill-list {
    display: flex;

    flex-wrap: wrap;

    gap:
        8px;
}


.blacksmithing-skill {
    padding:
        7px 10px;

    color:
        var(--text-secondary);

    background:
        #212026;

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

    border-radius:
        6px;

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

    font-size:
        0.68rem;

    transition:
        background 150ms ease,
        border-color 150ms ease,
        color 150ms ease,
        transform 150ms ease;
}


.blacksmithing-skill:hover {
    transform:
        translateY(-1px);

    color:
        var(--text-primary);

    background:
        var(--surface-hover);

    border-color:
        #55545e;
}


/* =========================================
   PROJECT SECTION
   ========================================= */

.blacksmithing-project-section {
    padding:
        26px;

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


.blacksmithing-project-heading {
    margin-bottom:
        18px;
}


.blacksmithing-project-heading h3 {
    margin:
        4px 0 0;

    color:
        var(--text-primary);

    font-size:
        1.18rem;

    font-weight:
        600;
}


/* =========================================
   PROJECT GRID
   ========================================= */

.blacksmithing-project-grid {
    display: grid;

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

    gap:
        14px;
}


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

.blacksmithing-project-card {
    min-width: 0;

    overflow: hidden;

    background:
        #25242a;

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

    border-radius:
        8px;

    transition:
        transform 160ms ease,
        border-color 160ms ease,
        background 160ms ease;
}


.blacksmithing-project-card:hover {
    transform:
        translateY(-2px);

    background:
        var(--surface-hover);

    border-color:
        #55545e;
}


/* =========================================
   PROJECT VISUAL
   ========================================= */

.blacksmithing-project-visual {
    width: 100%;

    aspect-ratio:
        16 / 10;

    overflow: hidden;

    background:
        #1d1c21;

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


.blacksmithing-project-image {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition:
        transform 250ms ease;
}


.blacksmithing-project-card:hover
.blacksmithing-project-image {
    transform:
        scale(1.025);
}


.blacksmithing-project-placeholder {
    width: 100%;
    height: 100%;

    display: flex;

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

    color:
        rgba(255, 255, 255, 0.12);

    font-size:
        2.4rem;
}


/* =========================================
   PROJECT BODY
   ========================================= */

.blacksmithing-project-body {
    padding:
        16px;
}


.blacksmithing-project-body h4 {
    margin:
        0;

    color:
        var(--text-primary);

    font-size:
        0.93rem;

    font-weight:
        600;
}


.blacksmithing-project-material {
    display: block;

    margin-top:
        5px;

    color:
        var(--accent-light);

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

    font-size:
        0.65rem;
}


.blacksmithing-project-body p {
    margin:
        9px 0 0;

    color:
        var(--text-secondary);

    font-size:
        0.76rem;

    line-height:
        1.6;
}


/* =========================================
   PROJECT TECHNIQUES
   ========================================= */

.blacksmithing-project-techniques {
    display: flex;

    flex-wrap: wrap;

    gap:
        6px;

    margin-top:
        12px;
}


.blacksmithing-project-techniques span {
    padding:
        5px 7px;

    color:
        var(--text-muted);

    background:
        #212026;

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

    border-radius:
        5px;

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

    font-size:
        0.6rem;
}


/* =========================================
   EMPTY PROJECT STATE
   ========================================= */

.blacksmithing-project-empty {
    grid-column:
        1 / -1;

    min-height:
        150px;

    display: flex;

    align-items: center;

    gap:
        18px;

    padding:
        22px;

    background:
        #25242a;

    border:
        1px dashed #4a4952;

    border-radius:
        8px;
}


.blacksmithing-project-empty-icon {
    flex-shrink: 0;

    width: 56px;
    height: 56px;

    display: flex;

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

    color:
        var(--text-muted);

    background:
        #212026;

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

    border-radius:
        10px;

    font-size:
        1.4rem;
}


.blacksmithing-project-empty h4 {
    margin:
        0 0 5px;

    color:
        var(--text-primary);

    font-size:
        0.92rem;

    font-weight:
        600;
}


.blacksmithing-project-empty p {
    margin: 0;

    max-width:
        650px;

    color:
        var(--text-secondary);

    font-size:
        0.78rem;

    line-height:
        1.55;
}


/* =========================================
   RESPONSIVE - TABLET
   ========================================= */

@media (max-width: 900px) {

    .blacksmithing-project-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }

}


/* =========================================
   RESPONSIVE - SMALL TABLET
   ========================================= */

@media (max-width: 700px) {

    .blacksmithing-experience-meta {
        grid-template-columns:
            1fr;
    }


    .blacksmithing-project-grid {
        grid-template-columns:
            1fr;
    }

}


/* =========================================
   RESPONSIVE - MOBILE
   ========================================= */

@media (max-width: 650px) {

    .blacksmithing-banner {
        height:
            220px;
    }


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

        gap:
            14px;

        padding:
            0 18px 20px;

        margin-top:
            -38px;
    }


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

        height:
            82px;

        border-width:
            4px;

        border-radius:
            14px;
    }


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


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


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


    .blacksmithing-content {
        gap:
            14px;

        padding:
            18px;
    }


    .blacksmithing-project-section {
        padding:
            18px;
    }

}


/* =========================================
   RESPONSIVE - SMALL MOBILE
   ========================================= */

@media (max-width: 480px) {

    .blacksmithing-banner {
        height:
            190px;
    }


    .blacksmithing-hero-content {
        gap:
            12px;

        padding:
            0 15px 18px;
    }


    .blacksmithing-icon-wrapper {
        width:
            72px;

        height:
            72px;
    }


    .blacksmithing-title-area {
        padding-top:
            34px;
    }


    .blacksmithing-title-area h2 {
        font-size:
            1.2rem;
    }


    .blacksmithing-title-area p {
        font-size:
            0.72rem;
    }


    .blacksmithing-experience,
    .blacksmithing-about,
    .blacksmithing-skills {
        padding:
            16px;
    }


    .blacksmithing-project-empty {
        align-items:
            flex-start;

        flex-direction:
            column;
    }

}