/* ==========================================================
   CHANT M STAGE 9
   HQ VISUAL IMAGE SYSTEM
   ========================================================== */

/* HOME HERO - NEW HIGHER QUALITY SOURCE */

.cm6-hero-art {
    min-height:570px;
    border-radius:38px;
    background-image:
        linear-gradient(
            180deg,
            rgba(20,12,18,.01),
            rgba(20,12,18,.10)
        ),
        url("../images/hq/hero-home.webp") !important;
    background-position:center !important;
    background-size:cover !important;
    background-repeat:no-repeat !important;
}

/* EVENT CTA */

.cm6-event-card {
    background-image:
        linear-gradient(
            90deg,
            rgba(23,19,23,.97) 0%,
            rgba(23,19,23,.90) 48%,
            rgba(23,19,23,.35) 100%
        ),
        url("../images/hq/banner-events.webp") !important;
    background-size:cover !important;
    background-position:center !important;
}

/* ABOUT PREVIEW */

.cm6-about-art {
    background-image:
        url("../images/hq/banner-about.webp") !important;
    background-position:center !important;
    background-size:cover !important;
}

/* ABOUT MAIN */

.cm6-story-visual {
    background-image:
        url("../images/hq/visual-brand-room.webp") !important;
    background-position:center !important;
    background-size:cover !important;
}

/* CONTACT HERO */

.cm6-contact-hero .cm6-inner-symbol > div {
    background-image:
        url("../images/hq/banner-contact.webp") !important;
    background-position:center !important;
    background-size:cover !important;
}

/* CONTACT MAP */

.cm6-contact-map {
    background-image:
        linear-gradient(
            90deg,
            rgba(244,226,237,.28),
            rgba(244,226,237,.15)
        ),
        url("../images/hq/visual-lebanon.webp") !important;
    background-position:center !important;
    background-size:cover !important;
}

.cm6-contact-map-lines {
    opacity:.5;
}

/* HOME VISUAL GALLERY */

.cm9-visual-gallery {
    background:#fffaf7;
}

.cm9-gallery-heading {
    display:grid;
    grid-template-columns:1fr 1fr;
    align-items:end;
    gap:60px;
    margin-bottom:40px;
}

.cm9-gallery-heading p {
    max-width:530px;
    color:#746b72;
}

.cm9-gallery-grid {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    grid-template-rows:280px 260px;
    gap:15px;
}

.cm9-gallery-card {
    position:relative;
    overflow:hidden;
    border-radius:24px;
    background-position:center;
    background-size:cover;
    box-shadow:0 18px 50px rgba(62,35,54,.08);
    transition:.35s ease;
}

.cm9-gallery-card:hover {
    transform:translateY(-5px);
}

.cm9-gallery-card:after {
    content:"";
    position:absolute;
    inset:0;
    background:
        linear-gradient(
            180deg,
            transparent 45%,
            rgba(25,16,22,.55)
        );
}

.cm9-gallery-card span {
    position:absolute;
    z-index:2;
    left:22px;
    bottom:18px;
    color:white;
    font-family:"Cormorant Garamond",serif;
    font-size:24px;
}

.cm9-gallery-large {
    grid-column:span 2;
    grid-row:span 2;
}

.cm9-gallery-wide {
    grid-column:span 2;
}

/* ABOUT GALLERY */

.cm9-about-gallery {
    padding-top:15px;
}

.cm9-about-gallery-grid {
    display:grid;
    grid-template-columns:1.4fr .8fr .8fr;
    gap:16px;
}

.cm9-about-photo {
    min-height:430px;
    border-radius:28px;
    background-position:center;
    background-size:cover;
    box-shadow:0 20px 55px rgba(56,33,49,.08);
}

.cm9-about-photo-main {
    min-height:500px;
}

/* CONTACT VISUAL STRIP */

.cm9-contact-visual {
    padding:20px 0 80px;
    background:#fffaf7;
}

.cm9-contact-visual-grid {
    display:grid;
    grid-template-columns:1.15fr .85fr 1fr;
    gap:16px;
}

.cm9-contact-photo {
    min-height:320px;
    border-radius:26px;
    background-size:cover;
    background-position:center;
    box-shadow:0 18px 50px rgba(56,33,49,.07);
}

/* OCCASION CARDS - DO NOT OVER-STRETCH SMALL PHOTOS */

.cm6-occasion-card,
.cm8-big-occasion-image {
    background-repeat:no-repeat !important;
    background-size:cover !important;
}

.cm8-single-image {
    position:relative;
    background-size:contain !important;
    background-repeat:no-repeat !important;
    background-color:#f5e7ee !important;
    background-position:center !important;
}

.cm8-single-image:before {
    content:"";
    position:absolute;
    inset:22px;
    z-index:-1;
    border-radius:26px;
    background:
        linear-gradient(
            145deg,
            #f1d8e8,
            #f7eadf
        );
}

/* COLLECTIONS */

.cm6-collection-visual,
.cm8-shop-category-image {
    background-repeat:no-repeat !important;
    background-position:center !important;
    background-size:cover !important;
}

/* SHOP HERO */

.cm8-shop-hero-image {
    background-size:cover !important;
    background-position:center !important;
}

/* LESS ARTIFICIAL ZOOMING */

.cm6-occasion-card:hover,
.cm8-shop-category:hover,
.cm6-collection-card:hover {
    background-size:cover !important;
}

.cm6-collection-card:hover
.cm6-collection-visual,
.cm8-shop-category:hover
.cm8-shop-category-image {
    transform:none !important;
}

/* MOBILE */

@media(max-width:900px) {

    .cm9-gallery-grid {
        grid-template-columns:1fr 1fr;
        grid-template-rows:260px 260px 240px;
    }

    .cm9-gallery-large,
    .cm9-gallery-wide {
        grid-column:span 2;
        grid-row:auto;
    }

    .cm9-about-gallery-grid {
        grid-template-columns:1fr 1fr;
    }

    .cm9-about-photo-main {
        grid-column:span 2;
    }

    .cm9-contact-visual-grid {
        grid-template-columns:1fr 1fr;
    }

    .cm9-contact-photo:first-child {
        grid-column:span 2;
    }
}

@media(max-width:760px) {

    .cm6-hero-art {
        min-height:390px;
        border-radius:26px;
    }

    .cm9-gallery-heading {
        grid-template-columns:1fr;
        gap:10px;
    }

    .cm9-gallery-grid {
        display:grid;
        grid-template-columns:1fr;
        grid-template-rows:none;
    }

    .cm9-gallery-card,
    .cm9-gallery-large,
    .cm9-gallery-wide {
        grid-column:auto;
        min-height:260px;
    }

    .cm9-about-gallery-grid,
    .cm9-contact-visual-grid {
        grid-template-columns:1fr;
    }

    .cm9-about-photo,
    .cm9-about-photo-main,
    .cm9-contact-photo,
    .cm9-contact-photo:first-child {
        grid-column:auto;
        min-height:280px;
    }

    .cm8-single-image {
        min-height:330px;
    }
}