/* =====================================================
   CASE STUDIES COMPACT OVERRIDES
   Applied site-wide to all CaseStudy/* pages (Index grid
   + individual detail pages) to reduce vertical padding
   and tighten typography so content fits above the fold
   with minimal scrolling.
   ===================================================== */

/* --- Hero (shared by index grid + detail pages) --- */
.hero-section {
    padding: 70px 0 32px !important;
    min-height: 0 !important;
}

.hero-section h1 {
    font-size: clamp(1.8rem, 3.4vw, 2.6rem) !important;
    margin-bottom: 10px !important;
    line-height: 1.2 !important;
}

.hero-badge,
.hero-section .hero-badge {
    padding: 6px 18px !important;
    font-size: 0.72rem !important;
    margin-bottom: 12px !important;
    letter-spacing: 1.2px !important;
}

.hero-subtitle {
    font-size: 1rem !important;
    margin-bottom: 16px !important;
    line-height: 1.5 !important;
}

/* Breadcrumb hidden on all case study pages */
.hero-section .breadcrumb,
.hero-section nav.breadcrumb {
    display: none !important;
}

/* --- Generic section spacing --- */
.casestudy-intro-section,
.casestudy-grid-section,
.why-choose-section,
.client-overview-section,
.modules-section,
.research-section,
.results-section,
.cta-section {
    padding: 32px 0 !important;
}

/* --- Section labels / titles / descriptions --- */
.section-label {
    margin-bottom: 10px !important;
    gap: 10px !important;
}

.label-line {
    width: 28px !important;
    height: 2px !important;
}

.label-text {
    font-size: 0.75rem !important;
    letter-spacing: 1.4px !important;
}

.section-title {
    font-size: clamp(1.4rem, 2.8vw, 1.9rem) !important;
    margin-bottom: 12px !important;
    line-height: 1.25 !important;
}

.section-description {
    font-size: 0.95rem !important;
    line-height: 1.55 !important;
    margin-bottom: 14px !important;
}

.section-header {
    margin-bottom: 22px !important;
}

.section-subtitle {
    font-size: 0.95rem !important;
}

.section-badge {
    padding: 5px 16px !important;
    font-size: 0.75rem !important;
    margin-bottom: 10px !important;
}

/* ====================================================
   INDEX (grid) SPECIFIC — case-study.css
   ==================================================== */

/* Intro section */
.intro-badge {
    padding: 5px 14px !important;
    font-size: 0.75rem !important;
}

.intro-features {
    gap: 10px !important;
    margin-top: 14px !important;
}

.intro-feature {
    padding: 10px 12px !important;
    gap: 10px !important;
}

.intro-feature h4,
.intro-feature h3 {
    font-size: 0.98rem !important;
    margin-bottom: 3px !important;
}

.intro-feature p {
    font-size: 0.85rem !important;
    line-height: 1.45 !important;
}

/* Case study cards — compact 3-column grid */
.casestudy-grid {
    gap: 14px !important;
}

.casestudy-card {
    border-radius: 12px !important;
}

/* Shrink the image/placeholder area so the card is much shorter */
.casestudy-image {
    height: 130px !important;
}

.casestudy-image img {
    object-fit: contain !important;
    padding: 12px !important;
    background: #f8fafc !important;
}

.casestudy-icon-placeholder {
    font-size: 2.4rem !important;
}

.casestudy-content {
    padding: 12px 14px !important;
}

.casestudy-number {
    font-size: 1.6rem !important;
}

.casestudy-title {
    font-size: 0.98rem !important;
    margin-bottom: 4px !important;
}

