/* =========================================================
   PROJECT #1
   PRIME PROJECT PAGE
   ========================================================= */


/* =========================================================
   BASE
   ========================================================= */

.page-project-one .shell {
    position: relative;
}


/* =========================================================
   HEADER
   ========================================================= */

.page-project-one .project-one-header {
    margin-bottom: 0;
}

.page-project-one .project-one-header-card {
    position: relative;
    overflow: hidden;
}


/* =========================================================
   DESCRIPTION / IMAGE / ACTION
   Shared card positioning
   ========================================================= */

.page-project-one .project-one-description,
.page-project-one .project-one-preview,
.page-project-one .project-one-action {
    position: relative;
    overflow: hidden;
}


/* =========================================================
   PRIME LEFT ACCENT
   Elegant vertical golden edge
   ========================================================= */

.page-project-one .project-one-header-card::before,
.page-project-one .project-one-description::before,
.page-project-one .project-one-preview::before,
.page-project-one .project-one-action::before {

    content: "";

    position: absolute;

    left: 0;
    top: 18px;
    bottom: 18px;

    width: 2px;

    background:
        linear-gradient(
            180deg,
            transparent 0%,
            rgba(243,211,124,0.18) 12%,
            rgba(243,211,124,0.58) 50%,
            rgba(243,211,124,0.18) 88%,
            transparent 100%
        );

    box-shadow:
        0 0 7px rgba(243,211,124,0.10);

    pointer-events: none;

    z-index: 5;
}


/* =========================================================
   SUBTLE INNER GOLDEN GLOW
   ========================================================= */

.page-project-one .project-one-header-card::after,
.page-project-one .project-one-description::after,
.page-project-one .project-one-preview::after,
.page-project-one .project-one-action::after {

    content: "";

    position: absolute;

    left: 0;
    top: 0;
    bottom: 0;

    width: 42px;

    background:
        linear-gradient(
            90deg,
            rgba(243,211,124,0.025),
            transparent
        );

    pointer-events: none;

    z-index: 1;
}


/* =========================================================
   KEEP CONTENT ABOVE DECORATIVE LAYERS
   ========================================================= */

.page-project-one .project-one-header-card .card-body,
.page-project-one .project-one-description .card-body,
.page-project-one .project-one-preview .card-body,
.page-project-one .project-one-action .card-body {

    position: relative;
    z-index: 2;
}


/* =========================================================
   HEADER
   ========================================================= */

.page-project-one .project-one-header-card {
    background:
        linear-gradient(
            180deg,
            rgba(18,18,18,0.96),
            rgba(10,10,10,0.98)
        );

    border: 1px solid rgba(243,211,124,0.08);
}


.page-project-one .project-one-header-card .badge {
    position: relative;
    z-index: 3;
}


.page-project-one .project-one-subtitle {

    color: rgba(243,211,124,0.78);

    font-size: .9rem;
    font-weight: 600;

    letter-spacing: .08em;

    text-shadow:
        0 0 7px rgba(243,211,124,0.12);
}


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

.page-project-one .project-one-description {
    background:
        linear-gradient(
            180deg,
            rgba(18,18,18,0.96),
            rgba(8,8,8,0.98)
        );

    border: 1px solid rgba(243,211,124,0.07);
}


.page-project-one .project-one-content {

    max-width: 860px;

    margin: 0 auto;
}


.page-project-one .project-one-description .copy {

    margin-bottom: 0;

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

    font-size: 1.05rem;

    line-height: 1.75;

    letter-spacing: .01em;
}


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

.page-project-one .project-one-preview {
    background:
        linear-gradient(
            180deg,
            rgba(18,18,18,0.96),
            rgba(8,8,8,0.99)
        );

    border: 1px solid rgba(243,211,124,0.07);
}


/*
   Image accent is deliberately softer.
   The image already carries visual weight.
*/

.page-project-one .project-one-preview::before {

    background:
        linear-gradient(
            180deg,
            transparent 0%,
            rgba(243,211,124,0.10) 15%,
            rgba(243,211,124,0.32) 50%,
            rgba(243,211,124,0.10) 85%,
            transparent 100%
        );

    box-shadow:
        0 0 6px rgba(243,211,124,0.07);
}


