/* Author: Gia Cat Nguyen Tran */
/* Case Study Template */
/* All tokens are inherited from main.css. Nothing is redefined here.*/

/* Page layout */
.case-study-page main {
    padding-bottom: 0;
}

/* Shared inner-width constraint — same pattern as main.css */
.cs-header-inner,
.cs-body,
.cs-footer-cta-inner {
    max-width: var(--max-width);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--page-padding);
    padding-right: var(--page-padding);
}


/* Header */
.cs-header {
    border-bottom: 0.5px solid var(--ink-faint);
    padding-bottom: 48px;
}

.cs-header-inner {
    padding-top: 48px;
}


/* Breadcrumb */
.cs-breadcrumb {
    font-family: var(--font-mono);
    font-size: 15px;              
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink);
    margin: 0 0 28px;
    display: block;
}

.cs-breadcrumb a {
    color: var(--ink-muted);
    transition: color 0.15s ease;
}

.cs-breadcrumb a:hover { color: var(--ink); }


/* Title */
.cs-title {
    font-family: var(--font-display);
    font-size: clamp(36px, 6vw, 64px);
    font-weight: var(--fw-regular);
    letter-spacing: -0.03em;
    line-height: 1.05;
    margin: 0 0 12px;
    color: var(--ink);
}

.cs-tagline {
    font-size: clamp(18px, 2.5vw, 24px);
    font-weight: var(--fw-regular);
    color: var(--ink-muted);
    line-height: var(--lh-body);
    margin: 0 0 36px;
    max-width: 620px;
}


/* Metadata strip */
.cs-meta-strip {
    display: flex;
    flex-wrap: wrap;
    border-top: 0.5px solid var(--ink-faint);
    border-bottom: 0.5px solid var(--ink-faint);
    margin: 0 0 32px;
    padding: 0;
    gap: 0;
}

.meta-item {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 18px 32px 18px 0;
    margin-right: 32px;
    border-right: 0.5px solid var(--ink-faint);
}

.meta-item:last-child {
    border-right: none;
    margin-right: 0;
}

.meta-item dt {
    font-family: var(--font-mono);
    font-size: 15px;               /* matches .tag in main.css */
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-muted);
    font-weight: var(--fw-regular);
}

.meta-item dd {
    font-family: var(--font-body);
    font-size: 18px;               /* matches .case-sub in main.css */
    font-weight: var(--fw-medium);
    color: var(--ink);
    margin: 0;
}


/* Hero image */
.cs-hero-image {
    width: 100%;
    max-height: auto;
    overflow: hidden;
    border-bottom: 0.5px solid var(--ink-faint);
}

.cs-hero-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}


/* Case study body */
.cs-section {
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: 60px;
    padding: 56px 0;
    border-bottom: 0.5px solid var(--ink-faint);
}

/* Left: numbered label */
.cs-section-label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-top: 4px;
}

.section-num {
    font-family: var(--font-mono);
    font-size: 15px;         
    color: var(--ink-muted);
    letter-spacing: 0.06em;
}

.section-name {
    font-family: var(--font-mono);
    font-size: 15px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink);
    font-weight: var(--fw-medium);
    line-height: 1.4;
}

/* Right: body */
.cs-section-content {
    min-width: 0;
}

.cs-section-content p {
    font-size: 18px;           
    line-height: var(--lh-body);
    color: var(--ink);
    margin: 0 0 18px;
}

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

.cs-section-content strong {
    color: var(--ink);
    font-weight: var(--fw-medium);
}


/* Subheadings */
.cs-subheading {
    font-family: var(--font-mono);
    font-size: 15px;             
    font-weight: var(--fw-medium);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--blue);
    margin: 32px 0 12px;
}

.cs-subheading:first-child { margin-top: 0; }

/* Lists */
.cs-list {
    list-style: none;
    padding: 0;
    margin: 0 0 24px;
}

.cs-list li {
    font-size: 18px;             
    line-height: var(--lh-body);
    color: var(--ink);
    padding: 10px 0;
    border-bottom: 0.5px solid var(--ink-faint);
    display: flex;
    gap: 12px;
}

