/* ==============================================================
 * lazarjovovic.com — work.css
 * Styles for the Work / case studies page. After site.css + page.css.
 * ============================================================== */

.work-page{padding:170px 0 60px}

/* ——— Hero ——— */
.wrk-hero{margin-bottom:clamp(50px,8vw,90px);max-width:880px}
.wrk-hero-text .kicker{margin-bottom:22px}
.wrk-hero-text h1{font-family:var(--display);font-weight:500;font-size:clamp(2.5rem,5.4vw,4.4rem);letter-spacing:-.025em;line-height:1.0;margin-bottom:28px}
.wrk-hero-text h1 em{font-style:italic;color:var(--accent)}
.wrk-lead{color:var(--ink-soft);font-size:1.15rem;line-height:1.6;max-width:60ch}

/* ——— Case study cards ——— */
.wrk-list{display:flex;flex-direction:column}
.wrk-card{display:grid;grid-template-columns:.32fr 1.68fr;gap:clamp(24px,5vw,70px);padding:clamp(40px,6vw,70px) 0;border-top:1px solid var(--line)}
.wrk-card:last-child{border-bottom:1px solid var(--line)}

.wrk-card-index{display:flex;flex-direction:column;gap:18px}
.wrk-num{font-family:var(--display);font-size:clamp(2.4rem,4vw,3.4rem);font-weight:500;color:var(--accent);line-height:1;letter-spacing:-.02em}
.wrk-meta{display:flex;flex-direction:column;gap:6px;font-family:var(--mono);font-size:.74rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft)}
.wrk-industry{color:var(--ink)}

.wrk-card-body h2{font-family:var(--display);font-weight:500;font-size:clamp(1.7rem,3.2vw,2.5rem);letter-spacing:-.02em;line-height:1.06;margin-bottom:14px}
.wrk-tagline{font-family:var(--display);font-style:italic;font-size:clamp(1.05rem,1.8vw,1.3rem);color:var(--accent);margin-bottom:24px;line-height:1.3}
.wrk-prose{max-width:64ch}
.wrk-prose p{color:var(--ink-soft);font-size:1.05rem;line-height:1.65;margin-bottom:16px}

.wrk-highlights{list-style:none;margin:26px 0 0;display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);max-width:560px}
.wrk-highlights li{background:var(--paper);padding:16px 20px;font-size:.95rem;color:var(--ink-soft)}
.wrk-highlights strong{display:block;font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin-bottom:5px;font-weight:500}

.wrk-tags{margin-top:26px;display:flex;gap:10px;flex-wrap:wrap}
.wrk-tag{font-family:var(--mono);font-size:.74rem;letter-spacing:.04em;padding:7px 14px;border:1px solid var(--line);border-radius:999px;color:var(--ink-soft)}

/* ——— CTA ——— */
.wrk-cta{text-align:center;padding:clamp(70px,10vw,130px) 0 40px;margin-top:clamp(50px,7vw,90px);border-top:1px solid var(--line)}
.wrk-cta h2{font-family:var(--display);font-weight:500;font-size:clamp(2rem,4.6vw,3.4rem);letter-spacing:-.02em;line-height:1.05;margin-bottom:22px;max-width:20ch;margin-inline:auto}
.wrk-cta h2 em{font-style:italic;color:var(--accent)}
.wrk-cta p{color:var(--ink-soft);font-size:1.08rem;max-width:50ch;margin:0 auto 32px}

/* ——— Mobile ——— */
@media(max-width:880px){
    .work-page{padding:130px 0 40px}
    .wrk-card{grid-template-columns:1fr;gap:24px}
    .wrk-card-index{flex-direction:row;align-items:baseline;gap:20px}
    .wrk-highlights{grid-template-columns:1fr;max-width:none}
}