/* css/resources.css */

/* --- Resources Page Hero Section (for resources.html) --- */
.hero-resources {
    /* background-image is set inline in HTML */
    background-repeat: no-repeat;
    background-position: center 80%; /* Example specific position */
    background-size: cover;
    padding: calc(var(--spacing-unit) * 5) 0; 
    color: var(--neutral-white);
    text-align: center;
    position: relative; 
}

.hero-resources .hero-overlay { 
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 90, 90, 0.55); /* Teal-based overlay */
    z-index: 1;
}
.hero-resources .container { 
    position: relative;
    z-index: 2;
}

.hero-resources h1 { /* Specific H1 style for this hero if needed */
    color: var(--neutral-white);
    /* font-size: 2.8rem; -- Uses global h1 size by default */
}

.hero-resources .hero-subtext { /* Specific subtext style for this hero */
    font-size: 1.25rem;
    color: rgba(255, 255, 255, 0.9);
    max-width: 750px;
    margin: var(--spacing-unit) auto 0 auto;
}

/* --- General Page Header (For sub-resource pages like Blog, FAQ etc.) --- */
.page-header { /* Used on blog.html, faq.html, glossary.html, whitepapers-case-studies.html, webinars-events.html */
    background-color: var(--neutral-white); 
    padding-top: calc(var(--spacing-unit) * 2.5); /* Consistent top padding for these headers */
    padding-bottom: calc(var(--spacing-unit) * 1.5); /* Consistent bottom padding */
}
.page-header h1 {
    color: var(--primary-blue);
    margin-bottom: calc(var(--spacing-unit) * 0.75); /* Increased bottom margin for these titles */
    text-align: center; 
}
.page-header p.hero-subtext { /* Re-using class name for consistency in structure, but styled for sub-pages */
    color: var(--neutral-dark-gray);
    max-width: 700px;
    margin: 0 auto; /* Center the paragraph */
    text-align: center;
    font-size: 1.1rem; 
    line-height: 1.6;
}


/* --- Resources Intro Section (on resources.html landing) --- */
.resources-intro p { /* Specific to the intro on resources.html */
    font-size: 1.1rem; 
    line-height: 1.7;
    text-align: center;
    max-width: 850px;
    margin-left: auto;
    margin-right: auto;
}

/* --- Resource Categories Section (on resources.html landing) --- */
.resource-categories h2 {
    text-align: center; /* Ensure centered */
    margin-bottom: calc(var(--spacing-unit) * 2);
}

.categories-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Adjusted minmax for better fit */
    gap: calc(var(--spacing-unit) * 2);
}

.category-card {
    background-color: var(--neutral-white);
    border-radius: var(--border-radius);
    padding: calc(var(--spacing-unit) * 1.5) calc(var(--spacing-unit) * 2); /* Adjusted padding */
    box-shadow: var(--box-shadow);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border-top: 4px solid var(--primary-teal); 
}

.category-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
}

.category-icon-wrapper {
    background-color: rgba(0, 128, 128, 0.1); 
    color: var(--primary-teal); 
    width: 60px; /* Slightly smaller icon wrapper */
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--spacing-unit);
    font-size: 1.5rem; /* Larger icon size */
}

.category-card h3 {
    font-size: 1.3rem; /* Adjusted size */
    color: var(--primary-blue);
    margin-bottom: calc(var(--spacing-unit) * 0.5); /* Reduced margin */
}

.category-card p {
    font-size: 0.9rem; /* Adjusted size */
    color: var(--neutral-dark-gray);
    line-height: 1.6;
    margin-bottom: calc(var(--spacing-unit) * 1.25); /* Adjusted margin */
    flex-grow: 1; 
}

.category-card .btn-secondary {
    margin-top: auto; 
    /* border-color & color from global .btn-secondary */
}
/* Hover for .btn-secondary already global */
.category-card .btn-secondary.disabled { /* Copied from previous valid version */
    background-color: var(--neutral-medium-gray);
    border-color: var(--neutral-medium-gray);
    color: var(--neutral-dark-gray);
    cursor: not-allowed;
    opacity: 0.7;
}
.category-card .btn-secondary.disabled:hover {
    transform: none;
}


