/*
 * Content Views Project Grid
 *
 * Add the class "cv-project-grid" to a parent/wrapper around the
 * Content Views shortcode.
 *
 * ACF fields:
 * - project_grid_size
 * - disable_project_link
 * - project_logo
 * - project_location
 *
 * Supported grid sizes:
 * - Standard
 * - Wide
 * - Half
 * - Full Width
 * - Tall
 * - Large
 */


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

.cv-project-grid .pt-cv-view > .pt-cv-page {
    display: grid !important;

    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    grid-auto-flow: dense !important;
    grid-auto-rows: 280px !important;

    gap: 0 !important;
}


/* Remove Content Views clearfix pseudo elements. */

.cv-project-grid .pt-cv-page::before,
.cv-project-grid .pt-cv-page::after {
    display: none !important;
    content: none !important;
}


/* ==========================================================
   PROJECT TILE
   ========================================================== */

.cv-project-grid .cv-project-grid-item {
    position: relative !important;

    width: auto !important;
    height: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: hidden !important;

    /*
     * Creates an isolated stacking context for:
     *
     * 1 - Background
     * 2 - Gradient
     * 3 - Logo
     * 4 - Location
     * 5 - Title
     */
    isolation: isolate;
}


/* Content Views adds this class to each item. */

.cv-project-grid .pt-cv-content-item.pt-cv-1-col {
    width: auto !important;

    margin: 0 !important;
    padding: 0 !important;
}


/* ==========================================================
   ACF GRID SIZES
   ========================================================== */


/* Standard - 1/3 width */

.cv-project-grid .cv-project-grid-standard {
    grid-column: span 2 !important;
    grid-row: span 1 !important;
}


/* Wide - 2/3 width */

.cv-project-grid .cv-project-grid-wide {
    grid-column: span 4 !important;
    grid-row: span 1 !important;
}


/* Half - 1/2 width */

.cv-project-grid .cv-project-grid-half {
    grid-column: span 3 !important;
    grid-row: span 1 !important;
}


/* Full Width */

.cv-project-grid .cv-project-grid-full {
    grid-column: 1 / -1 !important;
    grid-row: span 1 !important;
}


/* Tall - 1/3 width, double height */

.cv-project-grid .cv-project-grid-tall {
    grid-column: span 2 !important;
    grid-row: span 2 !important;
}


/* Large - 2/3 width, double height */

.cv-project-grid .cv-project-grid-large {
    grid-column: span 4 !important;
    grid-row: span 2 !important;
}


/* ==========================================================
   REMOVE CONTENT VIEWS / BOOTSTRAP SPACING
   ========================================================== */

.cv-project-grid .pt-cv-row,
.cv-project-grid .pt-cv-colwrap,
.cv-project-grid [class*="pt-cv-col-"] {
    margin: 0 !important;
    padding: 0 !important;
}


/* ==========================================================
   LAYER 1 - FEATURED IMAGE / BACKGROUND
   ========================================================== */

.cv-project-grid
.cv-project-grid-item
.pt-cv-thumb-wrapper {

    position: absolute !important;

    z-index: 1 !important;

    inset: 0 !important;

    width: 100% !important;
    height: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: hidden !important;
}


/*
 * Make the Content Views image link fill the entire tile.
 */

.cv-project-grid
.cv-project-grid-item
.pt-cv-href-thumbnail {

    display: block !important;

    width: 100% !important;
    height: 100% !important;

    margin: 0 !important;
    padding: 0 !important;
}


/*
 * Featured image.
 *
 * This also overrides Content Views' inline 250px
 * thumbnail height.
 */

.cv-project-grid
.cv-project-grid-item
img.pt-cv-thumbnail,

.cv-project-grid
.cv-project-grid-item
img.pt-cv-thumbnail:not(.pt-cv-thumbnailsm) {

    position: static !important;

    display: block !important;

    width: 100% !important;
    height: 100% !important;

    max-width: none !important;
    max-height: none !important;

    margin: 0 !important;
    padding: 0 !important;

    object-fit: cover !important;
    object-position: center !important;

    transition: transform .45s ease;
}


/* ==========================================================
   LAYER 2 - DARK GRADIENT
   ========================================================== */

.cv-project-grid
.cv-project-grid-item::after {

    content: "";

    position: absolute !important;

    z-index: 2 !important;

    inset: 0 !important;

    pointer-events: none !important;

    background:
        linear-gradient(
            to bottom,
            rgba(0, 0, 0, 0) 30%,
            rgba(0, 0, 0, 0.08) 50%,
            rgba(0, 0, 0, 0.80) 100%
        );
}


/* ==========================================================
   LAYER 3 - PROJECT LOGO
   ========================================================== */

