@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

/* ==================================== */
/* News Categories/Listing Styles (NCL) */
/* ==================================== */
*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
.ncl-news-listing-section {
    background-color: #dbe7e4; 
    padding: 60px 0;
    font-family: 'Roboto', sans-serif;
    color: #354e4c;
}

.ncl-section-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* --- News Grid Wrapper (For Centering and Layout) --- */
.ncl-grid-wrapper {
    display: flex;
    justify-content: center; /* Center the cards horizontally */
    gap: 30px; /* Space between the cards */
    flex-wrap: wrap; /* Allows cards to wrap on smaller screens */
}

/* --- Individual News Card --- */
.ncl-news-card {
    display: block;
    text-decoration: none;
    color: #354e4c;
    width: 100%; /* Default to full width on mobile */
    max-width: 500px; /* Set a max width for the cards on desktop */
    transition: box-shadow 0.3s ease;
}

.ncl-news-card:hover {
    /* Subtle lift/shadow effect on hover */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

/* Image Container */
.ncl-image-container {
    overflow: hidden;
    /* Sets a fixed aspect ratio for the image container */
    height: 0; 
    padding-bottom: 60%; /* 5:3 Aspect Ratio (60% of the width) */
    position: relative;
    border-radius: 4px;
}

.ncl-card-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

/* Image Hover Zoom Effect */
.ncl-news-card:hover .ncl-card-image {
    transform: scale(1.05);
}

/* Content Text Area */
.ncl-content-container {
    padding: 15px 0;
}

/* Title Styling */
.ncl-card-title {
    color: #354e4c;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.4;
    margin-bottom: 8px;
    text-transform: uppercase; /* Match the capitalized look */
    /* Hover effect on title */
    transition: color 0.3s;
}

.ncl-news-card:hover .ncl-card-title {
    color: #3e6d62; /* Highlight color on hover */
}

/* Date Styling */
.ncl-card-date {
    color: #777; /* Lighter color for date */
    font-size: 13px;
    font-weight: 300;
}


/* ==================================== */
/* 📱 MOBILE RESPONSIVENESS */
/* ==================================== */

@media (min-width: 768px) {
    .ncl-news-card {
        /* On desktop/tablet, cards take up less than 50% width to allow two side-by-side */
        width: calc(50% - 15px); /* Subtract half the gap */
    }
}

@media (max-width: 576px) {
    .ncl-image-container {
        /* Adjust image aspect ratio slightly for better viewing on small screens */
        padding-bottom: 70%; 
    }

    .ncl-card-title {
        font-size: 15px;
    }
}