/* ============================================================
   BlogMaster360 v4.2: Our work (detailed case studies)
   Loads only on the Our work page, after pro.css. Uses the theme tokens.
   ============================================================ */

.work{padding:var(--section) 0;background:var(--bg)}
.work.is-sample .work-list{opacity:.7}

/* ---------- Intro and figures ---------- */
.work-intro{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:40px;align-items:end}
.work-intro .section-head{margin-bottom:0}
.work-figures{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 28px;margin:0}
.work-figures>div{border-top:2px solid var(--ink);padding-top:10px}
.work-figures dt{font-size:.86rem;color:var(--muted);font-weight:600}
.work-figures dd{margin:2px 0 0;font-size:2.3rem;font-weight:780;letter-spacing:-.04em;line-height:1.1;font-variant-numeric:tabular-nums;color:var(--ink)}

/* ---------- Index of case studies ---------- */
.work-index{margin-top:44px}
.work-index ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.work-index a{display:flex;flex-direction:column;gap:4px;height:100%;padding:14px 16px;border:1px solid var(--line);border-radius:var(--radius);background:var(--bg);color:var(--ink);text-decoration:none;transition:border-color .15s,box-shadow .15s}
.work-index a:hover{border-color:var(--ink);box-shadow:var(--shadow-1);color:var(--ink)}
.wi-client{font-weight:720;font-size:1.02rem;letter-spacing:-.015em}
.wi-niche{font-size:.84rem;color:var(--muted);line-height:1.4}
.wi-metric{margin-top:auto;padding-top:6px;font-size:.84rem;color:var(--ink-2);line-height:1.4}
.wi-metric b{color:var(--sky-deep);font-weight:760}

