/* Case Study Styles — dsm.promo
   Base styles (reset, :root, nav, footer, CTA, animations) are in base.css.
   This file contains ONLY case-study-specific styles + intentional overrides. */

/* Progress bar */
.cs-progress { position: fixed; top: 0; left: 0; z-index: 100; width: 0%; height: 3px; background: linear-gradient(90deg, var(--gold), #D4C896); transition: width 0.15s ease-out; pointer-events: none; }

/* Reading bar */
.cs-reading-bar { position: fixed; top: 64px; left: 0; right: 0; z-index: 49; background: rgba(248,247,244,0.95); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--glass-border); padding: 0.5rem 1.5rem; display: flex; align-items: center; justify-content: space-between; transform: translateY(-100%); transition: transform 0.3s ease; }
.cs-reading-bar.visible { transform: translateY(0); }
.cs-reading-time { font-size: 0.75rem; font-weight: 600; color: var(--gold-text); white-space: nowrap; }
.cs-reading-title { font-size: 0.8rem; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 40%; text-align: center; }
.cs-reading-share { display: flex; gap: 0.5rem; align-items: center; }
.cs-share-icon { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 6px; border: 1px solid var(--glass-border); background: transparent; color: var(--text-muted); text-decoration: none; cursor: pointer; transition: all 0.2s; font-size: 0; }
.cs-share-icon:hover { border-color: var(--gold); color: var(--gold-text); background: rgba(192,178,131,0.06); }
.cs-share-icon svg { width: 14px; height: 14px; }

/* Hero meta */
.cs-hero-meta { display: flex; justify-content: space-between; align-items: center; max-width: 400px; margin: 1rem auto 0; }
.cs-reading-time-badge { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.8rem; font-weight: 600; color: var(--gold-text); background: rgba(192,178,131,0.08); border: 1px solid rgba(192,178,131,0.2); padding: 0.3rem 0.85rem; border-radius: 20px; }
.cs-reading-time-badge svg { width: 14px; height: 14px; }
.cs-hero-share { display: flex; gap: 0.4rem; align-items: center; }
.cs-hero-share .cs-share-icon { width: 30px; height: 30px; border-radius: 8px; }

/* Listen button */
.cs-listen-btn { display: inline-flex; align-items: center; gap: 0.4rem; background: var(--gold-light); border: 1px solid var(--gold-border); color: var(--text); padding: 0.4rem 1rem; border-radius: 20px; font-size: 0.85rem; font-weight: 500; font-family: var(--sans); cursor: pointer; transition: all 0.2s; margin-top: 0.75rem; }
.cs-listen-btn:hover { background: rgba(192,178,131,0.2); }
.cs-listen-btn.playing { background: var(--gold); color: #fff; }
@keyframes pulse-glow { 0%, 100% { box-shadow: 0 0 0 0 rgba(192,178,131,0.4); } 50% { box-shadow: 0 0 12px 4px rgba(192,178,131,0.2); } }
.cs-listen-btn.playing { animation: pulse-glow 2s infinite; }

/* Share section */
.cs-share { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; padding: 1.25rem 1.5rem; background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: 12px; margin: 1.5rem 0; }
.cs-share-label { font-size: 0.85rem; font-weight: 600; color: var(--text); white-space: nowrap; }
.cs-share-buttons { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.cs-share-btn { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.35rem 0.85rem; border-radius: 6px; font-size: 0.78rem; font-weight: 600; font-family: var(--sans); text-decoration: none; border: 1px solid var(--glass-border); background: transparent; color: var(--text-muted); cursor: pointer; transition: all 0.2s; }
.cs-share-btn:hover { border-color: var(--gold); color: var(--gold-text); background: rgba(192,178,131,0.06); }
.cs-share-btn svg { width: 14px; height: 14px; }

/* Voice player */
.cs-voice-player { position: fixed; bottom: 1.5rem; left: 50%; transform: translateX(-50%); z-index: 90; display: none; align-items: center; gap: 0.75rem; padding: 0.6rem 1.25rem; background: rgba(248,247,244,0.95); backdrop-filter: blur(12px); border: 1px solid var(--gold-border); border-radius: 40px; box-shadow: 0 8px 32px rgba(0,0,0,0.12); }
.cs-voice-player.active { display: flex; }
.cs-voice-player button { background: none; border: none; cursor: pointer; color: var(--text); padding: 0.25rem; display: flex; align-items: center; }
.cs-voice-player button:hover { color: var(--gold-text); }
.cs-voice-player button svg { width: 20px; height: 20px; }
.cs-voice-progress { width: 120px; height: 4px; background: var(--glass-border); border-radius: 2px; overflow: hidden; }
.cs-voice-progress-bar { height: 100%; width: 0%; background: var(--gold); transition: width 0.3s; }
.cs-voice-player select { font-family: var(--sans); font-size: 0.75rem; border: 1px solid var(--glass-border); border-radius: 4px; padding: 0.15rem 0.3rem; background: transparent; color: var(--text-muted); }

/* Breadcrumb (case-study variant) */
.breadcrumb { position: relative; z-index: 1; max-width: 900px; margin: 0 auto; padding: 1.5rem 1.5rem 0; }
.breadcrumb a { color: var(--text-muted); text-decoration: none; font-size: 0.85rem; transition: color 0.2s; }
.breadcrumb a:hover { color: var(--text); }
.breadcrumb span { color: var(--text-dim); font-size: 0.85rem; margin: 0 0.5rem; }
.breadcrumb .current { color: var(--gold-text); font-size: 0.85rem; }

/* Hero */
.cs-hero { position: relative; z-index: 1; padding: 3rem 1.5rem 0; text-align: center; max-width: 900px; margin: 0 auto; }
.cs-industry-badge { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--gold-text); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; padding: 0.35rem 1.1rem; border: 1px solid rgba(192,178,131,0.25); background: rgba(192,178,131,0.06); border-radius: 9999px; margin-bottom: 1.5rem; }
.cs-hero h1 { font-family: var(--serif); font-size: 2.4rem; font-weight: 600; line-height: 1.2; margin-bottom: 1rem; }
.cs-hero-metric { font-family: var(--serif); font-size: 3.5rem; font-weight: 700; color: var(--gold-text); margin-bottom: 0.25rem; }
.cs-hero-metric-label { font-size: 1rem; color: var(--text-muted); }
.cs-hero-image { width: 100%; max-width: 900px; margin: 1.5rem auto 0; border-radius: 16px; overflow: hidden; box-shadow: 0 8px 32px rgba(10,22,40,0.15); border: 1px solid var(--glass-border); }
.cs-hero-image img { width: 100%; height: auto; display: block; }

/* Content */
.cs-content { position: relative; z-index: 1; max-width: 900px; margin: 0 auto; padding: 0 1.5rem 4rem; }
.cs-section { margin-bottom: 3rem; }
.cs-section h2 { font-family: var(--serif); font-size: 1.6rem; font-weight: 600; margin-bottom: 1.25rem; padding-bottom: 0.75rem; border-bottom: 1px solid var(--glass-border); }
.cs-section p { font-size: 1rem; color: var(--text-muted); line-height: 1.8; margin-bottom: 1rem; }
.cs-section ul { list-style: none; padding: 0; }
.cs-section ul li { position: relative; padding-left: 1.5rem; margin-bottom: 0.75rem; font-size: 0.95rem; color: var(--text-muted); line-height: 1.6; }
.cs-section ul li::before { content: ''; position: absolute; left: 0; top: 0.55rem; width: 6px; height: 6px; background: var(--gold); border-radius: 50%; }

/* Overview */
.cs-overview { background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: 12px; padding: 2rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1.5rem; margin-bottom: 3rem; }
.cs-overview-item label { display: block; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold-text); margin-bottom: 0.35rem; }
.cs-overview-item span { font-size: 0.95rem; color: var(--text-muted); }

/* Phases */
.cs-phases { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; margin-top: 1.25rem; }
.cs-phase { background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: 12px; padding: 1.5rem; }
.cs-phase-num { font-family: var(--mono); font-size: 0.75rem; font-weight: 700; color: var(--gold-text); letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 0.5rem; }
.cs-phase h3 { font-family: var(--serif); font-size: 1.05rem; font-weight: 600; margin-bottom: 0.5rem; }
.cs-phase p { font-size: 0.85rem; color: var(--text-muted); line-height: 1.6; margin-bottom: 0; }

/* Results */
.cs-results { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; margin-top: 1.25rem; }
.cs-result { background: var(--glass-bg); border: 1px solid rgba(192,178,131,0.15); border-radius: 12px; padding: 1.5rem; text-align: center; }
.cs-result-value { font-family: var(--serif); font-size: 2rem; font-weight: 700; color: var(--gold-text); margin-bottom: 0.35rem; }
.cs-result-label { font-size: 0.8rem; color: var(--text-muted); }

/* Testimonial */
.cs-testimonial { background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: 12px; padding: 2.5rem; margin-top: 1.25rem; position: relative; }
.cs-testimonial::before { content: '\201C'; position: absolute; top: 1rem; left: 1.5rem; font-family: var(--serif); font-size: 4rem; color: rgba(192,178,131,0.2); line-height: 1; }
.cs-testimonial blockquote { font-family: var(--serif); font-size: 1.15rem; font-style: italic; line-height: 1.7; color: var(--text); margin-bottom: 1.25rem; }
.cs-testimonial cite { font-style: normal; font-size: 0.9rem; }
.cs-testimonial cite strong { color: var(--text); display: block; }
.cs-testimonial cite span { color: var(--text-muted); }

/* Tech */
.cs-tech-tags { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1rem; }
.cs-tech-tag { padding: 0.3rem 0.85rem; border-radius: 9999px; font-size: 0.75rem; font-weight: 600; color: var(--gold-text); background: rgba(192,178,131,0.06); border: 1px solid rgba(192,178,131,0.25); }

/* Case study nav */
.cs-nav { display: flex; justify-content: space-between; align-items: center; padding: 2rem 0; border-top: 1px solid var(--glass-border); margin-top: 2rem; }
.cs-nav a { color: var(--text-muted); text-decoration: none; font-size: 0.9rem; font-weight: 500; transition: color 0.2s; }
.cs-nav a:hover { color: var(--gold-text); }
.cs-nav .cs-nav-label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-dim); display: block; margin-bottom: 0.25rem; }