.cv-project-grid
.cv-project-grid-item
.cv-project-logo {

    position: absolute !important;

    z-index: 3 !important;

    /*
     * Slightly above vertical centre because the project
     * information occupies the bottom of the tile.
     */
    top: 43% !important;
    left: 50% !important;

    width: 40% !important;
    max-width: 240px !important;

    height: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    transform: translate(-50%, -50%) !important;

    text-align: center !important;

    display: block !important;

    visibility: visible !important;
    opacity: 1 !important;

    pointer-events: none !important;
}


.cv-project-grid
.cv-project-grid-item
.cv-project-logo-image {

    position: static !important;

    display: block !important;

    width: auto !important;
    height: auto !important;

    max-width: 100% !important;
    max-height: 130px !important;

    margin: 0 auto !important;
    padding: 0 !important;

    object-fit: contain !important;

    visibility: visible !important;
    opacity: 1 !important;
}


/* Standard / Tall tiles have less horizontal room. */

.cv-project-grid
.cv-project-grid-standard
.cv-project-logo,

.cv-project-grid
.cv-project-grid-tall
.cv-project-logo {

    width: 50% !important;
    max-width: 170px !important;
}


/* Wide / Large tiles can support a larger logo. */

.cv-project-grid
.cv-project-grid-wide
.cv-project-logo,

.cv-project-grid
.cv-project-grid-large
.cv-project-logo {

    width: 40% !important;
    max-width: 260px !important;
}


/* Full-width tiles. */

.cv-project-grid
.cv-project-grid-full
.cv-project-logo {

    width: 30% !important;
    max-width: 300px !important;
}


/* ==========================================================
   LAYER 4 - PROJECT LOCATION
   ========================================================== */

.cv-project-grid
.cv-project-grid-item
.cv-project-location {

    position: absolute !important;

    z-index: 4 !important;

    left: 28px !important;
    right: 28px !important;

    bottom: 62px !important;

    display: block !important;

    margin: 0 !important;
    padding: 0 !important;

    color: #fff !important;

    font-size: 12px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    
    font-family: Inter !important;

    letter-spacing: 1.5px !important;

    text-transform: uppercase !important;

    visibility: visible !important;
    opacity: 1 !important;

    pointer-events: none !important;
}


/* ==========================================================
   LAYER 5 - PROJECT TITLE
   ========================================================== */

.cv-project-grid
.cv-project-grid-item
.pt-cv-title {

    position: absolute !important;

    z-index: 5 !important;

    left: 28px !important;
    right: 28px !important;

    bottom: 24px !important;

    margin: 0 !important;
    padding: 0 !important;

    color: #fff !important;

    line-height: 1.15 !important;
    font-family: Fraunces, sans-serif !important;
    text-align: left !important;
}


/*
 * Linked title.
 */

.cv-project-grid
.cv-project-grid-item
.pt-cv-title a {

    display: block !important;

    margin: 0 !important;
    padding: 0 !important;

    color: #fff !important;

    font-size: 24px !important;
    font-weight: 600 !important;
    line-height: 1.15 !important;

    text-decoration: none !important;
    font-family: Fraunces, sans-serif !important;
}


/*
 * When disable_project_link is enabled the <a>
 * element is removed, so the H4 itself needs the
 * same typography.
 */

.cv-project-grid
.cv-project-grid-link-disabled
.pt-cv-title {

    font-size: 24px !important;
    font-weight: 600 !important;
    line-height: 1.15 !important;
    
}


/* ==========================================================
   HOVER
   ========================================================== */

/*
 * Only zoom projects that are clickable.
 */

.cv-project-grid
.cv-project-grid-item:not(.cv-project-grid-link-disabled):hover
img.pt-cv-thumbnail {

    transform: scale(1.04);
}


/*
 * Disabled projects should not suggest that they
 * are clickable.
 */

.cv-project-grid
.cv-project-grid-link-disabled {

    cursor: default !important;
}


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

@media (max-width: 991px) {

    .cv-project-grid
    .pt-cv-view > .pt-cv-page {

        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;

        grid-auto-rows: 280px !important;

        gap: 0 !important;
    }


    /*
     * Standard / Half become one column.
     */

    .cv-project-grid
    .cv-project-grid-standard,

    .cv-project-grid
    .cv-project-grid-half {

        grid-column: span 1 !important;
        grid-row: span 1 !important;
    }


    /*
     * Tall remains double height.
     */

    .cv-project-grid
    .cv-project-grid-tall {

        grid-column: span 1 !important;
        grid-row: span 2 !important;
    }


    /*
     * Wide and Full become full width.
     */

    .cv-project-grid
    .cv-project-grid-wide,

    .cv-project-grid
    .cv-project-grid-full {

        grid-column: 1 / -1 !important;
        grid-row: span 1 !important;
    }


    /*
     * Large becomes full width and double height.
     */

    .cv-project-grid
    .cv-project-grid-large {

        grid-column: 1 / -1 !important;
        grid-row: span 2 !important;
    }


    /*
     * Slightly reduce logo size.
     */

    .cv-project-grid
    .cv-project-grid-item
    .cv-project-logo {

        width: 38% !important;
        max-width: 210px !important;
    }
}


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

