:root {
    --primary-red: #FA320A; 
    --primary-blue: #002D62;
    --accent-gold: #FFC107;
    --card-radius: 4px;
}
.cm-wrapper { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; max-width: 1280px; margin: 0 auto; color: #333; }
.cm-wrapper a { text-decoration: none; color: inherit; }

/* --- HERO SECTION STYLES (UPDATED FOR CLARITY) --- */
.cm-hero-wrap { 
    position: relative; height: 450px; width: 100%; 
    background-color: #000; overflow: hidden; margin-bottom: 40px; 
    display: flex; align-items: flex-end;
    text-decoration: none !important;
    border-radius: 8px;
}
.cm-hero-bg { 
    position: absolute; inset: 0; width: 100%; height: 100%; 
    object-fit: cover; 
    opacity: 0.85; 
    transition: 0.5s;
}
.cm-hero-wrap:hover .cm-hero-bg { 
    transform: scale(1.02); 
    opacity: 0.75; 
}

.cm-hero-overlay { 
    position: relative; z-index: 2; padding: 40px; 
    background: linear-gradient(to top, rgba(0,0,0,0.8), transparent); 
    width: 100%; 
}

.cm-hero-label { 
    background: var(--accent-gold); color: #000 !important; 
    font-size: 11px; font-weight: 800; text-transform: uppercase; 
    padding: 4px 8px; border-radius: 4px; display: inline-block; margin-bottom: 10px;
}

/* --- THE TEXT FIX (KEPT WHITE FOR READABILITY) --- */
.cm-hero-title { 
    color: #ffffff !important;
    font-size: 3rem; font-weight: 900; line-height: 1.1; margin: 0 0 15px 0; 
    text-shadow: 0 2px 15px rgba(0,0,0,0.9);
}
.cm-hero-meta { 
    color: #ffffff !important;
    display: flex; gap: 20px; align-items: center; margin-bottom: 20px; 
    font-weight: 700; font-size: 1.1rem; 
    text-shadow: 0 2px 10px rgba(0,0,0,0.9);
}

.cm-btn-hero { 
    background: var(--primary-red); color: white !important; border: none; 
    padding: 12px 30px; font-weight: 700; font-size: 14px; text-transform: uppercase; 
    border-radius: 30px; cursor: pointer; display: inline-block;
}
.cm-btn-hero:hover { background: white; color: var(--primary-red) !important; }

/* LIST SECTION STYLES */
.cm-section-header { display: flex; align-items: baseline; gap: 10px; margin: 20px 0; padding-top: 20px; border-top: 1px solid #eee; }
.cm-section-title { font-size: 24px; font-weight: 800; margin: 0; }
.cm-rail-container { overflow-x: auto; padding-bottom: 20px; }
.cm-rail-grid { display: flex; gap: 20px; }

.cm-card { width: 160px; flex-shrink: 0; }
.cm-poster-wrap { position: relative; border-radius: var(--card-radius); overflow: hidden; aspect-ratio: 2/3; margin-bottom: 10px; background: #ddd; }
.cm-poster-wrap img { width: 100%; height: 100%; object-fit: cover; }

.cm-scores { display: flex; gap: 10px; margin-bottom: 5px; font-size: 14px; font-weight: 700; }
.cm-score-item { display: flex; align-items: center; gap: 4px; }
.icon-dove svg { fill: #FFC107; width: 16px; } 
.icon-heart svg { fill: #FA320A; width: 16px; }

.cm-card-title { font-size: 15px; font-weight: 700; line-height: 1.3; display: block; margin-bottom: 4px; color: #333 !important; }

@media (max-width: 768px) {
    .cm-hero-wrap { height: 350px; }
    .cm-hero-title { font-size: 1.8rem; }
}