/* === Homepage Featured Rates CSS === */
/* File: public/css/homepage-features.css */
/* Updated: Thursday, April 10, 2025 at 7:00 PM MDT */

/* --- General Styling for Featured Sections --- */
.featured-rates-reel h2,
.featured-rates-list h2 {
    /* Heading is now left-aligned by default */
    /* font-size: 1.75rem; /* Example size */
    margin-bottom: 1.5rem; /* Space below heading */
    font-weight: 500; /* Example weight */
}

/* --- Horizontal Scrolling Reel (Mortgages) --- */

.horizontal-reel-container {
    overflow-x: auto;      /* Enable horizontal scrolling */
    white-space: nowrap;     /* Prevent items from wrapping */
    padding-bottom: 15px;    /* Space for scrollbar */
    margin-left: -8px;     /* Offset padding compensation if container has padding */
    margin-right: -8px;    /* Offset padding compensation */
}

/* Scrollbar Styling */
/* Standard properties (Firefox primarily) */
.horizontal-reel-container {
    scrollbar-width: thin;
    scrollbar-color: #0d6efd #e9ecef; /* Thumb color, Track color */
}

/* Webkit properties (Chrome, Safari, Edge, Opera) */
.horizontal-reel-container::-webkit-scrollbar {
    height: 8px; /* Height of horizontal scrollbar */
}

.horizontal-reel-container::-webkit-scrollbar-track {
    background: #e9ecef; /* Track color (light grey) */
    border-radius: 4px;
}

.horizontal-reel-container::-webkit-scrollbar-thumb {
    background-color: #0d6efd; /* Thumb color (Bootstrap primary blue) */
    border-radius: 4px;
    border: 2px solid #e9ecef; /* Padding around thumb */
}

.horizontal-reel-container::-webkit-scrollbar-thumb:hover {
    background-color: #0a58ca; /* Darker blue on hover */
}

/* Individual items within the reel */
.reel-item {
    display: inline-block;
    width: 280px;          /* Slightly narrower width example */
    max-width: 80%;        /* Prevent excessive width on small viewports before scroll */
    margin-left: 8px;      /* Use margin-left/right for consistent spacing */
    margin-right: 8px;
    vertical-align: top;
    white-space: normal;   /* Allow content inside to wrap */
    box-sizing: border-box;
    background-color: #fff;
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    /* Inherits border, rounded, p-3, shadow-sm from EJS */
}

.reel-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 6px 12px rgba(0,0,0,0.1); /* Enhance shadow more */
}

/* Rate display within reel items */
.reel-item .rate-prominent span {
    font-size: 2em;        /* Adjust size as desired */
    font-weight: 600;      /* Adjust weight */
    color: #0056b3;       /* Example darker blue */
    display: block;
    line-height: 1.1;
}

/* Specs display within reel items */
.reel-item .specs {
    color: #6c757d;
    min-height: 2.4em; /* Prevent height changes if one line vs two */
    line-height: 1.2em;
}

/* --- Enhanced Vertical List (Credit Cards) --- */

.enhanced-list-item {
    /* Uses Bootstrap list-group-item */
    /* Inherits p-3, mb-2, shadow-sm, border from EJS */
    transition: box-shadow 0.2s ease-in-out;
}

.enhanced-list-item:hover {
     box-shadow: 0 4px 12px rgba(0,0,0,0.12); /* Enhance shadow */
}

/* Rate display within list items */
.enhanced-list-item .rate-prominent {
    font-size: 1.6em;      /* Adjust size */
    font-weight: 600;      /* Adjust weight */
    color: #0056b3;       /* Example darker blue */
    vertical-align: middle;
}

/* Ensure logo/name column wraps reasonably */
.enhanced-list-item .col-md-5 span {
    word-break: break-word;
}

/* Add some minimum height to prevent items collapsing if data is missing */
.enhanced-list-item .row {
    min-height: 50px; /* Adjust as needed */
}


/* --- Shared Styles --- */

/* Ensure logos maintain aspect ratio */
.reel-item img,
.enhanced-list-item img {
    object-fit: contain;
    max-height: 30px; /* Consistent max height */
}

/* Adjust button alignment if needed */
.enhanced-list-item .btn {
   vertical-align: middle;
}