/**
 * Case study detail — custom template, modernised (0.10.0).
 *
 * Started as a 1-on-1 port of Elementor Theme Builder single 5937 (post-5937.css).
 * Since 0.10.0 in the design language of the expertise pages and the case studies
 * overview: sharp edges, the 60° corner cut of the hero slice (here on the solution
 * band), gold-rule eyebrows, one heading scale, left-aligned text at a readable
 * measure and one section rhythm. The cards of "Meer case studies" are the sharp
 * card variant from case-study-card.css.
 *
 * Breakpoints: laptop ≤1366, tablet ≤1024, mobile ≤767.
 */

.r4y-template--case_study_single {
    --r4y-gutter: 60px;
    --r4y-cs-space: clamp(64px, 7vw, 104px);
    --r4y-cs-measure: 62ch;
    --r4y-cs-h2: clamp(32px, 3.4vw, 50px);
    /* 60° cut: x : y = 1 : tan(60°), same values as the expertise pages */
    --r4y-cs-cut-x: 56px;
    --r4y-cs-cut-y: 97px;
    --r4y-cs-cut-tl: polygon(var(--r4y-cs-cut-x) 0, 100% 0, 100% 100%, 0 100%, 0 var(--r4y-cs-cut-y));
}
/* The line drawing and the slice run past the viewport edge on purpose. */
.r4y-template .r4y-case-study {
    overflow-x: clip;
}

/* ── Shared type ──────────────────────────────────────────────────────── */
/* Eyebrow: a short gold rule + small caps (as .r4y-expertise__eyebrow). */
.r4y-template .r4y-case-study .r4y-case-study__eyebrow {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 18px;
    font-family: var(--r4y-font-body);
    font-size: 13px;
    font-weight: var(--r4y-fw-semibold);
    line-height: 1.3;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--r4y-kit-secondary);
}
.r4y-template .r4y-case-study__eyebrow::before {
    content: "";
    flex: 0 0 32px;
    height: 1px;
    background-color: currentColor;
}
/* .r4y-case-study … beats base.css .r4y-main h2 { margin: 0 }. */
.r4y-template .r4y-case-study .r4y-case-study__heading {
    font-family: var(--r4y-font-heading);
    font-size: var(--r4y-cs-h2);
    font-weight: var(--r4y-fw-light);
    line-height: 1.05;
    letter-spacing: -0.01em;
    color: var(--r4y-kit-primary);
}
.r4y-template .r4y-case-study .r4y-prose {
    font-size: 17px;
    font-weight: var(--r4y-fw-light);
    line-height: 1.7;
}
.r4y-template .r4y-case-study .r4y-prose > :first-child { margin-top: 0; }
.r4y-template .r4y-case-study .r4y-prose > :last-child { margin-bottom: 0; }
.r4y-template .r4y-case-study .r4y-prose :is(ul, ol) { margin-block: 0; }
.r4y-template .r4y-case-study .r4y-prose :is(p + p, p + ul, ul + p, p + ol, ol + p, h2 + p, h3 + p, h4 + p) {
    margin-top: 1.1em;
}
.r4y-template .r4y-case-study .r4y-prose li + li { margin-top: 0.4em; }
.r4y-template .r4y-case-study .r4y-prose ul { padding-inline-start: 22px; }
.r4y-template .r4y-case-study .r4y-prose li::marker { color: var(--r4y-kit-secondary); }
.r4y-template .r4y-case-study .r4y-prose a {
    color: inherit;
    text-decoration: underline;
    text-decoration-color: var(--r4y-kit-secondary);
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    transition: color var(--r4y-transition);
}
.r4y-template .r4y-case-study .r4y-prose a:hover { color: var(--r4y-kit-secondary); }

