/* =========================================================
   MOORKETING — RESULTS PAGE
   Page ID: 92
   UPDATED RESULTS / CASE STUDY DESIGN
   ========================================================= */


/* ---------------------------------------------------------
   1. PAGE BASE
   --------------------------------------------------------- */

.page-id-92 {
    background: var(--milk, #fffdf7);
    color: var(--ink, #0a0718);
}

.page-id-92 .page-shell {
    background: var(--milk, #fffdf7);
    padding-top: 0;
    padding-bottom: 120px;
}

.page-id-92 .page-shell > .wrap {
    max-width: var(--max, 1500px);
}


/* ---------------------------------------------------------
   2. HERO
   --------------------------------------------------------- */

.page-id-92 .page-hero {
    background: var(--milk, #fffdf7);

    border-bottom:
        1px solid
        var(--line, rgba(10,7,24,.14));

    padding-top: clamp(70px, 10vw, 150px);
    padding-bottom: clamp(55px, 8vw, 110px);

    overflow: hidden;
}


/* Eyebrow */

.page-id-92 .page-hero .eyebrow {
    font-size: 0;
}

.page-id-92 .page-hero .eyebrow::after {
    content: "MOORKETING / RESULTS";

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

    letter-spacing: .16em;
    text-transform: uppercase;
}


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

.page-id-92 .page-hero .display {
    font-size: 0;

    margin: 18px 0 0;

    width: 100%;
    max-width: 100%;

    line-height: .86;

    overflow: visible;
}


.page-id-92 .page-hero .display::after {

    content: "IDEAS MOVE\A MOUNTAINS.";

    white-space: pre;

    display: block;

    width: 100%;
    max-width: 100%;

    font-size: clamp(62px, 10.5vw, 165px);

    font-weight: 700;

    letter-spacing: -.065em;
    line-height: .82;

    text-transform: uppercase;

    color: var(--ink, #0a0718);
}


/* ---------------------------------------------------------
   3. RESULTS GRID
   --------------------------------------------------------- */

.page-id-92 .entry-content {

    counter-reset: moorketing-case;

    display: grid;

    grid-template-columns:
        minmax(280px, .72fr)
        minmax(0, 1.28fr);

    column-gap: clamp(35px, 6vw, 100px);

    align-items: start;

    max-width: none;

    margin: 0;
}


/* Remove old top separator */

.page-id-92 .entry-content > hr:first-child {
    display: none;
}


/* ---------------------------------------------------------
   4. CASE STUDY COPY
   --------------------------------------------------------- */

.page-id-92
.entry-content
> p.wp-block-paragraph:not(:empty) {

    grid-column: 1;

    position: static !important;

    top: auto !important;

    margin: 0;

    padding:
        clamp(65px, 7vw, 105px)
        0
        50px;

    font-size: clamp(16px, 1.2vw, 20px);

    line-height: 1.65;

    color: var(--ink, #0a0718);

    counter-increment: moorketing-case;
}


/* ---------------------------------------------------------
   5. AUTOMATIC CASE STUDY NUMBER
   Includes Aquarius + Panda's Kitchen
   --------------------------------------------------------- */

.page-id-92
.entry-content
> p.wp-block-paragraph:not(:empty)::before {

    content:
        "0"
        counter(moorketing-case)
        " / CASE STUDY";

    display: block;

    margin-bottom: 24px;

    font-size: 11px;

    font-weight: 700;

    line-height: 1;

    letter-spacing: .16em;

    text-transform: uppercase;

    color: var(--purple, #692b89);
}


/* ---------------------------------------------------------
   6. CLIENT NAMES
   --------------------------------------------------------- */

.page-id-92
.entry-content
> p.wp-block-paragraph
> a:first-child {

    display: block;

    margin-bottom: 22px;

    font-size: clamp(34px, 4vw, 68px);

    line-height: .95;

    font-weight: 700;

    letter-spacing: -.045em;

    text-transform: uppercase;

    color: var(--ink, #0a0718);

    text-decoration: none;
}


/* Hover */

.page-id-92
.entry-content
> p.wp-block-paragraph
> a:first-child:hover {

    text-decoration: underline;

    text-decoration-thickness: 2px;

    text-underline-offset: 7px;
}


/* ---------------------------------------------------------
   7. CASE STUDY GALLERIES
   --------------------------------------------------------- */

.page-id-92
.entry-content
> .wp-block-jetpack-tiled-gallery {

    grid-column: 2;

    margin:
        clamp(65px, 7vw, 105px)
        0
        55px !important;

    padding: 0 !important;

    background: transparent !important;
}


/* Standalone images */

.page-id-92
.entry-content
> figure.wp-block-image {

    grid-column: 2;

    margin:
        clamp(65px, 7vw, 105px)
        0
        55px !important;

    overflow: hidden;
}


/* ---------------------------------------------------------
   8. GALLERY CLEANUP
   --------------------------------------------------------- */

.page-id-92 .tiled-gallery__gallery {
    gap: 5px;
}

.page-id-92 .tiled-gallery__row {

    gap: 5px;

    margin-top: 0 !important;
}

.page-id-92 .tiled-gallery__col {

    gap: 5px;

    margin-inline-start: 0 !important;
}

.page-id-92 .tiled-gallery__item {

    margin: 0 !important;

    overflow: hidden;

    background:
        var(--cream, #f5eedf);
}


/* ---------------------------------------------------------
   9. IMAGES
   --------------------------------------------------------- */

.page-id-92 .tiled-gallery__item img,

.page-id-92
.entry-content
> figure.wp-block-image img {

    display: block;

    width: 100%;

    transition:
        transform .5s cubic-bezier(.2,.7,.2,1),
        filter .35s ease;
}


/* Small hover movement */

.page-id-92
.tiled-gallery__item:hover img {

    transform: scale(1.015);
}


/* ---------------------------------------------------------
   10. CASE STUDY DIVIDERS
   --------------------------------------------------------- */

.page-id-92
.entry-content
> hr.wp-block-separator {

    grid-column: 1 / -1;

    width: 100%;

    height: 1px;

    border: 0 !important;

    background:
        var(--line, rgba(10,7,24,.14))
        !important;

    margin: 0 !important;

    opacity: 1 !important;
}


/* ---------------------------------------------------------
   11. REMOVE EMPTY WORDPRESS BLOCKS
   --------------------------------------------------------- */

.page-id-92
.entry-content
> p:empty {

    display: none;
}


/* ---------------------------------------------------------
   12. REMOVE JETPACK SHARING
   --------------------------------------------------------- */

.page-id-92
.entry-content
> .sharedaddy,

.page-id-92
.entry-content
> [class*="sharedaddy"] {

    grid-column: 1 / -1;
}


.page-id-92
.entry-content
.sd-sharing-enabled,

.page-id-92
.entry-content
.sd-like {

    display: none !important;
}


/* ---------------------------------------------------------
   13. DESKTOP
   No sticky text
   --------------------------------------------------------- */

@media (min-width: 1001px) {

    .page-id-92
    .entry-content
    > p.wp-block-paragraph:not(:empty) {

        position: static !important;

        top: auto !important;

        align-self: start;
    }

}


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

@media (max-width: 1000px) {


    .page-id-92 .entry-content {

        grid-template-columns: 1fr;

        column-gap: 0;
    }


    .page-id-92
    .entry-content
    > p.wp-block-paragraph:not(:empty),

    .page-id-92
    .entry-content
    > .wp-block-jetpack-tiled-gallery,

    .page-id-92
    .entry-content
    > figure.wp-block-image,

    .page-id-92
    .entry-content
    > hr {

        grid-column: 1;
    }


    /* Client description */

    .page-id-92
    .entry-content
    > p.wp-block-paragraph:not(:empty) {

        padding:
            clamp(60px, 10vw, 90px)
            0
            35px;

        position: static !important;
    }


    /* Gallery beneath copy */

    .page-id-92
    .entry-content
    > .wp-block-jetpack-tiled-gallery,

    .page-id-92
    .entry-content
    > figure.wp-block-image {

        margin:
            0
            0
            60px !important;
    }

}


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

@media (max-width: 600px) {


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

       Extra top space is intentional.
       The site header overlaps the hero on mobile.
       ----------------------------------------------------- */

    .page-id-92 .page-hero {

        padding-top: 135px;

        padding-bottom: 60px;

        overflow: hidden;
    }


    .page-id-92
    .page-hero
    .eyebrow::after {

        font-size: 10px;

        letter-spacing: .15em;
    }


    .page-id-92
    .page-hero
    .display {

        width: 100%;

        max-width: 100%;

        margin-top: 16px;

        overflow: visible;
    }


    /* -----------------------------------------------------
       MOBILE HERO TITLE

       IDEAS MOVE
       MOUNTAINS.
       ----------------------------------------------------- */

    .page-id-92
    .page-hero
    .display::after {

        content:
            "IDEAS MOVE\A MOUNTAINS.";

        white-space: pre;

        display: block;

        width: 100%;

        max-width: 100%;

        font-size:
            clamp(40px, 11.7vw, 58px);

        line-height: .9;

        letter-spacing: -.045em;

        overflow-wrap: normal;

        word-break: normal;
    }


    /* -----------------------------------------------------
       MOBILE CASE STUDIES
       ----------------------------------------------------- */

    .page-id-92
    .entry-content
    > p.wp-block-paragraph:not(:empty) {

        padding:
            55px
            0
            30px;

        font-size: 16px;

        line-height: 1.6;

        position: static !important;

        top: auto !important;
    }


    /* Client heading */

    .page-id-92
    .entry-content
    > p.wp-block-paragraph
    > a:first-child {

        font-size:
            clamp(34px, 11vw, 48px);

        line-height: .95;

        margin-bottom: 18px;
    }


    /* Case study number */

    .page-id-92
    .entry-content
    > p.wp-block-paragraph:not(:empty)::before {

        margin-bottom: 18px;

        font-size: 10px;

        letter-spacing: .16em;
    }


    /* Images */

    .page-id-92
    .entry-content
    > .wp-block-jetpack-tiled-gallery,

    .page-id-92
    .entry-content
    > figure.wp-block-image {

        margin-bottom:
            45px !important;
    }


    .page-id-92
    .tiled-gallery__gallery {

        overflow: hidden;
    }

}


/* =========================================================
   SMALL IPHONES
   ========================================================= */

@media (max-width: 390px) {


    .page-id-92
    .page-hero {

        padding-top: 130px;
    }


    .page-id-92
    .page-hero
    .display::after {

        font-size: 11vw;

        line-height: .92;

        letter-spacing: -.04em;
    }

}