/* ==========================================================
   CASE STUDIES HERO
   Editorial copy left, complete montage right.
   Global hero height remains untouched.
   ========================================================== */

.ns-case-studies-hero {
    background-color: #fff;
    background-image: url('/wp-content/uploads/2026/08/services_events.webp');
    background-repeat: no-repeat;

    /*
     * Preserve the montage as a composition rather than
     * enlarging/cropping it as a full-bleed photograph.
     */
    background-size: auto 82%;
    background-position: right center;
}

.ns-case-studies-hero .ns-hero__content {
    position: relative;
    z-index: 1;

    /*
     * Keep copy within the clear left-hand editorial area.
     */
    width: 36%;
    max-width: 520px;
}

.ns-case-studies-hero .ns-section-label {
    color: var(--ns-colour-accent);
}

.ns-case-studies-hero h1 {
    max-width: 520px;
    margin-bottom: 24px;
    color: var(--ns-colour-navy);
}

.ns-case-studies-hero .ns-lead {
    max-width: 500px;
    margin-bottom: 0;
    color: var(--ns-colour-body);
}

/* ==========================================================
   EXPERIENCE
   ========================================================== */

.ns-case-studies-experience__inner {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.35fr);
    gap: clamp(72px, 9vw, 140px);
    align-items: start;
}

.ns-case-studies-experience__intro {
    max-width: 520px;
}

.ns-case-studies-experience__intro h2 {
    margin-bottom: 28px;
}

.ns-case-studies-experience__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 56px 72px;
}

.ns-case-studies-experience__item {
    padding-top: 24px;
    border-top: 1px solid var(--ns-line);
}

.ns-case-studies-experience__number {
    margin: 0 0 20px;
    font-size: 14px;
    line-height: 1;
    letter-spacing: 0.12em;
    font-weight: 700;
    color: var(--ns-colour-accent);
}

.ns-case-studies-experience__item h3 {
    margin-bottom: 16px;
}

.ns-case-studies-experience__item p:last-child {
    margin: 0;
}

/* ==========================================================
   PROBLEMS SOLVED
   ========================================================== */

.ns-case-studies-problems__inner {
    display: grid;
    gap: clamp(64px, 8vw, 112px);
}

.ns-case-studies-problems__header {
    max-width: 760px;
}

.ns-case-studies-problems__header h2 {
    margin-bottom: 28px;
}

.ns-case-studies-problems__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-top: 1px solid var(--ns-line);
    border-left: 1px solid var(--ns-line);
}

.ns-case-studies-problem {
    min-height: 260px;
    padding: clamp(32px, 4vw, 52px);
    border-right: 1px solid var(--ns-line);
    border-bottom: 1px solid var(--ns-line);
}

.ns-case-studies-problem h3 {
    margin-bottom: 20px;
}

.ns-case-studies-problem p {
    margin: 0;
}

/* ==========================================================
   FEATURED CASE STUDIES SECTION
   ========================================================== */

.ns-case-studies-featured__inner {
    display: grid;
    gap: clamp(64px, 8vw, 112px);
}

.ns-case-studies-featured__header {
    max-width: 760px;
}

.ns-case-studies-featured__header h2 {
    margin-bottom: 28px;
}

.ns-case-study-grid {
    display: grid;
    gap: clamp(56px, 7vw, 96px);
}

/* ==========================================================
   PORTRAIT CASE STUDY
   ========================================================== */

.ns-case-study-card--portrait .ns-case-study-card__media {
    aspect-ratio: auto;
    overflow: visible;
}

.ns-case-study-card--portrait .ns-case-study-card__media img {
    width: 100%;
    height: auto;
    object-fit: initial;
}

.ns-case-study-card--portrait .ns-case-study-card__content {
    padding-top: 0;
}

/* Website case study — preserve complete website visual */

.ns-case-study-card--website .ns-case-study-card__media {
    aspect-ratio: auto;
    overflow: visible;
    margin-bottom: 0;
}

.ns-case-study-card--website .ns-case-study-card__media img {
    width: 100%;
    height: auto;
    object-fit: contain;
}

.ns-case-study-card--website .ns-case-study-card__content {
    padding-top: 0;
}

/* ==========================================================
   SELECTED ORGANISATIONS & PROJECTS
   ========================================================== */

.ns-selected-projects__inner {
    display: grid;
    gap: clamp(64px, 8vw, 104px);
}

.ns-selected-projects__header {
    max-width: 760px;
}

.ns-selected-projects__header h2 {
    margin-bottom: 28px;
}

.ns-selected-projects__groups {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 clamp(72px, 8vw, 120px);
}

.ns-selected-projects__group {
    padding: 42px 0;
    border-top: 1px solid var(--ns-line);
}

.ns-selected-projects__group:nth-last-child(-n + 2) {
    border-bottom: 1px solid var(--ns-line);
}

.ns-selected-projects__group h3 {
    margin-bottom: 24px;
}

.ns-selected-projects__group ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.ns-selected-projects__group li {
    margin: 0;
    padding: 10px 0;
    color: var(--ns-colour-body);
}

.ns-selected-projects__footnote {
    max-width: 760px;
    margin: 0;
    font-size: 0.95rem;
    color: var(--ns-colour-muted);
}

@media (max-width: 980px) {

     .ns-case-studies-hero {
        background-size: auto 68%;
        background-position: right bottom;
    }

    .ns-case-studies-hero .ns-hero__content {
        width: 46%;
        max-width: 520px;
    }
    
    .ns-case-studies-experience__inner {
        grid-template-columns: 1fr;
        gap: 64px;
    }

    .ns-case-studies-problems__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ns-selected-projects__groups {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .ns-selected-projects__group:nth-last-child(-n + 2) {
        border-bottom: 0;
    }

    .ns-selected-projects__group:last-child {
        border-bottom: 1px solid var(--ns-line);
    }

}

@media (max-width: 767px) {

    .et_pb_section.ns-case-studies-hero {
        position: relative;
        overflow: hidden;

        /* Remove the section background on mobile */
        background-image: none !important;

        /* Reserve a separate area beneath the copy */
        padding-bottom: clamp(300px, 82vw, 430px) !important;
    }

    .et_pb_section.ns-case-studies-hero::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;

        height: clamp(280px, 76vw, 400px);

        background-image: url('/wp-content/uploads/2026/08/services_events.webp');
        background-repeat: no-repeat;
        background-position: center bottom;
        background-size: contain;

        pointer-events: none;
        z-index: 0;
    }

    .ns-case-studies-hero .ns-hero__content {
        position: relative;
        z-index: 1;
        width: 100%;
        max-width: 100%;
    }

    .ns-case-studies-hero .ns-lead {
        max-width: 580px;
    }

    .ns-case-studies-experience__grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .ns-case-studies-problems__grid {
        grid-template-columns: 1fr;
    }

    .ns-case-studies-problem {
        min-height: 0;
    }

    .ns-selected-projects__group a {
    color: inherit;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
}

.ns-selected-projects__group a:hover,
.ns-selected-projects__group a:focus-visible {
    color: var(--ns-colour-accent);
}
}