/* ==================================================
   PROJECT PAGE
================================================== */

.project-page {

    min-height:
            100vh;

    padding:
            180px 0 100px;

    background:
            var(--color-background);

}


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

.project-page__back {

    display:
            inline-flex;

    align-items:
            center;

    gap:
            0.75rem;

    margin-bottom:
            6rem;

    color:
            var(--color-text-muted);

    font-size:
            0.75rem;

    text-transform:
            uppercase;

    letter-spacing:
            0.1em;

    transition:
            color 0.3s ease,
            transform 0.3s ease;

}


.project-page__back:hover {

    color:
            var(--color-accent-light);

    transform:
            translateX(-5px);

}


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

.project-page__hero {

    max-width:
            1100px;

}


.project-page__meta {

    display:
            flex;

    align-items:
            center;

    gap:
            2rem;

    margin-bottom:
            2rem;

}


.project-page__meta span {

    color:
            var(--color-accent-light);

    font-size:
            0.75rem;

    text-transform:
            uppercase;

    letter-spacing:
            0.12em;

}


.project-page__meta span + span {

    color:
            var(--color-text-muted);

}


.project-page__title {

    max-width:
            1100px;

    margin-bottom:
            2rem;

    color:
            var(--color-text);

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

    line-height:
            0.85;

    letter-spacing:
            -0.06em;

}


.project-page__intro {

    max-width:
            700px;

    color:
            var(--color-text-muted);

    font-size:
            1.15rem;

    line-height:
            1.7;

}


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

.project-page__image {

    position:
            relative;

    width:
            100%;

    height:
            600px;

    margin:
            7rem 0;

    overflow:
            hidden;

    border-radius:
            var(--border-radius);

    background:
            var(--color-surface);

}


.project-page__image img {

    width:
            100%;

    height:
            100%;

    object-fit:
            cover;

    display:
            block;

}


.project-page__placeholder {

    width:
            100%;

    height:
            100%;

    display:
            flex;

    align-items:
            center;

    justify-content:
            center;

    background:
            radial-gradient(
                    circle at center,
                    rgba(43, 99, 185,
                            0.2
                    ),
                    var(--color-surface)
            );

}


.project-page__placeholder span {

    color:
            var(--color-accent-light);

    font-family:
            "Space Grotesk",
            sans-serif;

    font-size:
            clamp(
                    8rem,
                    20vw,
                    18rem
            );

    font-weight:
            700;

    opacity:
            0.3;

}


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

.project-page__grid {

    display:
            grid;

    grid-template-columns:
        2fr 1fr;

    gap:
            8rem;

    padding-top:
            4rem;

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

}


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

.project-page__main {

    max-width:
            750px;

}


.project-page__label {

    margin-bottom:
            1.5rem;

    color:
            var(--color-accent-light);

    font-size:
            0.7rem;

    font-weight:
            600;

    text-transform:
            uppercase;

    letter-spacing:
            0.15em;

}


.project-page__main h2 {

    margin-bottom:
            3rem;

    color:
            var(--color-text);

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

    line-height:
            0.9;

    letter-spacing:
            -0.05em;

}


.project-page__main h2 span {

    display:
            block;

    color:
            var(--color-accent-light);

}


.project-page__text {

    color:
            var(--color-text-muted);

    font-size:
            1rem;

    line-height:
            1.9;

}


/* ==================================================
   SIDEBAR
================================================== */

.project-page__sidebar {

    display:
            flex;

    flex-direction:
            column;

    gap:
            3rem;

}


.project-info {

    padding-bottom:
            2rem;

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

}


.project-info__label {

    margin-bottom:
            1rem;

    color:
            var(--color-text-muted);

    font-size:
            0.65rem;

    text-transform:
            uppercase;

    letter-spacing:
            0.15em;

}


.project-info__value {

    color:
            var(--color-text);

    font-size:
            1rem;

}


/* ==================================================
   TECHNOLOGY TAGS
================================================== */

.project-info__tags {

    display:
            flex;

    flex-wrap:
            wrap;

    gap:
            0.5rem;

}


.project-info__tags span {

    padding:
            0.5rem
            0.75rem;

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

    border-radius:
            999px;

    color:
            var(--color-text-muted);

    font-size:
            0.7rem;

    transition:
            border-color 0.3s ease,
            color 0.3s ease;

}


.project-info__tags span:hover {

    border-color:
            var(--color-accent);

    color:
            var(--color-accent-light);

}


/* ==================================================
   PROJECT LINKS
================================================== */

.project-info__links {

    display:
            flex;

    flex-direction:
            column;

    gap:
            0.75rem;

}


.project-info__links a {

    color:
            var(--color-text);

    font-size:
            0.8rem;

    text-transform:
            uppercase;

    letter-spacing:
            0.1em;

    transition:
            color 0.3s ease;

}


.project-info__links a:hover {

    color:
            var(--color-accent-light);

}


/* ==================================================
   BOTTOM
================================================== */

.project-page__bottom {

    display:
            flex;

    justify-content:
            center;

    padding-top:
            8rem;

}


/* ==================================================
   ERROR PAGE
================================================== */

.project-page--error {

    min-height:
            100vh;

    display:
            flex;

    align-items:
            center;

}


.project-page__error-title {

    max-width:
            1000px;

    margin-bottom:
            2rem;

    color:
            var(--color-text);

    font-size:
            clamp(
                    4rem,
                    10vw,
                    9rem
            );

    line-height:
            0.85;

    letter-spacing:
            -0.06em;

}


.project-page__error-title span {

    display:
            block;

    color:
            var(--color-accent-light);

}


.project-page__description {

    max-width:
            500px;

    margin-bottom:
            2rem;

    color:
            var(--color-text-muted);

    line-height:
            1.7;

}


/* ==================================================
   DOWNLOAD (apps)
================================================== */

.project-download {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 2rem;
    padding: 1rem 1.75rem;
    border-radius: 999px;
    background: var(--color-accent);
    color: var(--color-text);
    font-weight: 600;
    letter-spacing: 0.02em;
    text-decoration: none;
    transition: background 0.3s ease, transform 0.3s ease;
}

.project-download:hover {
    background: var(--color-accent-dark);
    transform: translateY(-2px);
}

.project-download--small {
    margin-top: 0.75rem;
    width: 100%;
    padding: 0.85rem 1.25rem;
    font-size: 0.85rem;
}

.project-download__meta {
    margin-top: 0.75rem;
    color: var(--color-text-muted);
    font-size: 0.8rem;
}

.project-download__steps {
    margin: 1rem 0 0;
    padding-left: 1.2rem;
    color: var(--color-text-muted);
    font-size: 0.85rem;
    line-height: 1.6;
}

.project-download__steps strong {
    color: var(--color-text);
}