@media (max-width: 767px) {

    .cv-project-grid
    .pt-cv-view > .pt-cv-page {

        grid-template-columns: 1fr !important;

        grid-auto-rows: 300px !important;

        gap: 0 !important;
    }


    /*
     * Ignore desktop ACF dimensions.
     * Every project becomes one full-width card.
     */

    .cv-project-grid
    .cv-project-grid-item,

    .cv-project-grid
    .cv-project-grid-standard,

    .cv-project-grid
    .cv-project-grid-wide,

    .cv-project-grid
    .cv-project-grid-half,

    .cv-project-grid
    .cv-project-grid-full,

    .cv-project-grid
    .cv-project-grid-tall,

    .cv-project-grid
    .cv-project-grid-large {

        grid-column: 1 / -1 !important;
        grid-row: span 1 !important;
    }


    /*
     * Logo.
     */

    .cv-project-grid
    .cv-project-grid-item
    .cv-project-logo {

        top: 42% !important;

        width: 45% !important;
        max-width: 180px !important;
    }


    .cv-project-grid
    .cv-project-grid-item
    .cv-project-logo-image {

        max-height: 100px !important;
    }


    /*
     * Location.
     */

    .cv-project-grid
    .cv-project-grid-item
    .cv-project-location {

        left: 20px !important;
        right: 20px !important;

        bottom: 54px !important;

        font-size: 11px !important;
        letter-spacing: 1.2px !important;
    }


    /*
     * Title.
     */

    .cv-project-grid
    .cv-project-grid-item
    .pt-cv-title {

        left: 20px !important;
        right: 20px !important;

        bottom: 20px !important;
    }


    .cv-project-grid
    .cv-project-grid-item
    .pt-cv-title a,

    .cv-project-grid
    .cv-project-grid-link-disabled
    .pt-cv-title {

        font-size: 20px !important;
        
    }
}

/* ==========================================================
   SINGLE PROJECT - HERO
   ========================================================== */

.cv-single-project-hero {
    position: relative;
    display: flex;
    align-items: flex-end;

    min-height: 560px;

    padding: 30px;

    background-color: #d8d8d8;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.cv-single-project-hero-inner {
    position: relative;
    z-index: 2;

    width: fit-content;
    max-width: 650px;

    padding: 25px 30px;

    background: rgba(30, 30, 30, 0.78);

    color: #fff;
}

.cv-single-project-hero-location {
    margin-bottom: 8px;

    color: #fff;

    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.cv-single-project-hero-title {
    margin: 0 0 18px !important;

    color: #fff !important;

    font-size: clamp(32px, 4vw, 56px);
    font-weight: 700;
    line-height: 1.1;
    font-family: Fraunces, sans-serif !important;
}

.cv-single-project-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.cv-project-button {
    display: inline-block;

    padding: 12px 22px;

    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-decoration: none !important;
    text-transform: uppercase;

    transition: background 0.2s ease;
}

.cv-project-button-primary {
    background: #fff;
    color: #222 !important;
}

.cv-project-button-primary:hover {
    background: #e7e7e7;
}

.cv-project-button-secondary {
    background: #222;
    color: #fff !important;
}

.cv-project-button-secondary:hover {
    background: #444;
}


/* ==========================================================
   SINGLE PROJECT - DETAILS
   ========================================================== */

.cv-single-project-details {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));

    margin: 0;
   

    
}

.cv-single-project-detail {
    min-width: 0;
    min-height: 110px;
    background: #fff;
     padding: 20px;
    border: 1px solid #e5e5e5;
}



.cv-single-project-detail-label {
    margin-bottom: 8px;

    color: #666;

    font-size: 10px;
    font-weight: 600;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    
    
}

.cv-single-project-detail-value {
    color: #222;

    font-size: 17px;
    font-weight: 600;
    line-height: 1.35;
     font-family: Fraunces, sans-serif !important;
}


/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media (max-width: 991px) {

    .cv-single-project-hero {
        min-height: 440px;
    }

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

    .cv-single-project-detail:nth-child(2) {
        border-right: 0;
    }
}

@media (max-width: 767px) {

    .cv-single-project-hero {
        min-height: 380px;
        padding: 15px;
    }

    .cv-single-project-hero-inner {
        width: 100%;
        padding: 20px;
    }

    .cv-single-project-hero-title {
        font-size: 32px;
    }

    .cv-single-project-details {
        grid-template-columns: 1fr;
        padding: 12px;
    }

    .cv-single-project-detail {
        min-height: auto;
        border-right: 0;
        border-bottom: 1px solid #e5e5e5;
    }

    .cv-single-project-detail:last-child {
        border-bottom: 0;
    }
}