﻿.card-newsroom {
    position: relative;
    overflow: hidden; 
}

.card-newsroom__image-wrapper {
    position: relative; /* Establishes stacking context */
    width: 100%;
    padding-top: 75%; /* Defaulting to 4:3, adjust this based on your typical image aspect ratio */
    background-color: #f0f0f0; /* Fallback if image doesn't load */
    --card-media-mask: 0.45; /* Default for white text, adjust as needed */
}

/* Image itself */
.card-newsroom__image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; 
    display: block;
    z-index: 1; /* Image is the base layer within the wrapper */
}

/* Mask for contrast - applied to the image-wrapper */
.card-newsroom__image-wrapper::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000000; /* Mask color, typically black */
    opacity: var(--card-media-mask); 
    z-index: 2; /* Mask is above the image */
    pointer-events: none; 
}

/* Optional: Class to disable the mask if needed on a specific card */
.card-newsroom--nomask .card-newsroom__image-wrapper::after {
    opacity: 0;
}

/* Content Overlay */
.card-newsroom__content-overlay {
    position: absolute;
    left: 5%; /* Adjusted spacing: left gutter */
    top: calc(5% * 1.5); /* Adjusted spacing: top gutter is 1.5 times the left gutter */
    right: 6%; 
    z-index: 3; /* Content must be above the mask */
    color: #FFFFFF; /* Default to white text for good contrast with a darker mask */
}

.card-newsroom__heading {
    font-family: 'Helvetica Neue', sans-serif; 
    font-weight: 700; 
    font-size: 2em; 
    /* color is inherited from .card-newsroom__content-overlay */
    margin-bottom: 0.25em; /* Tightened spacing between heading and CTA */
    line-height: 1.2; /* Corrected line-height */
}

.card-newsroom__cta {
    background: #DA291C; 
    color: #FFFFFF; /* CTA button text remains white on red background */
    font-family: 'Helvetica Neue', sans-serif; 
    font-weight: 700; 
    font-size: 1em; 
    padding: 0.5em 1em; 
    text-decoration: none;
    display: inline-block;
    border: none; 
}

.card-newsroom__cta--learnmore {
    background: none;
    color: #FFFFFF; /* Text-only learn more link also white for consistency */
    padding: 0;
    text-decoration: underline;
}

.card-newsroom__description {
    padding: 15px; 
    font-family: 'Helvetica Neue', sans-serif; 
    font-size: 0.9em;
    line-height: 1.5;
    /* display: none; */ 
}

/* --- Dark text variant --- */
/* When .dark class is added to .card-newsroom */
.card-newsroom.dark .card-newsroom__image-wrapper {
    --card-media-mask: 0.15; /* Lighter mask for better black text readability */
}

.card-newsroom.dark .card-newsroom__heading,
.card-newsroom.dark .card-newsroom__cta--learnmore {
    color: #000000; /* Black text for heading and learn more link */
}
/* Note: .card-newsroom.dark .card-newsroom__cta (the red button) text remains white */

/* Responsive adjustments */
@media (max-width: 768px) {
    .card-newsroom__content-overlay {
        left: 4%;   
        top: calc(4% * 1.5); /* Adjusted spacing: top gutter is 1.5 times the left gutter */
        right: 4%;  
    }

    .card-newsroom__heading {
        font-size: 1.5em;
        margin-bottom: 0.2em; /* Adjusted for smaller font size */
    }

    .card-newsroom__cta {
        font-size: 0.9em;
        padding: 0.4em 0.8em;
    }
}

@media (max-width: 480px) {
    .card-newsroom__content-overlay {
        left: 3%;   
        top: calc(3% * 1.5); /* Adjusted spacing: top gutter is 1.5 times the left gutter */
        right: 3%;  
    }
    .card-newsroom__heading {
        font-size: 1.3em; 
        margin-bottom: 0.15em; /* Adjusted for smaller font size */
    }

    .card-newsroom__cta {
        font-size: 0.8em; 
    }
}
