/* ============================================
   Case study template — editorial layout
   A sticky section list on the left, one reading column on the right.
   Every section opens with a small typewriter label and a one-sentence
   headline that states the point, so skimming the headlines tells the story.
   ============================================ */

/* Three columns: the reading column sits dead centre, with equal space either
   side. The section list lives in the left-hand space; both sides keep room
   for it, so on smaller screens the column narrows instead of drifting. */
.rd-cs {
    display: grid;
    grid-template-columns: minmax(260px, 1fr) minmax(0, 760px) minmax(260px, 1fr);
    padding: 96px var(--rd-gutter) 0;
}

.rd-cs-toc {
    width: 220px;
}

/* SECTION LIST (left) */

.rd-cs-toc {
    position: sticky;
    top: 40px;
    align-self: start;
    padding-top: 6px;
}

/* Styled like the section links below it, so the list reads as one piece */
.rd-cs-toc__back {
    display: inline-block;
    margin-bottom: 28px;
    padding: 5px 0;
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.4;
    color: var(--rd-text);
    text-decoration: none;
    opacity: 0.4;
    transition: opacity 0.2s steps(2, end);
}

.rd-cs-toc__back:hover {
    opacity: 1;
}

.rd-cs-toc ol {
    list-style: none;
    margin: 0;
    padding: 0;
}

.rd-cs-toc li {
    font-weight: 400;
}

.rd-cs-toc ol a {
    position: relative;
    display: block;
    padding: 5px 0;
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.4;
    color: var(--rd-text);
    text-decoration: none;
    opacity: 0.4;
    transition: opacity 0.2s steps(2, end), padding-left 0.24s steps(3, end);
}

.rd-cs-toc ol a:hover,
.rd-cs-toc ol a.is-active {
    opacity: 1;
}

/* the active section steps right to make room for a short line */
.rd-cs-toc ol a.is-active {
    padding-left: 20px;
}

.rd-cs-toc ol a::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 12px;
    height: 1px;
    background: var(--rd-text);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.24s steps(3, end);
}

.rd-cs-toc ol a.is-active::before {
    transform: scaleX(1);
}

/* READING COLUMN (right) */

.rd-cs-main {
    min-width: 0;
}

/* .rd-cs-main in front, so these outrank the body-text rule for p in sections */
.rd-cs-main .rd-cs-label {
    margin: 0 0 14px;
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.4;
    color: #838b99;
}

.rd-cs-title {
    margin: 0;
    font-family: 'Inter Tight', 'Inter', sans-serif;
    font-weight: 400;
    font-size: clamp(26px, 2.4vw, 32px);
    letter-spacing: -0.03em;
    line-height: 1.1;
    color: var(--rd-text);
}

/* The home page's voice: the same light sans and italics as the hero intro */
.rd-cs-intro {
    margin: 18px 0 0;
    font-family: 'Inter Tight', 'Inter', sans-serif;
    font-weight: 300;
    font-size: 19px;
    letter-spacing: -0.02em;
    line-height: 1.45;
    color: var(--rd-text);
}

/* The same image as the card you clicked on the home page */
.rd-cs-media img,
.rd-cs-media video {
    display: block;
    width: 100%;
    height: auto;
}

/* a hairline round screenshots, so pale screens don't melt into the page */
.rd-cs-media img {
    box-sizing: border-box;
    border: 1px solid #d1d5dd;
}

/* Video in a hairline frame, with small round controls that appear on hover
   (added by js/video.js) */
.rd-video {
    position: relative;
    overflow: hidden;
    border: 1px solid #d1d5dd;
    background: #dfe2e7;
}

.rd-video video {
    opacity: 0;
    transition: opacity 0.4s ease;
    cursor: pointer;
}

.rd-video.is-ready video,
html:not(.js) .rd-video video {
    opacity: 1;
}

.rd-video__tools {
    position: absolute;
    top: 12px;
    right: 12px;
    display: flex;
    gap: 8px;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.rd-video:hover .rd-video__tools,
.rd-video:focus-within .rd-video__tools,
.rd-video.is-paused .rd-video__tools {
    opacity: 1;
}

/* no hover on touch screens, so keep them showing */
@media (hover: none) {
    .rd-video__tools {
        opacity: 1;
    }
}

.rd-video__button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    /* dark enough to read on your cream screens, not just on dark footage */
    background: rgba(25, 29, 39, 0.65);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    color: #fff;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.rd-video__button:hover {
    background: rgba(25, 29, 39, 0.9);
}

/* in the two-up grid, real images fill the same 4:5 frame as the placeholders,
   cropped from the top so a screenshot keeps its heading */
.rd-cs-grid .rd-cs-media img {
    aspect-ratio: 4 / 5;
    object-fit: cover;
    object-position: top;
}

.rd-cs-media {
    margin: 48px 0 0;
}

.rd-cs-media figcaption {
    margin-top: 12px;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    color: #838b99;
}

/* Role / timeline / team / skills */
.rd-cs-meta {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
    margin: 48px 0 0;
    padding-top: 24px;
    border-top: 1px solid #d1d5dd;
}

.rd-cs-meta dt {
    margin-bottom: 6px;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    color: #838b99;
}

.rd-cs-meta dd {
    margin: 0;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    line-height: 1.6;
    color: var(--rd-text);
}

.rd-cs-section {
    padding-top: 96px;
    scroll-margin-top: 32px;
}

.rd-cs-section h2 {
    margin: 0 0 20px;
    font-family: 'Inter Tight', 'Inter', sans-serif;
    font-weight: 400;
    font-size: 24px;
    letter-spacing: -0.025em;
    line-height: 1.2;
    color: var(--rd-text);
}

