/* Additional styles for the news hover effect - Homepage only */

/* Base styles for news posts - target only homepage */
.section-news .wp-block-post {
    position: relative;
    z-index: 1;
}

/* Ensure proper stacking context for hover effects */
.section-news .wp-block-post .wp-block-group {
    position: relative;
    z-index: 1;
    will-change: transform, background-color;
    transition: background-color 0.7s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.4s ease;
}

/* Add subtle animation to read more link - move 3px to the left instead */
.section-news .wp-block-post .wp-block-read-more strong {
    position: relative;
    transition: transform 0.3s ease;
    display: inline-block;
}


/* Direct CSS approach to color changes on hover - slowed down */
.section-news .wp-block-post:hover .wp-block-group {
    background-color: var(--wp--preset--color--accent-1) !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

/* Force white text on hover for all elements - slowed down transition */
.section-news .wp-block-post:hover .wp-block-group *,
.section-news .wp-block-post:hover .wp-block-post-title,
.section-news .wp-block-post:hover .wp-block-post-date time,
.section-news .wp-block-post:hover .wp-block-read-more,
.section-news .wp-block-post:hover .wp-block-read-more strong,
.section-news .wp-block-post:hover .wp-block-read-more mark {
    color: #ffffff !important;
    transition: color 0.7s ease;
    text-decoration: none !important;
}

.section-news .wp-block-post-date {
    margin-left: 0 !important;
}

/* Custom class for the hover background state */
.section-news .has-hover-background {
    background-color: var(--wp--preset--color--accent-1) !important;
}
/* Equal height for news post items - Add to your style.css */

/* Base setup for equal heights with flexbox */
.section-news .wp-block-post-template {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 20px;
}

.section-news .wp-block-post {
    display: flex;
    height: 100%;
}

.section-news .wp-block-post .wp-block-group {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    width: 100%;
}

/* Set a base minimum height that changes responsively */
.section-news .wp-block-post .wp-block-group {
    min-height: 180px; /* Default height */
}

/* Post date at the top */
/*.section-news .wp-block-post-date {
    margin-bottom: auto;
}
*/
/* Title in the middle with flexible space */
.section-news .wp-block-post-title {
    margin-top: 0;
    margin-bottom: auto;
}

/* Read more link at the bottom */
.section-news .wp-block-read-more {
    margin-top: auto;
}

/* Responsive adjustments */
@media (max-width: 1200px) {
    .section-news .wp-block-post-template {
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    }
}

@media (max-width: 781px) {
    .section-news .wp-block-post-template {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    }
    
    .section-news .wp-block-post .wp-block-group {
        min-height: 180px;
    }
}

@media (max-width: 600px) {
    .section-news .wp-block-post-template {
        grid-template-columns: 1fr;
    }
    
    .section-news .wp-block-post .wp-block-group {
        min-height: 150px;
    }
}