/* --- Featured Resource Section (on resources.html landing) --- */
/* Uses .blog-preview-card structure from homepage.css, styles adapted for here */
.featured-resource h2 {
    text-align: center; /* Ensure centered */
    margin-bottom: calc(var(--spacing-unit) * 1.5);
}
.featured-card { 
    max-width: 700px; 
    margin-left: auto;
    margin-right: auto;
    /* It will inherit .blog-preview-card styles if that class is used in HTML and defined in homepage.css */
    /* Adding some specific box-shadow here if needed */
    box-shadow: 0 6px 18px rgba(0,0,0,0.08); 
}
.featured-card .card-content h3 { 
    font-size: 1.4rem; /* Slightly adjusted */
}
/* .featured-card .btn-primary {} -- Uses global .btn-primary */


/* --- Styles for Whitepapers & Case Studies Page (guides-page) --- */
/* .guides-page .page-header p {} -- Handled by .page-header p.hero-subtext */

.whitepapers-section h2, .casestudies-section h2 { /* Headers for these sections */
    text-align: center;
    margin-bottom: calc(var(--spacing-unit) * 2);
}

.guides-grid { /* Used for both whitepapers and case studies */
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Adjusted minmax */
    gap: calc(var(--spacing-unit) * 2); /* Adjusted gap */
}

.guide-card { 
    background-color: var(--neutral-white);
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    display: flex;
    flex-direction: column;
    overflow: hidden; 
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.guide-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.15);
}
.guide-card-image img {
    width: 100%;
    height: 180px; /* Adjusted height */
    object-fit: cover;
    display: block;
    border-bottom: 3px solid var(--primary-teal); 
}
.guide-card-content {
    padding: calc(var(--spacing-unit) * 1.25); /* Adjusted padding */
    display: flex;
    flex-direction: column;
    flex-grow: 1; 
}
.guide-card-content h3 {
    font-size: 1.25rem; /* Adjusted size */
    color: var(--primary-blue);
    margin-bottom: calc(var(--spacing-unit) * 0.6);
}
.guide-card-content p {
    font-size: 0.9rem; /* Adjusted size */
    color: var(--neutral-dark-gray);
    line-height: 1.6;
    margin-bottom: var(--spacing-unit);
    flex-grow: 1;
}
.guide-card-content .btn {
    margin-top: auto; 
    align-self: flex-start; 
}
.guide-card.case-study .guide-card-image img { 
    border-bottom: 3px solid var(--accent-blue);
}
.case-study-industry { 
    display: inline-block;
    font-size: 0.8rem; /* Adjusted size */
    font-weight: 600;
    color: var(--primary-teal);
    background-color: rgba(0,128,128,0.1);
    padding: calc(var(--spacing-unit)*0.2) calc(var(--spacing-unit)*0.6); /* Adjusted padding */
    border-radius: calc(var(--border-radius) / 2);
    margin-bottom: calc(var(--spacing-unit)*0.6);
}
.case-study-industry i {
    margin-right: 4px; /* Adjusted margin */
}


/* --- Specific Styles for Blog Listing Page (blog.html) --- */
.blog-listing-page .page-header { /* Ensuring specificity for blog page header if needed */
    /* Styles inherited from .page-header */
}
.blog-filters { /* For the placeholder section */
    /* padding-top, padding-bottom already in HTML inline style */
}
.blog-filters p {
    /* font-style: italic; -- Global or in .page-header p */
    /* color: var(--neutral-dark-gray); -- Global or in .page-header p */
}

.blog-posts-list { /* Wrapper for all blog posts */
    /* Uses .section-padding */
}

.blog-listing-page .blog-post-item { 
    background-color: var(--neutral-white);
    padding: calc(var(--spacing-unit) * 1.5); /* Adjusted padding */
    margin-bottom: calc(var(--spacing-unit) * 2); /* Adjusted margin */
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    display: flex; 
    flex-direction: column; 
    gap: calc(var(--spacing-unit) * 1.25); /* Adjusted gap */
}

.blog-post-image-wrapper {
    flex-shrink: 0; 
    max-width: 100%; 
}
.blog-post-image-wrapper img {
    border-radius: calc(var(--border-radius) - 4px); 
    object-fit: cover;
    width: 100%;
    max-height: 250px; /* Adjusted height */
}

.blog-post-content {
    flex-grow: 1;
}

