/* ============================================================
   CRAFTWEB PORTFOLIO
============================================================ */

:root {
    --portfolio-ink: #172126;
    --portfolio-muted: #667176;
    --portfolio-cream: #f7f5f0;
    --portfolio-white: #ffffff;
    --portfolio-border: #dedbd3;
    --portfolio-accent: #b86b3c;
}


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

.portfolio-hero {
    padding: 7rem 0 6rem;

    background:
        linear-gradient(
            135deg,
            #f7f5f0 0%,
            #eeebe3 100%
        );

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

.portfolio-hero .eyebrow,
.portfolio-section-heading .eyebrow,
.portfolio-cta .eyebrow {
    margin-bottom: 1rem;

    color: var(--portfolio-accent);

    font-size: 0.7rem;
    font-weight: 850;

    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.portfolio-hero h1 {
    max-width: 900px;

    margin: 0 0 1.5rem;

    color: var(--portfolio-ink);

    font-size: clamp(3.5rem, 9vw, 7.5rem);

    line-height: 0.88;
    letter-spacing: -0.08em;
}

.portfolio-hero__lead {
    max-width: 650px;

    margin: 0;

    color: var(--portfolio-muted);

    font-size: 1.1rem;

    line-height: 1.7;
}


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

.portfolio-projects {
    padding: 7rem 0;
}

.portfolio-section-heading {
    max-width: 700px;

    margin-bottom: 3.5rem;
}

.portfolio-section-heading h2 {
    margin: 0;

    color: var(--portfolio-ink);

    font-size: clamp(2.5rem, 5vw, 4.5rem);

    line-height: 0.95;
    letter-spacing: -0.065em;
}


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

.portfolio-grid {
    display: grid;

    gap: 2rem;
}


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

.portfolio-card {
    overflow: hidden;

    background: var(--portfolio-white);

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

    transition:
        transform 220ms ease,
        box-shadow 220ms ease;
}

.portfolio-card:hover {
    transform: translateY(-6px);

    box-shadow:
        0 24px 60px rgba(20, 28, 31, 0.12);
}


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

.portfolio-card__visual {
    position: relative;

    min-height: 330px;

    display: flex;

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

    overflow: hidden;
}

.portfolio-card__visual::after {
    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    background:
        linear-gradient(
            135deg,
            transparent 50%,
            rgba(255,255,255,0.12)
        );
}


/* ============================================================
   INDUSTRY BACKGROUNDS
============================================================ */

.portfolio-card__visual--plumber {
    background:
        linear-gradient(
            135deg,
            #e8dcc9,
            #b9c9c7
        );
}

.portfolio-card__visual--roofer {
    background:
        linear-gradient(
            135deg,
            #d5d1c7,
            #707873
        );
}

.portfolio-card__visual--hvac {
    background:
        linear-gradient(
            135deg,
            #dcecef,
            #a9cbd1
        );
}

.portfolio-card__visual--electrician {
    background:
        linear-gradient(
            135deg,
            #303437,
            #171a1c
        );
}


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

.portfolio-card__badge {
    position: absolute;

    left: 1.25rem;
    top: 1.25rem;

    z-index: 3;

    padding: 0.45rem 0.7rem;

    background: rgba(255,255,255,0.9);

    color: var(--portfolio-ink);

    font-size: 0.65rem;
    font-weight: 850;

    letter-spacing: 0.08em;
    text-transform: uppercase;
}


/* ============================================================
   MINI BROWSER
============================================================ */

.portfolio-mini-window {
    position: relative;
    z-index: 2;

    width: min(82%, 470px);

    overflow: hidden;

    background: #fff;

    border: 1px solid rgba(20,30,33,0.16);

    box-shadow:
        0 25px 60px rgba(20,30,33,0.2);

    transform: rotate(-1deg);

    transition:
        transform 250ms ease;
}

.portfolio-card:hover .portfolio-mini-window {
    transform:
        rotate(0deg)
        scale(1.025);
}

.portfolio-mini-window__bar {
    height: 30px;

    display: flex;

    align-items: center;

    gap: 5px;

    padding-inline: 0.8rem;

    background: #f2f1ed;

    border-bottom: 1px solid #dddcd6;
}

.portfolio-mini-window__bar span {
    width: 5px;
    height: 5px;

    background: #aaa8a1;

    border-radius: 50%;
}

.portfolio-mini-window__content {
    min-height: 220px;

    display: flex;

    flex-direction: column;

    justify-content: center;

    padding: 2rem;

    background: #fbfaf7;
}

.portfolio-mini-window__content small {
    margin-bottom: 1rem;

    color: #7a807e;

    font-size: 0.6rem;
    font-weight: 800;

    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.portfolio-mini-window__content strong {
    max-width: 360px;

    color: #172126;

    font-size: clamp(1.8rem, 4vw, 3rem);

    line-height: 0.92;
    letter-spacing: -0.065em;
}


/* ============================================================
   MINI CONTENT LINES
============================================================ */

.portfolio-mini-line {
    width: 55%;
    height: 7px;

    margin-top: 1.3rem;

    background: #ddd9d0;
}

.portfolio-mini-line--short {
    width: 32%;

    margin-top: 0.5rem;
}


/* ============================================================
   ELECTRIC MINI WINDOW
============================================================ */

.portfolio-card__visual--electrician
.portfolio-mini-window__content {
    background: #24282a;
}

.portfolio-card__visual--electrician
.portfolio-mini-window__content small {
    color: #f4c430;
}

.portfolio-card__visual--electrician
.portfolio-mini-window__content strong {
    color: #fff;
}

.portfolio-card__visual--electrician
.portfolio-mini-line {
    background: #f4c430;
}


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

.portfolio-card__body {
    padding: 2rem;
}

.portfolio-card__category {
    margin: 0 0 0.6rem;

    color: var(--portfolio-accent);

    font-size: 0.68rem;
    font-weight: 850;

    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.portfolio-card__body h3 {
    margin: 0 0 0.75rem;

    color: var(--portfolio-ink);

    font-size: 1.5rem;

    line-height: 1;
    letter-spacing: -0.045em;
}

.portfolio-card__body > p:not(.portfolio-card__category) {
    min-height: 72px;

    margin: 0 0 1.5rem;

    color: var(--portfolio-muted);

    font-size: 0.92rem;

    line-height: 1.6;
}


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

.portfolio-card__link {
    display: inline-flex;

    align-items: center;

    gap: 0.6rem;

    color: var(--portfolio-ink);

    font-size: 0.82rem;
    font-weight: 850;
}

.portfolio-card__link span {
    display: inline-block;

    transition:
        transform 180ms ease;
}

.portfolio-card__link:hover span {
    transform: translateX(5px);
}


/* ============================================================
   CTA
============================================================ */

.portfolio-cta {
    padding: 7rem 0;

    background: var(--portfolio-ink);

    color: #fff;
}

.portfolio-cta__inner {
    max-width: 850px;
}

.portfolio-cta .eyebrow {
    color: #d99a70;
}

.portfolio-cta h2 {
    margin: 0 0 1.25rem;

    color: #fff;

    font-size: clamp(3rem, 7vw, 6rem);

    line-height: 0.9;
    letter-spacing: -0.075em;
}

.portfolio-cta p:not(.eyebrow) {
    max-width: 580px;

    margin: 0 0 2rem;

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

    font-size: 1rem;

    line-height: 1.7;
}


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

.portfolio-button {
    min-height: 52px;

    display: inline-flex;

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

    padding: 0.9rem 1.4rem;

    background: #fff;

    color: var(--portfolio-ink);

    border: 1px solid #fff;

    font-size: 0.82rem;
    font-weight: 850;

    transition:
        transform 180ms ease,
        background-color 180ms ease;
}

.portfolio-button:hover {
    transform: translateY(-2px);

    background: #f4f1e9;
}


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

@media (min-width: 650px) {

    .portfolio-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .portfolio-card__visual {
        min-height: 360px;
    }

}


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

@media (min-width: 1000px) {

    .portfolio-grid {
        grid-template-columns: repeat(2, 1fr);

        gap: 2.5rem;
    }

    .portfolio-card__visual {
        min-height: 390px;
    }

}