/* =============================================================
   case-study.css — Shared styles for all case study pages
   =============================================================
   Uses CSS custom properties that flip on html.dark to handle
   light/dark mode without repeating Tailwind utility classes
   in the HTML. Colors sourced from tailwind.css custom tokens.
   ============================================================= */

/* ---- Color tokens ---- */

:root {
    --cs-bg-white:  rgb(255 255 255);   /* bg-light-card */
    --cs-bg-muted:  rgb(248 249 250);   /* bg-light-background */
    --cs-border:    rgb(233 236 239);   /* border-light-border */
    --cs-accent:    #78b7cc;            /* design.css override */
    --cs-text:      rgb(75 85 99);      /* text-gray-600 */
    --cs-text-meta: rgb(107 114 128);   /* text-gray-500 */
    --cs-text-head: rgb(33 37 41);      /* text-light-text */
    --cs-code-bg:   rgb(243 244 246);   /* gray-100 */
}

html.dark {
    --cs-bg-white:  rgb(52 58 64);      /* bg-dark-card */
    --cs-bg-muted:  rgb(33 37 41);      /* bg-dark-background */
    --cs-border:    rgb(73 80 87);      /* border-dark-border */
    --cs-accent:    #94c8d8;            /* design.css dark override */
    --cs-text:      rgb(209 213 219);   /* text-gray-300 */
    --cs-text-meta: rgb(156 163 175);   /* text-gray-400 */
    --cs-text-head: rgb(248 249 250);   /* text-dark-text */
    --cs-code-bg:   rgb(55 65 81);      /* gray-700 */
}

/* ---- Section bands ---- */

.cs-section {
    background-color: var(--cs-bg-white);
    padding: 4rem 1.5rem;
}

.cs-section--muted {
    background-color: var(--cs-bg-muted);
}

/* ---- Max-width content container ---- */

.cs-wrap {
    max-width: 56rem;   /* matches max-w-4xl */
    margin-left: auto;
    margin-right: auto;
}

/* ---- Hero ---- */

.cs-hero {
    padding-top: 4.5rem;
    padding-bottom: 4.5rem;
    border-bottom: 1px solid var(--cs-border);
}

@media (min-width: 768px) {
    .cs-hero {
        padding-top: 6rem;
        padding-bottom: 6rem;
    }
}

.cs-back {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--cs-accent);
    margin-bottom: 0.75rem;
    transition: opacity 0.15s ease;
}

.cs-back:hover { opacity: 0.75; }

.cs-hero h1 {
    font-size: 1.875rem;
    font-weight: 700;
    line-height: 1.25;
    color: var(--cs-text-head);
    margin-top: 1.25rem;
    margin-bottom: 1.5rem;
}

@media (min-width: 768px) {
    .cs-hero h1 { font-size: 2.25rem; }
}

.cs-summary {
    font-size: 1.125rem;
    line-height: 1.75;
    color: var(--cs-text);
    border-left: 4px solid var(--cs-accent);
    padding-left: 1.5rem;
    margin-top: 1.5rem;
}

/* ---- Metrics strip ---- */

.cs-metrics {
    padding-top: 3rem;
    padding-bottom: 3rem;
    border-top: 1px solid var(--cs-border);
    border-bottom: 1px solid var(--cs-border);
}

.cs-metrics-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2.5rem 2rem;
    text-align: center;
}

.cs-metric-value {
    font-size: 2rem;
    font-weight: 700;
    color: var(--cs-accent);
    line-height: 1.1;
}

.cs-metric-label {
    font-size: 0.875rem;
    color: var(--cs-text-meta);
    margin-top: 0.5rem;
}

/* ---- Content sections ---- */

.cs-content {
    padding-top: 4rem;
    padding-bottom: 4rem;
}

.cs-content h2 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--cs-text-head);
    padding-bottom: 0.75rem;
    margin-bottom: 1.75rem;
    border-bottom: 1px solid var(--cs-border);
}

.cs-content h3 {
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--cs-text-head);
    margin-top: 2rem;
    margin-bottom: 0.625rem;
}

.cs-content p {
    line-height: 1.75;
    color: var(--cs-text);
}

.cs-content p + p       { margin-top: 1rem; }
.cs-content p + h3      { margin-top: 1.75rem; }
.cs-content h3 + p      { margin-top: 0.5rem; }
.cs-content ul + p      { margin-top: 1rem; }
.cs-content ul + h3     { margin-top: 1.75rem; }
.cs-content p + ul      { margin-top: 0.75rem; }

.cs-content ul {
    list-style-type: disc;
    list-style-position: inside;
    color: var(--cs-text);
    line-height: 1.75;
    margin-top: 0.75rem;
}

.cs-content li { margin-top: 0.5rem; }

.cs-content strong {
    font-weight: 700;
    color: var(--cs-text-head);
}

.cs-content code {
    background-color: var(--cs-code-bg);
    padding: 0.125rem 0.375rem;
    border-radius: 0.25rem;
    font-size: 0.8125rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
                 "Liberation Mono", "Courier New", monospace;
}

/* ---- Tables ---- */

.cs-table-wrap {
    margin-top: 1.5rem;
    margin-bottom: 0.25rem;
    border-radius: 0.5rem;
    border: 1px solid var(--cs-border);
    overflow: hidden;
}

.cs-content p + .cs-table-wrap { margin-top: 1.25rem; }
.cs-table-wrap + p              { margin-top: 1.25rem; }

.cs-table {
    width: 100%;
    font-size: 0.875rem;
    border-collapse: collapse;
}

.cs-table th {
    text-align: left;
    padding: 0.75rem 1rem;
    font-weight: 600;
    color: var(--cs-text-head);
    background-color: var(--cs-bg-muted);
    border-bottom: 1px solid var(--cs-border);
}

.cs-table td {
    text-align: left;
    padding: 0.75rem 1rem;
    color: var(--cs-text);
    border-top: 1px solid var(--cs-border);
}

.cs-table tbody tr:first-child td { border-top: none; }

.cs-table .cs-accent {
    color: var(--cs-accent);
    font-weight: 600;
}

/* ---- Bottom page navigation ---- */

.cs-pagenav {
    padding-top: 3rem;
    padding-bottom: 3rem;
    border-top: 1px solid var(--cs-border);
}

.cs-pagenav-inner {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

@media (min-width: 640px) {
    .cs-pagenav-inner {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
}

.cs-pagenav a {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--cs-accent);
    transition: opacity 0.15s ease;
}

.cs-pagenav a:hover { opacity: 0.75; }