.cs-list li::before {
    content: "—";
    color: var(--ink-muted);
    flex-shrink: 0;
    opacity: 0.45;
}

.cs-list li:first-child { border-top: 0.5px solid var(--ink-faint); }

.cs-list li strong {
    color: var(--ink);
    font-weight: var(--fw-medium);
}

/* Blockquote */
.cs-question {
    font-family: var(--font-display);
    font-size: clamp(18px, 2.5vw, 24px);
    font-weight: var(--fw-medium);
    font-style: italic;
    line-height: 1.5;
    color: var(--ink);
    border-left: 2px solid var(--blue);
    margin: 32px 0 0;
    padding: 8px 0 8px 24px;
}

/* Detail rows */
.cs-detail-list {
    margin: 24px 0 0;
    border-top: 0.5px solid var(--ink-faint);
}

.cs-detail-row {
    display: grid;
    grid-template-columns: 160px 1fr;
    gap: 20px;
    padding: 14px 0;
    border-bottom: 0.5px solid var(--ink-faint);
}

.detail-label {
    font-family: var(--font-mono);
    font-size: 15px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--blue);
    padding-top: 2px;
}

.detail-value {
    font-size: 18px;
    color: var(--ink);
    line-height: 1.55;
}

/* Images */
.cs-image-wrap {
    width: 100%;
    border-radius: 8px;
    overflow: hidden;
    margin-top: 28px;
    border: 0.5px solid var(--ink-faint);
    background: var(--ink-surface);
}

.cs-image-wrap-wf img {
    max-width: 500px;
}

.cs-image-wrap img {
    width: 100%;
    height: auto;
    display: block;
}

.cs-image-wrap--narrow {
    max-width: 500px;
}

/* UI kit */
.cs-kit-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 12px;
    margin-top: 28px;
}

.cs-kit-main img,
.cs-kit-stack img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 8px;
    border: 0.5px solid var(--ink-faint);
    background: var(--ink-surface);
}

.cs-kit-stack {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Figma embed */
.figma-embed {
    position: relative;
    max-width: 500px;
    width: 100%;
    padding-bottom: 62.5%;
    height: 0;
    overflow: hidden;
    border-radius: 10px;
    border: 0.5px solid var(--ink-faint);
    background: var(--ink-surface);
    margin-top: 28px;
}

.figma-embed iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}


/* Next project CTA */
.cs-footer-cta {
    border-top: 0.5px solid var(--ink-faint);
}

.cs-footer-cta-inner {
    padding-top: 56px;
    padding-bottom: 56px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.cta-label {
    font-family: var(--font-mono);
    font-size: 15px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-muted);
    margin: 0;
}

.cta-title {
    font-family: var(--font-display);
    font-size: clamp(24px, 4vw, 40px);
    font-weight: var(--fw-regular);
    letter-spacing: -0.02em;
    color: var(--ink);
    transition: color 0.2s ease;
}

.cta-title:hover { color: var(--blue); }


/* Responsive — Mobile (max 768px) */
@media (max-width: 768px) {

    /* Stack section label above content */
    .cs-section {
        grid-template-columns: 1fr;
        gap: 20px;
        padding: 36px 0;
    }

    .cs-section-label {
        flex-direction: row;
        align-items: center;
        gap: 10px;
    }

    /* Metadata strip: scroll horizontally */
    .cs-meta-strip {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 4px;
    }

    .meta-item {
        flex-shrink: 0;
        padding: 14px 24px 14px 0;
        margin-right: 24px;
    }

    /* Detail rows: single column */
    .cs-detail-row {
        grid-template-columns: 1fr;
        gap: 4px;
    }

    /* Kit grid: stack */
    .cs-kit-grid {
        grid-template-columns: 1fr;
    }

    .cs-image-wrap-wf img {
        display: block;
        justify-content: center;
        max-width: 300px;
        width: 100%;
        margin: auto;
    }
}