/* CTA overrides for case studies (scoped to .cs-page to avoid base.css duplication) */
.cs-page .cta-section { padding: 4rem 1.5rem 5rem; }
.cs-page .cta-inner { max-width: 620px; }
.cs-page .cta-section h2 { font-size: 2rem; }
.cs-page .cta-buttons { display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap; }
.cs-page .cta-btn { font-size: 1rem; }
.cs-page .cta-btn-secondary { color: var(--text-muted); border-color: var(--glass-border); }
.cs-page .cta-btn-secondary:hover { color: var(--text); border-color: rgba(10,22,40,0.15); background: rgba(192,178,131,0.06); }
.cs-page .cta-btn-secondary svg { stroke: var(--text-muted); }

/* FAQ */
.cs-faq-item { margin-bottom: 1.5rem; padding: 1.25rem 1.5rem; background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: 10px; }
.cs-faq-item h3 { font-family: var(--sans); font-size: 1rem; font-weight: 600; color: var(--text); margin-bottom: 0.5rem; }
.cs-faq-item p { font-size: 0.95rem; color: var(--text-muted); line-height: 1.7; }

/* Section highlight for voice */
.cs-section.voice-active { border-left: 3px solid var(--gold); padding-left: 1rem; transition: all 0.3s; }

/* Research context banner */
.research-context { position: relative; z-index: 1; max-width: 900px; margin: 1rem auto 1rem; padding: 1.25rem 1.5rem; background: rgba(16,185,129,0.04); border: 1px solid rgba(16,185,129,0.15); border-radius: 12px; display: flex; align-items: flex-start; gap: 0.75rem; }
.research-context svg { flex-shrink: 0; width: 20px; height: 20px; stroke: #10b981; margin-top: 0.1rem; }
.research-context p { font-size: 0.9rem; color: var(--text-muted); line-height: 1.7; margin: 0; }
.research-context a { color: var(--gold-text); text-decoration: underline; font-weight: 600; }

/* Before/After Comparison */
.cs-results--comparison { grid-template-columns: repeat(2, 1fr); }
.cs-result--before { border-color: rgba(239,68,68,0.15); }
.cs-result--after { border-color: rgba(16,185,129,0.15); }
.cs-icon--danger { color: #dc2626; font-size: 1.6rem; }
.cs-icon--success { color: #059669; font-size: 1.6rem; }
.cs-callout { border-left: 3px solid var(--gold); padding: 1.5rem 2rem; }
.cs-callout-simple { border-left: 3px solid var(--gold); }

/* Responsive — case-study-specific overrides only */
@media (max-width: 768px) {
    .cs-hero h1 { font-size: 1.85rem; } .cs-hero-metric { font-size: 2.5rem; }
    .cs-phases { grid-template-columns: 1fr; } .cs-results { grid-template-columns: 1fr 1fr; }
    .cs-overview { grid-template-columns: 1fr 1fr; }
    .cs-reading-title { display: none; }
}
@media (max-width: 480px) {
    .cs-hero h1 { font-size: 1.5rem; } .cs-hero-metric { font-size: 2rem; }
    .cs-section h2 { font-size: 1.35rem; } .cs-results { grid-template-columns: 1fr 1fr; gap: 1rem; }
    .cs-result-value { font-size: 1.6rem; } .cs-testimonial { padding: 2rem 1.5rem; }
    .cs-testimonial blockquote { font-size: 1rem; }
    .research-context { margin: 0.75rem 1rem 1rem; padding: 1rem 1.25rem; }
    .research-context p { font-size: 0.85rem; }
}