/*
 * Styles for the Defence News Archive Page
 * File: defence-news-archive-style.css
 */

/* General grid container for defence news listings */
.grid-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    margin-left: -10px;
    margin-right: -10px;
}

/* Individual defence news listing item */
.grid-item {
    font: normal normal 13px Pridi, Arial, Helvetica, sans-serif;
    color: #333;
    line-height: 1.7;
    word-break: break-word;
    word-wrap: break-word;
    background: #fffaf0; /* Light beige background, consistent */
    box-shadow: 0px 0.48px 0.96px rgba(0, 0, 0, 0.1), 0px 1.6px 4.8px rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    transition-duration: 0.7s;
    flex: 0 0 calc(25% - 20px);
    max-width: calc(25% - 20px);
    margin-left: 10px;
    margin-right: 10px;
    margin-bottom: 25px;
    box-sizing: border-box;
    height: auto; /* Adjust height based on content */
}

.grid-item:hover {
    background-color: white;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2), /* Elevation shadow */
                0 0 10px rgba(255, 255, 255, 0.7); /* White glow */
    transform: translateY(-3px); /* Slight upward movement for added elevation */
}

.grid-item article {
    padding: 10px;
}

/* Title of the defence news listing */
.grid-item-title {
    font-size: 1.4em;
    font-weight: bold;
    margin-bottom: 0.7em;
    color: #000;
    text-decoration: underline;
}

.grid-item-title a {
    color: #000;
    text-decoration: none;
}

.grid-item-title a:hover {
    color: #0078d7; /* Blue on hover */
}

/* Short summary or excerpt of the news item */
.news-summary { /* Changed from .company-summary */
    font-size: 1.1em;
    color: #666;
    margin-top: 20px;
    margin-bottom: 1.2em; /* Increased gap between title and summary */
}

/* Published date of the news listing */
.news-date { /* Changed from .company-date */
    font-size: 0.9em;
    color: #888;
    margin-bottom: 1em;
}

/* Container for the news thumbnail image */
.grid-item-thumbnail {
    margin-bottom: 10px;
    position: relative;
    overflow: hidden;
}

/* Style for the thumbnail image itself */
.grid-item-thumbnail img,
.grid-item-thumbnail img.wp-post-image { /* Added specificity for WordPress image class */
    width: 100%;
    height: auto;
    border-radius: 5px 5px 0 0;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.grid-item-thumbnail:hover img,
.grid-item-thumbnail:hover img.wp-post-image { /* Added specificity for WordPress image class */
    transform: scale(1.2);
}

/* Container for news categories */
.news-categories { /* Changed from .company-categories */
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-bottom: 10px;
}

/* Link for individual news categories */
.news-category-link { /* Changed from .company-category-link */
    background-color: #004080; /* Darker Blue/Navy for News categories, distinguishing from Company colors */
    padding: 5px 10px;
    border-radius: 0; /* Removing rounded corners (consistent with widget) */
    color: white;
    text-decoration: none;
    font-size: 0.8em;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.news-category-link:hover {
    background-color: #00264d; /* Even darker blue on hover */
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2); /* Elevation effect */
}


/* view all link (if present on archive page, though usually archive is the "view all") */

/* Styles for the container of the "View All" link above the listings */
.view-all-link.above-listings {
    text-align: left; /* left */
    margin-top: 5px; /* Adjust top margin as needed */
    margin-bottom: 5px; /* Add bottom margin if needed */
}

/* Styles for the link itself above the listings */
.view-all-link.above-listings a {
    display: inline-block;
    padding: 5px 20px;
    background-color: #ffd700; /* Yellow */
    color: rgb(18, 18, 18); /* Dark text */
    text-decoration: underline;
    font-weight: 600;
    border-radius: 5px;
    font-size: 1em;
}

.view-all-link.above-listings a:hover {
    background-color: #e6c200; /* Slightly darker yellow on hover */
}

/*end of view all*/


/* Social Media Styles (if present on archive page items) */
.social-icons {
    position: absolute;
    bottom: 10px;
    left: 10px;
    display: flex;
    gap: 5px;
    z-index: 10;
}

.social-icon {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 16px;
    text-decoration: none;
    transition: background-color 0.2s ease;
}

.social-icon:hover {
    background-color: rgba(0, 0, 0, 0.9);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .grid-item {
        flex: 0 0 calc(50% - 20px); /* Two columns on screens smaller than 768px */
        max-width: calc(50% - 20px);
    }
}

@media (max-width: 480px) {
    .grid-item {
        flex: 0 0 100%; /* One column on screens smaller than 480px */
        max-width: 100%;
    }
}