/* General Styles */
body {
    font-family: 'Montserrat', sans-serif;
    margin: 0; /* Body margin is 0, nav bar CSS handles body padding-top for topnav */
    padding: 0; /* Body padding is 0, nav bar CSS handles body padding-top for topnav */
    line-height: 1.6;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, #1a1a1a 0%, #0a0a0a 100%); /* Moved from inline style */
    color: #eee;
    overflow-x: hidden; /* Prevent horizontal scrollbars if content slightly overflows */
}

html { /* It's good practice to have html also allow for 100% height if body uses it */
    height: 100%;
}
/* html, body { height: 100%; } was present, min-height: 100vh on body is often more robust with flex */


/* Home section - Main content wrapper for the page */
#home {
    /* Removed: margin-top: 50px; Nav bar CSS handles body padding-top for top nav. */
    transition: margin-left 0.3s ease; /* Smooth transition for sidebar appearance */
    flex: 1; /* Allows #home to take up available vertical space if body is flex container */
    display: flex; /* To allow #main to potentially grow if needed, or just for structure */
    flex-direction: column;
}

/* Main content area within #home */
#main {
    /* .w3-padding-large class already provides padding: 16px 24px; */
    /* This element will be offset by #home's margin-left on large screens */
    width: 100%; /* Ensure it takes the full width of its parent #home */
    box-sizing: border-box; /* If adding padding/border here, include this */
    flex-grow: 1; /* If #home is flex, #main can grow */
}


/* Media queries to adjust layout based on navigation bar state */
@media screen and (min-width: 1200px) {
    #home {
        margin-left: 200px; /* Accommodate the 200px sidebar from Navigation_Bar.html */
    }
}

@media screen and (max-width: 1199px) {
    #home {
        margin-left: 0; /* No sidebar, content uses full width relative to body padding */
    }
    /* body padding-top: 50px is handled by Navigation_Bar.html CSS for the topnav */
}


/* REMOVED: Unused #main-content rule as no element has this ID */
/*
#main-content {
    flex: 1;
    padding: 20px;
}
*/

.container {
    width: 95%; /* This class is defined but not used in Achievements.html structure directly. Keeping for potential future use. */
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

/* Typography */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: bold;
    line-height: 1.2;
    margin-bottom: 0.5em;
    color: #dc3545;
    /* Consistent heading color */
}

h1 {
    font-size: 2.5em;
}

h2 {
    font-size: 2.0em;
}

h3 {
    font-size: 1.6em;
}

h4 {
    font-size: 1.3em;
}

h5 {
    font-size: 1.1em;
}

h6 {
    font-size: 0.9em;
}

/* Responsive Typography */
@media (max-width: 768px) {
    h1 {
        font-size: 2.0em;
    }

    h2 {
        font-size: 1.7em;
    }

    h3 {
        font-size: 1.4em;
    }

    h4 {
        font-size: 1.2em;
    }

    h5 {
        font-size: 1.0em;
    }

    h6 {
        font-size: 0.8em;
    }
}

/* Sections */
.achievements { /* This class is defined but not used in Achievements.html structure directly. */
    padding: 40px 0;
}

/* Page Title and Intro */
.page-title { /* This class is defined but not used in Achievements.html structure directly. */
    font-size: clamp(2em, 5vw, 2.5em);
    text-align: center;
    margin-bottom: 30px;
    color: #dc3545;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.intro-text { /* This class is defined but not used in Achievements.html structure directly. */
    font-size: 1.1em;
    color: #ccc;
    text-align: center;
    margin-bottom: 40px;
}

/* Introductory Heading - Styles moved from inline and made responsive */
.intro-heading {
    text-align: center;
    margin-bottom: 40px;
    padding: clamp(20px, 4vw, 30px); /* Responsive padding */
    background: linear-gradient(135deg, #1e1e1e, #2a2a2a); /* Subtle gradient */
    border-radius: 12px; /* Softer corners */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5); /* More pronounced shadow */
    color: #eee;
}

.intro-heading h1 {
    font-size: clamp(1.8em, 4vw, 2.4em); /* Responsive font size */
    margin-bottom: 15px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
    letter-spacing: 1px;
    color: #eee; /* Base color for h1, span overrides part of it */
}

.intro-heading h1 span { /* Specific style for the #00bfff part */
    color: #00bfff;
}

