/* --- Font Imports (Place at the VERY TOP of Additional CSS if using Google Fonts) --- */
/* If you have already imported these fonts elsewhere in your theme, you might not need this.
   However, the Customizer is a good place if you haven't. */
@import url('https://fonts.googleapis.com/css2?family=Merriweather:wght@700;900&family=Lato:wght@400;700&display=swap');

/* --- General Page Styles (Affecting the background of the page where insights are shown) --- */
/* You might want to scope this if this page has a unique body class,
   e.g., .page-template-page-insights-php .insights-section { ... }
   For now, this assumes the F8F5EB background is desired for the whole page view. */
.page-template-page-insights-php { /* Example: if your template file is page-insights.php */
   background-color: #F2F0E3; /* Light beige background for the page */
}


/* --- Insights Section --- */
.insights-section {
    padding: 60px 20px;
		background-color: #F2F0E3;
    /* The background-color might be on the body, or here if the section needs to stand out */
    /* background-color: #F8F5EB; */ /* Main background for this section if not on body */
}

.insights-container {
    max-width: 1200px;
    margin: 0 auto;
}

.insights-main-title {
    font-family: 'Merriweather', serif;
    font-size: 42px; /* Slightly adjusted for broader compatibility */
    font-weight: 900;
    color: #2A2F5C; /* Dark blue */
    text-align: left;
    margin-bottom: 10px;
    line-height: 1.2;
}

.insights-subtitle {
    font-family: 'Lato', sans-serif;
    font-size: 18px;
    color: #5C6A58; /* Olive green */
    text-align: left;
    margin-bottom: 45px; /* Increased spacing */
    max-width: 600px;
}

/* --- Insights Grid --- */
.insights-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 35px; /* Slightly increased gap */
}

/* --- Insight Card --- */
.insight-card {
    background-color: #FDFDFC;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.insight-card:hover {
    transform: translateY(-6px); /* Slightly more lift */
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
}

.insight-card .card-image-wrapper { /* Added .insight-card for specificity */
    width: 100%;
    height: 200px;
    overflow: hidden;
    border-bottom: 1px solid #eee; /* Subtle separator */
}

.insight-card .card-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease; /* Slightly slower image zoom */
}

.insight-card:hover .card-image-wrapper img {
    transform: scale(1.07); /* Slightly more zoom */
}

.insight-card .card-content { /* Added .insight-card for specificity */
    padding: 20px 25px 25px; /* Adjusted padding */
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    font-family: 'Lato', sans-serif;
}

.insight-card .card-meta {
    display: flex;
    align-items: center;
    margin-bottom: 15px; /* Increased spacing */
    font-size: 13px;
}

.insight-card .card-category {
    display: inline-block;
    padding: 5px 12px; /* Adjusted padding */
    border-radius: 15px;
    font-size: 11px; /* Slightly smaller category font */
    font-weight: 700; /* Bold */
    text-transform: uppercase; /* Uppercase for style */
    letter-spacing: 0.5px;
    margin-right: 10px;
    color: #fff;
    background-color: #6A67CE; /* Default purple */
}