/* ---------- Filters ---------- */
.work-filters{margin-top:28px;display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.wf-btn{font:inherit;font-size:.92rem;font-weight:650;min-height:44px;padding:0 16px;border-radius:999px;border:1px solid var(--line-2);background:var(--bg);color:var(--ink-2);cursor:pointer}
.wf-btn:hover{border-color:var(--ink);color:var(--ink)}
.wf-btn[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.work-count{margin:0 0 0 auto;font-size:.88rem;color:var(--muted);font-weight:600}

/* ---------- One case study ---------- */
.work-list{margin-top:48px;display:grid;gap:80px}
.cs{border-top:2px solid var(--ink);padding-top:34px;scroll-margin-top:100px}
.cs-kicker{margin:0 0 8px;font-size:.88rem;font-weight:650;color:var(--sky-deep)}
.cs-title{margin:0;font-size:clamp(1.6rem,2.6vw,2.25rem);line-height:1.12;max-width:30ch;text-wrap:balance}
.cs-facts{margin:22px 0 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px}
.cs-facts>div{background:var(--bg-2);border:1px solid var(--line);border-radius:12px;padding:11px 14px;min-width:0}
.cs-facts dt{font-size:.8rem;font-weight:600;color:var(--muted)}
.cs-facts dd{margin:2px 0 0;font-weight:700;font-size:.98rem;line-height:1.35;color:var(--ink);overflow-wrap:anywhere}
.cs-facts .is-cost{background:var(--yellow-soft);border-color:#f0d77a}
.cs-facts .is-cost dd{font-size:1.12rem;font-variant-numeric:tabular-nums}

.cs-grid{margin-top:34px;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:48px;align-items:start}
.cs-story{min-width:0}
.cs-story h3{font-size:1.08rem;margin:28px 0 8px}
.cs-story h3:first-child{margin-top:0}
.cs-story>p{color:var(--ink-2);max-width:65ch;margin:0}
.cs-services{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.cs-services li{font-size:.84rem;font-weight:650;color:#0a5aa8;background:var(--sky-soft);border-radius:999px;padding:5px 11px}

.cs-steps{list-style:none;margin:0;padding:0;display:grid;gap:16px;counter-reset:cs-step}
.cs-steps li{counter-increment:cs-step;display:grid;grid-template-columns:34px minmax(0,1fr);column-gap:14px}
.cs-steps li::before{content:counter(cs-step);grid-row:1 / span 2;width:34px;height:34px;border-radius:50%;background:var(--ink);color:#fff;font-weight:720;font-size:.92rem;display:grid;place-items:center}
.cs-steps h4{margin:5px 0 4px;font-size:1rem;line-height:1.3}
.cs-steps p{margin:0;font-size:.95rem;color:var(--ink-2);line-height:1.6}
.cs-steps li>p:only-of-type:first-child{margin-top:6px}

/* Results panel */
.cs-results{background:var(--ink);color:#fff;border-radius:var(--radius-lg);padding:26px;position:sticky;top:100px;min-width:0}
.cs-results h3{color:#fff;font-size:1rem;margin:0 0 12px}
.cs-results h3:not(:first-child){margin-top:24px}
.cs-cover{display:block;width:100%;height:auto;border-radius:12px;margin-bottom:20px}
.cs-figures{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.cs-figures li{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:12px 14px;display:flex;flex-direction:column;gap:3px;min-width:0}
.cs-fig{font-size:1.45rem;font-weight:780;letter-spacing:-.03em;line-height:1.15;font-variant-numeric:tabular-nums;display:flex;align-items:baseline;flex-wrap:wrap;gap:6px;color:#fff}
.cs-fig-from{font-size:1.02rem;font-weight:650;color:#a9b8d3}
.cs-fig-arrow{color:var(--sky);font-size:1rem;font-weight:700}
.cs-fig-label{font-size:.82rem;line-height:1.4;color:#c6d0e2}
.cs-plain{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.cs-plain li{display:flex;gap:8px;font-weight:600;font-size:.95rem;color:#fff}
.cs-plain .bm-ico{color:#5fd39a;margin-top:4px}

.cs-kw-wrap{overflow-x:auto;border:1px solid rgba(255,255,255,.12);border-radius:12px}
.cs-kw{width:100%;border-collapse:collapse;font-size:.9rem}
.cs-kw th,.cs-kw td{padding:9px 12px;text-align:left;border-bottom:1px solid rgba(255,255,255,.1)}
.cs-kw tbody tr:last-child th,.cs-kw tbody tr:last-child td{border-bottom:0}
.cs-kw thead th{font-size:.76rem;font-weight:650;color:#a9b8d3;background:rgba(255,255,255,.04)}
.cs-kw tbody th{font-weight:650;color:#fff}
.cs-kw td{color:#c6d0e2;font-variant-numeric:tabular-nums;white-space:nowrap}
.cs-kw td:last-child,.cs-kw th:last-child{text-align:right}
.cs-pos{display:inline-block;min-width:38px;text-align:center;padding:2px 9px;border-radius:999px;font-weight:760;font-size:.82rem;background:rgba(255,255,255,.14);color:#fff}
.cs-pos.is-top{background:var(--sky-deep)}

.cs-actions{margin-top:24px;display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
.cs-actions .btn{justify-content:center;text-align:center;white-space:normal;line-height:1.35}
.cs-links{margin:0;display:flex;flex-wrap:wrap;gap:6px 18px}
.cs-links a{color:#9fd2ff;font-weight:650;font-size:.92rem;display:inline-flex;align-items:center;gap:5px}
.cs-links a:hover{color:#fff}
.cs-source{margin:14px 0 0;font-size:.8rem;line-height:1.5;color:#a9b8d3}

/* Pages of the report */
.cs-pages{margin-top:44px;padding-top:30px;border-top:1px solid var(--line)}
.cs-pages-head{display:flex;justify-content:space-between;align-items:baseline;gap:8px 24px;flex-wrap:wrap;margin-bottom:22px}
.cs-pages-head h3{margin:0;font-size:1.25rem}
.cs-pages-head p{margin:0;color:var(--muted);font-size:.95rem}
.cs-page-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px 22px}
.cs-page{display:flex;flex-direction:column;gap:12px;min-width:0}
.cs-page.is-feature,.cs-page.is-wide{grid-column:span 2;display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:20px;align-items:start}
.cs-page.is-feature .cs-page-body,.cs-page.is-wide .cs-page-body{padding-top:4px}
.cs-page-thumb{position:relative;display:block;width:100%;padding:0;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--bg-2);cursor:zoom-in;box-shadow:var(--shadow-1)}
.cs-page-thumb img{display:block;width:100%;height:auto;aspect-ratio:720/433;object-fit:cover;transition:transform .25s ease}
.cs-page-thumb:hover img{transform:scale(1.025)}
.cs-page-zoom{position:absolute;right:10px;bottom:10px;width:32px;height:32px;border-radius:9px;background:#fff;color:var(--ink);display:grid;place-items:center;box-shadow:var(--shadow-1)}
.cs-page-body h4{margin:2px 0 6px;font-size:1.02rem;line-height:1.3}
.cs-page-body p{margin:0;font-size:.92rem;line-height:1.6;color:var(--ink-2)}
.cs-page-body .cs-page-num{font-size:.8rem;font-weight:650;color:var(--sky-deep);margin:0}

/* ---------- Full-size page viewer ---------- */
.work-dialog{margin:auto;border:0;padding:0;border-radius:16px;width:min(1200px,96vw);max-width:none;max-height:94vh;background:#fff;box-shadow:var(--shadow-2);color:var(--ink)}
.work-dialog::backdrop{background:rgba(15,23,41,.8)}
.wd-inner{padding:14px 18px 18px;display:flex;flex-direction:column;gap:12px}
.wd-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.wd-kicker{margin:0;font-size:.82rem;font-weight:650;color:var(--sky-deep)}
.wd-head h3{margin:2px 0 0;font-size:1.08rem}
.wd-close,.wd-step{width:42px;height:42px;flex-shrink:0;border-radius:10px;border:1px solid var(--line-2);background:#fff;color:var(--ink);cursor:pointer;display:grid;place-items:center}
.wd-close:hover,.wd-step:hover{background:var(--bg-2);border-color:var(--ink)}
.wd-img{display:block;width:100%;height:auto;max-height:calc(94vh - 230px);object-fit:contain;border-radius:10px;background:var(--bg-2)}
.wd-foot{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px 24px;align-items:start}
.wd-desc{margin:0;font-size:.96rem;line-height:1.6;color:var(--ink-2);max-width:80ch}
.wd-tools{display:flex;flex-direction:column;align-items:flex-end;gap:10px}
.wd-nav{display:flex;align-items:center;gap:8px}
.wd-count{min-width:64px;text-align:center;font-size:.9rem;font-weight:650;color:var(--muted);font-variant-numeric:tabular-nums}

/* ---------- Responsive ---------- */
@media (max-width:1024px){
	.work-intro{grid-template-columns:1fr;gap:28px}
	.cs-grid{grid-template-columns:1fr;gap:32px}
	.cs-results{position:static}
	.cs-page-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
	.cs-page.is-wide{grid-column:auto;display:flex}
}
@media (max-width:768px){
	.work-figures dd{font-size:1.9rem}
	.work-list{gap:60px}
	.cs{padding-top:26px}
	.cs-results{padding:20px}
	.cs-page-grid{grid-template-columns:1fr;gap:26px}
	.cs-page.is-feature,.cs-page.is-wide{grid-column:auto;display:flex}
	.work-count{margin-left:0;width:100%}
	.wd-inner{padding:12px}
	.wd-foot{grid-template-columns:1fr}
	.wd-tools{flex-direction:row;align-items:center;justify-content:space-between}
	.wd-img{max-height:60vh}
}
@media (max-width:420px){
	.cs-figures{grid-template-columns:1fr}
}