/* ── Hero: featured image + cream gradient, the slice bottom right ────── */
.r4y-template .r4y-case-study__hero {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 600px;
    padding: 150px var(--r4y-gutter) 90px; /* same left edge as the sections below */
    overflow: hidden; /* clips the slice */
    isolation: isolate;
    background-color: var(--r4y-kit-accent); /* without any image */
}
/* Layers: photo (<img>, LCP) → cream gradient → content + slice. */
.r4y-template .r4y-case-study__hero-image {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
}
.r4y-template .r4y-case-study__hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    /* Wider cream than the overview: the case titles are long. */
    background-image: linear-gradient(90deg, #FFFAF7 30%, #FFFAF7CC 50%, #FBF8F600 85%);
}
.r4y-template .r4y-case-study__hero-inner {
    position: relative;
}
/* Back link: small caps, gold (as .r4y-expertise__crumb). */
.r4y-template .r4y-case-study .r4y-case-study__back {
    position: relative;
    z-index: 1; /* above the ascent of the H1 */
    margin-bottom: 18px;
    font-family: var(--r4y-font-body);
    font-size: 13px;
    font-weight: var(--r4y-fw-semibold);
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
.r4y-template .r4y-case-study__back a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    margin-block: -14px;
    color: var(--r4y-kit-secondary);
    text-decoration: none;
    transition: color var(--r4y-transition);
}
.r4y-template .r4y-case-study__back a:hover,
.r4y-template .r4y-case-study__back a:focus-visible { color: var(--r4y-kit-primary); }
.r4y-template .r4y-case-study__back .r4y-icon {
    width: 1.1em;
    height: 1.1em;
    transition: transform var(--r4y-transition) var(--r4y-ease-out);
}
.r4y-template .r4y-case-study__back a:hover .r4y-icon { transform: translateX(-3px); }
.r4y-template .r4y-case-study .r4y-case-study__title {
    max-width: 20ch;
    font-family: var(--r4y-font-heading);
    font-size: clamp(36px, 4.4vw, 64px);
    font-weight: var(--r4y-fw-light);
    line-height: 1.05;
    letter-spacing: -0.015em;
    color: var(--r4y-kit-primary);
    text-wrap: balance;
}
/* The slice: a 1000×500 white block in a wrapper rotated −60°, clipped by the hero. */
.r4y-template .r4y-case-study__hero-slice {
    rotate: -60deg;
    pointer-events: none;
}
.r4y-template .r4y-case-study__hero-slice > div {
    position: absolute;
    top: 33vw;
    right: -20vw;
    width: 1000px;
    height: 500px;
    background: var(--r4y-kit-white);
}

/* ── Intro: lead left, facts card right ───────────────────────────────── */
.r4y-template .r4y-case-study__intro {
    padding-block: var(--r4y-cs-space);
}
.r4y-template .r4y-case-study__intro-inner {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
    gap: 40px clamp(40px, 7vw, 120px);
    align-items: start;
}
.r4y-template .r4y-case-study__intro--facts-only .r4y-case-study__facts { grid-column: 1 / -1; max-width: 560px; }
.r4y-template .r4y-case-study__intro-decor {
    position: absolute;
    top: -280px;
    right: -60px;
    line-height: 0;
    pointer-events: none;
}
.r4y-template .r4y-case-study__intro-inner > :not(.r4y-case-study__intro-decor) {
    position: relative;
}
.r4y-template .r4y-case-study .r4y-case-study__intro-text {
    max-width: var(--r4y-cs-measure);
    font-family: var(--r4y-font-heading);
    font-size: clamp(21px, 1.9vw, 26px);
    font-weight: var(--r4y-fw-light);
    line-height: 1.4;
    color: var(--r4y-kit-primary);
}
/* Facts: crème card with a gold top rule (as the "Op deze pagina" card of the expertises). */
.r4y-template .r4y-main .r4y-case-study__facts {
    margin: 0;
    padding: 12px 28px;
    border-top: 2px solid var(--r4y-kit-secondary);
    background-color: var(--r4y-kit-accent);
}
.r4y-template .r4y-case-study__fact {
    position: relative;
    padding: 16px 0 16px 44px; /* 28px icon + 16px */
}
.r4y-template .r4y-case-study__fact + .r4y-case-study__fact {
    border-top: 1px solid var(--r4y-color-field-border);
}
.r4y-template .r4y-case-study__fact-label .r4y-icon {
    position: absolute;
    top: 50%;
    left: 0;
    translate: 0 -50%;
    width: 28px;
    height: 28px;
    color: var(--r4y-kit-secondary);
}
.r4y-template .r4y-case-study__fact-label {
    font-family: var(--r4y-font-body);
    font-size: 12px;
    font-weight: var(--r4y-fw-semibold);
    line-height: 1.3;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--r4y-color-muted);
}
.r4y-template .r4y-case-study__fact-value {
    margin: 4px 0 0;
    font-family: var(--r4y-font-heading);
    font-size: 22px;
    font-weight: var(--r4y-fw-regular);
    line-height: 1.2;
    color: var(--r4y-kit-primary);
}
.r4y-template .r4y-case-study__fact-value a {
    color: inherit;
    text-decoration: underline;
    text-decoration-color: var(--r4y-kit-secondary);
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
    transition: color var(--r4y-transition);
}
.r4y-template .r4y-case-study__fact-value a:hover,
.r4y-template .r4y-case-study__fact-value a:focus-visible { color: var(--r4y-kit-secondary); }

