/* --- _css-global-layout.css (Finalized Core Layout) --- */

/* --- 1. General Spacing & Scaffolding --- */

/* Standard spacing for main text blocks across all content pages */
.mission-narrative {
    padding: 15px 0;
    margin-bottom: 1.5rem;
}

/* Reusable Layout for Sub-Section Headers */
.page-section-header {
    margin-top: 0.5rem;
    padding-top: 1rem;
    border-top-style: solid;
    border-top-width: 1px;
}

/* --- 2. Standardized Section Containers (1050px Bounds) --- */

/* Outer full-width sections for edge-to-edge backgrounds */
.rt101,
.activities-section,
.resources-section,
.get-involved {
    width: 100%;
}

.resources-section,
.get-involved {
    padding: 2.5rem 0;
}

/* Inner 1050px boundaries */
.rt101 .container,
.activities-section,
.resources-section .container,
.get-involved .container {
    width: 100%;
    max-width: 1050px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    box-sizing: border-box;
}

/* Centered Section Headers */
.rt101 .page-section-header,
.activities-section .page-section-header,
.resources-section .page-section-header,
.get-involved .page-section-header {
    text-align: center;
    width: 100%;
    margin-bottom: 1rem;
}

/* Centered Intro Paragraphs */
.activities-section .mission-narrative,
.resources-section .mission-narrative,
.get-involved .mission-narrative {
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

/* --- 3. Card and Component Layouts --- */

/* Shared Card Content Alignment & Spacing */
.resource-card,
.get-involved-card {
    text-align: center;
}

.resource-card h3,
.get-involved-card h3 {
    margin-bottom: 0.75rem;
}

.resource-card p,
.get-involved-card p {
    margin-bottom: 1rem;
}

/* Standard Card Buttons */
.resource-card .cta-btn,
.get-involved-card .cta-btn {
    display: inline-block;
    padding: 0.65rem 1.25rem;
    text-decoration: none;
    border-radius: 8px;
    white-space: nowrap;
}

/* Global Card Architecture */
.rt-card-layout {
    padding: 1.5rem;
    border-radius: 12px;
}

.card-shadow {
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

/* --- 4. Reusable Grid Layouts (Mobile First) --- */

.resource-grid,
.get-involved-cards,
.get-involved-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin: 0 auto;
}

.benefits-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); 
    gap: 20px;
}

/* Tablet Breakpoint (768px) */
@media (min-width: 768px) {
    .grid-2-col-tablet,
    .resource-grid,
    .get-involved-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }
}

/* Desktop Breakpoint (1024px) */
@media (min-width: 1024px) {
    .grid-3-col-desktop,
    .resource-grid,
    .get-involved-cards {
        grid-template-columns: repeat(3, 1fr);
        gap: 1.5rem;
    }
}

/* Large Desktop Breakpoint (1200px) */
@media (min-width: 1200px) {
    .grid-4-col-large {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 1rem;
    }
}