/* Specific category colors (add more as needed based on your category slugs) */
/* Make sure these slugs match what's generated in your PHP: card-category-SLUG */
.insight-card .card-category.card-category-leadership { background-color: #6A67CE; }
.insight-card .card-category.card-category-strategy { background-color: #5DADE2; } /* Different blue */
.insight-card .card-category.card-category-management { background-color: #48C9B0; } /* Teal */
.insight-card .card-category.card-category-community { background-color: #F4D03F; color: #333; } /* Yellow, dark text */
.insight-card .card-category.card-category-fundraising { background-color: #E74C3C; } /* Red */
.insight-card .card-category.card-category-collaboration { background-color: #AF7AC5; } /* Lighter purple */
.insight-card .card-category.card-category-social-posts { background-color: #2ECC71; } /* Green, for the "Social Posts" category itself if shown */


.insight-card .card-read-time {
    color: #888; /* Slightly lighter read time */
    font-size: 12px;
}

.insight-card .card-title {
    font-family: 'Merriweather', serif;
    font-size: 20px;
    font-weight: 700;
    color: #2A2F5C;
    margin-top: 0;
    margin-bottom: 12px;
    line-height: 1.35;
}

.insight-card .card-title a {
    color: inherit;
    text-decoration: none;
}

.insight-card .card-title a:hover {
    color: #4A7EBB;
}

.insight-card .card-excerpt {
    font-size: 15px;
    color: #555;
    line-height: 1.6;
    margin-bottom: 20px; /* Increased spacing */
    flex-grow: 1;
}

.insight-card .card-excerpt p { /* If your excerpt is wrapped in  */
    margin-top: 0;
    margin-bottom: 0;
}

.insight-card .card-read-more {
    display: inline-block; /* Changed from block to inline-block */
    align-self: flex-start; /* Aligns to the start, use if not taking full width */
    color: #4A7EBB;
    font-weight: 700; /* Bold */
    font-size: 14px;
    text-decoration: none;
    margin-top: auto;
    padding: 6px 0; /* Add some padding for easier clicking if it's just text */
}

.insight-card .card-read-more:hover {
    color: #2A2F5C;
    text-decoration: underline;
}

/* --- Responsive Adjustments --- */
@media (max-width: 992px) {
    .insights-main-title {
        font-size: 36px;
    }
}

@media (max-width: 768px) {
    .insights-section {
        padding: 40px 15px;
    }
    .insights-main-title {
        font-size: 32px;
        text-align: center;
    }
    .insights-subtitle {
        font-size: 16px;
        text-align: center;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 35px;
    }
    .insights-grid {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Allow slightly smaller cards */
        gap: 25px;
    }
    .insight-card .card-content {
        padding: 20px;
    }
    .insight-card .card-title {
        font-size: 18px;
    }
}

@media (max-width: 480px) {
    .insights-main-title {
        font-size: 26px;
    }
    .insights-subtitle {
        font-size: 15px;
    }
    /* On very small screens, ensure cards are single column,
       the auto-fit minmax usually handles this, but can be explicit */
    .insights-grid {
        grid-template-columns: 1fr;
    }
    .insight-card .card-image-wrapper {
        height: 180px;
    }
    .insight-card .card-excerpt {
        font-size: 14px;
    }
}





















/* Blog Section*/


/* --- blogs Section --- */
.blogs-section {
    padding: 60px 20px;
		background-color: #F2F0E3;
    /* The background-color might be on the body, or here if the section needs to stand out */
    /* background-color: #F8F5EB; */ /* Main background for this section if not on body */
}

.blogs-container {
    max-width: 1200px;
    margin: 0 auto;
}

.blogs-main-title {
    font-family: 'Merriweather', serif;
    font-size: 42px; /* Slightly adjusted for broader compatibility */
    font-weight: 900;
    color: #2A2F5C; /* Dark blue */
    text-align: left;
    margin-bottom: 10px;
    line-height: 1.2;
}

.blogs-subtitle {
    font-family: 'Lato', sans-serif;
    font-size: 18px;
    color: #5C6A58; /* Olive green */
    text-align: left;
    margin-bottom: 45px; /* Increased spacing */
    max-width: 600px;
}

.viewmore{
		border-color:#070B47;
		color:#070B47;
		display: block; /* Makes the button a block-level element */
  	margin: 0 auto; /* Centers the block-level button horizontally */
		margin-top:30px;
}

.viewmore:hover{
		border-color:#070B47;
		color:white;
		background:#070B47;
}
/* --- blogs Grid --- */
.blogs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 35px; /* Slightly increased gap */
}

/* --- blog Card --- */
.blog-card {
    background-color: #FDFDFC;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.blog-card:hover {
    transform: translateY(-6px); /* Slightly more lift */
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
}

.blog-card .card-image-wrapper { /* Added .blog-card for specificity */
    width: 100%;
    height: 200px;
    overflow: hidden;
    border-bottom: 1px solid #eee; /* Subtle separator */
}

.blog-card .card-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease; /* Slightly slower image zoom */
}

.blog-card:hover .card-image-wrapper img {
    transform: scale(1.07); /* Slightly more zoom */
}

.blog-card .blog-card-content { /* Added .blog-card for specificity */
    padding: 20px 25px 25px; /* Adjusted padding */
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    font-family: 'Lato', sans-serif;
}

.blog-card .blog-card-meta {
    display: flex;
    align-items: center;
    margin-bottom: 15px; /* Increased spacing */
    font-size: 13px;
}

.blog-card .blog-card-category-blogs {
    display: inline-block;
    padding: 5px 12px; /* Adjusted padding */
    border-radius: 15px;
    font-size: 11px; /* Slightly smaller category font */
    font-weight: 700; /* Bold */
    text-transform: uppercase; /* Uppercase for style */
    letter-spacing: 0.5px;
    margin-right: 10px;
    color: #fff;
    background-color: #6A67CE; /* Default purple */
}

/* Specific category colors (add more as needed based on your category slugs) */
/* Make sure these slugs match what's generated in your PHP: card-category-SLUG */
.blog-card .card-category.card-category-leadership { background-color: #6A67CE; }
.blog-card .card-category.card-category-strategy { background-color: #5DADE2; } /* Different blue */
.blog-card .card-category.card-category-management { background-color: #48C9B0; } /* Teal */
.blog-card .card-category.card-category-community { background-color: #F4D03F; color: #333; } /* Yellow, dark text */
.blog-card .card-category.card-category-fundraising { background-color: #E74C3C; } /* Red */
.blog-card .card-category.card-category-collaboration { background-color: #AF7AC5; } /* Lighter purple */
.blog-card .card-category.card-category-social-posts { background-color: #2ECC71; } /* Green, for the "Social Posts" category itself if shown */


.blog-card .blog-card-read-time {
    color: #888; /* Slightly lighter read time */
    font-size: 12px;
}

.blog-card .blog-card-title {
    font-family: 'Merriweather', serif;
    font-size: 20px;
    font-weight: 700;
    color: #2A2F5C;
    margin-top: 0;
    margin-bottom: 12px;
    line-height: 1.35;
}

.blog-card .blog-card-title a {
    color: inherit;
    text-decoration: none;
}

.blog-card .blog-card-title a:hover {
    color: #4A7EBB;
}

.blog-card .blog-card-excerpt {
    font-size: 15px;
    color: #555;
    line-height: 1.6;
    margin-bottom: 20px; /* Increased spacing */
    flex-grow: 1;
}

.blog-card .blog-card-excerpt p { /* If your excerpt is wrapped in  */
    margin-top: 0;
    margin-bottom: 0;
}

.blog-card .blog-card-read-more {
    display: inline-block; /* Changed from block to inline-block */
    align-self: flex-start; /* Aligns to the start, use if not taking full width */
    color: #4A7EBB;
    font-weight: 700; /* Bold */
    font-size: 14px;
    text-decoration: none;
    margin-top: auto;
    padding: 6px 0; /* Add some padding for easier clicking if it's just text */
}

.blog-card .blog-card-read-more:hover {
    color: #2A2F5C;
    text-decoration: underline;
}

/* --- Responsive Adjustments --- */
@media (max-width: 992px) {
    .blogs-main-title {
        font-size: 36px;
    }
}

@media (max-width: 768px) {
    .blogs-section {
        padding: 40px 15px;
    }
    .blogs-main-title {
        font-size: 32px;
        text-align: center;
    }
    .blogs-subtitle {
        font-size: 16px;
        text-align: center;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 35px;
    }
    .blogs-grid {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Allow slightly smaller cards */
        gap: 25px;
    }
    .blog-card .blog-card-content {
        padding: 20px;
    }
    .blog-card .blog-card-title {
        font-size: 18px;
    }
}

@media (max-width: 480px) {
    .blogs-main-title {
        font-size: 26px;
    }
    .blogs-subtitle {
        font-size: 15px;
    }
    /* On very small screens, ensure cards are single column,
       the auto-fit minmax usually handles this, but can be explicit */
    .blogs-grid {
        grid-template-columns: 1fr;
    }
    .blog-card .blog-card-image-wrapper {
        height: 180px;
    }
    .blog-card .blog-card-excerpt {
        font-size: 14px;
    }
}