/* Native block compositions matched to the supplied Creative Nebula reference. */
.cn-minimal-main:has(.cn-reference-content .cn-reference-hero) {
    /* Align the banner with the floating navigation's vertical midpoint. */
    padding-block-start: 32px;
}

.cn-reference-content {
    width: 100%;
    max-width: 1920px !important;
    margin: 0 auto !important;
    padding: 0;

    & :is(.wp-block-group, .wp-block-columns, .wp-block-column) {
        box-sizing: border-box;
    }

    & p {
        font-size: clamp(1rem, 1.4vw, 1.25rem);
        font-weight: 300;
        line-height: 1.7;
        margin: 0 0 1rem;
    }

    & .cn-reference-hero {
        position: relative;
        width: calc(100% - 32px);
        min-height: 0;
        aspect-ratio: 16 / 8;
        margin: 0 16px 64px;
        border-radius: 48px;
        box-shadow: 0 25px 50px rgb(0 0 0 / 20%);
        overflow: hidden;
        text-align: center;
        color: #fff;

        & .one-202x-media-cover__inner-container {
            padding: 48px 16px;
        }

        & .cn-reference-hero-copy {
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        & h1 {
            max-width: 1000px;
            margin: 0 0 24px;
            color: #fff;
            font-size: 65px;
            font-weight: 700;
            line-height: 1.1;
            letter-spacing: -0.03em;
        }

        & .cn-reference-hero-lead {
            width: 100%;
            max-width: 672px;
            margin: 0 0 48px;
            padding: 8px 0 4px;
            color: #fff;
            font-size: 24px;
            line-height: 1.3;
            font-weight: 300;
        }

        & .cn-reference-service-icon {
            width: 56px;
            height: 56px;
            margin: 0 0 10px;
            transform: scale(0.8);
        }

        & .cn-reference-service-icon img {
            width: 100% !important;
            height: 100% !important;
            object-fit: contain;
            filter: brightness(0);
        }

        & .cn-reference-actions {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            align-items: center;
            gap: 16px;
            margin: 0 0 19.2px;

            & > * {
                margin: 0 !important;
            }
        }

        & .wp-block-one-202x-icon-button.is-style-outline {
            color: #090c10;
            border-color: #090c10;
            background: transparent;
        }
    }

    & .cn-reference-solution-section {
        width: 100%;
        max-width: 1688px;
        margin: 64px auto;
        padding: 0 64px;
        background: transparent;
        border: 0;
        border-radius: 0;

        & > .wp-block-columns {
            display: grid;
            grid-template-columns: repeat(12, minmax(0, 1fr));
            gap: 64px;
            align-items: center;
            margin: 0;
            padding: 0 16px;
        }

        & .cn-reference-section-copy {
            grid-column: 1 / span 5;
            grid-row: 1;
            padding-block: 16px;
        }

        & .cn-reference-section-media {
            grid-column: 6 / span 7;
            grid-row: 1;
        }

        &.is-reversed .cn-reference-section-copy {
            grid-column: 8 / span 5;
            grid-row: 1;
        }

        &.is-reversed .cn-reference-section-media {
            grid-column: 1 / span 7;
            grid-row: 1;
        }

        & h2 {
            margin: 0 0 13.6px;
            font-size: 36px;
            font-weight: 700;
            line-height: 1.1;
            letter-spacing: -0.015em;
        }

        & .cn-reference-section-lead {
            color: #949aa2;
            font-size: 20px;
            font-weight: 300;
            line-height: 1.5;
            padding-top: 8px;
            margin-bottom: 4px;
        }

        & .cn-reference-section-copy > p:not(.cn-reference-section-lead) {
            font-size: max(0.9rem, min(1.3vw, 1.15rem));
            padding-top: 8px;
            margin-bottom: 4px;
        }

        & .cn-reference-section-copy > .wp-block-one-202x-icon-button {
            margin-top: 24px;
        }

        & .cn-reference-section-copy > *:last-child {
            margin-bottom: 0;
        }

        & .wp-block-image {
            margin: 0;
        }

        & .wp-block-image img {
            display: block;
            width: 100%;
            height: auto;
            max-height: none;
            border-radius: 48px;
            object-fit: initial;
        }

        & .cn-reference-website-preview img {
            object-position: top;
        }

        & .cn-reference-service-icon {
            width: 64px;
            height: 64px;
            margin: 0 0 34px;
            transform: scale(0.8);
        }

        & .cn-reference-service-icon img {
            width: 100%;
            height: 100%;
            border-radius: 0;
            object-fit: contain;
            filter: brightness(0);
        }
    }

    & .cn-reference-solutions-heading {
        max-width: 1400px;
        margin: 0 auto;
        padding: 112px 80px;

        & h1 {
            margin: 0;
        }
    }

    & .cn-reference-contact {
        margin: 96px auto;
        padding: 0 32px;
        max-width: 768px;
        text-align: center;
    }
}

.cn-minimal-main.cn-project-main:has(.cn-reference-project) {
    padding-block-start: 144px;

    @media (max-width: 767px) {
        padding-block-start: 128px;
    }
}

.cn-reference-project {
    padding-inline: 16px;

    & .cn-reference-project-header,
    & .cn-reference-project-columns,
    & .cn-reference-project-slim,
    & .cn-reference-project-gallery {
        width: 100%;
        margin: clamp(16px, 2vw, 32px) auto;
        padding: clamp(32px, 4vw, 72px) clamp(20px, 4vw, 64px);
        border: 0;
        background: transparent;
    }

    & .cn-reference-project-header {
        margin-top: 0;
        padding-top: 10px;

        & > h1 {
            margin: 24px 0 16px;
            font-size: clamp(2rem, 5vw, 4.5rem);
            line-height: 1.1;
            font-weight: 600;
            letter-spacing: -0.03em;
        }
    }

    & .cn-reference-project-meta {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 16px;
        max-width: 1600px;
        margin: 0 auto;

        & p {
            margin: 0;
            font-size: 13.6px;
            font-weight: 300;
            line-height: 1.7;
            letter-spacing: 0.1em;
            text-transform: uppercase;
        }

        & .cn-reference-project-tag {
            padding: 5.6px 16px;
            border: 1px solid rgb(6 18 43 / 15%);
            border-radius: 999px;
        }
    }

    & .cn-reference-project-description {
        max-width: 720px;
        margin: 0;

        & > p {
            margin: 0 0 1.7em;
        }
    }

    & .cn-reference-project-columns > .wp-block-columns {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: clamp(24px, 4vw, 72px);
        max-width: 1600px;
        margin: 0 auto;
        align-items: start;
    }

    & .cn-reference-project-slim > .wp-block-group {
        max-width: 768px;
        margin: 0 auto;
        text-align: center;
    }

    & :is(.cn-reference-project-columns, .cn-reference-project-slim) h2 {
        margin: 0 0 16px;
        font-size: clamp(1.75rem, 4vw, 3.25rem);
        font-weight: 600;
        line-height: 1.15;
        letter-spacing: -0.015em;
    }

    & .cn-reference-project-gallery {
        background: #f4f2ef;
        border-radius: 48px;

        & > .wp-block-group {
            max-width: 1400px;
            margin: 0 auto;
        }

        & .wp-block-columns {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: clamp(16px, 3vw, 48px);
            align-items: start;
            margin: 0;
        }

        & figure {
            position: relative;
            margin: 0 !important;
            overflow: hidden;
            border-radius: 36px;
            background: #fff;
        }

        & img {
            display: block;
            width: 100%;
            height: auto;
            max-height: none;
            border-radius: 0 !important;
            object-fit: initial;
        }

        & figcaption {
            position: absolute;
            right: 24px;
            bottom: 24px;
            max-width: calc(100% - 48px);
            margin: 0;
            padding: 8px 20px;
            border-radius: 999px;
            background: rgb(255 255 255 / 90%);
            color: #06122b;
            font-size: 12px;
            line-height: 1.4;
            letter-spacing: 0.05em;
            text-transform: uppercase;
            text-align: left;
        }

        &.is-artwork figure {
            aspect-ratio: 5 / 3;
            box-shadow: 0 25px 50px rgb(6 18 43 / 10%);
        }

        &.is-artwork-pair figure {
            aspect-ratio: 1;
        }

        &.is-artwork img,
        &.is-artwork-pair img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center;
        }

        &.is-website > .wp-block-group {
            max-width: 1100px;
        }

        &.is-website figure,
        &.is-website-pair figure {
            box-shadow: 0 30px 80px rgb(6 18 43 / 15%);
        }

        &.is-website-pair > .wp-block-group {
            max-width: 1500px;
        }
    }

    & .cn-reference-techs {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 12px;
        max-width: 768px;
        margin: 24px 0 0;
    }

    & .cn-reference-tech {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        margin: 0;
        padding: 6px 10px;
        border: 1px solid rgb(255 255 255 / 10%);
        border-radius: 16px;

        & > * {
            margin: 0 !important;
        }

        & .cn-reference-tech-icon {
            display: flex;
            justify-content: center;
            align-items: center;
            flex: 0 0 40px;
            width: 40px;
            min-width: 40px;
            max-width: 40px;
            height: 40px;
            min-height: 40px;
            max-height: 40px;
            margin: 0;
            padding: 0 !important;
            border-radius: 12px;
            box-shadow: 0 10px 24px rgb(0 0 0 / 20%);
        }

        & figure,
        & p {
            margin: 0 !important;
        }

        & img {
            display: block;
            border-radius: 0;
            object-fit: contain;
        }

        & .cn-reference-tech-icon p {
            font-size: 10px;
            font-weight: 600;
            color: #fff;
        }

        & .cn-reference-tech-label > p:first-child {
            font-size: 12px;
            font-weight: 600;
            line-height: 1.25;
        }

        & .cn-reference-tech-label > p:last-child {
            font-size: 10px;
            font-weight: 300;
            line-height: 1.25;
            letter-spacing: 0.3em;
            text-transform: uppercase;
            color: #949aa2;
        }
    }

    & .cn-reference-project-services {
        display: flex;
        flex-wrap: wrap;
        gap: 8px 20px;
        margin: 20px 0 0;

        & p {
            margin: 0;
            font-size: 14px;
        }
    }
}