.intro-heading p {
    font-size: clamp(1em, 2.5vw, 1.2em); /* Responsive font size */
    color: #ddd;
    line-height: 1.6;
}


/* Achievement Grid and Cards */
.achievement-grid { /* This class is defined but not used in Achievements.html structure directly. */
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.achievement-card { /* This class is defined but not used in Achievements.html structure directly. */
    background-color: #111;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
    transition: box-shadow 0.3s ease;
}

.achievement-card:hover {
    box-shadow: 0 0 20px 5px rgba(0, 123, 255, 0.7);
}

.achievement-card img {
    width: 100%;
    border-radius: 8px;
    margin-bottom: 15px;
}

.achievement-card h3 {
    font-size: 1.5em;
    margin-bottom: 10px;
    color: #eee;
}

.achievement-card p {
    font-size: 1em;
    color: #ccc;
    margin-bottom: 20px;
}

/* View Details Button */
.view-details { /* This class is defined but not used in Achievements.html structure directly. */
    display: inline-block;
    padding: 10px 20px;
    background-color: #007bff;
    color: #fff;
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
    transition: background-color 0.3s ease;
}

.view-details:hover {
    background-color: #0056b3;
}

/* Announcement Section */
.recentNews {
    text-align: center;
    padding: 20px 0; /* Reduced top/bottom padding slightly */
    position: relative;
}

.recentNews::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100%;
    background: linear-gradient(to bottom, transparent, rgba(0, 123, 255, 0.1));
    pointer-events: none;
}

.news-title {
    padding-top: 30px;
    padding-bottom: 30px;
    font-family: 'Montserrat', sans-serif;
    font-weight: bold;
    color: #dc3545;
    text-shadow: 0 0 10px #dc3545;
    text-transform: uppercase;
    font-size: clamp(1.5em, 5vw, 3.0em); /* Adjusted max font size slightly */
}

/* Blog Content */
.recentNews .row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 30px;
    gap: 20px; /* Added gap for spacing between cards */
}

.recentNews .ct-blog {
    /* margin-bottom: 30px; /* Handled by gap in .row */
    /* flex: 0 0 calc(100% - 30px); */ /* Old flex calculation for margins */
    /* max-width: calc(100% - 30px); */
    /* margin: 0 15px 30px; /* Replaced by gap */

    flex-basis: 100%; /* Default: one column on smallest screens */
    max-width: 400px; /* Max width for a single card for better readability */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

@media (min-width: 600px) { /* Adjusted breakpoint for 2 columns slightly */
    .recentNews .ct-blog {
        flex-basis: calc(50% - 10px); /* (100% / 2) - (gap / 2) * (items_per_row -1 / items_per_row)  Simplified: calc(50% - half_gap)*/
        max-width: calc(50% - 10px); /* Ensure it doesn't exceed this with gap */
    }
}

@media (min-width: 992px) {
    .recentNews .ct-blog {
        flex-basis: calc(33.333% - 14px); /* Adjusted for 3 columns with 20px gap. (20px * 2/3) approx 13.33px. Using 14px for safety */
        max-width: calc(33.333% - 14px);
    }
}
@media (min-width: 1200px) { /* Optional: for 4 columns on very wide screens if desired */
    .recentNews .ct-blog {
        /* Adjust max-width if you change to 4 columns for .content style max-width:1400px */
        /* flex-basis: calc(25% - 15px);
        max-width: calc(25% - 15px); */
    }
}


.ct-blog:hover {
    transform: translateY(-5px);
    box-shadow: 0 0 20px 5px rgba(0, 123, 255, 0.7);
}

.ct-blog .inner {
    background-color: #222;
    padding: 10px;
    cursor: pointer;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    border: 1px solid #444;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.ct-blog .fauxcrop {
    overflow: hidden;
    border-bottom: 2px solid #333;
    width: 100%; /* Ensure fauxcrop takes full width of inner padding box */
}

.ct-blog .fauxcrop img {
    width: 100%;
    height: auto;
    display: block; /* Prevents bottom space under image */
    transition: transform 0.5s ease;
}

.ct-blog .inner:hover .fauxcrop img {
    transform: scale(1.05);
}

.ct-blog-content {
    padding: 20px;
    background-color: #2a2a2a;
    width: 100%;
    box-sizing: border-box; /* Include padding in width calculation */
    flex-grow: 1; /* Allows content to fill card height */
    display: flex;
    flex-direction: column;
}

.ct-blog-header {
    margin-top: 0;
    margin-bottom: 10px;
    font-weight: bold;
    text-align: center;
    width: 100%;
    color: #fff;
    text-shadow: 0 0 3px #aaa;
    font-size: clamp(1em, 3vw, 1.3em); /* Slightly smaller max for card headers */
}

.ct-blog-content p {
    margin-top: 0;
    margin-bottom: 10px; /* Added margin bottom for spacing between paragraphs */
    width: 100%;
    color: #eee;
    line-height: 1.6;
    flex-grow: 1; /* Allow main paragraph to expand */
}
.ct-blog-content p.achievement-date {
    flex-grow: 0; /* Date should not expand */
    margin-top: auto; /* Push date to bottom if card content is sparse */
    padding-top: 10px; /* Space above date */
}


.ct-blog-content .read-more {
    color: #007bff;
    text-decoration: none;
    font-weight: bold;
    margin-top: 10px;
    display: inline-block;
    position: relative;
    transition: color 0.3s ease;
}

.ct-blog-content .read-more:hover {
    color: #0056b3;
}

.ct-blog-content .read-more::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -3px;
    width: 100%;
    height: 2px;
    background-color: #007bff;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease;
}

