/* case-studies.css — /case-studies page. Each card is a rich engagement
   summary with 2 two-column "Context/Scope" and "Findings/Outcome" rows. */

.cs-hero{padding-top:8rem;max-width:900px}
.cs-hero .section-title{font-size:2.8rem;margin-bottom:.8rem}
.cs-hero .section-subtitle{max-width:720px}

.cs-list{
    display:flex;flex-direction:column;
    gap:2rem;
    max-width:1100px
}
.cs-card{
    position:relative;
    padding:2rem 2.2rem;
    background:var(--bg-surface);
    border:1px solid var(--border);
    border-radius:var(--radius-lg);
    overflow:hidden;
    transition:border-color .25s,transform .25s
}
/* Subtle accent stripe on the left — breaks the flat-card feel and gives
   each case a clear start edge when you scan down the page. */
.cs-card::before{
    content:'';
    position:absolute;top:0;bottom:0;left:0;
    width:3px;
    background:linear-gradient(180deg,var(--accent) 0%,rgba(100,255,218,.2) 100%)
}
.cs-card:hover{
    border-color:var(--border-hover);
    transform:translateY(-2px)
}

.cs-meta{
    display:flex;flex-wrap:wrap;
    gap:.55rem;
    align-items:center;
    margin-bottom:1rem
}
.cs-tag{
    font-family:var(--font-mono);
    font-size:.7rem;
    color:var(--accent);
    background:var(--accent-dim);
    border:1px solid var(--border);
    padding:.22rem .7rem;
    border-radius:var(--radius-pill);
    letter-spacing:.3px
}
/* Duration becomes a pill with a clock glyph so it reads as a fact-tag
   instead of dim margin text. Aligned right to balance the tag cluster. */
.cs-dur{
    display:inline-flex;align-items:center;
    gap:.35rem;
    font-family:var(--font-mono);
    font-size:.7rem;
    color:var(--text-secondary);
    background:var(--bg-elevated);
    border:1px solid var(--border);
    padding:.22rem .65rem .22rem .55rem;
    border-radius:var(--radius-pill);
    letter-spacing:.3px;
    margin-left:auto
}
.cs-dur::before{
    content:'';
    width:10px;height:10px;flex-shrink:0;
    background-color:currentColor;
    -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><polyline points='12 6 12 12 16 14'/></svg>") center/contain no-repeat;
            mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><polyline points='12 6 12 12 16 14'/></svg>") center/contain no-repeat
}
.cs-title{
    font-family:var(--font-display);
    font-size:1.55rem;
    font-weight:800;
    color:var(--text-bright);
    letter-spacing:-.015em;
    line-height:1.2;
    margin-bottom:1.4rem
}
.cs-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:1.8rem;
    margin-bottom:1.4rem
}
.cs-grid:last-child{margin-bottom:0}
/* Section headers promoted to accent color + bigger size, so they read as
   real labels instead of ghost metadata. The accent underbar reinforces
   the hierarchy without adding chrome. */
.cs-grid h3{
    font-family:var(--font-mono);
    font-size:.72rem;
    font-weight:700;
    color:var(--accent);
    text-transform:uppercase;
    letter-spacing:1.4px;
    margin-bottom:.7rem;
    padding-bottom:.4rem;
    border-bottom:1px solid var(--border)
}
.cs-grid p{
    color:var(--text-secondary);
    font-size:.93rem;
    line-height:1.65;
    margin:0
}
.cs-grid ul{
    list-style:none;padding:0;margin:0;
    display:flex;flex-direction:column;gap:.55rem
}
.cs-grid ul li{
    color:var(--text-secondary);
    font-size:.9rem;
    line-height:1.5;
    padding-left:1.2rem;
    position:relative
}
.cs-grid ul li::before{
    content:'→';
    position:absolute;left:0;
    color:var(--accent);
    font-family:var(--font-mono)
}
.cs-grid ul li strong{color:var(--text-bright);font-weight:700}
/* Outcome is the payoff of each case — give it a faint accent panel so it
   visually lands as "the result" and not just more prose. Targets the last
   cell of the second grid (Findings / Outcome layout). */
.cs-card > .cs-grid:last-of-type > div:last-child{
    padding:.85rem 1rem;
    background:var(--accent-dim);
    border-left:2px solid var(--accent);
    border-radius:4px
}
.cs-card > .cs-grid:last-of-type > div:last-child h3{
    border-bottom-color:var(--border-hover)
}

.cs-links{
    display:flex;flex-wrap:wrap;
    gap:1.2rem;
    margin-top:1.4rem;
    padding-top:1.2rem;
    border-top:1px dashed var(--border)
}
.cs-links a{
    color:var(--accent);
    font-family:var(--font-mono);
    font-size:.78rem;
    text-decoration:none
}
.cs-links a:hover{text-decoration:underline}

.cs-cta{padding-bottom:5rem}
/* The bottom contact-box reuses .svc-cta-row (defined in services.css, not
   loaded here). Replicate the essentials so the two buttons sit in a neat
   centered row instead of flush-left under the subtitle. */
.cs-cta .svc-cta-row{
    display:flex;flex-wrap:wrap;
    gap:.8rem;
    justify-content:center;
    margin-top:1.6rem
}

@media(max-width:760px){
    .cs-card{padding:1.5rem}
    .cs-title{font-size:1.25rem}
    .cs-grid{grid-template-columns:1fr;gap:1.2rem}
}