/* featured_news.css - Stylish eSports News Section */

.latest-news { /* Applies to both "Latest News from Opsters eSports" and "Featured News" sections */
    width: 100%;
    max-width: 1300px; /* Max width of the entire news section */
    margin-left: auto;  /* Centers the .latest-news block on the page */
    margin-right: auto; /* Centers the .latest-news block on the page */
    display: flex;
    flex-direction: column; /* Stack .fancy-title above the news items/container */
    align-items: center; /* Center children like .fancy-title and #latest-news-container horizontally */
    gap: 20px;
    padding: 20px;
    background: linear-gradient(135deg, #1a1a1a, #2d2d2d, #24243e);
    border-radius: 15px;
    box-shadow: 0 0 30px rgba(255, 0, 0, 0.6); /* Red glow */
    box-sizing: border-box; /* Include padding and border in the element's total width and height */
}

/* Style for the .fancy-title when it's a direct child of .latest-news */
.latest-news > .fancy-title {
    width: 100%; /* Make the title container take full width */
    max-width: 100%; /* Ensure it respects parent's padding */
    /* text-align: center; is already part of .fancy-title definition */
    /* margin-bottom is handled by the parent's gap or can be added if needed */
}

#latest-news-container { /* Container for dynamically JS-loaded news items */
    display: flex;
    justify-content: center; /* Centers the .ct-blog cards within this container */
    flex-wrap: wrap;
    gap: 20px; /* Gap between cards */
    width: 100%; /* Takes full width of its parent (.latest-news) content box */
    box-sizing: border-box;
}

/* Card styles with neon glow */
.ct-blog {
    flex: 1 1 320px; /* Base size, allows shrinking and growing, aims for roughly 3 on wide screens */
    min-width: 280px; /* Minimum width of a card */
    max-width: 400px; /* Maximum width of a card */
    margin-bottom: 1.5em; /* Spacing below cards if they wrap and gap doesn't cover it */
    border-radius: 15px;
    box-shadow: 0 0 20px rgba(255, 0, 0, 0.6); /* Red glow */
    transition: transform 0.4s ease, box-shadow 0.4s ease;
    background: rgba(0, 0, 0, 0.8); /* Dark background for the card */
    padding: 15px;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center; /* Centers content like image, title if they don't take full width */
    text-align: center; /* Default text alignment for content within the card */
    box-sizing: border-box;
}

.ct-blog:hover {
    transform: scale(1.05);
    box-shadow: 0 0 30px rgba(255, 0, 0, 0.9); /* Red glow on hover */
}

.ct-blog .inner {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%; /* Ensure inner content can utilize full card height */
}

/* Title style for the card header */
.ct-blog-header {
    font-size: 1.4em; /* Adjusted font size */
    font-weight: bold;
    color: #ffffff; /* White text for better contrast on dark card background */
    text-shadow: 0 0 8px rgba(0, 0, 0, 0.7); /* Subtle shadow for readability */
    margin-top: 0; /* Remove default margin */
    margin-bottom: 10px;
    width: 100%; /* Ensure header takes full width of the card's padding box */
}

/* Content styling for the card's main text */
.ct-blog-content {
    flex-grow: 1; /* Allows this section to take up remaining space */
    font-size: 1em;
    line-height: 1.5;
    color: #dddddd; /* Light gray text */
    width: 100%; /* Ensure content block takes full width */
    padding-top: 5px; /* Small space above text content */
}

/* Image container within the card */
.fauxcrop {
    width: 100%;
    /* height: 200px; /* MODIFIED: Removed fixed height */
    overflow: hidden; /* Retain for clipping image to border-radius */
    border-radius: 10px; /* Rounded corners for the image container */
    margin-bottom: 15px; /* Space below the image */
}

.uniform-img {
    width: 100%;
    height: auto; /* MODIFIED: Adjust height to maintain aspect ratio */
    object-fit: initial; /* MODIFIED: Use default image scaling; 'cover' would crop. 'contain' is also a good option. */
    display: block; /* ADDED: Good practice for responsive images, removes potential bottom space */
    transition: transform 0.3s ease;
}

.uniform-img:hover {
    transform: scale(1.1); /* Zoom effect on hover */
}