.ct-blog-content .read-more:hover::after {
    transform: scaleX(1);
}

.ct-blog-content ul {
    list-style-type: none;
    padding-left: 0;
    font-size: 0.9em;
}

.ct-blog-content li {
    line-height: 1.8;
    color: #ddd;
}

.ct-blog-content strong {
    color: #007bff;
    font-weight: bold;
}

.ct-blog-content span {
    font-style: italic;
}

/* Modal Styles */
.achievements-container {
    display: flex; /* This div wraps the .content div */
    justify-content: center;
    /* align-items: center; Not strictly needed if .content handles its own width/max-width */
    /* min-height: 50vh; May not be necessary, content flow will determine height */
    width: 100%;
}

.modal {
    display: none;
    position: fixed;
    z-index: 1003; /* Ensure it's above loading screen if active simultaneously, but loading usually hides first */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.9); /* Slightly darker overlay */

    /* Flexbox for centering modal content (image and caption) */
    /* display: flex; Will be set to 'block' or 'flex' by JS. If using flex for centering: */
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px; /* Add some padding for small screens so content isn't edge-to-edge */
    box-sizing: border-box;
}

.modal-content {
    /* margin: auto; Not needed if modal is flex and centers children */
    display: block;
    max-width: 90%; /* Max width relative to viewport */
    max-height: 80vh; /* Max height relative to viewport height, leaves space for caption/close */
    object-fit: contain; /* Ensure image scales nicely within bounds */
}

#caption {
    /* margin: auto; Not needed if modal is flex */
    display: block;
    width: 80%;
    max-width: 700px;
    text-align: center;
    color: #ccc;
    padding: 15px 0; /* Increased padding for caption */
    /* height: 50px; Allow height to be auto */
    font-size: 1.1em;
}

/* Animation for Modal */
.modal-content,
#caption {
    animation-name: zoom;
    animation-duration: 0.6s;
}

@keyframes zoom {
    from {
        transform: scale(0.5); /* Start from a slightly larger scale for smoother zoom */
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

.close {
    position: absolute;
    top: 20px; /* Adjusted for better spacing */
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
    z-index: 1004; /* Above modal content */
}

.close:hover,
.close:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
}

/* Loading Screen (styles are in HTML, these are overrides or additions if needed) */
/* #loading-screen, #logo-container, #logo, #loading-bar, #progress are styled inline in HTML <style> tag */
/* Current inline styles for loading screen seem fine. */


/* Media Queries for Overall Responsiveness (some are already above for specific elements) */
@media (max-width: 768px) {
    /* .container class is not directly used for main layout, but if it were: */
    /*
    .container {
        width: 95%;
        padding: 10px;
    }
    */

    /* #logo size for loading screen is already handled in inline styles */

    /* .achievement-grid is not used, .recentNews .row is used */
}

.achievement-date {
    font-size: 0.8em; /* Adjust as needed */
    color: #777;      /* Adjust as needed */
    margin-top: 5px; /* Adjust as needed */
}