@media (min-width: 1440px) {
    .cn-reference-content .cn-reference-solution-section {
        padding-inline: 144px;

        & .cn-reference-service-icon {
            transform: none;
        }
    }
}

@media (max-width: 1023px) {
    .cn-reference-content .cn-reference-hero {
        aspect-ratio: 16 / 13;
    }

    .cn-reference-content .cn-reference-solution-section {
        padding-inline: 16px;

        & > .wp-block-columns {
            gap: 16px;
        }
    }
}

@media (max-width: 767px) {
    .cn-reference-content {
        & .cn-reference-hero {
            aspect-ratio: 9 / 16;
            min-height: 620px;
            margin-bottom: 32px;

            & h1 {
                font-size: 40px;
                line-height: 1.2;
            }

            & .cn-reference-hero-lead {
                font-size: 20px;
            }
        }

        & .cn-reference-solution-section {
            margin-block: 32px;
            padding: 0 16px;

            & > .wp-block-columns,
            &.is-reversed > .wp-block-columns {
                display: flex;
                flex-direction: column;
                gap: 24px;
                padding: 0;
            }

            & .cn-reference-section-copy {
                padding-block: 32px 0;
            }
        }

        & .cn-reference-solutions-heading {
            padding: 64px 32px;
        }
    }

    .cn-reference-project {
        & .cn-reference-project-columns > .wp-block-columns,
        & .cn-reference-project-gallery .wp-block-columns {
            grid-template-columns: 1fr;
        }

        & .cn-reference-project-meta {
            gap: 12px;
        }

        & .cn-reference-project-gallery figcaption {
            right: 12px;
            bottom: 12px;
            max-width: calc(100% - 24px);
            padding: 6px 12px;
            font-size: 10px;
        }
    }
}