/* Widget Variables */
.ehs-suite-widget {
    --border: #E0EBF7;
    --blue-dark: #012751;
    --text-body: #2D4A6B;
    --card-bg: #ffffff;
    
    /* Ensure widget takes full height of the column/container */
    height: 100%;
}

/* Card Base Styles */
.ehs-suite-widget .suite-card {
    background: var(--card-bg);
    border: 1.5px solid var(--border);
    /* Border radius handled by widget settings */
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    
    /* Equal height layout */
    display: flex;
    flex-direction: column;
    height: 100%;
    
    position: relative;
    overflow: hidden;
    width: 100%; /* Full width of container column */
}

/* Hover Effects (Only if enabled) */
.ehs-suite-widget .suite-card.has-anim:hover {
    box-shadow: 0 14px 40px rgba(1, 39, 81, 0.11);
    transform: translateY(-4px);
    border-color: var(--sc-color, #0468D3);
}

/* Top-left gradient pill + floating icon circle */
.ehs-suite-widget .suite-card-bar-wrap {
    position: absolute;
    top: 20px;
    left: -14px;
    display: flex;
    align-items: center;
    pointer-events: none;
    z-index: 2;
    flex-direction: row-reverse; /* Reverses the order so icon is on the left edge */
}

.ehs-suite-widget .suite-card-bar {
    width: 96px;
    height: 32px;
    border-radius: 100px;
    background: var(--sc-grad, linear-gradient(90deg, #0468D3, #0788E0));
    transition: width 0.3s ease;
    flex-shrink: 0;
}

.ehs-suite-widget .suite-card.has-anim:hover .suite-card-bar {
    width: 106px;
}

.ehs-suite-widget .suite-card-icon {
    position: absolute;
    right: -4px; /* Move icon to overlap the right side of the pill which is now pointing right */
    /* Width/Height handled by widget settings, defaults: 40px */
    border-radius: 50%;
    /* Background handled by widget settings, default: #fff */
    border: 2px solid var(--border);
    box-shadow: 0 2px 10px rgba(1, 39, 81, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    /* Font size handled by widget settings, default: 19px */
    z-index: 2;
    transition: border-color 0.3s, box-shadow 0.3s, transform 0.3s;
    /* Color handled by widget settings or inherited below */
}
/* If no custom color set, inherit from variant */
.ehs-suite-widget .suite-card-icon:not([style*="color"]) {
    color: var(--sc-color, #0468D3);
}

.ehs-suite-widget .suite-card.has-anim:hover .suite-card-icon {
    border-color: var(--sc-color, #0468D3);
    box-shadow: 0 4px 16px rgba(1, 39, 81, 0.14);
    transform: scale(1.08);
}

/* Card Body */
.ehs-suite-widget .suite-card-body {
    /* Padding handled by widget settings */
    display: flex;
    flex-direction: column;
    flex: 1; /* Key for equal height content distribution */
    z-index: 1;
}

.ehs-suite-widget .suite-card-title {
    /* Typography handled by widget settings */
    color: var(--blue-dark);
    margin-bottom: 8px;
    line-height: 1.3;
}

.ehs-suite-widget .suite-card-desc {
    /* Typography handled by widget settings */
    color: var(--text-body);
    line-height: 1.6;
    margin-bottom: 24px;
    flex: 1; /* Pushes button to bottom */
}

/* Button Style CTA */
.ehs-suite-widget .suite-card-link {
    /* Typography handled by widget settings */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    
    /* Button Styling */
    background: var(--sc-grad, linear-gradient(90deg, #0468D3, #0788E0));
    color: #ffffff;
    padding: 10px 24px;
    
    /* Updated Radius */
    border-radius: 16px; 
    
    text-decoration: none;
    transition: all 0.3s ease;
    
    /* Positioning */
    margin-top: auto;
    align-self: flex-start; /* Do not stretch full width */
    
    /* Shadow */
    box-shadow: 0 4px 10px rgba(4, 104, 211, 0.2);
}

.ehs-suite-widget .suite-card.has-anim:hover .suite-card-link {
    transform: translateY(-2px);
    box-shadow: 0 6px 14px rgba(4, 104, 211, 0.3);
    gap: 12px; /* Animate arrow gap */
}

.ehs-suite-widget .suite-card-link .arrow {
    transition: transform 0.3s ease;
}

/* Bottom gradient sweep on hover */
.ehs-suite-widget .suite-card::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--sc-grad, linear-gradient(90deg, #0468D3, #0788E0));
    transform: scaleX(0);
    transform-origin: right; /* Changed from left */
    transition: transform 0.35s ease;
}

.ehs-suite-widget .suite-card.has-anim:hover::after {
    transform: scaleX(1);
}

/* Color Variants */
.ehs-suite-widget .variant-deep-blue {
    --sc-grad: linear-gradient(90deg, #0468D3, #0788E0);
    --sc-color: #0468D3;
}
.ehs-suite-widget .variant-blue-sky {
    --sc-grad: linear-gradient(90deg, #5179F9, #47BFF4);
    --sc-color: #5179F9;
}
.ehs-suite-widget .variant-purple {
    --sc-grad: linear-gradient(90deg, #845CFF, #B59BF9);
    --sc-color: #845CFF;
}
.ehs-suite-widget .variant-teal {
    --sc-grad: linear-gradient(90deg, #0BA39A, #47BFF4);
    --sc-color: #0BA39A;
}
.ehs-suite-widget .variant-blue-teal {
    --sc-grad: linear-gradient(90deg, #0468D3, #0BA39A);
    --sc-color: #0468D3;
}
.ehs-suite-widget .variant-green {
    --sc-grad: linear-gradient(90deg, #1FB554, #0BA39A);
    --sc-color: #1FB554;
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
    .ehs-suite-widget.reduce-motion-aware .suite-card,
    .ehs-suite-widget.reduce-motion-aware .suite-card-bar,
    .ehs-suite-widget.reduce-motion-aware .suite-card-icon,
    .ehs-suite-widget.reduce-motion-aware .suite-card-link,
    .ehs-suite-widget.reduce-motion-aware .suite-card::after {
        transition: none !important;
        transform: none !important;
        animation: none !important;
    }
    
    .ehs-suite-widget.reduce-motion-aware .suite-card.has-anim:hover {
        transform: none;
    }
    
    .ehs-suite-widget.reduce-motion-aware .suite-card.has-anim:hover .suite-card-icon {
        transform: none;
    }
}