/* =========================================
   3. CASE STUDY DETAIL PAGE (case-study.css)
   ========================================= */

.case-study-detail .container { max-width: 800px; }
.cs-header { padding-top: 20px; padding-bottom: 60px; }

.cs-hero-media, .cs-image-block { width: 50%; max-width: 150px; margin: 32px auto 40px; display: flex; justify-content: center; }
.cs-inline-img, .cs-image-block img { width: 100%; height: auto; border-radius: 6px; border: 1px solid rgba(255, 255, 255, 0.08); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5); display: block; margin-top: 0; opacity: 0.95; }

.back-link { display: inline-block; margin-bottom: 30px; font-size: 0.9rem; font-weight: 600; color: var(--accent); text-decoration: none; opacity: 0.8; transition: opacity 0.3s; }
.back-link:hover { opacity: 1; transform: translateX(-5px); }

.cs-title { font-size: clamp(2.5rem, 5vw, 4rem); margin-bottom: 10px; line-height: 1.1; }
.cs-subtitle { font-size: 1.25rem; opacity: 0.7; margin-bottom: 40px; font-weight: 300; }

.cs-meta-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 20px; margin-top: 40px; padding-top: 30px; border-top: 1px solid rgba(255, 255, 255, 0.1); }
.meta-item { display: flex; flex-direction: column; }
.meta-item .label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 1px; color: var(--accent); margin-bottom: 8px; font-weight: 700; }

.cs-content { padding-bottom: 100px; }
.cs-block { margin-bottom: 60px; }
.cs-block h2 { font-size: 2rem; margin-bottom: 25px; padding-bottom: 15px; border-bottom: 1px solid var(--accent); display: inline-block; }
.cs-block h3 { font-size: 1.4rem; margin-bottom: 15px; color: #fff; }
.cs-block p { font-size: 1.1rem; line-height: 1.7; margin-bottom: 20px; opacity: 0.9; }

.cs-list li { margin-bottom: 15px; padding-left: 10px; line-height: 1.6; }
.cs-simple-list { list-style: none; padding: 0; }
.cs-simple-list li { margin-bottom: 10px; padding-left: 15px; border-left: 2px solid var(--accent); }

.cs-card { background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.08); padding: 40px; border-radius: 12px; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }

.cs-quote {
    font-size: 1.5rem;
    font-style: italic;
    color: #fff;
    border-left: 4px solid var(--accent); /* Brändin kultainen viiva vasemmalla */
    padding-left: 30px;
    margin: 40px 0;
    line-height: 1.5;
}
.cs-simple-header { padding: 40px 0 20px; width: 100%; }

.cs-back-link { display: inline-flex; align-items: center; gap: 10px; font-size: 1rem; font-weight: 600; color: #ffffff; text-decoration: none; opacity: 0.7; transition: all 0.3s ease; }
.cs-back-link:hover { opacity: 1; color: var(--accent); transform: translateX(-5px); }

/* --- RESPONSIVE CASE STUDY --- */
@media (max-width: 768px) {
    .two-col { grid-template-columns: 1fr; gap: 30px; }
    .cs-card { padding: 25px; }
    .cs-header { padding-top: 100px; }
}