/**
 * MCG Case Studies List — Elementor widget / [case_studies_list] shortcode.
 *
 * Renders the Case Studies page boxes dynamically from the `case_study` post
 * type, replicating the look & feel of the original hand-built Elementor
 * containers (dark box, blue section labels, serif title, "See Details" button).
 */

.mcg-cs-list { display: flex; flex-direction: column; gap: 24px; width: 100%; }
.mcg-cs-list *, .mcg-cs-list *::before, .mcg-cs-list *::after { box-sizing: border-box; }

.mcg-cs-box {
    background: #232323;
    border: 1px solid #3a3a3a;
    border-radius: 10px;
    padding: 34px 38px;
    color: #ffffff;
}

.mcg-cs-box__title {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.3;
    color: #ffffff;
    margin: 0 0 24px;
}

.mcg-cs-box__section { margin: 0 0 26px; }
.mcg-cs-box__section:last-of-type { margin-bottom: 0; }

.mcg-cs-box__label {
    font-family: "Arsenal", sans-serif;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0.2px;
    color: #3D9BE9;
    margin: 0 0 12px;
}

.mcg-cs-box__text {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 15px;
    line-height: 1.75;
    color: #e0e0e0;
}
.mcg-cs-box__text p { margin: 0 0 12px; }
.mcg-cs-box__text p:last-child { margin-bottom: 0; }
.mcg-cs-box__text a { color: #3D9BE9; text-decoration: underline; }

.mcg-cs-box__quote {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 17px;
    line-height: 1.85;
    color: #ffffff;
    margin: 28px 0 24px;
    padding: 18px 24px;
    border-left: 4px solid #3D9BE9;
    background: rgba(61, 155, 233, 0.06);
    border-radius: 4px;
}
.mcg-cs-box__quote p {
    margin: 0;
    font-style: italic;
    font-size: 18px;
}
.mcg-cs-box__quote-author {
    display: block;
    margin-top: 12px;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 700;
    font-style: normal;
    color: #3D9BE9;
}

.mcg-cs-box__btn {
    display: inline-block;
    background: #0174B4;
    color: #ffffff;
    /* Match the theme's button text (Arsenal, normal weight). */
    font-family: "Arsenal", sans-serif;
    font-style: normal;
    font-weight: normal;
    font-size: 18px;
    line-height: 24px;
    padding: 12px 32px;
    border-radius: 5px;
    text-decoration: none;
    transition: background .2s ease, color .2s ease;
}
.mcg-cs-box__btn:hover { background: #015a8c; color: #ffffff; }

@media (max-width: 575.98px) {
    .mcg-cs-box { padding: 24px 22px; }
    .mcg-cs-box__title { font-size: 21px; margin-bottom: 18px; }
    .mcg-cs-box__section { margin-bottom: 20px; }
    .mcg-cs-box__btn { font-size: 16px; padding: 12px 26px; }
}

/* ---- Fade-in-up entrance (enabled by JS via .mcg-cs-animate) ---------------
 * Uses only opacity + transform (GPU-composited) so revealing a box never
 * reflows the layout — no jerk. If JS is off, the .mcg-cs-animate class is
 * never added, so boxes are visible by default. */
.mcg-cs-list.mcg-cs-animate .mcg-cs-box {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .6s ease, transform .6s ease;
    will-change: opacity, transform;
}
.mcg-cs-list.mcg-cs-animate .mcg-cs-box.mcg-cs-inview {
    opacity: 1;
    transform: none;
}
@media (prefers-reduced-motion: reduce) {
    .mcg-cs-list.mcg-cs-animate .mcg-cs-box {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}