/* ===================================================================
   File: csr.css
   Description: Page-specific stylesheet for the Corporate Social 
   Responsibility (CSR) page of AGOID INTERIOR. This file contains 
   styles for unique sections like the CSR hero, philosophy pillars, 
   initiatives, impact stats, and the call-to-action block.
   =================================================================== */

/* --- 1. CSR Hero Section --- */
/* Styles the main banner at the top of the CSR page */
.csr-hero {
    height: 60vh; /* A shorter hero for an internal page */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
    overflow: hidden;
    background-image: url('https://images.unsplash.com/photo-1532629345422-7515f3d16bb6?q=80&w=2070&auto=format&fit=crop');
    background-size: cover;
    background-position: center;
    background-attachment: fixed; /* Creates a subtle parallax effect on scroll */
}

/* Dark overlay to ensure text is readable over the background image */
.csr-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(10, 10, 42, 0.75); /* Using the site's primary dark color with transparency */
}

/* Positions the content above the overlay */
.csr-hero .hero-content {
    position: relative;
    z-index: 1;
    max-width: 800px;
}

.csr-hero h1 {
    font-size: 3.5rem;
    font-weight: 800;
    margin-bottom: 20px;
}

.csr-hero p {
    font-size: 1.1rem;
    color: var(--secondary-text);
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

/* --- 2. Our Philosophy / Pillars Section --- */
/* Grid container for the three core philosophy cards */
.csr-pillars-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Creates a three-column layout */
    gap: 30px;
}

/* Individual card styling for each pillar */
.pillar-card {
    background: var(--card-bg);
    padding: 40px 30px;
    border-radius: 15px;
    text-align: center;
    border: 1px solid var(--border-color);
    transition: all 0.3s ease;
}

/* Hover effect to provide visual feedback to the user */
.pillar-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 10px 30px rgba(51, 213, 229, 0.2);
    border-color: var(--accent-cyan);
}

/* Styling for the icon within each pillar card */
.pillar-card .icon {
    font-size: 3.5rem;
    margin-bottom: 25px;
    /* Applying the site's signature gradient to the icon text */
    background: -webkit-linear-gradient(45deg, var(--accent-pink), var(--accent-cyan));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.pillar-card h3 {
    font-size: 1.4rem;
    margin-bottom: 15px;
}

/* --- 3. Featured Initiatives Section --- */
/* A slightly different background color to make this section stand out */
.initiatives-section {
    background-color: var(--dark-blue); 
}

/* Grid for initiative cards, responsive by default */
.initiatives-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 30px;
}

/* Styling for each initiative card */
.initiative-card {
    background: var(--card-bg);
    border-radius: 15px;
    overflow: hidden; /* Ensures the image corners are rounded */
    border: 1px solid var(--border-color);
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column; /* Stacks image and content vertically */
}

.initiative-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 25px rgba(232, 73, 232, 0.15);
}

.initiative-card img {
    width: 100%;
    height: 220px;
    object-fit: cover; /* Ensures images are cropped nicely without distortion */
}

/* Container for the text content below the image */
.initiative-content {
    padding: 25px;
    flex-grow: 1; /* Allows the content to fill available space, pushing the link to the bottom */
    display: flex;
    flex-direction: column;
}

.initiative-content h4 {
    font-size: 1.3rem;
    margin-bottom: 10px;
}

.initiative-content p {
    margin-bottom: 20px;
    flex-grow: 1; /* Makes the paragraph take up space to align buttons at the bottom */
}

/* A subtle text-based link for more info */
.btn-link {
    color: var(--accent-cyan);
    text-decoration: none;
    font-weight: 600;
    align-self: flex-start; /* Aligns the button to the left */
}

.btn-link i {
    margin-left: 5px;
    transition: transform 0.3s ease;
}

.btn-link:hover i {
    transform: translateX(5px);
}

/* --- 4. Our Impact in Numbers Section --- */
#impact {
    background-color: var(--card-bg); /* Alternating background color for visual separation */
}

.impact-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* Four-column layout for stats */
    gap: 30px;
}

.stat-box {
    text-align: center;
    padding: 20px;
}

.stat-box .icon {
    font-size: 3rem;
    color: var(--accent-pink); /* Using the alternate accent color */
    margin-bottom: 15px;
}

/* Styling for the large, animated number */
.stat-box .impact-number {
    font-size: 3.5rem;
    font-weight: 700;
    color: var(--primary-text);
    display: block;
    line-height: 1.2;
}

.stat-box p {
    font-size: 1.1rem;
    color: var(--secondary-text);
}

/* --- 5. Get Involved Call-to-Action (CTA) Section --- */
.get-involved-container {
    text-align: center;
    /* A subtle gradient background using the site's accent colors with low opacity */
    background: linear-gradient(135deg, rgba(232, 73, 232, 0.1), rgba(51, 213, 229, 0.1));
    padding: 60px 40px;
    border-radius: 20px;
    border: 1px solid var(--border-color);
}

.get-involved-container h2 {
    font-size: 2.2rem;
    margin-bottom: 15px;
}

.get-involved-container p {
    max-width: 600px;
    margin: 0 auto 30px auto;
}

/* ===================================================
   Responsive Styles for CSR Page
   =================================================== */

/* For Tablets (max-width: 992px) */
@media (max-width: 992px) {
    .csr-pillars-grid {
        grid-template-columns: 1fr; /* Stack pillars into a single column */
    }
    .impact-stats-grid {
        grid-template-columns: repeat(2, 1fr); /* Change stats grid to 2x2 */
    }
    .csr-hero h1 {
        font-size: 2.8rem;
    }
}

/* For Small Tablets / Large Phones (max-width: 768px) */
@media (max-width: 768px) {
    .csr-hero {
        height: 50vh; /* Reduce hero height */
    }
}

/* For Phones (max-width: 576px) */
@media (max-width: 576px) {
    .impact-stats-grid {
        grid-template-columns: 1fr; /* Stack stats into a single column */
    }
    .csr-hero h1 {
        font-size: 2.2rem;
    }
    .get-involved-container h2 {
        font-size: 1.8rem;
    }
}