/**
 * MCG Featured Case Studies — Elementor widget styles.
 *
 * Ported 1:1 from the original [featured_case_studies] shortcode <style> block
 * so the visual result is byte-for-byte identical. All content is now managed
 * from the Elementor widget controls (no custom post type required).
 */

.fcs-section { padding: 0px 0; background: transparent; color: #ffffff; }
.fcs-section *, .fcs-section *::before, .fcs-section *::after { box-sizing: border-box; }
.fcs-container { width: 100%; max-width: 100%; margin: 0 auto; }

.fcs-carousel { position: relative; }

/* Click-and-drag (mouse) affordance. Touch swipe is handled by Bootstrap. */
.fcs-carousel.fcs-draggable { cursor: grab; }
.fcs-carousel.fcs-dragging {
    cursor: grabbing;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}
.fcs-carousel.fcs-dragging img { pointer-events: none; }

.fcs-carousel .carousel-inner { overflow: hidden; isolation: isolate; }
.fcs-carousel .carousel-item {
    transition: transform .6s ease-in-out;
    padding: 0 12px;
    height: 100%;
}
.fcs-carousel .carousel-item.active,
.fcs-carousel .carousel-item-next,
.fcs-carousel .carousel-item-prev { display: flex; }

.fcs-card {
    background: rgba(1, 85, 132, 0.8);
    border: 1px solid rgba(1, 85, 132, 0.2);
    border-radius: 10px;
    padding: 28px 30px 48px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    color: #ffffff;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    width: 100%;
    height: 100%;
    min-height: 100%;
}
.fcs-card__section { display: flex; flex-direction: column; gap: 10px; }
.fcs-card__pill {
    align-self: flex-start;
    background: #00324E;
    display: inline-block;
    border-radius: 4px;
    padding: 1px 10px;
    margin: 0;
    font-family: "Arsenal", sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 17px;
    line-height: 23px;
    color: #FFFFFF;
}
.fcs-card__text {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 15px;
    line-height: 1.6;
    color: rgba(255,255,255,0.95);
}
.fcs-card__text p { margin: 0 0 10px; }
.fcs-card__text p:last-child { margin-bottom: 0; }
.fcs-card__text ul,
.fcs-card__text ol { margin: 0 0 10px 20px; padding: 0; }
.fcs-card__text a { color: #ffffff; text-decoration: underline; }
.fcs-card__outcome {
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(20px, 1.8vw, 26px);
    font-weight: 700;
    line-height: 1.25;
    color: #ffffff;
    margin-top: 2px;
}
.fcs-card__outcome p { margin: 0 0 8px; }
.fcs-card__outcome p:last-child { margin-bottom: 0; }

/* Restyle Bootstrap carousel indicators to match the dot/pill look.
 * Color is #737373 (matched to the muted gray used elsewhere on the
 * page). Inactive dots use the same hue at lower opacity so they
 * read as "off" without changing the underlying color. */
.fcs-carousel .fcs-indicators {
    position: static;
    margin: 22px 0 0;
    padding: 0;
    justify-content: center;
    gap: 2px;
}
.fcs-carousel .fcs-indicators [data-bs-target] {
    background: rgba(115, 115, 115, 0.5); /* #737373 @ 50% */
    border: 0;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    padding: 0;
    opacity: 1;
    text-indent: 0;
    transition: background-color .2s ease, width .25s ease, opacity .2s ease;
}
.fcs-carousel .fcs-indicators [data-bs-target]:hover { background: rgba(115, 115, 115, 0.8); }
.fcs-carousel .fcs-indicators [data-bs-target].active {
    background: #737373;
    width: 22px;
    border-radius: 5px;
}

@media (max-width: 575.98px) {
    .fcs-card { padding: 22px 20px 38px; }
}