/**
    * Ribbon Quote Fixes
    * This CSS fixes the ribbon design to handle long quotes better
    */

    /* Add responsive constraints to the ribbon decoration */
    .ribbon-decoration {
        max-width: 657px !important; /* Match the max-width from the SCSS */
        width: 41% !important; /* Match the width percentage from the SCSS */
    }

    /* For large screens, prevent the ribbon from growing too large */
    @media screen and (min-width: 1400px) {
        .ribbon-decoration {
            width: 527px !important; /* Fixed width at large screens */
            max-width: 657px !important;
        }
    }

    /* Tablet adjustments (768px to 1199px) */
    @media screen and (max-width: 1199px) and (min-width: 768px) {
        .ribbon-decoration {
            width: 476px !important; /* Match the min-width from the SCSS */
            max-width: 476px !important;
            bottom: 65% !important; /* Match the positioning from the SCSS */
        }
        
        /* Adjust the quote content for smaller space */
        .ribbon-decoration .quotes-carousel .quote-slide .quote-content {
            margin-left: 30px !important; /* Reduce margin for smaller screens */
        }
        
        /* Reduce font size slightly */
        .ribbon-decoration .quotes-carousel .quote-slide .quote-content .quote-text {
            font-size: 14px !important;
        }
    }

    /* Mobile adjustments - hide completely as per original design */
    @media screen and (max-width: 767px) {
        .ribbon-decoration {
            display: none !important; /* Complete hide on mobile */
        }
    }

    /* Make the ribbon height flexible but maintain original positioning */
    .ribbon-decoration .ribbon-main {
        min-height: 196px !important;
        width: calc(100% - -22px) !important; /* Ensure the width is correct */
        position: relative !important; /* Needed for the ::after pseudo-element */
        z-index: 1; /* Ensure proper stacking */
        background-color: var(--Primary, #3fb6e8) !important; /* Ensure background color is consistent */
    }

    /* Style the ribbon-end with an image instead of clip-path */
    .ribbon-decoration .ribbon-end,
    #benefits-of-being-a-member .ribbon-decoration .ribbon-end {
        position: absolute !important;
        left: calc(100% - -20px) !important;
        top: 0 !important;
        width: 119px !important;
        height: 100% !important; /* Make it match the height of ribbon-main */
        background-image: url('../images/Vector%2010.png') !important;
        background-size: 101px 100% !important; /* Width of 34px, height scales to 100% */
        background-repeat: no-repeat !important;
        background-position: left top !important;
        background-color: transparent !important; /* Remove any background color */
        clip-path: none !important; /* Remove any clip-path */
        z-index: 1 !important; /* Ensure it appears above other elements */
    }

    /* Add padding to quote slides for better spacing */
    .ribbon-decoration .quotes-carousel .quote-slide {
        padding: 25px 0 15px;
        display: flex !important;
        align-items: center !important;
        height: 100% !important;
    }

    /* Structure the quote content to maintain consistent layout */
    .ribbon-decoration .quotes-carousel .quote-slide .quote-content {
        height: auto !important;
        position: relative !important;
        padding-bottom: 40px !important; /* Create space for the author at bottom */
    }

    /* Add text truncation with ellipsis for very long quotes */
    .ribbon-decoration .quotes-carousel .quote-slide .quote-content .quote-text {
        display: -webkit-box;
        -webkit-line-clamp: 4; /* Limit to 4 lines to ensure consistent height */
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        max-height: none;
        margin-bottom: 15px !important;
    }

    /* Position the author to align with navigation arrows */
    .ribbon-decoration .quotes-carousel .quote-slide .quote-content .quote-author {
        position: absolute !important;
        bottom: 10px !important; /* Adjust to align with navigation */
        left: 0 !important;
        margin-bottom: 0 !important;
        line-height: 1.2 !important; /* Ensure consistent line height */
    }

    /* Ensure the navigation arrows are properly positioned and aligned with author */
    .ribbon-decoration .quote-navigation {
        top: 81% !important; /* Restore the original top positioning */
        transform: translateY(-50%) !important; /* Keep the vertical centering */
        bottom: auto !important; /* Remove bottom positioning */
        right: 12px !important; /* Maintain right positioning */
    }