/* ---------------------------------------------------------
   CONTAINER
--------------------------------------------------------- */

.precon-list-page .precon-container
{
    width: 100%;
    max-width: 1320px;

    margin-left: auto;
    margin-right: auto;

    padding-left: 24px;
    padding-right: 24px;

    box-sizing: border-box;
}

/* =========================================================
   PRECONSTRUCTION PROJECT LIST
========================================================= */

.precon-list-page
{
    width: 100%;

    overflow-x: hidden;

    background: #f6f5f2;
}

.precon-list-page .precon-section-label
{
    margin-bottom: 8px;

    color: #d5ad71;

    font-size: 12px;
    font-weight: 700;

    letter-spacing: 0.12em;

    text-transform: uppercase;
}

/* ---------------------------------------------------------
   HERO
--------------------------------------------------------- */

.precon-list-hero
{
    position: relative;

    overflow: hidden;

    padding: 78px 0 72px;

    background:
        linear-gradient(
            90deg,
            rgba(34, 32, 28, 0.98) 0%,
            rgba(34, 32, 28, 0.92) 48%,
            rgba(34, 32, 28, 0.68) 72%,
            rgba(34, 32, 28, 0.40) 100%
        ),
        url('/assets/images/preconstruction-banner.jpg');

    background-size: cover;
    background-position: center right;

    color: #ffffff;
}


.precon-list-hero .precon-container
{
    position: relative;

    z-index: 2;
}


.precon-list-hero .precon-section-label
{
    color: #d5ad71;
}


.precon-list-hero h1
{
    max-width: 720px;

    margin-top: 8px;
    margin-bottom: 16px;

    color: #ffffff;

    font-size: 46px;
    line-height: 1.12;
}


.precon-list-hero p
{
    max-width: 690px;

    margin: 0;

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

    font-size: 16px;
    line-height: 1.7;
}

/* ---------------------------------------------------------
   LIST SECTION
--------------------------------------------------------- */

.precon-list-section
{
    padding: 60px 0 85px;
}


/* ---------------------------------------------------------
   GRID
--------------------------------------------------------- */

.precon-project-grid
{
    display: grid;

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

    gap: 28px;
}


/* ---------------------------------------------------------
   PROJECT CARD
--------------------------------------------------------- */

.precon-project-card
{
    display: flex;
    flex-direction: column;

    overflow: hidden;

    background: #ffffff;

    border:
        1px solid
        #e3e0da;

    border-radius: 12px;

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}


.precon-project-card:hover
{
    transform:
        translateY(
            -3px
        );

    box-shadow:
        0 12px 30px
        rgba(
            0,
            0,
            0,
            0.08
        );
}


/* ---------------------------------------------------------
   PROJECT IMAGE
--------------------------------------------------------- */

.precon-project-card-image
{
    display: block;

    width: 100%;
    height: 235px;

    overflow: hidden;

    background: #dedbd5;
}


.precon-project-card-image img
{
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform
        0.35s ease;
}


.precon-project-card:hover
.precon-project-card-image img
{
    transform:
        scale(
            1.035
        );
}


/* ---------------------------------------------------------
   NO IMAGE
--------------------------------------------------------- */

.precon-project-card-no-image
{
    display: flex;

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

    padding: 30px;

    background: #302e2a;

    color: #ffffff;

    font-size: 22px;
    font-weight: 600;

    text-align: center;

    text-decoration: none;
}


/* ---------------------------------------------------------
   CARD CONTENT
--------------------------------------------------------- */

.precon-project-card-content
{
    display: flex;
    flex: 1;

    flex-direction: column;

    padding: 24px;
}


/* ---------------------------------------------------------
   STATUS
--------------------------------------------------------- */

.precon-project-status
{
    margin-bottom: 10px;

    color: #a57b43;

    font-size: 11px;
    font-weight: 700;

    letter-spacing: 0.10em;

    text-transform: uppercase;
}


/* ---------------------------------------------------------
   PROJECT NAME
--------------------------------------------------------- */

.precon-project-card h2
{
    margin:
        0
        0
        9px;

    font-size: 23px;
    line-height: 1.3;
}


.precon-project-card h2 a
{
    color: #292722;

    text-decoration: none;
}


.precon-project-card h2 a:hover
{
    color: #9a7040;
}


/* ---------------------------------------------------------
   LOCATION
--------------------------------------------------------- */

.precon-project-location
{
    margin-bottom: 15px;

    color: #77716a;

    font-size: 13px;
    line-height: 1.5;
}


/* ---------------------------------------------------------
   SUMMARY
--------------------------------------------------------- */

.precon-project-summary
{
    flex: 1;

    color: #5e5a54;

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


/* ---------------------------------------------------------
   ACTION
--------------------------------------------------------- */

.precon-project-card-action
{
    margin-top: 22px;
}


.precon-project-link
{
    display: inline-flex;

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

    min-height: 43px;

    padding:
        0
        19px;

    background: #2a2824;

    color: #ffffff;

    border-radius: 5px;

    font-size: 13px;
    font-weight: 600;

    text-decoration: none;

    transition:
        opacity
        0.2s ease;
}


.precon-project-link:hover
{
    color: #ffffff;

    opacity: 0.88;
}


/* ---------------------------------------------------------
   EMPTY
--------------------------------------------------------- */

.precon-empty
{
    padding:
        70px
        20px;

    background: #ffffff;

    border-radius: 10px;

    color: #77716a;

    text-align: center;
}


/* ---------------------------------------------------------
   TABLET
--------------------------------------------------------- */

@media
(
    max-width: 1000px
)
{

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

}


/* ---------------------------------------------------------
   MOBILE
--------------------------------------------------------- */

@media
(
    max-width: 650px
)
{

    .precon-list-hero
    {
        padding:
            55px
            0
            42px;
    }


    .precon-list-hero h1
    {
        font-size: 34px;
    }


    .precon-list-section
    {
        padding:
            40px
            0
            60px;
    }


    .precon-project-grid
    {
        grid-template-columns:
            1fr;

        gap: 22px;
    }


    .precon-project-card-image
    {
        height: 220px;
    }


    .precon-project-card-content
    {
        padding: 21px;
    }

}

/* ---------------------------------------------------------
   SITE BANNER
--------------------------------------------------------- */

.precon-list-site-banner
{
    width: 100%;
}


.precon-list-banner-subtitle
{
    max-width: 820px;

    margin: 10px auto 0;

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

    font-size: 15px;
    line-height: 1.7;

    text-align: center;
}