.rd-cs-section h3 {
    margin: 0 0 6px;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 15px;
    color: var(--rd-text);
}

.rd-cs-section p,
.rd-cs-section li {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.65;
    color: #525a68;
}

.rd-cs-section p {
    margin: 0 0 16px;
}

.rd-cs-section p:last-child {
    margin-bottom: 0;
}

/* sub-heading inside a section, e.g. "Key insights" */
.rd-cs-sub {
    margin-top: 64px;
}

/* Cards: two or three short points side by side */
.rd-cs-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 32px;
    margin-top: 40px;
}

.rd-cs-cards--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.rd-cs-cards > div {
    padding-top: 16px;
    border-top: 1px solid #d1d5dd;
}

.rd-cs-cards p {
    font-size: 14px;
    line-height: 1.6;
}

/* Big numbers for results */
.rd-cs-stat {
    display: block;
    margin-bottom: 4px;
    font-family: 'Inter Tight', 'Inter', sans-serif;
    font-weight: 400;
    font-size: 32px;
    letter-spacing: -0.035em;
    line-height: 1.1;
    color: var(--rd-text);
}

/* Media grid, e.g. core flows side by side */
.rd-cs-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 48px 32px;
    margin-top: 48px;
}

.rd-cs-grid .rd-cs-media {
    margin: 0;
}

.rd-cs-grid .rd-placeholder {
    aspect-ratio: 4 / 5;
}

.rd-cs-grid h3 {
    margin-top: 16px;
}

.rd-cs-grid p {
    font-size: 14px;
    line-height: 1.6;
}

/* Numbered steps in a row, e.g. how a product works */
.rd-cs-steps {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
    margin: 40px 0 0;
    padding: 0;
    list-style: none;
}

.rd-cs-steps li {
    padding-top: 16px;
    border-top: 1px solid #d1d5dd;
}

.rd-cs-steps__no {
    display: block;
    margin-bottom: 12px;
    font-family: 'Inter Tight', 'Inter', sans-serif;
    font-size: 24px;
    letter-spacing: -0.03em;
    line-height: 1;
    color: var(--rd-text);
}

.rd-cs-steps p {
    font-size: 14px;
    line-height: 1.6;
}

/* A live, playable embed of the real thing. js/case-study.js runs it at a real
   window size (laptop, or phone on small screens) and scales it down to fit the
   column, so the app lays itself out as it would in a browser instead of being
   squeezed into a short box. */
.rd-cs-embed {
    position: relative;
    margin-top: 40px;
    overflow: hidden;
    border: 1px solid #d1d5dd;
    background: #faf7f2;
    aspect-ratio: var(--embed-w, 1200) / var(--embed-h, 860);
}

.rd-cs-embed iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: calc(var(--embed-w, 1200) * 1px);
    height: calc(var(--embed-h, 860) * 1px);
    border: 0;
    transform: scale(var(--embed-scale, 1));
    transform-origin: 0 0;
}

/* without JavaScript there's no scaling, so just fill the box */
html:not(.js) .rd-cs-embed iframe {
    width: 100%;
    height: 100%;
    transform: none;
}

.rd-cs-section a.rd-cs-link {
    color: var(--rd-text);
    font-weight: 400;
    text-decoration: none;
    border-bottom: 1px solid currentColor;
}

/* Insight → decision pairs */
.rd-cs-decision {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 32px;
    margin-top: 40px;
    padding-top: 16px;
    border-top: 1px solid #d1d5dd;
}

.rd-cs-decision p {
    font-size: 14px;
    line-height: 1.6;
}

/* who said the pull-quote above it */
.rd-cs-main .rd-cs-cite {
    margin: 10px 0 0 21px;
    font-size: 13px;
    color: #838b99;
}

/* A pull-quote style line for the one big question */
.rd-cs-main .rd-cs-question {
    margin: 40px 0 0;
    padding-left: 20px;
    border-left: 1px solid var(--rd-text);
    font-family: 'Inter Tight', 'Inter', sans-serif;
    font-weight: 400;
    letter-spacing: -0.02em;
    font-size: 20px;
    line-height: 1.35;
    color: var(--rd-text);
}

.rd-placeholder {
    box-sizing: border-box;
    width: 100%;
    aspect-ratio: 16 / 10;
    background: #ffffff;
    border: 1px dashed #ccd0d8;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    color: #a8aeb9;
    text-align: center;
}

.rd-cs-next {
    margin: 160px 0 0;
    padding: 24px 0 160px;
    border-top: 1px solid #d1d5dd;
}

.rd-cs-next a {
    font-family: 'Inter Tight', 'Inter', sans-serif;
    font-weight: 400;
    font-size: 24px;
    letter-spacing: -0.025em;
    color: var(--rd-text);
    text-decoration: none;
}

.rd-cs-next a:hover {
    opacity: 0.6;
}

/* RESPONSIVE: below 1100px the section list goes, and the column fills the width */

@media (max-width: 1100px) {
    .rd-cs {
        display: block;
        padding-top: 64px;
    }
    .rd-cs-toc ol {
        display: none;
    }
    .rd-cs-toc {
        position: static;
        padding-top: 0;
    }
    .rd-cs-toc__back {
        margin-bottom: 32px;
    }
}

@media (max-width: 640px) {
    .rd-cs-meta {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .rd-cs-cards,
    .rd-cs-cards--2,
    .rd-cs-grid,
    .rd-cs-decision {
        grid-template-columns: minmax(0, 1fr);
    }
    .rd-cs-steps {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .rd-cs-section {
        padding-top: 72px;
    }
    .rd-cs-section h2 {
        font-size: 21px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .rd-cs-toc ol a,
    .rd-cs-toc ol a::before {
        transition: none;
    }
}