/* "Read more" button style */
.read-more {
    font-size: 1em;
    color: #ff0000; /* Red color for 'Read More' */
    cursor: pointer;
    text-decoration: none;
    font-weight: bold;
    transition: color 0.3s ease, text-shadow 0.3s ease;
    margin-top: auto; /* Pushes "Read more" to the bottom of the card */
    padding-top: 10px; /* Space above "Read more" */
}

.read-more:hover {
    color: #007bff; /* Blue color on hover */
    text-shadow: 0 0 10px rgba(0, 123, 255, 0.8); /* Blue glow */
}

/* Truncate long text: MODIFIED to always show full text */
.truncate {
    /* Properties for line clamping are removed or overridden to show full text */
    -webkit-line-clamp: unset; /* Effectively disables line clamping */
    display: block; /* Or 'initial', ensures proper block behavior for paragraph-like content */
    overflow: visible; /* Ensures content is not clipped by this rule itself */
    /* text-overflow: ellipsis; /* No longer relevant */
    /* -webkit-box-orient: vertical; /* No longer relevant */
}

/* .truncate.expanded class is no longer needed as .truncate is always expanded by default.
   It has been removed. */

/* Modal styles for image expansion */
.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    padding-top: 60px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9); /* Dark modal background */
    overflow: auto; /* Enable scroll if content is too large */
}

.modal-content {
    margin: auto;
    display: block;
    max-width: 90%;
    max-height: 80vh; /* Max height relative to viewport height */
    border: 3px solid #ff0000; /* Red border */
    box-shadow: 0 0 20px rgba(255, 0, 0, 0.8); /* Red glow */
}

.modal-content, #caption {
    animation: zoom 0.6s;
}

@keyframes zoom {
    from { transform: scale(0) }
    to { transform: scale(1) }
}

.close {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #fff;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
}

.close:hover,
.close:focus {
    color: #ff0000; /* Red color */
    text-shadow: 0 0 10px rgba(255, 0, 0, 0.8); /* Red glow */
    cursor: pointer;
}

#caption {
    margin: auto;
    display: block;
    text-align: center;
    color: #fff;
    padding: 10px 0;
    font-size: 1.2em;
    font-weight: bold;
}

/* Responsive adjustments for the news section and cards */

/* For tablets - Aim for 2 cards per row if space allows, otherwise 1 */
@media (max-width: 768px) {
    .ct-blog {
        /* If the container width (after padding) is less than (280px*2 + gap), it will naturally become 1 column.
           No explicit change to flex-basis needed here if min-width handles it.
           We can adjust max-width if we want to strictly enforce 2 columns until a smaller breakpoint.
        */
        max-width: calc(50% - 10px); /* If parent gap is 20px, allows two cards */
        /* If the screen is too small for two 280px cards + gap, min-width will make them stack */
    }
}


/* For small mobile devices - Ensure 1 card per row, centered */
@media (max-width: 576px) {
    .latest-news {
        padding: 15px; /* Reduce padding on the main news block */
        gap: 15px; /* Reduce gap between title and news items container */
    }

    #latest-news-container {
        gap: 15px; /* Reduce gap between cards if they were to wrap (though they'll be single column) */
    }
    /* If .ct-blog items are direct children of .latest-news (like in "Featured News") */
    .latest-news > .ct-blog {
        /* This ensures they are treated as full-width items in the column flow */
    }


    .ct-blog {
        flex-grow: 0; /* Don't allow growing beyond basis */
        flex-shrink: 0; /* Don't allow shrinking beyond basis if not needed */
        flex-basis: 100%; /* Card takes full available width */
        max-width: 100%;  /* Card takes full available width */
        min-width: 0; /* Allow card to be narrower than 280px if screen is very small */
        margin-left: auto; /* Helps ensure centering if for some reason basis 100% isn't perfect */
        margin-right: auto;
    }

    .fauxcrop {
        /* height: 180px; /* MODIFIED: Removed fixed height for mobile as well.
                             This specific rule block for .fauxcrop under this media query
                             is now empty as height was its only property.
                             It will inherit from the base .fauxcrop styles. */
    }

    .ct-blog-header {
        font-size: 1.25em; /* Adjust title size for mobile */
    }
}