/* ================================
   PROJECTS PAGE
================================ */

.projects-page {
    min-height: 100vh;
    padding: 150px 0 110px;
}

/* Header */

.projects-header {
    max-width: 780px;
    margin-bottom: 65px;
}

.projects-header h1 {
    margin: 15px 0 20px;
    font-size: clamp(42px, 6vw, 72px);
    line-height: 1.05;
    letter-spacing: -1.5px;
}

.projects-header p {
    max-width: 700px;
    margin: 0;
    color: var(--muted);
    font-size: 17px;
    line-height: 1.8;
}

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

.projects-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 26px;
}

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

.project-card {
    position: relative;
    min-height: 390px;
    overflow: hidden;
    isolation: isolate;

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

    background: var(--card);

    opacity: 0;
    transform: translateY(35px) scale(.98);

    transition:
        opacity .7s ease,
        transform .7s cubic-bezier(.2,.8,.2,1),
        border-color .35s ease,
        box-shadow .35s ease;
}

.project-card.show {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.project-card:hover {
    transform: translateY(-10px) scale(1.01);
    border-color: rgba(231, 169, 59, .55);

    box-shadow:
        0 25px 60px rgba(0, 0, 0, .38),
        0 0 35px rgba(231, 169, 59, .08);
}

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

.project-image {
    width: 100%;
    height: 390px;

    display: block;

    object-fit: cover;

    transform: scale(1.001);

    transition:
        transform .8s cubic-bezier(.2,.8,.2,1),
        filter .5s ease;
}

.project-card:hover .project-image {
    transform: scale(1.09);

    filter:
        brightness(.72)
        saturate(1.08);
}

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

.project-card::after {
    content: "";

    position: absolute;
    z-index: 3;

    top: 0;
    left: -120%;

    width: 60%;
    height: 100%;

    background: linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.08),
        transparent
    );

    transform: skewX(-18deg);

    transition: left .8s ease;

    pointer-events: none;
}

.project-card:hover::after {
    left: 140%;
}

/* ================================
   OVERLAY
================================ */

.project-overlay {
    position: absolute;
    z-index: 2;

    inset: 0;

    display: flex;
    flex-direction: column;
    justify-content: flex-end;

    padding: 28px;

    background:
        linear-gradient(
            to top,
            rgba(0,0,0,.96) 0%,
            rgba(0,0,0,.72) 35%,
            rgba(0,0,0,.18) 75%,
            transparent 100%
        );
}

/* ================================
   LOCATION
================================ */

.project-location {
    margin: 0 0 8px !important;

    color: var(--gold2) !important;

    font-size: 12px !important;
    font-weight: 800;

    letter-spacing: 1.2px;
    text-transform: uppercase;
}

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

.project-overlay h3 {
    margin: 0 0 9px;

    color: #fff;

    font-size: 24px;
    line-height: 1.25;
    letter-spacing: -.3px;

    transform: translateY(5px);

    transition: transform .4s ease;
}

.project-card:hover .project-overlay h3 {
    transform: translateY(0);
}

/* ================================
   DESCRIPTION
================================ */

.project-overlay p:last-child {
    margin: 0;

    max-width: 500px;

    color: #d8dde5;

    font-size: 14px;
    line-height: 1.65;

    opacity: .9;

    transform: translateY(7px);

    transition:
        transform .4s ease,
        opacity .4s ease;
}

.project-card:hover .project-overlay p:last-child {
    transform: translateY(0);
    opacity: 1;
}

/* ================================
   LOADING
================================ */

.loading-projects {
    grid-column: 1 / -1;

    min-height: 250px;

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

    color: var(--muted);

    border: 1px dashed var(--border);
    border-radius: 20px;

    background: rgba(255,255,255,.02);
}

/* ================================
   EMPTY
================================ */

.empty-projects {
    grid-column: 1 / -1;

    padding: 80px 20px;

    text-align: center;

    color: var(--muted);

    border: 1px dashed var(--border);
    border-radius: 20px;

    background: rgba(255,255,255,.02);
}

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

@media (max-width: 1000px) {

    .projects-page {
        padding: 135px 0 90px;
    }

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

}

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

@media (max-width: 650px) {

    .projects-page {
        padding: 120px 0 70px;
    }

    .projects-header {
        margin-bottom: 42px;
    }

    .projects-header h1 {
        font-size: 40px;
        letter-spacing: -1px;
    }

    .projects-header p {
        font-size: 15px;
        line-height: 1.7;
    }

    .projects-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .project-card {
        min-height: 340px;
        border-radius: 18px;
    }

    .project-image {
        height: 340px;
    }

    .project-overlay {
        padding: 22px;
    }

    .project-overlay h3 {
        font-size: 21px;
    }

    .project-overlay p:last-child {
        font-size: 13px;
    }

}

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

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

    .project-card,
    .project-image,
    .project-overlay h3,
    .project-overlay p:last-child {
        transition: none;
    }

    .project-card {
        opacity: 1;
        transform: none;
    }

}