/* ── Text rows (challenge, result, conclusion) and the solution band ──── */
.r4y-template .r4y-case-study__row,
.r4y-template .r4y-case-study__solution {
    padding-block: var(--r4y-cs-space);
}
.r4y-template .r4y-case-study__row-inner {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
    gap: 32px clamp(40px, 7vw, 120px);
    align-items: start;
}
.r4y-template .r4y-case-study .r4y-case-study__row-text {
    max-width: var(--r4y-cs-measure);
}
/* Two text rows in a row get a hairline instead of double white space. */
.r4y-template .r4y-case-study__intro + .r4y-case-study__row,
.r4y-template .r4y-case-study__row + .r4y-case-study__row {
    padding-top: 0;
}
.r4y-template .r4y-case-study__intro + .r4y-case-study__row .r4y-case-study__row-inner,
.r4y-template .r4y-case-study__row + .r4y-case-study__row .r4y-case-study__row-inner {
    padding-top: var(--r4y-cs-space);
    border-top: 1px solid var(--r4y-color-field-border);
}

/* Solution: dark green band, cut top left, inset by the gutter (as the advice band of the expertises). */
.r4y-template .r4y-case-study__solution {
    margin-inline: var(--r4y-gutter);
    padding-inline: clamp(0px, 4vw, 60px);
    background-color: var(--r4y-kit-primary);
    clip-path: var(--r4y-cs-cut-tl);
}
.r4y-template .r4y-case-study .r4y-case-study__solution .r4y-case-study__heading { color: var(--r4y-kit-white); }
.r4y-template .r4y-case-study__solution .r4y-case-study__row-text { color: var(--r4y-kit-white); }
.r4y-template .r4y-case-study__solution .r4y-prose strong,
.r4y-template .r4y-case-study__solution .r4y-prose b {
    font-weight: var(--r4y-fw-semibold);
    color: var(--r4y-kit-secondary);
}
.r4y-template .r4y-case-study .r4y-case-study__solution .r4y-prose a:hover { color: var(--r4y-kit-secondary); }

/* ── References: crème band, quotes with a gold rule ──────────────────── */
.r4y-template .r4y-case-study__references {
    padding-block: var(--r4y-cs-space);
    background-color: var(--r4y-kit-accent);
}
.r4y-template .r4y-case-study__references-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 56px clamp(40px, 6vw, 96px);
}
.r4y-template .r4y-case-study__references-inner--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.r4y-template .r4y-case-study__references-inner--1 .r4y-case-study__quote {
    max-width: 52em;
}
.r4y-template .r4y-main .r4y-case-study__quote {
    margin: 0;
    padding-left: 32px;
    border-left: 2px solid var(--r4y-kit-secondary);
}
.r4y-template .r4y-case-study .r4y-case-study__quote-text {
    margin: 0;
    padding: 0;
    border: 0;
    font-family: var(--r4y-font-heading);
    font-size: clamp(19px, 1.6vw, 23px);
    font-style: normal;
    font-weight: var(--r4y-fw-light);
    line-height: 1.45;
    color: var(--r4y-kit-primary);
}
.r4y-template .r4y-case-study__quote-name {
    margin-top: 20px;
    font-family: var(--r4y-font-body);
    font-size: 13px;
    font-weight: var(--r4y-fw-semibold);
    line-height: 1.4;
    font-style: normal;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--r4y-kit-secondary);
}

/* ── Meer case studies ────────────────────────────────────────────────── */
.r4y-template .r4y-case-study__related {
    padding-block: var(--r4y-cs-space);
    border-top: 1px solid var(--r4y-color-field-border);
}
.r4y-template .r4y-case-study__related-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px 40px;
    margin-bottom: 40px;
}
.r4y-template a.r4y-case-study__all {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    font-family: var(--r4y-font-body);
    font-weight: var(--r4y-fw-medium);
    color: var(--r4y-kit-primary);
    text-decoration: none;
    transition: color var(--r4y-transition);
}
.r4y-template a.r4y-case-study__all::after {
    content: "→" / "";
    color: var(--r4y-kit-secondary);
    transition: transform var(--r4y-transition) var(--r4y-ease-out);
}
.r4y-template a.r4y-case-study__all:hover { color: var(--r4y-kit-secondary); }
.r4y-template a.r4y-case-study__all:hover::after { transform: translateX(4px); }
.r4y-template a.r4y-case-study__all:focus-visible {
    outline: 2px solid var(--r4y-kit-secondary);
    outline-offset: 3px;
}
.r4y-template .r4y-case-study__related-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

