/* Case study template — single-case-study.php. Layers on homepage.css + post.css (header/footer/CTA banner/typography already loaded). */

/* ---------- hero ---------- */
.cs-hero { position: relative; padding: 96px 32px 84px; background: #0e1620 center/cover no-repeat; }
.cs-hero::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14,22,32,0.86), rgba(14,22,32,0.72) 55%, rgba(14,22,32,0.92)); }
.cs-hero__inner { position: relative; max-width: 780px; margin: 0 auto; text-align: center; }
.cs-hero .post-badge { background: rgba(255,255,255,0.14); color: #ffffff; }
.cs-hero h1 { font-size: clamp(32px,4.4vw,52px); line-height: 1.08; letter-spacing: -0.025em; font-weight: 800; color: #ffffff; margin: 22px 0 0; }
.cs-hero__intro { font-size: 18px; line-height: 1.6; color: rgba(255,255,255,0.78); margin: 22px 0 0; }

/* ---------- headline stat ---------- */
.cs-stat { max-width: 780px; margin: 0 auto; padding: 56px 32px 48px; text-align: center; border-bottom: 1px solid rgba(14,22,32,0.1); }
.cs-stat__value { font-size: clamp(26px,3vw,36px); line-height: 1.15; letter-spacing: -0.02em; font-weight: 800; color: #35a8e0; }
.cs-stat__caption { font-size: 16px; color: #66727f; margin-top: 8px; font-weight: 600; }

/* ---------- outcome / challenge / about ---------- */
.cs-body { display: grid; grid-template-columns: minmax(0,1fr) 320px; gap: 64px; padding: 60px 32px 20px; max-width: 1240px; }
.cs-body__main.post-content { padding-top: 0; }
.cs-body__main.post-content > h2:first-child { margin-top: 0; }

.cs-about { padding: 30px 30px 34px; border-radius: 20px; background: #f7fafc; border: 1px solid rgba(14,22,32,0.1); align-self: start; }
.cs-about__title { font-size: 19px; font-weight: 800; letter-spacing: -0.01em; color: #0e1620; margin-bottom: 14px; }
.cs-about__intro p { font-size: 16px; line-height: 1.6; color: #4d5a67; margin: 0 0 20px; }
.cs-about__facts { display: flex; flex-direction: column; gap: 14px; margin: 0 0 26px; padding-top: 20px; border-top: 1px solid rgba(14,22,32,0.1); }
.cs-about__fact dt { font-size: 11px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: #66727f; margin-bottom: 4px; }
.cs-about__fact dd { font-size: 16px; font-weight: 700; color: #0b6f9e; margin: 0; }
.cs-about__cta .btn { width: 100%; text-align: center; justify-content: center; }

/* ---------- pull quotes ---------- */
.cs-quote { padding: 76px 32px; text-align: center; background: #0e1620; }
.cs-quote--alt { background: #f7fafc; }
.cs-quote__mark { font-size: 60px; line-height: 1; font-weight: 800; color: #35a8e0; margin-bottom: 8px; }
.cs-quote__text { max-width: 760px; margin: 0 auto; font-size: clamp(21px,2.4vw,28px); line-height: 1.4; font-weight: 700; letter-spacing: -0.01em; color: #ffffff; }
.cs-quote--alt .cs-quote__text { color: #0e1620; }
.cs-quote__attr { margin-top: 22px; font-size: 14px; font-weight: 700; letter-spacing: 0.02em; color: #35a8e0; }
.cs-quote--alt .cs-quote__attr { color: #0b6f9e; }

/* ---------- approach ---------- */
.cs-approach { padding: 76px 32px; max-width: 1240px; }
.cs-approach__title { text-align: center; font-size: clamp(24px,2.8vw,32px); font-weight: 800; letter-spacing: -0.02em; color: #0e1620; margin: 0 0 40px; }
.cs-approach__grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(240px,1fr)); gap: 20px; }
.cs-approach__step { padding: 30px 26px; border-radius: 18px; border: 1px solid rgba(14,22,32,0.1); background: #ffffff; }
.cs-approach__num { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: #eaf5fc; color: #0b6f9e; font-size: 13px; font-weight: 800; margin-bottom: 16px; }
.cs-approach__step h3 { font-size: 18px; font-weight: 800; letter-spacing: -0.01em; color: #0e1620; margin: 0 0 8px; }
.cs-approach__step p { font-size: 15px; line-height: 1.55; color: #66727f; margin: 0; }

/* ---------- related case studies ---------- */
.cs-related { background: #f7fafc; border-top: 1px solid rgba(14,22,32,0.1); }
.cs-related .section-inner { padding: 76px 32px 84px; max-width: 1240px; }
.cs-related h2 { font-size: clamp(24px,2.6vw,32px); line-height: 1.1; letter-spacing: -0.02em; font-weight: 800; margin: 0 0 32px; color: #0e1620; }
.cs-related__grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px; }

/* ---------- responsive ---------- */
@media (max-width: 980px) {
	.cs-body { grid-template-columns: 1fr; }
	.cs-approach__grid { grid-template-columns: 1fr 1fr; }
	.cs-related__grid { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
	.cs-approach__grid { grid-template-columns: 1fr; }
}