.page-project-one .project-one-image-wrap {

    position: relative;

    z-index: 2;

    overflow: hidden;



    background:
        linear-gradient(
            180deg,
            rgba(18,18,18,0.96),
            rgba(8,8,8,0.99)
        );

    border: 0px solid rgba(243,211,124,0.12);

    box-shadow:
        0 18px 42px rgba(0,0,0,0.38),
        inset 0 1px 0 rgba(255,255,255,0.025);
}


.page-project-one .project-one-image {

    display: block;

    max-width: auto;
    height: auto;

    margin:0 auto;

    transition:
        transform .3s ease,
        filter .3s ease;
}


.page-project-one .project-one-image-wrap:hover
.project-one-image {

}


/* =========================================================
   ACTION
   ========================================================= */

.page-project-one .project-one-action {
    background:
        linear-gradient(
            180deg,
            rgba(18,18,18,0.96),
            rgba(8,8,8,0.98)
        );

    border: 1px solid rgba(243,211,124,0.08);
}


.page-project-one .project-one-link {
    min-width: 240px;
}


/* =========================================================
   SEPARATOR
   ========================================================= */

.page-project-one .project-one-separator {

    height: 1px;

    margin: 28px 0 0;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(243,211,124,0.38),
            transparent
        );
}


/* =========================================================
   RESPONSIVE — TABLET
   ========================================================= */

@media (max-width: 991px) {

    .page-project-one .project-one-description .copy {

        line-height: 1.7;
    }

}


/* =========================================================
   RESPONSIVE — MOBILE
   ========================================================= */

@media (max-width: 767px) {

    /* left accents */

    .page-project-one .project-one-header-card::before,
    .page-project-one .project-one-description::before,
    .page-project-one .project-one-preview::before,
    .page-project-one .project-one-action::before {

        top: 16px;
        bottom: 16px;

        width: 2px;
    }


    /* inner glow */

    .page-project-one .project-one-header-card::after,
    .page-project-one .project-one-description::after,
    .page-project-one .project-one-preview::after,
    .page-project-one .project-one-action::after {

        width: 32px;
    }


    /* description */

    .page-project-one .project-one-description .copy {

        font-size: 1rem;

        line-height: 1.7;
    }


    /* image */

    .page-project-one .project-one-image-wrap {

        border-radius: 18px;
    }


    /* button */

    .page-project-one .project-one-link {

        width: 100%;
    }

}

.page-project-one .project-one-description,
.page-project-one .project-one-preview,
.page-project-one .project-one-action,
.page-project-one .project-one-header-card {

    position: relative;
    overflow: hidden;
}


/* =========================================================
   PRIME LEFT ACCENT
   Extracted from private-nicknames.css
   ========================================================= */

.page-project-one .project-one-description::before,
.page-project-one .project-one-preview::before,
.page-project-one .project-one-action::before,
.page-project-one .project-one-header-card::before {

    content: "";

    position: absolute;

    left: 0;
    top: 10px;
    bottom: 10px;

    width: 4px;

    border-radius: 2px;

    background: linear-gradient(
        180deg,
        rgba(243,211,124,1) 0%,
        rgba(243,211,124,.62) 45%,
        rgba(243,211,124,.18) 100%
    );

    box-shadow:
        0 0 12px rgba(243,211,124,.34),
        0 0 24px rgba(243,211,124,.12);

    opacity: .95;

    transition:
        opacity .25s ease,
        box-shadow .25s ease;

    pointer-events: none;

    z-index: 5;
}


/* =========================================================
   PRIME CONTENT BREATHING ROOM
   ========================================================= */

.page-project-one .project-one-description .card-body,
.page-project-one .project-one-preview .card-body,
.page-project-one .project-one-action .card-body,
.page-project-one .project-one-header-card .card-body {

    padding-left: 1.45rem;
}


/* =========================================================
   HOVER — SAME PRIME BEHAVIOUR
   ========================================================= */

.page-project-one .project-one-description:hover::before,
.page-project-one .project-one-preview:hover::before,
.page-project-one .project-one-action:hover::before,
.page-project-one .project-one-header-card:hover::before {

    opacity: 1;

    box-shadow:
        0 0 16px rgba(243,211,124,.45),
        0 0 28px rgba(243,211,124,.18);
}


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

@media (max-width: 767px) {

    .page-project-one .project-one-description .card-body,
    .page-project-one .project-one-preview .card-body,
    .page-project-one .project-one-action .card-body,
    .page-project-one .project-one-header-card .card-body {

        padding-left: 1.25rem;
    }

}