.blog-listing-page .blog-post-item h2 {
    margin-top: 0; 
    margin-bottom: calc(var(--spacing-unit) * 0.4);
    font-size: 1.6rem; /* Adjusted size */
}
.blog-listing-page .blog-post-item h2 a { 
    color: var(--primary-blue);
}
.blog-listing-page .blog-post-item h2 a:hover {
    color: var(--primary-teal);
    text-decoration: underline;
}
.blog-post-meta {
    font-size: 0.85rem; /* Adjusted size */
    color: var(--neutral-dark-gray);
    margin-bottom: calc(var(--spacing-unit) * 0.75); /* Adjusted margin */
    display: flex;
    flex-wrap: wrap;
    gap: calc(var(--spacing-unit) * 0.75); /* Adjusted gap */
}
.blog-post-meta i {
    margin-right: calc(var(--spacing-unit) * 0.2);
    color: var(--primary-teal);
}
.blog-post-excerpt {
    margin-bottom: calc(var(--spacing-unit) * 1.25);
    font-size: 0.95rem; /* Adjusted size */
    line-height: 1.7;
}
.blog-listing-page .blog-post-item .btn-primary i {
    margin-left: 5px;
}

/* --- Blog Pagination (Placeholder on blog.html) --- */
.pagination {
    /* Uses .section-padding */
}
/* Full pagination styles if implemented:
.pagination .pagination-list { ... }
.pagination .page-link { ... }
*/


/* --- Specific Styles for FAQ Page (faq.html) --- */
.faq-section .faq-accordion { /* Wrapper for FAQ items */
    max-width: 800px; /* From inline style, good to have in CSS */
    margin-left: auto;
    margin-right: auto;
}
.faq-section .faq-item {
    margin-bottom: calc(var(--spacing-unit) * 0.75); /* Reduced margin */
    border: 1px solid var(--neutral-medium-gray);
    border-radius: var(--border-radius);
    background-color: var(--neutral-white);
    overflow: hidden; 
}
.faq-question {
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    width: 100%; 
    background-color: var(--neutral-light-gray);
    padding: calc(var(--spacing-unit) * 1); /* Adjusted padding */
    font-weight: 600;
    font-size: 1.05rem; /* Adjusted size */
    color: var(--primary-blue);
    cursor: pointer;
    border: none; 
    text-align: left; 
    /* border-radius: var(--border-radius) var(--border-radius) 0 0; -- Only if not .active */
    transition: background-color 0.3s ease;
}
.faq-item:not(.active) .faq-question { /* Apply full radius when closed */
    border-radius: var(--border-radius);
}
.faq-item.active .faq-question { /* Remove bottom radius when open */
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}
.faq-question:hover {
    background-color: rgba(0, 128, 128, 0.1); 
}

.faq-question::after { 
    content: '\f078'; 
    font-family: 'Font Awesome 6 Free'; 
    font-weight: 900;
    color: var(--primary-teal);
    transition: transform 0.3s ease;
    margin-left: var(--spacing-unit); 
    flex-shrink: 0; 
}
.faq-item.active .faq-question::after { 
    transform: rotate(180deg); 
}

.faq-answer {
    padding: calc(var(--spacing-unit) * 1.25); /* Padding for answer */
    display: none; /* JS will control this */
    border-top: 1px solid var(--neutral-medium-gray);
    line-height: 1.7;
    background-color: var(--neutral-white); 
    font-size: 0.95rem; /* Slightly smaller answer text */
}
/* .faq-item.active .faq-answer { display: block; } -- JS handles this */

/* --- Specific Styles for Webinars & Events Page --- */
/* .webinars-events-page .page-header p {} -- Handled by .page-header p.hero-subtext */

