/* ============================================================
   csl-cards.css
   Enlarges, centers, and evenly spaces all visualizer context
   blocks (cards, grids, process steps) across the CSL site.
   Loaded after all inline styles to override gracefully.
   ============================================================ */

/* ── Section containers: use more screen width ── */
.section,
.clients-inner,
.main,
.paths,
.pipeline,
.timeline-section,
.deliverables {
    max-width: 1300px !important;
}

/* ── Card grids: even, generous gaps ── */
/* NOTE: .pipeline-track intentionally excluded - its nodes are connected by a line and need gap:0 */
.services-grid,
.clients-grid,
.process-steps,
.values-grid,
.quick-links-row,
.expertise-grid,
.paths,
.deliv-grid,
.catalog-grid,
.turn,
.tiers,
.why,
.steps {
    gap: 2rem !important;
}

/* ── INDEX: Service cards ── */
.service-card {
    padding: 2.5rem 2rem !important;
    text-align: center !important;
}
.service-icon {
    width: 64px !important;
    height: 64px !important;
    font-size: 1.5rem !important;
    margin-left: auto !important;
    margin-right: auto !important;
}
.service-card h3 {
    font-size: 1.15rem !important;
}
.service-card p {
    font-size: 0.92rem !important;
    line-height: 1.65 !important;
}
.service-price {
    font-size: 0.92rem !important;
}

/* ── INDEX: Client cards ── */
.client-card {
    padding: 2rem 1.5rem !important;
    text-align: center !important;
}
.client-card i {
    font-size: 2.2rem !important;
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
}
.client-card h4 {
    font-size: 1rem !important;
}
.client-card p {
    font-size: 0.85rem !important;
}

/* ── INDEX: Process steps ── */
.step {
    text-align: center !important;
    align-items: center !important;
}
.step-num {
    width: 48px !important;
    height: 48px !important;
    font-size: 1.05rem !important;
}
.step h4 {
    font-size: 1.05rem !important;
}
.step p {
    font-size: 0.9rem !important;
}

/* ── ABOUT: Values grid ── */
.value-card {
    padding: 2.25rem 2rem !important;
    text-align: center !important;
}
.value-icon {
    width: 56px !important;
    height: 56px !important;
    font-size: 1.35rem !important;
    margin-left: auto !important;
    margin-right: auto !important;
}
.value-card h4 {
    font-size: 1.05rem !important;
}
.value-card p {
    font-size: 0.88rem !important;
}

/* ── ABOUT: Quick links ── */
.quick-link-card {
    padding: 2rem !important;
}
.quick-link-card i {
    font-size: 1.7rem !important;
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
}
.quick-link-card h4 {
    font-size: 1rem !important;
}
.quick-link-card p {
    font-size: 0.83rem !important;
}

/* ── PRICING: Path cards ── */
.path {
    padding: 2.75rem 2.25rem 2.25rem !important;
}
.path-icon {
    width: 72px !important;
    height: 72px !important;
    font-size: 1.75rem !important;
}
.path h2 {
    font-size: 1.85rem !important;
}
.path-desc {
    font-size: 0.96rem !important;
}
.path-fits li {
    font-size: 0.82rem !important;
    padding: 0.35rem 0.8rem !important;
}
.path-price-range {
    font-size: 1.45rem !important;
}

/* ── PROCESS: Pipeline nodes ── */
.node-icon {
    width: 108px !important;
    height: 108px !important;
    font-size: 2.2rem !important;
}
.node-title {
    font-size: 1.1rem !important;
}
.node-desc {
    font-size: 0.85rem !important;
}

/* ── Deliverable cards (process page) ── */
.deliv-card {
    padding: 1.75rem !important;
}
.deliv-icon {
    width: 52px !important;
    height: 52px !important;
    font-size: 1.25rem !important;
}
.deliv-text strong {
    font-size: 0.98rem !important;
}
.deliv-text span {
    font-size: 0.82rem !important;
}

/* ── About: Capability/Expertise cards ── */
.cap-card {
    padding: 1.75rem !important;
}
.cap-icon {
    width: 50px !important;
    height: 50px !important;
    font-size: 1.2rem !important;
}
.cap-head h4 {
    font-size: 1rem !important;
}
.cap-card > p {
    font-size: 0.84rem !important;
}

/* ── Mobile: reduce oversized padding on small screens ── */
@media (max-width: 768px) {
    .service-card,
    .client-card,
    .value-card,
    .quick-link-card,
    .path,
    .cap-card,
    .deliv-card {
        padding: 1.5rem !important;
    }
    .node-icon {
        width: 80px !important;
        height: 80px !important;
        font-size: 1.6rem !important;
    }
    .path-icon {
        width: 56px !important;
        height: 56px !important;
        font-size: 1.35rem !important;
    }
    .service-icon,
    .value-icon {
        width: 48px !important;
        height: 48px !important;
        font-size: 1.15rem !important;
    }
}