/*
    artwork.css
    ELGIN Core v1.0.0
    Shared artwork renderer
*/

/* ==========================================================
   HIDE SQUARESPACE PAGE TITLE
   ========================================================== */

.blog-item-title,
.item-title,
.entry-title,
.sqs-title,
h1[data-animation-role="header-element"]{

    display:none !important;

}


/* ==========================================================
   PAGE WIDTH
   ========================================================== */

@media screen and (min-width:768px){

    .tweak-blog-item-width-narrow
    .blog-item-wrapper
    .blog-item-inner-wrapper{

        width:100% !important;
        max-width:800px !important;
        margin:0 auto !important;

    }

}


/* ==========================================================
   ARTWORK LAYOUT
   ========================================================== */

.artwork-header{
    display:grid;
    grid-template-columns:minmax(320px,600px) 340px;
    gap:56px;
    justify-content:center;
    align-items:start;
    max-width:1100px;
    margin:0 auto 20px;
}

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

.artwork-image{

    display:flex;

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

}

.artwork-image img{

    display:block;

    width:100%;
    max-height:600px;

    object-fit:contain;

    cursor:zoom-in;

    transition:opacity .18s ease;

}

.artwork-image img:hover{

    opacity:.97;

}


/* ==========================================================
   METADATA
   ========================================================== */

.artwork-info{

    line-height:1.4;

}

.artwork-info h1{

    margin:0 0 42px;

    font-size:2.4rem;

    font-weight:500;

    letter-spacing:.03em;

    text-transform:uppercase;

}

.meta{

    display:flex;

    flex-direction:column;

    gap:0;

}

.meta-row{
    display:grid;
    grid-template-columns:116px 1fr;
    align-items:center;
    padding:14px 0;
    border-bottom:1px solid #ece7e2;
}

.meta-row:last-child{

    border-bottom:none;

}

.meta-label{

    font-size:.78rem;

    letter-spacing:.18em;

    text-transform:uppercase;

    color:#888;

    font-weight:600;

}

.meta-value{

    font-size:.95rem;

    color:#222;

}

.status{

    display:inline-block;

    padding:4px 10px;

    border-radius:999px;

    font-size:.82rem;

    font-weight:600;

}

.status.in-progress{

    background:#efe9dc;

    color:#7a5d2c;

}

.status.available{

    background:#e6f4ea;

    color:#2b6b45;

}

.status.sold{

    background:#f6e2e2;

    color:#8b2b2b;

}


/* ==========================================================
   LIGHTBOX
   ========================================================== */

.artwork-lightbox{

    position:fixed;

    inset:0;

    display:flex;

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

    background:rgba(0,0,0,.97);

    opacity:0;
    visibility:hidden;

    transition:opacity .18s ease;

    z-index:2147483647;

}

.artwork-lightbox.open{

    opacity:1;
    visibility:visible;

}

.artwork-lightbox img{

    display:block;

    max-width:95vw;
    max-height:95vh;

    object-fit:contain;

}

.artwork-close{

    position:absolute;

    top:24px;
    right:30px;

    font-size:42px;

    color:white;

    cursor:pointer;

    user-select:none;

}

body.artwork-lightbox-open{

    overflow:hidden;

}


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

@media (max-width:900px){

    .artwork-header{

        grid-template-columns:1fr;

        gap:40px;

    }

}