/* ── Laptop ≤1366 ─────────────────────────────────────────────────────── */
@media (max-width: 1366px) {
    .r4y-template .r4y-case-study__hero {
        min-height: 420px;
        padding-bottom: 72px;
    }
    .r4y-template .r4y-case-study__intro-decor { right: -90px; }
}

/* ── Tablet ≤1024 ─────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .r4y-template--case_study_single { --r4y-gutter: 30px; }
    .r4y-template .r4y-case-study__intro-inner { grid-template-columns: minmax(0, 1fr); }
    .r4y-template .r4y-case-study__facts { max-width: 560px; }
    .r4y-template .r4y-case-study__intro-decor { top: -260px; right: -110px; }
    .r4y-template .r4y-case-study__row-inner { grid-template-columns: minmax(0, 1fr); gap: 24px; }
    .r4y-template .r4y-case-study__related-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .r4y-template .r4y-case-study__related-grid > :nth-child(3) { display: none; }
}

/* ── Mobile ≤767: everything stacks; the cut stays as the one shape ───── */
@media (max-width: 767px) {
    .r4y-template--case_study_single {
        --r4y-gutter: 15px;
        --r4y-cs-space: 56px;
        --r4y-cs-cut-x: 40px;
        --r4y-cs-cut-y: 69px;
    }
    .r4y-template .r4y-case-study__hero {
        min-height: 480px;
        padding: 120px var(--r4y-gutter) 96px;
        /* Same angle as the slice, as on the overview. */
        clip-path: polygon(0 0, 100% 0, 100% calc(100% - 104px), calc(100% - 60px) 100%, 0 100%);
    }
    .r4y-template .r4y-case-study__hero::before {
        background-image: linear-gradient(90deg, #FFFAF7 10%, #FFFAF7CC 60%, #FBF8F600 100%);
    }
    .r4y-template .r4y-case-study .r4y-case-study__title { font-size: var(--r4y-fs-4xl); }
    .r4y-template .r4y-case-study__hero-slice,
    .r4y-template .r4y-case-study__intro-decor { display: none; }
    .r4y-template .r4y-case-study .r4y-prose { font-size: var(--r4y-fs-base); }
    .r4y-template .r4y-case-study .r4y-case-study__intro-text { font-size: 20px; }
    .r4y-template .r4y-main .r4y-case-study__facts { padding: 6px 20px; }

    .r4y-template .r4y-case-study__solution {
        margin-inline: 0;
        padding: calc(var(--r4y-cs-space) + 16px) var(--r4y-gutter) var(--r4y-cs-space);
    }
    .r4y-template .r4y-case-study__references-inner--2 { grid-template-columns: minmax(0, 1fr); }
    .r4y-template .r4y-main .r4y-case-study__quote { padding-left: 20px; }

    /* Meer case studies: a swipe row (as the case studies on the expertise pages). */
    .r4y-template .r4y-case-study__related-grid {
        grid-template-columns: none;
        grid-auto-flow: column;
        grid-auto-columns: 84%;
        gap: 16px;
        margin-inline: calc(-1 * var(--r4y-gutter));
        padding: 0 var(--r4y-gutter) 8px;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-snap-type: x mandatory;
        scroll-padding-inline: var(--r4y-gutter);
        scrollbar-width: none;
    }
    .r4y-template .r4y-case-study__related-grid::-webkit-scrollbar { display: none; }
    .r4y-template .r4y-case-study__related-grid > * { scroll-snap-align: start; }
    .r4y-template .r4y-case-study__related-grid > :nth-child(3) { display: flex; }
    .r4y-template .r4y-case-study__related-grid .r4y-case-card--overview:hover { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .r4y-template .r4y-case-study__back a,
    .r4y-template .r4y-case-study__back .r4y-icon,
    .r4y-template a.r4y-case-study__all,
    .r4y-template a.r4y-case-study__all::after { transition: none; }
    .r4y-template .r4y-case-study__back a:hover .r4y-icon,
    .r4y-template a.r4y-case-study__all:hover::after { transform: none; }
}