.casestudy-description {
    font-size: 0.82rem !important;
    line-height: 1.45 !important;
    margin-bottom: 8px !important;
    /* Truncate to 2 lines so cards stay aligned */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.casestudy-tags {
    gap: 5px !important;
    margin-bottom: 8px !important;
}

.tag {
    padding: 2px 8px !important;
    font-size: 0.7rem !important;
}

.casestudy-link {
    font-size: 0.85rem !important;
}

.view-btn {
    font-size: 0.9rem !important;
    width: 38px !important;
    height: 38px !important;
}

/* Why-choose section */
.why-features {
    gap: 12px !important;
}

.why-feature {
    padding: 14px !important;
    gap: 12px !important;
}

.why-icon {
    width: 44px !important;
    height: 44px !important;
    border-radius: 12px !important;
}

.why-icon i {
    font-size: 1.15rem !important;
}

.why-feature h3,
.why-feature h4 {
    font-size: 1rem !important;
    margin-bottom: 4px !important;
}

.why-feature p {
    font-size: 0.88rem !important;
    line-height: 1.5 !important;
}

.why-stats {
    gap: 12px !important;
    margin-top: 18px !important;
}

.stat-card {
    padding: 14px !important;
    gap: 10px !important;
}

.stat-icon {
    width: 40px !important;
    height: 40px !important;
}

.stat-icon i {
    font-size: 1.2rem !important;
}

.stat-number {
    font-size: 1.6rem !important;
}

.stat-label {
    font-size: 0.85rem !important;
}

/* ====================================================
   DETAIL SPECIFIC — case-study-detail.css
   ==================================================== */

/* Client overview */
.client-logo-wrapper {
    padding: 14px !important;
}

.client-logo {
    max-height: 60px !important;
}

.client-meta h3 {
    font-size: 1.05rem !important;
}

.client-meta p {
    font-size: 0.85rem !important;
}

.client-icon-placeholder i {
    font-size: 2rem !important;
}

.client-info {
    padding: 14px !important;
}

/* Service highlights (bullet list) */
.service-highlights {
    gap: 10px !important;
    margin-top: 14px !important;
}

.highlight-item {
    padding: 10px 12px !important;
    font-size: 0.9rem !important;
    line-height: 1.5 !important;
    gap: 10px !important;
}

.highlight-item i {
    font-size: 0.92rem !important;
}

/* Modules grid */
.modules-grid {
    gap: 12px !important;
}

.module-card {
    padding: 14px !important;
    border-radius: 14px !important;
}

.module-icon {
    width: 44px !important;
    height: 44px !important;
    border-radius: 12px !important;
    margin-bottom: 10px !important;
}

.module-icon i {
    font-size: 1.2rem !important;
}

.module-card h3,
.module-card h4 {
    font-size: 1rem !important;
    margin-bottom: 4px !important;
}

.module-card p {
    font-size: 0.85rem !important;
    line-height: 1.5 !important;
}

/* Research cards */
.research-content {
    gap: 14px !important;
}

.research-card {
    padding: 16px !important;
    border-radius: 14px !important;
}

.research-header {
    gap: 12px !important;
    margin-bottom: 10px !important;
}

.research-icon {
    width: 44px !important;
    height: 44px !important;
}

.research-icon i {
    font-size: 1.1rem !important;
}

.research-header h3 {
    font-size: 1.05rem !important;
}

.research-items {
    gap: 8px !important;
}

.research-item {
    padding: 8px 10px !important;
    font-size: 0.85rem !important;
    line-height: 1.5 !important;
}

/* Results / metric cards */
.results-grid {
    gap: 12px !important;
}

.result-card {
    padding: 16px !important;
    border-radius: 14px !important;
}

.result-icon {
    width: 44px !important;
    height: 44px !important;
    margin-bottom: 8px !important;
}

.result-icon i {
    font-size: 1.3rem !important;
}

.result-number {
    font-size: 2rem !important;
    margin-bottom: 4px !important;
}

.result-label {
    font-size: 0.88rem !important;
    line-height: 1.4 !important;
}

/* ====================================================
   CTA (shared)
   ==================================================== */
.cta-title {
    font-size: clamp(1.4rem, 2.8vw, 2rem) !important;
    margin-bottom: 8px !important;
}

.cta-description {
    font-size: 0.95rem !important;
    line-height: 1.5 !important;
    margin-bottom: 0 !important;
}

.btn-cta {
    padding: 11px 26px !important;
    font-size: 0.95rem !important;
    gap: 8px !important;
}

/* ====================================================
   Responsive
   ==================================================== */
@media (max-width: 992px) {
    .hero-section {
        padding: 60px 0 26px !important;
    }

    .casestudy-intro-section,
    .casestudy-grid-section,
    .why-choose-section,
    .client-overview-section,
    .modules-section,
    .research-section,
    .results-section,
    .cta-section {
        padding: 26px 0 !important;
    }
}

@media (max-width: 768px) {
    .hero-section {
        padding: 52px 0 22px !important;
    }

    .casestudy-content,
    .module-card,
    .research-card,
    .result-card,
    .client-info,
    .why-feature,
    .stat-card {
        padding: 12px !important;
    }
}