.upcoming-events-section .no-events-message,
.past-webinars-section .no-webinars-message { /* If you add a placeholder for no past webinars */
    font-style: italic;
    color: var(--neutral-dark-gray);
    padding: var(--spacing-unit) 0; /* Add some padding if it's the only content */
}
.webinars-grid { /* Shares structure with .guides-grid, ensure that's generic enough or duplicate */
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Adjusted */
    gap: calc(var(--spacing-unit) * 2); /* Adjusted */
    margin-top: calc(var(--spacing-unit) * 1.5); 
}
.webinar-card { /* Shares structure with .guide-card */
    background-color: var(--neutral-white);
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.webinar-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.15);
}
.webinar-card-thumbnail img { 
    width: 100%;
    height: 180px; /* Adjusted */
    object-fit: cover;
    display: block;
    border-bottom: 3px solid var(--accent-blue); 
}
.webinar-card-content { /* Shares structure with .guide-card-content */
    padding: calc(var(--spacing-unit) * 1.25);
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}
.webinar-card-content h3 {
    font-size: 1.25rem; /* Adjusted */
    color: var(--primary-blue);
    margin-bottom: calc(var(--spacing-unit) * 0.6);
}
.webinar-card-content p:not(.webinar-date) { /* Target the description paragraph */
    font-size: 0.9rem; /* Adjusted */
    color: var(--neutral-dark-gray);
    line-height: 1.6;
    margin-bottom: var(--spacing-unit);
    flex-grow: 1; 
}
.webinar-date {
    font-size: 0.8rem; /* Adjusted */
    color: var(--neutral-dark-gray);
    margin-bottom: calc(var(--spacing-unit)*0.6);
}
.webinar-card-content .btn {
    margin-top: auto; 
    align-self: flex-start;
}

/* CTAs on sub-resource pages */
.speaking-cta, .still-questions-cta, .suggest-term-cta { 
    /* .section-padding is global */
}
.speaking-cta p, .still-questions-cta p, .suggest-term-cta p {
    max-width: 650px; /* Adjusted */
    margin-left:auto; 
    margin-right:auto; 
    margin-bottom: calc(var(--spacing-unit) * 1.25);
}


/* --- Specific Styles for Glossary Page (glossary.html) --- */
.glossary-page .page-header { /* Ensure specificity if needed */
    /* Inherits from .page-header */
}
.glossary-section .container { /* To apply max-width from inline style */
    max-width: 850px; 
}
.glossary-section h2 { /* Sub-heading "Key Industry Terms & Definitions" */
    text-align: center;
    margin-bottom: calc(var(--spacing-unit) * 2.5); /* From inline style */
}
.glossary-section .glossary-term {
    margin-bottom: calc(var(--spacing-unit) * 1.5); /* Adjusted */
    padding-bottom: calc(var(--spacing-unit) * 1.25); /* Adjusted */
    border-bottom: 1px dashed var(--neutral-medium-gray);
}
.glossary-section .glossary-term:last-child {
    border-bottom: none;
    margin-bottom: 0;
}
.glossary-term dt {
    font-weight: 700;
    font-size: 1.15rem; /* Adjusted */
    color: var(--primary-blue);
    margin-bottom: calc(var(--spacing-unit) * 0.3);
}
.glossary-term dd {
    margin-left: 0; 
    color: var(--neutral-dark-gray);
    line-height: 1.7;
    font-size: 0.95rem; /* Adjusted */
}


/* --- Responsive Adjustments for Resources Pages Specific Elements --- */
@media (min-width: 768px) { 
    .blog-listing-page .blog-post-item {
        flex-direction: row; 
    }
    .blog-post-image-wrapper { /* On desktop, constrain image width */
        width: 280px; /* Adjusted */
        max-width: 33%; /* Adjusted */
    }
}


@media (max-width: 991px) { /* Tablet */
    .hero-resources { padding: calc(var(--spacing-unit) * 4) 0; } 
    /* .hero-resources h1 { font-size: 2.5rem; } -- Global */
    /* .hero-resources .hero-subtext { font-size: 1.15rem; } -- Generic */

    .categories-grid, .guides-grid, .webinars-grid { /* Make 2 columns on tablet if desired */
      /* grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); */ /* Already default */
      /* Forcing 2 columns: grid-template-columns: 1fr 1fr; */
    }
}

@media (max-width: 767px) { /* Mobile */
    .hero-resources { padding: calc(var(--spacing-unit) * 3.5) 0; } 
    /* .hero-resources h1 { font-size: 2.1rem; } -- Global */
    /* .hero-resources .hero-subtext { font-size: 1.05rem; } -- Generic */

    .categories-grid, .guides-grid, .webinars-grid { 
        grid-template-columns: 1fr; /* Ensure single column on mobile */
    }
    
    .blog-listing-page .blog-post-item h2 {
        font-size: 1.4rem; /* Adjusted for mobile */
    }
    .faq-question {
        font-size: 1rem;
    }
    .glossary-term dt {
        font-size: 1.1rem;
    }
}