/*
 * Condition Service Cards Stylesheet
 * Version: 1.9.5
 */

/* Box-sizing reset for the component to prevent layout issues. */
.csc-component-wrapper *,
.csc-component-wrapper *::before,
.csc-component-wrapper *::after { 
    box-sizing: border-box; 
}

/* Main component wrapper */
.csc-component-wrapper { 
    width: 100%; 
    position: relative; 
    padding: 0; /* Removed horizontal padding */
}

/* Scroll Buttons - Minimalistic */
.csc-scroll-button {
    display: none; /* Hide scroll buttons */
}

/* The horizontal scroll container */
.csc-card-container { 
    display: flex; 
    overflow-x: auto; 
    gap: 16px; 
    scroll-snap-type: x mandatory; 
    scroll-behavior: smooth; 
    padding: 10px 0; 
    scrollbar-width: none; /* For Firefox */
}

/* Hides scrollbar for Chrome, Safari, and Opera */
.csc-card-container::-webkit-scrollbar { 
    display: none; 
}

/* Styles for drag functionality */
.csc-card-container.active-drag {
    cursor: grabbing;
    user-select: none; /* Prevent text selection during drag */
}

/* Individual card styling */
.csc-card { 
    flex: 0 0 100%; /* Default for mobile: 1 card */
    scroll-snap-align: start; 
    background-color: #FFFFFF; 
    border: 1px solid #EAEAEA; 
    border-radius: 12px; 
    min-height: 150px; 
    display: flex; 
    flex-direction: column; 
    justify-content: space-between; 
    padding: 20px; 
    position: relative; /* For the covering link */
}

/* Card title heading */
.csc-card h3 { 
    font-family: 'DM Sans', sans-serif; 
    font-size: 1.25rem; /* Slightly smaller */
    font-weight: 400; /* Normal weight */
    margin: 0 0 8px 0; 
    line-height: 1.2; 
    position: relative; 
    z-index: 2; 
}

/* Link inside the card title */
.csc-card h3 a { 
    text-decoration: none; 
    color: #0E2D41; 
    /* Ensure the link itself is clickable if needed, but not the entire card via this h3 a */
    position: relative; /* If you want to add specific hit area adjustments to the link itself */
    z-index: 2; /* Ensure it's above any card background effects if card itself has z-index */
}

/* "Learn More" link */
.csc-card-link-text { 
    font-family: 'DM Sans', sans-serif; 
    color: black; 
    margin-top: auto; 
    text-decoration: none; 
    position: relative; 
    z-index: 2; 
    transition: color 0.2s ease-in-out;
}

.csc-card .csc-card-link-text:hover { /* Specific to non-CTA cards */
    color: #F7CD55; /* Yellow hover */
}

/* Special styling for the Call-To-Action card */
.csc-card--cta { 
    background-color: #0E2D41; 
    border-color: #0E2D41; 
}
.csc-card--cta h3 a { 
    color: #FFFFFF; 
}
.csc-card--cta .csc-card-link-text { 
    color: #FFFFFF; 
}
.csc-card--cta:hover .csc-card-link-text { 
    color: #F7CD55; 
}

/* Dot navigation container */
.csc-dots-container { 
    display: flex; 
    justify-content: center; 
    gap: 8px; 
    padding-top: 20px; 
}

/* Individual dot styling */
.csc-dot { 
    width: 8px; 
    height: 8px; 
    border-radius: 50%; 
    background-color: #D8D8D8; 
    cursor: pointer; 
    transition: background-color 0.3s ease; 
}

/* Active state for the current dot */
.csc-dot.active { 
    background-color: #0E2D41; 
}

/* Responsive adjustments for card display */
/* Tablet: 3 cards */
@media (min-width: 768px) {
    .csc-card {
        /* 3 cards, 16px gap. Total gap = 2 * 16px = 32px */
        flex-basis: calc((100% - 32px) / 3);
    }
}

/* Desktop: 5 cards */
@media (min-width: 1024px) {
    .csc-card {
        /* 5 cards, 16px gap. Total gap = 4 * 16px = 64px */
        flex-basis: calc((100% - 64px) / 5);
    }
}